/* ==========================================================================
   TIME MANAGEMENT DESIGN SYSTEM (Payday v2.0)
   Mobile-first. Ergonomis, touch-friendly, tipografi proporsional.

   URUTAN PEMUATAN (lihat resources/views/layout.blade.php):
     1. file ini  ->  2. @yield('css') per halaman
   Jadi CSS per-halaman bisa menimpa file ini secara natural TANPA !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS - satu-satunya sumber kebenaran warna, radius & tipografi.
      Jangan tulis hex baru di view; pakai var(--tm-*) di bawah ini.
   -------------------------------------------------------------------------- */
:root {
    /* --tm-font-sans dan --tm-fs-* kini alias di payday-typography.css */

    /* Surface & garis */
    --tm-surface: #f8fafc;
    --tm-surface-alt: #f1f5f9;
    --tm-white: #ffffff;
    --tm-border: #e2e8f0;
    --tm-border-strong: #cbd5e1;
    --tm-border-soft: #f1f5f9;

    /* Teks */
    --tm-text-strong: #0f172a;
    --tm-text: #1e293b;
    --tm-text-muted: #475569;
    --tm-text-subtle: #64748b;

    /* Aksen */
    --tm-primary: #0284c7;
    --tm-primary-dark: #0369a1;
    --tm-primary-soft: #e0f2fe;
    --tm-danger: #dc2626;
    --tm-danger-dark: #b91c1c;
    --tm-success: #059669;
    --tm-success-dark: #047857;
    --tm-warning: #d97706;
    --tm-warning-dark: #b45309;
    --tm-neutral: #94a3b8;

    /* Status (selaras dengan TmDataTableFormatter) */
    --tm-success-bg: #ecfdf5;  --tm-success-fg: #065f46;  --tm-success-bd: #86efac;
    --tm-warning-bg: #fffbeb;  --tm-warning-fg: #92400e;  --tm-warning-bd: #fde68a;
    --tm-progress-bg: #fff7ed; --tm-progress-fg: #c2410c; --tm-progress-bd: #fed7aa;
    --tm-danger-bg: #fef2f2;   --tm-danger-fg: #991b1b;   --tm-danger-bd: #fecaca;
    --tm-info-bg: #eff6ff;     --tm-info-fg: #1d4ed8;     --tm-info-bd: #bfdbfe;
    --tm-purple-bg: #f5f3ff;   --tm-purple-fg: #6d28d9;   --tm-purple-bd: #ddd6fe;
    --tm-neutral-bg: #f8fafc;  --tm-neutral-fg: #475569;  --tm-neutral-bd: #cbd5e1;

    /* Radius - 3 tingkat saja */
    --tm-radius-sm: 6px;
    --tm-radius-md: 8px;
    --tm-radius-lg: 12px;
    --tm-radius-pill: 20px;

    /* Skala tipografi: lihat payday-typography.css (--fs-*). */

    /* Tabel */
    --tm-cell-pad-y: 10px;
    --tm-cell-pad-x: 14px;

    /* Target sentuh minimum di mobile */
    --tm-touch-min: 44px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea,
.form-control,
.custom-select,
.select2-container,
.dataTables_wrapper {
    font-family: var(--tm-font-sans);
}

body {
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   2. KOMPONEN DASAR (Desktop & Mobile)
      Sebelumnya di-copy-paste di 13 view dengan nilai yang sudah menyimpang.
   -------------------------------------------------------------------------- */
.tm-main-card {
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-lg);
    background: var(--tm-white);
}
.tm-header-title {
    font-size: var(--tm-fs-lg);
    font-weight: 700;
    color: var(--tm-text-strong);
    letter-spacing: -0.01em;
    line-height: 1.35 !important;
    margin-bottom: 5px !important;
}
.tm-header-subtitle,
.tm-header-sub,
.tm-mobile-header small,
.tm-header-left small,
.tm-mobile-header .min-w-0 > small,
.tm-mobile-header .overflow-hidden > small,
.tm-mobile-header .text-truncate > small {
    font-size: var(--tm-fs-base);
    color: var(--tm-text-subtle);
    line-height: 1.45 !important;
    display: block !important;
    margin-top: 3px !important;
}

/* Tabel - satu nilai kanonik untuk seluruh modul */
.table thead th {
    background-color: var(--tm-surface);
    color: var(--tm-text-muted);
    font-size: var(--tm-fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-top: none;
    border-bottom: 1px solid var(--tm-border);
    padding: var(--tm-cell-pad-y) var(--tm-cell-pad-x);
}
.table tbody td {
    padding: var(--tm-cell-pad-y) var(--tm-cell-pad-x);
    vertical-align: middle;
    font-size: var(--tm-fs-base);
    border-color: var(--tm-border-soft);
    line-height: 1.4;
}

/* Proporsi spasi teks bersusun di dalam cell tabel agar tidak mepet */
.table tbody td strong + small,
.table tbody td .font-weight-bold + small,
.table tbody td span + small,
.table tbody td a + small,
.table tbody td small.d-block,
.table tbody td .small.d-block {
    display: block !important;
    margin-top: 3px !important;
    line-height: 1.35 !important;
}

/* Label form - satu gaya untuk seluruh modul dengan spasi proporsional */
.form-group label,
.tm-label {
    font-size: var(--fs-caption);
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
    line-height: 1.35;
}

/* .custom-control-label (checkbox/radio Bootstrap custom-control) juga
   sebuah <label>, jadi ikut kena aturan .form-group label di atas ketika
   berada di dalam .form-group -- font-size/line-height yang lebih kecil
   dari default Bootstrap membuat kotak checkbox (::before, posisinya
   top:0.25rem relatif thd baris teks default) tidak lagi sejajar dengan
   tulisan di sampingnya. Dikembalikan di sini secara global (bukan cuma
   di dalam .form-group) karena markup checkbox di aplikasi ini kadang
   dibungkus .form-group, kadang tidak. */
.custom-control-label {
    font-weight: 400;
    line-height: 1.5rem;
}

/* Universal Stepper & Timeline - Spasi Proporsional */
.tm-step-name {
    font-size: var(--fs-base) !important;
    font-weight: 700 !important;
    color: var(--tm-text-strong) !important;
    line-height: 1.35 !important;
    margin-top: 6px !important;
    margin-bottom: 3px !important;
}
.tm-step-role {
    font-size: var(--fs-caption) !important;
    color: var(--tm-text-subtle) !important;
    line-height: 1.35 !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}
.tm-step-meta {
    font-size: var(--fs-caption) !important;
    /* --tm-neutral (#94a3b8) gagal WCAG AA (2.56:1) untuk teks -- baris ini
       merender timestamp aksi approval (info penting, bukan dekorasi), jadi
       pakai --tm-text-subtle (4.76:1, lolos AA) alih-alih --tm-neutral. */
    color: var(--tm-text-subtle) !important;
    line-height: 1.35 !important;
    margin-top: 2px !important;
    margin-bottom: 5px !important;
}
.tm-step-remarks {
    font-size: var(--fs-caption) !important;
    color: #334155 !important;
    font-style: italic !important;
    margin-top: 6px !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    background-color: var(--tm-surface) !important;
    border: 1px solid var(--tm-border) !important;
    line-height: 1.4 !important;
    display: inline-block !important;
}

/* Metadata & Stack info card */
.tm-meta-stack {
    display: flex;
    flex-direction: column;
}
.tm-meta-label,
.tm-label-subtle {
    font-size: var(--fs-caption) !important;
    font-weight: 700 !important;
    color: var(--tm-text-subtle) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
    display: block !important;
}
.tm-meta-value {
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin-bottom: 3px !important;
}
.tm-meta-sub {
    font-size: var(--fs-caption) !important;
    color: var(--tm-text-subtle) !important;
    line-height: 1.35 !important;
    display: block !important;
}

/* Input - sudut membulat konsisten di semua halaman */
.tm-main-card .form-control,
.tm-main-card .custom-select,
.modal-content .form-control,
.modal-content .custom-select {
    border-radius: var(--tm-radius-sm);
}

/* --------------------------------------------------------------------------
   3. TOMBOL - menggantikan 51 kombinasi class ad-hoc.
   -------------------------------------------------------------------------- */
.tm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 700;
    font-size: var(--tm-fs-base);
    line-height: 1.2;
    padding: 7px 14px;
    border-radius: var(--tm-radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tm-btn:focus,
.tm-btn:focus-visible {
    outline: 2px solid var(--tm-primary);
    outline-offset: 2px;
    box-shadow: none;
}
.tm-btn:disabled,
.tm-btn.disabled { opacity: 0.55; cursor: not-allowed; }

.tm-btn-primary,
.btn-primary,
.btn-info {
    background-color: var(--tm-primary) !important;
    border-color: var(--tm-primary) !important;
    color: var(--tm-white) !important;
}
.tm-btn-primary:hover, .tm-btn-primary:focus,
.btn-primary:hover, .btn-primary:focus,
.btn-info:hover, .btn-info:focus {
    background-color: var(--tm-primary-dark) !important;
    border-color: var(--tm-primary-dark) !important;
    color: var(--tm-white) !important;
}

.tm-btn-outline-primary,
.btn-outline-primary,
.btn-outline-info {
    color: var(--tm-primary) !important;
    border-color: var(--tm-primary) !important;
    background-color: #ffffff !important;
}
.tm-btn-outline-primary:hover, .tm-btn-outline-primary:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-info:hover, .btn-outline-info:focus {
    background-color: var(--tm-primary-soft) !important;
    color: var(--tm-primary-dark) !important;
}

.tm-btn-secondary,
.btn-secondary,
.btn-outline-secondary,
.btn-light,
.btn-basic {
    background-color: var(--tm-white) !important;
    border-color: var(--tm-border-strong) !important;
    color: var(--tm-text-muted) !important;
}
.tm-btn-secondary:hover, .tm-btn-secondary:focus,
.btn-secondary:hover, .btn-secondary:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-light:hover, .btn-light:focus,
.btn-basic:hover, .btn-basic:focus {
    background-color: var(--tm-surface) !important;
    color: var(--tm-text-strong) !important;
}

.tm-btn-danger,
.btn-danger {
    background-color: var(--tm-danger) !important;
    border-color: var(--tm-danger) !important;
    color: var(--tm-white) !important;
}
.tm-btn-danger:hover, .tm-btn-danger:focus,
.btn-danger:hover, .btn-danger:focus {
    background-color: var(--tm-danger-dark) !important;
    border-color: var(--tm-danger-dark) !important;
    color: var(--tm-white) !important;
}

.tm-btn-outline-danger,
.btn-outline-danger {
    color: var(--tm-danger) !important;
    border-color: var(--tm-danger) !important;
    background-color: #ffffff !important;
}
.tm-btn-outline-danger:hover, .tm-btn-outline-danger:focus,
.btn-outline-danger:hover, .btn-outline-danger:focus {
    background-color: var(--tm-danger-bg) !important;
    color: var(--tm-danger-dark) !important;
}

.tm-btn-success,
.btn-success {
    background-color: var(--tm-success) !important;
    border-color: var(--tm-success) !important;
    color: var(--tm-white) !important;
}
.tm-btn-success:hover, .tm-btn-success:focus,
.btn-success:hover, .btn-success:focus {
    background-color: var(--tm-success-dark) !important;
    border-color: var(--tm-success-dark) !important;
    color: var(--tm-white) !important;
}

.tm-btn-outline-success,
.btn-outline-success {
    color: var(--tm-success) !important;
    border-color: var(--tm-success) !important;
    background-color: #ffffff !important;
}
.tm-btn-outline-success:hover, .tm-btn-outline-success:focus,
.btn-outline-success:hover, .btn-outline-success:focus {
    background-color: var(--tm-success-bg) !important;
    color: var(--tm-success-dark) !important;
}

.tm-btn-warning,
.btn-warning {
    background-color: var(--tm-warning) !important;
    border-color: var(--tm-warning) !important;
    color: var(--tm-white) !important;
}
.tm-btn-warning:hover, .tm-btn-warning:focus,
.btn-warning:hover, .btn-warning:focus {
    background-color: var(--tm-warning-dark) !important;
    border-color: var(--tm-warning-dark) !important;
    color: var(--tm-white) !important;
}

.tm-btn-outline-warning,
.btn-outline-warning {
    color: var(--tm-warning) !important;
    border-color: var(--tm-warning) !important;
    background-color: #ffffff !important;
}
.tm-btn-outline-warning:hover, .tm-btn-outline-warning:focus,
.btn-outline-warning:hover, .btn-outline-warning:focus {
    background-color: var(--tm-warning-bg) !important;
    color: var(--tm-warning-dark) !important;
}

/* Tombol aksi kecil di dalam baris tabel */
.tm-btn-xs {
    height: 28px !important;
    min-height: 28px !important;
    line-height: 26px !important;
    font-size: var(--tm-fs-sm);
    padding: 0 9px !important;
    border-radius: var(--tm-radius-lg);
    gap: 3px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* Tombol kembali bundar di header halaman */
.tm-btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--tm-border);
    border-radius: 50%;
    background-color: var(--tm-white);
}
.tm-btn-back:hover { background-color: var(--tm-surface); }
.tm-btn-back img { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   4. BADGE STATUS - selaras dengan TmDataTableFormatter.
   -------------------------------------------------------------------------- */
.tm-badge {
    display: inline-flex;
    align-items: center;
    width: auto !important;
    font-weight: 700;
    font-size: var(--tm-fs-sm);
    padding: 3px 10px;
    border-radius: var(--tm-radius-lg);
    border: 1px solid transparent;
    white-space: nowrap;
}
.tm-badge-success  { background-color: var(--tm-success-bg);  color: var(--tm-success-fg);  border-color: var(--tm-success-bd); }
.tm-badge-warning  { background-color: var(--tm-warning-bg);  color: var(--tm-warning-fg);  border-color: var(--tm-warning-bd); }
.tm-badge-progress { background-color: var(--tm-progress-bg); color: var(--tm-progress-fg); border-color: var(--tm-progress-bd); }
.tm-badge-danger   { background-color: var(--tm-danger-bg);   color: var(--tm-danger-fg);   border-color: var(--tm-danger-bd); }
.tm-badge-info     { background-color: var(--tm-info-bg);     color: var(--tm-info-fg);     border-color: var(--tm-info-bd); }
.tm-badge-purple   { background-color: var(--tm-purple-bg);   color: var(--tm-purple-fg);   border-color: var(--tm-purple-bd); }
.tm-badge-neutral  { background-color: var(--tm-neutral-bg);  color: var(--tm-neutral-fg);  border-color: var(--tm-neutral-bd); }

/* Alias .badge-pastel-info (dipakai matrix/delegation/hierarchy/report ---
   sebelumnya didefinisikan ulang di 4 file berbeda dan sudah menyimpang:
   matrix biru #1d4ed8, tiga lainnya cyan #0369a1. Disatukan di sini sebagai
   satu sumber, memakai token --tm-info-* (identik dengan nilai matrix). Ukuran
   badge (display/padding/radius) tetap didefinisikan lokal per view karena
   beberapa halaman memakainya bersama badge-pastel-* lain dengan variasi
   ukuran yang berbeda -- hanya WARNA yang disatukan di sini untuk mencegah
   drift lebih lanjut. */
.badge-pastel-info { background-color: var(--tm-info-bg) !important; color: var(--tm-info-fg) !important; border: 1px solid var(--tm-info-bd) !important; }

/* Varian kecil - dipakai badge audit trail & durasi di dalam tabel */
.tm-badge-sm { font-size: var(--tm-fs-xs); padding: 2px 8px; border-radius: 10px; }
/* Varian durasi */
.tm-badge-duration { background-color: var(--tm-primary-soft); color: var(--tm-primary); border-color: #bae6fd; }
.tm-badge-duration-day { background-color: var(--tm-surface); color: var(--tm-text); border-color: var(--tm-border); }

/* --------------------------------------------------------------------------
   Badge kode kehadiran / subtipe izin (dipakai TmDataTableFormatter).
   Satu kode = satu kelas, supaya warnanya tidak perlu ditulis ulang di view.
   -------------------------------------------------------------------------- */
.tm-code { font-size: var(--tm-fs-sm); padding: 2px 8px; border-radius: var(--tm-radius-md); }
.tm-code-cr { background-color: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.tm-code-ct { background-color: #ccfbf1; color: #0f766e; border-color: #99f6e4; }
.tm-code-os { background-color: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }
.tm-code-ot { background-color: #fef3c7; color: #92400e; border-color: #fde68a; }
.tm-code-h  { background-color: #dcfce7; color: #166534; border-color: #bbf7d0; }
.tm-code-p  { background-color: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.tm-code-sv { background-color: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.tm-code-s  { background-color: #ffe4e6; color: #be123c; border-color: #fecdd3; }
.tm-code-st { background-color: #fee2e2; color: #991b1b; border-color: #fecaca; }
.tm-code-hj { background-color: #fef3c7; color: #854d0e; border-color: #fef08a; }
.tm-code-ip { background-color: #fdf2f8; color: #9d174d; border-color: #fbcfe8; }
.tm-code-default { background-color: var(--tm-surface-alt); color: #334155; border-color: var(--tm-border-strong); }
.tm-code-extra { font-size: var(--fs-caption); padding: 1px 5px; border-radius: var(--tm-radius-md); }

/* Titik legenda kalender - mewarisi warna status yang sama dengan badge tabel */
.tm-legend-dot {
    display: inline-block;
    width: auto !important;
    padding: 1px 6px;
    margin-right: 4px;
    border-radius: var(--tm-radius-sm);
    border: 1px solid transparent;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. EMPTY STATE - dipakai window.tmDtLang() supaya seragam di semua tabel.
   -------------------------------------------------------------------------- */
.tm-empty { text-align: center; padding: 28px 12px; }
.tm-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
}
.tm-empty-icon img { width: 20px; opacity: 0.55; }
/* Nada hijau untuk empty state yang bersifat positif ("semua sudah beres") */
.tm-empty-icon-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.tm-empty-title {
    font-size: var(--tm-fs-md);
    font-weight: 700;
    color: var(--tm-text-strong);
    margin-bottom: 4px;
}
.tm-empty-text {
    font-size: var(--tm-fs-base);
    color: var(--tm-text-subtle);
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6. HEADER HALAMAN
   -------------------------------------------------------------------------- */
/* Baseline Universal Header (Desktop & Mobile) */
.tm-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tm-mobile-header-actions,
.tm-mobile-header .tm-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   ENTERPRISE UNIFIED DATATABLES SYSTEM (Universal for Desktop & Mobile)
   - 100% identical styling across all tables
   - "Tampilkan ... data" lengthMenu completely removed
   - Search bar 100% full width with search icon & placeholder
   - Modern, touch-friendly pagination buttons with zero clipping
   ========================================================================== */
/* Keep every table inside its card. Wide tables scroll instead of overlapping
   adjacent content; mobile DataTables use Responsive child rows. */
.table-responsive:has(.dataTables_wrapper),
.table-responsive:has(> .dataTables_wrapper),
.table-responsive:has(.dataTable),
.table-responsive:has(> table.dataTable),
.card-body > .table-responsive,
.table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.dataTables_wrapper,
div.dataTables_wrapper {
    position: relative !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* The table stays fluid; its parent owns any remaining horizontal overflow. */
.dataTables_wrapper .dataTable,
.dataTables_wrapper table.dataTable {
    width: 100% !important;
    box-sizing: border-box !important;
}
.dataTables_wrapper::before,
.dataTables_wrapper::after,
div.dataTables_wrapper::before,
div.dataTables_wrapper::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Indikator "Memuat data..." -- defaultnya teks polos absolute-center tanpa
   latar, sehingga terlihat melayang acak dan bisa menimpa header tabel saat
   wrapper masih pendek (belum ada baris). Kartu kecil dengan latar solid
   membuatnya terbaca sebagai status, bukan tumpang tindih dengan konten.
   TIDAK boleh diberi "display: ... !important" -- DataTables sendiri yang
   toggle show/hide elemen ini lewat inline style saat processing mulai/
   selesai; !important di sini akan mengunci elemen selalu tampil walau
   data sudah selesai dimuat (bug: overlay "Memuat data..." nyangkut permanen
   menimpa baris tabel meski datanya sudah berhasil tampil). */
.dataTables_wrapper .dataTables_processing,
div.dataTables_wrapper div.dataTables_processing {
    top: 64px !important;
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    width: calc(100% - 24px) !important;
    left: 12px !important;
    margin: 0 !important;
    padding: 1rem 1.1rem .5rem !important;
    border: 1px solid var(--tm-border, #e2e8f0);
    border-radius: var(--tm-radius-md, 12px);
    background: var(--tm-white, #fff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    color: var(--tm-text-muted, #475569);
    font-size: var(--tm-fs-sm, 13px);
    font-weight: 600;
}

.dataTables_wrapper .dataTables_processing[style*="display: block"],
div.dataTables_wrapper div.dataTables_processing[style*="display: block"] {
    display: flex !important;
}

/* ==========================================================================
   DATATABLES TOOLBAR (DESKTOP & MOBILE RESPONSIVE SYSTEM)
   - Desktop (>= 768px): Limit page on left ("Tampilkan [ 10 ] data"), search on right
   - Mobile (< 768px): Limit page hidden, search 100% full width
   ========================================================================== */

/* Universal DataTables Toolbar Reset */
.dataTables_wrapper .dataTables_length,
div.dataTables_wrapper div.dataTables_length {
    margin-bottom: 12px;
}
.dataTables_wrapper .dataTables_length label,
div.dataTables_wrapper div.dataTables_length label {
    font-size: var(--fs-caption);
    color: #475569;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
}
.dataTables_wrapper .dataTables_length select,
div.dataTables_wrapper div.dataTables_length select {
    height: 34px !important;
    min-height: 34px !important;
    line-height: 32px !important;
    padding: 0 24px 0 14px !important;
    border-radius: 20px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: var(--fs-caption) !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    margin: 0 4px !important;
}

/* Universal Segmented Control / Filter Tabs (Identical across all modules) */
.tm-segmented-control {
    display: inline-flex;
    background-color: #f1f5f9;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.tm-segmented-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: var(--fs-caption);
    font-weight: 600;
    color: #64748b;
    border-radius: 6px;
    text-decoration: none !important;
    transition: all 0.15s ease;
    cursor: pointer;
    border: none;
    background: transparent;
    margin-right: 2px;
    white-space: nowrap;
}
.tm-segmented-btn:hover {
    color: #0f172a;
}
.tm-segmented-btn.active {
    background-color: #ffffff;
    color: #0284c7;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tm-tab-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: var(--fs-caption);
    font-weight: 700;
    background-color: #e2e8f0;
    color: #475569;
    transition: all 0.15s ease;
}
.tm-segmented-btn.active .tm-tab-count {
    background-color: #e0f2fe;
    color: #0284c7;
}
.dataTables_wrapper .dataTables_filter,
div.dataTables_wrapper div.dataTables_filter {
    margin-bottom: 12px;
}
.dataTables_wrapper .dataTables_filter label,
div.dataTables_wrapper div.dataTables_filter label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-size: 0;
    color: transparent;
    position: relative;
}
.dataTables_wrapper .dataTables_filter input,
div.dataTables_wrapper div.dataTables_filter input {
    height: 34px !important;
    line-height: 32px !important;
    padding: 0 16px 0 36px !important;
    border-radius: 20px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 15px 15px !important;
    font-size: var(--fs-caption) !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.dataTables_wrapper .dataTables_filter input::placeholder,
div.dataTables_wrapper div.dataTables_filter input::placeholder {
    /* #94a3b8 gagal WCAG AA (2.56:1); placeholder search box sering jadi
       satu-satunya label yang terlihat -- pakai --tm-text-subtle (4.76:1). */
    color: var(--tm-text-subtle) !important;
    font-size: var(--fs-caption) !important;
    font-weight: 400 !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: #0284c7 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

/* DESKTOP VIEW (min-width: 768px):
   - Page limit dropdown on left ("Tampilkan [ 10 ] data")
   - Search box on right
   - Info on left, pagination on right */
@media (min-width: 768px) {
    .dataTables_wrapper .dataTables_length,
    div.dataTables_wrapper div.dataTables_length {
        display: inline-flex !important;
        float: left !important;
    }
    .dataTables_wrapper .dataTables_filter,
    div.dataTables_wrapper div.dataTables_filter {
        display: inline-block !important;
        float: right !important;
    }
    .dataTables_wrapper .dataTables_filter input,
    div.dataTables_wrapper div.dataTables_filter input {
        width: 260px !important;
    }
    .dataTables_wrapper > .row:last-child,
    div.dataTables_wrapper > div.row:last-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: 12px !important;
    }
    .dataTables_wrapper .dataTables_info,
    div.dataTables_wrapper div.dataTables_info {
        text-align: left !important;
        float: left !important;
        font-size: var(--fs-caption) !important;
        color: #64748b !important;
    }
    .dataTables_wrapper .dataTables_paginate,
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: right !important;
        float: right !important;
        justify-content: flex-end !important;
    }

    /* Embedded card DataTables toolbar & footer padding */
    .workflow-section-card .dataTables_wrapper > .row:first-child,
    .workflow-section-card div.dataTables_wrapper > div.row:first-child {
        padding: 12px 18px 4px 18px !important;
        margin: 0 !important;
    }
    .workflow-section-card .dataTables_wrapper > .row:last-child,
    .workflow-section-card div.dataTables_wrapper > div.row:last-child {
        padding: 8px 18px 14px 18px !important;
        margin: 0 !important;
    }
}

/* MOBILE VIEW (max-width: 767.98px):
   - Page limit dropdown HIDDEN
   - Search box 100% full width
   - Info & pagination stacked centered */
@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_length,
    div.dataTables_wrapper div.dataTables_length,
    .dataTables_length {
        display: none !important;
    }
    .dataTables_wrapper .dataTables_filter,
    div.dataTables_wrapper div.dataTables_filter {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }
    .dataTables_wrapper .dataTables_filter label,
    div.dataTables_wrapper div.dataTables_filter label {
        width: 100% !important;
    }
    .dataTables_wrapper .dataTables_filter input,
    div.dataTables_wrapper div.dataTables_filter input {
        width: 100% !important;
        height: 38px !important;
        line-height: 36px !important;
    }
    .dataTables_wrapper > .row:last-child,
    div.dataTables_wrapper > div.row:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .dataTables_wrapper .dataTables_info,
    div.dataTables_wrapper div.dataTables_info {
        text-align: center !important;
        float: none !important;
        width: 100% !important;
        font-size: var(--fs-caption) !important;
    }
    .dataTables_wrapper .dataTables_paginate,
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: center !important;
        float: none !important;
        justify-content: center !important;
        width: 100% !important;
    }
}

/* DataTables Empty State Styling */
.dataTables_wrapper td.dataTables_empty {
    padding: 24px 15px !important;
    background: transparent !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.dataTables_wrapper > .row:last-child > [class*="col-"],
div.dataTables_wrapper > div.row:last-child > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.dataTables_wrapper .dataTables_info,
div.dataTables_wrapper div.dataTables_info {
    font-size: var(--fs-caption) !important;
    color: #64748b !important;
    padding: 8px 0 !important;
    line-height: 1.5 !important;
    float: left !important;
    clear: none !important;
    margin: 0 !important;
}
.dataTables_wrapper .dataTables_paginate,
div.dataTables_wrapper div.dataTables_paginate {
    float: right !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    margin: 0 !important;
    clear: none !important;
}
.dataTables_wrapper .dataTables_paginate ul.pagination,
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
}

/* Neutralize <li> container: zero border, zero background, zero padding (stops double-box overlap!) */
.dataTables_wrapper .dataTables_paginate ul.pagination > li,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li,
.dataTables_wrapper .dataTables_paginate ul.pagination > li.page-item,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.page-item,
.dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.paginate_button {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    line-height: normal !important;
    display: inline-flex !important;
    float: none !important;
}

/* SINGLE-LAYER BUTTON: Clean, crisp, touch-friendly rounded button */
.dataTables_wrapper .dataTables_paginate ul.pagination .page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link,
.dataTables_wrapper .dataTables_paginate > a.paginate_button,
div.dataTables_wrapper div.dataTables_paginate > a.paginate_button {
    min-width: 32px !important;
    height: 32px !important;
    line-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    color: #475569 !important;
    font-size: var(--fs-caption) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease-in-out !important;
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

/* Hover State */
.dataTables_wrapper .dataTables_paginate ul.pagination li.page-item:not(.active):not(.disabled) .page-link:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item:not(.active):not(.disabled) .page-link:hover,
.dataTables_wrapper .dataTables_paginate > a.paginate_button:hover:not(.current):not(.disabled),
div.dataTables_wrapper div.dataTables_paginate > a.paginate_button:hover:not(.current):not(.disabled) {
    background-color: #f0f9ff !important;
    color: #0284c7 !important;
    border-color: #bae6fd !important;
    z-index: 2 !important;
}

/* Active State */
.dataTables_wrapper .dataTables_paginate ul.pagination li.page-item.active .page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate > a.paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate > a.paginate_button.current {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3) !important;
    z-index: 3 !important;
}

/* Disabled State */
.dataTables_wrapper .dataTables_paginate ul.pagination li.page-item.disabled .page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate > a.paginate_button.disabled,
div.dataTables_wrapper div.dataTables_paginate > a.paginate_button.disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Ellipsis (...) */
.dataTables_wrapper .dataTables_paginate ul.pagination li.page-item.disabled .page-link:not([href]),
.dataTables_wrapper .dataTables_paginate .ellipsis,
div.dataTables_wrapper div.dataTables_paginate .ellipsis {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #94a3b8 !important;
    font-size: var(--fs-caption) !important;
    min-width: 20px !important;
    padding: 0 4px !important;
    box-shadow: none !important;
    height: 32px !important;
    line-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* GLOBAL MOBILE IMPROVEMENTS (Applies to all viewports <= 767.98px) */
@media (max-width: 767.98px) {
    /* Main Panel & Container Padding */
    .main-panel {
        padding: 10px 8px !important;
    }
    #myhome {
        padding: 4px 6px !important;
        margin-bottom: 70px !important;
    }
    .grid-margin.stretch-card {
        margin-top: 4px !important;
        margin-bottom: 10px !important;
    }
    .tm-main-card {
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }
    .card-body.p-4, .card-body.round {
        padding: 12px 10px !important;
    }

    /* Global Button White-space Protection (Universal) */
    .btn, .btn-sm, .btn-xs, .btn-md, .btn-lg {
        white-space: nowrap !important;
    }

    /* 1. Universal Mobile Header Styling */
    .tm-mobile-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        gap: 8px !important;
    }
    .tm-mobile-header .tm-header-left,
    .tm-mobile-header > div:first-child {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        max-width: calc(100% - 90px) !important;
    }
    .tm-mobile-header .tm-header-title {
        font-size: var(--fs-lead) !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .tm-mobile-header .tm-header-sub {
        font-size: var(--fs-caption) !important;
        color: #64748b !important;
        line-height: 1.35 !important;
        display: block !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .tm-mobile-header .tm-header-actions,
    .tm-mobile-header .tm-mobile-header-actions,
    .tm-mobile-header-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
        width: auto !important;
        gap: 6px !important;
        padding-bottom: 0 !important;
    }
    .tm-mobile-header .tm-header-actions .btn:not(.d-none),
    .tm-mobile-header .tm-mobile-header-actions .btn:not(.d-none),
    .tm-mobile-header-actions .btn:not(.d-none),
    .tm-mobile-header-actions .btn-sm:not(.d-none),
    .tm-mobile-header-actions a.btn:not(.d-none),
    .tm-mobile-header-actions button.btn:not(.d-none) {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        height: 34px !important;
        line-height: 32px !important;
        padding: 0 14px !important;
        font-size: var(--fs-caption) !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 17px !important;
        margin: 0 !important;
        text-align: center !important;
    }
    .tm-mobile-header .tm-header-actions .d-none,
    .tm-mobile-header-actions .d-none {
        display: none !important;
    }
    .tm-mobile-header-actions .btn span,
    .tm-mobile-header-actions .btn-sm span {
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
    }

    /* 2. Seamless Horizontal Scrollable Segmented Controls (Tabs) */
    .tm-segmented-control {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        padding: 3px !important;
        border-radius: 8px !important;
        gap: 3px !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important;  /* IE and Edge */
    }
    .tm-segmented-control::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari, Opera */
    }
    .tm-segmented-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 6px 10px !important;
        font-size: var(--fs-caption) !important;
        border-radius: 6px !important;
    }
    .tm-tab-count {
        margin-left: 4px !important;
        padding: 1px 6px !important;
        font-size: var(--fs-caption) !important;
    }

    /* 3. Compact & Modern Profile Box (Step 1) */
    .profile-locked-box {
        padding: 10px 12px !important;
        border-radius: 10px !important;
        margin-bottom: 14px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
    }
    .profile-locked-box .row {
        margin-left: -4px !important;
        margin-right: -4px !important;
    }
    .profile-locked-col {
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .profile-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: var(--fs-sm) !important;
        margin-right: 10px !important;
        flex-shrink: 0 !important;
    }
    .profile-locked-label {
        font-size: var(--fs-caption) !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        margin-bottom: 2px !important;
    }
    .profile-locked-val {
        font-size: var(--fs-caption) !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
    }
    .profile-meta {
        font-size: var(--fs-caption) !important;
        margin-top: 2px !important;
    }
    .profile-badge {
        font-size: var(--fs-caption) !important;
        padding: 1px 6px !important;
        margin-left: 6px !important;
    }

    /* 4. Step Badges & Section Headers */
    .step-number-badge {
        width: 22px !important;
        height: 22px !important;
        font-size: var(--fs-caption) !important;
        margin-right: 8px !important;
    }
    .form-section-card {
        border-radius: 10px !important;
        margin-bottom: 12px !important;
    }
    .form-section-header {
        padding: 8px 12px !important;
        font-size: var(--fs-caption) !important;
    }
    .form-section-body {
        padding: 12px 10px !important;
    }

    /* 5. Touch-friendly Inputs & Unified Controls */
    .form-group {
        margin-bottom: 10px !important;
    }
    .form-group label {
        font-size: var(--fs-caption) !important;
        font-weight: 700 !important;
        margin-bottom: 4px !important;
        color: #334155 !important;
    }
    .form-control:not(textarea),
    .form-control-sm:not(textarea),
    input[type="text"]:not(.swal2-input),
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    select.form-control:not([multiple]):not(.select2-hidden-accessible),
    select.form-control-sm:not([multiple]):not(.select2-hidden-accessible) {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        line-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
        font-size: var(--fs-caption) !important;
    }
    /* Input dengan ikon di dalam wrapper (mis. .sc-search-wrap di halaman
       LMS dan .tm-filter-search-wrap di semua filter/pencarian) butuh ruang
       ekstra di kiri supaya teks tidak tertimpa ikon -- reset padding !important
       di atas jangan menghapus ruang itu. */
    .sc-search-wrap input[type="search"],
    .sc-search-wrap input,
    .tm-filter-search-wrap input,
    .tm-filter-search-wrap .tm-filter-control,
    .tm-filter-search-wrap input.tm-filter-control,
    .tm-filter-search-wrap input[type="text"],
    .tm-filter-search-wrap input[type="search"],
    .tm-filter-search-wrap input.form-control {
        padding-left: 38px !important;
    }
    textarea.form-control, textarea.form-control-sm {
        min-height: 56px !important;
        font-size: var(--fs-caption) !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
    }
    .select2-container .select2-selection--single,
    .select2-container--bootstrap .select2-selection--single,
    .select2-container--default .select2-selection--single {
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 10px !important;
    }
    .select2-container .select2-selection--single .select2-selection__rendered,
    .select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 34px !important;
        height: 34px !important;
        font-size: var(--fs-caption) !important;
        padding-left: 12px !important;
    }

    /* 5b. Anti Auto-Zoom iOS Safari: browser membesarkan viewport otomatis saat
       input/select/textarea di-tap bila font-size < 16px. Saat fokus, naikkan
       sementara ke 16px (ukuran visual tetap ringkas saat idle/blur). */
    .form-control:not(textarea):focus,
    .form-control-sm:not(textarea):focus,
    input[type="text"]:not(.swal2-input):focus,
    input[type="date"]:focus,
    input[type="time"]:focus,
    input[type="datetime-local"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="search"]:focus,
    select.form-control:not([multiple]):not(.select2-hidden-accessible):focus,
    select.form-control-sm:not([multiple]):not(.select2-hidden-accessible):focus,
    textarea.form-control:focus,
    textarea.form-control-sm:focus {
        font-size: var(--fs-lead) !important;
    }
    .select2-container--open .select2-selection--single .select2-selection__rendered {
        font-size: var(--fs-lead) !important;
    }

    /* 6. Compact Mobile FilePond */
    .filepond--root {
        margin-bottom: 4px !important;
    }
    .filepond--root {
        --fp-base: 96px;
    }
    .filepond-custom-idle {
        padding: 10px 8px !important;
    }
    .filepond-upload-icon-wrap {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 4px !important;
    }
    .filepond-upload-icon {
        width: 16px !important;
        height: 16px !important;
    }
    .filepond-primary-text {
        font-size: var(--fs-caption) !important;
        margin-bottom: 2px !important;
    }
    .filepond-sub-text {
        font-size: var(--fs-caption) !important;
        padding: 2px 8px !important;
    }

    /* 7. Approver Chain Row */
    .approver-row {
        padding: 8px 10px !important;
        margin-bottom: 6px !important;
        border-radius: 8px !important;
    }
    .approver-row .approver-avatar {
        width: 30px !important;
        height: 30px !important;
        font-size: var(--fs-caption) !important;
        margin-right: 8px !important;
    }
    .approver-row .approver-name {
        font-size: var(--fs-caption) !important;
        line-height: 1.25 !important;
    }
    .approver-row .approver-role {
        font-size: var(--fs-caption) !important;
    }
    .approver-row .badge {
        font-size: var(--fs-caption) !important;
        padding: 2px 6px !important;
    }

    /* 8. Pure-CSS Vertical Stepper Transformation on Mobile (progress.blade.php) */
    .tm-stepper-wrap {
        padding: 14px 12px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
    }
    .tm-stepper {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        position: relative !important;
        margin-top: 14px !important;
        padding: 0 !important;
    }
    .tm-stepper::before {
        content: '' !important;
        position: absolute !important;
        top: 20px !important;
        bottom: 20px !important;
        left: 17px !important;
        width: 2px !important;
        height: calc(100% - 40px) !important;
        right: auto !important;
        background-color: #e2e8f0 !important;
        z-index: 1 !important;
    }
    .tm-step-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        position: relative !important;
        text-align: left !important;
        width: 100% !important;
        padding: 0 0 18px 0 !important;
        margin: 0 !important;
        z-index: 2 !important;
    }
    .tm-step-item:last-child {
        padding-bottom: 0 !important;
    }
    .tm-step-circle {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 12px 0 0 !important;
        flex-shrink: 0 !important;
        background-color: #ffffff !important;
        border: 2px solid #cbd5e1 !important;
        font-size: var(--fs-caption) !important;
        font-weight: 700 !important;
        z-index: 3 !important;
    }
    .tm-step-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding-top: 2px !important;
    }
    .tm-step-badge {
        font-size: var(--fs-caption) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        padding: 2px 8px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    .tm-step-name {
        font-size: var(--fs-sm) !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
        margin: 2px 0 1px 0 !important;
        width: 100% !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
    .tm-step-role {
        font-size: var(--fs-caption) !important;
        color: #64748b !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        width: 100% !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
    .tm-step-meta {
        font-size: var(--fs-caption) !important;
        color: #94a3b8 !important;
        margin-top: 3px !important;
        width: 100% !important;
    }
    .tm-step-remarks {
        font-size: var(--fs-caption) !important;
        color: #334155 !important;
        font-style: italic !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 6px 10px !important;
        display: block !important;
        margin-top: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 9. KPI Metrics Strip & Cards */
    .tm-kpi-grid {
        margin-left: -5px !important;
        margin-right: -5px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 12px !important;
    }
    .tm-kpi-grid-col {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 10px !important;
    }
    .tm-kpi-grid-col .workflow-kpi-card {
        margin-bottom: 0 !important;
        border-radius: 12px !important;
    }
    .tm-metric-strip .tm-metric-col {
        padding: 8px 10px !important;
        border-right: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .tm-metric-icon-wrap {
        width: 32px !important;
        height: 32px !important;
        padding: 6px !important;
        margin-right: 8px !important;
        border-radius: 8px !important;
    }
    .tm-metric-val {
        font-size: 1.15rem !important;
    }
    .tm-metric-label {
        font-size: var(--fs-caption) !important;
    }

    /* 10. Tables & DataTables Mobile-First Comprehensive System */
    .table-responsive {
        border: none !important;
        margin-bottom: 8px !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        overflow-x: auto !important;
    }
    table.dataTable,
    .table-responsive table {
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
    }
    table.dataTable thead th,
    .table-responsive table thead th {
        font-size: var(--fs-caption) !important;
        padding: 8px 8px !important;
        letter-spacing: 0.02em !important;
        background-color: #f8fafc !important;
        color: #475569 !important;
        font-weight: 700 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    table.dataTable thead th.text-nowrap,
    table.dataTable thead th:last-child {
        white-space: nowrap !important;
    }
    table.dataTable tbody td,
    .table-responsive table tbody td {
        font-size: var(--fs-caption) !important;
        padding: 8px 8px !important;
        vertical-align: middle !important;
        border-color: #f1f5f9 !important;
        word-break: break-word !important;
    }
    table.dataTable tbody td.text-nowrap {
        white-space: nowrap !important;
    }

    /* Bootstrap 4 Fractional Spacing Polyfills */
    .mr-1\.5 { margin-right: 6px !important; }
    .ml-1\.5 { margin-left: 6px !important; }
    .mt-1\.5 { margin-top: 6px !important; }
    .mb-1\.5 { margin-bottom: 6px !important; }
    .px-1\.5 { padding-left: 6px !important; padding-right: 6px !important; }
    .py-1\.5 { padding-top: 6px !important; padding-bottom: 6px !important; }
    .px-2\.5 { padding-left: 10px !important; padding-right: 10px !important; }
    .py-2\.5 { padding-top: 10px !important; padding-bottom: 10px !important; }
    .p-2\.5 { padding: 10px !important; }
    .mr-2\.5 { margin-right: 10px !important; }
    .ml-2\.5 { margin-left: 10px !important; }

    /* Clean Modern Circular Expand/Collapse Control (Strictly scoped to collapsed tables only) */
    table.dataTable.dtr-inline.collapsed > tbody > tr,
    table.dataTable.collapsed > tbody > tr {
        cursor: pointer !important;
    }
    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
    table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control,
    table.dataTable.collapsed > tbody > tr > td.dtr-control,
    table.dataTable.collapsed > tbody > tr > th.dtr-control {
        position: relative !important;
        padding-left: 32px !important;
        cursor: pointer !important;
    }
    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
    table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before,
    table.dataTable.collapsed > tbody > tr > td.dtr-control::before,
    table.dataTable.collapsed > tbody > tr > th.dtr-control::before {
        content: "+" !important;
        position: absolute !important;
        left: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 17px !important;
        height: 17px !important;
        border-radius: 50% !important;
        background-color: #0284c7 !important;
        color: #ffffff !important;
        font-size: var(--fs-sm) !important;
        font-weight: 700 !important;
        line-height: 16px !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 1px 3px rgba(2, 132, 199, 0.25) !important;
        margin-right: 0 !important;
        border: none !important;
    }
    table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
    table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before,
    table.dataTable.collapsed > tbody > tr.parent > td.dtr-control::before,
    table.dataTable.collapsed > tbody > tr.parent > th.dtr-control::before {
        content: "−" !important;
        background-color: #64748b !important;
        color: #ffffff !important;
        box-shadow: none !important;
        line-height: 13px !important;
    }

    /* Child Row Details Transformed Into A Sleek Mobile Card */
    table.dataTable > tbody > tr.child {
        background-color: transparent !important;
    }
    table.dataTable > tbody > tr.child:hover {
        background-color: transparent !important;
    }
    table.dataTable > tbody > tr.child > td.child {
        padding: 4px 6px 12px 6px !important;
        background-color: transparent !important;
        border-top: none !important;
    }
    table.dataTable > tbody > tr.child ul.dtr-details {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        background-color: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 10px 14px !important;
        margin: 0 !important;
        list-style: none !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    }
    table.dataTable > tbody > tr.child ul.dtr-details > li {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 0 !important;
        border-bottom: 1px dashed #e2e8f0 !important;
        font-size: var(--fs-caption) !important;
        min-height: 32px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
        border-bottom: none !important;
        padding-bottom: 2px !important;
    }

    /* Left: Field Title / Label in Child Card */
    table.dataTable > tbody > tr.child span.dtr-title {
        font-size: var(--fs-caption) !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        margin-right: 10px !important;
        flex: 0 0 auto !important;
        max-width: 48% !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: normal !important;
    }
    table.dataTable > tbody > tr.child span.dtr-title .tm-hint {
        width: 14px !important;
        height: 14px !important;
        font-size: var(--fs-caption) !important;
        margin-left: 4px !important;
    }

    /* Right: Field Value / Badge in Child Card */
    table.dataTable > tbody > tr.child span.dtr-data {
        font-size: var(--fs-caption) !important;
        color: #0f172a !important;
        text-align: right !important;
        flex: 1 1 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        min-width: 0 !important;
        word-break: break-word !important;
    }
    table.dataTable > tbody > tr.child span.dtr-data small {
        display: block !important;
        width: 100% !important;
        text-align: right !important;
    }
    table.dataTable > tbody > tr.child span.dtr-data * {
        max-width: none !important;
        white-space: normal !important;
    }

    /* Actions Row in Child Card (Tindakan) */
    table.dataTable > tbody > tr.child span.dtr-data .d-flex {
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        width: 100% !important;
    }
    table.dataTable > tbody > tr.child span.dtr-data .btn,
    table.dataTable > tbody > tr.child span.dtr-data .btn-xs {
        height: 28px !important;
        line-height: 26px !important;
        padding: 0 10px !important;
        font-size: var(--fs-caption) !important;
        font-weight: 700 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }

    /* Bottom Pagination and Info on Mobile (Simple, Centered, Zero Overlap, No Overflow) */
    .dataTables_wrapper > .row:last-child,
    div.dataTables_wrapper > div.row:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    .dataTables_wrapper .dataTables_info,
    div.dataTables_wrapper div.dataTables_info {
        font-size: var(--fs-caption) !important;
        color: #64748b !important;
        padding: 4px 6px !important;
        text-align: center !important;
        float: none !important;
        width: 100% !important;
        clear: both !important;
        line-height: 1.4 !important;
        word-break: normal !important;
        white-space: normal !important;
    }
    .dataTables_wrapper .dataTables_paginate,
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: center !important;
        float: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
        margin-top: 2px !important;
        margin-bottom: 6px !important;
        clear: both !important;
    }
    .dataTables_wrapper .dataTables_paginate ul.pagination,
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Clean, single-layer mobile buttons */
    .dataTables_wrapper .dataTables_paginate ul.pagination .page-link,
    div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link,
    .dataTables_wrapper .dataTables_paginate > a.paginate_button,
    div.dataTables_wrapper div.dataTables_paginate > a.paginate_button {
        min-width: 36px !important;
        height: 36px !important;
        line-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
        font-size: var(--fs-caption) !important;
        margin: 0 !important;
    }

    /* Previous & Next touch-friendly prominent buttons */
    .dataTables_wrapper .dataTables_paginate ul.pagination li.previous .page-link,
    .dataTables_wrapper .dataTables_paginate ul.pagination li.next .page-link,
    .dataTables_wrapper .dataTables_paginate > a.previous,
    .dataTables_wrapper .dataTables_paginate > a.next {
        min-width: 40px !important;
        height: 36px !important;
        line-height: 34px !important;
        font-size: var(--fs-lead) !important;
        font-weight: 700 !important;
        padding: 0 14px !important;
    }

    /* "Lebih Simple": On mobile screens, hide distant number buttons & ellipsis
       so pagination stays clean, simple, and never crowds or wraps!
       Keeps: Previous, Next, and the Active page */
    .dataTables_wrapper .dataTables_paginate ul.pagination li.page-item:not(.previous):not(.next):not(.active) {
        display: none !important;
    }

    /* Active Page Badge on Mobile: prominent & clean indicator */
    .dataTables_wrapper .dataTables_paginate ul.pagination li.page-item.active .page-link,
    div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.active .page-link {
        min-width: 46px !important;
        font-weight: 700 !important;
        font-size: var(--fs-sm) !important;
        background-color: #0284c7 !important;
        border-color: #0284c7 !important;
        color: #ffffff !important;
        box-shadow: 0 2px 5px rgba(2, 132, 199, 0.35) !important;
    }

    .card-body > .table-responsive,
    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        /* overflow-x sengaja dibiarkan auto (default Bootstrap) supaya
           DataTables Responsive tetap bisa mendeteksi overflow & collapse */
    }

    /* 11. FullCalendar Mobile Tuning (1 Row Horizontal Layout) */
    .fc-toolbar,
    .fc-header-toolbar,
    #list-event .fc-toolbar,
    #list-event .fc-header-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 4px !important;
        width: 100% !important;
    }
    .fc-toolbar .fc-toolbar-chunk,
    .fc-toolbar .fc-left,
    .fc-toolbar .fc-right,
    .fc-toolbar .fc-center,
    #list-event .fc-toolbar-chunk {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .fc-toolbar .fc-toolbar-chunk:nth-child(2),
    #list-event .fc-toolbar-chunk:nth-child(2) {
        flex-shrink: 1 !important;
        flex-grow: 1 !important;
        min-width: 0 !important;
    }
    .fc-toolbar h2,
    .fc-toolbar .fc-toolbar-title,
    #list-event .fc-toolbar-title {
        font-size: var(--fs-caption) !important;
        font-weight: 700 !important;
        margin: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
    }
    .fc-toolbar .fc-button,
    #list-event .fc-button {
        font-size: var(--fs-caption) !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        color: #334155 !important;
        padding: 3px 8px !important;
        border-radius: var(--tm-radius-pill, 20px) !important;
        white-space: nowrap !important;
        line-height: 1.4 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    }
    .fc-toolbar .fc-button:hover,
    #list-event .fc-button:hover {
        background: #f1f5f9 !important;
        color: var(--tm-primary, #0284c7) !important;
    }
    .fc-toolbar .fc-button-group,
    #list-event .fc-button-group {
        display: inline-flex !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }
    .fc-toolbar .fc-button-group .fc-button,
    #list-event .fc-button-group .fc-button {
        padding: 3px 6px !important;
        border-radius: 0 !important;
    }
    .tm-panel-box .tm-panel-body {
        padding: 12px 8px !important;
    }
    .cal-header {
        padding: 8px 2px !important;
        font-size: var(--fs-caption) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        background-color: #f8fafc !important;
    }
    .cal-cell {
        height: 58px !important;
        min-height: 58px !important;
        padding: 6px 4px !important;
        vertical-align: top !important;
        position: relative !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        transition: background-color 0.15s ease, border-color 0.15s ease !important;
    }
    .cal-cell:hover, .cal-cell:active {
        background-color: #f0f9ff !important;
    }
    .cal-cell.is-today {
        background-color: #f0fdf4 !important;
        border: 2px solid #22c55e !important;
    }
    .cal-cell.is-selected-date {
        background-color: #e0f2fe !important;
        border: 2px solid #0284c7 !important;
    }
    .cal-cell-inner {
        min-height: 46px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
    .cal-date-num {
        font-size: var(--fs-sm) !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
    }
    .cal-event-tag {
        font-size: var(--fs-caption) !important;
        padding: 2px 4px !important;
        border-radius: 4px !important;
        margin-top: 3px !important;
        font-weight: 700 !important;
        text-align: center !important;
        display: block !important;
        line-height: 1.2 !important;
    }

    /* 12. Modals & Dialogs on Mobile
       Catatan: aturan ini otomatis meng-override SEMUA inline
       style="max-width: ...px" pada .modal-dialog (mis. 700-800px untuk modal
       desktop yang lebih lebar) karena class selector + !important selalu
       menang atas inline style tanpa !important. Modal baru dengan lebar
       custom TIDAK perlu override tambahan apa pun untuk mobile. */
    .modal-dialog {
        margin: 10px auto !important;
        max-width: calc(100% - 16px) !important;
    }
    .modal-content {
        border-radius: 12px !important;
        max-height: calc(100dvh - 20px) !important;
        overflow: hidden !important;
    }
    .modal-content > form,
    form.modal-content {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
    .modal-header {
        padding: 10px 14px !important;
        flex: 0 0 auto !important;
    }
    .modal-title {
        font-size: var(--fs-base) !important;
        font-weight: 700 !important;
    }
    .modal-body {
        padding: 12px 14px !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
    .modal-footer {
        padding: 8px 14px !important;
        flex: 0 0 auto !important;
    }
    .modal-footer .btn {
        height: 34px !important;
        font-size: var(--fs-caption) !important;
    }

    /* 13. Mobile Bottom Action Floating Helper */
    .tm-mobile-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        /* Safe-area: tombol tidak boleh bersinggungan dengan home indicator iPhone
           / gesture bar Android (butuh viewport-fit=cover, sudah ada di layout). */
        padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
        z-index: 1030 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06) !important;
        display: flex !important;
        gap: 8px !important;
    }
    /* Selector sebelumnya hanya ".btn" (utility Bootstrap generik) --
       markup sticky bottom bar modul ini (mis. submission/create.blade.php)
       memakai komponen desain sendiri ".tm-btn", bukan ".btn", sehingga rule
       ini TIDAK PERNAH match dan CSS di bawah menjadi mati sejak awal
       ditulis. Ditambahkan ".tm-btn" agar benar-benar berlaku, dan ".btn"
       tetap dipertahankan untuk kompatibilitas bila ada markup lama yang
       masih memakainya. */
    .tm-mobile-bottom-bar .btn,
    .tm-mobile-bottom-bar .tm-btn {
        flex: 1 !important;
        height: 40px !important;
        line-height: 38px !important;
        font-size: var(--fs-sm) !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Tombol sekunder (mis. "Batal", "Simpan Draft") tetap kompak; tombol
       utama mengisi sisa ruang. */
    .tm-mobile-bottom-bar .btn-light,
    .tm-mobile-bottom-bar .tm-btn-secondary {
        flex: 0 0 auto !important;
    }
}

/* ==========================================================================
   DATATABLE RESPONSIVE CONTRACT
   Desktop: full table, no expand interaction. Mobile: progressive disclosure.
   ========================================================================== */
.dataTables_wrapper > .row,
div.dataTables_wrapper > div.row,
.dataTables_wrapper > .row > [class*="col-"],
div.dataTables_wrapper > div.row > [class*="col-"] {
    min-width: 0 !important;
    max-width: 100% !important;
}

table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc_disabled {
    position: relative !important;
    padding-right: 26px !important;
}

table.dataTable thead > tr > th.sorting::before,
table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > th.sorting_asc::before,
table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > th.sorting_desc::before,
table.dataTable thead > tr > th.sorting_desc::after {
    right: 8px !important;
}

@media (min-width: 768px) {
    .table-responsive,
    .table-responsive:has(.dataTables_wrapper) {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    table.dataTable.tm-datatable-desktop {
        width: 100% !important;
        max-width: none !important;
    }

    table.dataTable.tm-datatable-desktop > tbody > tr.child {
        display: none !important;
    }

    table.dataTable.tm-datatable-desktop th.dtr-hidden,
    table.dataTable.tm-datatable-desktop td.dtr-hidden {
        display: table-cell !important;
    }

    table.dataTable.tm-datatable-desktop > tbody > tr > td.dtr-control,
    table.dataTable.tm-datatable-desktop > tbody > tr > th.dtr-control {
        padding-left: 8px !important;
        cursor: default !important;
    }

    table.dataTable.tm-datatable-desktop > tbody > tr > td.dtr-control::before,
    table.dataTable.tm-datatable-desktop > tbody > tr > th.dtr-control::before {
        display: none !important;
        content: none !important;
    }

    table.dataTable.tm-datatable-desktop th,
    table.dataTable.tm-datatable-desktop td {
        vertical-align: middle !important;
    }
}

@media (max-width: 767.98px) {
    .dataTables_wrapper.tm-datatable-mobile {
        overflow: hidden !important;
    }

    .table-responsive:has(.dataTables_wrapper.tm-datatable-mobile),
    .table-responsive.tm-has-datatable-mobile {
        overflow-x: hidden !important;
    }

    .dataTables_wrapper.tm-datatable-mobile > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .dataTables_wrapper.tm-datatable-mobile > .row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .dataTables_wrapper.tm-datatable-mobile .dataTables_filter input {
        min-height: 42px !important;
        line-height: 40px !important;
        font-size: var(--fs-sm) !important;
    }

    table.dataTable.tm-datatable-mobile {
        width: 100% !important;
        table-layout: auto !important;
    }

    table.dataTable.tm-datatable-mobile > tbody > tr {
        cursor: default !important;
    }

    table.dataTable.tm-datatable-mobile > tbody > tr:not(.child) > td {
        background-clip: padding-box !important;
    }

    table.dataTable.tm-datatable-mobile > tbody > tr > td.dtr-control,
    table.dataTable.tm-datatable-mobile > tbody > tr > th.dtr-control {
        min-width: 36px !important;
        padding-left: 38px !important;
        cursor: pointer !important;
        touch-action: manipulation;
    }

    table.dataTable.tm-datatable-mobile > tbody > tr > td.dtr-control::before,
    table.dataTable.tm-datatable-mobile > tbody > tr > th.dtr-control::before {
        left: 8px !important;
        width: 20px !important;
        height: 20px !important;
        line-height: 20px !important;
        box-shadow: 0 2px 5px rgba(2, 132, 199, 0.24) !important;
    }

    table.dataTable.tm-datatable-mobile > tbody > tr.parent > td.dtr-control::before,
    table.dataTable.tm-datatable-mobile > tbody > tr.parent > th.dtr-control::before {
        content: "\2212" !important;
    }

    table.dataTable.tm-datatable-mobile > tbody > tr > td.dtr-control:focus-visible {
        outline: 2px solid #0284c7 !important;
        outline-offset: -3px !important;
        border-radius: 6px;
    }

    table.dataTable.tm-datatable-mobile > tbody > tr.child > td.child {
        padding: 4px 4px 12px !important;
    }

    table.dataTable.tm-datatable-mobile > tbody > tr.child ul.dtr-details {
        background: #ffffff !important;
        border-color: #dbe7f3 !important;
        border-left: 3px solid #0284c7 !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
    }

    table.dataTable.tm-datatable-mobile > tbody > tr.child ul.dtr-details > li {
        display: grid !important;
        grid-template-columns: minmax(96px, 42%) minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
    }

    table.dataTable.tm-datatable-mobile > tbody > tr.child span.dtr-title {
        max-width: none !important;
        margin-right: 0 !important;
    }

    table.dataTable.tm-datatable-mobile > tbody > tr.child span.dtr-data {
        width: 100% !important;
    }

    table.dataTable.tm-datatable-mobile tbody .btn,
    table.dataTable.tm-datatable-mobile tbody button,
    table.dataTable.tm-datatable-mobile tbody a.btn {
        min-height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation;
    }

    .dataTables_wrapper.tm-datatable-mobile .dataTables_paginate .page-link {
        min-width: 36px !important;
        height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 419.98px) {
    table.dataTable.tm-datatable-mobile > tbody > tr.child ul.dtr-details > li {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        align-items: start !important;
    }

    table.dataTable.tm-datatable-mobile > tbody > tr.child span.dtr-data,
    table.dataTable.tm-datatable-mobile > tbody > tr.child span.dtr-data small {
        justify-content: flex-start !important;
        text-align: left !important;
    }
}

/* Workflow report: filters, KPI and sections appear only when requested. */
.tm-report-filter-toggle,
.tm-report-summary-toggle,
.tm-report-section-nav {
    display: none;
}

@media (max-width: 767.98px) {
    .tm-report-filter-toggle {
        display: inline-flex !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .tm-report-page #workflowFilterPanel {
        display: none;
        margin-bottom: 10px !important;
    }

    .tm-report-page #workflowFilterPanel.is-mobile-open {
        display: block;
    }

    .tm-report-kpi-grid:not(.is-mobile-expanded) .tm-kpi-grid-col:nth-child(1),
    .tm-report-kpi-grid:not(.is-mobile-expanded) .tm-kpi-grid-col:nth-child(4) {
        display: none !important;
    }

    .tm-report-kpi-grid:not(.is-mobile-expanded) .tm-kpi-grid-col:nth-child(2),
    .tm-report-kpi-grid:not(.is-mobile-expanded) .tm-kpi-grid-col:nth-child(3) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .tm-report-summary-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 34px;
        padding: 5px 10px;
        border: 0;
        background: transparent;
        color: #0369a1;
        font-size: var(--fs-caption);
        font-weight: 700;
    }

    .tm-report-section-nav {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
        padding: 3px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #f1f5f9;
    }

    .tm-report-section-btn {
        min-width: 0;
        min-height: 38px;
        padding: 5px 7px;
        overflow: hidden;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: #64748b;
        font-size: var(--fs-caption);
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tm-report-section-btn.active {
        background: #ffffff;
        color: #0369a1;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
    }

    .tm-report-page .tm-report-mobile-section {
        display: none !important;
    }

    .tm-report-page .tm-report-mobile-section.is-active {
        display: block !important;
    }

    .tm-report-page .workflow-section-card .card-header {
        padding: 10px 12px !important;
    }

    .tm-report-page .workflow-section-card .card-header small {
        display: none !important;
    }

    .tm-report-page .workflow-section-card .card-header > div:first-child {
        min-width: 0;
    }

    .tm-report-page .workflow-section-card .card-header > div:first-child > span {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: var(--fs-caption);
        line-height: 1.25;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dataTables_wrapper *,
    table.dataTable * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
/* ==========================================================================
   TIME MANAGEMENT UNIVERSAL TOGGLE SWITCH SYSTEM
   Ensures 100% identical dimensions, colors, alignment & animations
   across all toggles in the Time Management module (.tm-switch & .custom-switch)
   ========================================================================== */

.tm-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin-bottom: 0;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    vertical-align: middle;
}
.tm-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    margin: 0;
    pointer-events: none;
}
.tm-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px;
}
.tm-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background-color: #ffffff;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
.tm-switch input:checked + .tm-switch-slider {
    background-color: #0284c7;
}
.tm-switch input:checked + .tm-switch-slider:before {
    transform: translateX(20px);
}
.tm-switch input:focus + .tm-switch-slider {
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
}

/* Universal Custom-Switch Normalizer (maps legacy Bootstrap custom-switch to tm-switch design) */
.custom-control.custom-switch {
    padding-left: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    cursor: pointer !important;
}
.custom-control.custom-switch .custom-control-input {
    opacity: 0 !important;
    width: 44px !important;
    height: 24px !important;
    position: absolute !important;
    z-index: 2 !important;
    cursor: pointer !important;
    margin: 0 !important;
}
.custom-control.custom-switch .custom-control-label {
    position: relative !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
    user-select: none !important;
    padding-left: 52px !important;
    line-height: 24px !important;
    display: inline-block !important;
}
.custom-control.custom-switch .custom-control-label::before {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 44px !important;
    height: 24px !important;
    background-color: #cbd5e1 !important;
    border: none !important;
    border-radius: 24px !important;
    transition: background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}
.custom-control.custom-switch .custom-control-label::after {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 18px !important;
    height: 18px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}
.custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #0284c7 !important;
}
.custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(20px) !important;
}

/* ==========================================================================
   7. MOBILE-FIRST ERGONOMICS untuk komponen design system baru.
      Diletakkan di akhir file supaya menang atas aturan desktop di atasnya,
      tapi tetap bisa ditimpa @yield('css') per halaman bila benar-benar perlu.
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Tabel lebih rapat supaya muat lebih banyak kolom sebelum di-collapse */
    .table thead th,
    .table tbody td {
        padding: 8px 8px;
        font-size: var(--fs-caption);
    }

    /* Tombol: target sentuh nyaman + tidak pernah terpotong */
    .tm-btn {
        min-height: var(--tm-touch-min);
        padding: 8px 14px;
        font-size: var(--fs-sm);
    }
    /* Sebelumnya 30px -- di bawah target sentuh minimum modul ini (44px,
       lihat --tm-touch-min). Tombol Setujui/Tolak/Detail di tabel approval
       adalah aksi PALING KRITIKAL (keputusan resmi atas dokumen), sehingga
       tetap dinaikkan ke 40px (kompromi: cukup besar untuk ditekan akurat
       tanpa memecah layout tabel padat) alih-alih dipaksa penuh 44px. */
    .tm-btn-xs {
        min-height: 40px;
        padding: 6px 12px;
        font-size: var(--tm-fs-sm);
    }
    /* Jarak antar tombol aksi bersebelahan (mis. Setujui + Tolak) di tabel
       sebelumnya hanya mr-1 (4px) -- terlalu rapat untuk aksi destruktif yang
       salah-tap-nya berakibat pada dokumen resmi. Diperbesar ke 8px khusus
       di mobile tanpa mengubah markup HTML manapun. */
    .tm-btn-xs.mr-1 {
        margin-right: 8px !important;
    }
    .tm-btn-back {
        width: var(--tm-touch-min);
        height: var(--tm-touch-min);
    }

    /* Tombol utama di header memenuhi lebar layar agar mudah dijangkau jempol */
    .tm-header-actions-stack .tm-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Grup aksi bertumpuk penuh di layar kecil */
    .tm-action-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .tm-action-group > .tm-btn { width: 100%; }

    /* Subjudul header disembunyikan agar judul tetap terbaca di layar sempit */
    .tm-header-subtitle { font-size: var(--tm-fs-sm); }

    /* Empty state lebih ringkas */
    .tm-empty { padding: 20px 10px; }
    .tm-empty-icon { width: 38px; height: 38px; margin-bottom: 8px; }
    .tm-empty-icon img { width: 18px; }
    .tm-empty-title { font-size: var(--tm-fs-base); }
    .tm-empty-text { font-size: var(--tm-fs-sm); }

    /* Badge sedikit lebih kecil supaya tidak mendorong lebar kolom */
    .tm-badge { font-size: var(--tm-fs-xs); padding: 2px 8px; }

    /* Modal: menempel ke bawah layar (sheet-style), lebih ergonomis */
    .modal-dialog { margin: 8px; }
    .modal-content { border-radius: var(--tm-radius-lg); }
    .modal-footer { gap: 8px; }
    .modal-footer > .tm-btn { flex: 1 1 auto; }
}

/* Input tidak boleh < 16px di iOS, kalau tidak Safari auto-zoom saat fokus */
@media (max-width: 767.98px) {
    .tm-main-card input.form-control,
    .tm-main-card select.form-control,
    .tm-main-card textarea.form-control,
    .modal-content input.form-control,
    .modal-content select.form-control,
    .modal-content textarea.form-control,
    .select2-container .select2-search__field {
        font-size: var(--fs-lead);
    }
}

/* ==========================================================================
   8. MODAL POSITIONING (TOP ALIGNED)
   Seluruh modal di modul Time Management diposisikan di bagian atas (top)
   layar untuk konsistensi tata letak dan kenyamanan pengisian formulir.
   Jembatan "JS Bootstrap 3 (.in) <-> CSS Bootstrap 4 (.show)" sengaja
   diletakkan di resources/views/layout.blade.php karena halaman di luar
   modul Time Management juga memakai .modal-dialog-centered.
   ========================================================================== */
.modal .modal-dialog,
.modal .modal-dialog-centered {
    display: block !important;
    min-height: auto !important;
    margin-top: 1.75rem !important;
    margin-bottom: 1.75rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.modal .modal-dialog-centered::before {
    display: none !important;
    height: 0 !important;
    content: none !important;
}

@media (max-width: 767.98px) {
    .modal .modal-dialog,
    .modal .modal-dialog-centered {
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================================================
   9. MOBILE INFORMATION HIERARCHY
   Progressive disclosure: satu aksi utama, ringkasan singkat, detail on demand.
   ========================================================================== */
@media (max-width: 767.98px) {
    .tm-mobile-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .tm-mobile-header > :first-child,
    .tm-mobile-header .tm-header-left {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    .tm-mobile-header .tm-header-title {
        display: -webkit-box !important;
        overflow: hidden !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-overflow: ellipsis !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: var(--fs-lead) !important;
        line-height: 1.2 !important;
    }

    .tm-mobile-header .tm-header-sub,
    .tm-mobile-header .tm-header-subtitle,
    .tm-mobile-header small {
        display: none !important;
    }

    .tm-mobile-header-actions,
    .tm-mobile-header .tm-header-actions {
        display: flex !important;
        width: auto !important;
        max-width: 138px !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    .tm-mobile-header-actions .tm-btn-secondary,
    .tm-mobile-header .tm-header-actions .tm-btn-secondary {
        display: none !important;
    }

    .tm-mobile-header-actions .tm-btn-primary,
    .tm-mobile-header .tm-header-actions .tm-btn-primary {
        min-width: 42px !important;
        max-width: 138px !important;
        min-height: 42px !important;
        padding: 7px 12px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .tm-segmented-control {
        scroll-snap-type: x proximity;
        scroll-padding-left: 3px;
        overscroll-behavior-x: contain;
    }

    .tm-segmented-btn {
        min-height: 40px !important;
        scroll-snap-align: start;
        padding: 7px 10px !important;
    }

    .tm-tab-count {
        flex: 0 0 auto;
        margin-left: 5px !important;
    }

    .dataTables_wrapper.tm-datatable-mobile table.dataTable {
        width: 100% !important;
        max-width: 100% !important;
    }

    .dataTables_wrapper.tm-datatable-mobile table.dataTable thead th {
        height: 36px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: var(--fs-caption) !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .dataTables_wrapper.tm-datatable-mobile table.dataTable thead th .tm-hint {
        display: none !important;
    }

    .dataTables_wrapper.tm-datatable-mobile table.dataTable > tbody > tr:not(.child) > td {
        min-height: 48px !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid #edf2f7 !important;
    }

    .dataTables_wrapper.tm-datatable-mobile table.dataTable > tbody > tr:not(.child) > td.dtr-control {
        padding-left: 32px !important;
    }

    .dataTables_wrapper.tm-datatable-mobile table.dataTable > tbody > tr:not(.child):nth-child(even) > td {
        background-color: #f8fafc !important;
    }

    .dataTables_wrapper.tm-datatable-mobile table.dataTable > tbody > tr.parent > td {
        background-color: #eff6ff !important;
    }

    .dataTables_wrapper.tm-datatable-mobile table.dataTable > tbody > tr.child ul.dtr-details {
        padding: 8px 12px !important;
    }

    .dataTables_wrapper.tm-datatable-mobile table.dataTable > tbody > tr.child ul.dtr-details > li {
        min-height: 40px !important;
        padding: 7px 0 !important;
    }

    .dataTables_wrapper.tm-datatable-mobile table.dataTable > tbody > tr.child span.dtr-title {
        color: #64748b !important;
        font-size: var(--fs-caption) !important;
    }

    .dataTables_wrapper.tm-datatable-mobile table.dataTable > tbody > tr.child span.dtr-data {
        color: #0f172a !important;
        font-size: var(--fs-caption) !important;
    }

    .dataTables_wrapper.tm-datatable-mobile .dataTables_info {
        padding-top: 10px !important;
        font-size: var(--fs-caption) !important;
    }

    .dataTables_wrapper.tm-datatable-mobile .dataTables_paginate {
        margin-top: 2px !important;
    }

    .dataTables_wrapper.tm-datatable-mobile td.dataTables_empty {
        height: auto !important;
        padding: 24px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .dataTables_wrapper.tm-datatable-mobile .tm-empty {
        padding: 12px 8px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        max-width: 320px !important;
    }

    .dataTables_wrapper.tm-datatable-mobile .tm-empty-text {
        max-width: 260px;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/* Matrix: desktop grid, mobile disclosure cards without cloning form controls. */
.matrix-expand-toggle,
.matrix-mobile-save-bar,
.tm-matrix-filter-toggle {
    display: none;
}

.matrix-type-code {
    display: inline-flex;
    margin-top: 3px;
}

#tableApprovalMatrix .tm-filtered-out {
    display: none !important;
}

@media (max-width: 767.98px) {
    .tm-matrix-page .tm-matrix-metrics {
        margin-bottom: 10px !important;
    }

    .tm-matrix-page .tm-matrix-metrics .tm-metric-col {
        display: none !important;
    }

    .tm-matrix-page .tm-matrix-metrics .tm-metric-col:first-child {
        display: flex !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
    }

    .tm-matrix-page #unsavedChangesBadge {
        display: none !important;
    }

    .tm-matrix-filter-panel {
        margin-bottom: 10px !important;
        padding: 10px !important;
    }

    .tm-matrix-filter-toggle {
        display: inline-flex !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .tm-filter-active-count {
        min-width: 20px;
        padding: 1px 6px;
        border-radius: 999px;
        background: #dbeafe;
        color: #0369a1;
        font-size: var(--fs-caption);
        font-weight: 700;
    }

    .tm-matrix-filter-panel .tm-matrix-search-filter label {
        display: none !important;
    }

    .tm-matrix-filter-panel .tm-matrix-advanced-filter {
        display: none;
    }

    .tm-matrix-filter-panel.tm-filters-open .tm-matrix-advanced-filter {
        display: block;
    }

    .tm-matrix-page .table-responsive:has(#tableApprovalMatrix) {
        overflow: visible !important;
        border: 0 !important;
    }

    #tableApprovalMatrix,
    #tableApprovalMatrix tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #tableApprovalMatrix thead {
        display: none !important;
    }

    #tableApprovalMatrix tbody tr.group-header-row {
        display: block;
        margin: 14px 0 7px;
        border: 0 !important;
    }

    #tableApprovalMatrix tbody tr.group-header-row:first-child {
        margin-top: 0;
    }

    #tableApprovalMatrix tbody tr.group-header-row td {
        display: block !important;
        width: 100% !important;
        padding: 6px 2px !important;
        border: 0 !important;
        background: transparent !important;
        color: #475569 !important;
        font-size: var(--fs-caption) !important;
        font-weight: 700 !important;
        letter-spacing: 0.025em;
        text-transform: uppercase;
    }

    #tableApprovalMatrix tbody tr.matrix-row {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 8px;
        align-items: center;
        width: 100%;
        margin-bottom: 8px;
        padding: 10px;
        overflow: hidden;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 2px 7px rgba(15, 23, 42, 0.04);
    }

    #tableApprovalMatrix tbody tr.matrix-row.matrix-expanded {
        border-color: #93c5fd !important;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.09);
    }

    #tableApprovalMatrix tbody tr.matrix-row > td {
        position: static !important;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #tableApprovalMatrix tbody tr.matrix-row > td:nth-child(1) {
        display: flex !important;
        grid-column: 1;
        grid-row: 1 / span 2;
        align-items: center;
        justify-content: center;
    }

    .matrix-expand-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #e0f2fe;
        color: #0369a1;
        font-size: var(--fs-lead);
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        touch-action: manipulation;
    }

    .matrix-expand-toggle:focus-visible {
        outline: 2px solid #0284c7;
        outline-offset: 2px;
    }

    .matrix-row-number {
        display: none;
    }

    #tableApprovalMatrix tbody tr.matrix-row > td:nth-child(2) {
        display: block !important;
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    #tableApprovalMatrix .matrix-type-name {
        display: -webkit-box !important;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: var(--fs-sm) !important;
        line-height: 1.25;
    }

    #tableApprovalMatrix .matrix-type-code {
        margin-top: 3px;
        font-size: var(--fs-caption) !important;
    }

    #tableApprovalMatrix tbody tr.matrix-row:not(.matrix-expanded) > td:nth-child(2) > div,
    #tableApprovalMatrix tbody tr.matrix-row:not(.matrix-expanded) > td:nth-child(2) > small {
        display: none !important;
    }

    #tableApprovalMatrix tbody tr.matrix-row > td:nth-child(3) {
        display: block !important;
        grid-column: 2;
        grid-row: 2;
        margin-top: 4px;
        text-align: left !important;
    }

    #tableApprovalMatrix tbody tr.matrix-row > td:nth-child(9) {
        display: block !important;
        grid-column: 3;
        grid-row: 1 / span 2;
        text-align: right !important;
    }

    #tableApprovalMatrix tbody tr.matrix-row > td:nth-child(n+4):nth-child(-n+8),
    #tableApprovalMatrix tbody tr.matrix-row > td:nth-child(10) {
        display: none !important;
    }

    #tableApprovalMatrix tbody tr.matrix-row.matrix-expanded > td:nth-child(n+4):nth-child(-n+8) {
        display: flex !important;
        grid-column: 1 / -1;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        margin-top: 6px;
        padding: 7px 4px 1px !important;
        border-top: 1px dashed #dbe4ee !important;
        text-align: right !important;
    }

    #tableApprovalMatrix tbody tr.matrix-row.matrix-expanded > td:nth-child(n+4):nth-child(-n+8)::before {
        content: attr(data-label);
        padding-right: 12px;
        color: #475569;
        font-size: var(--fs-caption);
        font-weight: 700;
        text-align: left;
    }

    #tableApprovalMatrix tbody tr.matrix-row.matrix-expanded > td:nth-child(10) {
        display: flex !important;
        grid-column: 1 / -1;
        gap: 8px;
        align-items: center;
        justify-content: stretch;
        margin-top: 8px;
        padding-top: 10px !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    #tableApprovalMatrix tbody tr.matrix-row.matrix-expanded > td:nth-child(10) .tm-btn {
        flex: 1 1 0;
        min-height: 38px;
        margin-right: 0 !important;
        justify-content: center;
    }

    #tableApprovalMatrix .matrix-check {
        width: 22px !important;
        height: 22px !important;
    }

    .tm-matrix-page .matrix-footer {
        display: none !important;
    }

    .matrix-mobile-save-bar {
        position: fixed;
        z-index: 1040;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        left: 8px;
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 9px 10px 9px 14px;
        border: 1px solid #bfdbfe;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .matrix-mobile-save-bar.is-visible {
        display: flex;
    }

    .matrix-mobile-save-copy {
        display: flex;
        min-width: 0;
        flex-direction: column;
        color: #64748b;
        font-size: var(--fs-caption);
        line-height: 1.2;
    }

    .matrix-mobile-save-copy strong {
        color: #0f172a;
        font-size: var(--fs-base);
    }

    .matrix-mobile-save-bar .tm-btn {
        min-width: 104px !important;
        min-height: 40px !important;
    }

    .matrix-mobile-save-bar img {
        width: 14px;
        filter: brightness(0) invert(1);
    }

    .tm-matrix-page:has(.matrix-mobile-save-bar.is-visible) {
        padding-bottom: 76px !important;
    }
}

