/* =========================================================
   dashboard.css — dipakai bersama oleh admin & affiliator
   ========================================================= */
.dash-body{background:var(--paper-dim);min-height:100vh;}
.dash-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh;transition:grid-template-columns .22s cubic-bezier(.4,0,.2,1);}

.dash-sidebar{
  position:relative;
  background:linear-gradient(190deg,var(--ink-navy-soft) 0%,var(--ink-navy) 62%);
  color:var(--text-on-navy);
  padding:26px 18px 20px;display:flex;flex-direction:column;
  overflow-x:hidden;transition:padding .22s ease;
  border-right:1px solid var(--border-navy);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.02);
}

/* ---- Toggle: gagang bulat mengambang di tepi sidebar ---- */
.dash-toggle-btn{
  position:absolute;top:30px;right:-13px;z-index:30;
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink-navy);color:var(--text-on-navy);
  border:1px solid var(--border-navy);box-shadow:0 4px 10px -3px rgba(15,27,61,.5);
  cursor:pointer;padding:0;transition:transform .22s cubic-bezier(.4,0,.2,1),background .15s ease,color .15s ease;
}
.dash-toggle-btn:hover{background:var(--amber);color:var(--ink-navy);border-color:var(--amber);}

.dash-sidebar-top{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:4px;}
.dash-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:16px;color:#fff;min-width:0;}
.dash-brand-text{white-space:nowrap;overflow:hidden;line-height:1.2;}

.dash-role{
  display:flex;align-items:center;gap:7px;width:fit-content;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--amber);background:rgba(224,161,0,.1);border:1px solid rgba(224,161,0,.28);
  padding:5px 10px;white-space:nowrap;overflow:hidden;
}
.dash-role-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:0 0 auto;box-shadow:0 0 0 3px rgba(224,161,0,.18);}

/* ---- Baris peran + lonceng notifikasi (menggantikan .dash-role polos) ---- */
.dash-role-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0 26px;}
.dash-role-row .dash-role{margin:0;}
.notif-bell-wrap{position:relative;flex:0 0 auto;}
.notif-bell-btn{
  position:relative;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);color:var(--text-on-navy);
  border:1px solid var(--border-navy);cursor:pointer;padding:0;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.notif-bell-btn svg{width:18px;height:18px;flex:0 0 auto;display:block;}
.notif-bell-btn:hover{background:var(--amber);color:var(--ink-navy);border-color:var(--amber);}
.notif-bell-badge{
  position:absolute;top:-4px;right:-4px;font-family:var(--font-mono);font-size:10px;font-weight:700;
  background:var(--coral);color:#fff;border-radius:50%;min-width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--ink-navy);
}
.notif-dropdown{
  display:none;position:absolute;top:calc(100% + 10px);left:0;z-index:90;width:320px;max-width:80vw;
  background:var(--paper);color:var(--text-ink);border:1px solid var(--border);
  box-shadow:0 20px 40px -18px rgba(15,27,61,.45);
}
.notif-dropdown.open{display:block;}
.notif-dropdown-head{
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  font-family:var(--font-body);font-weight:700;font-size:13px;border-bottom:1px solid var(--border);
}
.notif-dropdown-count{font-family:var(--font-mono);font-size:10.5px;color:var(--coral);text-transform:uppercase;letter-spacing:.05em;}
.notif-empty{padding:20px 14px;font-size:13px;color:var(--text-muted);text-align:center;}
.notif-dropdown .notif-list{max-height:340px;overflow-y:auto;padding:0;}
.notif-dropdown .notif-item{
  display:flex;align-items:flex-start;gap:10px;padding:10px 14px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--border);transition:background .12s ease;
}
.notif-dropdown .notif-item:last-child{border-bottom:none;}
.notif-dropdown .notif-item:hover{background:var(--amber-tint);}
.notif-item-icon{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.notif-item-icon-affiliator{background:var(--teal-tint);color:var(--teal-dark);}
.notif-item-icon-camaba{background:var(--amber-tint);color:var(--amber-dark);}
.notif-item-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.notif-item-title{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;}
.notif-item-type{
  font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-muted);background:var(--paper-dim);padding:1px 5px;
}
.notif-item-meta{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notif-dropdown-foot{display:flex;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--border);}
.notif-dropdown-foot a{font-size:12px;font-weight:600;color:var(--teal-dark);text-decoration:none;}
.notif-dropdown-foot a:hover{text-decoration:underline;}

