/* Warna ARTHA: utama teal (nama variabel --violet tetap dipakai di semua menu = "warna utama").
   * --teal = warna sukses (Selesai, cocok, aktif) = hijau, supaya tidak sama dengan warna utama. */
  :root {
    --navy: #111827;
    --navy-2: #1F2937;
    --violet: #0F766E;
    --violet-d: #115E59;
    --violet-l: #E6F6F4;
    --violet-l2: #CCEFEA;
    --violet-rgb: 15, 118, 110;
    --bg: #F4F6FA;
    --card: #FFFFFF;
    --teal: #16A34A;
    --teal-l: #DCFCE7;
    --red: #DC2626;
    --red-l: #FDECEC;
    --amber: #D97706;
    --amber-l: #FEF4E3;
    --blue: #2563EB;
    --blue-l: #EAF2FF;
    --orange: #EA580C;
    --text: #111827;
    --text-2: #374151;
    --muted: #6B7280;
    --border: #E5E7EB;
    --border-2: #D1D5DB;
    --input: #FFFFFF;
    --input-ic: #F3F4F6;
    --hover: #F9FAFB;
    --th: #F8FAFC;
    --th-t: #4B5563;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-md: 0 4px 16px rgba(17, 24, 39, .06);
    --shadow-lg: 0 18px 44px rgba(17, 24, 39, .18);
  }

  html[data-theme="dark"] {
    --violet: #0D9488;
    --violet-d: #14B8A6;
    --violet-l: #10302D;
    --violet-l2: #134E48;
    --violet-rgb: 45, 212, 191;
    --bg: #0B1120;
    --card: #151C2C;
    --text: #E5E7EB;
    --text-2: #CBD5E1;
    --muted: #94A3B8;
    --border: #263247;
    --border-2: #334155;
    --input: #0F172A;
    --input-ic: #1B2438;
    --hover: #1A2336;
    --th: #111A2B;
    --th-t: #94A3B8;
    --teal-l: #12301F;
    --red-l: #3B1E24;
    --amber-l: #3A2E15;
    --blue-l: #172A4D;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .5);
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 13px;
    color: var(--text);
    background: var(--bg);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }

  button,
  input,
  select,
  textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }

  a {
    color: var(--violet);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  .hidden {
    display: none !important;
  }

  .muted {
    color: var(--muted);
  }

  .small {
    font-size: 12px;
  }

  .nowrap {
    white-space: nowrap;
  }

  .right {
    text-align: right;
  }

  .center {
    text-align: center;
  }

  .mt8 {
    margin-top: 8px;
  }

  .mt16 {
    margin-top: 16px;
  }

  .mb16 {
    margin-bottom: 16px;
  }

  .flex {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .grow {
    flex: 1;
    min-width: 0;
  }

  svg.i {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 8px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
  }

  html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #334155;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  /* ---------- boot & spinner ---------- */
  .boot {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    z-index: 200;
  }

  .boot-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .boot-mark {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(var(--violet-rgb), .25);
  }

  .boot-name {
    font-size: 17px;
    letter-spacing: .06em;
  }

  .boot-bar {
    width: 140px;
    height: 4px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
  }

  .boot-bar span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: var(--violet);
    animation: bootbar 1.1s ease-in-out infinite;
  }

  @keyframes bootbar {
    from {
      transform: translateX(-100%);
    }

    to {
      transform: translateX(250%);
    }
  }

  .boot-t {
    font-size: 12px;
    color: var(--muted);
  }

  .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--violet-l);
    border-top-color: var(--violet);
    border-radius: 50%;
    animation: spin .8s linear infinite;
  }

  .spinner.sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  .loading-box {
    padding: 48px;
    display: flex;
    justify-content: center;
  }

  /* ---------- login (kartu terbelah: panel teal kiri, form kanan) ---------- */
  .login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg);
  }

  .login-card {
    width: 100%;
    max-width: 980px;
    min-height: 580px;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    background: var(--card);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(17, 24, 39, .12);
  }

  .login-left {
    position: relative;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 44px;
    background: linear-gradient(160deg, #0B3D3F 0%, #0F766E 100%);
    background-size: cover;
    background-position: center;
  }

  .login-left.has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(11, 61, 63, .88), rgba(15, 118, 110, .72));
  }

  .login-left .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
  }

  .login-left .c1 {
    width: 260px;
    height: 260px;
    top: -80px;
    right: -80px;
  }

  .login-left .c2 {
    width: 240px;
    height: 240px;
    bottom: -90px;
    left: -60px;
    background: rgba(255, 255, 255, .06);
  }

  .login-left>* {
    position: relative;
    z-index: 1;
  }

  .login-mark {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  }

  .login-id {
    margin-top: auto;
  }

  .login-app {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0;
  }

  .login-sub {
    font-size: 14px;
    opacity: .85;
  }

  .login-company {
    font-size: 12.5px;
    opacity: .7;
    margin-top: 14px;
  }

  .login-right {
    padding: 48px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    min-width: 0;
  }

  .login-wide {
    display: block;
    width: 230px;
    max-width: 100%;
    height: auto;
    margin: 0 0 6px -6px;
  }

  .login-right h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
  }

  .login-right .lead {
    color: var(--muted);
    margin: 2px 0 0;
    font-size: 13.5px;
  }

  .login-right .field {
    margin-bottom: 0;
  }

  .login-right .ig {
    min-height: 44px;
  }

  .login-btn {
    width: 100%;
    height: 46px;
    font-size: 14px;
    border-radius: 10px;
  }

  .login-help {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
  }

  .login-copy {
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    margin-top: 6px;
  }

  .login-err {
    background: var(--red-l);
    color: #991B1B;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    font-weight: 600;
  }

  /* ---------- shell: sidebar putih mengambang + header bilah putih ---------- */
  .app {
    display: flex;
    min-height: 100vh;
  }

  .sidebar {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 248px;
    background: var(--card);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    padding: 14px 10px 10px;
    z-index: 50;
    transition: transform .25s ease, width .2s ease;
  }

  .sb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px 10px;
    min-width: 0;
  }

  .sb-logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex: 0 0 auto;
    display: block;
    object-fit: cover;
  }

  .sb-name {
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sb-tag {
    font-size: 10.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sb-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: var(--input-ic);
    color: var(--muted);
    font-size: 12.5px;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .sb-search:hover {
    color: var(--text-2);
  }

  .sb-search svg.i {
    width: 15px;
    height: 15px;
  }

  .sb-search .grow {
    text-align: left;
  }

  kbd,
  .kbd {
    font-family: inherit;
    font-size: 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 5px;
    color: var(--muted);
    background: var(--card);
    white-space: nowrap;
  }

  .sb-nav {
    flex: 1;
    overflow-y: auto;
    margin: 4px -6px 0;
    padding: 0 6px 6px;
    overscroll-behavior: contain;
  }

  .sb-nav::-webkit-scrollbar {
    width: 6px;
  }

  .sb-group {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--muted);
    padding: 12px 10px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
  }

  .sb-group.fold {
    cursor: pointer;
    border-radius: 6px;
  }

  .sb-group.fold:hover {
    color: var(--text-2);
  }

  .sb-group svg.i {
    width: 14px;
    height: 14px;
  }

  .sb-item {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--text-2);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    margin: 1px 0;
    user-select: none;
    position: relative;
  }

  .sb-item svg.i {
    width: 17px;
    height: 17px;
    stroke-width: 1.8;
    color: var(--muted);
  }

  .sb-item:hover {
    background: var(--hover);
    color: var(--text);
  }

  .sb-item.active {
    background: var(--violet-l);
    color: var(--violet-d);
    font-weight: 600;
  }

  .sb-item.active svg.i {
    color: var(--violet);
  }

  .sb-item .sb-l {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sb-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    flex: 0 0 auto;
  }

  .sb-badge.r {
    background: var(--red);
    color: #fff;
  }

  .sb-badge.a {
    background: var(--amber-l);
    color: #92400E;
  }

  .sb-badge.n {
    background: var(--input-ic);
    color: var(--text-2);
  }

  html[data-theme="dark"] .sb-badge.a {
    color: #FBBF24;
  }

  .sb-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 2px 0;
    border-top: 1px solid var(--border);
  }

  .sb-user {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    text-align: left;
  }

  .sb-user:hover {
    background: var(--hover);
  }

  .sb-user .av {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .sb-un {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sb-ur {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sb-mini-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .sb-mini-btn:hover {
    background: var(--hover);
    color: var(--violet);
  }

  .sb-mini-btn svg.i {
    width: 16px;
    height: 16px;
  }

  /* sidebar ciut: ikon saja, badge jadi titik, nama menu muncul saat kursor diarahkan (title) */
  .app.sb-mini .sidebar {
    width: 68px;
    padding: 14px 8px 10px;
  }

  .app.sb-mini .sb-txt,
  .app.sb-mini .sb-search .grow,
  .app.sb-mini .sb-search kbd,
  .app.sb-mini .sb-item .sb-l,
  .app.sb-mini .sb-group span,
  .app.sb-mini .sb-group svg {
    display: none;
  }

  .app.sb-mini .sb-brand {
    justify-content: center;
    padding: 0 0 10px;
  }

  .app.sb-mini .sb-search,
  .app.sb-mini .sb-item {
    justify-content: center;
    padding: 0;
  }

  .app.sb-mini .sb-group {
    height: 1px;
    padding: 0;
    margin: 8px 6px;
    background: var(--border);
  }

  .app.sb-mini .sb-badge {
    position: absolute;
    top: 3px;
    right: 6px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
  }

  .app.sb-mini .sb-foot {
    flex-direction: column;
  }

  .app.sb-mini .sb-user {
    flex: 0 0 auto;
    padding: 2px;
  }

  .app.sb-mini .sb-mini-btn svg.i {
    transform: rotate(180deg);
  }

  .sb-backdrop {
    display: none;
  }

  .main {
    margin-left: 268px;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left .2s ease;
  }

  .app.sb-mini .main {
    margin-left: 88px;
  }

  /* bayangan atas = warna latar: isi halaman yang digulir tidak terlihat di celah atas header */
  .topbar {
    position: sticky;
    top: 10px;
    z-index: 40;
    height: 60px;
    margin: 10px 16px 0 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 -10px 0 10px var(--bg);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 18px;
  }

  .tb-head {
    flex: 1;
    min-width: 0;
  }

  .tb-title {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tb-crumb {
    color: var(--muted);
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tb-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 240px;
    height: 36px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--hover);
    color: var(--muted);
    font-size: 12.5px;
    cursor: pointer;
    flex: 0 1 auto;
    min-width: 0;
  }

  .tb-search:hover {
    border-color: var(--violet);
  }

  .tb-search svg.i {
    width: 15px;
    height: 15px;
  }

  .tb-search .grow {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tb-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }

  .tb-sep {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 4px;
  }

  .tb-pop {
    position: relative;
  }

  .icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
  }

  .icon-btn svg.i {
    width: 17px;
    height: 17px;
    stroke-width: 1.9;
  }

  .icon-btn:hover {
    background: var(--hover);
    color: var(--violet);
  }

  .icon-btn .badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tb-cal-btn {
    color: var(--violet);
    background: var(--violet-l);
  }

  .new-ver {
    position: fixed;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(640px, calc(100vw - 24px));
    padding: 10px 12px 10px 16px;
    border-radius: 14px;
    background: var(--violet);
    color: #fff;
    box-shadow: var(--shadow-lg);
    font-size: 13px;
  }

  .new-ver .grow {
    min-width: 0;
  }

  .new-ver .btn {
    flex: 0 0 auto;
    background: #fff;
    color: var(--violet);
    border-color: #fff;
  }

  .new-ver .icon-btn {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .15);
    color: #fff;
  }

  .icon-btn.spin {
    color: var(--violet);
    pointer-events: none;
  }

  .icon-btn.spin svg {
    animation: spin .8s linear infinite;
  }

  .prof-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    color: var(--text);
  }

  .prof-btn:hover {
    background: var(--hover);
  }

  .prof-btn .av {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .prof-meta {
    text-align: left;
    line-height: 1.25;
  }

  .prof-name {
    font-weight: 700;
    font-size: 12.5px;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .prof-role {
    font-size: 11px;
    color: var(--muted);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-only {
    display: none;
  }

  .content {
    padding: 16px 16px 18px 10px;
    flex: 1;
    min-width: 0;
  }

  /* ---------- dropdown / popover ---------- */
  .pop {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 60;
    overflow: hidden;
  }

  .dd {
    min-width: 250px;
    padding: 6px;
  }

  .dd-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
  }

  .dd-it {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-2);
    font-weight: 500;
  }

  .dd-it svg.i {
    width: 17px;
    height: 17px;
    color: var(--muted);
  }

  .dd-it:hover svg.i {
    color: var(--violet);
  }

  .dd-it.danger svg.i {
    color: var(--red);
  }

  .dd-it:hover {
    background: var(--hover);
    color: var(--violet);
  }

  .dd-it.danger {
    color: var(--red);
  }

  .dd-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
  }

  .pop-h {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
  }

  .pop-h .t {
    font-weight: 700;
    font-size: 15px;
    flex: 1;
  }

  .pop-h .ic {
    color: var(--violet);
  }

  .pop-x {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--muted);
    padding: 4px;
  }

  .notif-pop {
    width: 400px;
    max-width: calc(100vw - 24px);
  }

  .notif-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px 0;
  }

  .notif-hd b {
    font-size: 15px;
  }

  .notif-hd a,
  .notif-ft a {
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
  }

  .notif-tabs {
    display: flex;
    gap: 16px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
  }

  .notif-tabs button {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    padding: 8px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .notif-tabs button.on {
    color: var(--text);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--violet);
  }

  .notif-n {
    font-size: 10.5px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--red-l);
    color: #991B1B;
  }

  .notif-list {
    max-height: 420px;
    overflow-y: auto;
  }

  .notif-list.nt-full {
    max-height: none;
    margin: 0 -20px;
  }

  .notif-g {
    padding: 10px 14px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--muted);
  }

  .notif-list.nt-full .notif-g,
  .notif-list.nt-full .notif-it {
    padding-left: 20px;
    padding-right: 20px;
  }

  .notif-it {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    align-items: flex-start;
  }

  .notif-it:hover {
    background: var(--hover);
  }

  .notif-it.unread {
    background: var(--violet-l);
  }

  html[data-theme="dark"] .notif-it.unread {
    background: rgba(var(--violet-rgb), .1);
  }

  .notif-ic {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .notif-ic svg.i {
    width: 15px;
    height: 15px;
  }

  .notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--violet);
    margin-top: 6px;
    flex: 0 0 auto;
  }

  .notif-it.read .notif-dot {
    background: transparent;
  }

  .notif-t {
    font-weight: 700;
    font-size: 13px;
  }

  .notif-m {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 1px;
  }

  .notif-at {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }

  .notif-ft {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    text-align: center;
  }

  /* mini kalender (header) */
  /* kotak unggah (drag & drop, js_core dzBox) */
  .dz {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 2px dashed var(--border-2);
    border-radius: 14px;
    padding: 18px 16px;
    background: var(--hover);
    color: var(--text-2);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
    min-width: 0;
    outline: none;
  }

  .dz>.i {
    width: 26px;
    height: 26px;
    color: var(--violet);
    flex: 0 0 auto;
  }

  .dz-t {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-size: 13px;
  }

  .dz-t u {
    color: var(--violet);
    text-decoration: none;
    font-weight: 700;
  }

  .dz-t small {
    font-size: 11.5px;
    color: var(--muted);
  }

  .dz-t small.dz-sel {
    color: var(--teal);
    font-weight: 700;
  }

  .dz-t small.dz-sel:empty {
    display: none;
  }

  .dz:hover,
  .dz:focus-visible {
    border-color: var(--violet);
    background: var(--violet-l);
  }

  .dz.sm {
    padding: 10px 12px;
    gap: 10px;
    justify-content: flex-start;
    text-align: left;
  }

  .dz.sm>.i {
    width: 20px;
    height: 20px;
  }

  .dz-over,
  .dz.dz-over {
    border-color: var(--violet) !important;
    background: var(--violet-l) !important;
    box-shadow: 0 0 0 3px var(--violet-l);
  }

  [data-drop].dz-over {
    outline: 3px solid var(--violet);
    outline-offset: 2px;
  }

  .dz-ov {
    position: fixed;
    inset: 0;
    z-index: 9500;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 16px 28px;
    background: rgba(var(--violet-rgb), .08);
    box-shadow: inset 0 0 0 4px var(--violet);
  }

  .dz-ov.hidden {
    display: none;
  }

  .dz-ov-b {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--violet);
    color: #fff;
    border-radius: 14px;
    padding: 12px 18px;
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    max-width: 100%;
  }

  .dz-ov-b .i {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .dz-ov-b small {
    opacity: .8;
    font-size: 12px;
  }

  /* tinggi popup kalender mengikuti layar: kalender tetap, daftar deadline di bawahnya yang digulir */
  .cal-pop {
    width: 380px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 84px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .cal-pop>.pop-h,
  .cal-pop>#mc-body {
    flex: 0 0 auto;
  }

  .cal-pop .mc-up {
    flex: 1 1 auto;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    padding-bottom: 6px;
  }

  .cal-pop #mc-up {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
  }

  /* HP: popup kalender & notifikasi selebar layar (tidak terpotong di kiri karena tombolnya di tengah topbar) */
  @media (max-width: 640px) {

    .cal-pop,
    .notif-pop {
      position: fixed;
      left: 12px;
      right: 12px;
      top: 64px;
      width: auto;
      max-width: none;
      max-height: calc(100vh - 76px);
    }

    .cal-pop .mc-d {
      height: 38px;
    }
  }

  .mc-d.sel {
    box-shadow: inset 0 0 0 2px var(--violet);
    background: var(--violet-l);
    font-weight: 700;
  }

  .mc-d.today.sel {
    box-shadow: 0 0 0 2px var(--violet);
  }

  .mc-up-h .grow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .mc-up-go {
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--violet);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    text-transform: none;
    white-space: nowrap;
  }

  .mc-up-go .i {
    width: 14px;
    height: 14px;
  }

  .mc-up-x,
  .mc-up-eye {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--muted);
    padding: 4px;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 auto;
  }

  .mc-up-x .i {
    width: 13px;
    height: 13px;
  }

  .mc-up-eye .i {
    width: 16px;
    height: 16px;
  }

  .mc-up-x:hover,
  .mc-up-eye:hover {
    background: var(--hover);
    color: var(--violet);
  }

  .mc-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 6px;
  }

  .mc-nav .t {
    font-weight: 700;
    font-size: 16px;
  }

  .mc-nav button {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text-2);
    padding: 6px;
    border-radius: 8px;
  }

  .mc-nav button:hover {
    background: var(--hover);
  }

  .mc-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 6px 16px 16px;
  }

  .mc-dow {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    padding: 6px 0;
    letter-spacing: .04em;
  }

  .mc-d {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    color: var(--text);
  }

  .mc-d:hover {
    background: var(--hover);
  }

  .mc-d.other {
    color: #CBD5E1;
  }

  html[data-theme="dark"] .mc-d.other {
    color: #475569;
  }

  .mc-d.off {
    color: var(--muted);
  }

  .mc-d.hol {
    color: var(--red);
    font-weight: 700;
    background: var(--red-l);
  }

  .mc-d.today {
    background: var(--violet);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(var(--violet-rgb), .3);
  }

  .mc-d.has::after {
    content: '';
    position: absolute;
    bottom: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--violet);
  }

  .mc-d.today.has::after {
    background: #fff;
  }

  .mc-d.late::after {
    background: var(--red);
  }

  .mc-up {
    border-top: 1px solid var(--border);
    padding: 14px 20px 18px;
  }

  .mc-up-h {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #94A3B8;
    margin-bottom: 8px;
  }

  .mc-up-it {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    border-bottom: 1px dashed var(--border);
  }

  .mc-up-it:last-child {
    border-bottom: 0;
  }

  .mc-up-date {
    width: 46px;
    text-align: center;
    border-radius: 10px;
    background: var(--violet-l);
    color: var(--violet);
    padding: 4px 0;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.1;
  }

  .mc-up-date small {
    display: block;
    font-size: 10px;
    font-weight: 700;
  }

  .mc-up-date.late {
    background: var(--red-l);
    color: var(--red);
  }

  /* ---------- page parts ---------- */
  .page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }

  .page-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
  }

  .page-sub {
    color: var(--muted);
    margin-top: 2px;
    font-size: 12.5px;
  }

  /* angka di tabel & ringkasan: lebar digit sama supaya rata */
  .num,
  .tbl td.n,
  .stat-v {
    font-variant-numeric: tabular-nums;
  }

  /* ---------- kartu navigasi bagian menu (ikon + nama + keterangan, aktif = tepi teal) ---------- */
  .navc-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
  }

  .navc {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    cursor: pointer;
    min-width: 0;
    text-align: left;
    color: var(--text);
  }

  .navc:hover {
    border-color: var(--violet-l2);
  }

  .navc.on {
    border-color: var(--violet);
    box-shadow: inset 0 0 0 1px var(--violet);
    background: var(--violet-l);
  }

  .navc-ic {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--input-ic);
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .navc.on .navc-ic {
    background: var(--violet);
    color: #fff;
  }

  .navc-ic svg.i {
    width: 16px;
    height: 16px;
  }

  .navc-t {
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .navc-s {
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---------- kotak stat (ikon berwarna + angka besar + nama + keterangan) ---------- */
  .stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
  }

  .stat {
    --st: var(--violet);
    --stl: var(--violet-l);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    min-width: 0;
    text-align: left;
    color: var(--text);
  }

  button.stat,
  .stat[data-act] {
    cursor: pointer;
  }

  .stat.on {
    border-color: var(--st);
    box-shadow: inset 0 0 0 1px var(--st);
  }

  .stat-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--stl);
    color: var(--st);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .stat-v {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
  }

  .stat-t {
    font-size: 12.5px;
    font-weight: 600;
  }

  .stat-s {
    font-size: 11.5px;
    color: var(--muted);
  }

  .stat.ok {
    --st: var(--teal);
    --stl: var(--teal-l);
  }

  .stat.warn {
    --st: var(--amber);
    --stl: var(--amber-l);
  }

  .stat.bad {
    --st: var(--red);
    --stl: var(--red-l);
  }

  .stat.info {
    --st: var(--blue);
    --stl: var(--blue-l);
  }

  .stat.mute {
    --st: var(--text-2);
    --stl: var(--input-ic);
  }

  /* kerangka memuat */
  .skel {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--input-ic) 25%, var(--hover) 50%, var(--input-ic) 75%);
    background-size: 200% 100%;
    animation: skel 1.2s linear infinite;
  }

  @keyframes skel {
    from {
      background-position: 200% 0;
    }

    to {
      background-position: -200% 0;
    }
  }

  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .card-pad {
    padding: 16px;
  }

  .card-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
  }

  .panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, box-shadow .15s;
  }

  .btn:disabled {
    opacity: .6;
    cursor: not-allowed;
  }

  .btn-primary {
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
  }

  .btn-primary:hover:not(:disabled) {
    background: var(--violet-d);
  }

  .btn-light {
    background: var(--card);
    color: var(--text-2);
    border-color: var(--border-2);
  }

  .btn-light:hover:not(:disabled) {
    background: var(--hover);
  }

  .btn-teal {
    background: var(--teal);
    color: #fff;
  }

  .btn-teal:hover:not(:disabled) {
    filter: brightness(.95);
  }

  .btn-danger {
    background: var(--red);
    color: #fff;
  }

  .btn-danger:hover:not(:disabled) {
    filter: brightness(.95);
  }

  .btn-amber {
    background: var(--amber);
    color: #fff;
  }

  .btn-orange {
    background: var(--orange);
    color: #fff;
  }

  .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 7px;
  }

  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
  }

  .chip.on {
    border-color: var(--violet);
    background: var(--violet-l);
    color: var(--violet);
  }

  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
  }

  .tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    overflow-x: auto;
  }

  .tab {
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .tab:hover {
    color: var(--text);
  }

  .tab.active {
    color: var(--violet);
    border-color: var(--violet);
  }

  .tab .cnt {
    background: var(--input-ic);
    color: var(--muted);
    border-radius: 10px;
    font-size: 11px;
    padding: 1px 8px;
  }

  .tab.active .cnt {
    background: var(--violet-l);
    color: var(--violet);
  }

  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    margin-bottom: 14px;
  }

  .filters>* {
    flex: 1 1 120px;
    min-width: 0;
  }

  .filters> :first-child {
    flex: 2.2 1 200px;
  }

  /* ---------- input group (ikon di kiri per kolom) ---------- */
  .field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-2);
  }

  .field .req {
    color: var(--red);
  }

  .field .hint {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 4px;
  }

  .ig {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-2);
    border-radius: 8px;
    background: var(--input);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
    min-height: 36px;
  }

  .ig:focus-within {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(var(--violet-rgb), .15);
  }

  .ig-ic {
    width: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--input-ic);
    border-right: 1px solid var(--border-2);
    color: var(--muted);
  }

  .ig-ic svg.i {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
  }

  .ig input,
  .ig select,
  .ig textarea {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--text);
  }

  .ig textarea {
    resize: vertical;
    min-height: 70px;
  }

  .ig input::placeholder,
  .ig textarea::placeholder {
    color: #9CA3AF;
  }

  .ig select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 28px;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
  }

  .ig select option {
    background: var(--card);
    color: var(--text);
  }

  .ig .ig-btn {
    border: 0;
    background: transparent;
    padding: 0 10px;
    cursor: pointer;
    color: var(--muted);
    display: flex;
    align-items: center;
  }

  .ig .ig-btn:hover {
    color: var(--violet);
  }

  .ig.err {
    border-color: var(--red);
  }

  .ig.plain .ig-ic {
    display: none;
  }

  .ig input[type="color"] {
    padding: 3px;
    height: 34px;
    cursor: pointer;
  }

  /* minmax(0, 1fr) + min-width 0: kolom tidak ikut melebar oleh teks opsi dropdown yang panjang (scroll ke kanan di modal) */
  .form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 16px;
  }

  .form-grid>* {
    min-width: 0;
  }

  .form-grid .span2 {
    grid-column: 1 / -1;
  }

  /* section kartu di form */
  .fsec {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 14px;
  }

  .fsec-h {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 13.5px;
    background: var(--hover);
    border-radius: 14px 14px 0 0;
  }

  .fsec-ic {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: var(--violet-l);
    color: var(--violet);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fsec-b {
    padding: 14px 16px;
  }

  /* ---------- combobox / list pencarian ---------- */
  .cbx {
    position: relative;
  }

  .cbx-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-height: 270px;
    overflow-y: auto;
    z-index: 120;
  }

  .cbx-it {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
  }

  .cbx-it:last-child {
    border-bottom: 0;
  }

  .cbx-it:hover,
  .cbx-it.hl {
    background: var(--hover);
  }

  .cbx-t {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
  }

  .cbx-s {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
  }

  .cbx-s .sep {
    color: var(--teal);
    margin: 0 4px;
  }

  .cbx-empty {
    padding: 14px 16px;
    color: var(--muted);
    font-size: 13px;
  }

  .cbx-clear {
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 0 12px;
    display: flex;
    align-items: center;
  }

  /* ---------- tabel ---------- */
  .tbl-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .tbl-wrap {
    overflow: auto;
    max-height: calc(100vh - 290px);
    min-height: 200px;
  }

  .tbl-wrap.auto {
    max-height: none;
  }

  table.tbl {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .tbl th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--th);
    color: var(--th-t);
    font-weight: 600;
    font-size: 11.5px;
    padding: 9px 8px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }

  .tbl th a {
    color: inherit;
  }

  .tbl th:last-child {
    border-right: 0;
  }

  .tbl th.l,
  .tbl td.l {
    text-align: left;
  }

  .tbl td {
    padding: 8px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    vertical-align: middle;
    text-align: center;
    background: var(--card);
  }

  .tbl tr:last-child td {
    border-bottom: 0;
  }

  .tbl tbody tr:hover td {
    background: var(--hover);
  }

  .tbl tbody tr.clickable {
    cursor: pointer;
  }

  /* item yang dibuka dengan klik dua kali: klik sekali = ditandai */
  [data-dbl] {
    cursor: default;
    user-select: none;
  }

  .tbl tbody tr.picked td {
    background: var(--violet-l);
  }

  .picked:not(tr):not(td) {
    border-color: var(--violet) !important;
    box-shadow: 0 0 0 2px var(--violet-l);
  }

  td.picked {
    background: var(--violet-l) !important;
    color: var(--violet);
    box-shadow: none;
  }

  input[data-money] {
    font-variant-numeric: tabular-nums;
  }

  .tbl .t-title {
    font-weight: 700;
    color: var(--text);
  }

  .tbl .t-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }

  table.tbl.tasks {
    min-width: 940px;
  }

  .tbl .due-t {
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
  }

  .tbl .t-rec {
    color: var(--violet);
  }

  .tbl .t-rec svg.i {
    width: 13px;
    height: 13px;
  }

  .tbl .t-desc {
    color: var(--muted);
    font-size: 11.5px;
    min-width: 110px;
    max-width: 190px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
  }

  .empty {
    padding: 56px 20px;
    text-align: center;
    color: var(--muted);
  }

  .empty svg.i {
    width: 40px;
    height: 40px;
    stroke-width: 1.5;
    color: var(--border-2);
    margin-bottom: 10px;
  }

  .tbl-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted);
    gap: 12px;
    flex-wrap: wrap;
  }

  .pager {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
  }

  .pg-size {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 6px;
  }

  .pg-size select {
    height: 30px;
    border: 1px solid var(--border-2);
    border-radius: 8px;
    background: var(--input);
    padding: 0 6px;
    font-size: 12px;
    cursor: pointer;
  }

  .pg-b {
    min-width: 30px;
    justify-content: center;
    padding: 0 8px;
  }

  .pg-b.on {
    border-color: var(--violet);
    color: var(--violet);
    font-weight: 700;
  }

  .pg-gap {
    padding: 0 2px;
  }

  .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 4px 9px;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
  }

  .pill.sm {
    min-width: 0;
    padding: 3px 8px;
    font-size: 10.5px;
    border-radius: 6px;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--input-ic);
    color: var(--text-2);
    white-space: nowrap;
  }

  .st-sel {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    color: #fff;
    font-weight: 700;
    font-size: 11.5px;
    padding: 5px 24px 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    min-width: 116px;
    text-align: center;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
  }

  .st-sel option {
    background: var(--card);
    color: var(--text);
  }

  .progress {
    height: 5px;
    background: var(--input-ic);
    border-radius: 6px;
    overflow: hidden;
    min-width: 54px;
  }

  .progress>span {
    display: block;
    height: 100%;
    background: var(--teal);
    border-radius: 6px;
  }

  .av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    flex: 0 0 auto;
  }

  .av.sm {
    width: 24px;
    height: 24px;
    font-size: 9.5px;
  }

  .av.lg {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }

  .person {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    white-space: nowrap;
  }

  /* tombol aksi tabel */
  .acts {
    display: flex;
    gap: 8px;
    justify-content: center;
    white-space: nowrap;
  }

  .ab {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .1s, filter .15s;
  }

  .ab:hover {
    filter: brightness(.94);
    transform: translateY(-1px);
  }

  .ab svg.i {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
  }

  .ab-view {
    background: #E6F6F4;
    color: #0D9488;
  }

  .ab-hist {
    background: #F3EEFF;
    color: #7C3AED;
  }

  .ab-edit {
    background: #EAF2FF;
    color: #2563EB;
  }

  .ab-del {
    background: #FDECEC;
    color: #DC4545;
  }

  .ab-key {
    background: #FEF4E3;
    color: #D97706;
  }

  html[data-theme="dark"] .ab-view {
    background: #10302D;
  }

  html[data-theme="dark"] .ab-hist {
    background: #2A2452;
  }

  html[data-theme="dark"] .ab-edit {
    background: #172A4D;
    color: #60A5FA;
  }

  html[data-theme="dark"] .ab-del {
    background: #3B1E24;
    color: #F87171;
  }

  html[data-theme="dark"] .ab-key {
    background: #3A2E15;
  }

  /* menu aksi ringkas: tombol "..." membuka deretan aksi melayang */
  .ab-more {
    background: var(--input-ic);
    color: var(--text-2);
  }

  .ab-more.on {
    background: var(--violet);
    color: #fff;
  }

  .am-list {
    position: fixed;
    z-index: 150;
    display: flex;
    gap: 6px;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 13px;
    box-shadow: var(--shadow-lg);
    animation: fade .12s;
  }

  /* menu klik kanan (isi sama dengan menu "...", label dari title tombol) */
  [data-ctx] {
    -webkit-touch-callout: none;
  }

  .ctx-on {
    outline: 2px solid var(--violet);
    outline-offset: -2px;
  }

  .ctx-menu {
    position: fixed;
    z-index: 380;
    min-width: 200px;
    max-width: 280px;
    padding: 5px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    animation: fade .1s;
  }

  .ctx-menu .ctx-it {
    width: 100%;
    height: auto;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
    transform: none !important;
    filter: none !important;
  }

  .ctx-menu .ctx-it:hover,
  .ctx-menu .ctx-sub.open>.ctx-it {
    background: var(--hover);
  }

  .ctx-menu .ctx-it svg.i {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
  }

  .ctx-menu .ab-view svg.i {
    color: #0D9488;
  }

  .ctx-menu .ab-hist svg.i {
    color: #7C3AED;
  }

  .ctx-menu .ab-edit svg.i {
    color: #2563EB;
  }

  .ctx-menu .ab-key svg.i {
    color: #D97706;
  }

  .ctx-menu .ab-del {
    color: var(--red);
  }

  .ctx-menu .ctx-l {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ctx-menu .ctx-chev {
    color: var(--muted);
  }

  .ctx-sep {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 4px 2px;
  }

  .ctx-h {
    padding: 6px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ctx-sub {
    position: relative;
  }

  /* submenu menempel tanpa celah (+ jembatan transparan) dan dibuka/ditutup lewat JS dengan jeda,
 * jadi tidak hilang saat kursor bergerak miring dari judul ke daftar */
  .ctx-subl {
    display: none;
    position: absolute;
    top: -5px;
    left: 100%;
    min-width: 190px;
    padding: 5px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 2;
  }

  .ctx-subl::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -14px;
    width: 14px;
  }

  .ctx-menu.flip .ctx-subl {
    left: auto;
    right: 100%;
  }

  .ctx-menu.flip .ctx-subl::before {
    left: auto;
    right: -14px;
  }

  .ctx-sub.open>.ctx-subl {
    display: block;
  }

  @media (max-width: 640px) {
    .ctx-subl {
      position: static;
      box-shadow: none;
      border: 0;
      padding: 0 0 0 18px;
    }
  }

  .st-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
  }

  /* pemilih folder tujuan */
  .fpk-list {
    border: 1px solid var(--border);
    border-radius: 12px;
    max-height: 52vh;
    overflow-y: auto;
    background: var(--card);
  }

  .fpk-it {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-weight: 600;
  }

  .fpk-it:last-child {
    border-bottom: 0;
  }

  .fpk-it:hover {
    background: var(--hover);
  }

  .fpk-it.on {
    background: var(--violet-l);
    color: var(--violet);
  }

  .fpk-it.off {
    opacity: .45;
    cursor: not-allowed;
  }

  .fpk-ic {
    display: inline-flex;
    color: var(--violet);
  }

  .fpk-ic svg.i {
    width: 16px;
    height: 16px;
  }

  /* pilih banyak (centang) + bar aksi massal */
  .sel-cb {
    width: 16px;
    height: 16px;
    accent-color: var(--violet);
    cursor: pointer;
    vertical-align: middle;
  }

  .bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: var(--violet-l);
    color: var(--violet);
    font-weight: 700;
  }

  .bulk-bar .grow {
    min-width: 80px;
  }

  /* pemilih ikon kategori */
  .icp {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 6px;
    max-height: 190px;
    overflow-y: auto;
    padding: 2px;
  }

  .icp-it {
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .icp-it:hover {
    border-color: var(--violet);
  }

  .icp-it.on {
    border-color: var(--violet);
    background: var(--violet);
    color: #fff;
  }

  .icp-it svg.i {
    width: 17px;
    height: 17px;
  }

  /* ikon keterangan (i) + tooltip melayang */
  .itip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    color: var(--muted);
    cursor: help;
    vertical-align: middle;
    border-radius: 50%;
    outline: 0;
  }

  .itip:hover,
  .itip:focus {
    color: var(--violet);
  }

  .itip svg.i {
    width: 16px;
    height: 16px;
  }

  .tip {
    position: fixed;
    z-index: 400;
    max-width: 320px;
    background: var(--navy);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    padding: 9px 12px;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    white-space: pre-line;
    pointer-events: none;
    text-align: left;
  }

  /* ---------- modal ---------- */
  .modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .55);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fade .15s;
  }

  @keyframes fade {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .modal {
    width: 100%;
    max-width: 880px;
    max-height: calc(100vh - 40px);
    background: var(--card);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* 4 ukuran baku: kecil (konfirmasi), sedang (form tambah), besar (impor), panel samping (lihat / ubah satu data) */
  .modal.sm {
    max-width: 440px;
  }

  .modal.md {
    max-width: 640px;
  }

  .modal.lg {
    max-width: 960px;
  }

  .modal-bg.side {
    justify-content: flex-end;
    align-items: stretch;
    padding: 10px;
  }

  .modal.side {
    max-width: 420px;
    max-height: none;
    height: calc(100vh - 20px);
    animation: side-in .18s ease-out;
  }

  @keyframes side-in {
    from {
      transform: translateX(24px);
      opacity: .4;
    }

    to {
      transform: none;
      opacity: 1;
    }
  }

  .fp-frame {
    display: block;
    width: 100%;
    height: 68vh;
    border: 0;
    border-radius: 12px;
    background: var(--input-ic);
  }

  .fp-img {
    text-align: center;
  }

  .fp-img img {
    max-width: 100%;
    max-height: 68vh;
    border-radius: 12px;
  }

  .modal-h {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 18px;
    border-bottom: 1px solid var(--border);
  }

  .modal-hic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--violet-l);
    color: var(--violet);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .modal-hic svg.i {
    width: 17px;
    height: 17px;
  }

  .modal-hic.red {
    background: var(--red-l);
    color: var(--red);
  }

  .modal-hic.teal {
    background: var(--teal-l);
    color: var(--teal);
  }

  .modal-t {
    font-size: 15.5px;
    font-weight: 700;
  }

  .modal-s {
    color: var(--muted);
    font-size: 12px;
    margin-top: 1px;
  }

  .modal-x {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .modal-x:hover {
    color: var(--text);
    background: var(--hover);
  }

  .modal-b {
    padding: 16px 20px;
    overflow-y: auto;
    background: var(--bg);
    flex: 1;
  }

  .modal-b.white {
    background: var(--card);
  }

  .modal-f {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--card);
    flex-wrap: wrap;
  }

  /* ---------- tata letak sub-menu: daftar di kiri, isi di kanan (Role, Master Data, Settings) ---------- */
  .sub-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }

  .sub-layout>.card {
    overflow: hidden;
  }

  /* fitPanes(): panel kiri & kanan scroll terpisah, judul panel menempel di atas */
  .sub-layout.fit>.card {
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sub-layout.fit>.card>.card-h:first-child {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--card);
  }

  .sub-it {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
  }

  .sub-it:last-child {
    border-bottom: 0;
  }

  .sub-it:hover {
    background: var(--hover);
  }

  .sub-it.active {
    background: var(--violet-l);
    box-shadow: inset 3px 0 0 var(--violet);
  }

  .sub-it .n {
    font-weight: 700;
  }

  .sub-it>svg.i {
    color: var(--muted);
  }

  .sub-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--card);
  }

  /* ---------- placeholder dev ---------- */
  .dev-box {
    max-width: 560px;
    margin: 40px auto;
    text-align: center;
    padding: 48px 32px;
  }

  .dev-ic {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    background: var(--violet-l);
    color: var(--violet);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
  }

  .dev-ic svg.i {
    width: 36px;
    height: 36px;
    stroke-width: 1.6;
  }

  .dev-badge {
    display: inline-block;
    background: var(--amber-l);
    color: #B45309;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
  }

  /* ---------- switch ---------- */
  .switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .switch span {
    position: absolute;
    inset: 0;
    background: var(--border-2);
    border-radius: 24px;
    cursor: pointer;
    transition: background .2s;
  }

  .switch span::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
  }

  .switch input:checked+span {
    background: var(--teal);
  }

  .switch input:checked+span::before {
    transform: translateX(18px);
  }

  /* ---------- profil saya ---------- */
  .pf-modal .modal-h .av.lg {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }

  .pf-tabs {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    margin: -6px 0 16px;
    overflow-x: auto;
  }

  .pf-tabs button {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    padding: 8px 0;
    cursor: pointer;
    white-space: nowrap;
  }

  .pf-tabs button.on {
    color: var(--text);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--violet);
  }

  .pf-tg {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pf-st {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--input-ic);
    color: var(--muted);
  }

  .pf-st.ok {
    background: var(--teal-l);
    color: #166534;
  }

  .pf-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
  }

  .pf-theme {
    display: flex;
    width: 100%;
  }

  .pf-theme button {
    flex: 1;
    justify-content: center;
  }

  /* ---------- pemilih periode seragam (js_core rpHtml) ---------- */
  .rp {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
  }

  .rp .rp-nav {
    width: 30px;
    height: 34px;
  }

  .rp .rp-nav:disabled {
    opacity: .35;
    cursor: default;
  }

  .rp-btn {
    flex: 1;
    min-width: 0;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid var(--border-2);
    border-radius: 8px;
    background: var(--input);
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
  }

  .rp-btn.on {
    border-color: var(--violet);
  }

  .rp-btn svg.i {
    width: 15px;
    height: 15px;
    color: var(--muted);
  }

  .rp-btn.on svg.i:first-child {
    color: var(--violet);
  }

  .rp-btn .grow {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }

  .rp-btn b {
    font-weight: 600;
  }

  .rp-sub {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 400;
  }

  .rp-bg {
    position: fixed;
    inset: 0;
    z-index: 140;
  }

  .rp-pop {
    position: fixed;
    width: 780px;
    max-width: calc(100vw - 24px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: fade .12s;
  }

  .rp-in {
    display: flex;
  }

  .rp-l {
    width: 250px;
    flex: 0 0 auto;
    border-right: 1px solid var(--border);
    padding: 10px;
  }

  .rp-h {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--muted);
    padding: 2px 8px 6px;
  }

  .rp-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    color: var(--text);
  }

  .rp-q:hover {
    background: var(--hover);
  }

  .rp-q.on {
    background: var(--violet-l);
    color: var(--violet-d);
    font-weight: 600;
  }

  .rp-q .rp-sub {
    font-size: 11px;
    white-space: nowrap;
  }

  .rp-fy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 0 2px 8px;
    font-size: 12.5px;
  }

  .rp-fy .icon-btn {
    width: 28px;
    height: 28px;
  }

  .rp-parts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .rp-parts button {
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--card);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
  }

  .rp-parts button.wide {
    grid-column: span 2;
  }

  .rp-parts button.now {
    box-shadow: inset 0 -2px 0 var(--violet);
  }

  .rp-parts button.on {
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
  }

  .rp-r {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
  }

  .rp-cnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    text-align: center;
  }

  .rp-cnav .icon-btn {
    width: 30px;
    height: 30px;
  }

  .rp-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .rp-mt {
    text-align: center;
    font-weight: 700;
    margin-bottom: 6px;
  }

  .rp-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: 2px;
  }

  .rp-dw {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
  }

  .rp-d {
    height: 30px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--text);
    border-radius: 7px;
  }

  .rp-d:hover {
    background: var(--hover);
  }

  .rp-d.in {
    background: var(--violet-l);
    color: var(--violet-d);
    border-radius: 0;
  }

  .rp-d.edge {
    background: var(--violet);
    color: #fff;
    border-radius: 7px;
  }

  .rp-d.today {
    font-weight: 700;
    text-decoration: underline;
  }

  .rp-foot {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--hover);
    font-size: 12.5px;
  }

  .rp-basis select {
    height: 30px;
    border: 1px solid var(--border-2);
    border-radius: 7px;
    background: var(--input);
    color: var(--text);
    padding: 0 6px;
    margin-left: 6px;
  }

  .rp-late {
    display: inline-flex;
    gap: 7px;
    align-items: center;
  }

  .rp-late input {
    accent-color: var(--violet);
  }

  @media (max-width: 640px) {
    .rp-bg {
      background: rgba(17, 24, 39, .45);
    }

    .rp-pop {
      left: 0 !important;
      right: 0;
      bottom: 0;
      top: auto !important;
      width: auto;
      max-width: none;
      max-height: 88vh;
      overflow-y: auto;
      border-radius: 16px 16px 0 0;
    }

    .rp-in {
      flex-direction: column;
    }

    .rp-l {
      width: auto;
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .rp-months {
      grid-template-columns: 1fr;
    }

    .rp-months > div:last-child {
      display: none;
    }

    .rp-btn .rp-sub {
      display: none;
    }
  }

  /* ---------- cari cepat (Ctrl K): menu, tugas, panduan, Tanya ARTHA ---------- */
  .qs-bg {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(17, 24, 39, .45);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 72px 16px 16px;
    animation: fade .12s;
  }

  .qs {
    width: 100%;
    max-width: 620px;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .qs-in {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
  }

  .qs-in svg.i {
    color: var(--muted);
  }

  .qs-in input {
    flex: 1;
    min-width: 0;
    height: 52px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    color: var(--text);
  }

  .qs-list {
    overflow-y: auto;
    padding: 6px;
    overscroll-behavior: contain;
  }

  .qs-g {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--muted);
    padding: 10px 10px 4px;
  }

  .qs-it {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    min-width: 0;
  }

  .qs-it.hl {
    background: var(--violet-l);
  }

  .qs-ic {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--input-ic);
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .qs-it.hl .qs-ic {
    background: var(--violet);
    color: #fff;
  }

  .qs-ic svg.i {
    width: 16px;
    height: 16px;
  }

  .qs-t {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .qs-s {
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .qs-foot {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--muted);
  }

  .qs-empty {
    padding: 22px 14px;
    text-align: center;
    color: var(--muted);
  }

  @media (max-width: 640px) {
    .qs-bg {
      padding: 12px;
    }

    .qs-foot {
      display: none;
    }
  }

  /* ---------- toast (kanan atas, di bawah header) ---------- */
  .toasts {
    position: fixed;
    right: 20px;
    top: 80px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: calc(100vw - 24px);
    pointer-events: none;
  }

  .toast {
    pointer-events: auto;
    min-width: 260px;
    max-width: 400px;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 11px 12px 11px 14px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    animation: toast-in .2s ease-out;
  }

  @keyframes toast-in {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  .toast>svg.i {
    width: 18px;
    height: 18px;
    color: var(--violet);
    margin-top: 1px;
  }

  .toast>div {
    flex: 1;
    min-width: 0;
  }

  .toast.success>svg.i {
    color: var(--teal);
  }

  .toast.error {
    border-color: #FCA5A5;
  }

  .toast.error>svg.i {
    color: var(--red);
  }

  .toast.warn>svg.i {
    color: var(--amber);
  }

  .toast .toast-act {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--violet);
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 6px;
  }

  .toast .toast-act:hover {
    background: var(--violet-l);
  }

  .toast .toast-x {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
  }

  .toast .toast-x svg.i {
    width: 15px;
    height: 15px;
  }

  /* ---------- responsif ---------- */
  @media (max-width: 960px) {
    .sidebar {
      top: 0;
      left: 0;
      bottom: 0;
      width: 268px;
      border-radius: 0 14px 14px 0;
      transform: translateX(-105%);
    }

    .app.sb-mini .sidebar {
      width: 268px;
      padding: 14px 10px 10px;
    }

    .app.sb-open .sidebar {
      transform: none;
    }

    .app.sb-open .sb-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(17, 24, 39, .5);
      z-index: 45;
    }

    .main,
    .app.sb-mini .main {
      margin-left: 0;
    }

    .sb-mini-btn {
      display: none;
    }

    .topbar {
      margin: 10px 10px 0;
      padding: 0 8px 0 6px;
    }

    .content {
      padding: 14px 10px 18px;
    }

    .mobile-only {
      display: inline-flex;
    }

    .prof-meta,
    .tb-search .grow,
    .tb-search kbd {
      display: none;
    }

    .tb-search {
      width: 38px;
      height: 38px;
      padding: 0;
      justify-content: center;
      border: 0;
      background: transparent;
      color: var(--text-2);
    }

    .sub-layout {
      grid-template-columns: minmax(0, 1fr);
    }

    .login-card {
      grid-template-columns: 1fr;
      min-height: 0;
    }

    .login-left {
      padding: 28px 24px;
      min-height: 0;
    }

    .login-id {
      margin-top: 18px;
    }

    .login-right {
      padding: 28px 24px 32px;
    }
  }

  @media (max-width: 640px) {
    .topbar {
      gap: 2px;
      height: 56px;
    }

    .tb-crumb,
    .tb-sep,
    .tb-hide-sm {
      display: none;
    }

    .tb-title {
      font-size: 14px;
    }

    .icon-btn {
      width: 36px;
      height: 36px;
    }

    .toasts {
      top: 72px;
      right: 12px;
      left: 12px;
      align-items: stretch;
    }

    .toast {
      max-width: none;
      min-width: 0;
    }

    /* HP: kotak stat 2 kolom */
    .stat-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .stat {
      padding: 10px;
      gap: 8px;
      align-items: flex-start;
    }

    .stat-ic {
      width: 30px;
      height: 30px;
    }

    .stat-v {
      font-size: 18px;
    }

    .filters>* {
      flex: 1 1 calc(50% - 4px);
    }

    .filters> :first-child {
      flex-basis: 100%;
    }

    .form-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .modal-bg {
      padding: 0;
      align-items: flex-end;
    }

    .modal,
    .modal.side {
      max-height: 94vh;
      height: auto;
      max-width: none;
      border-radius: 16px 16px 0 0;
    }

    .modal-b {
      padding: 16px;
    }

    .page-head .btn {
      width: 100%;
    }

    .login-wrap {
      padding: 12px;
    }

    .login-left .login-company {
      display: none;
    }
  }


/* ---------- detail tugas ---------- */
.dt-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dt-meta .k { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.dt-meta .v { font-weight: 600; }
.dt-desc { white-space: pre-wrap; color: var(--text-2); }
.dt-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); margin-bottom: 8px; }
.cl-item.done .cl-text { text-decoration: line-through; color: var(--muted); }
.cl-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--teal); cursor: pointer; }
.cl-edit { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.cl-edit .ig { flex: 1; }
.tl { position: relative; padding-left: 22px; }
.tl::before { content: ''; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.tl-it { position: relative; margin-bottom: 16px; }
.tl-it::before { content: ''; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--violet); border: 2px solid var(--card); }
.tl-it.note::before { background: var(--teal); }
.tl-it.status::before { background: var(--amber); }
.tl-h { font-size: 13px; }
.tl-at { font-size: 11px; color: var(--muted); }
.tl-note { margin-top: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; font-size: 13px; }
.file-it { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); margin-bottom: 8px; }
/* ---------- tampilan My Tasks & pemilih periode ---------- */
.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--input-ic); }
.seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 8px; font-weight: 700; font-size: 12.5px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--card); color: var(--violet); box-shadow: var(--shadow); }
.seg .cnt { background: var(--border); color: var(--text-2); border-radius: 10px; font-size: 11px; padding: 0 7px; min-width: 20px; text-align: center; }
.seg button.on .cnt { background: var(--violet-l); color: var(--violet); }
/* My Tasks: tab (kiri) + tombol tampilan (kanan) dalam satu baris; HP turun dua baris */
.tk-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 14px; border-bottom: 1px solid var(--border); }
.tk-bar .tabs { border-bottom: 0; margin: 0; }
.tk-bar #tk-chips { margin: 0 0 6px auto; }
.tk-bar.solo { border-bottom: 0; }
.tk-bar.solo #tk-chips { margin-left: 0; }
@media (max-width: 640px) { .tk-bar #tk-chips { margin-left: 0; max-width: 100%; } .tk-bar .seg { max-width: 100%; overflow-x: auto; } .tk-bar .seg button { padding: 6px 9px; white-space: nowrap; flex: 0 0 auto; } }
.tbl tr.grp td { background: var(--hover); text-align: left; font-weight: 800; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); padding: 7px 10px; }
.tbl tr.grp td .dot { margin-right: 7px; vertical-align: middle; }
.tbl tbody tr.grp:hover td { background: var(--hover); }
.grp-n { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); font-size: 10.5px; letter-spacing: 0; }
.pp-wrap { position: relative; }
.pp-btn { width: 100%; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--input); color: var(--text); cursor: pointer; font-size: 13px; white-space: nowrap; }
.pp-btn .i { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.pp-btn .grow { overflow: hidden; text-overflow: ellipsis; text-align: left; }
.pp-btn.on { border-color: var(--violet); }
.pp-btn.on .i:first-child { color: var(--violet); }
.pp-pop { position: absolute; top: 40px; right: 0; z-index: 30; width: 250px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 10px; }
.pp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.pp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pp-m { position: relative; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 8px; padding: 7px 0; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.pp-m:hover { border-color: var(--violet); }
.pp-m.now { color: var(--violet); }
.pp-m.has::after { content: ''; position: absolute; top: 4px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--violet); }
.pp-m.on { background: var(--violet); border-color: var(--violet); color: #fff; }
.pp-m.on::after { background: #fff; }
.pp-foot { display: flex; gap: 6px; margin-top: 8px; }
.pp-foot .btn { flex: 1; justify-content: center; }
.pp-foot .btn.on { border-color: var(--violet); color: var(--violet); }
/* Detail tugas tanpa tab */
.td-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.td-chips .tag .i { width: 12px; height: 12px; }
.td-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; }
.td-st { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--muted); }
.td-st b { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex: 0 0 auto; background: var(--input-ic); }
.td-st b .i { width: 12px; height: 12px; stroke-width: 3; }
.td-st.done { color: var(--violet-d); }
.td-st.done b { background: var(--violet); color: #fff; }
.td-st.now { color: var(--text); }
.td-st.now b { background: var(--card); box-shadow: inset 0 0 0 2px var(--c); color: var(--c); }
.td-fs { font-weight: 500; color: var(--muted); }
.td-fl { flex: 1; height: 2px; min-width: 14px; background: var(--border); }
.td-fl.on { background: var(--violet); }
.td-cols { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.td-main { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.td-side { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.td-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--card); min-width: 0; }
.td-h { font-size: 14px; }
.td-card .cl-item { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 9px 2px; align-items: flex-start; }
.td-card .cl-item input[type="checkbox"] { margin-top: 1px; }
.td-card .file-it { margin-bottom: 6px; padding: 8px 10px; }
.td-card .dz { margin-top: 6px; }
.td-link { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.td-link .ig { flex: 1 1 180px; }
.td-seg button { padding: 4px 10px; font-size: 12px; border-bottom: 0; }
.td-note { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.td-note .ig { flex: 1; }
.td-note .ig textarea { min-height: 40px; }
.td-next { border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); }
.td-checks { list-style: none; margin: 10px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.td-checks li { display: flex; gap: 8px; align-items: flex-start; }
.td-checks svg.i { width: 14px; height: 14px; margin-top: 1px; flex: 0 0 auto; }
.td-checks li.ok .i { color: var(--teal); }
.td-checks li.w .i { color: var(--amber); }
.td-checks li.nf .i { color: var(--muted); }
.td-kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px 10px; font-size: 12.5px; margin-top: 10px; }
.td-kv .k { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 400; margin: 0; }
.td-kv .v { min-width: 0; }
.td-kv .v .sub { font-size: 11px; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.td-kv .person .av.sm { width: 22px; height: 22px; font-size: 9px; }
.td-per { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; font-size: 12.5px; }
/* Form tugas satu halaman + pratinjau */
.tf-modal .modal-b { padding: 0; overflow: hidden; display: flex; min-height: 0; }
.tf-wrap { display: flex; align-items: stretch; flex: 1; min-height: 0; }
.tf-main { flex: 1; min-width: 0; padding: 4px 22px 14px; overflow-y: auto; overscroll-behavior: contain; }
.tf-side { width: 300px; flex: 0 0 auto; background: var(--hover); border-left: 1px solid var(--border); padding: 18px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.tf-sec { padding: 14px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.tf-sec:first-child { border-top: 0; }
.tf-st { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13.5px; }
.tf-sn { width: 26px; height: 26px; border-radius: 8px; background: var(--violet-l); color: var(--violet); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tf-sn .i { width: 14px; height: 14px; }
.tf-sec .field { margin: 0; }
.tf-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.tf-seg { display: flex; width: 100%; }
.tf-seg button { flex: 1; justify-content: center; font-weight: 600; padding: 7px 8px; }
.tf-seg .dot { width: 7px; height: 7px; }
.tf-cl-add { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1.5px dashed var(--border-2); border-radius: 8px; background: transparent; font: inherit; font-size: 13px; color: var(--violet); font-weight: 600; cursor: pointer; width: 100%; }
.tf-cl-add .i { width: 15px; height: 15px; }
.tf-sh { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); margin-top: 6px; }
.tf-pv { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tf-pv .av.sm { width: 22px; height: 22px; font-size: 9px; }
.tf-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.tf-flow span { padding: 3px 8px; border-radius: 6px; font-weight: 600; }
.tf-per { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.tf-per li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.tf-per li > span { text-align: right; }
.tf-per .sh { display: block; font-size: 11px; color: #B45309; }
@media (max-width: 860px) {
  .tf-modal .modal-b { overflow-y: auto; display: block; }
  .tf-modal .modal-f .grow { display: none; }
  .tf-main { overflow: visible; }
  .tf-wrap { flex-direction: column; }
  .tf-side { width: auto; border-left: 0; border-top: 1px solid var(--border); }
  .tf-g3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tf-seg { flex-wrap: wrap; }
}
/* My Tasks gaya baru: Daftar & Papan */
.tk-page .filters { align-items: center; }
.filters > .tk-shape { flex: 0 0 auto; }
.filters > #tk-pp { flex: 1.5 1 230px; }
.tk-shape button { padding: 6px 10px; }
.tk-shape .i { width: 15px; height: 15px; }
.tbl-card.tk-plain { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.tbl-card.tk-plain .tbl-foot { border-top: 0; padding: 8px 2px; }
.tk-grp { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.tk-gh { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 0; background: var(--hover); font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; }
.tk-gh .i { width: 14px; height: 14px; color: var(--muted); }
.tk-gh .cnt, .tk-colh .cnt { background: var(--card); border: 1px solid var(--border); color: var(--text-2); border-radius: 10px; font-size: 11px; padding: 0 7px; font-weight: 600; }
.tk-gh-r { margin-left: auto; font-size: 12px; color: var(--muted); }
.tk-row { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-top: 1px solid var(--border); min-width: 0; }
.tk-row:hover { background: var(--hover); }
.tk-row.picked { background: var(--violet-l); }
.tk-ring { width: 16px; height: 16px; border-radius: 50%; border: 2px solid; box-sizing: border-box; flex: 0 0 auto; }
.tk-main { flex: 1; min-width: 0; }
.tk-title { font-weight: 600; color: var(--text) !important; cursor: pointer; text-decoration: none !important; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-title:hover { color: var(--violet) !important; }
.tk-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); margin-top: 1px; }
.tk-rec { display: inline-flex; gap: 3px; align-items: center; color: var(--violet); font-weight: 500; }
.tk-rec .i { width: 12px; height: 12px; }
.tk-cl { width: 96px; flex: 0 0 auto; font-size: 11.5px; color: var(--muted); }
.tk-cl b { color: var(--text-2); }
.tk-cl .progress { margin-top: 3px; }
.tk-prio { width: 86px; flex: 0 0 auto; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.tk-prio span { color: var(--text-2); font-weight: 500; }
.tk-prio .i { width: 13px; height: 13px; }
.tk-prio.sm { width: auto; font-size: 11px; gap: 3px; }
.tk-prio.sm .i { width: 12px; height: 12px; }
.tk-due { width: 120px; flex: 0 0 auto; font-weight: 600; font-size: 12.5px; }
.tk-dsub { font-size: 11.5px; font-weight: 500; }
.tk-st { width: 132px; flex: 0 0 auto; }
.tk-go { width: 84px; flex: 0 0 auto; color: var(--violet) !important; }
.tk-more { flex: 0 0 auto; }
.tk-board { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 4px; }
.tk-col { background: var(--input-ic); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 420px; transition: box-shadow .12s; }
html[data-theme="dark"] .tk-col { background: #111A2B; }
.tk-col.over { box-shadow: inset 0 0 0 2px var(--violet); background: var(--violet-l); }
.tk-colh { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; font-size: 13px; }
.tk-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; cursor: grab; font-size: 13px; }
.tk-card[draggable="false"] { cursor: default; }
.tk-card:hover { border-color: var(--violet-l2); }
.tk-card.late { border-color: #F5C2C2; }
.tk-card.drag { opacity: .45; }
.tk-card .tk-title { white-space: normal; line-height: 1.35; }
.tk-card .tag { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.tk-note { font-size: 12px; color: #9A3412; background: #FFF7ED; border-radius: 6px; padding: 5px 8px; }
html[data-theme="dark"] .tk-note { background: rgba(234, 88, 12, .14); color: #FDBA74; }
.tk-cdue { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.tk-cdue .i { width: 13px; height: 13px; }
.tk-empty { text-align: center; padding: 16px 8px; border: 1.5px dashed var(--border-2); border-radius: 10px; font-size: 12px; color: var(--muted); }
.tk-hint { display: flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--muted); }
.tk-hint .i { width: 14px; height: 14px; }
/* All Tasks: KPI tim & Per Orang */
.tk-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); overflow: hidden; padding: 0; }
.tk-k { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: var(--card); border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--text); min-width: 0; }
.tk-k:disabled { cursor: default; }
.tk-k:not(:disabled):hover { background: var(--hover); }
.tk-k.on { background: var(--violet-l); box-shadow: inset 0 -2px 0 var(--violet); }
.tk-k b { font-size: 22px; line-height: 1.2; }
.tk-ph { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tk-legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.tk-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tk-legend i { width: 10px; height: 10px; border-radius: 3px; }
.tk-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.tk-pc { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tk-pc.busy { border-color: #F5C2C2; }
html[data-theme="dark"] .tk-pc.busy { border-color: rgba(220, 38, 38, .45); }
.tk-pn { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-load { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; flex: 0 0 auto; }
.tk-pbar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 4px; }
.tk-pbar span { display: block; height: 100%; border-radius: 999px; }
.tk-pst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tk-pst > div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 8px; background: var(--hover); }
.tk-pst b { font-size: 17px; line-height: 1.2; }
.tk-pst span { font-size: 11px; color: var(--muted); }
.tk-pt { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); font-size: 12.5px; min-width: 0; }
.tk-pt .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tk-pt a { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text) !important; cursor: pointer; text-decoration: none !important; }
.tk-pt a:hover { color: var(--violet) !important; }
.tk-pt > span:last-child { font-weight: 600; white-space: nowrap; }
.tk-pa { margin-top: auto; gap: 8px; }
.tk-pa .btn { flex: 1; justify-content: center; }
@media (max-width: 1180px) { .tk-cl { display: none; } }
@media (max-width: 760px) {
  .tk-people { grid-template-columns: minmax(0, 1fr); }
  .tk-ph .ig { width: 100% !important; }
  .tk-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-k b { font-size: 19px; }
  .tk-kpi .tk-k:last-child:nth-child(odd) { grid-column: span 2; }
  .tk-row { flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; }
  .tk-main { flex: 1 1 calc(100% - 30px); }
  .tk-prio, .tk-st { display: none; }
  .tk-due { width: auto; margin-left: 26px; flex: 1; }
  .tk-go { width: auto; }
  .tk-board { grid-template-columns: repeat(5, 78vw); scroll-snap-type: x mandatory; }
  .tk-col { scroll-snap-align: start; min-height: 260px; }
  .tk-shape span { display: none; }
}
.dt-refresh { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.file-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--violet-l); color: var(--violet); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
/* ---------- jam tugas ---------- */
.tm { display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 4px; font-size: 10.5px; color: var(--muted); white-space: nowrap; font-weight: 600; }
.tm .i { width: 11px; height: 11px; flex: 0 0 auto; }
.tm-ok { display: inline-flex; align-items: center; gap: 2px; color: var(--teal); }
.tm-run { display: inline-flex; align-items: center; gap: 2px; color: #D97706; }
.tm-sep { margin: 0 2px; }
.due-hm { font-weight: 700; color: var(--violet); }
.due-sh { display: inline-flex; vertical-align: middle; margin-left: 2px; }
.dt-meta .v .sub { font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.sched-warn { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 11.5px; color: #B45309; background: #FEF3C7; border-radius: 8px; padding: 6px 8px; }
html[data-theme="dark"] .sched-warn { background: rgba(245, 158, 11, .14); color: #FCD34D; }
.sched-warn .i { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }
.sched-prev { font-size: 12px; color: var(--text-2); background: var(--hover); border: 1px dashed var(--border); border-radius: 10px; padding: 8px 10px; }
.sched-prev b { color: var(--text); }
.sched-prev .sh { color: #B45309; }
@media (max-width: 640px) {
  .dt-meta { grid-template-columns: 1fr 1fr; }
}


/* ---------- pop-up pengingat & check-in harian ---------- */
.ci-q { font-size: 15px; font-weight: 700; margin: 14px 0 10px; }
.ci-h2 { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.modal-hic.ci-sun { background: #FEF3C7; color: #B45309; }
.ci-msgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 14px; }
.ci-msgs .ci-pin, .ci-msgs .ci-quote { margin: 0; }
.ci-qh { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; font-style: normal; }
.ci-faces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.ci-face { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border: 2px solid var(--border); border-radius: 14px; background: var(--card); cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--text-2); text-align: center; line-height: 1.25; transition: transform .12s, border-color .12s; }
.ci-face:hover { transform: translateY(-2px); }
.ci-face svg { width: 40px; height: 40px; }
.ci-face.on { border-color: var(--fc); background: var(--hover); color: var(--text); transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.ci-box { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-top: 14px; background: var(--hover); }
.ci-box-h { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ci-box-h .i { width: 13px; height: 13px; }
.ci-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ci-stat { background: var(--hover); border: 0; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.ci-stat b { display: block; font-size: 20px; line-height: 1.2; }
.ci-stat span { font-size: 11px; color: var(--muted); font-weight: 600; }
.ci-pin { border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--violet-l); border: 1px solid var(--violet-l2); color: var(--text); }
.ci-pin-h { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--violet-d); margin-bottom: 2px; }
.ci-pin-h .i { width: 13px; height: 13px; }
.ci-pin-t { font-size: 12.5px; font-weight: 500; white-space: pre-wrap; line-height: 1.45; }
.ci-quote { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--border); background: var(--hover); border-radius: 10px; }
.ci-quote > .i { width: 18px; height: 18px; color: var(--violet); flex: 0 0 auto; margin-top: 1px; }
.ci-quote-t { font-size: 12.5px; font-style: italic; color: var(--text); line-height: 1.5; }
.ci-quote-a { font-size: 11.5px; color: var(--muted); margin-top: 3px; font-weight: 600; }
.ci-box.due { background: var(--red-l); border-color: transparent; }
.ci-box.due .ci-box-h { color: var(--red); }
.ci-box.ok { display: flex; align-items: center; gap: 8px; background: var(--teal-l); border-color: transparent; color: var(--teal); font-weight: 700; font-size: 12.5px; }
.ci-box.ok .i { width: 16px; height: 16px; }
.ci-cnt { background: var(--red); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 10.5px; letter-spacing: 0; }
.ci-tasks .it .pill { flex: 0 0 auto; }
.ci-tasks .it { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.ci-tasks .it:first-child { border-top: 0; }
.ci-tasks .it .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ci-ann { font-size: 12.5px; padding: 4px 0; }
.ci-ann b { display: block; }
.toast.notif-toast { cursor: pointer; border-left-color: var(--violet); max-width: 360px; }
.toast.notif-toast b { display: block; font-size: 13px; }
.rem-modal { max-width: 380px; border-radius: 18px; }
.rem-modal .modal-b { padding: 26px 24px 10px; }
.rem-modal .modal-f { border-top: 0; padding: 4px 24px 22px; }
.rem-modal .modal-f .btn { flex: 1; justify-content: center; }
.rem-pop { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rem-ic { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; animation: rem-pulse 1.6s ease-in-out 3; }
.rem-ic .i { width: 30px; height: 30px; }
.rem-k { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.rem-pop h3 { margin: 0; font-size: 20px; }
.rem-time { font-size: 30px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.rem-time small { font-size: 13px; font-weight: 500; color: var(--muted); }
.rem-pop p { margin: 0; color: var(--text-2); font-size: 13.5px; }
.rem-loc { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.rem-loc .i { width: 13px; height: 13px; }
@keyframes rem-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(15,118,110,.35); } 50% { box-shadow: 0 0 0 14px rgba(15,118,110,0); } }
@media (max-width: 640px) {
  .ci-faces { gap: 4px; }
  .ci-face { font-size: 10px; padding: 8px 2px 6px; }
  .ci-face svg { width: 32px; height: 32px; }
}


/* ---------- dashboard: Saya | Tim ---------- */
.db-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.db-cols { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.db-main { flex: 999 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.db-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.db-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.db-card.flush { padding: 0; overflow: hidden; }
.db-ch { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.db-ch h2 { margin: 0; font-size: 15px; font-weight: 700; }
.db-ch a { font-size: 12px; font-weight: 600; cursor: pointer; }
.db-sub { font-size: 12px; color: var(--muted); }
.db-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; cursor: pointer; min-width: 0; }
.db-row:hover .db-rt { color: var(--violet); }
.db-row.nb { border-top: 0; }
.db-rt { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.db-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.db-due { width: 92px; text-align: right; font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.db-bar { height: 7px; border-radius: 999px; background: var(--input-ic); overflow: hidden; }
.db-bar span { display: block; height: 100%; border-radius: 999px; background: var(--violet); }
.db-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.db-day { border-radius: 9px; padding: 6px 4px; text-align: center; background: var(--hover); cursor: pointer; }
.db-day.today { background: var(--violet-l); box-shadow: inset 0 0 0 1.5px var(--violet); }
.db-day b { font-size: 15px; display: block; }
.db-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; text-align: center; }
.db-nums b { font-size: 16px; display: block; }
.db-ql { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.db-qli { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid var(--border); border-radius: 10px; font-size: 11.5px; font-weight: 600; color: var(--text); text-align: center; min-width: 0; text-decoration: none !important; }
.db-qli:hover { border-color: var(--violet); }
.db-qli span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-qa { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.db-iss { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto 16px; gap: 10px; align-items: center; width: 100%; padding: 10px 16px; border: 0; border-top: 1px solid var(--border); background: transparent; font: inherit; font-size: 13px; color: var(--text); text-align: left; cursor: pointer; }
.db-iss:hover { background: var(--hover); }
.db-iss .db-chip { justify-self: start; }
.db-iss .i { width: 16px; height: 16px; color: var(--muted); }
.db-ppl { display: grid; grid-template-columns: 28px minmax(0, 150px) minmax(0, 1fr) 64px 84px; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.db-ppl .av { width: 28px; height: 28px; font-size: 10px; }
.db-fy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-top: 10px; }
.db-fy span { height: 26px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; background: var(--input-ic); color: var(--muted); }
.db-fy span.ok { background: var(--violet); color: #fff; }
.db-fy span.cur { background: var(--amber-l); color: #78350F; box-shadow: 0 0 0 1.5px var(--amber); }
.db-fyl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; font-size: 9.5px; color: var(--muted); text-align: center; margin-top: 3px; }
.db-ent { padding: 8px 0; border-top: 1px solid var(--border); }
.db-note { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .db-iss { grid-template-columns: minmax(0, 1fr) auto; }
  .db-iss > .db-chip:first-child, .db-iss .i { display: none; }
  .db-ppl { grid-template-columns: 28px minmax(0, 1fr) 54px 74px; }
  .db-ppl .db-bar { display: none; }
  .db-due { width: auto; }
  .db-row .pill { display: none; }
  .db-card.flush .db-ch .db-sub { display: none; }
}


/* ---------- My Workspace ---------- */
.ws-tools { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ws-tools > .ig { flex: 2 1 200px; }
.ws-tools > .ig + .ig { flex: 1 1 150px; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ws-note { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 120px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer; }
.ws-note:hover { border-color: var(--violet); }
.ws-note.pinned { box-shadow: inset 3px 0 0 var(--amber); }
.ws-note .t { font-weight: 800; font-size: 13.5px; padding-right: 34px; }
.ws-note .c { color: var(--text-2); font-size: 12px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ws-note .m { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.ws-note > .acts { position: absolute; top: 8px; right: 8px; }
.ws-note.can-drag .t { padding-left: 20px; }
.ws-grip { position: absolute; top: 9px; left: 6px; width: 22px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: grab; touch-action: none; border-radius: 6px; }
.ws-grip:hover { background: var(--hover); color: var(--text); }
.ws-grip svg.i { width: 16px; height: 16px; fill: currentColor; }
.ws-note.dragging { opacity: .55; border: 1px dashed var(--violet); }
body.ws-dragging, body.ws-dragging * { cursor: grabbing !important; user-select: none; }
.ws-drag-tip { font-size: 11.5px; color: var(--muted); margin: -4px 0 10px; display: flex; align-items: center; gap: 6px; }
.ws-drag-tip svg.i { width: 13px; height: 13px; fill: currentColor; }
.ws-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); margin-bottom: 8px; }
.ws-row:hover { border-color: var(--violet); }
.ws-row.pinned { box-shadow: inset 3px 0 0 var(--amber); }
.ws-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #fff; }
.ws-ic svg.i { width: 17px; height: 17px; }
.ws-row .t { font-weight: 700; color: var(--text); }
.ws-row .s { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sec-h { font-weight: 800; font-size: 11.5px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin: 2px 0 10px; display: flex; align-items: center; gap: 6px; }
.ws-sec-h + .ws-grid, .ws-sec-h + div { margin-bottom: 18px; }
.ws-pin { color: var(--amber); display: inline-flex; }
.ws-pin svg.i { width: 14px; height: 14px; fill: currentColor; }
.ws-cl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ws-cl-row .ig { flex: 1; }
.ws-cl-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--teal); flex: 0 0 auto; }
.ws-private { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--teal); font-weight: 700; }
.jr-day { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; background: var(--card); }
.jr-date { padding: 8px 14px; font-weight: 800; font-size: 12.5px; background: var(--hover); border-bottom: 1px solid var(--border); }
.jr-cols { display: grid; grid-template-columns: 1fr 1fr; }
.jr-col { padding: 10px 14px; min-width: 0; }
.jr-col + .jr-col { border-left: 1px solid var(--border); }
.jr-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.jr-h .i { width: 13px; height: 13px; }
.jr-mood { display: inline-flex; align-items: center; gap: 8px; }
.jr-mood svg { width: 26px; height: 26px; flex: 0 0 auto; }
.jr-t { font-size: 12.5px; color: var(--text-2); margin-top: 6px; white-space: pre-wrap; }
.jr-t span { display: block; font-size: 10.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.jr-auto { font-weight: 600; text-transform: none; letter-spacing: 0; color: #D97706; }
.jr-cell { max-width: 320px; font-size: 12.5px; white-space: pre-wrap; }
.jr-cell .jr-t:first-child { margin-top: 0; }
.jr-sum { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.jr-sum-it { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); text-align: center; }
.jr-sum-it svg { width: 26px; height: 26px; }
.jr-sum-it b { font-size: 16px; }
.jr-sum-it span { font-size: 10.5px; color: var(--muted); font-weight: 600; line-height: 1.2; }
.jr-sum-it.tot { justify-content: center; background: var(--violet-l); border-color: transparent; }
@media (max-width: 640px) {
  .jr-cols { grid-template-columns: 1fr; }
  .jr-col + .jr-col { border-left: 0; border-top: 1px solid var(--border); }
  .jr-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ws-private svg.i { width: 14px; height: 14px; }
.ws-crumb { margin-bottom: 12px; font-size: 14px; }
/* kepala halaman + kartu navigasi (WsA) */
.ws-head-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-head-r #ws-qbox { width: 260px; }
.ws-head-r .tb-pop { position: relative; }
.ws-head-r .pop { min-width: 190px; top: calc(100% + 6px); }
.ws-nav .navc { align-items: center; }
.ws-nav .navc-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--nb); color: var(--nf); }
.ws-nav .navc.on .navc-ic { background: var(--card); color: var(--violet); }
.ws-cat { width: 200px; max-width: 50%; }
/* Ringkasan */
#ws-body > .ws-home-r, #ws-body > section { margin-bottom: 16px; }
.ws-home-r { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.ws-home-r + .ws-home-r { align-items: flex-start; }
.ws-box { padding: 16px 18px; min-width: 0; }
.ws-jr-box { flex: 2 1 480px; display: flex; flex-direction: column; gap: 12px; }
.ws-cl-box { flex: 1 1 280px; }
.ws-home-m { flex: 2 1 480px; min-width: 0; }
.ws-home-a { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ws-h2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.ws-h2 h2 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ws-h2 h2 svg.i { width: 16px; height: 16px; color: var(--violet); }
.ws-h2 a { font-weight: 600; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.ws-jr-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ws-jr { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 10px; border: 1.5px dashed var(--border); min-width: 0; }
.ws-jr.on { border: 0; background: rgba(22,163,74,.09); }
.ws-jr-f svg { width: 40px; height: 40px; display: block; }
.ws-jr-e { width: 40px; height: 40px; border-radius: 50%; background: var(--hover); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ws-jr-t { color: var(--text-2); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-week { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ws-wk { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: var(--muted); }
.ws-wk-d { width: 20px; height: 20px; border-radius: 50%; }
.ws-wk-d.none { border: 1.5px dashed var(--border); }
.ws-cli { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--border); cursor: pointer; }
.ws-cli input { margin-top: 3px; accent-color: var(--violet); width: 16px; height: 16px; flex: 0 0 auto; }
.ws-cli > span .small { display: block; }
.ws-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ws-pc { padding: 12px; display: flex; gap: 10px; align-items: center; cursor: pointer; min-width: 0; }
.ws-pc:hover, .ws-rn:hover { border-color: var(--violet); }
.ws-pc > span:last-child { display: flex; flex-direction: column; }
.ws-pc-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-ty { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ws-ty svg.i { width: 16px; height: 16px; }
.ws-ty b { font-size: 9.5px; font-weight: 800; }
.ws-rn { padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 140px; cursor: pointer; min-width: 0; }
.ws-rn-c { color: var(--text-2); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ws-rn-p { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.ws-bar { flex: 1; height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
.ws-bar > span { display: block; height: 100%; background: var(--violet); }
.ws-ar { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); min-width: 0; }
.ws-ar[data-act] { cursor: pointer; }
.ws-ar-t { display: block; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .ws-head-r, .ws-head-r #ws-qbox { width: 100%; }
  .ws-head-r #ws-qbox { flex: 1 1 auto; width: auto; }
  .ws-jr-g { grid-template-columns: 1fr; }
  .ws-jr-box, .ws-cl-box, .ws-home-m, .ws-home-a { flex-basis: 100%; }
}


/* ---------- Quick Link (peluncur: cari besar, favorit, sering dibuka, kolom per kategori) ---------- */
.ql-search { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border: 1px solid var(--border-2); border-radius: 14px; background: var(--card); color: var(--muted); max-width: 720px; margin: 0 auto 20px; box-shadow: var(--shadow); }
.ql-search:focus-within { border-color: var(--violet); }
.ql-search svg.i { width: 20px; height: 20px; flex: 0 0 auto; }
.ql-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 15px; color: var(--text); background: transparent; }
.ql-kbd { font-size: 11px; border: 1px solid var(--border-2); border-radius: 5px; padding: 1px 6px; color: var(--text-2); background: var(--hover); white-space: nowrap; }
.ql-sec { margin-bottom: 20px; }
.ql-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.ql-h h2 { margin: 0; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.ql-h h2 svg.i { width: 14px; height: 14px; color: var(--amber); fill: currentColor; }
.ql-favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ql-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 12px; border-radius: 14px; color: var(--text) !important; text-decoration: none !important; text-align: center; min-width: 0; cursor: pointer; border: 0; background: transparent; font: inherit; }
.ql-tile:hover, .ql-tile.hov { background: var(--card); box-shadow: 0 0 0 1px var(--border); }
.ql-tile.dragging { opacity: .45; }
.ql-big { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 17px; box-shadow: 0 4px 10px rgba(17,24,39,.12); }
.ql-big.add { background: var(--card); color: var(--muted); border: 1.5px dashed var(--border-2); box-shadow: none; }
.ql-big.add svg.i { width: 22px; height: 22px; }
.ql-tt { font-weight: 600; font-size: 12.5px; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ql-recent { padding: 14px 16px; }
.ql-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ql-chip { display: inline-flex; gap: 8px; align-items: center; height: 36px; padding: 0 12px 0 4px; border-radius: 999px; border: 1px solid var(--border); color: var(--text) !important; text-decoration: none !important; background: var(--card); max-width: 100%; }
.ql-chip:hover { border-color: var(--violet); }
.ql-chip .ql-sm { border-radius: 50%; }
.ql-chip span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.ql-col { padding: 12px 10px; min-width: 0; }
.ql-col-h { display: flex; align-items: center; gap: 8px; padding: 2px 10px 8px; }
.ql-col-h h2 { margin: 0; font-size: 14px; font-weight: 700; }
.ql-gic { display: inline-flex; }
.ql-gic svg.i { width: 15px; height: 15px; }
.ql-row { display: flex; align-items: center; border-radius: 8px; min-width: 0; }
.ql-row:hover, .ql-row.hov { background: var(--hover); }
.ql-row.off { opacity: .6; }
.ql-lr { display: flex; gap: 10px; align-items: center; padding: 8px 4px 8px 10px; flex: 1; min-width: 0; color: var(--text) !important; text-decoration: none !important; }
.ql-lt { min-width: 0; flex: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-sm { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 10.5px; flex: 0 0 auto; }
.star-btn { border: 0; background: transparent; cursor: pointer; color: var(--border-2); padding: 4px; display: inline-flex; border-radius: 8px; flex: 0 0 auto; }
.star-btn:hover { color: var(--amber); background: var(--hover); }
.star-btn.on { color: var(--amber); }
.star-btn.on svg.i { fill: currentColor; }
.ql-row .star-btn { margin-right: 4px; }
.ql-row .star-btn svg.i { width: 14px; height: 14px; }
@media (hover: hover) { .ql-row .star-btn:not(.on) { visibility: hidden; } .ql-row:hover .star-btn { visibility: visible; } }
/* popover detail (arahkan kursor) */
.ql-pop { position: fixed; z-index: 70; width: 310px; max-width: calc(100vw - 24px); background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ql-pop .ql-sm { width: 36px; height: 36px; border-radius: 10px; font-size: 12px; }
.ql-pop-u { font-size: 12px; color: var(--muted); word-break: break-all; }
.ql-pop-a { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.ql-pop-a .btn { flex: 1; }
.ql-pop-a .icon-btn { border: 1px solid var(--border); }
.ql-pop-a .icon-btn.on { color: var(--amber); }
.ql-pop-a .icon-btn.on svg.i { fill: currentColor; }
.ql-res .ql-row { border: 1px solid var(--border); background: var(--card); margin-bottom: 6px; }
.ql-res .ql-row.first { border-color: var(--violet); }
.ql-res-d { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-pick { max-height: 60vh; overflow: auto; }
.ql-pick .ql-row { border-bottom: 1px solid var(--border); border-radius: 0; }
@media (max-width: 640px) {
  .ql-search { height: 46px; }
  .ql-search .ql-kbd { display: none; }
  .ql-favs { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}


/* ---------- Time & Attendance ---------- */
.att-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 12px; }
.att-bar > .ig { flex: 1 1 180px; max-width: 280px; }
.att-month { display: flex; align-items: center; gap: 4px; }
.att-month b { min-width: 128px; text-align: center; font-size: 14px; }
.att-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--muted); margin-left: auto; }
.att-legend span { display: inline-flex; align-items: center; gap: 5px; }
.att-head-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.att-month b { min-width: 120px; }
.att-nav { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.att-today { display: flex; gap: 10px 24px; align-items: center; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 12px; }
.att-today-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--violet-l); color: var(--violet); display: inline-flex; align-items: center; justify-content: center; margin-right: -14px; }
.att-today-n { max-width: 380px; }
.att-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.att-sum { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.att-sum-it { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); display: flex; gap: 10px; align-items: center; min-width: 0; }
.att-sab { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 10px; font-weight: 800; }
.att-sum-it b { display: block; font-size: 17px; line-height: 1.2; white-space: nowrap; }
.att-sl { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-ss { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-grid2 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.att-grid2 > .card .card-h .seg button { padding: 4px 10px; }
.att-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.att-selc { padding: 14px 16px; }
.att-sel-d { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.att-sel-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.att-sel-g > span > span { display: block; font-size: 11px; }
.att-selc .att-rep { padding: 10px 0 0; border-bottom: 0; border-top: 1px solid var(--border); margin-top: 10px; }
.att-repc { min-height: 0; display: flex; flex-direction: column; }
.att-grid2.fit .att-side { overflow: hidden; }
.att-grid2.fit .att-repc { flex: 1; overflow: hidden; }
.att-foot { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; padding: 6px 12px 10px; }
.att-foot .att-legend { margin-left: 0; }
.att-day.sel { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--text); }
.att-day.today.sel { box-shadow: inset 0 0 0 2px var(--violet), 0 0 0 2px var(--card), 0 0 0 4px var(--text); }
/* timeline */
.att-tl { padding: 4px 12px 8px; overflow-y: auto; flex: 1; min-height: 0; }
.att-tl-h, .att-tl-r { display: grid; grid-template-columns: 110px minmax(0, 1fr) 120px; gap: 10px; align-items: center; }
.att-tl-sc { position: relative; height: 18px; font-size: 10px; color: var(--muted); }
.att-tl-sc span { position: absolute; transform: translateX(-50%); }
.att-tl-r { padding: 5px 4px; border-top: 1px solid var(--border); cursor: pointer; border-radius: 6px; }
.att-tl-r:hover { background: var(--hover); }
.att-tl-r.sel { background: var(--violet-l); }
.att-tl-d { display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.25; min-width: 0; }
.att-tl-d span { font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-tl-t { position: relative; height: 14px; border-radius: 7px; background: var(--hover); }
.att-tl-w { position: absolute; top: 0; bottom: 0; background: var(--border); border-radius: 7px; }
.att-tl-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; }
.att-tl-bar.open { opacity: .55; }
.att-tl-bar.auto { background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,.45) 4px 8px); }
.att-tl-v { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.att-tl-v b { color: #0D9488; }
/* rekap */
.att-h2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.att-h2 h2 { margin: 0; font-size: 15px; font-weight: 700; }
.att-flags { margin-bottom: 16px; }
.att-flag-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.att-flag { padding: 14px; display: flex; gap: 12px; align-items: center; min-width: 0; }
.att-flag.warn { border-color: #FDBA74; }
.att-flag a { font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.att-flag-t { display: block; font-size: 12px; font-weight: 600; }
.att-teamc { overflow: hidden; }
.att-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.att-tools .att-qbox { width: 220px; }
.att-tools > .ig:not(.att-qbox) { width: 200px; }
.att-tools .att-legend { margin-left: 0; }
#att-tbl { padding: 8px 10px; }
table.att-mx { border-collapse: separate; border-spacing: 2px; font-size: 11.5px; }
table.att-mx th { font-weight: 600; color: var(--muted); text-align: center; padding: 2px 0; font-size: 10.5px; }
table.att-mx th.off { color: var(--border-2); }
table.att-mx th.td { color: var(--violet); font-weight: 800; }
table.att-mx th.l, table.att-mx td.l { text-align: left; padding-right: 10px; white-space: nowrap; }
table.att-mx td.c { width: 18px; min-width: 18px; height: 24px; border-radius: 4px; text-align: center; font-size: 9.5px; font-weight: 700; color: #fff; }
table.att-mx td.c.nil { box-shadow: inset 0 0 0 1px var(--border); }
table.att-mx th.n, table.att-mx td.n { text-align: right; padding: 0 5px; white-space: nowrap; font-size: 12px; }
table.att-mx tr.clickable { cursor: pointer; }
table.att-mx tr.clickable:hover td.l { color: var(--violet); }
.att-pn { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-mx-s { display: block; font-size: 10.5px; color: var(--muted); }
.att-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 12px 16px; }
.att-pc { padding: 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; min-width: 0; }
.att-pc:hover { border-color: var(--violet); }
.att-pst { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.att-pst span { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 8px; background: var(--hover); font-size: 10.5px; color: var(--muted); }
.att-pst b { font-size: 16px; }
@media (max-width: 1180px) { .att-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.att-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 10px 10px; }
.att-cal-h { padding: 8px 10px 4px; }
/* fit (desktop): panel setinggi sisa layar, kalender mengisi tinggi, hanya daftar laporan yang scroll */
.att-grid2.fit { align-items: stretch; }
.att-grid2.fit > .card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.att-grid2.fit .att-calw { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.att-grid2.fit .att-cal-b { flex: 1; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.att-grid2.fit .att-day { min-height: 0; }
.att-grid2.fit .att-list { flex: 1; min-height: 0; max-height: none; }
.att-dow { font-size: 10.5px; font-weight: 800; color: var(--muted); text-align: center; padding: 2px 0; }
.att-day { position: relative; min-height: 58px; border: 1px solid var(--border); border-radius: 9px; padding: 4px 6px; display: flex; flex-direction: column; gap: 1px; background: var(--card); overflow: hidden; }
.att-day.click { cursor: pointer; }
.att-day.click:hover { border-color: var(--violet) !important; }
.att-day.pad { visibility: hidden; }
.att-day.today { box-shadow: inset 0 0 0 2px var(--violet); }
.att-day .n { font-weight: 800; font-size: 12px; }
.att-day .st { font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-day .tm { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-day .tm.auto { color: #D97706; }
.att-day .ot { position: absolute; top: 4px; right: 5px; font-size: 9.5px; font-weight: 800; color: #0D9488; }
.att-list { max-height: calc(100vh - 330px); overflow: auto; }
.att-rep { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.att-rep:last-child { border-bottom: 0; }
.att-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; font-weight: 800; font-size: 10.5px; }
.att-rep .nt { font-size: 12px; margin-top: 3px; white-space: pre-wrap; color: var(--text-2); }
.att-rep a.small { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; }
.att-rep a.small svg.i { width: 13px; height: 13px; }
.att-lock { color: var(--muted); display: inline-flex; padding: 6px; }
.att-lock svg.i { width: 15px; height: 15px; }
.att-info { padding: 8px 10px; border-radius: 10px; background: var(--input-ic); font-size: 12px; color: var(--text-2); }
.att-tk { color: #EA580C; font-weight: 800; }
@media (max-width: 900px) {
  .att-grid2 { grid-template-columns: minmax(0, 1fr); }
  .att-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .att-list { max-height: none; }
}
@media (max-width: 640px) {
  .att-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .att-today { gap: 10px 16px; }
  .att-today-n { display: none; }
  .att-tl-h, .att-tl-r { grid-template-columns: 70px minmax(0, 1fr); }
  .att-tl-v { display: none; }
  .att-tools .att-qbox, .att-tools > .ig:not(.att-qbox) { width: 100%; }
  .att-flag-g { grid-template-columns: minmax(0, 1fr); }
  .att-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .att-day { min-height: 44px; padding: 3px 4px; }
  .att-day .tm, .att-day .ot { display: none; }
  .att-legend { margin-left: 0; }
}


/* ---------- Document Center ---------- */
.doc-tools { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.doc-tools > .ig { flex: 2 1 200px; }
.doc-tools > .ig + .ig { flex: 1 1 140px; max-width: 200px; }
.doc-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 15px; font-weight: 800; min-width: 0; }
.doc-crumb a { color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.doc-crumb a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.doc-crumb b { padding: 2px 4px; }
.doc-crumb svg.i { width: 14px; height: 14px; color: var(--muted); }
.doc-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.doc-folder { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer; min-width: 0; }
.doc-folder:hover { border-color: var(--violet); }
.doc-folder .fi { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.doc-folder .fi svg.i { width: 18px; height: 18px; }
.doc-folder b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-folder small { color: var(--muted); font-size: 11px; }
.doc-ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #fff; }
.doc-ic svg.i { width: 16px; height: 16px; }
.doc-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.doc-name .t-title { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-name .t-sub { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-path { font-size: 11.5px; color: var(--muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.doc-exp { font-weight: 700; font-size: 11.5px; }
.doc-sec { font-weight: 800; font-size: 11.5px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin: 0 0 8px; }
.doc-meta { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 12px; font-size: 12.5px; }
.doc-meta > span:nth-child(odd) { color: var(--muted); font-weight: 600; }
.doc-ver { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.doc-ver:last-child { border-bottom: 0; }
/* halaman depan & isi kategori (DocLive) */
.doc-head-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#doc-hqbox { width: 320px; max-width: 100%; }
.doc-short { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 18px; }
.doc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.doc-nc { align-items: center; padding: 14px; }
.doc-nc .navc-ic { width: 38px; height: 38px; border-radius: 10px; }
.doc-nc:hover { border-color: var(--violet); box-shadow: 0 2px 8px rgba(var(--violet-rgb), .12); }
.doc-nc.warn { border-color: #F5C2C2; }
.doc-h2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.doc-h2 h2 { margin: 0; font-size: 15px; font-weight: 700; }
.doc-hres { overflow: hidden; margin-bottom: 16px; }
.doc-hres-h { padding: 12px 14px; }
.doc-hr { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); cursor: pointer; min-width: 0; }
.doc-hr:hover { background: var(--hover); }
.doc-hr-t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-hr-l { color: var(--text-2); max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-sw { position: relative; min-width: 0; }
.doc-sw-btn { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; font: inherit; cursor: pointer; padding: 4px 8px 4px 0; border-radius: 10px; color: var(--text); min-width: 0; }
.doc-sw-btn .navc-ic { width: 40px; height: 40px; border-radius: 10px; }
.doc-sw-t { display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 700; }
.doc-sw-t svg.i { width: 18px; height: 18px; color: var(--muted); }
.doc-sw .pop { left: 0; right: auto; width: 320px; max-width: calc(100vw - 32px); top: calc(100% + 6px); }
.doc-sw-list { max-height: 360px; overflow: auto; }
.doc-swi.on { background: var(--violet-l); color: var(--violet-d); font-weight: 600; }
.doc-swic { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.doc-swic svg.i { width: 14px !important; height: 14px !important; color: inherit !important; }
.doc-loc { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; margin-bottom: 12px; }
.doc-loc a { cursor: pointer; font-weight: 500; }
.doc-loc svg.i { width: 14px; height: 14px; color: var(--muted); }
.doc-loc b svg.i { color: var(--muted); }
.doc-lockbar { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--hover); color: var(--text-2); font-size: 12.5px; margin-bottom: 12px; }
.doc-lockbar svg.i { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.doc-lay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.doc-lay.has-side { grid-template-columns: minmax(0, 1fr) 330px; }
.doc-lay:not(.has-side) .doc-side { display: none; }
.doc-mainc { min-width: 0; }
#doc-body tr.on td { background: var(--violet-l); }
#doc-body tr.on td:first-child { box-shadow: inset 3px 0 0 var(--violet); }
.doc-side { padding: 16px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; }
.doc-side .lbl { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.doc-prev { height: 130px; border-radius: 10px; background: var(--hover); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; }
.doc-prev .doc-ic svg.i { width: 22px; height: 22px; }
.doc-side-t { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; word-break: break-word; }
.doc-side-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; font-size: 12.5px; }
.doc-side-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.doc-side-b .btn, .doc-side-f .btn { justify-content: center; }
.doc-side-f { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.doc-side-f .btn { flex: 1; padding: 0 6px; }
.doc-side-f .btn.on { color: var(--amber); }
.doc-side-f .btn.on svg.i { fill: currentColor; }
.doc-del-b { color: var(--red) !important; }
.doc-tl { display: flex; gap: 10px; }
.doc-tl-d { display: flex; flex-direction: column; align-items: center; }
.doc-tl-d span { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: #9CA3AF; flex: 0 0 auto; }
.doc-tl-d span.on { background: var(--violet); }
.doc-tl-d i { width: 2px; flex: 1; background: var(--border); }
.doc-tl:last-child .doc-tl-d i { display: none; }
.doc-tl-b { padding-bottom: 10px; flex: 1; min-width: 0; font-size: 12.5px; }
.doc-tl-b svg.i { width: 13px; height: 13px; }
.tag-ok { background: var(--violet-l) !important; color: var(--violet-d) !important; }
/* panel detail terbuka: kolom Aksi disembunyikan (aksinya ada di panel) */
.doc-lay.has-side #doc-body .tbl th:last-child, .doc-lay.has-side #doc-body .tbl td:last-child { display: none; }
@media (max-width: 1100px) { .doc-lay.has-side { grid-template-columns: minmax(0, 1fr); } .doc-side { display: none; } }
@media (max-width: 640px) {
  .doc-head-r, #doc-hqbox { width: 100%; }
  .doc-sw-t { font-size: 18px; }
  .doc-short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-cats { grid-template-columns: minmax(0, 1fr); }
  .doc-hr-l { display: none; }
}
.doc-ver .vn { width: 34px; height: 26px; border-radius: 8px; background: var(--violet-l); color: var(--violet); font-weight: 800; font-size: 11.5px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }


/* ---------- kalender (menu) ---------- */
.cal-head-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-bar .title { font-size: 18px; font-weight: 800; margin: 0 6px 0 4px; white-space: nowrap; }
/* tombol Hari Ini setinggi tombol panah di sebelahnya (HP: tombol ikon lebih besar untuk sentuhan) */
@media (max-width: 640px) { .cal-bar > .btn-sm { height: 38px; } }
.cal-bar .sp { flex: 1; }
.cal-bar .ig { flex: 1 1 96px; min-width: 0; max-width: 170px; }
.cal-bar .ig .ig-ic { display: none; }
.cal-ly { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.cal-lyb { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font: inherit; font-size: 12px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.cal-lyb .i { width: 13px; height: 13px; }
.cal-lyb.on { border-color: var(--violet); background: var(--violet-l); color: var(--violet-d); }
.cal-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend .i { width: 12px; height: 12px; }
.cal-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cal-legend i.sq { width: 10px; height: 10px; border-radius: 3px; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.cal-layout > .panel:first-child { padding: 0; overflow: hidden; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dows { border-bottom: 1px solid var(--border); background: var(--th); }
.cal-dow { padding: 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.cal-cell { min-height: 118px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell:hover { background: var(--hover); }
.cal-cell.other { background: var(--th); }
.cal-cell.other .cal-num { color: #CBD5E1; }
html[data-theme="dark"] .cal-cell.other .cal-num { color: #475569; }
.cal-cell.off { background: var(--th); }
.cal-cell.off .cal-num { color: var(--muted); }
.cal-cell.hol { background: var(--red-l); }
.cal-cell.hol .cal-num { color: var(--red); }
.cal-cell.sel { box-shadow: inset 0 0 0 2px var(--violet); background: var(--violet-l); }
.cal-cell.drop { box-shadow: inset 0 0 0 2px var(--violet); background: var(--violet-l2); }
.cal-ch { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.cal-cnt { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cal-num { font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px; }
.cal-num.today { background: var(--violet); color: #fff !important; }
.cal-hol { display: block; font-size: 10px; font-weight: 700; color: var(--red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev { display: flex; align-items: center; gap: 5px; font-size: 11.5px; line-height: 1.3; padding: 3px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; min-width: 0; background: var(--card); border: 1px solid var(--border); color: var(--text); font-weight: 500; }
.cal-ev .t { overflow: hidden; text-overflow: ellipsis; }
.cal-ev .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.cal-ev .hm { font-weight: 700; color: var(--violet); }
.cal-ev.late { background: var(--red-l); border-color: transparent; color: #991B1B; }
html[data-theme="dark"] .cal-ev.late { color: #FCA5A5; }
.cal-ev.done { background: var(--hover); border-color: transparent; color: var(--muted); text-decoration: line-through; }
.cal-ev.tax { background: #FFFBEB; border: 1px dashed #E7B458; color: #78350F; font-weight: 600; }
html[data-theme="dark"] .cal-ev.tax { background: rgba(245, 158, 11, .12); color: #FCD34D; }
.cal-ev.tax.ok { opacity: .6; text-decoration: line-through; }
.cal-ev[draggable="true"] { cursor: grab; }
.cal-ev.dragging { opacity: .45; }
.cal-more { font-size: 11px; color: var(--violet); font-weight: 700; padding: 0 6px; }
/* Minggu: 7 kolom tinggi, semua item tampil */
.cal-week .cal-cell { min-height: 420px; }
/* Agenda */
.cal-ag { padding: 6px 16px 14px; }
.cal-ag-d { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.cal-ag-d:last-child { border-bottom: 0; }
.cal-ag-d.sel .cal-ag-n { background: var(--violet); color: #fff; }
.cal-ag-n { width: 46px; flex: 0 0 auto; text-align: center; border-radius: 10px; background: var(--hover); padding: 4px 0; }
.cal-ag-n b { display: block; font-size: 17px; line-height: 1.2; }
.cal-ag-n span { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; }
.cal-ag-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cal-ag-l .cal-ev { font-size: 12.5px; padding: 5px 8px; }
/* panel kanan */
.cal-side .lbl { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.cal-side .d { font-size: 18px; font-weight: 800; margin: 2px 0 2px; }
.cal-side .hol-banner { display: flex; gap: 8px; align-items: center; background: var(--red-l); color: var(--red); font-weight: 700; font-size: 12.5px; border-radius: 10px; padding: 8px 10px; margin: 10px 0 0; }
.cal-side .hol-banner .i { width: 15px; height: 15px; flex: 0 0 auto; }
.cal-task { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 10px; cursor: pointer; background: var(--card); display: flex; flex-direction: column; gap: 6px; }
.cal-task:hover { border-color: var(--violet); }
.cal-task.cal-taxc { border-style: dashed; border-color: #E7B458; cursor: default; }
.cal-task.late { border-color: #F5C2C2; background: rgba(220, 38, 38, .04); }
/* tugas yang diklik dari popup kalender di header */
.cal-task.hl { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-l); }
.cal-task .h { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cal-task .t { font-weight: 700; font-size: 13px; }
.cal-task .m { font-size: 12px; color: var(--muted); }
.cal-task .tm { justify-content: flex-start; margin-top: 0; }
.cal-tax { display: flex; gap: 10px; align-items: center; margin-top: 8px; min-width: 0; }
.cal-tax-d { width: 40px; text-align: center; border: 1px dashed #E7B458; background: #FFFBEB; border-radius: 8px; padding: 2px 0; flex: 0 0 auto; color: #78350F; }
html[data-theme="dark"] .cal-tax-d { background: rgba(245, 158, 11, .12); color: #FCD34D; }
.cal-tax-d span { display: block; font-size: 10px; font-weight: 700; }
.cal-tax b { display: block; }
.cal-sec { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 14px; }
.cal-hint { display: flex; gap: 6px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: var(--hover); font-size: 12px; color: var(--muted); margin-top: 14px; }
.cal-hint .i { width: 14px; height: 14px; margin-top: 2px; flex: 0 0 auto; }
.cal-side { position: sticky; top: 76px; padding: 16px; }
/* fit (desktop lebar, fitPanes): kalender setinggi layar & tidak ikut scroll, hanya panel kanan scroll */
.cal-layout.fit { align-items: stretch; }
.cal-layout.fit > .panel:first-child { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cal-layout.fit #cal-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cal-layout.fit .cal-days { flex: 1; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.cal-layout.fit .cal-cell { min-height: 0; overflow: hidden; }
.cal-layout.fit .cal-ag { flex: 1; min-height: 0; overflow-y: auto; }
.cal-layout.fit .cal-week .cal-cell { overflow-y: auto; }
.cal-layout.fit .cal-side { position: static; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1180px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .cal-side { position: static; }
}
@media (max-width: 640px) {
  .cal-cell { min-height: 64px; padding: 3px; }
  .cal-ev { font-size: 0; padding: 0; height: 6px; border: 0; }
  .cal-ev .dot, .cal-ev .t, .cal-ev .hm { display: none; }
  .cal-ev:not(.late):not(.tax):not(.done) { background: var(--violet); }
  .cal-ev.late { background: var(--red); }
  .cal-ev.tax { background: #E7B458; }
  .cal-cnt, .cal-hol { display: none; }
  .cal-more { padding: 0; font-size: 10px; white-space: nowrap; }
  .cal-more span { display: none; }
  .cal-dow { padding: 8px 2px; text-align: center; letter-spacing: 0; }
  .cal-week .cal-cell { min-height: 140px; }
  .cal-legend { display: none; }
  .cal-ag-l .cal-ev { font-size: 12.5px; height: auto; padding: 5px 8px; border: 1px solid var(--border); }
  .cal-ag-l .cal-ev .dot, .cal-ag-l .cal-ev .t, .cal-ag-l .cal-ev .hm { display: inline; }
  .cal-ag-l .cal-ev .dot { display: inline-block; }
}


/* ---------- Closing Control ---------- */
.cl-al { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 10px; margin-bottom: 8px; font-size: 12.5px; }
.cl-al .i { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.cl-al.ok { background: var(--teal-l); color: #0F766E; } .cl-al.w { background: var(--amber-l); color: #92400E; }
.cl-al.b { background: var(--red-l); color: #B91C1C; } .cl-al.i { background: var(--blue-l); color: #1E40AF; }
html[data-theme="dark"] .cl-al.ok { color: #5EEAD4; } html[data-theme="dark"] .cl-al.w { color: #FCD34D; }
html[data-theme="dark"] .cl-al.b { color: #FCA5A5; } html[data-theme="dark"] .cl-al.i { color: #93C5FD; }
.cl-tools { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cl-tools > .ig { flex: 1 1 220px; max-width: 360px; }
.cl-rep td, .cl-rep th { padding: 5px 10px; }
.cl-rep td.n, .cl-rep th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-rep th.n a { color: inherit; cursor: pointer; }
.cl-rep tr.h td { font-weight: 700; }
.cl-rep tr.t td { font-weight: 800; background: var(--hover); }
.cl-rep tr.g td { font-weight: 800; background: var(--violet-l); }
.cl-rep tr.x td { opacity: .5; }
.cl-rep tr.ctx-on td { background: var(--violet-l); }
.cl-rep td.l:first-child { min-width: 230px; }
/* rekap: kolom akun tetap di kiri saat tabel digeser ke samping */
.cl-rk td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
.cl-rk tr.t td:first-child, .cl-rk tbody tr:hover td:first-child { background: var(--hover); }
.cl-rk th:first-child { position: sticky; left: 0; z-index: 3; }
.cl-rep .cd { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.cl-rep .neg { color: var(--red); }
.cl-rep .tag { font-size: 10.5px; padding: 1px 6px; margin-left: 4px; }
.cl-man { color: var(--violet); font-style: italic; border-bottom: 1px dotted var(--violet); }
.cl-omz td.warn { color: #D97706; font-weight: 700; cursor: help; }
.cl-omz td.lk:hover { background: var(--violet-l); color: var(--violet); }
.cl-ren { color: var(--violet); font-weight: 800; cursor: help; }
.cl-w { color: #D97706; display: inline-flex; vertical-align: middle; margin-left: 4px; cursor: help; }
.cl-w .i { width: 14px; height: 14px; }
.cl-mst { display: block; font-size: 10px; font-weight: 600; opacity: .8; }
.cl-mst .i { width: 10px; height: 10px; vertical-align: -1px; }
/* Neraca: Harta & Kewajiban/Modal berdampingan bila panel cukup lebar, selain itu bertumpuk */
.cl-bs { display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: 14px; }
.cl-side-h { font-weight: 800; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.cl-det { margin: 0 0 10px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; font-size: 12.5px; }
.cl-det summary { cursor: pointer; font-weight: 700; }
.cl-det ul { margin: 6px 0; padding-left: 18px; }
.cl-stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.cl-stat > div { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; background: var(--card); }
.cl-stat b { display: block; font-size: 19px; }
.cl-stat span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.cl-sec { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--card); }
.cl-sec-h { display: flex; gap: 10px; align-items: center; padding: 8px 14px; background: var(--hover); font-weight: 800; }
.cl-sec-h .progress { width: 110px; }
.cl-it { display: grid; grid-template-columns: minmax(0, 1fr) 170px 140px 150px; gap: 10px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); cursor: pointer; }
.cl-it:hover { background: var(--hover); }
.cl-it .t { font-weight: 700; }
.cl-late { color: var(--red); font-weight: 700; }
.cl-sign { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cl-sign.ready { border: 2px solid var(--violet); }
.cl-chk { max-height: 40vh; overflow: auto; margin-bottom: 12px; }
.cl-lock { display: inline-flex; align-items: center; gap: 5px; background: var(--navy); color: #fff; border-radius: 20px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; }
html[data-theme="dark"] .cl-lock { background: #334155; }
.cl-lock .i { width: 13px; height: 13px; }
.cl-fq { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 10.5px; font-weight: 800; }
.cl-fq.M { background: #EEF2FF; color: #4338CA; } .cl-fq.Q { background: var(--teal-l); color: var(--teal); }
.cl-fq.S { background: var(--amber-l); color: #B45309; } .cl-fq.Y { background: var(--red-l); color: var(--red); }
.cl-log { font-size: 12px; }
.cl-log div { padding: 6px 0; border-bottom: 1px solid var(--border); }
.cl-omz th, .cl-omz td { padding: 5px 8px; white-space: nowrap; }
.cl-omz td.n { text-align: right; font-variant-numeric: tabular-nums; }
.cl-omz th.br { text-align: center; border-left: 2px solid var(--border-2); }
.cl-omz td.b0 { border-left: 2px solid var(--border-2); }
.cl-omz .sticky { position: sticky; left: 0; background: var(--card); z-index: 1; font-weight: 700; }
.cl-omz thead .sticky { background: var(--th); z-index: 4; }
/* filter & pencarian Rekap Omzet */
.clf-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.clf-bar .ig { min-height: 32px; }
.clf-bar .clf-q { width: 220px; }
.clf-bar .clf-sel { width: 230px; }
.clf-bar .btn.on { background: var(--violet-l); color: var(--violet); border-color: var(--violet); }
.clf-ms { position: relative; }
.clf-ms .btn { gap: 6px; }
.clf-pop { width: 270px; left: 0; right: auto; top: 38px; padding: 8px; }
.clf-pq { width: 100%; height: 32px; border: 1px solid var(--border-2); border-radius: 8px; padding: 0 10px; background: var(--input); color: var(--text); }
.clf-pa { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--violet); margin: 6px 2px; }
.clf-pa span { cursor: pointer; }
.clf-list { max-height: 260px; overflow: auto; }
.clf-list label { display: flex; gap: 8px; align-items: center; padding: 5px 6px; font-size: 13px; border-radius: 6px; cursor: pointer; font-weight: 500; }
.clf-list label:hover { background: var(--hover); }
.clf-tg { gap: 6px; font-weight: 500; white-space: nowrap; }
@media (max-width: 640px) { .clf-bar .clf-q, .clf-bar .clf-sel { width: 100%; } }
.cl-omz tr.tot td { font-weight: 800; background: var(--hover); }
.cl-omz tr.tot td.sticky { background: var(--hover); }
.cl-omz td.ctx-on { background: var(--violet-l); }
.cl-omz .kons { background: var(--violet-l); }
.cl-pct-ok { color: var(--teal); font-weight: 700; } .cl-pct-lo { color: var(--red); font-weight: 700; }
.cl-hd-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cl-hd-btns.one { flex-wrap: nowrap; flex: 0 0 auto; }
.cl-omz tr.tot .itip { vertical-align: middle; }
@media (max-width: 640px) { .cl-hd-btns.one { flex-wrap: wrap; flex: 1 1 auto; } }
/* pemilih periode: tahun buku + bulan + rekap */
#cl-pp { width: 250px; }
#cl-pp .pp-pop { width: 280px; }
#cl-pp .pp-m small { display: block; font-size: 9.5px; font-weight: 600; opacity: .7; line-height: 1; }
#cl-pp .pp-lk { position: absolute; left: 4px; top: 3px; color: var(--teal); }
#cl-pp .pp-m.on .pp-lk { color: #fff; }
#cl-pp .pp-lk .i { width: 10px; height: 10px; }
.cl-pq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.cl-pq .btn { justify-content: center; padding: 6px 4px; }
.cl-pq .btn.on { border-color: var(--violet); color: var(--violet); background: var(--violet-l); }
.cl-pq .wide { grid-column: span 2; }
.cl-pnote { margin-top: 8px; font-size: 11px; color: var(--muted); }
/* riwayat perubahan baris */
.cl-hist div { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.cl-hist div:last-child { border-bottom: 0; }
.cl-hist .ch { font-weight: 700; }
@media (max-width: 900px) { .cl-bs { grid-template-columns: minmax(0, 1fr); } .cl-it { grid-template-columns: 1fr; } .cl-stat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { #cl-pp { width: 100%; } #cl-pp .pp-pop { right: auto; left: 0; } }
/* ---------- kepala, kartu navigasi & Ringkasan (mockup ClFinal) ---------- */
.cl-head-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cl-head-r > .btn.on { border-color: var(--violet); color: var(--violet); background: var(--violet-l); }
.cl-nav { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.cl-nav .navc { padding: 10px 12px; }
.cl-nav .navc-ic { display: none; }
.cl-nav .navc.on { box-shadow: inset 0 0 0 1px var(--violet); }
.cl-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--border); overflow: hidden; padding: 0; margin-bottom: 16px; }
.cl-step { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: var(--card); min-width: 0; }
.cl-dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 12px; font-weight: 700; background: var(--hover); color: var(--muted); }
.cl-dot svg.i { width: 14px; height: 14px; }
.cl-step.done .cl-dot { background: var(--violet); color: #fff; }
.cl-step.act .cl-dot { background: #FEF4E3; color: #92400E; box-shadow: inset 0 0 0 2px #D97706; }
.cl-home { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cl-home-m { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cl-home-a { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
#clh-check { overflow: hidden; }
.cl-hh { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px 10px; }
.cl-hh h2, .cl-box h2 { margin: 0; font-size: 15px; font-weight: 700; }
.cl-hbar { height: 6px; background: var(--border); margin: 0 16px 12px; border-radius: 999px; overflow: hidden; }
.cl-hbar span { display: block; height: 100%; background: var(--violet); }
.cl-hg { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: var(--th); border-top: 1px solid var(--border); font-weight: 700; font-size: 12.5px; }
.cl-hr { display: grid; grid-template-columns: minmax(0, 1fr) 140px 160px 112px; gap: 12px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 13px; }
.cl-hr-t { font-weight: 600; color: var(--text) !important; cursor: pointer; text-decoration: none !important; }
.cl-hr-t:hover { color: var(--violet) !important; }
.cl-hr-p { display: flex; gap: 7px; align-items: center; min-width: 0; }
.cl-hr-p span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-hf { padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 600; }
.cl-hf a { cursor: pointer; }
.cl-yr { padding: 0 4px 14px; }
.cl-yleg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.cl-yleg span { display: inline-flex; align-items: center; gap: 5px; }
.cl-yleg i { width: 12px; height: 12px; border-radius: 3px; }
.cl-ywrap { overflow-x: auto; padding: 0 12px; }
table.cl-ym { border-collapse: separate; border-spacing: 4px; width: 100%; font-size: 12px; }
table.cl-ym th { font-weight: 600; color: var(--muted); text-align: center; padding: 2px 0; }
table.cl-ym th.q { color: var(--text-2); }
table.cl-ym th.cur { color: var(--text); font-weight: 800; }
table.cl-ym .l { text-align: left; color: var(--text); font-weight: 600; white-space: nowrap; padding-right: 10px; }
.cl-yc { display: flex; align-items: center; justify-content: center; height: 30px; min-width: 40px; width: 100%; border-radius: 7px; font: inherit; font-weight: 600; font-size: 11px; border: 0; cursor: pointer; }
.cl-yc.cur { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--text); }
.cl-yc.f, .cl-yleg i.f { background: var(--violet); color: #fff; }
.cl-yc.a, .cl-yleg i.a { background: #CCEFEA; color: #115E59; }
.cl-yc.w, .cl-yleg i.w { background: #FDE7B8; color: #78350F; }
.cl-yc.n, .cl-yleg i.n { background: var(--hover); color: var(--muted); }
html[data-theme="dark"] .cl-yc.a, html[data-theme="dark"] .cl-yleg i.a { background: rgba(13, 148, 136, .28); color: #99F6E4; }
html[data-theme="dark"] .cl-yc.w, html[data-theme="dark"] .cl-yleg i.w { background: rgba(245, 158, 11, .25); color: #FCD34D; }
.cl-rks { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; padding: 0 16px; }
.cl-rk { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); font: inherit; text-align: left; cursor: pointer; color: var(--text); min-width: 0; }
.cl-rk:hover { border-color: var(--violet); }
.cl-rks-s, .cl-chip { align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.cl-chip { margin-top: 0; }
.cl-rks-s.f, .cl-chip.f { background: var(--violet-l); color: var(--violet-d); }
.cl-rks-s.w, .cl-chip.w { background: #FEF4E3; color: #92400E; }
.cl-rks-s.n { background: var(--hover); color: var(--muted); }
.cl-box { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.cl-box h2 { margin-bottom: 4px; }
.cl-rd { display: flex; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; }
.cl-rd > span:first-child { display: inline-flex; flex: 0 0 auto; }
.cl-rd svg.i { width: 16px; height: 16px; }
.cl-rd .ok { color: var(--violet); }
.cl-rd .wait, .cl-rd .warn { color: #D97706; }
.cl-rd .info { color: var(--muted); }
.cl-rd .small { white-space: nowrap; }
.cl-sbtn { justify-content: center; margin-top: 8px; width: 100%; }
.cl-sbtn:disabled { opacity: .45; cursor: not-allowed; }
.cl-kp { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
.cl-kp b { font-size: 15px; }
.cl-kp-c { display: block; font-size: 11.5px; font-weight: 600; }
.cl-lg { padding: 7px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
@media (max-width: 760px) {
  .cl-hr { grid-template-columns: minmax(0, 1fr) auto; }
  .cl-hr-p { display: none; }
  .cl-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------- Closing Control: impor PDF / Excel ---------- */
.cl-pv td, .cl-pv th { padding: 3px 8px; }
.cl-pv td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-pv select { height: 26px; padding: 0 4px; font-size: 12px; border: 1px solid var(--border-2); border-radius: 7px; background: var(--input); color: var(--text); max-width: 180px; }
.cl-pv tr.off td { opacity: .45; }
.cl-pv tr.t td { font-weight: 700; background: var(--hover); }
.cl-pv tr.h td.nm { font-weight: 700; }
.cl-pv .cd { color: var(--muted); font-size: 11.5px; }
.cl-pv .neg { color: var(--red); }
.cl-pv-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.cl-imp-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; }
.cl-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cl-sum span { border: 1px solid var(--border); border-radius: 10px; padding: 5px 10px; font-size: 12px; font-weight: 700; }
.cl-sum b { font-size: 15px; margin-right: 4px; }
.cl-dsec { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 6px; }


/* ---------- Closing Control: Klasifikasi Omzet & tab Rekap Omzet per jenis / per CR ---------- */
.cl-otabs { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cl-otabs .chip { margin: 0; }
.cl-cls td, .cl-cls th { padding: 5px 8px; white-space: nowrap; }
.cl-cls td.n { text-align: right; font-variant-numeric: tabular-nums; }
.cl-cls td.lk { cursor: default; }
.cl-cls td.fs { white-space: normal; min-width: 140px; max-width: 190px; word-break: break-word; }
.cl-mon th { white-space: normal; vertical-align: bottom; }
.cl-mon td.l.small { white-space: normal; min-width: 120px; }
.cl-cls td.lk:hover { background: var(--violet-l); color: var(--violet); }
.cl-cls td.picked, .cl-cls td.picked .warn { background: var(--violet-l); color: var(--violet); }
.cl-cls tr.tot td { font-weight: 800; background: var(--hover); }
.cl-cls tr.grp td { font-weight: 800; background: var(--violet-l); }
.cl-cls tr.lr td { font-style: italic; color: var(--muted); }
.cl-cls .sticky { position: sticky; left: 0; background: var(--card); z-index: 1; }
.cl-cls thead .sticky { background: var(--th); z-index: 3; }
.cl-cls tr.tot td.sticky, .cl-cls tr.grp td.sticky { background: inherit; }
.cl-cls .warn, .cl-pv .warn, .cl-sum .warn, .cls-tabs .warn { color: #D97706; font-weight: 700; }
.cl-tx td, .cl-tx th { padding: 4px 8px; font-size: 12.5px; }
.cl-tx td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-tx tr.ctx-on td { background: var(--violet-l); }
.cl-tx tr.cl-ign td { color: var(--muted); text-decoration: line-through; }
.cl-tx tr.cl-ign td .tag { text-decoration: none; }
.btn-warn { background: var(--amber-l); color: #B45309; border: 1px solid #F5C77A; }
html[data-theme="dark"] .btn-warn { color: #FCD34D; border-color: #6B4E16; }
.cl-hint-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
/* editor aturan: kartu per aturan berisi syarat "jika" & "kecuali" */
.cls-rule { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--card); }
.cls-rule-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 800; }
.cls-rule-h .grow { min-width: 0; }
.cls-lbl { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 6px 0 4px; }
.cls-cond { display: grid; grid-template-columns: 120px 175px 54px 54px minmax(0, 1fr) 28px; gap: 6px; align-items: center; margin-bottom: 5px; }
.cls-cond select, .cls-cond input, .cls-rule-h select, .cls-other select { height: 32px; border: 1px solid var(--border-2); border-radius: 8px; padding: 0 8px; background: var(--input); color: var(--text); font-size: 12.5px; min-width: 0; width: 100%; }
.cls-cond .ab, .cls-rule-h .ab { width: 28px; height: 28px; }
.cls-cond.noab { grid-template-columns: 120px 175px minmax(0, 1fr) 28px; }
.cls-cond.noab input.ca, .cls-cond.noab input.cb { display: none; }
.cls-rules { counter-reset: clsr; }
.cls-rule { counter-increment: clsr; }
.cls-rule-h .grow::after { content: ' ' counter(clsr); }
.cls-rule:not(:has(.cls-conds[data-kind="exc"] .cls-cond)) .cls-lbl.exc { display: none; }
.cls-add { font-size: 12px; font-weight: 700; color: var(--violet); cursor: pointer; margin-right: 12px; }
.cls-other { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--border-2); border-radius: 12px; }
.cls-other select { max-width: 320px; }
/* dialog impor: setinggi layar, hanya isi tab yang digulir */
.modal.cls-imp { height: calc(100vh - 40px); }
.modal.cls-imp .modal-b { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.cls-top { flex: 0 0 auto; }
.cls-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.cls-tabs .chip { margin: 0; }
.cls-panel { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.cls-panel .cl-pv th { position: sticky; top: 0; }
.cls-panel.cards { border: 0; }
.cls-cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; align-items: end; }
.cls-cfg .field { margin-bottom: 8px; }
.cls-prof1 { display: flex; align-items: center; gap: 6px; height: 38px; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.cls-prof1 b { color: var(--text); }
.cls-rnote { grid-column: 1 / -1; color: #B45309; margin: -4px 0 6px; }
.cls-rnote:empty { display: none; }
/* strip ringkasan (impor, uji, konfirmasi, terapkan ulang) */
.cls-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 2px 0 10px; }
.cls-strip > div { background: var(--card); padding: 8px 14px; min-width: 0; }
.cls-strip small { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cls-strip b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cls-strip .w small, .cls-strip .w b { color: #D97706; }
.cls-tabs .cnt { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--input-ic); color: var(--muted); font-size: 11px; font-weight: 800; text-align: center; }
.cls-tabs .cnt.w { background: #F59E0B; color: #fff; }
.cls-rv { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.cls-rv-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cls-rv ol { margin: 8px 0; padding-left: 20px; font-size: 13px; }
/* peringatan */
.clw-g { border: 1px solid var(--border); border-radius: 12px; margin: 10px 0; overflow: hidden; }
.clw-g summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; background: var(--amber-l); list-style: none; }
.clw-g summary::-webkit-details-marker { display: none; }
.clw-g summary .grow { font-size: 13px; color: #B45309; font-weight: 600; }
.clw-hint { padding: 8px 14px 0; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.clw-t { margin: 0; }
.clw-t td.n, .clw-t th { text-align: right; font-variant-numeric: tabular-nums; }
.clw-t th.l { text-align: left; }
.clw-t td.warn { color: #D97706; font-weight: 700; }
#clw-f .cnt { margin-left: 4px; font-weight: 800; opacity: .7; }
/* kartu hasil per jenis */
.cls-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cls-card { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--card); box-shadow: var(--shadow); }
.cls-card.un { background: var(--amber-l); border-color: #F5C77A; }
.cls-card-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; }
.cls-card-h .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.cls-card-h .pc { margin-left: auto; color: var(--muted); font-weight: 800; }
.cls-card b.v { display: block; font-size: 20px; margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
.cls-bar { height: 6px; border-radius: 6px; background: var(--hover); overflow: hidden; }
.cls-bar span { display: block; height: 100%; border-radius: 6px; }
.cls-card small { display: block; margin-top: 6px; color: var(--muted); font-weight: 600; }
@media (max-width: 640px) {
  .cls-cond, .cls-cond.noab { grid-template-columns: 1fr 1fr; }
  .cls-cond input.ct { grid-column: span 2; }
  .cls-cards { grid-template-columns: 1fr 1fr; }
  .modal.cls-imp { height: 94vh; }
}


/* ---------- Tax Control ---------- */
.tx-head-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tx-head-r .ig { width: 230px; }
#tx-pp { width: 210px; }
#tx-pp .pp-pop { width: 290px; }
.tx-pq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.tx-pq .btn { justify-content: center; padding: 6px 4px; }
.tx-pq .btn.on, .tx-chip.on { border-color: var(--violet); color: var(--violet); background: var(--violet-l); }
.tx-pq .wide { grid-column: span 2; }
.tx-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.tx-bar .ig { min-height: 32px; }
.tx-bar .ig.q { width: 210px; }
.tx-bar .ig.q.sq { width: auto; flex: 1 1 100px; min-width: 100px; max-width: 220px; }
.tx-bar.more { background: var(--hover); }
/* baris "Filter lain": semua pilihan satu baris, lebar dibagi rata (layar sempit boleh turun baris) */
@media (min-width: 901px) {
  .tx-bar.more { flex-wrap: nowrap; }
  .tx-bar.more > .ig { flex: 1 1 0; min-width: 0; max-width: 260px; }
  .tx-bar.more > .ig select { flex: 1 1 auto; min-width: 0; width: 100%; text-overflow: ellipsis; }
}
.tx-tbl th.w { white-space: normal; min-width: 84px; max-width: 118px; line-height: 1.25; }
.tx-tbl.stk td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
.tx-tbl.stk tr.tot td:first-child { background: var(--hover); }
.tx-tbl.stk th:first-child { position: sticky; left: 0; z-index: 3; }
.tx-bar .sp { flex: 1; }
/* tabel panel kanan: flow = ikut scroll panel (judul kolom menempel di bawah kepala panel), flowx = tabel lebar
 * (geser ke samping di tabelnya sendiri); tx-fix = panel tidak scroll, tabel daftar mengisi sisa tinggi panel */
#tx-detail .tbl-wrap.flow { overflow: visible; max-height: none !important; min-height: 0; }
#tx-detail .tbl-wrap.flow .tbl th { top: var(--tx-top, 0px); }
#tx-detail .tbl-wrap.flowx { overflow-x: auto; overflow-y: hidden; max-height: none !important; min-height: 0; }
.sub-layout.fit > #tx-detail.tx-fix { overflow: hidden; }
.sub-layout.tx-one { grid-template-columns: minmax(0, 1fr); }
.tx-ents { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.tx-ents .seg { flex-wrap: wrap; }
.tx-nav { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.tx-nav .navc { padding: 10px 12px; }
.tx-nav .navc-ic { display: none; }
.tx-head-r > .btn.on { border-color: var(--violet); color: var(--violet); background: var(--violet-l); }
.tx-ov button { padding: 4px 10px; }
.tbl-wrap.auto:has(> .tx-tbl) { min-height: 0; }
/* scrollbar tipis (abu-abu, ungu saat diarahkan) */
#tx-detail, #tx-detail *, #tx-list, .tbl-wrap:has(> .tx-tbl) { scrollbar-width: thin; }
#tx-detail::-webkit-scrollbar, #tx-detail ::-webkit-scrollbar, #tx-list::-webkit-scrollbar, .tbl-wrap:has(> .tx-tbl)::-webkit-scrollbar { width: 6px; height: 6px; }
#tx-detail::-webkit-scrollbar-thumb, #tx-detail ::-webkit-scrollbar-thumb, #tx-list::-webkit-scrollbar-thumb, .tbl-wrap:has(> .tx-tbl)::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 6px; }
#tx-detail::-webkit-scrollbar-thumb:hover, #tx-detail ::-webkit-scrollbar-thumb:hover, #tx-list::-webkit-scrollbar-thumb:hover, .tbl-wrap:has(> .tx-tbl)::-webkit-scrollbar-thumb:hover { background: var(--violet); }
html[data-theme="dark"] #tx-detail::-webkit-scrollbar-thumb, html[data-theme="dark"] #tx-detail ::-webkit-scrollbar-thumb, html[data-theme="dark"] #tx-list::-webkit-scrollbar-thumb, html[data-theme="dark"] .tbl-wrap:has(> .tx-tbl)::-webkit-scrollbar-thumb { background: #475569; }
/* kepala panel: judul + (i) satu baris */
.tx-ch { min-height: 56px; }
.tx-ttl { display: flex; align-items: center; font-size: 16px; min-width: 0; }
.tx-ch-r { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tx-tool { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 32px; flex-wrap: wrap; }
.tx-tool .grow { display: flex; align-items: center; font-weight: 700; font-size: 13px; color: var(--text-2); min-width: 0; }
/* tab satu baris: jarak dirapatkan; bila tetap tidak muat, tab digeser ke samping (tanpa turun baris) */
.tx-tabs.tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 0; }
.tx-tabs .tab { padding: 9px 10px; gap: 6px; }
/* kepala panel kanan (judul, tab, filter) menempel saat isi panel di-scroll (txFitTables) */
.sub-layout.fit > #tx-detail .tx-stick { position: sticky; z-index: 6; background: var(--card); }
.sub-layout.fit > #tx-detail .tx-stick.tx-bar.more, .sub-layout.fit > #tx-detail .tx-stick.tx-bar[style*="background"] { background: var(--hover); }
.sub-layout.fit > #tx-detail .tx-stick.tabs { margin: 0; padding: 0 16px; }
.tx-lt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* sel tabel ringkas */
.tx-tbl .who { white-space: nowrap; font-size: 12px; }
.tx-tbl .who small { display: block; color: var(--muted); font-size: 11px; }
.tx-tbl th.mw, .tx-tbl td.mw { min-width: 170px; }
.tx-tbl th.w2 { white-space: normal; min-width: 90px; max-width: 130px; line-height: 1.25; }
.ig .ig-suf { display: flex; align-items: center; }
select.tx-in { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 26px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; }
.tx-diff { font-size: 12px; margin-top: 2px; }
.tx-diff span { color: var(--muted); }
.tx-bar .ig { width: auto; min-width: 150px; max-width: 260px; }
.tx-bar .ig select { flex: 0 1 auto; }
details.tx-guide { margin-bottom: 12px; }
details.tx-guide > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--violet); display: inline-flex; align-items: center; gap: 6px; }
details.tx-guide > .tx-help { margin-top: 8px; }
.tx-tabs { margin: 0 16px; }
.tx-pad { padding: 12px 16px; }
/* Transaksi: pita masa & chip saringan (mockup TxTrx) */
.tx-bar.tx-masa { background: #FFFBF0; border-bottom: 1px solid #F5E3B8; color: #78350F; }
.tx-bar.tx-masa.final { background: var(--violet-l); border-color: transparent; color: var(--violet-d); }
.tx-bar.tx-masa.review { background: #F5F3FF; border-color: #DDD6FE; color: #5B3FD6; }
html[data-theme="dark"] .tx-bar.tx-masa { background: rgba(245, 158, 11, .1); color: #FCD34D; border-color: transparent; }
.tx-masa-c { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(245, 158, 11, .25); white-space: nowrap; }
.tx-masa.final .tx-masa-c { background: var(--violet); color: #fff; }
.tx-masa.review .tx-masa-c { background: #DDD6FE; color: #4C1D95; }
.tx-masa-t { flex: 1 1 220px; font-size: 12.5px; min-width: 0; }
.tx-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tx-fc { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--card); font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.tx-fc.on { border-color: var(--violet); background: var(--violet-l); color: var(--violet-d); }
.tx-fc b.r { color: var(--red); }
.tx-fc b.a { color: #B45309; }
/* Ringkasan (mockup TxFinal) */
.tx-kstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--border); overflow: hidden; padding: 0; margin-bottom: 16px; }
.tx-k { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: var(--card); border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--text); min-width: 0; }
.tx-k:hover { background: var(--hover); }
.tx-k > b { font-size: 22px; line-height: 1.25; }
.tx-k b.tx-dn { color: var(--red); }
.tx-warn { color: #B45309; }
.tx-home { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 8px; }
.tx-home-m { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tx-home-a { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tx-hh { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px 8px; }
.tx-hh h2, .tx-box2 h2 { margin: 0; font-size: 15px; font-weight: 700; }
.tx-hh a { font-size: 12px; font-weight: 600; cursor: pointer; }
.tx-iss-c { overflow: hidden; }
.tx-iss-r { display: grid; grid-template-columns: 92px minmax(0, 1fr) 44px 18px; gap: 10px; align-items: center; width: 100%; padding: 10px 16px; border: 0; border-top: 1px solid var(--border); background: var(--card); font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--text); }
.tx-iss-r:hover { background: var(--hover); }
.tx-iss-r b.n { text-align: right; font-size: 15px; }
.tx-iss-r > svg.i { width: 16px; height: 16px; color: var(--muted); }
.tx-msleg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.tx-msleg span { display: inline-flex; gap: 5px; align-items: center; }
.tx-msleg i, .tx-ms span { border-radius: 3px; }
.tx-msleg i { width: 12px; height: 12px; }
.tx-msleg i.f, .tx-ms .f { background: var(--violet); }
.tx-msleg i.r, .tx-ms .r { background: #C4B5FD; }
.tx-msleg i.o, .tx-ms .o { background: #FCD34D; }
.tx-msleg i.n, .tx-ms .n { background: var(--border); }
.tx-ents-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tx-ent-c { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tx-ent-n { display: block; font-size: 14px; }
.tx-mtag { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.tx-mtag.f { background: var(--violet-l); color: var(--violet-d); }
.tx-mtag.r { background: #EFEBFF; color: #5B3FD6; }
.tx-mtag.o { background: #FEF4E3; color: #92400E; }
.tx-mtag.n { background: var(--hover); color: var(--muted); }
.tx-ent-st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tx-ent-st > div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; background: var(--hover); min-width: 0; }
.tx-ent-st b { font-size: 15px; }
.tx-ent-st span { font-size: 11px; color: var(--muted); }
.tx-ms { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.tx-ms span { height: 16px; }
.tx-box2 { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.tx-due { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.tx-dd { width: 42px; flex: 0 0 auto; text-align: center; border-radius: 8px; padding: 3px 0; line-height: 1.15; background: var(--hover); }
.tx-dd b { display: block; font-size: 15px; }
.tx-dd span { font-size: 10px; }
.tx-dd.soon { background: #FEF4E3; color: #92400E; }
.tx-imp { padding: 7px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
@media (max-width: 760px) { .tx-iss-r { grid-template-columns: 80px minmax(0, 1fr) 36px; } .tx-iss-r > svg.i { display: none; } .tx-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.tx-kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tx-tile { border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; background: var(--card); min-width: 0; }
.tx-tile.click { cursor: pointer; } .tx-tile.click:hover { border-color: var(--violet); }
.tx-tile small { display: flex; gap: 4px; align-items: center; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.tx-tile b { display: block; font-size: 18px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-tile .s { font-size: 11.5px; color: var(--muted); }
.tx-tile .na { font-size: 13px; color: var(--muted); font-weight: 600; }
.tx-up { color: var(--teal); } .tx-dn { color: var(--red); }
.tx-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 12px; }
.tx-box { border: 1px solid var(--border); border-radius: 12px; background: var(--card); overflow: hidden; }
.tx-box-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 12.5px; }
.tx-box-b { padding: 8px 12px; }
.tx-hb { display: grid; grid-template-columns: minmax(80px, 140px) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 4px; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.tx-hb:hover { background: var(--hover); }
.tx-hb .lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tx-hb .tr { height: 10px; background: var(--input-ic); border-radius: 4px; overflow: hidden; }
.tx-hb .tr span { display: block; height: 100%; background: var(--violet); border-radius: 0 4px 4px 0; }
.tx-hb .v { font-variant-numeric: tabular-nums; color: var(--text-2); }
.tx-trend { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 8px 4px 0; border-bottom: 1px solid var(--border-2); }
.tx-tc { flex: 1; position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; }
.tx-tc .bar { width: 62%; background: var(--violet); border-radius: 4px 4px 0 0; min-height: 0; }
.tx-tc .tg { position: absolute; left: 10%; right: 10%; height: 0; border-top: 2px solid var(--navy); }
html[data-theme="dark"] .tx-tc .tg { border-color: #E5E7EB; }
.tx-tl { display: flex; gap: 6px; padding: 4px 4px 0; }
.tx-tl span { flex: 1; text-align: center; font-size: 10.5px; color: var(--muted); }
.tx-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-2); font-weight: 600; margin-left: auto; }
.tx-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; background: var(--violet); margin-right: 4px; vertical-align: middle; }
.tx-legend i.ln { height: 0; border-top: 2px solid var(--navy); background: none; }
html[data-theme="dark"] .tx-legend i.ln { border-color: #E5E7EB; }
.tx-iss td { font-size: 12.5px; }
.tx-tbl td.n, .tx-tbl th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tx-tbl td, .tx-tbl th { padding: 6px 8px; }
.tx-tbl tr.tot td { font-weight: 800; background: var(--hover); }
.tx-tbl tr.off td { opacity: .5; }
.tx-tbl tr.clickable:hover td { background: var(--violet-l); }
.tx-tbl th.grp { font-size: 10.5px; letter-spacing: .03em; }
.tx-neg { color: var(--red); }
.tx-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.tx-pill.g { background: var(--teal-l); color: #0F766E; } .tx-pill.a { background: var(--amber-l); color: #92400E; } .tx-pill.r { background: var(--red-l); color: #B91C1C; }
.tx-pill.b { background: var(--blue-l); color: #1E40AF; } .tx-pill.v { background: var(--violet-l); color: var(--violet); } .tx-pill.n { background: var(--input-ic); color: var(--text-2); }
.tx-pill.k { background: var(--navy); color: #fff; }
html[data-theme="dark"] .tx-pill.g { color: #5EEAD4; } html[data-theme="dark"] .tx-pill.a { color: #FCD34D; } html[data-theme="dark"] .tx-pill.r { color: #FCA5A5; } html[data-theme="dark"] .tx-pill.b { color: #93C5FD; }
.tx-pill .i { width: 11px; height: 11px; }
.tx-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 14px; margin-bottom: 12px; }
.tx-info div small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.tx-info div b { font-weight: 600; word-break: break-word; }
.tx-sec { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 0 6px; }
.tx-log > div { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.tx-log > div:last-child { border-bottom: 0; }
.tx-diff .i { width: 12px; height: 12px; vertical-align: -2px; color: var(--muted); }
.tx-prog { display: flex; align-items: center; gap: 6px; min-width: 120px; }
.tx-prog .progress { flex: 1; }
.tx-prog .progress > span.a { background: var(--amber); } .tx-prog .progress > span.r { background: var(--red); }
.tx-formula { font-family: Consolas, 'Courier New', monospace; font-size: 12px; background: var(--input-ic); border-radius: 6px; padding: 2px 6px; word-break: break-word; }
.tx-mono input, .tx-mono textarea { font-family: Consolas, 'Courier New', monospace; }
.tx-help { font-size: 12px; color: var(--text-2); background: var(--hover); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.tx-help code { font-family: Consolas, 'Courier New', monospace; font-size: 11.5px; background: var(--input-ic); padding: 0 4px; border-radius: 4px; }
.tx-in { height: 30px; padding: 0 8px; border: 1px solid var(--border-2); border-radius: 8px; background: var(--input); color: var(--text); width: 100%; font-size: 12.5px; }
.tx-in.n { text-align: right; }
.ig .ig-suf { padding: 0 10px; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.tx-in:focus { outline: none; border-color: var(--violet); }
.tx-err { color: var(--red); font-weight: 700; }
.tx-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.tx-cal > div { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 86px; padding: 4px; font-size: 11.5px; min-width: 0; }
.tx-cal .h { min-height: 0; text-align: center; font-weight: 800; color: var(--muted); background: var(--hover); padding: 6px 2px; }
/* nama hari kalender ikut menempel di bawah kepala panel */
.sub-layout.fit > #tx-detail .tx-cal .h { position: sticky; top: var(--tx-top, 0px); z-index: 3; }
.tx-cal .d { font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.tx-cal .out { background: var(--hover); opacity: .6; }
.tx-cal .today .d { color: var(--violet); }
.tx-cal .hol .d { color: var(--red); }
.tx-ev { display: block; border-radius: 6px; padding: 2px 5px; margin-bottom: 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; border-left: 3px solid var(--muted); background: var(--input-ic); }
.tx-ev.done { border-color: var(--teal); } .tx-ev.late { border-color: var(--red); background: var(--red-l); } .tx-ev.proc { border-color: var(--blue); } .tx-ev.none { border-color: #9CA3AF; }
.tx-mat td input { width: 100%; }
.tx-rule { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
/* kartu ringkasan (impor, pratinjau) */
.tx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.tx-st { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-left: 4px solid var(--st, #9CA3AF); border-radius: 12px; padding: 10px 12px; background: var(--card); min-width: 0; }
.tx-st .ico { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--stl, var(--input-ic)); color: var(--st, var(--muted)); }
.tx-st .ico .i { width: 16px; height: 16px; }
.tx-st .tx-sv { display: block; font-size: 19px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-st .tx-sv[title] { cursor: help; }
.tx-st .tx-sl { display: block; font-size: 12px; font-weight: 700; color: var(--text-2); }
.tx-st.g { --st: var(--teal); --stl: var(--teal-l); } .tx-st.a { --st: #D97706; --stl: var(--amber-l); } .tx-st.r { --st: var(--red); --stl: var(--red-l); }
.tx-st.b { --st: var(--blue); --stl: var(--blue-l); } .tx-st.v { --st: var(--violet); --stl: var(--violet-l); } .tx-st.k { --st: var(--navy); --stl: var(--input-ic); }
.tx-st.zero { opacity: .55; }
html[data-theme="dark"] .tx-st.k { --st: #CBD5E1; }
/* kolom pajak di daftar transaksi */
.tx-tx { display: grid; grid-template-columns: auto auto; gap: 1px 10px; justify-content: end; align-items: center; font-size: 11.5px; }
.tx-tx .k { color: var(--muted); text-align: right; white-space: nowrap; }
.tx-tx .v { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tx-tx .x { grid-column: 1 / -1; text-align: right; color: var(--red); font-weight: 700; }
.tx-tx .v.tx-wait, .tx-wait { color: var(--muted); font-weight: 600; font-style: italic; }
/* usulan pasangan bukti potong (tab Faktur & Bukti Potong) */
.tx-sug { margin-top: 6px; border: 1px dashed #D97706; border-radius: 10px; padding: 6px 8px; background: var(--amber-l); }
.tx-sug-h { display: flex; align-items: center; gap: 4px; font-weight: 700; color: #B45309; font-size: 11.5px; margin-bottom: 4px; }
.tx-sug-h .i { width: 13px; height: 13px; }
.tx-sug-it { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0; border-top: 1px solid rgba(217,119,6,.2); }
.tx-sug-it:first-of-type { border-top: 0; }
.tx-sug-it .grow { min-width: 160px; flex: 1; }
.tx-ck { display: inline-flex; align-items: center; gap: 3px; color: #D97706; font-size: 11px; font-weight: 700; white-space: nowrap; }
.tx-ck .i { width: 13px; height: 13px; }
.tx-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tx-checks label { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; font-size: 12.5px; }
@media (max-width: 1100px) { .tx-kpis.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tx-kpis, .tx-kpis.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tx-head-r, .tx-head-r .ig, #tx-pp { width: 100%; } .tx-bar .ig, .tx-bar .ig.q, .tx-bar .ig.q.sq { width: 100%; max-width: none; } .tx-bar .ig select { flex: 1 1 auto; } #tx-pp .pp-pop { right: auto; left: 0; }
  .tx-cal > div { min-height: 60px; } }


/* ---------- Data Tools ---------- */
.dt-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
@media (max-width: 640px) { .dt-sides { grid-template-columns: minmax(0, 1fr); } }
.dt-side { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--card); }
.dt-side-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dt-badge { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; flex: 0 0 auto; background: var(--sc); }
.dt-badge.sm { width: 18px; height: 18px; border-radius: 6px; font-size: 11px; vertical-align: -3px; }
/* warna tetap per sumber A..E (badge, kartu "Tidak ada di ...") */
.dts0 { --sc: var(--violet); --st: var(--violet); --stl: var(--violet-l); }
.dts1 { --sc: var(--teal); --st: var(--teal); --stl: var(--teal-l); }
.dts2 { --sc: var(--blue); --st: var(--blue); --stl: var(--blue-l); }
.dts3 { --sc: #D97706; --st: #D97706; --stl: var(--amber-l); }
.dts4 { --sc: #DB2777; --st: #DB2777; --stl: #FCE7F3; }
html[data-theme="dark"] .dts4 { --stl: rgba(219,39,119,.18); }
/* kepala bagian (1 Sumber data, 2 Cara mencocokkan) */
.dt-sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.dt-sec-h .sp { flex: 1; }
/* nama sumber = judul kartu, bisa diketik langsung */
.dt-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; cursor: text; border-radius: 8px; padding: 2px 6px; }
.dt-name input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 800; color: var(--text); padding: 4px 0; outline: none; }
.dt-name .i { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; }
.dt-name:hover, .dt-name:focus-within { background: var(--hover); }
.dt-name:focus-within .i { color: var(--violet); }
.dt-side .dz { margin-bottom: 10px; }
.dt-side.dz-over { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-l); }
/* ringkasan satu baris setelah Cocokkan */
/* Data Matching (mockup DmFinal): pengaturan kiri, hasil kanan */
.dtm-lay { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.dtm-set { flex: 0 1 340px; min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.dtm-res { flex: 999 1 520px; min-width: 0; overflow: hidden; }
.dtm-set .dt-sides { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dtm-set .dt-side { padding: 10px; border-radius: 10px; }
.dtm-set .dt-side .dz { margin-bottom: 8px; }
.dtm-set .dt-sec-h { margin-bottom: 0; }
.dtm-how { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.dtm-seg { display: flex; }
.dtm-seg button { flex: 1; }
.dtm-set .dt-opts { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 0; font-size: 12.5px; }
.dtm-tol { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dtm-tol .ig { width: 130px; }
.dtm-set .dt-cmp-base .ig { width: 100%; }
.dtm-rh { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.dtm-rh h2 { margin: 0; font-size: 15px; font-weight: 700; }
.dtm-q { width: 240px; max-width: 100%; }
.dtm-res .dt-res-h { padding: 0 16px 14px; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.dtm-res .dt-stats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.dtm-res .dt-wrap { border: 0; border-radius: 0; max-height: 64vh; }
.dtm-res .dt-tbl td:last-child, .dtm-res .dt-tbl th:last-child { min-width: 112px; }
.dtm-res .dt-tbl { table-layout: fixed; width: 100%; }
.dtm-res .dt-tbl th, .dtm-res .dt-tbl td { padding-left: 8px; padding-right: 8px; overflow-wrap: anywhere; }
.dtm-set { flex-basis: 310px; }
.dtm-res > .alert, .dtm-res > .cl-al { margin: 10px 16px; }
.dtm-res > .small { padding: 10px 16px; }
@media (max-width: 760px) { .dtm-set { flex-basis: 100%; } }
.dt-cmp { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 13px; }
.dt-cmp-l { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.dt-cmp-base { display: inline-flex; align-items: center; gap: 8px; }
.dt-cmp-base .ig { width: 240px; }
.dt-tbl th small { display: block; font-weight: 500; opacity: .75; font-size: 11px; }
.dt-pat { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: var(--violet); color: #fff; border-radius: 6px; padding: 1px 5px; }
.dt-dv { display: block; font-size: 11px; color: var(--muted); }
.dt-dv.bad { color: var(--red); font-weight: 700; }
.dt-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.dt-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; background: var(--hover); }
.dt-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.dt-file > svg.i { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; }
.dt-file small { color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.dt-file button { border: 0; background: transparent; cursor: pointer; color: var(--muted); display: inline-flex; padding: 2px; border-radius: 50%; }
.dt-file button:hover { color: var(--red); background: var(--card); }
.dt-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dt-run { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.dt-run .dt-opts { margin-top: 0; flex: 1; min-width: 0; }
.dt-run > .btn { flex: 0 0 auto; }
@media (max-width: 640px) { .dt-run { flex-direction: column; align-items: stretch; } }
.dt-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; font-size: 13px; }
.dt-opts label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.dt-opts input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--violet); }
.dt-opts .ig { width: 170px; }
.dt-side { display: flex; flex-direction: column; }
.dt-side .dt-grid2 { margin-top: auto; }
.dt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; flex: 1; min-width: 0; }
.dt-stat { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-left: 4px solid var(--st, #9CA3AF); border-radius: 12px; padding: 10px 12px; background: var(--card); cursor: pointer; min-width: 0; transition: box-shadow .15s, border-color .15s; }
.dt-stat:hover { box-shadow: var(--shadow); }
.dt-stat.on { border-color: var(--st, var(--violet)); box-shadow: 0 0 0 2px var(--stl, var(--violet-l)); }
.dt-stat .ico { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--stl, var(--input-ic)); color: var(--st, var(--muted)); }
.dt-stat .ico .i { width: 16px; height: 16px; }
.dt-stat b { display: block; font-size: 20px; line-height: 1.15; }
.dt-stat .l1 { display: block; font-size: 12px; font-weight: 700; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-stat .l2 { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.dt-stat.k { --st: var(--navy); --stl: var(--input-ic); } .dt-stat.g { --st: var(--teal); --stl: var(--teal-l); } .dt-stat.a { --st: #D97706; --stl: var(--amber-l); }
.dt-stat.v { --st: var(--violet); --stl: var(--violet-l); } .dt-stat.b { --st: var(--blue); --stl: var(--blue-l); }
.dt-stat.zero { opacity: .6; }
.dt-res-h { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
@media (max-width: 760px) { .dt-res-h { flex-direction: column; } }
/* PDF Tools: kartu navigasi + Periksa per dokumen (mockup PdfFinal / PdfCheck) */
.dtp-nav { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.dtp-cnt { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; background: #FEF4E3; color: #92400E; font-size: 11px; font-weight: 700; margin-left: 4px; }
.dtp-chkb { color: #92400E !important; border-color: #F5C77E !important; background: #FFFBF0 !important; }
.dtp-chkv { display: flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dtp-docs { flex: 0 1 240px; min-width: 0; padding: 8px; border-right: 1px solid var(--border); max-height: 70vh; overflow-y: auto; }
.dtp-prev { flex: 1 1 380px; min-width: 0; padding: 12px 14px; background: var(--hover); }
.dtp-vals { flex: 1 1 260px; min-width: 0; padding: 12px 14px; border-left: 1px solid var(--border); max-height: 70vh; overflow-y: auto; }
.dtp-ch { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 4px 8px; font-size: 12.5px; flex-wrap: wrap; }
.dtp-doc { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; color: var(--text); }
.dtp-doc:hover { background: var(--hover); }
.dtp-doc.on { background: var(--violet-l); }
.dtp-doc svg.i { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--violet); }
.dtp-doc.w svg.i { color: #D97706; }
.dtp-doc-t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtp-paper { background: var(--card); border-radius: 4px; box-shadow: 0 2px 10px rgba(17, 24, 39, .12); padding: 18px 20px; max-height: 62vh; overflow: auto; font-size: 11.5px; line-height: 1.6; }
.dtp-ln { white-space: pre-wrap; }
.dtp-ln span.h, .dtp-leg i.h { background: var(--violet-l); box-shadow: inset 0 -2px 0 var(--violet); border-radius: 2px; }
.dtp-leg { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.dtp-leg i { width: 10px; height: 10px; display: inline-block; }
.dtp-fv { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; margin-bottom: 4px; }
.dtp-fv b { font-size: 12.5px; overflow-wrap: anywhere; }
.dtp-fv.miss { background: #FFFBF0; box-shadow: inset 0 0 0 1px #F5C77E; }
.dtp-fv.miss b { color: #92400E; font-weight: 600; }
html[data-theme="dark"] .dtp-fv.miss { background: rgba(245, 158, 11, .1); }
@media (max-width: 760px) { .dtp-docs, .dtp-vals { flex-basis: 100%; border: 0; max-height: none; } }
.dtp-lay > .card { min-width: 0; }
.dtp-pad { padding: 14px 16px; }
.dtp-res { border-top: 1px solid var(--border); }
/* di panel kanan: langkah 1 & 2 sebaris, langkah 3 (kotak unggah) selebar panel */
.dtp-lay .dt-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.dtp-lay .dt-steps > .dt-step:nth-child(3) { grid-column: 1 / -1; }
@media (max-width: 1100px) { .dtp-lay .dt-steps { grid-template-columns: minmax(0, 1fr); } }
.dt-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 1100px) { .dt-steps { grid-template-columns: minmax(0, 1fr); } }
.dt-step { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--card); min-width: 0; }
.dt-step-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.dt-step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dt-step .dt-modes { display: flex; }
.dt-step .dt-modes button { flex: 1; }
.dt-tpl-row { display: flex; gap: 8px; align-items: center; }
.dt-tpl-row .ig { flex: 1; min-width: 0; }
.dt-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dt-chip { border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 700; background: var(--card); cursor: pointer; color: var(--text-2); }
.dt-chip b { font-size: 15px; margin-right: 4px; color: var(--text); }
.dt-chip.on { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet-l, #EEEAFE); }
.dt-tbl td.n, .dt-tbl th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-tbl td.k { white-space: nowrap; }
.dt-tbl td.miss { background: var(--hover); color: var(--muted); }
.dt-tbl td .i { width: 15px; height: 15px; color: var(--teal); vertical-align: -3px; }
.dt-st { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: normal; }
.dt-st.match { background: var(--teal-l); color: var(--teal); }
.dt-st.diff { background: var(--amber-l); color: #B45309; }
.dt-st.miss { background: var(--blue-l); color: var(--blue); }
.dt-wrap { max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.dt-wrap .tbl thead th { position: sticky; top: 0; z-index: 1; }
.dt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.dt-modes { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.dt-modes button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: var(--card); padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-2); }
.dt-modes button.on { background: var(--violet); color: #fff; }
.dt-fe td { padding: 4px; }
.dt-fe input, .dt-fe select { width: 100%; height: 32px; border: 1px solid var(--border-2); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 12.5px; background: var(--input); color: var(--text); }
.dt-fe-wrap { max-height: 52vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }


/* ---------- PDF Tools > Susun PDF ---------- */
.spf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.spf-bar .sp { flex: 1; }
.spf-bar .ig { width: 220px; }
.spf-bar .dz.sm { padding: 6px 12px; border-width: 2px; }
.spf-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }
.spf-bar2 { background: var(--hover); }
.spf-bar2 .ig { width: 200px; background: var(--card); border-radius: 10px; }
.spf-info { padding: 10px 16px 0; font-size: 12px; color: var(--muted); display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; min-width: 0; }
.spf-info .lg { display: inline-flex; align-items: center; gap: 5px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spf-info .lg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.spf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; padding: 14px 16px 18px; align-content: start; }
.spf-empty { padding: 16px; }
.spf-empty .dz { min-height: 220px; flex-direction: column; }
.spf-pg { position: relative; border: 2px solid transparent; border-radius: 12px; padding: 6px 6px 8px; background: var(--card); cursor: pointer; user-select: none; transition: border-color .12s, box-shadow .12s; }
.spf-pg:hover { border-color: var(--border-2); }
.spf-pg.on { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-l); }
.spf-pg.drag { opacity: .35; }
.spf-pg.ins-l::before, .spf-pg.ins-r::after { content: ''; position: absolute; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: var(--violet); }
.spf-pg.ins-l::before { left: -10px; } .spf-pg.ins-r::after { right: -10px; }
.spf-th { height: 168px; display: flex; align-items: center; justify-content: center; background: var(--hover); border-radius: 8px; overflow: hidden; padding: 10px; }
.spf-th img { -webkit-user-drag: none; user-select: none; max-width: 100%; max-height: 100%; box-shadow: 0 1px 4px rgba(0,0,0,.18); background: #fff; transition: transform .15s; }
.spf-th .blank { width: 70%; height: 90%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; }
.spf-ft { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; }
.spf-no { font-weight: 800; }
.spf-src { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; color: #fff; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spf-ck { position: absolute; z-index: 2; top: 10px; left: 10px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border-2); background: var(--card); display: flex; align-items: center; justify-content: center; }
.spf-pg.on .spf-ck { background: var(--violet); border-color: var(--violet); color: #fff; }
.spf-ck .i { width: 13px; height: 13px; }
.spf-act { position: absolute; z-index: 2; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.spf-pg:hover .spf-act, .spf-pg.on .spf-act { opacity: 1; }
.spf-act button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); padding: 0; }
.spf-act button:hover { color: var(--violet); border-color: var(--violet); }
.spf-act button.del:hover { color: var(--red); border-color: var(--red); }
.spf-act .i { width: 14px; height: 14px; }
.spf-act button.spf-mv { display: none; }
/* layar sentuh: tombol aksi selalu tampil, di bawah gambar (tidak menutupi kotak centang), plus geser kiri / kanan */
@media (hover: none) { .spf-act { opacity: 1; top: auto; bottom: 34px; left: 8px; right: 8px; justify-content: center; } .spf-act button.spf-mv { display: inline-flex; } }
.spf-prev { display: flex; justify-content: center; background: var(--hover); border-radius: 10px; padding: 10px; max-height: 72vh; overflow: auto; }
.spf-prev canvas { max-width: 100%; height: auto; box-shadow: 0 2px 8px rgba(0,0,0,.2); background: #fff; }
.spf-split label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.spf-split label:has(input:checked) { border-color: var(--violet); background: var(--violet-l); }
.spf-split input { margin-top: 3px; accent-color: var(--violet); }
@media (max-width: 640px) { .spf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; } .spf-bar .ig { width: 100%; } .spf-th { height: 150px; } }


.wh-box { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin: 14px 16px; background: var(--hover); }
.wh-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 0; }
.wh-l { width: 124px; font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.wd-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wd-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border-2); background: var(--card); font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; user-select: none; }
.wd-chip input { display: none; }
.wd-chip.on { background: var(--violet); border-color: var(--violet); color: #fff; }
.wh-time { display: flex; align-items: center; gap: 8px; }
.wh-time .ig { width: 130px; }
.hol-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; padding: 0 16px; }
.tbl tr.hol-past td { opacity: .55; }
.qt-today { display: flex; gap: 10px; align-items: flex-start; margin: 12px 16px; padding: 10px 12px; border-left: 3px solid var(--violet); background: var(--violet-l); border-radius: 0 12px 12px 0; }
.qt-today > .i { width: 18px; height: 18px; color: var(--violet); flex: 0 0 auto; }
.qt-t { font-style: italic; font-size: 13px; margin: 2px 0; }
.qt-cell { max-width: 520px; font-size: 12.5px; }
.tbl tr.qt-now td { background: var(--violet-l); }
@media (max-width: 640px) { .wh-l { width: 100%; } }
.color-sw { width: 16px; height: 16px; border-radius: 5px; display: inline-block; vertical-align: middle; border: 1px solid rgba(0,0,0,.08); }
.md-icon { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex: 0 0 auto; }
.md-icon svg.i { width: 15px; height: 15px; }
.md-icon.lg { width: 44px; height: 44px; border-radius: 12px; }
.md-icon.lg svg.i { width: 22px; height: 22px; }


/* ---------- role & permissions (tata letak sub-menu ada di css.html) ---------- */
.perm-tbl td, .perm-tbl th { text-align: center; }
/* 9 kolom aksi + Semua muat di laptop 1366 tanpa scroll ke kanan */
.perm-tbl td:not(:first-child), .perm-tbl th:not(:first-child) { padding-left: 6px; padding-right: 6px; }
.perm-tbl td:first-child { text-align: left; font-weight: 600; }
.perm-tbl input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--violet); cursor: pointer; }
.perm-tbl .na { color: var(--border-2); }
.perm-tbl tr.pm-grp td { background: var(--hover); font-weight: 800; }
.perm-tbl tr.pm-sub td:first-child { padding-left: 30px; font-weight: 500; }


.tg-evs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.field .tg-ev { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer; font-weight: 400; }
.tg-ev input { width: 18px; height: 18px; accent-color: var(--violet); margin-top: 1px; flex: 0 0 auto; }
.tg-ev b { display: block; font-size: 13px; }
.tg-ev small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.tg-help { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--blue-l); color: var(--text-2); font-size: 13px; }
.tg-help svg.i { color: var(--blue); margin-top: 1px; }
.field .an-target label { display: inline-flex; align-items: center; gap: 6px; margin: 0 18px 0 0; font-weight: 600; cursor: pointer; }
.an-target input { accent-color: var(--violet); }
.an-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; padding: 2px; }
.field .an-u { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--card); font-weight: 400; cursor: pointer; }
.an-u input { width: 16px; height: 16px; accent-color: var(--violet); flex: 0 0 auto; }
.an-u b { display: block; font-size: 12.5px; }
.an-u small { display: block; color: var(--muted); font-size: 11px; }
.mood-lbls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mood-lbl { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.mood-lbl svg { width: 30px; height: 30px; }
.mood-lbl input { width: 100%; height: 30px; border: 1px solid var(--border-2); border-radius: 8px; padding: 0 6px; font: inherit; font-size: 12px; text-align: center; background: var(--input); color: var(--text); }
@media (max-width: 640px) { .mood-lbls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sto-meta { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 12px; font-size: 12.5px; margin-bottom: 12px; }
.sto-meta > span:nth-child(odd) { color: var(--muted); font-weight: 600; }
.db-bar { height: 6px; border-radius: 6px; background: var(--hover); overflow: hidden; margin: 6px 0 2px; max-width: 320px; }
.db-bar span { display: block; height: 100%; border-radius: 6px; }
.arc-yr td.n b { font-size: 13px; }
.arc-yr th { white-space: normal; line-height: 1.3; }
.arc-st { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.arc-st.on { background: var(--teal-l); color: var(--teal); }
.arc-st.ar { background: var(--violet-l, #EEEAFE); color: var(--violet); }
.an-hist-h { font-weight: 700; font-size: 13.5px; margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--border); }
/* Identitas & Logo */
.set-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.set-h b { font-size: 14px; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.logo-slot { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; background: var(--card); }
.logo-pv { height: 120px; display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; text-align: center;
  background-color: #F8FAFC; background-image: linear-gradient(45deg, #EEF2F6 25%, transparent 25%, transparent 75%, #EEF2F6 75%), linear-gradient(45deg, #EEF2F6 25%, transparent 25%, transparent 75%, #EEF2F6 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }
html[data-theme="dark"] .logo-pv { background-color: #1B2438; background-image: none; }
.logo-pv.dark { background: #0B1120; }
.logo-pv img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; }
.logo-pv.cover { padding: 0; }
.logo-pv.cover img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.logo-pv .i { width: 16px; height: 16px; }
.logo-sb { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--border); }
.logo-sb b { font-size: 13px; }
.logo-use { display: flex; flex-wrap: wrap; gap: 4px; }
.logo-use span { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--violet-l); color: var(--violet-d); }
.logo-sb .dz { flex: 1; min-width: 0; padding: 7px 10px; }
.logo-sb .dz-t { font-size: 12.5px; }
.logo-sb .btn-sm { padding: 5px 9px; }
.logo-prev { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.lp-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; background: var(--card); }
.lp-card.dark { background: #0B1120; border-color: #0B1120; }
.lp-h { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--muted); }
.lp-tab { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px 8px 0 0; background: #DEE1E6; color: #111827; font-size: 12px; min-width: 0; }
.lp-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-login { display: flex; height: 92px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.lp-l { flex: 0 0 38%; background: linear-gradient(160deg, #0B3D3F, #0F766E); padding: 8px; box-sizing: border-box; background-position: center; }
.lp-l img { width: 22px; height: 22px; border-radius: 6px; display: block; }
.lp-r { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; min-width: 0; background: #fff; }
.lp-r img { width: 88px; max-width: 100%; display: block; }
.lp-r i { height: 7px; border-radius: 3px; background: #E5E7EB; }
.lp-r i.b { height: 11px; background: var(--violet); margin-top: 2px; }
.logo-hit { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.logo-hit:first-of-type { border-top: 0; }
.logo-hit img { width: 64px; height: 36px; object-fit: contain; border-radius: 6px; background: var(--input-ic); flex: 0 0 auto; }


/* ---------- panel Bantuan (tombol ? di topbar) ---------- */
.help-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw; background: var(--card); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 80; display: flex; flex-direction: column; }
.help-back { position: fixed; inset: 0; background: rgba(17,24,39,.35); z-index: 79; }
.hp-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.hp-h .t { font-weight: 800; font-size: 16px; flex: 1; }
.hp-h .hp-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--violet-l); color: var(--violet); display: inline-flex; align-items: center; justify-content: center; }
.hp-h .hp-ic .i { width: 18px; height: 18px; }
.hp-tabs { display: flex; gap: 6px; padding: 10px 16px 0; }
.hp-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--text-2); background: var(--card); }
.hp-tab.on { background: var(--violet); border-color: var(--violet); color: #fff; }
.hp-tab .i { width: 15px; height: 15px; }
.hp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 16px; overscroll-behavior: contain; }
.hp-sec { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); margin: 14px 0 8px; text-transform: uppercase; }
.hp-topic { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; background: var(--card); }
.hp-topic.here { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet-l); }
.hp-th { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-weight: 700; font-size: 13.5px; }
.hp-th .grow { min-width: 0; }
.hp-th .i { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.hp-tb { padding: 0 12px 12px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.hp-tb ol, .hp-tb ul { margin: 6px 0 0; padding-left: 20px; }
.hp-tb li { margin: 3px 0; }
.hp-tb .hp-lbl { font-weight: 800; font-size: 12px; color: var(--text); margin-top: 10px; }
.hp-tips li::marker { color: var(--violet); }
.hp-go { margin-top: 10px; }
.hp-msgs { display: flex; flex-direction: column; gap: 10px; }
.hp-m { max-width: 92%; border-radius: 14px; padding: 9px 12px; font-size: 13px; line-height: 1.55; word-wrap: break-word; }
.hp-m.u { align-self: flex-end; background: var(--violet); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.hp-m.a { align-self: flex-start; background: var(--hover); color: var(--text); border-bottom-left-radius: 4px; }
.hp-m.a p { margin: 0 0 6px; }
.hp-m.a p:last-child { margin-bottom: 0; }
.hp-m.a ol, .hp-m.a ul { margin: 4px 0 6px; padding-left: 20px; }
.hp-m.err { background: var(--red-l); color: var(--red); }
.hp-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hp-votes { display: flex; gap: 6px; margin-top: 8px; align-items: center; font-size: 11.5px; color: var(--muted); }
.hp-vote { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 3px 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 11.5px; color: var(--text-2); }
.hp-vote .i { width: 13px; height: 13px; }
.hp-vote.on { border-color: var(--violet); color: var(--violet); background: var(--violet-l); }
.hp-dots span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); margin-right: 4px; animation: hpdot 1s infinite; }
.hp-dots span:nth-child(2) { animation-delay: .2s; } .hp-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes hpdot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.hp-ex { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.hp-ex button { text-align: left; border: 1px solid var(--border); background: var(--card); border-radius: 10px; padding: 8px 10px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-2); }
.hp-ex button:hover { border-color: var(--violet); color: var(--violet); }
.hp-foot { border-top: 1px solid var(--border); padding: 10px 16px 12px; }
.hp-in { display: flex; gap: 8px; align-items: flex-end; }
.hp-in textarea { flex: 1; min-width: 0; resize: none; height: 58px; border: 1px solid var(--border-2); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; background: var(--input); color: var(--text); }
.hp-in .btn { flex: 0 0 auto; height: 38px; }
.hp-left { font-size: 11.5px; color: var(--muted); margin-top: 6px; display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 640px) { .tb-help { display: none; } .help-panel { width: 100vw; border-left: 0; } .hp-left span:first-child { display: none; } }


/* js_diag : bilah kemajuan Periksa Semua Menu & modal Laporkan Tampilan */
.diag-crawl { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 300; background: var(--navy, #111827); color: #fff; border-radius: 14px; padding: 10px 14px;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; font-size: 12.5px; max-width: calc(100vw - 24px); }
.diag-crawl .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diag-crawl button { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 8px; padding: 5px 10px; font-weight: 700; cursor: pointer; }
.diag-shot { width: 100%; max-height: 42vh; object-fit: contain; border: 1px solid var(--border); border-radius: 10px; background: var(--hover); display: block; margin-bottom: 10px; }
/* Settings > Diagnostik */
.dg-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.dg-bar .ig { flex: 0 1 170px; min-width: 0; }
.dg-bar .ig.dg-q { flex: 1 1 140px; max-width: 260px; }
.dg-bar .sp { flex: 1; }
.dg-tbl th, .dg-tbl td { padding-left: 8px; padding-right: 8px; }
.dg-tabs { flex-wrap: wrap; overflow: visible; }
@media (max-width: 640px) { .tb-diag { display: none; } .dg-bar .ig, .dg-bar .ig.dg-q { flex: 1 1 100%; max-width: none; } }