/* ==========================================================================
   Informatika UPGRIS — Global Design System
   --------------------------------------------------------------------------
   Token desain + komponen dasar yang dipakai bersama oleh semua halaman.
   Semua kelas memakai prefix `ui-` agar tidak bentrok dengan style lama
   di halaman lain. Halaman cukup memakai kelas ini (opt-in).
   ========================================================================== */

:root {
    /* Warna brand (selaras dengan --primary di halaman menu lain) */
    --ui-primary: #2563eb;
    --ui-primary-600: #1d4ed8;
    --ui-primary-700: #1e40af;
    --ui-primary-400: #60a5fa;
    --ui-primary-100: #dbeafe;
    --ui-primary-50: #eff6ff;
    --ui-accent: #0ea5e9;
    --ui-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);

    /* Netral (slate) */
    --ui-ink: #0f172a;
    --ui-ink-2: #1e293b;
    --ui-body: #334155;
    --ui-muted: #64748b;
    --ui-subtle: #94a3b8;
    --ui-line: #e2e8f0;
    --ui-line-soft: #f1f5f9;
    --ui-bg: #f8fafc;
    --ui-surface: #ffffff;

    /* Latar gelap (hero & section gelap seperti halaman menu lain) */
    --ui-dark: #0b1220;
    --ui-dark-2: #0f172a;
    --ui-dark-line: rgba(255, 255, 255, 0.1);
    --ui-dark-muted: rgba(255, 255, 255, 0.62);

    /* Status */
    --ui-success: #16a34a;
    --ui-warning: #f59e0b;
    --ui-danger: #dc2626;

    /* Tipografi */
    --ui-font-head: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ui-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Bentuk & bayangan */
    --ui-radius-sm: 10px;
    --ui-radius: 16px;
    --ui-radius-lg: 24px;
    --ui-radius-pill: 999px;
    --ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
    --ui-shadow: 0 12px 32px -14px rgba(15, 23, 42, 0.2);
    --ui-shadow-lg: 0 28px 64px -24px rgba(15, 23, 42, 0.32);
    --ui-shadow-primary: 0 12px 28px -10px rgba(37, 99, 235, 0.55);

    /* Layout */
    --ui-container: 1240px;
    --ui-gutter: clamp(16px, 4vw, 32px);
    --ui-section-y: clamp(56px, 8vw, 104px);
    --ui-nav-offset: 136px; /* tinggi top-bar + navbar melayang */

    --ui-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.ui-container {
    width: 100%;
    max-width: var(--ui-container);
    margin-inline: auto;
    padding-inline: var(--ui-gutter);
}

.ui-section {
    position: relative;
    padding-block: var(--ui-section-y);
    font-family: var(--ui-font-body);
    color: var(--ui-body);
}

.ui-section--white { background: var(--ui-surface); }
.ui-section--muted { background: var(--ui-bg); }
.ui-section--dark {
    background:
        radial-gradient(ellipse at 15% 0%, rgba(37, 99, 235, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 100%, rgba(14, 165, 233, 0.12) 0%, transparent 55%),
        var(--ui-dark);
    color: var(--ui-dark-muted);
    overflow: hidden;
}

.ui-grid {
    display: grid;
    gap: clamp(16px, 2.4vw, 28px);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ui-grid-min, 260px)), 1fr));
}

/* --------------------------------------------------------------------------
   Judul section
   -------------------------------------------------------------------------- */
.ui-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: clamp(28px, 4vw, 48px);
}

.ui-section-head > div { max-width: 680px; }

.ui-section-head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ui-section-head--center > div { margin-inline: auto; }

.ui-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-bottom: 14px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-50);
    border: 1px solid var(--ui-primary-100);
    color: var(--ui-primary-600);
    font-family: var(--ui-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.2;
}

.ui-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.ui-section--dark .ui-eyebrow,
.ui-eyebrow--dark {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.28);
    color: #93c5fd;
}

.ui-title {
    font-family: var(--ui-font-head);
    font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: var(--ui-ink);
    margin: 0 0 12px;
}

