/* ═══════════════════════════════════════════════
   App Shared Stylesheet — Exam Proctor
   Consistent design matching the dashboard shell
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─── CSS Variables ──────────────────────────── */
:root {
    --page-bg:      #f0f4ff;
    --card-bg:      #ffffff;
    --accent:       #6366f1;
    --accent-2:     #8b5cf6;
    --text-primary: #1e293b;
    --text-muted:   #64748b;
    --text-light:   #94a3b8;
    --border:       rgba(99, 102, 241, 0.1);
    --shadow-card:  0 2px 16px rgba(99, 102, 241, 0.07);
    --shadow-hover: 0 8px 28px rgba(99, 102, 241, 0.13);
    --radius:       14px;
    --transition:   0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Base Reset ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ─── Body ───────────────────────────────────── */
body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
    background-color: var(--page-bg) !important;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* ─── Typography overrides ───────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif !important; }

/* ─── Tailwind class visual upgrades ─────────── */

/* Page background */
.bg-gray-100, .bg-gray-50 {
    background-color: var(--page-bg) !important;
}

/* Cards */
.bg-white.rounded-xl,
.bg-white.rounded-lg {
    background: var(--card-bg) !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-card) !important;
}

.bg-white.rounded-xl:hover,
.bg-white.rounded-lg:hover {
    box-shadow: var(--shadow-hover) !important;
}

/* Table head */
thead tr th,
thead.bg-gray-50 tr th,
.bg-gray-50 th {
    background: linear-gradient(90deg, #eef2ff, #f5f3ff) !important;
    color: #4338ca !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11.5px !important;
    letter-spacing: 0.06em !important;
}

/* Table rows */
tbody tr:hover {
    background-color: #f8f7ff !important;
}

/* Inputs & selects */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea {
    font-family: 'Inter', sans-serif !important;
    border-color: #e0e7ff !important;
    border-radius: 8px !important;
    transition: border-color var(--transition), box-shadow var(--transition) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
    outline: none !important;
}

/* Buttons — add subtle transition & radius */
button, a[class*="bg-"] {
    font-family: 'Inter', sans-serif !important;
    transition: all var(--transition) !important;
}

button:hover, a[class*="bg-"]:hover {
    transform: translateY(-1px);
}

/* Pill badges */
.rounded-full[class*="bg-"] {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* Modal overlays */
[class*="fixed"][class*="inset-0"][class*="bg-black"] {
    backdrop-filter: blur(4px) !important;
}

/* Modal dialog */
[class*="fixed"] .bg-white.rounded-xl,
[class*="fixed"] .bg-white.rounded-lg {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
}

/* ─── Legacy page header (h1 + Kembali) ─────── */
/* Hidden when inside dashboard iframe via JS class */
.app-page-header-hidden {
    display: none !important;
}

/* ─── Page title styled header (standalone) ─── */
.app-page-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* ─── Section divider labels ─────────────────── */
.app-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.app-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #e2e8f0, transparent);
}

/* ─── Gradient card tops ─────────────────────── */
.bg-gradient-to-r.from-blue-500   { background: linear-gradient(135deg, #6366f1, #818cf8) !important; }
.bg-gradient-to-r.from-green-500  { background: linear-gradient(135deg, #10b981, #34d399) !important; }
.bg-gradient-to-r.from-blue-50    { background: linear-gradient(90deg, #eef2ff, #f5f3ff) !important; }
.bg-gradient-to-r.from-indigo-50  { background: linear-gradient(90deg, #eef2ff, #ede9fe) !important; }

/* ─── Scrollbar ──────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ─── Responsive tweaks ──────────────────────── */
@media (max-width: 640px) {
    .container { padding-left: 16px !important; padding-right: 16px !important; }
}