/* ═══════════════════════════════════════════════
   DAMIU — Material Flat · Soft Gradient · Magenta
   Palette:
     Primary   #c2185b  (magenta/pink 800)
     Primary L #e91e8c  (magenta 600)
     Primary D #880e4f  (magenta 900)
     Accent    #f06292  (pink 300)
     Surface   #fff
     BG        #fdf4f8  (soft pink tint)
     Text      #2d2d2d
     Muted     #78716c
═══════════════════════════════════════════════ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── BASE ── */
:root{
  --p:    #c2185b;
  --p-l:  #e91e8c;
  --p-d:  #880e4f;
  --p-t:  #fce4ec;
  --p-t2: #fdf4f8;
  --acc:  #f06292;
  --surf: #ffffff;
  --bg:   #fdf4f8;
  --bdr:  #f0d6e4;
  --txt:  #2d2d2d;
  --txt2: #6b6b6b;
  --txt3: #a0a0a0;
  --rad:  12px;
  --rad-s:8px;
  --shad: 0 1px 3px rgba(194,24,91,.08), 0 1px 2px rgba(0,0,0,.04);
  --shad-m: 0 4px 16px rgba(194,24,91,.12), 0 2px 6px rgba(0,0,0,.06);
}

body{
  font-family:'Inter','Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--txt);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.hidden{display:none!important}

.material-symbols-rounded{
  font-size:20px;
  vertical-align:middle;
  line-height:1;
  user-select:none;
}

/* ── NAVBAR ── */
.app-nav{
  background:linear-gradient(135deg, var(--p-d) 0%, var(--p) 60%, var(--p-l) 100%);
  position:sticky;top:0;z-index:300;
  box-shadow:0 2px 8px rgba(136,14,79,.3);
}
.app-nav-inner{
  max-width:1160px;margin:0 auto;
  padding:0 14px;height:52px;
  display:flex;align-items:center;gap:10px;
}
.app-nav-brand{
  display:flex;align-items:center;gap:10px;
  flex:1;min-width:0;overflow:hidden;
}
#header-logo-wrap{flex-shrink:0}
#header-logo-wrap img{
  height:36px;width:36px;
  object-fit:contain;border-radius:8px;
  background:rgba(255,255,255,.15);
  padding:2px;display:block;
}
.app-nav-title{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.nav-name{
  font-size:.9rem;font-weight:700;
  color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;letter-spacing:.01em;
}
.nav-sub{
  font-size:.7rem;color:rgba(255,255,255,.75);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;
}
.nav-kontak{
  font-size:.65rem;color:rgba(255,255,255,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.app-nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

.user-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:20px;
  font-size:.72rem;font-weight:600;
  white-space:nowrap;
}
.user-admin{background:rgba(255,255,255,.22);color:#fff}
.user-karyawan{background:rgba(255,255,255,.18);color:#fff}
.user-role{font-size:.6rem;font-weight:400;opacity:.8}

.btn-nav-logout{
  display:flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  border-radius:8px;padding:5px 10px;
  font-size:.75rem;font-weight:500;
  cursor:pointer;color:#fff;
  transition:background .2s;
  white-space:nowrap;flex-shrink:0;
}
.btn-nav-logout:hover{background:rgba(255,255,255,.28)}
.btn-nav-logout .material-symbols-rounded{font-size:16px}
.logout-label{display:none}
@media(min-width:480px){.logout-label{display:inline}}

/* ── DESKTOP TABS ── */
.dtab-wrap{
  background:var(--surf);
  border-bottom:2px solid var(--bdr);
  box-shadow:0 1px 0 var(--bdr);
}
@media(max-width:768px){.dtab-wrap{display:none}}

.dtab-inner{
  max-width:1160px;margin:0 auto;
  padding:0 14px;
  display:flex;overflow-x:auto;scrollbar-width:none;
}
.dtab-inner::-webkit-scrollbar{display:none}

.dtab-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;
  border-bottom:3px solid transparent;
  padding:11px 16px;
  font-size:.82rem;font-weight:600;
  color:var(--txt2);cursor:pointer;
  white-space:nowrap;
  margin-bottom:-2px;
  transition:color .2s,border-color .2s;
  flex-shrink:0;
}
.dtab-btn .material-symbols-rounded{font-size:17px}
.dtab-btn:hover{color:var(--p)}
.dtab-btn.active{color:var(--p);border-bottom-color:var(--p)}

/* ── PAGE WRAP ── */
.page-wrap{
  max-width:1160px;margin:0 auto;
  padding:12px 12px 76px;
}
@media(min-width:769px){.page-wrap{padding:16px 16px 24px}}

/* ── TAB CONTENT ── */
.tab-content{display:none}
.tab-content.active{display:block}

/* ── CARD SECTION ── */
.card-section{
  background:var(--surf);
  border-radius:var(--rad);
  padding:16px;
  margin-bottom:12px;
  box-shadow:var(--shad);
  border:1px solid var(--bdr);
}

.section-title{
  font-size:.88rem;font-weight:700;
  color:var(--txt);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--p-t);
  display:flex;align-items:center;gap:6px;
}
.section-title .material-symbols-rounded{
  font-size:18px;color:var(--p);
}

.section-header{
  display:flex;justify-content:space-between;
  align-items:flex-start;flex-wrap:wrap;
  gap:8px;margin-bottom:12px;
}
.section-header .section-title{
  margin-bottom:0;padding-bottom:0;border-bottom:none;
}

/* ── FORM GRID ── */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
}
@media(max-width:480px){
  .form-grid{grid-template-columns:1fr}
  .fg.fg-2{grid-column:1}
}

.fg{display:flex;flex-direction:column;gap:5px}
.fg.fg-2{grid-column:1 / -1}
.fg.fg-align-end{
  flex-direction:row;align-items:flex-end;
  gap:8px;flex-wrap:wrap;
}

.fg label{
  font-size:.73rem;font-weight:600;
  color:var(--txt2);
  letter-spacing:.01em;
}

.fg input,
.fg .select-wrap select{
  width:100%;
  padding:9px 12px;
  border:1.5px solid #e8d5e0;
  border-radius:var(--rad-s);
  font-size:.85rem;
  font-family:inherit;
  outline:none;
  background:var(--surf);
  color:var(--txt);
  transition:border-color .2s, box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
.fg input:focus,
.fg .select-wrap select:focus{
  border-color:var(--p);
  box-shadow:0 0 0 3px rgba(194,24,91,.1);
}
.fg input[readonly]{
  background:#fdf4f8;color:var(--txt2);cursor:default;
}
.fg input::placeholder{color:#c4a8b5}

.select-wrap{position:relative}
.select-wrap select{padding-right:32px;cursor:pointer}
.select-wrap::after{
  content:'expand_more';
  font-family:'Material Symbols Rounded';
  position:absolute;right:9px;top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  font-size:18px;color:var(--p);line-height:1;
}

.field-hint{font-size:.68rem;color:var(--txt3);margin-top:1px}

.form-actions{
  display:flex;gap:8px;align-items:center;
  margin-top:16px;flex-wrap:wrap;
  padding-top:14px;
  border-top:1px solid var(--p-t);
}

/* ── FILTER BAR ── */
.filter-bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

.f-input{
  padding:7px 11px;
  border:1.5px solid #e8d5e0;
  border-radius:var(--rad-s);
  font-size:.8rem;font-family:inherit;
  outline:none;background:var(--surf);
  color:var(--txt);
  transition:border-color .2s;
}
.f-input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(194,24,91,.1)}
.f-input-sm{width:130px}

.f-select{
  padding:7px 28px 7px 11px;
  border:1.5px solid #e8d5e0;
  border-radius:var(--rad-s);
  font-size:.8rem;font-family:inherit;
  outline:none;background:var(--surf);
  color:var(--txt);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23c2185b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  cursor:pointer;
}
.f-select:focus{border-color:var(--p);outline:none}

/* ── BUTTONS ── */
.btn-primary{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg, var(--p) 0%, var(--p-l) 100%);
  color:#fff;border:none;
  padding:9px 18px;border-radius:var(--rad-s);
  font-size:.82rem;font-weight:600;font-family:inherit;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(194,24,91,.3);
  transition:box-shadow .2s, transform .1s;
  white-space:nowrap;
}
.btn-primary:hover{
  box-shadow:0 4px 14px rgba(194,24,91,.4);
  transform:translateY(-1px);
}
.btn-primary:active{transform:translateY(0)}
.btn-primary .material-symbols-rounded{font-size:16px}

.btn-outline{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surf);
  color:var(--p);
  border:1.5px solid var(--p);
  padding:8px 16px;border-radius:var(--rad-s);
  font-size:.82rem;font-weight:600;font-family:inherit;
  cursor:pointer;
  transition:background .2s;
  white-space:nowrap;
}
.btn-outline:hover{background:var(--p-t)}
.btn-outline .material-symbols-rounded{font-size:16px}