/* Progressive disclosure triggers: strictly hidden on desktop */
.tm-guidance-toggle,
.tm-applicant-details-toggle {
    display: none !important;
}

/* Submission form: show identity and rules progressively on small screens. */
@media (max-width: 767.98px) {
    .tm-submission-create-page .tm-form-step-heading {
        margin-top: 4px !important;
        margin-bottom: 8px !important;
    }

    .tm-submission-create-page .tm-form-step-heading small {
        display: none !important;
    }

    .tm-submission-create-page .profile-locked-box {
        margin-bottom: 0 !important;
        padding: 10px 12px !important;
    }

    .tm-submission-create-page .profile-locked-col:first-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }

    .tm-submission-create-page .tm-applicant-details {
        display: none !important;
    }

    .tm-submission-create-page .profile-locked-box.tm-mobile-expanded .tm-applicant-details {
        display: block !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-top: 9px;
        padding-top: 9px !important;
        padding-bottom: 0 !important;
        border-top: 1px dashed #dbe4ee;
        border-bottom: 0 !important;
    }

    .tm-applicant-details-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 34px;
        margin: 0 0 10px;
        padding: 4px 10px;
        border: 1px solid #e2e8f0;
        border-top: 0;
        border-radius: 0 0 10px 10px;
        background: #f8fafc;
        color: #0369a1;
        font-size: var(--fs-caption);
        font-weight: 700;
    }

    .tm-submission-create-page .on-behalf-card {
        margin: 8px 0 12px !important;
        padding: 10px 12px !important;
    }

    .tm-submission-create-page .on-behalf-card small,
    .tm-submission-create-page .on-behalf-card .badge,
    .tm-submission-create-page .on-behalf-icon {
        display: none !important;
    }

    .tm-submission-create-page .on-behalf-card strong {
        font-size: var(--fs-caption) !important;
    }

    .tm-submission-create-page .form-section-card {
        margin-bottom: 12px !important;
    }

    .tm-submission-create-page .tm-collapsible-guidance .rule-info-list {
        display: none;
    }

    .tm-submission-create-page .tm-collapsible-guidance.is-expanded .rule-info-list {
        display: block;
        margin-top: 8px !important;
    }

    .tm-submission-create-page .tm-collapsible-guidance .rule-info-title {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px;
    }

    .tm-submission-create-page .tm-guidance-toggle {
        flex: 0 0 auto;
        min-height: 30px;
        padding: 3px 7px;
        border: 0;
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.72);
        color: #0369a1;
        font-size: var(--fs-caption);
        font-weight: 700;
    }

    .tm-submission-create-page .rule-info-alert {
        padding: 9px 10px !important;
    }
}

