/* =============================================================================
   modal.css -- satu gaya dialog untuk semua modul (sumber tunggal).
   =============================================================================
   Dimuat oleh layouts/app.blade.php SESUDAH content.css, dan oleh
   layouts/myattendance.php. Aturan modal di content.css dan <style> per view
   sudah dibuang; tata letak khusus (grid shift, peta lokasi, ...) tetap di
   view-nya, tetapi tampilan (warna, huruf, tombol) hanya di sini.

   Keluarga markup yang dipetakan ke tampilan yang sama:
     .modal-backdrop > .modal-box  (.modal-banner | .modal-head, .modal-body, .modal-footer)
     .modal-overlay  > .modal-box  (roster, work_schedule)
     .wt-modal-backdrop > .wt-modal (attstat, absstat, emailrep)
     .lc-mask + .lc-modal (location), .ms-mask + .ms-modal (mobileapp/setting)
     Bootstrap .modal > .modal-content (approval/outdoor, my_attendance)
     SweetAlert2 (.swal2-popup) -- lihat juga assets/js/swal-theme.js

   Aturan desain:
     - latar rgba(15,23,42,.45) tanpa blur; kotak putih, radius 12px, bayangan halus
     - lebar: sm 420 / md 560 (bawaan) / lg 820 / xl 1040; tinggi maks 90vh, isi menggulir
     - kepala putih: judul 16px semibold, subjudul satu baris redup, tombol x di kanan
     - label sentence case 13px; isian 38px, garis 1px, radius 8px, cincin fokus primer
     - kaki: garis atas tipis, tombol rata kanan 36px: Batal (garis) lalu aksi utama
       (primer solid; aksi merusak merah)
   ========================================================================== */

:root {
    --m-primary: var(--primary, #109BDC);
    --m-primary-dark: var(--primary-dark, #0D81B7);
    --m-text: var(--text-main, #0f172a);
    --m-muted: var(--text-muted, #64748b);
    --m-sub: var(--text-sub, #94a3b8);
    --m-border: var(--border, #e2e8f0);
    --m-hover: var(--hover-bg, #f8fafc);
    --m-danger: #dc2626;
    --m-danger-dark: #b91c1c;
    --m-ring: 0 0 0 3px rgba(16, 155, 220, .15);
    --m-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06);
}

@keyframes woowModalIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- latar --- */
.modal-backdrop,
.modal-overlay,
.wt-modal-backdrop {
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .45);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Modal kustom: dibuka dengan menambah .active. */
.modal-backdrop {
    z-index: 200;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease;
}
.modal-backdrop.active { opacity: 1; visibility: visible; }

/* Latar yang dibuat Bootstrap untuk .modal juga memakai kelas .modal-backdrop. */
.modal-backdrop.show { z-index: 1050; opacity: 1; visibility: visible; padding: 0; }
.modal-backdrop.fade:not(.show) { opacity: 0; }

/* Dibuka dengan style display:flex dari JS (roster, work_schedule). */
.modal-overlay { display: none; z-index: 2000; }
.wt-modal-backdrop { z-index: 1050; }   /* display diatur inline oleh JS */

.lc-mask,
.ms-mask {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    background: rgba(15, 23, 42, .45);
}
.lc-mask.show,
.ms-mask.show { display: block; }

/* ---------------------------------------------------------------- kotak --- */
.modal-box,
.wt-modal,
.lc-modal,
.ms-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: var(--m-shadow);
    color: var(--m-text);
    text-align: left;
}
.modal-backdrop.active .modal-box,
.modal-overlay .modal-box,
.wt-modal { animation: woowModalIn .16s ease-out; }

/* Ukuran */
.modal-box.modal-sm,
.wt-modal.modal-sm   { max-width: 420px; }
.modal-box.modal-lg,
.lc-modal            { max-width: 820px; }
.modal-box.modal-xl  { width: 100%; max-width: 1040px; }

/* location & mobileapp: kotak itu sendiri yang fixed di tengah layar. */
.lc-modal,
.ms-modal {
    position: fixed;
    z-index: 901;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100vw - 32px);
    display: none;
}
.lc-modal.wide { max-width: 900px; }
.lc-modal.show,
.ms-modal.show { display: flex; }

/* Bootstrap */
.modal-content {
    overflow: hidden;
    border: none;
    border-radius: 12px;
    box-shadow: var(--m-shadow);
    color: var(--m-text);
}

/* --------------------------------------------------------------- kepala --- */
.modal-banner,
.modal-head,
.wt-modal-header,
.lc-modal-head,
.ms-modal-head,
.od-modal-head {
    position: relative;
    flex: none;
    display: block;
    min-height: 0;
    margin: 0;
    padding: 16px 56px 14px 20px;
    overflow: visible;
    background: #fff;
    border-bottom: 1px solid var(--m-border);
    color: var(--m-text);
}
/* Baris "ikon | judul | tutup" lama: biarkan isinya mengalir biasa. */
.modal-banner-top { display: contents; }
.modal-banner-text { min-width: 0; }
.modal-banner-icon,
.wt-modal-icon { display: none; }

.modal-title,
.wt-modal-title,
.lc-modal-title,
.ms-modal-title,
.od-modal-title,
.modal-head h3 {
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--m-text);
}
.modal-subtitle,
.lc-modal-sub,
.ms-modal-sub {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--m-muted);
}
.modal-subtitle:empty,
.lc-modal-sub:empty,
.ms-modal-sub:empty { display: none; }

/* Tombol tutup */
.modal-close,
.wt-modal-close,
.od-modal-x {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--m-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background .15s, color .15s;
}
.modal-close:hover,
.wt-modal-close:hover,
.od-modal-x:hover { background: #f1f5f9; color: var(--m-text); }
.modal-close svg,
.od-modal-x svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- badan --- */
.modal-body,
.wt-modal-body,
.lc-modal-body,
.ms-modal-body,
.od-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 20px;
    overflow-y: auto;
    color: var(--m-text);
    font-size: 14px;
}
.modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }

/* Bagian */
.modal-section-title {
    margin: 4px 0 -6px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-muted);
    background: none;
    border: none;
}

