/*
 * GPD design system.
 *
 * Contained-card SaaS: a neutral grey page, one white card carrying the task,
 * soft elevation, sentence-case labels, and a single brand blue taken from the
 * GPD globe for primary actions. Structure comes from borders, emphasis from
 * scale and weight — no ornament.
 *
 * Single source of truth for the redesign. AdminLTE is not loaded with it.
 */

/* ---------------------------------------------------------------- tokens */
:root {
    /* Neutrals */
    --page:      #f6f7f9;
    --surface:   #ffffff;
    --surface-2: #f9fafb;  /* wells, hovered rows, disabled fields */

    --ink:       #111827;
    --ink-body:  #374151;
    --ink-muted: #6b7280;
    --ink-faint: #9ca3af;

    --line:        #e5e7eb;
    --line-strong: #d1d5db;

    /* Brand — sampled from the GPD globe */
    --brand:        #0b6bb8;
    --brand-hover:  #095a9c;
    --brand-active: #074a82;
    --brand-tint:   #eff6fc;
    --brand-ring:   rgba(11, 107, 184, 0.16);
    --gold:         #a97c18;  /* the logo's second colour; used only for accents */

    /* Status */
    --ok:        #15803d;
    --ok-tint:   #f0fdf4;
    --ok-line:   #bbf7d0;
    --warn:      #b45309;
    --warn-tint: #fffbeb;
    --warn-line: #fde68a;
    --stop:      #b91c1c;
    --stop-tint: #fef2f2;
    --stop-line: #fecaca;

    /* Type */
    --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-base: 0.875rem;   /* 14px */
    --text-md:   0.9375rem;  /* 15px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.375rem;   /* 22px */
    --text-2xl:  1.75rem;    /* 28px */

    /* Spacing */
    --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
    --s5: 1.25rem; --s6: 1.5rem;  --s7: 2rem;    --s8: 2.5rem; --s9: 3rem;

    /* Shape — concentric: card 12, controls 8, inner chips 6 */
    --r-card: 12px;
    --r-ctrl: 8px;
    --r-chip: 6px;

    /* Elevation: shadows for lift, borders for structure */
    --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
    --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
    --shadow-md: 0 4px 12px -2px rgba(17, 24, 39, 0.08), 0 2px 4px -2px rgba(17, 24, 39, 0.04);
    --shadow-lg: 0 12px 32px -8px rgba(17, 24, 39, 0.14), 0 4px 8px -4px rgba(17, 24, 39, 0.06);

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in:  cubic-bezier(0.64, 0, 0.78, 0);
    --t-fast: 120ms;
    --t-base: 180ms;
    --t-slow: 280ms;
}

/* ------------------------------------------------------------- baseline */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink-body);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }

p { margin: 0; }

a {
    color: var(--brand);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    a:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 0.2em; }
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

.muted { color: var(--ink-muted); }
.small { font-size: var(--text-sm); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------ auth shell */
.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--s8) var(--s4) var(--s9);
    padding-top: calc(var(--s8) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--s9) + env(safe-area-inset-bottom, 0px));
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s6);
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.auth-brand:hover { color: var(--ink); text-decoration: none; }
.auth-brand img { height: 26px; width: auto; }

.auth-card {
    width: 100%;
    max-width: 27rem;
    padding: var(--s7);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-md);
    animation: cardIn var(--t-slow) var(--ease-out) both;
}
@media (max-width: 480px) {
    .auth-card { padding: var(--s5); }
}

/* A wider card for pages that carry a list of options. */
.auth-card-wide { max-width: 32rem; }

.auth-head { margin-bottom: var(--s6); }
.auth-title { margin-bottom: var(--s2); font-size: var(--text-2xl); }
.auth-lede { color: var(--ink-muted); font-size: var(--text-base); }

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: var(--s5) 0;
    color: var(--ink-faint);
    font-size: var(--text-sm);
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Links under the card, not inside it. */
.auth-links {
    width: 100%;
    max-width: 27rem;
    margin-top: var(--s5);
    display: grid;
    gap: var(--s2);
    text-align: center;
    font-size: var(--text-base);
    color: var(--ink-muted);
}
.auth-links-wide { max-width: 32rem; }

.auth-foot {
    margin-top: var(--s6);
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
    display: grid;
    gap: var(--s3);
    font-size: var(--text-base);
    color: var(--ink-muted);
    text-align: center;
}

