/* ==========================================================================
   Jury APRI — Tema EMBOSSED (timbul)
   Dimuat SETELAH style.css. Semua permukaan dibuat "timbul" (bevel terang di
   kiri-atas, bayangan gelap di kanan-bawah); kolom isian & menu aktif dibuat
   "tertekan" (debossed). Palet tetap navy + emas APRI.
   Untuk mematikan tema ini cukup hapus baris <link ... emboss.css> di views.
   ========================================================================== */
:root {
    --em-face-1: #173452;
    --em-face-2: #0e2239;
    --em-face-3: #0a1829;
    --em-well: #08131f;
    --em-hi: rgba(170, 210, 255, .24);
    --em-hi-soft: rgba(160, 205, 255, .07);
    --em-lo: rgba(0, 0, 0, .62);
    --em-lo-soft: rgba(0, 0, 0, .38);
    --em-gold-1: #fff1c4;
    --em-gold-2: #e2bf6e;
    --em-gold-3: #a77d2c;
    --em-raised:
        -4px -4px 10px rgba(90, 150, 210, .07),
        7px 9px 20px rgba(0, 0, 0, .55),
        inset 2px 2px 0 var(--em-hi),
        inset -2px -2px 0 rgba(0, 0, 0, .5),
        inset 0 18px 30px -18px rgba(170, 210, 255, .10);
    --em-raised-sm:
        -2px -2px 6px rgba(90, 150, 210, .07),
        4px 5px 12px rgba(0, 0, 0, .5),
        inset 1px 1px 0 var(--em-hi),
        inset -1px -1px 0 rgba(0, 0, 0, .5);
    --em-pressed:
        inset 3px 3px 8px rgba(0, 0, 0, .65),
        inset -2px -2px 6px rgba(90, 150, 210, .09);
}

/* ---------- permukaan timbul ---------- */
.side-brand,
.side-menu a,
.settings-btn,
.info-btn,
.scoreboard-top-btn,
.panel,
.workflow-card,
.stat-box,
.sponsor-header-container,
.datetime-container,
.operational-warning,
.quick-premium-card,
button.db-action-card,
button.premium-doc-card,
.species-rule-card,
.species-card,
.result-card,
.upload-setting-card,
.backup-restore-card,
.certificate-item,
.certificate-bulk-card,
.certificate-intro-card,
.template-option,
.modal-content,
.login-box,
.scoreboard-card,
.scoreboard-header,
.scoreboard-stats div {
    background-image: linear-gradient(155deg, var(--em-face-1) 0%, var(--em-face-2) 52%, var(--em-face-3) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .05) !important;
    border-top-color: rgba(190, 220, 255, .16) !important;
    border-left-color: rgba(190, 220, 255, .10) !important;
    border-bottom-color: rgba(0, 0, 0, .65) !important;
    border-right-color: rgba(0, 0, 0, .45) !important;
    box-shadow: var(--em-raised) !important;
}
.panel::before, .workflow-card::before { opacity: .35; }

/* kartu kecil di dalam panel: timbul tipis */
.fish-item,
.activity-item,
.readiness-item,
.editable-item,
.workflow-steps div,
.empty-state,
.locked-note,
.backup-note,
.species-advanced,
.import-helper,
details.species-advanced,
.certificate-summary-box,
.info-section {
    background-image: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .14)) !important;
    border: 1px solid rgba(255, 255, 255, .05) !important;
    border-top-color: rgba(190, 220, 255, .12) !important;
    border-bottom-color: rgba(0, 0, 0, .55) !important;
    box-shadow: var(--em-raised-sm) !important;
}

/* peringatan tetap berwarna, tapi timbul */
.operational-warning {
    background-image: linear-gradient(155deg, rgba(120, 92, 30, .38), rgba(14, 34, 57, .95) 60%, var(--em-face-3)) !important;
    border-top-color: rgba(255, 228, 168, .30) !important;
}

/* ---------- menu samping ---------- */
.side-menu a { transition: transform .12s ease, box-shadow .12s ease !important; }
.side-menu a:hover { transform: translateY(-1px); }
.side-menu a.active,
.side-menu a:active {
    background-image: linear-gradient(155deg, #071321, #0b1d31) !important;
    border-color: rgba(0, 0, 0, .55) !important;
    border-bottom-color: rgba(190, 220, 255, .10) !important;
    box-shadow: var(--em-pressed) !important;
    transform: none;
}
.side-menu a.active { color: var(--em-gold-1) !important; border-left: 3px solid var(--em-gold-2) !important; }

/* lencana nomor (01, 02, ...) & ikon: kancing timbul emas */
.side-menu a span,
.section-badge,
.side-brand-mark,
.workflow-steps b {
    background-image: linear-gradient(150deg, var(--em-gold-1), var(--em-gold-2) 48%, var(--em-gold-3)) !important;
    color: #1a1406 !important;
    border: 1px solid rgba(0, 0, 0, .35) !important;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .6), inset -1px -1px 0 rgba(90, 60, 10, .55), 2px 3px 6px rgba(0, 0, 0, .45) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.side-menu a:not(.active) span { filter: saturate(.55) brightness(.8); }

/* ikon kartu: warna asli tetap, diberi bevel timbul */
.quick-premium-icon,
.db-action-icon,
.doc-icon,
.species-rule-icon,
.bulk-icon,
.certificate-intro-icon,
.species-icon {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45), inset -1px -2px 0 rgba(0, 0, 0, .35), 2px 3px 7px rgba(0, 0, 0, .45) !important;
}

