/**
 * DGA Unified Design System – Buttons (Blazor implementation)
 * Reference: https://design.dga.gov.sa/guidelines/components/actions/buttons
 * Sizes: Small 32px, Medium 40px (default), Large 48px.
 * States: default, hover, pressed, focus-visible, disabled, loading.
 * RTL/LTR: uses logical properties (padding-inline, margin-inline, etc).
 */

:root {
    /* Sizing (per guideline) */
    --dga-btn-height-sm: 32px;
    --dga-btn-height-md: 40px;
    --dga-btn-height-lg: 48px;

    --dga-btn-padding-x-sm: 12px;
    --dga-btn-padding-x-md: 16px;
    --dga-btn-padding-x-lg: 24px;

    --dga-btn-font-size-sm: 0.875rem;
    --dga-btn-font-size-md: 1rem;
    --dga-btn-font-size-lg: 1.125rem;

    --dga-btn-radius: 8px;

    /**
     * Colors – aligned to DGA guideline visuals.
     * Primary default color extracted from the guideline screenshot: #1B8354.
     */
    --dga-btn-primary: #1b8354;          /* default */
    --dga-btn-primary-hover: #166a44;    /* hover (darker) */
    --dga-btn-primary-pressed: #104630;  /* pressed (darker) */

    /* Secondary: outlined */
    --dga-btn-secondary-border: #1b8354;
    --dga-btn-secondary-text: #1b8354;
    --dga-btn-secondary-hover-bg: rgba(27, 131, 84, 0.10);
    --dga-btn-secondary-pressed-bg: rgba(27, 131, 84, 0.16);

    /* Tertiary: neutral outline */
    --dga-btn-tertiary-bg: transparent;
    --dga-btn-tertiary-border: #c7c8c8;
    --dga-btn-tertiary-text: #1f2937;
    --dga-btn-tertiary-hover: #f3f4f6;
    --dga-btn-tertiary-pressed: #e5e7eb;

    /* Danger */
    --dga-btn-danger: #dc3545;
    --dga-btn-danger-hover: #bb2d3b;
    --dga-btn-danger-pressed: #9a2530;

    /* Link */
    --dga-btn-link-color: #111827;
    --dga-btn-link-hover: #166a44;
    --dga-btn-link-hover-bg: rgba(27, 131, 84, 0.08);
    --dga-btn-link-pressed-bg: rgba(27, 131, 84, 0.12);

    /* Disabled */
    --dga-btn-disabled-bg: #e9ecef;
    --dga-btn-disabled-color: #6c757d;

    /* Focus */
    --dga-btn-focus-ring: 0 0 0 2px #1b8253, 0 0 0 4px #0b5cab;

    /* Motion */
    --dga-btn-transition: 150ms ease-in-out;
    --dga-btn-icon-filter-white: brightness(0) invert(1);
    --dga-btn-icon-filter-green: brightness(0) saturate(100%) invert(28%) sepia(22%) saturate(1395%) hue-rotate(102deg) brightness(93%) contrast(92%);

    --dga-btn-gap: 8px;
}

.dga-btn + .dga-btn {
    margin-inline-start: var(--dga-btn-gap);
}

/* A11y helper (Bootstrap-like) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Base – shared by <button> and <a role="button"> */
.dga-btn {
    transition: background-color var(--dga-btn-transition),
    border-color var(--dga-btn-transition),
    color var(--dga-btn-transition),
    box-shadow var(--dga-btn-transition),
    transform var(--dga-btn-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    font-family: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;

    border: 1px solid transparent;
    border-radius: var(--dga-btn-radius);

    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;

    user-select: none;
    -webkit-tap-highlight-color: transparent;
}



.dga-btn:focus {
    outline: none;
}

.dga-btn:focus-visible {
    outline: none;
    box-shadow: var(--dga-btn-focus-ring);
}

/* Icons inherit currentColor */
.dga-btn i,
.dga-btn [class^="fa-"],
.dga-btn [class*=" fa-"] {
    color: inherit;
}

.dga-btn img {
    filter: var(--dga-btn-icon-filter-green);
}

.dga-btn--primary img,
.dga-btn--danger img,
.dga-btn.dga-primary img,
.dga-btn.dga-danger img {
    filter: var(--dga-btn-icon-filter-white);
}

/* Disabled + loading */
.dga-btn:disabled,
.dga-btn.dga-btn--disabled,
a.dga-btn[aria-disabled="true"] {
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--dga-btn-disabled-bg) !important;
    border-color: var(--dga-btn-disabled-bg) !important;
    color: var(--dga-btn-disabled-color) !important;
    transform: none !important;
}

.dga-btn.dga-btn--loading {
    cursor: wait;
    pointer-events: none;
    transform: none !important;
}

/* Sizes */
.dga-btn--sm {
    height: var(--dga-btn-height-sm);
    min-height: var(--dga-btn-height-sm);
    padding-inline: var(--dga-btn-padding-x-sm);
    padding-block: 0;
    font-size: var(--dga-btn-font-size-sm);
}