/* Grid */
.modal-row,
.modal-grid-2,
.modal-grid-3,
.modal-grid-4,
.modal-checkbox-grid {
    display: grid;
    gap: 12px 16px;
    min-width: 0;
}
.modal-row,
.modal-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modal-grid-4,
.modal-checkbox-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.modal-checkbox-grid { gap: 8px 16px; }
.span-col-3 { grid-column: span 3; }

/* Field dan label */
.modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.modal-label,
.wt-form-label,
.lc-modal .lc-field label,
.ms-modal .ms-label,
.modal-overlay .modal-body label,
.modal-overlay .assign-period-field label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-text);
}
.wt-form-label,
.ms-modal .ms-label { display: block; margin-bottom: 6px; }
.lc-modal .lc-field label { display: block; margin-bottom: 6px; }
.modal-label .required,
.modal-body .required,
.lc-modal .req { color: var(--m-danger); font-weight: 500; }

.modal-input-wrap { position: relative; }
.modal-input-icon { display: none; }

/* Isian */
.modal-input,
.modal-select,
.wt-form-input,
.lc-modal .lc-input,
.lc-modal .lc-area,
.modal-body select.toolbar-select,
.modal-overlay .modal-body select,
.modal-overlay .modal-body textarea,
.modal-overlay .modal-body input[type="time"],
.modal-overlay .modal-body input[type="date"],
.ae-picker input.ae-cari {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--m-border);
    border-radius: 8px;
    background-color: #fff;
    box-shadow: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: var(--m-text);
    transition: border-color .15s, box-shadow .15s;
}
.wt-form-input { margin: 0 0 16px; }
.wt-modal-body > .wt-form-input:last-child { margin-bottom: 0; }
.modal-input-wrap .modal-input,
.modal-input-wrap .modal-select { padding-left: 12px; }