.dash-nav{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.dash-nav-link{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 12px;font-size:14px;font-weight:500;color:var(--text-on-navy);
  border-left:2px solid transparent;background:none;border-top:none;border-right:none;border-bottom:none;
  font-family:var(--font-body);cursor:pointer;text-align:left;white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.dash-nav-icon{
  flex:0 0 auto;width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  color:var(--text-on-navy);opacity:.85;transition:color .15s ease,opacity .15s ease;
}
.dash-nav-label{overflow:hidden;text-overflow:ellipsis;}
.dash-nav-badge{
  margin-left:auto;flex:0 0 auto;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  background:var(--coral);color:#fff;border-radius:50%;min-width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}
@media (min-width:861px){ html.sidebar-collapsed-pref .dash-nav-badge{position:absolute;top:6px;right:6px;margin-left:0;} }
a.dash-nav-link:hover{color:#fff;background:rgba(255,255,255,.045);}
a.dash-nav-link:hover .dash-nav-icon{opacity:1;}
a.dash-nav-link.active{color:#fff;border-left-color:var(--amber);background:rgba(255,255,255,.055);}
a.dash-nav-link.active .dash-nav-icon{color:var(--amber);opacity:1;}

.dash-nav-group{display:flex;flex-direction:column;}
.dash-nav-toggle{justify-content:flex-start;}
.dash-nav-toggle:hover{color:#fff;background:rgba(255,255,255,.045);}
.dash-nav-toggle:hover .dash-nav-icon{opacity:1;}
.dash-nav-chevron{margin-left:auto;flex:0 0 auto;transition:transform .18s ease;opacity:.6;}
.dash-nav-group.open > .dash-nav-toggle .dash-nav-chevron{transform:rotate(180deg);opacity:1;}
.dash-nav-group.open > .dash-nav-toggle{color:#fff;background:rgba(255,255,255,.03);}
.dash-nav-group.open > .dash-nav-toggle .dash-nav-icon{color:var(--amber);opacity:1;}

.dash-nav-submenu{
  display:flex;flex-direction:column;max-height:0;overflow:hidden;opacity:0;
  margin:0 0 0 19px;padding-left:18px;border-left:1px solid var(--border-navy);
  transition:max-height .22s cubic-bezier(.4,0,.2,1),opacity .18s ease;
}
.dash-nav-group.open .dash-nav-submenu{max-height:260px;opacity:1;margin-top:2px;}
.dash-flyout-title{display:none;}
.dash-nav-submenu a{
  display:flex;align-items:center;gap:9px;
  padding:8.5px 10px;font-size:13.5px;color:var(--text-on-navy);
  border-left:2px solid transparent;margin-left:-19px;padding-left:17px;white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.dash-nav-submenu a svg{flex:0 0 auto;opacity:.7;transition:opacity .15s ease,color .15s ease;}
.dash-nav-submenu a:hover{color:#fff;background:rgba(255,255,255,.04);}
.dash-nav-submenu a:hover svg{opacity:1;}
.dash-nav-submenu a.active{color:#fff;border-left-color:var(--amber);background:rgba(224,161,0,.08);}
.dash-nav-submenu a.active svg{opacity:1;color:var(--amber);}

/* ---- Profil admin & logout ---- */
.dash-logout{margin-top:18px;padding-top:18px;border-top:1px solid var(--border-navy);overflow:hidden;}
.dash-profile{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-width:0;}
.dash-avatar{
  width:32px;height:32px;flex:0 0 auto;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--ink-navy-softer));
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;border:1px solid rgba(255,255,255,.18);
}
.dash-profile-info{display:flex;flex-direction:column;min-width:0;overflow:hidden;}
.dash-admin-name{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-admin-role{font-size:11px;color:var(--text-on-navy);opacity:.6;white-space:nowrap;}
.dash-logout-link{
  display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-on-navy);
  padding:9px 10px;background:rgba(255,255,255,.03);border:1px solid var(--border-navy);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.dash-logout-link svg{flex:0 0 auto;color:var(--coral);}
.dash-logout-link:hover{background:rgba(232,84,62,.12);color:#fff;border-color:var(--coral);}

/* ---- Sidebar collapsed (icon-only) state — hanya berlaku di layar desktop/lebar ---- */
@media (min-width:861px){
  html.sidebar-collapsed-pref .dash-shell{grid-template-columns:74px 1fr;}
  html.sidebar-collapsed-pref .dash-sidebar{padding:26px 12px 20px;}
  html.sidebar-collapsed-pref .dash-brand-text,
  html.sidebar-collapsed-pref .dash-role,
  html.sidebar-collapsed-pref .dash-nav-label,
  html.sidebar-collapsed-pref .dash-nav-chevron,
  html.sidebar-collapsed-pref .dash-profile-info,
  html.sidebar-collapsed-pref .dash-logout-link .dash-nav-label{display:none;}
  html.sidebar-collapsed-pref .dash-sidebar-top{justify-content:center;}
  html.sidebar-collapsed-pref .dash-toggle-btn{transform:rotate(180deg);}
  html.sidebar-collapsed-pref .dash-nav-link{justify-content:center;padding:11px 0;}
  html.sidebar-collapsed-pref .dash-profile{justify-content:center;margin-bottom:12px;}
  html.sidebar-collapsed-pref .dash-logout-link{justify-content:center;position:relative;}

  /* Tooltip kustom untuk tiap item saat icon-only */
  html.sidebar-collapsed-pref .dash-nav-link:hover::after,
  html.sidebar-collapsed-pref .dash-logout-link:hover::after{
    content:attr(data-label);
    position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%);
    background:var(--ink-navy);color:#fff;font-size:12.5px;font-weight:500;
    padding:7px 12px;white-space:nowrap;box-shadow:var(--shadow-card);
    border:1px solid var(--border-navy);z-index:40;pointer-events:none;
  }

  /* Flyout: submenu Pengaturan muncul sebagai panel melayang di sebelah kanan ikon */
  html.sidebar-collapsed-pref .dash-nav-group{position:relative;}
  html.sidebar-collapsed-pref .dash-nav-group .dash-nav-submenu{
    display:flex;position:absolute;left:calc(100% + 10px);top:0;z-index:35;
    max-height:none !important;overflow:visible;opacity:0;visibility:hidden;margin:0;padding:8px;
    border:1px solid var(--border-navy);
    background:var(--ink-navy);box-shadow:var(--shadow-card);min-width:196px;
    transition:opacity .15s ease,visibility .15s ease;
  }
  html.sidebar-collapsed-pref .dash-nav-group:hover .dash-nav-submenu,
  html.sidebar-collapsed-pref .dash-nav-group:focus-within .dash-nav-submenu{opacity:1;visibility:visible;}
  html.sidebar-collapsed-pref .dash-nav-group .dash-flyout-title{
    display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-on-navy);opacity:.55;padding:4px 10px 8px;border-bottom:1px solid var(--border-navy);margin-bottom:4px;
  }
  html.sidebar-collapsed-pref .dash-nav-group .dash-nav-submenu a{margin-left:0;padding-left:10px;white-space:nowrap;}
}

.dash-main{padding:24px 28px;}
.dash-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;flex-wrap:wrap;gap:14px;}
.dash-header h1{font-size:22px;}
.dash-header p{color:var(--text-muted);font-size:13.5px;margin-top:4px;}

.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.dash-stat-card{background:#fff;border:1px solid var(--border);padding:14px 16px;}
.dash-stat-card .label{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);}
.dash-stat-card .value{font-family:var(--font-mono);font-size:22px;font-weight:700;margin-top:5px;color:var(--ink-navy);}

.dash-panel{background:#fff;border:1px solid var(--border);margin-bottom:16px;}
.dash-panel-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.dash-panel-head h3{font-size:15.5px;}

table.dash-table{width:100%;border-collapse:collapse;font-size:13.5px;}
table.dash-table thead tr{background:linear-gradient(135deg,var(--ink-navy) 0%,var(--ink-navy-soft) 100%);}
table.dash-table th{
  text-align:left;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-on-navy);padding:12px 16px;border-bottom:3px solid var(--amber);white-space:nowrap;
}
table.dash-table td{padding:10px 16px;border-bottom:1px solid var(--border);vertical-align:middle;}
table.dash-table tbody tr{transition:background .12s ease;}
table.dash-table tbody tr:nth-child(even){background:var(--paper-dim);}
table.dash-table tbody tr:hover{background:var(--teal-tint);}
table.dash-table tr:last-child td{border-bottom:none;}
table.dash-table tr.cat-group-row{background:var(--amber-tint) !important;}
table.dash-table tr.cat-group-row:hover{background:var(--amber-tint) !important;}
.empty-row{padding:26px 16px;text-align:center;color:var(--text-muted);font-size:13.5px;}

/* Header kolom yang bisa disortir (Simple-DataTables) -- indikator panah
   dibuat terang di atas background navy gelap, jadi kuning/amber saat kolom
   sedang jadi acuan sortir aktif. */
table.dash-table thead th{cursor:pointer;user-select:none;position:relative;}
table.dash-table thead th::after,table.dash-table thead th::before{
  border-top-color:rgba(255,255,255,.65) !important;
  border-bottom-color:rgba(255,255,255,.65) !important;
  color:rgba(255,255,255,.65) !important;
}
table.dash-table thead th.dataTable-ascending::after,table.dash-table thead th.datatable-ascending::after,
table.dash-table thead th.dataTable-descending::after,table.dash-table thead th.datatable-descending::after{
  border-top-color:var(--amber) !important;
  border-bottom-color:var(--amber) !important;
  color:var(--amber) !important;
  opacity:1;
}

/* =========================================================
   Simple-DataTables -- reskin supaya menyatu dengan tema navy/amber/teal
   dashboard. Library bisa mengganti nama class antar versi ("dataTable-*"
   di versi lama, "datatable-*" di versi lebih baru) -- kedua varian ditarget
   sekaligus di bawah supaya reskin ini tetap kena berapa pun versinya.
   ========================================================= */
.dataTable-wrapper,.datatable-wrapper,.dataTable-top,.datatable-top,.dataTable-bottom,.datatable-bottom{
  font-family:var(--font-body);
}
.dataTable-top,.datatable-top{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  padding:16px 18px;background:linear-gradient(180deg,#fff 0%,var(--paper-dim) 100%);
  border-bottom:1px solid var(--border);
}
.dataTable-bottom,.datatable-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding:14px 18px;border-top:1px solid var(--border);background:var(--paper-dim);
}

.dataTable-search,.datatable-search{position:relative;flex:0 1 300px;min-width:200px;}
.dataTable-search::before,.datatable-search::before{
  content:"";position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;pointer-events:none;
  border:2px solid var(--text-muted);border-radius:50%;
  box-sizing:border-box;
}
.dataTable-search::after,.datatable-search::after{
  content:"";position:absolute;left:22px;top:63%;
  width:6px;height:2px;background:var(--text-muted);
  transform:rotate(45deg);pointer-events:none;
}
.dataTable-input,.datatable-input{
  width:100%;padding:10px 14px 10px 38px;border:1.5px solid var(--border);border-radius:999px;
  font-family:var(--font-body);font-size:13.5px;background:#fff;color:var(--text-ink);
  box-shadow:0 1px 2px rgba(15,27,61,.04);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.dataTable-input:hover,.datatable-input:hover{border-color:var(--teal);}
.dataTable-input:focus,.datatable-input:focus{
  outline:none;border-color:var(--teal);
  box-shadow:0 0 0 4px var(--teal-tint),0 4px 14px -6px rgba(29,138,125,.35);
}

.dataTable-dropdown,.datatable-dropdown{font-size:13px;color:var(--text-muted);}
.dataTable-dropdown label,.datatable-dropdown label{display:flex;align-items:center;gap:8px;font-weight:600;}
.dataTable-selector,.datatable-selector{
  padding:8px 30px 8px 14px;border:1.5px solid var(--border);border-radius:999px;
  font-family:var(--font-body);font-size:13px;font-weight:600;background:#fff;color:var(--ink-navy);
  cursor:pointer;box-shadow:0 1px 2px rgba(15,27,61,.04);
  appearance:auto;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.dataTable-selector:hover,.datatable-selector:hover{border-color:var(--teal);}
.dataTable-selector:focus,.datatable-selector:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-tint);}

.dataTable-info,.datatable-info{font-size:12.5px;color:var(--text-muted);font-weight:500;}

.dataTable-pagination,.datatable-pagination{display:flex;}
.dataTable-pagination ul,.datatable-pagination ul,
.dataTable-pagination-list,.datatable-pagination-list{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0;
}
.dataTable-pagination li,.datatable-pagination li{display:flex;}
.dataTable-pagination li a,.dataTable-pagination li button,
.datatable-pagination li a,.datatable-pagination li button{
  min-width:32px;height:32px;padding:0 10px;border:none;border-radius:999px;background:#fff;
  font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--text-ink);cursor:pointer;
  box-shadow:0 1px 3px rgba(15,27,61,.12);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .15s ease,color .15s ease,box-shadow .15s ease;
}
.dataTable-pagination li a:hover,.dataTable-pagination li button:hover,
.datatable-pagination li a:hover,.datatable-pagination li button:hover{
  background:var(--teal-tint);color:var(--teal-dark);transform:translateY(-2px);
  box-shadow:0 6px 14px -6px rgba(29,138,125,.4);
}
.dataTable-pagination li.active a,.dataTable-pagination li.datatable-active a,
.datatable-pagination li.active a,.datatable-pagination li.datatable-active a{
  background:linear-gradient(135deg,var(--amber) 0%,var(--amber-dark) 100%) !important;
  color:#fff !important;box-shadow:0 4px 12px -3px rgba(224,161,0,.55);
  transform:scale(1.06);
}
.dataTable-pagination li.disabled a,.dataTable-pagination li.datatable-disabled a,
.datatable-pagination li.disabled a,.datatable-pagination li.datatable-disabled a{
  opacity:.35;cursor:default;box-shadow:none;pointer-events:none;
}
.dataTable-pagination li.ellipsis span,.datatable-pagination li.ellipsis span{color:var(--text-muted);font-weight:700;}

@media (max-width:600px){
  .dataTable-top,.datatable-top{flex-direction:column;align-items:stretch;}
  .dataTable-search,.datatable-search{flex:1 1 auto;}
  .dataTable-bottom,.datatable-bottom{flex-direction:column;align-items:flex-start;}
  .dataTable-pagination,.datatable-pagination{width:100%;justify-content:center;}
}

.badge{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;padding:4px 9px;}
.badge.pending{background:var(--amber-tint);color:var(--amber-dark);}
.badge.approved{background:var(--teal-tint);color:var(--teal-dark);}
.badge.rejected{background:#FBE3DF;color:var(--coral);}
.badge.daftar{background:var(--paper-dim);color:var(--text-muted);}
.badge.bayar_formulir{background:var(--amber-tint);color:var(--amber-dark);}
.badge.bayar_bpi,.badge.diterima{background:var(--teal-tint);color:var(--teal-dark);}
.badge.paid,.badge.lunas{background:var(--teal-tint);color:var(--teal-dark);}
.badge.gagal{background:#FBE3DF;color:var(--coral);}
.badge.suspended{background:var(--paper-dim);color:var(--coral);border:1px solid var(--coral);}
.badge.dicicil{background:var(--teal-tint);color:var(--teal-dark);border:1px dashed var(--teal);}
.badge.requested{background:var(--amber-tint);color:var(--amber-dark);}

.mono{font-family:var(--font-mono);font-size:13px;}
.text-muted{color:var(--text-muted);}
.inline-form{display:inline;}

.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink-navy);padding:24px;}
.login-card{background:#fff;width:100%;max-width:400px;padding:40px 36px;}
.login-card h2{font-size:24px;margin-bottom:6px;}
.login-card p.sub{color:var(--text-muted);font-size:14px;margin-bottom:26px;}
.login-error{background:#FBE3DF;color:var(--coral);padding:12px 14px;font-size:13.5px;margin-bottom:20px;}
.login-logo{text-align:center;margin-bottom:22px;}
.login-logo img{height:44px;width:auto;}
.login-back{margin-top:18px;text-align:center;}
.login-back a{font-size:13.5px;color:var(--text-muted);font-weight:500;}
.login-back a:hover{color:var(--ink-navy);}

.copy-row{display:flex;gap:10px;}
.copy-row input{
  flex:1;padding:12px 14px;border:1.5px solid var(--border);font-family:var(--font-mono);
  font-size:13.5px;background:var(--paper-dim);color:var(--text-ink);
}

.notif-list{padding:6px 0;}
.notif-item{padding:16px 22px;border-bottom:1px solid var(--border);}
.notif-item:last-child{border-bottom:none;}
.notif-item p{font-size:14px;margin-bottom:4px;}
.notif-item.is-unread{background:var(--amber-tint);}
.notif-item.is-unread::before{content:"● ";color:var(--amber-dark);}

/* =========================================================
   Tombol icon-only — dipakai di semua aksi tabel/form
   (Simpan, Ubah, Hapus, Aktifkan, Setujui, Tolak, dst).
   Tempelkan bareng class .btn yang sudah ada, mis:
   <button class="btn btn-teal btn-sm btn-icon" title="Simpan">
   Tooltip label memakai atribut title bawaan browser.
   ========================================================= */
.btn-icon{width:34px;height:34px;padding:0 !important;justify-content:center;gap:0;flex:0 0 auto;}
.btn-icon svg{width:15px;height:15px;flex:0 0 auto;display:block;}
.icon-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}

/* =========================================================
   Grid field horizontal — pengganti field yang tadinya
   ditumpuk vertikal ke bawah. Bungkus beberapa .af-field
   dengan <div class="field-grid">...</div>; field yang perlu
   selebar penuh (mis. textarea) beri class tambahan
   .field-grid-full.
   ========================================================= */
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 14px;align-items:start;}
.field-grid .af-field{margin-bottom:0;}
.field-grid-full{grid-column:1/-1;}

/* Perapatan kartu form tambah/ubah data (settings-fields, settings-prodi, settings-biaya, dll) */
.add-field-card,.add-card{padding:16px 18px;margin-top:14px;}
.add-field-card h3,.add-card h3{font-size:14.5px;margin-bottom:12px;}
.af-field{margin-bottom:12px;}
.af-field label{margin-bottom:5px;}
.af-field input,.af-field select,.af-field textarea{padding:8px 10px;font-size:13.5px;}

/* =========================================================
   Mobile topbar -- hanya tampil di layar sempit (lihat breakpoint di bawah).
   Sembunyikan secara default di desktop supaya tidak dobel dengan sidebar.
   ========================================================= */
.mobile-topbar{display:none;}
.mobile-nav-overlay{display:none;}

@media (max-width:860px){
  /* ---- Sidebar jadi off-canvas drawer, bukan dipepetin jadi bar horizontal ----
     Sidebar disembunyikan di luar layar (translateX), lalu digeser masuk dari
     kiri saat class "mobile-nav-open" aktif di <html> (lihat main.js/footer.php).
     Tampilan internalnya TETAP seperti versi desktop biasa (vertikal, rapi),
     cuma "mengambang" di atas konten sebagai panel drawer.
  */
  .dash-shell{grid-template-columns:1fr;position:relative;}

  .mobile-topbar{
    display:flex;align-items:center;gap:12px;
    padding:12px 16px;background:var(--ink-navy);color:#fff;
    position:sticky;top:0;z-index:60;
    box-shadow:0 2px 10px -4px rgba(15,27,61,.4);
  }
  .mobile-menu-btn{
    flex:0 0 auto;width:38px;height:38px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.16);
    cursor:pointer;padding:0;
  }
  .mobile-menu-btn:hover{background:var(--amber);color:var(--ink-navy);border-color:var(--amber);}
  .mobile-topbar-brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
  .mobile-topbar-brand .brand-mark{
    background:#fff;color:var(--ink-navy);font-family:var(--font-display);font-weight:700;
    font-size:13px;padding:4px 8px;flex:0 0 auto;
  }
  .mobile-topbar-title{
    font-family:var(--font-body);font-weight:600;font-size:14.5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .mobile-topbar-actions{flex:0 0 auto;display:flex;align-items:center;}
  .mobile-topbar-badge{
    font-family:var(--font-mono);font-size:11px;font-weight:700;
    background:var(--coral);color:#fff;border-radius:50%;min-width:20px;height:20px;
    display:flex;align-items:center;justify-content:center;padding:0 5px;
  }

  .mobile-nav-overlay{
    display:block;position:fixed;inset:0;background:rgba(15,27,61,.55);
    z-index:70;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;
  }
  html.mobile-nav-open .mobile-nav-overlay{opacity:1;visibility:visible;}

  .dash-sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:80;
    width:280px;max-width:85vw;
    flex-direction:column;align-items:stretch;
    padding:22px 18px 20px;overflow-y:auto;overflow-x:hidden;
    transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow:none;
  }
  html.mobile-nav-open .dash-sidebar{transform:translateX(0);box-shadow:12px 0 32px -12px rgba(15,27,61,.5);}

  .dash-toggle-btn{display:none;}
  .dash-sidebar-top{margin-bottom:4px;}
  .dash-role-row{margin:14px 0 22px;}
  .dash-nav{flex-direction:column;}
  .dash-nav-submenu{
    position:static;background:transparent;padding:0;box-shadow:none;
    display:flex;flex-direction:column;max-height:0;overflow:hidden;opacity:0;
    margin:0 0 0 19px;padding-left:18px;border-left:1px solid var(--border-navy);
    transition:max-height .22s cubic-bezier(.4,0,.2,1),opacity .18s ease;
  }
  .dash-nav-group.open .dash-nav-submenu{max-height:260px;opacity:1;margin-top:2px;}
  .dash-logout{margin-top:18px;padding-top:18px;border-top:1px solid var(--border-navy);display:block;}
  .dash-profile{margin-bottom:14px;}

  .dash-stats{grid-template-columns:1fr 1fr;}
  .dash-main{padding:20px 16px;}
  table.dash-table{display:block;overflow-x:auto;}
  .copy-row{flex-direction:column;}

  /* Di layar sempit, mode collapse (icon-only) & flyout tidak relevan -- drawer selalu tampil penuh. */
  html.sidebar-collapsed-pref .dash-shell{grid-template-columns:1fr;}
  html.sidebar-collapsed-pref .dash-sidebar{width:280px;padding:22px 18px 20px;}
  html.sidebar-collapsed-pref .dash-brand-text,
  html.sidebar-collapsed-pref .dash-role,
  html.sidebar-collapsed-pref .dash-nav-label,
  html.sidebar-collapsed-pref .dash-nav-chevron,
  html.sidebar-collapsed-pref .dash-profile-info,
  html.sidebar-collapsed-pref .dash-logout-link .dash-nav-label{display:revert;}
  html.sidebar-collapsed-pref .dash-nav-link{justify-content:flex-start;padding:10px 12px;}
  html.sidebar-collapsed-pref .dash-nav-link:hover::after,
  html.sidebar-collapsed-pref .dash-logout-link:hover::after{content:none;}
}

@media (min-width:861px){
  .mobile-topbar,.mobile-nav-overlay{display:none !important;}
}