.dga-btn--md {
    height: var(--dga-btn-height-md);
    min-height: var(--dga-btn-height-md);
    padding-inline: var(--dga-btn-padding-x-md);
    padding-block: 0;
    font-size: var(--dga-btn-font-size-md);
}

.dga-btn--lg {
    height: var(--dga-btn-height-lg);
    min-height: var(--dga-btn-height-lg);
    padding-inline: var(--dga-btn-padding-x-lg);
    padding-block: 0;
    font-size: var(--dga-btn-font-size-lg);
}

/* Full width */
.dga-btn--full-width {
    width: 100%;
}

/* Icon-only: square-ish */
.dga-btn--icon-only.dga-btn--sm {
    padding-inline: 8px;
    min-width: var(--dga-btn-height-sm);
}
.dga-btn--icon-only.dga-btn--md {
    padding-inline: 10px;
    min-width: var(--dga-btn-height-md);
}
.dga-btn--icon-only.dga-btn--lg {
    padding-inline: 12px;
    min-width: var(--dga-btn-height-lg);
}

/* Loading spinner */
.dga-btn__spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dga-btn-spin 0.6s linear infinite;
    flex-shrink: 0;
}

.dga-btn--loading .dga-btn__spinner {
    margin-inline-end: 8px;
}

[dir="rtl"] .dga-btn--loading .dga-btn__spinner {
    margin-inline-end: 0;
    margin-inline-start: 8px;
}

@keyframes dga-btn-spin {
    to { transform: rotate(360deg); }
}

/* =========================
   Variants
   ========================= */

/* Primary */
.dga-btn--primary {
    background-color: var(--dga-btn-primary);
    border-color: var(--dga-btn-primary);
    color: #ffffff;
}

.dga-btn.dga-primary {
    background-color: var(--dga-btn-primary);
    border-color: var(--dga-btn-primary);
    color: #ffffff;
}

.dga-btn--primary:hover:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-primary-hover);
    border-color: var(--dga-btn-primary-hover);
}

.dga-btn.dga-primary:hover:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-primary-hover);
    border-color: var(--dga-btn-primary-hover);
}

.dga-btn--primary:active:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-primary-pressed);
    border-color: var(--dga-btn-primary-pressed);
    transform: translateY(0);
}

.dga-btn.dga-primary:active:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-primary-pressed);
    border-color: var(--dga-btn-primary-pressed);
    transform: translateY(0);
}

.dga-btn--primary.dga-btn--selected,
.dga-btn--primary[aria-pressed="true"] {
    background-color: var(--dga-btn-primary-pressed);
    border-color: var(--dga-btn-primary-pressed);
}

.dga-btn.dga-primary.dga-btn--selected,
.dga-btn.dga-primary[aria-pressed="true"] {
    background-color: var(--dga-btn-primary-pressed);
    border-color: var(--dga-btn-primary-pressed);
}
/* Secondary (Outlined green) */
.dga-btn--secondary {
    background-color: transparent;
    border-color: var(--dga-btn-secondary-border);
    color: var(--dga-btn-secondary-text);
}

.dga-btn.dga-secondary {
    background-color: transparent;
    border-color: var(--dga-btn-secondary-border);
    color: var(--dga-btn-secondary-text);
}

.dga-btn--secondary:hover:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-secondary-hover-bg);
    border-color: var(--dga-btn-secondary-border);
}

.dga-btn.dga-secondary:hover:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-secondary-hover-bg);
    border-color: var(--dga-btn-secondary-border);
}

.dga-btn--secondary:active:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-secondary-pressed-bg);
    border-color: var(--dga-btn-secondary-border);
    transform: translateY(0);
}

.dga-btn.dga-secondary:active:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-secondary-pressed-bg);
    border-color: var(--dga-btn-secondary-border);
    transform: translateY(0);
}

.dga-btn--secondary.dga-btn--selected,
.dga-btn--secondary[aria-pressed="true"] {
    background-color: var(--dga-btn-secondary-pressed-bg);
    border-color: var(--dga-btn-secondary-border);
}

.dga-btn.dga-secondary.dga-btn--selected,
.dga-btn.dga-secondary[aria-pressed="true"] {
    background-color: var(--dga-btn-secondary-pressed-bg);
    border-color: var(--dga-btn-secondary-border);
}
/* Tertiary / neutral outline */
.dga-btn--tertiary {
    background-color: var(--dga-btn-tertiary-bg);
    border-color: var(--dga-btn-tertiary-border);
    color: var(--dga-btn-tertiary-text);
}

.dga-btn.dga-tertiary {
    background-color: var(--dga-btn-tertiary-bg);
    border-color: var(--dga-btn-tertiary-border);
    color: var(--dga-btn-tertiary-text);
}

.dga-btn--tertiary:hover:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-tertiary-hover);
    border-color: var(--dga-btn-tertiary-border);
}

.dga-btn.dga-tertiary:hover:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-tertiary-hover);
    border-color: var(--dga-btn-tertiary-border);
}