/* ---------- tombol ---------- */
button:not(.modal-close):not(.species-switch-track):not([class*="toggle"]),
.btn,
a.button,
.quick-actions a,
.document-actions a,
.document-actions button {
    border-top-color: rgba(255, 255, 255, .28) !important;
    border-bottom-color: rgba(0, 0, 0, .55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .30),
        inset 0 -2px 0 rgba(0, 0, 0, .28),
        3px 4px 10px rgba(0, 0, 0, .45) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    transition: transform .08s ease, box-shadow .08s ease, filter .12s ease !important;
}
button:not(.modal-close):not(.species-switch-track):not([class*="toggle"]):hover,
.btn:hover { filter: brightness(1.08); }
button:not(.modal-close):not(.species-switch-track):not([class*="toggle"]):active,
.btn:active,
.quick-actions a:active,
.document-actions a:active {
    transform: translateY(1px);
    box-shadow: inset 2px 3px 6px rgba(0, 0, 0, .5), inset -1px -1px 2px rgba(255, 255, 255, .12) !important;
}
/* tombol kartu besar: biarkan bayangan permukaan, tambahkan efek tekan */
button.db-action-card:active,
button.premium-doc-card:active,
.quick-premium-card:active { transform: translateY(1px); box-shadow: var(--em-pressed) !important; }
button.db-action-card,
button.premium-doc-card { text-shadow: none; }

/* ---------- kolom isian: tertekan ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
select,
textarea {
    background: var(--em-well) !important;
    border: 1px solid rgba(0, 0, 0, .6) !important;
    border-bottom-color: rgba(190, 220, 255, .14) !important;
    border-right-color: rgba(190, 220, 255, .08) !important;
    box-shadow: var(--em-pressed) !important;
}
input:not([type=checkbox]):not([type=radio]):focus,
select:focus,
textarea:focus {
    box-shadow: var(--em-pressed), 0 0 0 3px rgba(226, 191, 110, .28) !important;
    border-color: rgba(226, 191, 110, .55) !important;
}

/* ---------- tab di dalam pengaturan & ringkasan (details) ---------- */
.settings-tab {
    background-image: linear-gradient(155deg, var(--em-face-1), var(--em-face-3)) !important;
    box-shadow: var(--em-raised-sm) !important;
}
.settings-tab.active {
    background-image: linear-gradient(155deg, #071321, #0b1d31) !important;
    box-shadow: var(--em-pressed) !important;
    color: var(--em-gold-1) !important;
}
details > summary {
    border-radius: 12px;
    box-shadow: var(--em-raised-sm);
    background-image: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .12));
}
details[open] > summary { box-shadow: var(--em-pressed); }

/* ---------- tabel ---------- */
table { border-collapse: separate !important; border-spacing: 0 6px !important; }
table thead th {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .18)) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
table tbody tr { box-shadow: 2px 3px 8px rgba(0, 0, 0, .35); }
table tbody td { background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .12)); }

/* ---------- huruf timbul ---------- */
.panel-title,
.workflow-card h2,
.premium-section-title,
.stat-box .stat-number,
.side-brand strong,
.modal-header h2,
.modal-header h3 {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 255, 255, .14) !important;
}
.hero-event-title,
.digital-clock,
.login-box h1,
.login-box h2 {
    filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .7)) drop-shadow(0 1px 0 rgba(255, 255, 255, .16)) drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
}
.panel-title::after { box-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 -1px 0 rgba(0, 0, 0, .6); height: 3px !important; border-radius: 3px; }

/* logo di kepala halaman: bingkai timbul */
.header-logo-container {
    box-shadow: var(--em-raised-sm), inset 0 0 0 3px rgba(0, 0, 0, .25) !important;
    border-color: rgba(190, 220, 255, .18) !important;
}

/* lencana status */
.event-status-badge {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .18), inset -1px -1px 0 rgba(0, 0, 0, .45), 2px 3px 8px rgba(0, 0, 0, .4) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

/* tombol layar penuh mengikuti gaya timbul */
#tombolLayarPenuh {
    background-image: linear-gradient(155deg, var(--em-face-1), var(--em-face-3)) !important;
    box-shadow: var(--em-raised-sm) !important;
}
#tombolLayarPenuh:active { box-shadow: var(--em-pressed) !important; }

@media (prefers-reduced-motion: reduce) {
    .side-menu a, button { transition: none !important; }
}