@media (max-width: 419.98px) {
    .tm-submission-create-page .submission-item-row [class*="col-"]:has(.start-date-input),
    .tm-submission-create-page .submission-item-row [class*="col-"]:has(.end-date-input) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

/* =========================================================================
   GLOBAL ROUNDED FORM CONTROLS (Kontrak tampilan seluruh modul Time Management)
   Sebelumnya aturan ini disalin manual per view sehingga beberapa halaman
   (attendance-correction/create, overshift, notification) tertinggal kotak.
   Ditempatkan di stylesheet bersama agar konsisten di semua form & modal.
   ========================================================================= */
.tm-main-card .form-control:not(textarea):not(.select2-hidden-accessible),
.tm-main-card .form-control-sm:not(textarea):not(.select2-hidden-accessible),
.modal .form-control:not(textarea):not(.select2-hidden-accessible),
.modal .form-control-sm:not(textarea):not(.select2-hidden-accessible) {
    height: 34px;
    min-height: 34px;
    line-height: 32px;
    padding: 0 14px;
    border-radius: 20px;
    border: 1px solid var(--tm-border-strong, #cbd5e1);
    font-size: var(--fs-caption);
    background-color: #ffffff;
    box-sizing: border-box;
}

/* Textarea mengikuti sudut membulat yang lebih kecil agar tetap nyaman dibaca */
.tm-main-card textarea.form-control,
.tm-main-card textarea.form-control-sm,
.modal textarea.form-control,
.modal textarea.form-control-sm {
    border-radius: 14px;
    padding: 10px 14px;
    border: 1px solid var(--tm-border-strong, #cbd5e1);
    font-size: var(--fs-caption);
    box-sizing: border-box;
}

/* Select2 disamakan tingginya; radius 8px mengikuti pola yang sudah dipakai */
.tm-main-card .select2-container .select2-selection--single,
.modal .select2-container .select2-selection--single {
    height: 34px;
    min-height: 34px;
    line-height: 32px;
    border-radius: 8px;
    border: 1px solid var(--tm-border-strong, #cbd5e1);
    display: flex;
    align-items: center;
}

/* Tombol dalam form mengikuti bentuk pill yang sama */
.tm-main-card .btn.round,
.tm-main-card .btn-sm.round,
.modal .btn.round,
.modal .btn-sm.round {
    border-radius: 20px;
}

/* ==========================================================================
   FILEPOND -- satu sumber kebenaran gaya upload berkas.
   Sebelumnya di-copy-paste identik di attendance-correction/index.blade.php
   dan submission/create.blade.php (dan sedikit lebih sederhana di layout.blade.php
   untuk .filepond-standard) -- sekarang satu definisi dipakai semua tempat,
   diinisialisasi lewat window.createPaydayFilePond() di layout.blade.php.
   ========================================================================== */
.filepond--root {
    font-family: inherit;
    margin-bottom: 0 !important;
    font-size: var(--fs-sm);
    background-color: var(--tm-surface) !important;
    border: 1.5px dashed #93c5fd !important;
    border-radius: var(--tm-radius-lg);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.filepond--panel-root {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0;
}
.filepond--root:hover {
    border-color: var(--tm-primary);
    background-color: #f0f9ff !important;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.12);
}
.filepond--root {
    --fp-base: 130px;
}
/* Tinggi kotak = max(tinggi isi terukur, tinggi dasar). --fp-idle-h diisi
   window.paydayFitFilePond() (layout.blade.php) supaya ikon/teks/badge format
   tidak pernah meluap keluar kotak. Semua dropzone memakai aturan yang sama. */
.filepond--drop-label,
.filepond-wrapper .filepond--drop-label {
    color: var(--tm-text-muted) !important;
    cursor: pointer;
    min-height: max(var(--fp-idle-h, 0px), var(--fp-base, 130px)) !important;
}
.filepond--drop-label label,
.filepond-wrapper .filepond--drop-label label {
    cursor: pointer;
    line-height: 1.4;
    padding: 8px !important;
}
.filepond--label-action {
    color: var(--tm-primary) !important;
    font-weight: 700 !important;
    text-decoration: underline;
    text-decoration-color: #38bdf8;
}
.filepond--label-action:hover {
    color: var(--tm-primary-dark) !important;
}
.filepond--item-panel {
    background-color: var(--tm-primary) !important;
    border-radius: var(--tm-radius-md);
}
.filepond--file-action-button {
    cursor: pointer;
    background-color: rgba(15, 23, 42, 0.65) !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease;
}
.filepond--file-action-button:hover {
    background-color: rgba(15, 23, 42, 0.9) !important;
}
.filepond--file-info-main {
    font-size: var(--fs-sm);
    font-weight: 600 !important;
}
.filepond--file-info-sub {
    font-size: var(--fs-caption);
    color: var(--tm-primary-soft) !important;
}
.filepond--image-preview-wrapper {
    border-radius: var(--tm-radius-md);
}
.filepond--credits {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    height: 0;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.filepond-custom-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 20px !important;
    text-align: center;
    cursor: pointer;
}
.filepond-upload-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tm-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
    margin-bottom: 10px !important;
}
.filepond--root:hover .filepond-upload-icon-wrap {
    transform: translateY(-2px);
    background: #bae6fd;
}
.filepond-upload-icon {
    width: 22px;
    height: 22px;
    filter: invert(33%) sepia(85%) saturate(1900%) hue-rotate(180deg) brightness(95%);
}
.filepond-primary-text {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--tm-text);
    margin-bottom: 6px !important;
}
.filepond-sub-text {
    font-size: var(--fs-caption);
    color: var(--tm-text-subtle);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    background: var(--tm-surface-alt);
    padding: 3px 12px;
    border-radius: var(--tm-radius-pill);
    border: 1px solid var(--tm-border);
}

/* ==========================================================================
   MODAL-CONTENT -- radius seragam di seluruh app.
   Sebagian modal (mayoritas halaman lama) tidak punya border-radius kustom
   sama sekali (mengandalkan default Bootstrap ~0.3rem, sudut lebih tajam),
   sementara modul yang lebih baru pakai 14-15px berbeda-beda. Disatukan ke
   14px di sini secara global; modal yang sudah punya style inline sendiri
   tetap menang (specificity inline > class), jadi aturan ini aman ditambah
   tanpa perlu menyentuh tiap modal satu-satu.

   max-height/overflow di bawah menjaga modal yang isinya panjang (form
   banyak field, tabel, detail multi-tab) tidak terpotong di layar pendek --
   sebelumnya sebagian modal AJAX punya tinggi tetap (mis. height:550px)
   yang memotong konten begitu isinya lebih panjang dari perkiraan. Versi
   mobile sudah punya aturan serupa lewat !important di media query di atas;
   ini melengkapi untuk viewport desktop/tablet yang sebelumnya tidak
   tersentuh sama sekali.
   ========================================================================== */
.modal-dialog {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-dialog:not(.modal-dialog-centered) {
    margin: 1.75rem auto;
}

.modal-dialog > form {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

.modal-content {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    max-height: calc(100vh - 3.5rem) !important;
    max-height: calc(100dvh - 3.5rem) !important;
    overflow: hidden !important;
    border-radius: var(--tm-radius-lg, 16px) !important;
}

.modal-dialog-scrollable {
    max-height: calc(100vh - 3.5rem) !important;
    max-height: calc(100dvh - 3.5rem) !important;
}

.modal-dialog-scrollable .modal-content,
.modal-dialog-centered.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem) !important;
    max-height: calc(100dvh - 3.5rem) !important;
    overflow: hidden !important;
}

/* Flex chain untuk <form> di dalam .modal-content (seperti form Tambah Dokumen) */
.modal-content > form,
form.modal-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    width: 100%;
}

/*
 * Konten modal yang dimuat melalui AJAX membutuhkan rantai flex sendiri.
 * Tanpa helper ini, wrapper target AJAX memutus hubungan antara modal-content
 * dan modal-body sehingga body tidak mendapat ruang scroll dan footer dapat
 * terdorong keluar viewport.
 */
.modal-content > .tm-modal-ajax-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.tm-modal-ajax-content > form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

.tm-modal-ajax-content > .modal-body,
.tm-modal-ajax-content > form > .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

/* Header & Footer docking di atas dan bawah */
.modal-header,
.modal-content > .modal-header,
.modal-content > form > .modal-header,
form.modal-content > .modal-header {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}

.modal-footer,
.modal-content > .modal-footer,
.modal-content > form > .modal-footer,
form.modal-content > .modal-footer {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}

/* Body selalu fleksibel dan scrollable dengan scrollbar mandiri */
.modal-body,
.modal-content > .modal-body,
.modal-content > form > .modal-body,
form.modal-content > .modal-body,
.modal-dialog-scrollable .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

/* Scrollbar tipis dan modern untuk modal-body */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.5);
    border-radius: 9999px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, 0.8);
}