.btn-danger{
  display:inline-flex;align-items:center;gap:6px;
  background:#e53935;color:#fff;border:none;
  padding:8px 16px;border-radius:var(--rad-s);
  font-size:.82rem;font-weight:600;font-family:inherit;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(229,57,53,.25);
  transition:box-shadow .2s, transform .1s;
  white-space:nowrap;
}
.btn-danger:hover{box-shadow:0 4px 12px rgba(229,57,53,.35);transform:translateY(-1px)}
.btn-danger .material-symbols-rounded{font-size:16px}

.btn-icon{
  background:none;border:none;cursor:pointer;
  padding:4px 5px;border-radius:6px;
  color:var(--txt2);
  transition:background .15s, color .15s;
  display:inline-flex;align-items:center;
}
.btn-icon:hover{background:var(--p-t);color:var(--p)}
.btn-icon .material-symbols-rounded{font-size:18px}

/* ── SUMMARY CARDS ── */
.summary{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;margin-bottom:12px;
}
@media(min-width:600px){.summary{grid-template-columns:repeat(4,1fr)}}

.card{
  background:var(--surf);
  border-radius:var(--rad);
  padding:12px 14px;
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--shad);
  border:1px solid var(--bdr);
  position:relative;overflow:hidden;
  transition:box-shadow .2s, transform .15s;
}
.card::before{
  content:'';position:absolute;
  top:0;left:0;bottom:0;width:4px;
  border-radius:var(--rad) 0 0 var(--rad);
}
.card:hover{box-shadow:var(--shad-m);transform:translateY(-1px)}

