/* =====================================================================
   SIM PEKERTI — UI BUNDLE / DESIGN SYSTEM
   A modern, clean, professional foundation for the redesign.
   Brand: Universitas Pendidikan Ganesha (Undiksha) — Navy & Gold/Orange.
   This file is framework-agnostic and self-contained (no Bootstrap needed).
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Web-font fallback (no layout shift)
   Inter is loaded from Google Fonts with font-display: swap. Before it
   arrives the browser paints with this fallback — Arial re-scaled to match
   Inter's metrics — so when Inter swaps in the glyphs sharpen but nothing
   resizes or reflows (no "text small then normal" flash).
   --------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    ascent-override: 90.00%;
    descent-override: 22.43%;
    line-gap-override: 0.00%;
    size-adjust: 107.40%;
}

/* ---------------------------------------------------------------------
   1. Design Tokens
   --------------------------------------------------------------------- */
:root {
    /* Brand — Navy (primary) */
    --c-navy-50:  #eef1fb;
    --c-navy-100: #d6ddf4;
    --c-navy-200: #aebbe8;
    --c-navy-300: #7d90d6;
    --c-navy-400: #4d63bd;
    --c-navy-500: #2f47a0;
    --c-navy-600: #21357f;
    --c-navy-700: #1b2a6b;
    --c-navy-800: #16235e;
    --c-navy-900: #101a47;

    /* Brand — Gold / Orange (accent) */
    --c-gold-300: #ffd089;
    --c-gold-400: #ffb74d;
    --c-gold-500: #f99417;
    --c-gold-600: #ef7c0e;
    --c-gold-700: #d9690a;

    /* Neutrals */
    --c-white:    #ffffff;
    --c-slate-25: #fbfcfe;
    --c-slate-50: #f6f8fb;
    --c-slate-100:#eef1f6;
    --c-slate-200:#e2e7f0;
    --c-slate-300:#cdd5e3;
    --c-slate-400:#9aa6bd;
    --c-slate-500:#6b7689;
    --c-slate-600:#4d5667;
    --c-slate-700:#374151;
    --c-slate-800:#1f2733;
    --c-slate-900:#121821;

    /* Status */
    --c-success:  #1f9d6b;
    --c-success-bg:#e7f6ef;
    --c-danger:   #d64550;
    --c-danger-bg:#fdecec;
    --c-warning:  #d98a0b;
    --c-warning-bg:#fdf3e2;
    --c-info:     #2f6fdb;
    --c-info-bg:  #e9f1fd;

    /* Semantic roles */
    --color-primary:      var(--c-navy-700);
    --color-primary-strong:var(--c-navy-800);
    --color-accent:       var(--c-gold-500);
    --color-text:         var(--c-slate-800);
    --color-text-muted:   var(--c-slate-500);
    --color-heading:      var(--c-navy-900);
    --color-border:       var(--c-slate-200);
    --color-bg:           var(--c-slate-50);
    --color-surface:      var(--c-white);

    /* Typography */
    --font-sans: 'Inter', 'Inter Fallback', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(16, 26, 71, .06);
    --shadow-sm: 0 2px 8px rgba(16, 26, 71, .08);
    --shadow-md: 0 12px 30px rgba(16, 26, 71, .10);
    --shadow-lg: 0 24px 60px rgba(16, 26, 71, .16);
    --shadow-focus: 0 0 0 4px rgba(47, 71, 160, .14);

    /* Motion */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --t-fast: .15s var(--ease);
    --t-base: .25s var(--ease);
}

/* ---------------------------------------------------------------------
   2. Reset & Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--color-heading);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

p { margin: 0; }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--t-fast);
}
a:not(.ui-btn):hover { color: var(--color-primary-strong); }

img { max-width: 100%; display: block; }

/* ---------------------------------------------------------------------
   3. Buttons
   --------------------------------------------------------------------- */
.ui-btn {
    --btn-bg: var(--color-primary);
    --btn-fg: #fff;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: auto;
    padding: .82rem 1.4rem;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t-base),
                background var(--t-base), border-color var(--t-base), color var(--t-base);
    user-select: none;
}
.ui-btn:hover  { transform: translateY(-1px); }
.ui-btn:active { transform: translateY(0); }
.ui-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ui-btn-block { width: 100%; }