@supports (scrollbar-width: thin) {
    .modal-body {
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
    }
}

/* Pratinjau dokumen Doc Approval mengikuti viewport, bukan tinggi piksel tetap. */
.doc-approval-preview {
    position: relative;
    width: 100%;
    height: clamp(520px, 72vh, 900px);
    min-height: 420px;
    overflow: hidden;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    background: #f7f9fc;
}

.doc-approval-preview iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 767.98px) {
    .doc-approval-preview {
        height: 65vh;
        min-height: 420px;
        margin-top: 1rem;
    }
}

/* ==========================================================================
   HEADER ACTION CONTROLS -- satu tinggi untuk seluruh Blade.
   Berlaku pada header partial bersama dan header lama yang masih memakai
   .tm-header-actions. Selector diletakkan terakhir agar varian .tm-btn-xs,
   Bootstrap .btn-sm, dan aturan halaman tidak menghasilkan tinggi berbeda.
   ========================================================================== */
.tm-mobile-header-actions .tm-btn,
.tm-mobile-header-actions .btn,
.tm-mobile-header .tm-header-actions .tm-btn,
.tm-mobile-header .tm-header-actions .btn {
    height: 36px !important;
    min-height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

.tm-mobile-header-actions > .tm-segmented-control,
.tm-mobile-header .tm-header-actions > .tm-segmented-control {
    height: 36px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
}

.tm-mobile-header-actions > .tm-segmented-control .tm-segmented-btn,
.tm-mobile-header .tm-header-actions > .tm-segmented-control .tm-segmented-btn {
    height: 100% !important;
    min-height: 0 !important;
}

@media (max-width: 767.98px) {
    .tm-mobile-header-actions .tm-btn,
    .tm-mobile-header-actions .btn,
    .tm-mobile-header .tm-header-actions .tm-btn,
    .tm-mobile-header .tm-header-actions .btn,
    .tm-mobile-header-actions > .tm-segmented-control,
    .tm-mobile-header .tm-header-actions > .tm-segmented-control {
        height: 42px !important;
        min-height: 42px !important;
    }
}

/* ==========================================================================
   GLOBAL SEARCH INPUT WITH ICON PADDING FIX
   Mencegah kaca pembesar dan teks/placeholder bertumpuk pada semua halaman
   yang menggunakan .tm-filter-search-wrap maupun .sc-search-wrap.
   ========================================================================== */
.tm-filter-search-wrap {
    position: relative !important;
    display: block !important;
    width: 100%;
}

.tm-filter-search-wrap input,
.tm-filter-search-wrap .tm-filter-control,
.tm-filter-search-wrap input.tm-filter-control,
.tm-filter-search-wrap input[type="text"],
.tm-filter-search-wrap input[type="search"],
.tm-filter-search-wrap input.form-control,
.tm-filter-bar .tm-filter-search-wrap input,
.tm-filter-bar .tm-filter-search-wrap .tm-filter-control,
.sc-search-wrap input,
.sc-search-wrap input[type="search"],
.sc-search-wrap .form-control {
    padding-left: 38px !important;
}

.tm-filter-search-wrap .tm-filter-search-icon,
.tm-filter-search-wrap i.ti-search,
.tm-filter-search-wrap .ti-search,
.tm-filter-search-wrap img.tm-filter-search-icon {
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    font-size: var(--fs-base) !important;
    line-height: 1 !important;
    z-index: 5 !important;
    margin: 0 !important;
}

/* ==========================================================================
   GLOBAL 100% UNIFIED ROUNDED FORM CONTROLS & SELECT2 SYSTEM
   Menjamin seluruh input, select, textarea, Select2, dan modal controls
   di seluruh aplikasi memiliki border-radius melengkung (rounded/pill).
   ========================================================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.swal2-input),
select:not([multiple]):not(.select2-hidden-accessible),
.form-control:not(textarea),
.form-control-sm:not(textarea),
.tm-filter-control:not(textarea) {
    border-radius: var(--tm-radius-pill, 20px) !important;
}

textarea.form-control,
textarea.form-control-sm,
textarea {
    border-radius: var(--tm-radius-lg, 12px) !important;
}

/* Select2 Single Selection Unified Height & Rounded Pill */
.select2-container .select2-selection--single,
.select2-container--bootstrap .select2-selection--single,
.select2-container--default .select2-selection--single {
    border-radius: var(--tm-radius-pill, 20px) !important;
    height: 34px !important;
    min-height: 34px !important;
    line-height: 32px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    padding-left: 14px !important;
}

.select2-container--bootstrap .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
    right: 10px !important;
}