.dga-btn--tertiary:active:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-tertiary-pressed);
    transform: translateY(0);
}

.dga-btn.dga-tertiary:active:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-tertiary-pressed);
    transform: translateY(0);
}

.dga-btn--tertiary.dga-btn--selected,
.dga-btn--tertiary[aria-pressed="true"] {
    background-color: var(--dga-btn-tertiary-pressed);
}

.dga-btn.dga-tertiary.dga-btn--selected,
.dga-btn.dga-tertiary[aria-pressed="true"] {
    background-color: var(--dga-btn-tertiary-pressed);
}
/* Danger */
.dga-btn--danger {
    background-color: var(--dga-btn-danger);
    border-color: var(--dga-btn-danger);
    color: #ffffff;
}

.dga-btn.dga-danger {
    background-color: var(--dga-btn-danger);
    border-color: var(--dga-btn-danger);
    color: #ffffff;
}

.dga-btn--danger:hover:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-danger-hover);
    border-color: var(--dga-btn-danger-hover);
}

.dga-btn.dga-danger:hover:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-danger-hover);
    border-color: var(--dga-btn-danger-hover);
}

.dga-btn--danger:active:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-danger-pressed);
    border-color: var(--dga-btn-danger-pressed);
    transform: translateY(0);
}

.dga-btn.dga-danger:active:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-danger-pressed);
    border-color: var(--dga-btn-danger-pressed);
    transform: translateY(0);
}

.dga-btn--danger.dga-btn--selected,
.dga-btn--danger[aria-pressed="true"] {
    background-color: var(--dga-btn-danger-pressed);
    border-color: var(--dga-btn-danger-pressed);
}

.dga-btn.dga-danger.dga-btn--selected,
.dga-btn.dga-danger[aria-pressed="true"] {
    background-color: var(--dga-btn-danger-pressed);
    border-color: var(--dga-btn-danger-pressed);
}
/*!* Link-style *!*/
/*.dga-btn--link:not(.menu-item) {*/
/*    padding-inline: 0; !* typical DGA link-style *!*/

/*}*/
.dga-btn--link {
    background-color: transparent;
    border-color: transparent;
    color: var(--dga-btn-link-color);
}

.dga-btn.dga-link {
    background-color: transparent;
    border-color: transparent;
    color: var(--dga-btn-link-color);
}

.dga-btn--link:hover:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-link-hover-bg);
    color: var(--dga-btn-link-hover);
    transform: none;
}

.dga-btn.dga-link:hover:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-link-hover-bg);
    color: var(--dga-btn-link-hover);
    transform: none;
}

.dga-btn--link:active:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-link-pressed-bg);
    transform: none;
}

.dga-btn.dga-link:active:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
    background-color: var(--dga-btn-link-pressed-bg);
    transform: none;
}

.dga-btn--link.dga-btn--selected,
.dga-btn--link[aria-pressed="true"] {
    background-color: var(--dga-btn-link-pressed-bg);
}

.dga-btn.dga-link.dga-btn--selected,
.dga-btn.dga-link[aria-pressed="true"] {
    background-color: var(--dga-btn-link-pressed-bg);
}
/* =========================
   Anchor parity (prevent blue visited/active)
   ========================= */

a.dga-btn {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

a.dga-btn:link,
a.dga-btn:visited {
    color: inherit;
}

a.dga-btn.dga-btn--primary,
a.dga-btn.dga-btn--primary:link,
a.dga-btn.dga-btn--primary:visited { color: #fff; }

a.dga-btn.dga-btn--secondary,
a.dga-btn.dga-btn--secondary:link,
a.dga-btn.dga-btn--secondary:visited { color: var(--dga-btn-secondary-text); }

a.dga-btn.dga-btn--tertiary,
a.dga-btn.dga-btn--tertiary:link,
a.dga-btn.dga-btn--tertiary:visited { color: var(--dga-btn-tertiary-text); }

a.dga-btn.dga-btn--danger,
a.dga-btn.dga-btn--danger:link,
a.dga-btn.dga-btn--danger:visited { color: #fff; }

a.dga-btn.dga-btn--link,
a.dga-btn.dga-btn--link:link,
a.dga-btn.dga-btn--link:visited { color: var(--dga-btn-link-color); }

a.dga-btn.dga-btn--link:hover { color: var(--dga-btn-link-hover); }

.dga-btn--menu-item {
	background-color: transparent;
	border-color: transparent;

}

.dga-btn--menu-item:hover:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
	background-color: #f3f4f6;
}

.dga-btn--menu-item:active:not(:disabled):not(.dga-btn--disabled):not(.dga-btn--loading) {
	background-color: #f3f4f6;
}

a.dga-btn.dga-btn--menu-item,
a.dga-btn.dga-btn--menu-item:link,
a.dga-btn.dga-btn--menu-item:visited {
	color: inherit;
}

a.dga-btn.dga-btn--menu-item:hover {
	color: inherit;
}