/* ---------------------------------------------------------------- fields */
.field { margin-bottom: var(--s4); }

.field-label {
    display: block;
    margin-bottom: var(--s2);
    color: var(--ink);
    font-size: var(--text-base);
    font-weight: 500;
}

.field-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s2);
}
.field-row .field-label { margin-bottom: 0; }

.field-hint { margin-top: var(--s2); font-size: var(--text-sm); color: var(--ink-muted); }

.input, .select, .textarea {
    width: 100%;
    padding: 0.5625rem 0.75rem;
    font-family: inherit;
    font-size: 1rem; /* 16px stops iOS zooming on focus */
    line-height: 1.4;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-ctrl);
    box-shadow: var(--shadow-xs);
    transition-property: border-color, box-shadow, background-color;
    transition-duration: var(--t-fast);
    transition-timing-function: var(--ease-out);
}
.textarea { min-height: 5.5rem; resize: vertical; }

.select {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1.25 5 4.75 9 1.25' fill='none' stroke='%236b7280' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-faint); }

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.input:disabled, .select:disabled, .textarea:disabled {
    background: var(--surface-2);
    color: var(--ink-faint);
    box-shadow: none;
    cursor: not-allowed;
}

.input[aria-invalid="true"], .select[aria-invalid="true"] {
    border-color: var(--stop);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

.field-error {
    margin-top: var(--s2);
    font-size: var(--text-sm);
    color: var(--stop);
    animation: riseIn var(--t-fast) var(--ease-out) both;
}

.field-affix { position: relative; }
.field-affix .input { padding-right: 2.75rem; }
.field-affix-btn {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    border: 0;
    border-radius: var(--r-chip);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .field-affix-btn:hover { background: var(--surface-2); color: var(--ink); }
}

/* --------------------------------------------------------------- buttons */
.btn {
    --btn-bg: var(--brand);
    --btn-fg: #ffffff;
    --btn-border: var(--brand);
    --btn-shadow: var(--shadow-xs);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 2.5rem;
    padding: 0.5625rem 1rem;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--r-ctrl);
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    text-decoration: none;
    transition-property: background-color, color, border-color, box-shadow, opacity;
    transition-duration: var(--t-fast);
    transition-timing-function: var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn-block { width: 100%; }
.btn-lg { min-height: 2.75rem; font-size: var(--text-md); }

@media (hover: hover) and (pointer: fine) {
    .btn:hover { --btn-bg: var(--brand-hover); --btn-border: var(--brand-hover); --btn-shadow: var(--shadow-sm); }
}
.btn:active { --btn-bg: var(--brand-active); --btn-border: var(--brand-active); --btn-shadow: none; }

.btn-secondary {
    --btn-bg: var(--surface);
    --btn-fg: var(--ink);
    --btn-border: var(--line-strong);
    --btn-shadow: var(--shadow-xs);
}
@media (hover: hover) and (pointer: fine) {
    .btn-secondary:hover { --btn-bg: var(--surface-2); --btn-border: var(--line-strong); --btn-shadow: var(--shadow-sm); }
}
.btn-secondary:active { --btn-bg: var(--surface-2); --btn-border: var(--ink-faint); --btn-shadow: none; }

.btn-quiet {
    --btn-bg: transparent;
    --btn-fg: var(--ink-muted);
    --btn-border: transparent;
    --btn-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
    .btn-quiet:hover { --btn-bg: var(--surface-2); --btn-fg: var(--ink); --btn-shadow: none; }
}

.btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.btn[aria-busy="true"] .btn-label { opacity: 0; }
.btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 600ms linear infinite;
}

/* Identity-provider button: mark left, label centred like its peers. */
.btn-idp img { width: 18px; height: 18px; }

.btn-stack { display: grid; gap: var(--s2); }

/* ------------------------------------------------------------ containers */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-ctrl);
    padding: var(--s4);
}
.card-quiet { background: var(--surface-2); border-color: var(--line); }