/* Select2 Multiple Selection Rounded Box */
.select2-container .select2-selection--multiple,
.select2-container--bootstrap .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--tm-radius-lg, 12px) !important;
    min-height: 36px !important;
    padding: 2px 8px !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
    border-radius: var(--tm-radius-pill, 20px) !important;
    font-size: var(--fs-caption) !important;
}

/* Select2 Dropdown Container Rounded Corners */
.select2-dropdown {
    border-radius: var(--tm-radius-md, 10px) !important;
    border: 1px solid var(--tm-border-strong, #cbd5e1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
}

.select2-dropdown .select2-search__field {
    border-radius: var(--tm-radius-pill, 20px) !important;
    padding: 4px 12px !important;
}

/* Modal & Dialog Unified Sizing (Consistent Full Width Across All Modals) */
.modal-dialog:not(.modal-sm) {
    max-width: 780px !important;
    width: 100% !important;
}

/* Modal verifikasi data pribadi tetap ringkas; selector ID diperlukan untuk
   mengalahkan kontrak ukuran modal global di atas tanpa memengaruhi modal lain. */
#modalProfile .pi-access-dialog--profile {
    width: calc(100% - 32px) !important;
    max-width: 440px !important;
}

#modalPayslip .pi-access-dialog--payslip {
    width: calc(100% - 32px) !important;
    max-width: 480px !important;
}