.modal-select,
select.modal-input,
.modal-body select.toolbar-select,
.modal-overlay .modal-body select,
.wt-modal select.wt-form-input {
    padding-right: 32px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: 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='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

textarea.modal-input,
.lc-modal .lc-area,
.modal-overlay .modal-body textarea {
    height: auto;
    min-height: 76px;
    padding: 8px 12px;
    resize: vertical;
}
input[type="file"].modal-input { height: auto; padding: 7px 10px; }
input[type="color"].modal-input { width: 64px; height: 38px; padding: 3px; cursor: pointer; }
input[type="color"].modal-input::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"].modal-input::-webkit-color-swatch { border: none; border-radius: 5px; }

.modal-input:focus,
.modal-select:focus,
.wt-form-input:focus,
.lc-modal .lc-input:focus,
.lc-modal .lc-area:focus,
.modal-body select.toolbar-select:focus,
.modal-overlay .modal-body select:focus,
.modal-overlay .modal-body textarea:focus,
.modal-overlay .modal-body input:focus,
.ae-picker input.ae-cari:focus {
    border-color: var(--m-primary);
    background-color: #fff;
    box-shadow: var(--m-ring);
}
.modal-input:disabled,
.modal-input[readonly],
.modal-select:disabled,
.wt-form-input:disabled,
.modal-overlay .modal-body input:disabled {
    background-color: #f8fafc;
    color: var(--m-muted);
    cursor: not-allowed;
}
.modal-input::placeholder,
.wt-form-input::placeholder,
.lc-modal .lc-input::placeholder,
.lc-modal .lc-area::placeholder { color: var(--m-sub); }

/* Pemilih pohon (area/organisasi) di dalam modal: selebar kolom, setinggi isian. */
.modal-body .tree-select { width: 100%; min-width: 0; font-family: inherit; }
.modal-body .tree-input {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--m-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--m-text);
}
.modal-body .tree-input::after { right: 12px; font-size: 9px; color: var(--m-muted); }
.modal-body .tree-input > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kotak centang di dalam modal: teks biasa, tanpa kartu berwarna. */
.modal-body .checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--m-text);
    cursor: pointer;
}
.modal-body .checkbox-wrap input,
.modal-body input[type="checkbox"] { margin: 0; accent-color: var(--m-primary); cursor: pointer; }

/* Petunjuk, catatan, galat */
.modal-hint,
.modal-note {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--m-muted);
}
.modal-note .required,
.modal-note span[style] { color: var(--m-danger) !important; font-weight: 500 !important; }
.modal-error {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    font-size: 13px;
    font-weight: 500;
    color: var(--m-danger-dark);
}

/* ----------------------------------------------------------------- kaki --- */
.modal-footer,
.wt-modal-footer,
.lc-modal > .lc-modal-foot,
.ms-modal-foot {
    position: static;
    flex: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 12px 20px;
    background: #fff;
    border-top: 1px solid var(--m-border);
}
.modal-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: auto;
    margin-left: auto;
}
.modal-footer > * { margin: 0; }       /* Bootstrap memberi margin pada anak .modal-footer */
.modal-footer-note { display: none; }   /* catatan kini di badan (.modal-note) */

/* Panel "Tugaskan / Lepaskan" di modal lokasi memakai .lc-modal-foot juga. */
.lc-pane .lc-modal-foot {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    background: #fff;
}