/* Selectable option row. */
.choice {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    width: 100%;
    padding: var(--s3) var(--s4);
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-ctrl);
    cursor: pointer;
    transition-property: border-color, box-shadow, background-color;
    transition-duration: var(--t-fast);
    transition-timing-function: var(--ease-out);
}
.choice + .choice { margin-top: var(--s2); }
@media (hover: hover) and (pointer: fine) {
    .choice:hover { border-color: var(--ink-faint); background: var(--surface-2); }
}
.choice:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-tint);
    box-shadow: 0 0 0 1px var(--brand);
}
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--brand-ring); }
.choice input { margin: 0.1875rem 0 0; accent-color: var(--brand); }
.choice-body { display: grid; gap: 0.125rem; min-width: 0; }
.choice-title { display: block; color: var(--ink); font-weight: 500; }
.choice-desc { display: block; color: var(--ink-muted); font-size: var(--text-sm); }

/* --------------------------------------------------------------- badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-chip);
    background: var(--surface-2);
    color: var(--ink-muted);
    font-size: var(--text-xs);
    font-weight: 500;
}
.badge-brand    { background: var(--brand-tint); border-color: #cfe4f5; color: var(--brand); }
.badge-pending  { background: var(--warn-tint);  border-color: var(--warn-line); color: var(--warn); }
.badge-approved { background: var(--ok-tint);    border-color: var(--ok-line);   color: var(--ok); }
.badge-rejected { background: var(--stop-tint);  border-color: var(--stop-line); color: var(--stop); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --------------------------------------------------------------- alerts */
.alert {
    display: flex;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-ctrl);
    background: var(--surface-2);
    color: var(--ink-body);
    font-size: var(--text-base);
    animation: riseIn var(--t-base) var(--ease-out) both;
}
.alert-error   { background: var(--stop-tint); border-color: var(--stop-line); color: #7f1d1d; }
.alert-success { background: var(--ok-tint);   border-color: var(--ok-line);   color: #14532d; }
.alert-warn    { background: var(--warn-tint); border-color: var(--warn-line); color: #78350f; }
.alert-info    { background: var(--brand-tint); border-color: #cfe4f5; color: #0b4a7d; }

/* ---------------------------------------------------------- empty states */
.empty {
    display: grid;
    justify-items: center;
    gap: var(--s3);
    padding: var(--s8) var(--s4);
    text-align: center;
}
.empty-mark {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r-ctrl);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink-muted);
}
.empty-title { color: var(--ink); font-weight: 600; }
.empty-body { color: var(--ink-muted); font-size: var(--text-sm); max-width: 36ch; }

/* -------------------------------------------------------------- skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    border-radius: var(--r-chip);
    animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-line { height: 0.625rem; margin-bottom: var(--s2); }
.skeleton-line:last-child { width: 55%; }

/* ---------------------------------------------------------------- steps */
.steps { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s5); }
.step { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.step[data-state="done"] { background: var(--brand); }
.step[data-state="current"]::after {
    content: "";
    display: block;
    height: 100%;
    background: var(--brand);
    animation: growIn var(--t-slow) var(--ease-out) both;
}

/* --------------------------------------------------------------- detail */
/* Label/value rows inside a card, e.g. the request summary. */
.detail { display: grid; gap: var(--s3); margin: 0; }
.detail-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.detail-row dt { color: var(--ink-muted); font-size: var(--text-base); }
.detail-row dd { margin: 0; color: var(--ink); font-size: var(--text-base); font-weight: 500; text-align: right; }

/* ---------------------------------------------------------------- toasts */
.toast-stack {
    position: fixed;
    left: 50%;
    bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: grid;
    gap: var(--s2);
    z-index: 60;
    width: min(26rem, calc(100vw - 2rem));
}
.toast {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--ink);
    color: #ffffff;
    border-radius: var(--r-ctrl);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-base);
    animation: toastIn var(--t-base) var(--ease-out) both;
}
.toast[data-leaving="true"] { animation: toastOut var(--t-fast) var(--ease-in) both; }

/* ------------------------------------------------------------ demo strip */
.demo-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s3);
    padding: var(--s2) var(--s4);
    padding-top: calc(var(--s2) + env(safe-area-inset-top, 0px));
    background: var(--ink);
    color: #ffffff;
    font-size: var(--text-sm);
}
.demo-bar .badge { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); color: #ffffff; }

/* ------------------------------------------------------------- keyframes */
@keyframes cardIn   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes riseIn   { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes toastIn  { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(4px) scale(0.98); } }
@keyframes growIn   { from { width: 0; } to { width: 100%; } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes shimmer  { from { background-position: 100% 0; } to { background-position: 0 0; } }

.stagger > * { animation: riseIn var(--t-base) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 30ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 90ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 150ms; }
.stagger > *:nth-child(6) { animation-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}