/*
 * Tema visual SIAP DI RUDJAK — Cream / Broken White + seamless pattern halus
 * ---------------------------------------------------------------------------
 * Dipakai semua halaman: absen publik (Bootstrap), login, admin absen_pengungsi,
 * master lokasi (Tailwind). Diamankan lewat partial resources/views/partials/theme.blade.php.
 *
 * Prinsip:
 *   1. Netral HANGAT (cream) menggantikan abu-abu dingin -> tidak "kaku & depresi".
 *   2. Latar = seamless pattern kertas grid (52px) + titik di persilangan, kontras
 *      sangat rendah -> adem, tetap terasa "kertas kerja kantor" (officey).
 *   3. Kartu = putih susu (broken white) dengan garis tipis + bayangan hangat lembut.
 *   4. Aksen = navy dusty (bukan biru terang) -> formal tapi tidak dingin.
 */

:root {
    --cream-0: #FAF6EE;   /* alas halaman */
    --cream-1: #FDFBF6;   /* kartu / broken white */
    --cream-2: #F5F0E4;   /* isian halus (header tabel, sidebar tint) */
    --line: #E9E1D0;      /* garis tepi */
    --line-soft: #F0EADB;
    --ink-900: #2F2A22;   /* judul */
    --ink-700: #4B453A;   /* teks utama */
    --ink-500: #7C7365;   /* teks redup */
    --navy-500: #4B71A4;
    --navy-600: #375A8A;
    --navy-700: #2C4870;
    --shadow-soft: 0 1px 2px rgba(74, 64, 48, 0.05), 0 14px 30px -22px rgba(74, 64, 48, 0.45);
    --shadow-card: 0 1px 2px rgba(74, 64, 48, 0.06), 0 18px 40px -28px rgba(74, 64, 48, 0.5);

    /* Seamless pattern 104x104: dasar cream, grid 52px garis #F1EADB,
       titik #E3DAC6 di tiap persilangan. Aman diulang tanpa sambungan. */
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104'%3E%3Crect width='104' height='104' fill='%23FAF6EE'/%3E%3Cg fill='none' stroke='%23F1EADB' stroke-width='1'%3E%3Cpath d='M0 .5H104M0 52.5H104M.5 0V104M52.5 0V104'/%3E%3C/g%3E%3Cg fill='%23E3DAC6'%3E%3Ccircle cx='.5' cy='.5' r='1.7'/%3E%3Ccircle cx='52.5' cy='.5' r='1.7'/%3E%3Ccircle cx='.5' cy='52.5' r='1.7'/%3E%3Ccircle cx='52.5' cy='52.5' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- Latar --- */
/* Pattern dipasang di <body>; pembungkus ber-class bg-gray-100 dibuat transparan
   supaya pattern ikut terlihat, dan karena background-attachment: fixed isi halaman
   bergeser di atas pattern yang diam (tidak "bergetar" saat scroll). */
body {
    background-image: var(--pattern) !important;
    background-attachment: fixed !important;
    background-color: var(--cream-0) !important;
    color: var(--ink-700);
    -webkit-font-smoothing: antialiased;
}

/* Hanya elemen struktural latar (body + pembungkus + <main>) yang dibuat
   transparan; tombol/tab yang memakai bg-gray-100 tetap berisi agar hover-nya jalan. */
body.bg-gray-100,
body > div.bg-gray-100,
main.bg-gray-100 {
    background-color: transparent !important;
}

/* Kertas transparan: gradient wrapper login lama dibuang, pattern tampil penuh */
.theme-surface {
    background: transparent !important;
}

/* ----------------------------------------------------------------- Kartu --- */
.bg-white {
    background-color: var(--cream-1) !important;
}

/* Kartu & panel: garis tipis + bayangan hangat (lebih lembut dari bayangan abu) */
.rounded-xl.bg-white,
.rounded-2xl.bg-white,
.rounded-5.glass-card {
    border-color: var(--line);
    box-shadow: var(--shadow-card) !important;
}

.shadow,
.shadow-sm {
    box-shadow: var(--shadow-soft) !important;
}

.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
    box-shadow: var(--shadow-card) !important;
}

/* Bayangan logo/avatar biru di login -> nada navy lembut */
.shadow-blue-500\/30 {
    box-shadow: 0 12px 26px -16px rgba(44, 72, 112, 0.7) !important;
}

/* --------------------------------------------------------------- Kepala --- */
/* Header panel: alih-alih bayangan tebal, pakai garis rambut seperti kertas kop */
header.bg-white.shadow-md {
    background-color: var(--cream-1) !important;
    border-bottom: 1px solid var(--line);
    box-shadow: none !important;
}

/* Sidebar: putih susu + garis pemisah halus */
aside#sidebar {
    background-color: var(--cream-1) !important;
    border-right: 1px solid var(--line);
    box-shadow: none !important;
}

/* --------------------------------------------------------------- Tabel --- */
thead.bg-gray-50,
thead.bg-gray-50 th {
    background-color: var(--cream-2) !important;
}

tbody tr:hover td {
    background-color: rgba(245, 240, 228, 0.55);
}

/* ---------------------------------------------------- Bootstrap (absen) --- */
.btn-primary {
    --bs-btn-bg: #375A8A;
    --bs-btn-border-color: #375A8A;
    --bs-btn-hover-bg: #2C4870;
    --bs-btn-hover-border-color: #2C4870;
    --bs-btn-active-bg: #243A5B;
    --bs-btn-active-border-color: #243A5B;
    --bs-btn-disabled-bg: #9BB3D2;
    --bs-btn-disabled-border-color: #9BB3D2;
    --bs-btn-focus-shadow-rgb: 55, 90, 138;
}

.form-control,
.form-select {
    background-color: #FDFBF6;
    border-color: #E3DCCB;
    color: var(--ink-900);
}

.form-control::placeholder {
    color: #A79E8C;
}

.form-control:focus,
.form-select:focus {
    background-color: #FDFBF6;
    border-color: var(--navy-500);
    box-shadow: 0 0 0 0.2rem rgba(55, 90, 138, 0.15);
    color: var(--ink-900);
}

.input-group-text {
    background-color: var(--cream-2);
    border-color: #E3DCCB;
    color: var(--ink-500);
}

.border-light {
    border-color: #EFE8DA !important;
}

.border-light-subtle {
    border-color: var(--line-soft) !important;
}

.text-secondary {
    color: var(--ink-500) !important;
}

.alert-secondary {
    background-color: var(--cream-2);
    border-color: var(--line);
    color: var(--ink-700);
}

/* Kartu kaca halaman absen: krem transparan, bukan putih dingin */
.glass-card {
    background: rgba(253, 251, 246, 0.94);
    border: 1px solid var(--line);
    box-shadow: 0 24px 48px -28px rgba(74, 64, 48, 0.45);
}

/* Aksen gradasi atas kartu: dari biru langit -> krem lembut */
.header-accent {
    background: linear-gradient(to bottom, #F2ECDE, transparent);
}

.icon-circle-main {
    box-shadow: 0 8px 20px rgba(44, 72, 112, 0.28) !important;
}

.camera-container {
    background: #EFEAE0;
}

/* ----------------------------------------------------------------- Alas --- */
/* Halaman login: kartu sedikit lebih "kertas", avatar navy lembut */
.rounded-2xl.shadow-xl {
    border: 1px solid var(--line);
}