.ui-btn-primary {
    background: linear-gradient(135deg, var(--c-navy-600), var(--c-navy-800));
    box-shadow: 0 10px 22px rgba(27, 42, 107, .28);
}
.ui-btn-primary:hover {
    box-shadow: 0 14px 28px rgba(27, 42, 107, .36);
}

.ui-btn-accent {
    background: linear-gradient(135deg, var(--c-gold-400), var(--c-gold-600));
    box-shadow: 0 10px 22px rgba(239, 124, 14, .26);
}

.ui-btn-ghost {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-border);
}
.ui-btn-ghost:hover {
    background: var(--c-slate-50);
    border-color: var(--c-slate-300);
    color: var(--color-primary-strong);
}

.ui-btn-danger {
    background: linear-gradient(135deg, #e2616b, var(--c-danger));
    box-shadow: 0 10px 22px rgba(214, 69, 80, .26);
}
.ui-btn-danger:hover {
    box-shadow: 0 14px 28px rgba(214, 69, 80, .34);
}

.ui-btn:disabled,
.ui-btn.is-disabled {
    opacity: .55;
    box-shadow: none;
    pointer-events: none;
    cursor: not-allowed;
}


/* ---------------------------------------------------------------------
   4. Form fields
   --------------------------------------------------------------------- */
.ui-field { margin-bottom: 1.05rem; }

.ui-label {
    display: block;
    margin-bottom: .42rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text);
}

.ui-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ui-input {
    width: 100%;
    padding: .82rem 1rem;
    font-family: inherit;
    font-size: .95rem;
    color: var(--color-text);
    background: var(--c-slate-25);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.ui-input::placeholder { color: var(--c-slate-400); }
.ui-input:hover { border-color: var(--c-slate-300); }
.ui-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--c-navy-400);
    box-shadow: var(--shadow-focus);
}

/* Leading icon + trailing action variants */
.ui-input-wrap-icon .ui-input { padding-left: 2.85rem; }
.ui-input-wrap-action .ui-input { padding-right: 2.85rem; }

.ui-input-icon {
    position: absolute;
    left: 1rem;
    display: flex;
    font-size: 1.05rem;
    color: var(--c-slate-400);
    pointer-events: none;
    transition: color var(--t-base);
}
.ui-input-wrap-icon .ui-input:focus ~ .ui-input-icon { color: var(--c-navy-500); }

.ui-input-action {
    position: absolute;
    right: .55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 1.05rem;
    color: var(--c-slate-400);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);
}
.ui-input-action:hover { color: var(--c-navy-600); background: var(--c-slate-100); }

/* Field-level error (also styles legacy CI delimiter classes) */
.ui-error,
.form-text.badge-danger,
.badge-danger {
    display: inline-block;
    margin-top: .42rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--c-danger);
}

/* ---------------------------------------------------------------------
   5. Alerts
   --------------------------------------------------------------------- */
.ui-alert {
    position: relative;
    margin: 0 0 1.5rem;
    padding: .9rem 2.6rem .9rem 1rem;
    font-size: .88rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}
.ui-alert a { text-decoration: underline; font-weight: 600; color: inherit; }

.app-card + .ui-alert { margin-top: 1.25rem; }

.ui-alert-danger  { color: #8f2b33; background: var(--c-danger-bg);  border-color: #f5c9cc; }
.ui-alert-success { color: #136846; background: var(--c-success-bg); border-color: #bfe6d4; }
.ui-alert-info    { color: #1d4ea0; background: var(--c-info-bg);    border-color: #cadef8; }
.ui-alert-warning { color: #92620a; background: var(--c-warning-bg); border-color: #f3dcae; }

.ui-alert-close {
    position: absolute;
    top: 50%;
    right: .55rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    font-size: .72rem;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    opacity: .55;
    cursor: pointer;
    transition: opacity var(--t-fast), background var(--t-fast);
}
.ui-alert-close:hover { opacity: 1; background: rgba(0, 0, 0, .07); }

/* ---------------------------------------------------------------------
   6. Misc utilities / dividers
   --------------------------------------------------------------------- */
.ui-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.35rem 0;
    color: var(--color-text-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.ui-divider::before,
.ui-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.ui-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}