/* --------------------------------------------------------------- tombol --- */
.btn-modal-cancel,
.btn-modal-save,
.wt-modal-footer .toolbar-btn,
.modal-footer .btn-cancel,
.modal-footer .btn-generate,
.lc-modal > .lc-modal-foot .lc-btn,
.ms-modal-foot .ms-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 88px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--m-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--m-text);
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.btn-modal-cancel:hover,
.wt-modal-footer .toolbar-btn:first-child:hover,
.modal-footer .btn-cancel:hover,
.lc-modal > .lc-modal-foot .lc-btn:not(.primary):hover,
.ms-modal-foot .ms-btn:not(.primary):hover { background: var(--m-hover); border-color: #cbd5e1; color: var(--m-text); }

/* Aksi utama */
.btn-modal-save,
.wt-modal-footer .toolbar-btn:last-child:not(:first-child),
.modal-footer .btn-generate,
.lc-modal > .lc-modal-foot .lc-btn.primary,
.ms-modal-foot .ms-btn.primary {
    background: var(--m-primary);
    border-color: var(--m-primary);
    color: #fff;
}
.btn-modal-save:hover,
.wt-modal-footer .toolbar-btn:last-child:not(:first-child):hover,
.modal-footer .btn-generate:hover,
.lc-modal > .lc-modal-foot .lc-btn.primary:hover:not([disabled]),
.ms-modal-foot .ms-btn.primary:hover:not([disabled]) {
    background: var(--m-primary-dark);
    border-color: var(--m-primary-dark);
    color: #fff;
}

/* Aksi merusak */
.btn-modal-save.btn-modal-danger,
.btn-modal-danger {
    background: var(--m-danger);
    border-color: var(--m-danger);
    color: #fff;
}
.btn-modal-save.btn-modal-danger:hover,
.btn-modal-danger:hover { background: var(--m-danger-dark); border-color: var(--m-danger-dark); color: #fff; }

.btn-modal-cancel:disabled,
.btn-modal-save:disabled,
.modal-footer button:disabled { opacity: .6; cursor: not-allowed; }
.btn-modal-save svg,
.btn-modal-cancel svg { width: 14px; height: 14px; flex: none; }
.btn-modal-cancel:focus-visible,
.btn-modal-save:focus-visible,
.modal-close:focus-visible,
.wt-modal-close:focus-visible { outline: none; box-shadow: var(--m-ring); }

/* --------------------------------------------------------- layar kecil --- */
@media (max-width: 640px) {
    .modal-box,
    .modal-box.modal-xl,
    .wt-modal { max-width: 100%; min-width: 0; }
    .lc-modal,
    .ms-modal { width: calc(100vw - 32px); }
    .modal-row,
    .modal-grid-2,
    .modal-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .modal-grid-4,
    .modal-checkbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .span-col-3 { grid-column: auto; }
    .modal-banner,
    .modal-head,
    .wt-modal-header,
    .lc-modal-head,
    .ms-modal-head,
    .od-modal-head { padding: 14px 52px 12px 16px; }
    .modal-body,
    .wt-modal-body,
    .lc-modal-body,
    .ms-modal-body,
    .od-modal-body { padding: 16px; }
    .modal-footer,
    .wt-modal-footer,
    .lc-modal > .lc-modal-foot,
    .ms-modal-foot { padding: 12px 16px; }
}

/* =============================================================================
   SweetAlert2 -- tampilan disamakan dengan modal. Perilakunya (teks, alur,
   tombol) tidak diubah; swal-theme.js hanya menukar posisi tombol (Batal kiri)
   dan memakai kelas tombol di bawah ini.
   ========================================================================== */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation { background: rgba(15, 23, 42, .45); }
.swal2-popup {
    width: 26em;
    max-width: calc(100vw - 32px);
    padding: 24px 20px 20px;
    border-radius: 12px;
    box-shadow: var(--m-shadow);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--m-text);
}
.swal2-popup .swal2-icon {
    margin: 4px auto 12px;
    font-size: 10px;            /* ikon diskalakan dari 5em: 50px */
    border-width: .3em;
}
.swal2-popup .swal2-title {
    padding: 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--m-text);
}
.swal2-popup .swal2-html-container {
    margin: 8px 8px 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--m-muted);
}
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
    margin: 12px 8px 0;
    border: 1px solid var(--m-border);
    border-radius: 8px;
    box-shadow: none;
    font-size: 14px;
}
.swal2-popup .swal2-input { height: 38px; }
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus { border-color: var(--m-primary); box-shadow: var(--m-ring); }
.swal2-popup .swal2-validation-message { margin: 12px 0 0; font-size: 13px; }
.swal2-popup .swal2-actions { gap: 8px; margin-top: 20px; }
.swal2-popup .swal2-footer { margin: 16px 0 0; padding-top: 12px; font-size: 13px; border-top: 1px solid var(--m-border); }
.swal2-popup .swal2-timer-progress-bar { background: rgba(16, 155, 220, .35); }

/* Tombol: gaya sendiri (buttonsStyling:false di swal-theme.js) dan cadangan
   untuk .swal2-styled bila tema tidak terpasang. */
.swal2-popup .swal-btn,
.swal2-popup .swal2-styled {
    margin: 0;
    height: 36px;
    min-width: 88px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.swal2-popup .swal-btn-primary,
.swal2-popup .swal2-styled.swal2-confirm { background-color: var(--m-primary); border-color: var(--m-primary); color: #fff; }
.swal2-popup .swal-btn-primary:hover { background-color: var(--m-primary-dark); border-color: var(--m-primary-dark); }
.swal2-popup .swal-btn-danger,
.swal2-popup .swal2-styled.swal2-deny { background-color: var(--m-danger); border-color: var(--m-danger); color: #fff; }
.swal2-popup .swal-btn-danger:hover { background-color: var(--m-danger-dark); border-color: var(--m-danger-dark); }
.swal2-popup .swal-btn-cancel,
.swal2-popup .swal2-styled.swal2-cancel { background-color: #fff; border-color: var(--m-border); color: var(--m-text); }
.swal2-popup .swal-btn-cancel:hover { background-color: var(--m-hover); border-color: #cbd5e1; }
.swal2-popup .swal-btn:focus-visible,
.swal2-popup .swal2-styled:focus-visible { outline: none; box-shadow: var(--m-ring); }
.swal2-popup .swal-btn:disabled { opacity: .6; cursor: not-allowed; }