/* Tema Sistem Penomoran Surat — biru, putih, abu-abu */
:root {
    --brand-900: #0b1f44;
    --brand-800: #102a5c;
    --brand-700: #1e3a8a;
    --brand-600: #1d4ed8;
    --brand-500: #2563eb;
    --brand-100: #dbeafe;
    --brand-50: #eff6ff;
    --bs-primary: #1d4ed8;
    --bs-primary-rgb: 29, 78, 216;
    --bs-link-color: #1d4ed8;
    --bs-link-color-rgb: 29, 78, 216;
}

body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; }

.btn-primary {
    --bs-btn-bg: var(--brand-600); --bs-btn-border-color: var(--brand-600);
    --bs-btn-hover-bg: var(--brand-700); --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-bg: var(--brand-800); --bs-btn-active-border-color: var(--brand-800);
}
.text-primary { color: var(--brand-600) !important; }
.bg-primary { background-color: var(--brand-600) !important; }

/* Sidebar biru gelap */
.app-sidebar { background: linear-gradient(180deg, var(--brand-800) 0%, var(--brand-900) 100%) !important; }
.app-sidebar .sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.12); }
.app-sidebar .brand-link .brand-image { background: #fff; border-radius: .5rem; padding: 2px; object-fit: contain; }
.app-sidebar .brand-text { font-weight: 600 !important; letter-spacing: .3px; }
.sidebar-menu .nav-link { border-radius: .5rem; margin: 1px 8px; color: rgba(255,255,255,.78) !important; }
.sidebar-menu .nav-link:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.sidebar-menu .nav-link.active { background: var(--brand-500) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(37,99,235,.35); }
.sidebar-menu .nav-header { color: rgba(255,255,255,.45) !important; font-size: .72rem; letter-spacing: 1px; padding-top: 1rem !important; }
.brand-fallback { width: 33px; height: 33px; border-radius: .5rem; background: #fff; color: var(--brand-700);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; margin-left: .2rem; margin-right: .5rem; }

.app-header { border-bottom: 1px solid #e5e7eb; }
.app-main { background: #f4f6fb; }
.app-content-header h3 { font-weight: 600; color: #1f2937; }

/* Kartu */
.card { border: 1px solid #e5e7eb; border-radius: .75rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: #fff; border-bottom: 1px solid #eef0f4; border-radius: .75rem .75rem 0 0 !important; }
.card-title { font-weight: 600; font-size: 1rem; }

.stat-card { border: 0; border-radius: .9rem; overflow: hidden; position: relative; color: #fff; }
.stat-card .stat-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 3rem; opacity: .22; }
.stat-card .stat-value { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { opacity: .9; font-size: .9rem; }
.stat-blue { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.stat-navy { background: linear-gradient(135deg, #102a5c, #1e3a8a); }
.stat-sky { background: linear-gradient(135deg, #0369a1, #0ea5e9); }
.stat-gray { background: linear-gradient(135deg, #475569, #64748b); }

.division-card { border-left: 4px solid var(--brand-500); transition: transform .15s; }
.division-card:hover { transform: translateY(-2px); }
.division-code { font-weight: 700; color: var(--brand-700); font-size: 1.1rem; }

.letter-number { font-family: "JetBrains Mono", Consolas, monospace; font-weight: 600; color: var(--brand-800); white-space: nowrap; }
.number-result { background: linear-gradient(135deg, var(--brand-50), #fff); border: 2px dashed var(--brand-500); border-radius: 1rem; }
.number-result .big-number { font-family: "JetBrains Mono", Consolas, monospace; font-size: clamp(1.4rem, 4.5vw, 2.6rem);
    font-weight: 700; color: var(--brand-800); letter-spacing: 1px; word-break: break-all; }
.number-preview { font-family: "JetBrains Mono", Consolas, monospace; font-weight: 600; color: var(--brand-700); background: var(--brand-50);
    border: 1px solid var(--brand-100); border-radius: .5rem; padding: .5rem .75rem; display: inline-block; }

.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table thead th { background: #f8fafc; color: #475569; font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.badge-status-aktif { background: #dcfce7; color: #166534; }
.badge-status-dibatalkan { background: #fee2e2; color: #991b1b; }
tr.row-cancelled td { color: #9ca3af; }
tr.row-cancelled .letter-number { text-decoration: line-through; color: #9ca3af; }

.form-label { font-weight: 500; color: #374151; }
.required::after { content: " *"; color: #dc2626; }

/* Login */
.login-page-custom { min-height: 100vh; background: radial-gradient(circle at 20% 20%, #1e3a8a 0%, #0b1f44 60%); }
.login-card { border: 0; border-radius: 1rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.login-logo-box { width: 72px; height: 72px; border-radius: 1rem; background: var(--brand-50); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.login-logo-box img { max-width: 64px; max-height: 64px; object-fit: contain; }

.activity-item { border-left: 2px solid var(--brand-100); padding-left: 1rem; position: relative; }
.activity-item::before { content: ""; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-500); }

@media (max-width: 575.98px) {
    .app-content-header h3 { font-size: 1.25rem; }
    .stat-card .stat-value { font-size: 1.6rem; }
}

@media print {
    .app-sidebar, .app-header, .app-footer, .no-print { display: none !important; }
}