.ui-title em,
.ui-title .ui-hl {
    font-style: normal;
    background: linear-gradient(90deg, var(--ui-primary) 0%, var(--ui-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ui-section--dark .ui-title { color: #fff; }
.ui-section--dark .ui-title em,
.ui-section--dark .ui-title .ui-hl {
    background: linear-gradient(90deg, #60a5fa 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.ui-lead {
    font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.08rem);
    line-height: 1.7;
    color: var(--ui-muted);
    margin: 0;
}

.ui-section--dark .ui-lead { color: var(--ui-dark-muted); }

/* --------------------------------------------------------------------------
   Tombol
   -------------------------------------------------------------------------- */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 22px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    font-family: var(--ui-font-body);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s var(--ui-ease), box-shadow 0.2s var(--ui-ease),
        background-color 0.2s, color 0.2s, border-color 0.2s;
}

.ui-btn i { font-size: 0.85em; transition: transform 0.2s var(--ui-ease); }
.ui-btn:hover i.fa-arrow-right { transform: translateX(3px); }
.ui-btn:hover { transform: translateY(-2px); }
.ui-btn:active { transform: translateY(0) scale(0.98); }

.ui-btn--primary {
    background: var(--ui-gradient);
    color: #fff;
    box-shadow: var(--ui-shadow-primary);
}
.ui-btn--primary:hover { color: #fff; filter: brightness(1.08); }

.ui-btn--outline {
    background: var(--ui-surface);
    color: var(--ui-primary-600);
    border-color: var(--ui-primary-100);
}
.ui-btn--outline:hover {
    color: var(--ui-primary-700);
    background: var(--ui-primary-50);
    border-color: var(--ui-primary-400);
}

.ui-btn--light {
    background: #fff;
    color: var(--ui-ink);
}
.ui-btn--light:hover { color: var(--ui-primary-600); }

.ui-btn--glass {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.ui-btn--glass:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

.ui-btn--sm { min-height: 38px; padding: 8px 16px; font-size: 0.84rem; border-radius: 10px; }

/* --------------------------------------------------------------------------
   Kartu & elemen kecil
   -------------------------------------------------------------------------- */
.ui-card {
    position: relative;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-sm);
    padding: clamp(20px, 2.6vw, 32px);
    transition: transform 0.3s var(--ui-ease), box-shadow 0.3s var(--ui-ease), border-color 0.3s;
}

.ui-card--hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--ui-shadow);
    border-color: var(--ui-primary-100);
}

.ui-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--ui-primary-50);
    color: var(--ui-primary);
    font-size: 1.15rem;
}

.ui-icon-tile--solid {
    background: var(--ui-gradient);
    color: #fff;
    box-shadow: var(--ui-shadow-primary);
}

.ui-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-bg);
    border: 1px solid var(--ui-line);
    color: var(--ui-body);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}

.ui-chip i { color: var(--ui-primary); font-size: 0.85em; }

.ui-empty {
    grid-column: 1 / -1;
    padding: 48px 20px;
    text-align: center;
    color: var(--ui-subtle);
    border: 1.5px dashed var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}

.ui-empty i { display: block; font-size: 1.8rem; margin-bottom: 10px; }

.ui-clamp-2,
.ui-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ui-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.ui-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

.ui-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Fokus keyboard yang jelas untuk elemen ui-* */
.ui-btn:focus-visible,
.ui-card a:focus-visible,
.ui-section a:focus-visible,
.ui-section button:focus-visible {
    outline: 3px solid var(--ui-primary-400);
    outline-offset: 3px;
    border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .ui-btn,
    .ui-card { transition: none; }
    .ui-btn:hover,
    .ui-card--hover:hover { transform: none; }
}

/* ==========================================================================
   KOMPONEN HALAMAN (dipakai halaman menu selain beranda)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero — header gelap seragam untuk semua halaman menu
   Markup: @include('partials.ui.page-hero', [...])
   -------------------------------------------------------------------------- */
.ui-page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(var(--ui-nav-offset) + clamp(16px, 4vw, 48px)) 0 clamp(56px, 8vw, 96px);
    background: var(--ui-dark);
    color: #fff;
    font-family: var(--ui-font-body);
}
.ui-page-hero--has-toolbar { padding-bottom: clamp(88px, 10vw, 120px); }

.ui-page-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    transform: scale(1.04);
}
.ui-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at 12% 0%, rgba(37, 99, 235, 0.38) 0%, transparent 55%),
        radial-gradient(ellipse at 95% 100%, rgba(14, 165, 233, 0.2) 0%, transparent 55%),
        linear-gradient(180deg, rgba(11, 18, 32, 0.55) 0%, rgba(11, 18, 32, 0.92) 100%);
}
.ui-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
}

.ui-page-hero-inner { max-width: 860px; }
.ui-page-hero--center .ui-page-hero-inner { margin-inline: auto; text-align: center; }
.ui-page-hero--center .ui-breadcrumb,
.ui-page-hero--center .ui-hero-badges { justify-content: center; }