.modal-dialog.modal-sm {
    max-width: 480px !important;
}

@media (max-width: 767.98px) {
    .modal-dialog,
    .modal-dialog:not(.modal-sm) {
        max-width: 100% !important;
        margin: 10px !important;
        width: calc(100% - 20px) !important;
    }
}

.modal-content {
    border-radius: var(--tm-radius-lg, 16px) !important;
    overflow: hidden;
    border: 1px solid var(--tm-border, #e2e8f0) !important;
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.25) !important;
}

.modal-header {
    border-top-left-radius: var(--tm-radius-lg, 16px) !important;
    border-top-right-radius: var(--tm-radius-lg, 16px) !important;
}

.modal-footer {
    border-bottom-left-radius: var(--tm-radius-lg, 16px) !important;
    border-bottom-right-radius: var(--tm-radius-lg, 16px) !important;
}

/* Modal Inputs & Controls Full Width and Rounded */
.modal .form-control:not(textarea),
.modal input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.modal select:not([multiple]):not(.select2-hidden-accessible) {
    border-radius: var(--tm-radius-pill, 20px) !important;
    width: 100% !important;
}

.modal textarea.form-control,
.modal textarea {
    border-radius: var(--tm-radius-lg, 12px) !important;
    width: 100% !important;
}

.modal .select2-container {
    width: 100% !important;
}