.card-blue::before{background:linear-gradient(180deg,#1a73e8,#4285f4)}
.card-yellow::before{background:linear-gradient(180deg,#f9ab00,#fbbc04)}
.card-orange::before{background:linear-gradient(180deg,#e37400,#f29900)}
.card-red::before{background:linear-gradient(180deg,#ea4335,#f44336)}
.card-amber::before{background:linear-gradient(180deg,#f9ab00,#ffc107)}
.card-green::before{background:linear-gradient(180deg,#34a853,#43a047)}
.card-magenta::before{background:linear-gradient(180deg,var(--p),var(--p-l))}

.card-icon{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.card-blue .card-icon{background:#e8f0fe}
.card-blue .card-icon .material-symbols-rounded{color:#1a73e8}
.card-yellow .card-icon{background:#fef9e7}
.card-yellow .card-icon .material-symbols-rounded{color:#f9ab00}
.card-orange .card-icon{background:#fff3e0}
.card-orange .card-icon .material-symbols-rounded{color:#e37400}
.card-red .card-icon{background:#fce8e6}
.card-red .card-icon .material-symbols-rounded{color:#ea4335}
.card-amber .card-icon{background:#fff8e1}
.card-amber .card-icon .material-symbols-rounded{color:#f9ab00}
.card-green .card-icon{background:#e6f4ea}
.card-green .card-icon .material-symbols-rounded{color:#34a853}
.card-magenta .card-icon{background:var(--p-t)}
.card-magenta .card-icon .material-symbols-rounded{color:var(--p)}

.card-icon .material-symbols-rounded{font-size:22px!important;line-height:1}

.card-info{display:flex;flex-direction:column;min-width:0}
.card-label{
  font-size:.6rem;color:var(--txt3);
  font-weight:600;text-transform:uppercase;
  letter-spacing:.4px;line-height:1.3;
}
.card-count{
  font-size:1.2rem;font-weight:700;
  color:var(--txt);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-sub{font-size:.6rem;color:var(--txt3);line-height:1.3}

/* ── KREDIT SUMMARY ── */
.kredit-summary{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;margin-bottom:12px;
}
@media(min-width:600px){.kredit-summary{grid-template-columns:repeat(3,1fr)}}
.kredit-sum-card{
  background:var(--surf);border-radius:var(--rad);
  padding:12px 14px;display:flex;align-items:center;gap:12px;
  box-shadow:var(--shad);border:1px solid var(--bdr);
  position:relative;overflow:hidden;
}
.kredit-sum-card::before{
  content:'';position:absolute;
  top:0;left:0;bottom:0;width:4px;
  border-radius:var(--rad) 0 0 var(--rad);
}
.kredit-sum-card.card-red::before{background:linear-gradient(180deg,#ea4335,#f44336)}
.kredit-sum-card.card-amber::before{background:linear-gradient(180deg,#f9ab00,#ffc107)}
.kredit-sum-card.card-green::before{background:linear-gradient(180deg,#34a853,#43a047)}

/* ── TABLE ── */
.tbl-wrap{overflow-x:auto;margin:0 -2px}

.data-table{width:100%;border-collapse:collapse;font-size:.78rem}

.data-table thead tr{
  background:linear-gradient(135deg,var(--p-t) 0%,#fff5f9 100%);
}
.data-table th{
  padding:9px 10px;text-align:left;
  font-size:.64rem;font-weight:700;
  color:var(--p-d);
  text-transform:uppercase;letter-spacing:.4px;
  border-bottom:2px solid var(--bdr);
  white-space:nowrap;
}
.data-table td{
  padding:8px 10px;
  border-bottom:1px solid #fce4ec;
  vertical-align:middle;
  color:var(--txt);
}
.data-table tbody tr:hover{background:#fdf4f8}
.data-table tbody tr:last-child td{border-bottom:none}

.tbl-footer{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;font-size:.78rem;color:var(--txt2);
  padding-top:8px;border-top:1px solid var(--bdr);
}
#footer-total{font-weight:700;color:var(--p-d);font-size:.85rem}

.empty{
  text-align:center;color:var(--txt3);
  padding:20px;font-style:italic;font-size:.8rem;
}

/* ── BADGE ── */
.badge{
  display:inline-block;padding:3px 9px;
  border-radius:20px;font-size:.68rem;
  font-weight:600;white-space:nowrap;
}
.badge-produk  {background:#e8f0fe;color:#1a73e8}
.badge-kurir   {background:#f3e8ff;color:#7c3aed}
.badge-admin   {background:var(--p-t);color:var(--p-d)}
.badge-kar     {background:#e8f0fe;color:#1a73e8}
.badge-lunas   {background:#e6f4ea;color:#2e7d32}
.badge-belum   {background:#fce8e6;color:#c62828}
.badge-tunai   {background:#e8f5e9;color:#2e7d32}
.badge-transfer{background:#e3f2fd;color:#1565c0}
.badge-kredit  {background:var(--p-t);color:var(--p-d)}
.badge-kupon   {background:#fff8e1;color:#f57f17}
.badge-margin-pos{background:#e6f4ea;color:#2e7d32}
.badge-margin-neg{background:#fce8e6;color:#c62828}

/* ── MISC ── */
.text-red   {color:#e53935}
.text-green {color:#2e7d32}
.text-orange{color:#e37400}
.text-pink  {color:var(--p)}
.dash       {color:#d4b8c4}
.code-tag   {
  background:var(--p-t);color:var(--p-d);
  padding:2px 7px;border-radius:5px;
  font-size:.74rem;font-family:monospace;
}
.me-label{font-size:.68rem;color:#2e7d32}

/* ── PROFIL ── */
.logo-wrap{
  display:flex;align-items:center;gap:14px;
  padding:12px;background:var(--p-t2);
  border-radius:var(--rad-s);
  border:1.5px dashed var(--acc);
  margin-bottom:14px;
}
.logo-box{
  width:64px;height:64px;border-radius:10px;
  border:2px solid var(--bdr);background:var(--surf);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex-shrink:0;
}
.logo-box img{width:100%;height:100%;object-fit:contain}
.logo-ph{font-size:30px!important;color:var(--acc)}
.logo-actions{display:flex;flex-direction:column;gap:7px}
.btn-upload{cursor:pointer}

.profil-card{padding:4px 0}
.profil-preview-inner{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.profil-logo-big{
  width:72px;height:72px;object-fit:contain;
  border-radius:10px;border:2px solid var(--bdr);
  background:var(--p-t2);padding:4px;flex-shrink:0;
}
.profil-logo-placeholder{
  width:72px;height:72px;border-radius:10px;
  border:2px solid var(--bdr);background:var(--p-t2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.profil-logo-placeholder .material-symbols-rounded{font-size:32px!important;color:var(--acc)}
.profil-info{flex:1;min-width:150px}
.profil-info h3{font-size:1rem;font-weight:700;color:var(--txt);margin-bottom:2px}
.profil-tagline{color:var(--txt2);font-size:.8rem;margin-bottom:8px}
.profil-detail-grid{
  display:grid;grid-template-columns:auto 1fr;
  gap:4px 10px;font-size:.8rem;color:var(--txt2);align-items:center;
}
.profil-detail-grid .material-symbols-rounded{font-size:15px;color:var(--p)}

/* ── REKAP ── */
.rekap-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:10px;margin-bottom:10px;
}
.rekap-card{
  background:var(--p-t2);border-radius:var(--rad-s);
  padding:12px;border:1px solid var(--bdr);
}
.rekap-card-title{
  font-weight:700;font-size:.82rem;color:var(--p-d);
  margin-bottom:6px;padding-bottom:5px;
  border-bottom:1px solid var(--bdr);
}
.rekap-card-row{
  display:flex;justify-content:space-between;
  font-size:.78rem;color:var(--txt2);padding:2px 0;
}
.rekap-total-bar{
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(135deg,var(--p-d),var(--p));
  color:#fff;border-radius:var(--rad-s) var(--rad-s) 0 0;
  padding:10px 14px;font-size:.85rem;font-weight:600;
}
.rekap-total-bar strong{font-size:.95rem}

.rekap-kurir-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
}
.rekap-kurir-card{
  background:var(--surf);border-radius:var(--rad-s);
  border:1px solid var(--bdr);overflow:hidden;
  box-shadow:var(--shad);
}
.rekap-kurir-header{
  background:linear-gradient(135deg,var(--p-d),var(--p));
  color:#fff;padding:10px 14px;
  display:flex;align-items:center;gap:8px;
}
.rekap-kurir-nama{font-weight:700;font-size:.85rem}
.rekap-kurir-jabatan{
  font-size:.68rem;background:rgba(255,255,255,.2);
  padding:2px 8px;border-radius:20px;
}
.rekap-kurir-subhead{
  display:grid;grid-template-columns:1fr auto auto;
  gap:6px;padding:6px 14px;
  font-size:.64rem;font-weight:700;color:var(--p-d);
  text-transform:uppercase;background:var(--p-t);
  border-bottom:1px solid var(--bdr);
}
.rekap-kurir-row{
  display:grid;grid-template-columns:1fr auto auto;
  gap:6px;padding:7px 14px;
  font-size:.78rem;color:var(--txt);
  border-bottom:1px solid #fce4ec;align-items:center;
}
.rekap-kurir-row:last-child{border-bottom:none}
.rekap-kurir-row span:nth-child(2),
.rekap-kurir-subhead span:nth-child(2){min-width:60px;text-align:right}
.rekap-kurir-row span:nth-child(3),
.rekap-kurir-subhead span:nth-child(3){min-width:80px;text-align:right}
.rekap-kurir-footer{
  display:grid;grid-template-columns:1fr auto auto;
  gap:6px;padding:8px 14px;
  font-size:.78rem;background:var(--p-t);
  font-weight:600;color:var(--p-d);
}
.rekap-kurir-footer strong{min-width:80px;text-align:right}

.rekap-uang-detail{
  background:var(--surf);
  border:1px solid var(--bdr);border-top:none;
  border-radius:0 0 var(--rad-s) var(--rad-s);overflow:hidden;
}
.rekap-uang-row{
  display:grid;grid-template-columns:1fr auto auto;
  gap:8px;align-items:center;
  padding:7px 14px;font-size:.78rem;
  border-bottom:1px solid #fce4ec;color:var(--txt);
}
.rekap-uang-row:last-child{border-bottom:none}
.rekap-uang-row strong{min-width:90px;text-align:right;font-size:.8rem}
.rekap-uang-sub{font-size:.68rem;color:var(--txt3);text-align:right}

/* ── MODAL ── */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(136,14,79,.35);
  backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  z-index:999;padding:14px;
}
.modal-overlay.hidden{display:none!important}

.modal-box{
  background:var(--surf);
  border-radius:var(--rad);
  width:92%;max-width:440px;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 12px 40px rgba(136,14,79,.2), 0 4px 12px rgba(0,0,0,.1);
  display:flex;flex-direction:column;
  border:1px solid var(--bdr);
}
.modal-box-sm{max-width:300px}

.modal-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--bdr);
  font-size:.9rem;font-weight:700;color:var(--p-d);
  background:linear-gradient(135deg,var(--p-t2),#fff);
}
.modal-close{
  background:none;border:none;cursor:pointer;
  color:var(--txt2);display:flex;align-items:center;
  border-radius:6px;padding:3px;
  transition:background .15s;
}
.modal-close:hover{background:var(--p-t);color:var(--p)}

.modal-body{padding:16px;flex:1}
.modal-foot{
  display:flex;gap:8px;padding:12px 16px;
  border-top:1px solid var(--bdr);
  background:var(--p-t2);
}
.modal-foot-center{justify-content:center}

.mfield{margin-bottom:12px}
.mlabel{
  font-size:.73rem;font-weight:600;
  color:var(--txt2);display:block;margin-bottom:4px;
}
.mvalue{font-weight:700;font-size:.9rem;color:var(--txt)}

.mfield input,
.mfield .select-wrap select{
  width:100%;padding:8px 11px;
  border:1.5px solid #e8d5e0;
  border-radius:var(--rad-s);
  font-size:.85rem;font-family:inherit;outline:none;
  background:var(--surf);
  transition:border-color .2s;
}
.mfield input:focus,
.mfield .select-wrap select:focus{
  border-color:var(--p);
  box-shadow:0 0 0 3px rgba(194,24,91,.1);
}

.modal-warn-icon{
  font-size:40px!important;color:#f9ab00;
  display:block;text-align:center;margin-bottom:10px;
}
.modal-warn-text{
  font-size:.9rem;font-weight:600;
  color:var(--txt);text-align:center;
}

/* ── LOADING ── */
.loading-overlay{
  position:fixed;inset:0;
  background:rgba(136,14,79,.3);
  backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;
}
.loading-box{
  background:var(--surf);border-radius:var(--rad);
  padding:20px 28px;text-align:center;
  box-shadow:0 8px 32px rgba(136,14,79,.2);
  border:1px solid var(--bdr);
}
.spinner{
  width:30px;height:30px;
  border:3px solid var(--bdr);
  border-top-color:var(--p);
  border-radius:50%;
  animation:spin .7s linear infinite;
  margin:0 auto 10px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-box p{font-size:.82rem;color:var(--txt2)}

/* ── BOTTOM NAV ── */
.bnav{display:none}

@media(max-width:768px){
  .bnav{
    display:flex;position:fixed;
    bottom:0;left:0;right:0;
    background:var(--surf);
    border-top:1px solid var(--bdr);
    box-shadow:0 -2px 12px rgba(194,24,91,.12);
    z-index:1000;
    overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .bnav::-webkit-scrollbar{display:none}
  .page-wrap{padding-bottom:76px}
}

.bnav-btn{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  flex:1;min-width:50px;max-width:80px;
  padding:7px 2px 9px;
  background:none;border:none;cursor:pointer;
  color:var(--txt3);
  transition:color .2s;gap:3px;
}
.bnav-btn.active{color:var(--p)}
.bnav-btn.active .bnav-icon-wrap{
  background:var(--p-t);border-radius:16px;
}
.bnav-icon-wrap{
  padding:3px 12px;border-radius:16px;
  transition:background .2s;
}
.bnav-btn .material-symbols-rounded{font-size:22px!important;line-height:1}
.bl{font-size:.56rem;font-weight:600;white-space:nowrap;line-height:1}

/* ── LOGIN ── */
.login-page{
  min-height:100vh;
  background:linear-gradient(160deg,var(--p-d) 0%,var(--p) 50%,var(--acc) 100%);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.login-card{
  background:var(--surf);
  border-radius:16px;
  padding:32px 28px;
  width:100%;max-width:360px;
  box-shadow:0 16px 48px rgba(136,14,79,.3);
}
.login-logo{text-align:center;margin-bottom:24px}
.login-logo-img{
  width:64px;height:64px;object-fit:contain;
  border-radius:12px;display:block;
  margin:0 auto 10px;
  box-shadow:0 4px 12px rgba(194,24,91,.2);
}
.login-title{
  font-size:1.15rem;font-weight:700;
  color:var(--p-d);margin-bottom:3px;
}
.login-sub{font-size:.8rem;color:var(--txt2)}

.login-field{margin-bottom:14px}
.login-field label{
  display:block;font-size:.75rem;
  font-weight:600;color:var(--txt2);margin-bottom:5px;
}
.login-field input{
  width:100%;padding:10px 13px;
  border:1.5px solid #e8d5e0;
  border-radius:var(--rad-s);
  font-size:.9rem;font-family:inherit;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.login-field input:focus{
  border-color:var(--p);
  box-shadow:0 0 0 3px rgba(194,24,91,.12);
}

.btn-login{
  width:100%;padding:11px;
  background:linear-gradient(135deg,var(--p) 0%,var(--p-l) 100%);
  color:#fff;border:none;
  border-radius:var(--rad-s);
  font-size:.9rem;font-weight:700;font-family:inherit;
  cursor:pointer;margin-top:6px;
  box-shadow:0 4px 14px rgba(194,24,91,.35);
  transition:box-shadow .2s, transform .1s;
}
.btn-login:hover{
  box-shadow:0 6px 20px rgba(194,24,91,.45);
  transform:translateY(-1px);
}

.login-error{
  background:#fce8e6;color:#c62828;
  border-radius:var(--rad-s);
  padding:9px 13px;font-size:.8rem;
  margin-bottom:14px;display:none;
  border-left:3px solid #e53935;
}
.login-spinner{
  display:none;text-align:center;
  color:var(--txt2);font-size:.8rem;margin-top:12px;
}

/* ── NAVBAR COMPACT ── */
.app-nav-inner{max-width:1160px;margin:0 auto;padding:0 14px;height:48px;display:flex;align-items:center;gap:10px}
.nav-name{font-size:.88rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;letter-spacing:.01em}
.nav-sub{font-size:.68rem;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}

/* ── BUTTON ICON ONLY ── */
.btn-icon-only{padding:7px 9px!important}
.btn-icon-only .material-symbols-rounded{font-size:17px}

/* ── FILTER BAR MOBILE ── */
@media(max-width:600px){
  .filter-bar{gap:5px}
  .f-input{font-size:.75rem;padding:6px 8px}
  .f-select{font-size:.75rem;padding:6px 24px 6px 8px}
}

/* ── PASSWORD TOGGLE ── */
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{flex:1;padding-right:38px}
.pw-toggle{
  position:absolute;right:8px;
  background:none;border:none;cursor:pointer;
  color:var(--txt3);padding:2px;
  display:flex;align-items:center;
  transition:color .2s;
}
.pw-toggle:hover{color:var(--p)}
.pw-toggle .material-symbols-rounded{font-size:18px}

/* ── TOAST ── */
#toast-container{
  position:fixed;bottom:80px;right:14px;
  z-index:9998;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
@media(min-width:769px){#toast-container{bottom:20px}}

.toast{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  border-radius:10px;
  font-size:.82rem;font-weight:500;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  pointer-events:all;
  min-width:220px;max-width:320px;
  animation:toast-in .25s ease;
  position:relative;overflow:hidden;
  cursor:pointer;
}
.toast::after{
  content:'';
  position:absolute;bottom:0;left:0;height:3px;
  background:rgba(255,255,255,.4);
  animation:toast-bar var(--dur,3s) linear forwards;
}
@keyframes toast-in{
  from{opacity:0;transform:translateX(40px)}
  to  {opacity:1;transform:translateX(0)}
}
@keyframes toast-out{
  from{opacity:1;transform:translateX(0)}
  to  {opacity:0;transform:translateX(40px)}
}
@keyframes toast-bar{
  from{width:100%}
  to  {width:0}
}

.toast-success{background:linear-gradient(135deg,#1b5e20,#2e7d32);color:#fff}
.toast-error  {background:linear-gradient(135deg,#b71c1c,#c62828);color:#fff}
.toast-warning{background:linear-gradient(135deg,#e65100,#f57c00);color:#fff}
.toast-info   {background:linear-gradient(135deg,var(--p-d),var(--p));color:#fff}

.toast-icon .material-symbols-rounded{font-size:20px;flex-shrink:0}
.toast-msg{flex:1;line-height:1.4}
.toast-close{
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.7);padding:0;
  display:flex;align-items:center;flex-shrink:0;
}
.toast-close:hover{color:#fff}
.toast-close .material-symbols-rounded{font-size:16px}

/* pw-wrap di login */
.login-field .pw-wrap input{padding:10px 38px 10px 13px}
.login-field .pw-wrap .pw-toggle{right:10px}

/* ── PERIOD TOGGLE ── */
.period-bar{
  display:flex;gap:6px;margin-bottom:10px;
}
.period-btn{
  flex:1;padding:7px 4px;
  background:var(--surf);
  border:1.5px solid var(--bdr);
  border-radius:var(--rad-s);
  font-size:.75rem;font-weight:600;
  color:var(--txt2);cursor:pointer;
  transition:all .2s;font-family:inherit;
}
.period-btn.active{
  background:linear-gradient(135deg,var(--p),var(--p-l));
  color:#fff;border-color:var(--p);
  box-shadow:0 2px 8px rgba(194,24,91,.25);
}
.period-btn:hover:not(.active){background:var(--p-t);color:var(--p)}

/* ── TX PREVIEW TOTAL ── */
.tx-preview{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--p-t2),var(--p-t));
  border:1.5px solid var(--bdr);
  border-radius:var(--rad-s);
  padding:10px 14px;
  margin-top:12px;
}
.tx-preview-label{font-size:.75rem;font-weight:600;color:var(--txt2)}
.tx-preview-total{
  font-size:1.1rem;font-weight:700;
  color:var(--p-d);
}

/* ── KREDIT BADGE ── */
.kredit-badge{
  position:absolute;top:-4px;right:-4px;
  background:#e53935;color:#fff;
  font-size:.55rem;font-weight:700;
  min-width:16px;height:16px;
  border-radius:8px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--surf);
  line-height:1;
}

/* dtab kredit badge */
.dtab-btn{position:relative}
.dtab-btn .kredit-badge{
  position:static;
  margin-left:4px;
  border:none;
  font-size:.6rem;
}

/* ── REKAP FILTER INLINE ── */
.rekap-filter-inline{
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:10px;align-items:end;
}
@media(max-width:600px){
  .rekap-filter-inline{grid-template-columns:1fr 1fr}
  .rekap-filter-inline .fg:nth-child(3){grid-column:1/-1}
  .rekap-shortcut-btns{grid-column:1/-1}
}

.rekap-shortcut-btns{
  display:flex;gap:5px;
}
.rekap-sc-btn{
  flex:1;padding:8px 6px;
  background:var(--surf);
  border:1.5px solid var(--bdr);
  border-radius:var(--rad-s);
  font-size:.75rem;font-weight:600;
  color:var(--txt2);cursor:pointer;
  transition:all .2s;font-family:inherit;
  white-space:nowrap;
}
.rekap-sc-btn.active{
  background:linear-gradient(135deg,var(--p),var(--p-l));
  color:#fff;border-color:var(--p);
  box-shadow:0 2px 6px rgba(194,24,91,.2);
}
.rekap-sc-btn:hover:not(.active){background:var(--p-t);color:var(--p)}

/* ── PELANGGAN FIELD CONDITIONAL ── */
#fg-pelanggan{transition:opacity .2s}
#fg-pelanggan.required-field label::after{
  content:' *';color:var(--p);
}