.ui-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}
.ui-breadcrumb li { display: inline-flex; align-items: center; gap: 10px; }
.ui-breadcrumb li + li::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.6rem;
    opacity: 0.5;
}
.ui-breadcrumb a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.2s; }
.ui-breadcrumb a:hover { color: #93c5fd; }
.ui-breadcrumb [aria-current] { color: #fff; font-weight: 600; }

.ui-page-hero .ui-eyebrow { margin-bottom: 16px; }
.ui-page-title {
    font-family: var(--ui-font-head);
    font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 14px;
    text-wrap: balance;
}
.ui-page-title em {
    font-style: normal;
    background: linear-gradient(90deg, #93c5fd 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ui-page-subtitle {
    margin: 0;
    max-width: 680px;
    font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
}
.ui-page-hero--center .ui-page-subtitle { margin-inline: auto; }

.ui-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ui-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--ui-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}
.ui-hero-badge i { color: #60a5fa; }

/* --------------------------------------------------------------------------
   Badan halaman: ditarik ke atas menimpa bagian bawah hero
   -------------------------------------------------------------------------- */
.ui-page-body {
    position: relative;
    z-index: 2;
    padding-bottom: var(--ui-section-y);
    font-family: var(--ui-font-body);
    color: var(--ui-body);
}
.ui-page-body--overlap { margin-top: clamp(-64px, -6vw, -40px); }
.ui-page-bg { background: var(--ui-bg); }

/* --------------------------------------------------------------------------
   Toolbar pencarian / filter
   -------------------------------------------------------------------------- */
.ui-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: clamp(14px, 2vw, 20px);
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
    margin-bottom: clamp(24px, 4vw, 40px);
}
.ui-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 0; }
.ui-field--grow { flex: 3 1 280px; }
.ui-field > label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-subtle);
}
.ui-input {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px;
    background: var(--ui-bg);
    border: 1.5px solid var(--ui-line);
    border-radius: 12px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.ui-input:focus-within {
    border-color: var(--ui-primary-400);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.ui-input > i { color: var(--ui-subtle); font-size: 0.9rem; flex-shrink: 0; }
.ui-input input,
.ui-input select {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 0.92rem;
    color: var(--ui-ink-2);
}
.ui-input select { cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center no-repeat; }
.ui-toolbar > .ui-btn { flex: 0 0 auto; }
@media (max-width: 599px) {
    .ui-toolbar > .ui-btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Pill filter
   -------------------------------------------------------------------------- */
.ui-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: var(--ui-radius-pill);
    border: 1px solid var(--ui-line);
    background: var(--ui-surface);
    color: var(--ui-body);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.ui-pill:hover { border-color: var(--ui-primary-400); color: var(--ui-primary-600); }
.ui-pill.active,
.ui-pill[aria-pressed="true"] {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.6);
}

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--ui-radius-pill);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--ui-line-soft);
    color: var(--ui-muted);
}
.ui-badge--primary { background: var(--ui-primary-50); color: var(--ui-primary-600); }
.ui-badge--info { background: #e0f2fe; color: #0369a1; }
.ui-badge--warning { background: #fef3c7; color: #b45309; }
.ui-badge--success { background: #dcfce7; color: #15803d; }
.ui-badge--violet { background: #ede9fe; color: #6d28d9; }

/* --------------------------------------------------------------------------
   Tabel
   -------------------------------------------------------------------------- */
.ui-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.88rem; }
.ui-table th {
    padding: 12px 18px;
    background: var(--ui-bg);
    border-bottom: 1px solid var(--ui-line);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-subtle);
    white-space: nowrap;
}
.ui-table td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--ui-line-soft);
    color: var(--ui-body);
    vertical-align: middle;
}
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr { transition: background 0.15s; }
.ui-table tbody tr:hover td { background: #fbfdff; }
.ui-table .ui-num { text-align: center; }

/* --------------------------------------------------------------------------
   Stat tile (angka ringkas)
   -------------------------------------------------------------------------- */
.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.ui-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--ui-bg);
    border: 1px solid var(--ui-line-soft);
    border-radius: 14px;
}
.ui-stat .ui-icon-tile { width: 44px; height: 44px; font-size: 1.05rem; border-radius: 12px; }
.ui-stat-value { display: block; font-family: var(--ui-font-head); font-size: 1.35rem; font-weight: 800; color: var(--ui-ink); line-height: 1.15; }
.ui-stat-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ui-subtle); margin-top: 2px; }

/* ==========================================================================
   Varian responsif/hover utilitas Tailwind yang hilang dari build (lihat tw-compat.css)
   ========================================================================== */
.hover\:bg-blue-500:hover{background-color:#3b82f6}
.hover\:bg-blue-600:hover{background-color:#2563eb}
.hover\:bg-indigo-500:hover{background-color:#6366f1}
.hover\:bg-indigo-600:hover{background-color:#4f46e5}
.hover\:bg-pink-500:hover{background-color:#ec4899}
.hover\:bg-pink-600:hover{background-color:#db2777}
.hover\:bg-red-500:hover{background-color:#ef4444}
.hover\:bg-red-600:hover{background-color:#dc2626}
.hover\:bg-slate-200:hover{background-color:#e2e8f0}
.hover\:border-blue-600:hover{border-color:#2563eb}
.hover\:text-blue-600:hover{color:#2563eb}
.hover\:text-blue-800:hover{color:#1e40af}
@media (min-width:640px){.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}
@media (min-width:768px){.md\:h-64{height:16rem}}
@media (min-width:768px){.md\:p-10{padding:2.5rem}}
@media (min-width:768px){.md\:text-base{font-size:1rem;line-height:1.5rem}}
@media (min-width:1024px){.lg\:col-span-6{grid-column:span 6/span 6}}
@media (min-width:1024px){.lg\:flex-row{flex-direction:row}}
@media (min-width:1024px){.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}}
@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}
@media (min-width:1024px){.lg\:w-1\/3{width:33.333333%}}
@media (min-width:1024px){.lg\:w-2\/3{width:66.666667%}}