/* 100% Full-Width FilePond & Upload Controls (Fixes any partial-width or gap) */
.filepond-wrapper,
.modal .filepond-wrapper,
.filepond--root,
.modal .filepond--root,
.filepond--panel-root {
    width: 100% !important;
    max-width: 100% !important;
}

/* Unified Buttons Rounded (Melengkung) */
.btn:not(.btn-group > .btn),
.btn-sm:not(.btn-group > .btn),
.btn-md:not(.btn-group > .btn),
button.btn:not(.btn-group > .btn),
a.btn:not(.btn-group > .btn) {
    border-radius: var(--tm-radius-pill, 20px) !important;
}

.btn-group > .btn:first-child {
    border-top-left-radius: var(--tm-radius-pill, 20px) !important;
    border-bottom-left-radius: var(--tm-radius-pill, 20px) !important;
}

.btn-group > .btn:last-child {
    border-top-right-radius: var(--tm-radius-pill, 20px) !important;
    border-bottom-right-radius: var(--tm-radius-pill, 20px) !important;
}

/* Unified Placeholder Styling Across Browsers */
::placeholder {
    color: #94a3b8 !important;
    opacity: 0.85 !important;
    font-size: var(--fs-caption);
}
::-webkit-input-placeholder {
    color: #94a3b8 !important;
    opacity: 0.85 !important;
    font-size: var(--fs-caption);
}
:-moz-placeholder {
    color: #94a3b8 !important;
    opacity: 0.85 !important;
    font-size: var(--fs-caption);
}
::-moz-placeholder {
    color: #94a3b8 !important;
    opacity: 0.85 !important;
    font-size: var(--fs-caption);
}
:-ms-input-placeholder {
    color: #94a3b8 !important;
    opacity: 0.85 !important;
    font-size: var(--fs-caption);
}

/* ==========================================================================
   UNIFIED MODAL TYPOGRAPHY & FORM CONTROLS SYSTEM
   Standarisasi ukuran font seluruh modal agar seragam (14px), nyaman dibaca,
   jelas, proporsional, dan tidak terlalu kecil di semua modul & resolusi layar.
   ========================================================================== */
.modal {
    --modal-base-fs: var(--fs-base);
    --modal-title-fs: var(--fs-title-sm);
    --modal-help-fs: var(--fs-sm);
}

/* Modal Title */
.modal .modal-title,
.modal-title {
    font-size: var(--modal-title-fs) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* Base Body Text & Paragraphs */
.modal .modal-body,
.modal .modal-body p {
    font-size: var(--modal-base-fs) !important;
    line-height: 1.5 !important;
}

/* Form Labels & Field Names */
.modal .form-group > label,
.modal label:not(.badge):not(.filepond-sub-text):not(.custom-control-label),
.modal .pi-label,
.modal label.font-weight-bold {
    font-size: var(--modal-base-fs) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
    color: var(--tm-text-strong, #1e293b) !important;
    display: inline-block;
}

/* Radio & Checkbox Labels */
.modal .custom-control-label,
.modal .form-check-label {
    font-size: var(--modal-base-fs) !important;
    line-height: 24px !important;
    font-weight: 500 !important;
    color: var(--tm-text, #334155) !important;
    cursor: pointer;
}

/* Single-Line Inputs & Selects */
.modal .form-control:not(textarea),
.modal input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.modal select,
.modal .custom-select {
    height: 42px !important;
    min-height: 42px !important;
    font-size: var(--modal-base-fs) !important;
    line-height: 1.5 !important;
    padding: 8px 16px !important;
    border-radius: var(--tm-radius-pill, 20px) !important;
    color: var(--tm-text-strong, #0f172a) !important;
    box-sizing: border-box !important;
}

/* Textarea Controls */
.modal textarea.form-control,
.modal textarea {
    font-size: var(--modal-base-fs) !important;
    line-height: 1.5 !important;
    padding: 10px 16px !important;
    border-radius: var(--tm-radius-lg, 12px) !important;
    color: var(--tm-text-strong, #0f172a) !important;
    box-sizing: border-box !important;
}

/* Select2 Rendered Text & Dropdown Options */
.modal .select2-container .select2-selection--single {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: var(--tm-radius-pill, 20px) !important;
    display: flex !important;
    align-items: center !important;
}
.modal .select2-container .select2-selection__rendered,
.modal .select2-dropdown,
.modal .select2-results__option,
.modal .select2-search__field {
    font-size: var(--modal-base-fs) !important;
    line-height: 1.5 !important;
}

/* Placeholders in Modal */
.modal ::placeholder,
.modal ::-webkit-input-placeholder,
.modal :-moz-placeholder,
.modal ::-moz-placeholder,
.modal :-ms-input-placeholder {
    font-size: var(--modal-base-fs) !important;
    color: #94a3b8 !important;
    opacity: 0.85 !important;
}

/* FilePond Inside Modal: Unified 14px Text & Legible Subtext */
.modal .filepond--root,
.modal .filepond--drop-label,
.modal .filepond--drop-label label,
.modal .filepond-primary-text,
.modal .filepond--label-action,
.modal .filepond--file-info-main {
    font-size: var(--modal-base-fs) !important;
    line-height: 1.5 !important;
}

.modal .filepond-primary-text {
    font-size: var(--modal-base-fs) !important;
    font-weight: 600 !important;
    color: var(--tm-text, #334155) !important;
    margin-bottom: 6px !important;
}

.modal .filepond--label-action {
    font-size: var(--modal-base-fs) !important;
    font-weight: 700 !important;
    color: var(--tm-primary, #0284c7) !important;
}

.modal .filepond-sub-text,
.modal .filepond--file-info-sub {
    font-size: var(--modal-help-fs) !important;
    color: var(--tm-text-subtle, #64748b) !important;
    font-weight: 500 !important;
    padding: 4px 14px !important;
}

/* Helper Text, Small Hints, Validation Messages */
.modal small,
.modal small i,
.modal .text-muted,
.modal .form-text,
.modal .invalid-feedback,
.modal .valid-feedback {
    font-size: var(--modal-help-fs) !important;
    line-height: 1.4 !important;
}

/* Modal Buttons (Batal, Simpan, Konfirmasi, Tutup) */
.modal .modal-footer .btn,
.modal .modal-footer .tm-btn,
.modal .modal-footer .pi-btn,
.modal .modal-footer button {
    font-size: var(--modal-base-fs) !important;
    font-weight: 600 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 22px !important;
    border-radius: var(--tm-radius-pill, 20px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}


/* ==========================================================================
   TOMBOL AKSI TABEL -- satu bentuk di seluruh aplikasi.
   Aturan: setiap tombol aksi di tabel/DataTable = IKON + TEKS (mis. Detail,
   Ubah, Hapus, Unduh, Setujui, Tolak). Ikon (<img> linear SVG, <i> / <span>
   themify) diseragamkan di sini -- ukuran, jarak, warna -- sehingga markup
   lama yang menyetel width/margin-top inline (12px/13px, margin-top: -1px/-2px)
   tetap tampil identik tanpa harus diubah satu per satu.
   ========================================================================== */
.tm-btn-xs,
.pi-btn-sm {
    gap: 5px;
    white-space: nowrap;
}
.tm-btn-xs > img,
.pi-btn-sm > img {
    width: 13px !important;
    height: 13px !important;
    margin: 0 !important;
    flex: none;
    object-fit: contain;
}
.tm-btn-xs > i,
.tm-btn-xs > span[class*="ti-"],
.pi-btn-sm > i,
.pi-btn-sm > span[class*="ti-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    margin: 0 !important;
    flex: none;
    font-size: var(--fs-caption);
    line-height: 1;
}
/* Ikon linear SVG berwarna gelap -> putih pada tombol solid */
.tm-btn-success > img,
.tm-btn-danger > img,
.tm-btn-primary > img,
.tm-btn-warning > img {
    filter: brightness(0) invert(1);
}
/* Wadah baris tombol aksi: selalu horizontal rapi tanpa bertumpuk */
.tm-table-actions {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   WARNA TOMBOL -- aturan berbasis makna (berlaku untuk semua tombol aksi).
     Biru solid      (primary)         : aksi utama / konstruktif (Simpan, Ajukan)
     Hijau solid     (success)         : menyetujui / mengaktifkan (Setujui, Aktifkan)
     Merah solid     (danger)          : menolak (keputusan negatif atas dokumen: Tolak)
     Merah outline   (outline-danger)  : merusak / mengakhiri (Hapus, Nonaktifkan, Batalkan)
     Putih + abu     (secondary)       : netral / informasi (Detail, Ubah, Unduh, Buka)
     Abu redup       (disabled)        : aksi belum tersedia
   Pasangan keputusan Setujui (hijau) + Tolak (merah) selalu solid dan
   berdampingan; Detail selalu netral supaya tidak bersaing dengan keputusan.
   Kontras: teks putih pada tombol solid minimal 4,5:1 (WCAG AA). Nuansa dasar
   lama (#059669 3,8:1 / #0284c7 4,1:1 / #d97706 3,2:1) terlalu terang untuk
   teks 11-12px tebal, jadi memakai nuansa -dark yang sudah ada di token.
   ========================================================================== */
.tm-btn-primary,
.btn-primary,
.btn-info {
    background-color: var(--tm-primary-dark) !important;
    border-color: var(--tm-primary-dark) !important;
}
.tm-btn-primary:hover, .tm-btn-primary:focus,
.btn-primary:hover, .btn-primary:focus,
.btn-info:hover, .btn-info:focus {
    background-color: #075985 !important;
    border-color: #075985 !important;
}
.tm-btn-success,
.btn-success {
    background-color: var(--tm-success-dark) !important;
    border-color: var(--tm-success-dark) !important;
}
.tm-btn-success:hover, .tm-btn-success:focus,
.btn-success:hover, .btn-success:focus {
    background-color: var(--tm-success-fg) !important;
    border-color: var(--tm-success-fg) !important;
}
.tm-btn-warning,
.btn-warning {
    background-color: var(--tm-warning-dark) !important;
    border-color: var(--tm-warning-dark) !important;
}
.tm-btn-warning:hover, .tm-btn-warning:focus,
.btn-warning:hover, .btn-warning:focus {
    background-color: var(--tm-warning-fg) !important;
    border-color: var(--tm-warning-fg) !important;
}
.tm-btn-outline-success,
.btn-outline-success {
    color: var(--tm-success-dark) !important;
    border-color: var(--tm-success-dark) !important;
}
.tm-btn-outline-warning,
.btn-outline-warning {
    color: var(--tm-warning-dark) !important;
    border-color: var(--tm-warning-dark) !important;
}
/* Tombol nonaktif: selalu abu-abu netral, apa pun varian aslinya */
.tm-btn-xs:disabled:not(.pi-btn-loading),
.tm-btn-xs.disabled:not(.pi-btn-loading) {
    background-color: var(--tm-surface-alt, #f1f5f9) !important;
    border-color: var(--tm-border) !important;
    color: var(--tm-text-subtle) !important;
    opacity: 0.7;
}
.tm-btn-xs:disabled > img,
.tm-btn-xs.disabled > img {
    filter: none;
    opacity: 0.6;
}
/* Ikon SVG pada tombol outline-danger ikut berwarna merah (bukan hitam) */
.tm-btn-outline-danger > img {
    filter: invert(21%) sepia(96%) saturate(4470%) hue-rotate(352deg) brightness(90%) contrast(92%);
}

/* ==========================================================================
   SWEETALERT2 -- tombol dialog mengikuti aturan warna yang sama.
   Warna dikirim halaman lewat confirmButtonColor/cancelButtonColor (belasan
   nilai hex berbeda: #dc2626, #FF4747, #ef4444, #3085d6, #2596be, #0284c7,
   #d33 untuk "batal" dst.). Daripada mengubah puluhan pemanggil, warna inline
   dipetakan berdasarkan maknanya:
     Konfirmasi merah / destruktif  -> merah solid  (danger)
     Konfirmasi hijau               -> hijau solid  (success)
     Konfirmasi lainnya             -> biru solid   (primary)
     Batal / Tolak-dialog / Deny    -> putih + border abu (secondary), tidak
                                       pernah merah/pink -- merah hanya untuk
                                       tindakan yang merusak.
   Semua kombinasi teks-latar >= 4,5:1.
   ========================================================================== */
.swal2-popup .swal2-styled.swal2-confirm {
    background-color: var(--tm-primary-dark) !important;
    border: 1px solid var(--tm-primary-dark) !important;
    color: #ffffff !important;
    font-weight: 700;
}
.swal2-popup .swal2-styled.swal2-confirm[style*="rgb(220, 38, 38)"],
.swal2-popup .swal2-styled.swal2-confirm[style*="rgb(255, 71, 71)"],
.swal2-popup .swal2-styled.swal2-confirm[style*="rgb(239, 68, 68)"],
.swal2-popup .swal2-styled.swal2-confirm[style*="rgb(221, 51, 51)"],
.swal2-popup .swal2-styled.swal2-confirm[style*="rgb(211, 51, 51)"] {
    background-color: var(--tm-danger) !important;
    border-color: var(--tm-danger) !important;
}
.swal2-popup .swal2-styled.swal2-confirm[style*="rgb(5, 150, 105)"],
.swal2-popup .swal2-styled.swal2-confirm[style*="rgb(16, 185, 129)"],
.swal2-popup .swal2-styled.swal2-confirm[style*="rgb(34, 197, 94)"] {
    background-color: var(--tm-success-dark) !important;
    border-color: var(--tm-success-dark) !important;
}
.swal2-popup .swal2-styled.swal2-cancel,
.swal2-popup .swal2-styled.swal2-deny {
    background-color: #ffffff !important;
    border: 1px solid var(--tm-border-strong) !important;
    color: var(--tm-text-muted) !important;
    font-weight: 700;
}
.swal2-popup .swal2-styled.swal2-cancel:hover,
.swal2-popup .swal2-styled.swal2-deny:hover {
    background-color: var(--tm-surface) !important;
    color: var(--tm-text-strong) !important;
}

/* ==========================================================================
   SELECT2 -- kotak single & multiple satu bentuk.
   Sebelumnya multiple: tinggi 48px vs single 45px, placeholder mulai di x=14
   vs x=27 dengan warna/ukuran beda, dan bila ada pilihan kotak membengkak
   (margin-top 10px pada kolom pencarian + margin-bottom 6px pada chip)
   sehingga ada ruang kosong di bawah chip.
   Struktur select2 4.1 (multiple): <span.selection> > <ul.rendered>(chip) +
   <span.search--inline>(textarea). Selection dijadikan wadah flex-wrap; <ul>
   memakai display:contents supaya chip dan kolom pencarian sejajar.
   ========================================================================== */
.select2-container--bootstrap .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
    min-height: 2.8rem !important;
    height: auto !important;
    border-radius: 18px !important;
    padding: 4px 14px !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 4px;
    box-sizing: border-box !important;
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: contents !important;
}
.select2-container .select2-selection--multiple .select2-selection__choice {
    margin: 0 !important;
    float: none !important;
    font-size: var(--fs-caption) !important;
    line-height: 1.5 !important;
    padding: 2px 10px !important;
}
.select2-container .select2-selection--multiple .select2-search--inline {
    float: none !important;
    flex: 1 1 80px;
    margin: 0 !important;
    min-width: 0;
}
.select2-container .select2-selection--multiple .select2-search__field {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    height: 1.9rem !important;
    min-height: 0 !important;
    line-height: 1.9rem !important;
    font-size: var(--fs-base) !important;
    color: #495057 !important;
    width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-family: inherit !important;
    resize: none;
    overflow: hidden;
}
/* Placeholder: warna, ukuran, dan posisi sama dengan select tunggal */
.select2-container .select2-selection--multiple .select2-search__field::placeholder {
    color: #999 !important;
    opacity: 1;
}
.select2-container .select2-selection--multiple .select2-search__field:placeholder-shown {
    padding-left: 13px !important;
}

/* Chip pilihan select2: satu gaya di semua halaman (biru muda, teks biru tua
   -- kontras 6,7:1; sebelumnya Timesheet/PDP/Template memakai putih di atas
   #0284c7 = 4,1:1 dan halaman pengajuan memakai gaya lain). Spesifisitas
   dinaikkan agar mengalahkan blok <style> lokal tiap halaman. */
.select2-container.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice,
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 20px !important;
    padding: 3px 10px 3px 8px !important;
    font-size: var(--fs-caption) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}
.select2-container.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove,
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #64748b !important;
    background: transparent !important;
    border: 0 !important;
    margin: 0 6px 0 0 !important;
    float: none !important;
    position: static !important;
}
.select2-container.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffffff !important;
    background-color: #ef4444 !important;
    border-radius: 50%;
}