@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  /* Blue */
  --blue-default:     #1681ff;
  --blue-border:      #a2cdff;
  --blue-background:  #f1f8ff;
  --blue-dark:        #005cc9;

  /* Yellow */
  --yellow-default:   #fad03d;
  --yellow-border:    #fdecb1;
  --yellow-background:#fffcf4;
  --yellow-dark:      #e5b306;

  /* Red */
  --red-default:      #f43232;
  --red-border:       #fbadad;
  --red-background:   #fff3f3;
  --red-dark:         #ce0b0b;

  /* Green */
  --green-default:    #21cf32;
  --green-border:     #a6ecad;
  --green-background: #f2fcf3;
  --green-dark:       #168d22;

  /* Black / Grey */
  --black-default:    #1e1e1e;
  --black-paragraph:  #575757;
  --grey-border:      #cecece;
  --grey-bg:          #e3e3e3;
  --grey-bg-2:        #ededed;
  --grey-bg-3:        #f5f5f5;
  --grey-bg-4:        #d9d9d9;
  --grey-bg-5:        #fafafa;
  --grey-5:           rgba(30 30 30 / 0.05);

  /* White */
  --white-default:    #ffffff;
  --white-transparent:rgba(255 255 255 / 0);
  --white-80:         rgba(255 255 255 / 0.8);
  --white-20:         rgba(255 255 255 / 0.2);
  --white-10:         rgba(255 255 255 / 0.1);

  /* Aliases (legacy compat + convenience) */
  --yellow:       var(--yellow-default);
  --dark:         var(--black-default);
  --bg:           var(--grey-bg-3);
  --border:       var(--grey-border);
  --muted:        var(--black-paragraph);
  --card-radius:  10px;
  --sidebar-w:    260px;
  --topbar-h:     62px;
}

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

body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  background: var(--grey-bg-3);
  color: var(--black-default);
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.sidebar-brand,
.topbar-title,
.page-header-left h2,
.stat-value,
.login-title,
.client-hero-name,
.modal-title,
.setting-card h6,
.card-header {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}

a { text-decoration: none; }

/* ═══════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════ */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--black-default);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: white;
}

.brand-icon {
  width: 38px; height: 38px;
  background: var(--yellow-default);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.brand-text {
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.brand-text small {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  letter-spacing: .3px;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: 10px 0;
}

.nav-label {
  font-size: 9.5px;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  color: rgba(255,255,255,.28);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  padding: 16px 20px 5px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  border-left: 3px solid transparent;
  transition: all .15s;
}

.sidebar-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,.05);
}

.sidebar-nav a.active {
  color: var(--yellow-default);
  background: rgba(250,208,61,.1);
  border-left-color: var(--yellow-default);
}

.sidebar-nav a i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.nav-divider {
  border-top: 1px solid rgba(255,255,255,.07);
  margin: 8px 20px;
}

/* Footer */
.sidebar-footer {
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  gap: 10px;
}

.s-avatar {
  width: 34px; height: 34px;
  background: var(--yellow-default);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--black-default);
  flex-shrink: 0;
}

.s-user-name {
  font-size: 13px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
  color: #fff;
}
.s-user-role { font-size: 11px; color: rgba(255,255,255,.38); }

.s-logout {
  margin-left: auto;
  color: rgba(255,255,255,.35);
  font-size: 17px;
  transition: color .15s;
}
.s-logout:hover { color: var(--red-default); }

/* ═══════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════ */
.topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  height: var(--topbar-h);
  background: var(--white-default);
  border-bottom: 1px solid var(--grey-border);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 16px;
  z-index: 100;
}

.topbar-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--black-default);
  flex: 1;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-avatar {
  width: 34px; height: 34px;
  background: var(--yellow-background);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  font-family: 'Manrope', sans-serif;
  color: var(--yellow-dark);
  border: 1.5px solid var(--yellow-border);
}

/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
.main {
  margin-left: var(--sidebar-w);
  padding-top: var(--topbar-h);
  min-height: 100vh;
}

.content { padding: 28px; }

/* ═══════════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════════ */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.page-header-left h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--black-default);
  margin-bottom: 4px;
}

.breadcrumb { font-size: 12.5px; margin: 0; }
.breadcrumb-item a { color: var(--yellow-dark); }
.breadcrumb-item.active { color: var(--black-paragraph); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--grey-bg); }

/* ═══════════════════════════════════════════
   CARDS
═══════════════════════════════════════════ */
.card {
  background: var(--white-default);
  border: 1px solid var(--grey-border);
  border-radius: var(--card-radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
}

/* Card yang isinya dropdown Choices.js (mis. Penandatangan Agency) —
   overflow:hidden default motong dropdown list. Header tetap rounded
   karena .card-header punya border-radius sendiri. */
.card.card-overflow-visible { overflow: visible; }

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--grey-border);
  padding: 16px 20px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--black-default);
  border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-body { padding: 20px; }

/* ═══════════════════════════════════════════
   STAT CARDS
═══════════════════════════════════════════ */
.stat-card {
  background: var(--white-default);
  border: 1px solid var(--grey-border);
  border-radius: var(--card-radius);
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stat-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  margin-bottom: 14px;
}

.stat-icon-wrap.yellow { background: var(--yellow-background); color: var(--yellow-dark); }
.stat-icon-wrap.blue   { background: var(--blue-background);   color: var(--blue-dark); }
.stat-icon-wrap.green  { background: var(--green-background);  color: var(--green-dark); }
.stat-icon-wrap.orange { background: #fff4e6;                  color: #c95f00; }

.stat-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--black-default);
  line-height: 1;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12.5px;
  color: var(--black-paragraph);
  font-weight: 500;
}

.stat-change {
  font-size: 12px;
  margin-top: 8px;
  font-weight: 600;
}

.stat-change.up   { color: var(--green-dark); }
.stat-change.down { color: var(--red-dark); }

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 18px;
}

.btn-primary {
  background: var(--yellow-default);
  border-color: var(--yellow-default);
  color: var(--black-default);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--yellow-dark);
  border-color: var(--yellow-dark);
  color: var(--black-default);
  box-shadow: none;
}

.btn-outline-primary {
  border-color: var(--yellow-default);
  color: var(--yellow-dark);
}
.btn-outline-primary:hover {
  background: var(--yellow-default);
  border-color: var(--yellow-default);
  color: var(--black-default);
}

.btn-light {
  background: var(--grey-bg-3);
  border-color: var(--grey-border);
  color: var(--black-paragraph);
}
.btn-light:hover {
  background: var(--grey-bg-2);
  border-color: var(--grey-bg-4);
  color: var(--black-default);
}

.btn-danger {
  background: var(--red-default);
  border-color: var(--red-default);
  color: #fff;
}
.btn-danger:hover,
.btn-danger:focus {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: #fff;
  box-shadow: none;
}

/* Icon buttons */
.btn-icon {
  width: 32px; height: 32px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  font-size: 14px;
  border: 1px solid var(--grey-border);
  background: var(--white-default);
  color: var(--black-paragraph);
  transition: all .15s;
  cursor: pointer;
}
.btn-icon:hover        { border-color: var(--grey-bg-4); background: var(--grey-bg-3); color: var(--black-default); }
.btn-icon.view:hover   { border-color: var(--blue-border); background: var(--blue-background); color: var(--blue-dark); }
.btn-icon.edit:hover   { border-color: var(--yellow-border); background: var(--yellow-background); color: var(--yellow-dark); }
.btn-icon.del:hover    { border-color: var(--red-border); background: var(--red-background); color: var(--red-dark); }

/* ═══════════════════════════════════════════
   TABLES
═══════════════════════════════════════════ */
.table {
  margin: 0;
  font-size: 13.5px;
}

.table thead th {
  font-family: 'Manrope', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--black-paragraph);
  background: var(--grey-bg-5);
  border-bottom: 1px solid var(--grey-border);
  padding: 11px 16px;
  white-space: nowrap;
}

.table td {
  padding: 13px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--grey-border);
  color: var(--black-paragraph);
}

.table tbody tr:last-child td { border-bottom: none; }
.table-hover tbody tr:hover   { background: var(--grey-bg-5); cursor: default; }

/* ═══════════════════════════════════════════
   BADGES
═══════════════════════════════════════════ */
.badge-role {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
}
.badge-role.admin { background: var(--yellow-background); color: var(--yellow-dark); border: 1px solid var(--yellow-border); }
.badge-role.user  { background: var(--grey-bg-3);         color: var(--black-paragraph); border: 1px solid var(--grey-border); }

.badge-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
}
.badge-status.active   { background: var(--green-background); color: var(--green-dark); border: 1px solid var(--green-border); }
.badge-status.inactive { background: var(--red-background);   color: var(--red-dark);   border: 1px solid var(--red-border); }

/* ═══════════════════════════════════════════
   FORMS
═══════════════════════════════════════════ */
.form-label {
  font-size: 13px;
  font-weight: 600;
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--black-default);
  margin-bottom: 6px;
}

.form-label .req { color: var(--red-default); }

.form-control,
.form-select {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13.5px;
  border-radius: 8px;
  border: 1px solid var(--grey-border);
  padding: 8px 13px;
  color: var(--black-default);
  background: var(--white-default);
  transition: border-color .15s, box-shadow .15s;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--yellow-default);
  box-shadow: 0 0 0 3px rgba(250,208,61,.2);
  outline: none;
}

.form-control::placeholder { color: var(--grey-bg-4); }

.form-text { font-size: 12px; color: var(--black-paragraph); margin-top: 4px; }

/* Ikon info sebelah label — klik/hover buka popover isi keterangan (ganti form-text) */
.label-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  margin-left: 2px;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--black-paragraph);
  opacity: .65;
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
}
.label-info-btn i { font-size: 13px; }
.label-info-btn:hover,
.label-info-btn:focus { color: var(--black-default); opacity: 1; outline: none; }

.popover {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12.5px;
  max-width: 240px;
  border: 1px solid var(--grey-border);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.popover-body { padding: 8px 12px; color: var(--black-default); }

.input-group .input-group-text {
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--grey-bg-5);
  border: 1px solid var(--grey-border);
  font-size: 13px;
  color: var(--black-paragraph);
}

/* Pay-row: delete button selalu paling kanan (desktop & mobile) */
.pay-del { margin-left: auto; flex-shrink: 0; }

/* ── input-group border-radius seragam dengan input lain (8px) ── */
.input-group > :first-child:not(:last-child) { border-radius: 8px 0 0 8px !important; }
.input-group > :last-child:not(:first-child)  { border-radius: 0 8px 8px 0 !important; }

/* ── Seragamkan height semua input-sm ─────────────────────────
   Bootstrap pakai min-height → browser bisa render beda-beda.
   Paksa height eksplisit 31px untuk input & input-group-sm.
   Textarea dikecualikan (biarkan Bootstrap default).
───────────────────────────────────────────────────────── */
input.form-control-sm,
select.form-select-sm {
  height: 31px;
  min-height: 31px;
}

.input-group-sm > .form-control,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  height: 31px;
  min-height: 31px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 29px;
}

/* ═══════════════════════════════════════════
   INVOICE ITEM BUILDER
═══════════════════════════════════════════ */
.item-card {
  background: var(--white-default);
  border: 1.5px solid var(--grey-border);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .15s;
}
.item-card:hover { border-color: var(--grey-bg-4); }

.item-card-head {
  background: var(--grey-bg-5);
  border-bottom: 1px solid var(--grey-border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-num {
  width: 26px; height: 26px;
  background: var(--yellow-default);
  color: var(--black-default);
  font-size: 12px; font-weight: 700;
  font-family: 'Manrope', sans-serif;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.item-title {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--black-paragraph);
}

.item-card-body { padding: 16px; }

/* Sub-items */
.subitem-wrap { margin-bottom: 4px; }

/* Both class names supported (CSS has subitem-row, JS generates sub-item-row) */
.subitem-row,
.sub-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.subitem-dot {
  width: 7px; height: 7px;
  background: var(--yellow-default);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Sub-item Alt E ─────────────────────────────────────────────
   Mobile : card abu + label + total di bawah
   Desktop: flatten jadi flat flex row (seperti layout lama)
────────────────────────────────────────────────────────────── */

/* micro-label */
.flbl {
  font-size: 10px; font-weight: 600; color: #aaa;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 3px; white-space: nowrap; display: block;
}

/* ── Desktop default: flat flex row ── */
.sub-e {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  position: relative;
}

/* Yellow dot via ::before */
.sub-e::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--yellow-default);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Flatten nested wrappers → children jadi direct flex items */
.sub-e-r1,
.sub-e-r2,
.sub-e-r2 .f-qty,
.sub-e-r2 .f-unit,
.sub-e-r2 .f-price,
.sub-e-total { display: contents; }

/* Hide labels & total label on desktop */
.sub-e .flbl,
.sub-e-total .lbl { display: none; }

/* Delete button: static, goes last via order */
.sub-e-del {
  order: 99;
  position: static;
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 11px;
  border: 1px solid var(--grey-border);
  background: var(--white-default);
  color: var(--black-paragraph);
  cursor: pointer; flex-shrink: 0;
  transition: all .15s;
}
.sub-e-del:hover { border-color: var(--red-border); background: var(--red-background); color: var(--red-dark); }

/* Field widths — desktop */
.sub-e .sub-desc  { flex: 1; min-width: 120px; font-size: 13px; }
.sub-e .sub-qty   { width: 62px; flex-shrink: 0; font-size: 13px; }
.sub-e .sub-unit  { width: 88px; flex-shrink: 0; font-size: 13px; }
.sub-e-r2 .input-group { width: 140px; flex-shrink: 0; }
.sub-e-r2 .input-group .input-group-text { font-size: 12px; padding: 0 7px; }
.sub-e-r2 .input-group .form-control { font-size: 13px; }

/* Desktop height: samakan input-group-sm dengan form-control-sm */
.sub-e .sub-qty,
.sub-e .sub-unit,
.sub-e-r2 .input-group.input-group-sm,
.sub-e-r2 .input-group-sm .form-control,
.sub-e-r2 .input-group-sm .input-group-text {
  height: 31px;
  min-height: 31px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Total value inline */
.sub-e-total .val {
  font-size: 12px; font-weight: 700;
  color: var(--yellow-dark);
  min-width: 82px; text-align: right;
  white-space: nowrap; flex-shrink: 0;
}

/* Summary */
.summary-box {
  background: var(--grey-bg-5);
  border: 1.5px solid var(--grey-border);
  border-radius: 10px;
  overflow: hidden;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--grey-border);
  font-size: 14px;
}
.summary-row:last-child { border-bottom: none; }

.summary-row.grand {
  background: var(--yellow-background);
  font-size: 17px;
  font-weight: 800;
  font-family: 'Manrope', sans-serif;
  color: var(--black-default);
}

.summary-row.grand .val { color: var(--yellow-dark); }

.summary-label { color: var(--black-paragraph); font-weight: 500; }
.summary-val   { font-weight: 700; color: var(--black-default); }

/* ═══════════════════════════════════════════
   LOGIN PAGE
═══════════════════════════════════════════ */
.login-wrap {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--black-default) 0%, #2d2d2d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--white-default);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  padding: 40px 36px 36px;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.login-brand-icon {
  width: 44px; height: 44px;
  background: var(--yellow-default);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}

.login-brand-name {
  font-size: 16px;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  color: var(--black-default);
  line-height: 1.25;
}

.login-brand-name small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--black-paragraph);
}

.login-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--black-default);
  margin-bottom: 6px;
}

.login-sub {
  font-size: 13px;
  color: var(--black-paragraph);
  margin-bottom: 28px;
}

/* ═══════════════════════════════════════════
   CLIENT DETAIL HERO
═══════════════════════════════════════════ */
.client-hero {
  background: var(--black-default);
  border-radius: 10px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.client-hero-info { display: flex; align-items: center; gap: 18px; }

.client-avatar-lg {
  width: 56px; height: 56px;
  background: var(--yellow-default);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; font-family: 'Manrope', sans-serif;
  color: var(--black-default);
  flex-shrink: 0;
}

.client-hero-name {
  font-size: 20px;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  color: var(--white-default);
}

.client-hero-company {
  font-size: 13.5px;
  color: rgba(255,255,255,.5);
  margin-top: 3px;
}

.client-hero-meta {
  font-size: 12.5px;
  color: rgba(255,255,255,.35);
  margin-top: 4px;
}

.client-hero-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ═══════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 52px 20px;
}
.empty-state i  { font-size: 44px; color: var(--grey-bg-4); display: block; margin-bottom: 14px; }
.empty-state h6 { font-size: 15px; font-weight: 600; color: var(--black-paragraph); margin-bottom: 8px; }
.empty-state p  { font-size: 13px; color: var(--grey-bg-4); margin-bottom: 20px; }

/* ═══════════════════════════════════════════
   MISC UTILITIES
═══════════════════════════════════════════ */
.text-yellow { color: var(--yellow-dark) !important; }
.bg-yellow   { background: var(--yellow-default) !important; }

.divider { border-top: 1px solid var(--grey-border); margin: 20px 0; }

.section-title {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--black-paragraph);
  margin-bottom: 12px;
}

/* Search input */
.search-wrap { position: relative; }
.search-wrap .bi-search {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--grey-bg-4); font-size: 14px;
}
.search-wrap input { padding-left: 36px; }

/* Agency logo preview */
.logo-preview {
  width: 120px; height: 80px;
  border: 2px dashed var(--grey-border);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grey-bg-3);
  overflow: hidden;
}
.logo-preview img  { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-preview span { font-size: 12px; color: var(--grey-bg-4); text-align: center; padding: 8px; }

/* Settings section */
.setting-card {
  background: var(--white-default);
  border: 1px solid var(--grey-border);
  border-radius: var(--card-radius);
  padding: 22px 24px;
  margin-bottom: 16px;
}

.setting-card h6 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--black-default);
}

.setting-card .desc {
  font-size: 12.5px;
  color: var(--black-paragraph);
  margin-bottom: 16px;
}

/* Format preview pill */
.format-preview {
  display: inline-block;
  background: var(--yellow-background);
  border: 1px solid var(--yellow-border);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  color: var(--yellow-dark);
  letter-spacing: .5px;
}

/* ═══════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════ */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--grey-border); border-radius: 10px; }

/* ═══════════════════════════════════════════
   RESPONSIVE — SIDEBAR TOGGLE BUTTON
═══════════════════════════════════════════ */
.sidebar-toggle {
  display: none;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--grey-border);
  border-radius: 8px;
  font-size: 19px;
  color: var(--black-default);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background .15s;
}
.sidebar-toggle:hover { background: var(--grey-bg-3); }

/* Overlay backdrop when sidebar open on mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 199;
  backdrop-filter: blur(1px);
}
.sidebar-overlay.active { display: block; }

/* ═══════════════════════════════════════════
   RESPONSIVE — BREAKPOINTS
═══════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* Show hamburger */
  .sidebar-toggle { display: flex; }

  /* Sidebar: hidden by default, slides in */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 200;
  }
  .sidebar.open { transform: translateX(0); }

  /* Topbar: full width */
  .topbar {
    left: 0;
    padding: 0 16px;
    gap: 10px;
  }

  /* Main: no left margin */
  .main { margin-left: 0; }

  /* Content padding tighter on mobile */
  .content { padding: 20px 16px; }

  /* Page header stack on small screens */
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .page-header .btn { width: 100%; }

  /* Hero: stack on mobile */
  .client-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .client-hero-actions { width: 100%; }
  .client-hero-actions .btn { flex: 1; text-align: center; justify-content: center; }

  /* Summary sticky: not sticky on mobile */
  .card[style*="position:sticky"],
  .card[style*="position: sticky"] {
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 767.98px) {
  /* Tighter content */
  .content { padding: 16px 12px; }

  /* Stat card row: 2 columns */
  .stat-card { padding: 16px 18px; }
  .stat-value { font-size: 22px; }

  /* Tables: always scrollable */
  .table-responsive-force { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Card header wraps */
  .card-header { flex-wrap: wrap; gap: 8px; }

  /* Settings col */
  .row.justify-content-center > [class*="col-lg"] { padding: 0 8px; }

  /* Form rows: single col */
  .modal-body .row.g-3 > .col-md-6 { width: 100%; }

  /* ── Sub-item row mobile: Alt D — yellow border-left accent ───────
     Desktop: unchanged (dot + all fields inline)
     Mobile:  border-left kuning, 2 baris, dot disembunyikan
     Line 1: [description__________] [X]
     Line 2: [qty] [satuan] [Rp price] [total]
  ──────────────────────────────────────────────────────────────── */
  .subitem-row,
  .sub-item-row {
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
    border-left: 3px solid var(--yellow-default);
    background: var(--yellow-background);
    border-radius: 0 6px 6px 0;
    padding: 8px 10px;
  }

  /* Dot tidak perlu di mobile — border-left sudah jadi penanda */
  .sub-item-row .subitem-dot,
  .subitem-row  .subitem-dot  { display: none; }

  /* Invisible full-width break antara baris 1 dan 2 */
  .subitem-row::after,
  .sub-item-row::after {
    content: '';
    width: 100%;
    order: 35;
  }

  /* Line 1 */
  .sub-item-row .sub-desc,
  .subitem-row  .sub-desc     { order: 20; flex: 1 1 0; width: 1px; }

  .sub-item-row .btn-icon.del,
  .subitem-row  .btn-icon.del { order: 30; margin-left: auto; flex-shrink: 0; width: 26px; height: 26px; font-size: 12px; }

  /* Line 2 */
  .sub-item-row .sub-qty,
  .subitem-row  .sub-qty      { order: 40; width: 58px !important; flex-shrink: 0; }

  /* Satuan: fixed width */
  .sub-item-row .sub-unit,
  .subitem-row  .sub-unit     { order: 50; flex: 0 0 80px; width: 80px !important; }

  /* Price input-group: ambil sisa ruang */
  .sub-item-row .input-group,
  .subitem-row  .input-group  { order: 60; flex: 1 1 0; width: auto !important; }

  .sub-item-row .input-group .form-control,
  .sub-item-row .input-group .input-group-text,
  .subitem-row  .input-group .form-control,
  .subitem-row  .input-group .input-group-text {
    height: 31px;
    min-height: 31px;
    font-size: 13px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .sub-item-row .sub-total,
  .subitem-row  .sub-total    { order: 70; min-width: 0 !important; flex-shrink: 0; }

  /* ── Sub-item Alt E: mobile card ── */
  .sub-e {
    display: block;           /* override desktop flex */
    background: #f5f5f5;
    border: 1px solid #dedede;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    position: relative;
  }

  /* Sembunyikan dot desktop */
  .sub-e::before { display: none; }

  /* Kembalikan semua nested wrapper ke block */
  .sub-e-r1,
  .sub-e-r2,
  .sub-e-r2 .f-qty,
  .sub-e-r2 .f-unit,
  .sub-e-r2 .f-price,
  .sub-e-total { display: revert; }

  /* Tampilkan labels */
  .sub-e .flbl,
  .sub-e-total .lbl { display: block; }

  /* Delete button: absolute pojok kanan atas */
  .sub-e-del {
    position: absolute; top: 8px; right: 8px;
    order: unset;
  }

  /* Row 1: desc, padding-right buat ruang tombol X */
  .sub-e-r1 { margin-bottom: 8px; padding-right: 32px; }

  /* Row 2: qty + unit + price sejajar */
  .sub-e-r2 {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    margin-bottom: 8px;
  }
  .sub-e-r2 .f-qty   { flex: 0 0 68px; min-width: 0; }
  .sub-e-r2 .f-unit  { flex: 0 0 68px; min-width: 0; }
  .sub-e-r2 .f-price { flex: 1 1 0; min-width: 0; max-width: 150px; }
  .sub-e-r2 .f-price .input-group { width: 100%; min-width: 0; }
  .sub-e-r2 .f-price .input-group .form-control { min-width: 0; }

  /* Samakan tinggi input row 2 */
  .sub-e-r2 .form-control-sm,
  .sub-e-r2 .input-group-sm .form-control,
  .sub-e-r2 .input-group-sm .input-group-text {
    height: 31px; min-height: 31px;
    padding-top: 0; padding-bottom: 0; line-height: 29px;
  }

  /* Row 3: total di bawah */
  .sub-e-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid #e3e3e3;
  }
  .sub-e-total .lbl { font-size: 11px; color: #aaa; font-weight: 500; margin-bottom: 0; }
  .sub-e-total .val { font-size: 13px; min-width: auto; text-align: right; }

  /* ── Sub-item Alt E r2: qty+satuan 1 baris, price baris sendiri ── */
  .sub-e-r2 { flex-wrap: wrap; }
  .sub-e-r2 .f-qty   { flex: 0 0 calc(50% - 3px); min-width: 0; }
  .sub-e-r2 .f-unit  { flex: 0 0 calc(50% - 3px); min-width: 0; }
  .sub-e-r2 .f-price { flex: 0 0 100%; min-width: 0; max-width: none; }
  .sub-e-r2 .f-price .input-group { width: 100%; min-width: 0; }
  .sub-e-r2 .f-price .input-group .form-control { min-width: 0; }

  /* ── Term of Payment row: wrap di mobile ──────────────────────────
     Line 1: [num] [label flex-grow] [del]
     Line 2: [%] [keterangan flex-grow]
     Line 3: [amount full-width]
  ──────────────────────────────────────────────────────────────── */
  .pay-row,
  .mou-pay-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center;
    margin-bottom: 10px !important;
  }

  /* Line break 1→2 (after del) */
  .pay-row::after,
  .mou-pay-row::after {
    content: ''; width: 100%; order: 15; display: block;
  }

  /* Line break 2→3 (before amount) */
  .pay-row::before,
  .mou-pay-row::before {
    content: ''; width: 100%; order: 55; display: block;
  }

  /* Line 1 */
  .pay-num                        { order: 1; flex-shrink: 0; }
  .pay-label, .mou-pay-label      { order: 2; flex: 1 1 0 !important; width: auto !important; }
  .pay-del                        { order: 3; flex-shrink: 0; }

  /* Line 2 */
  .pay-pct-group                  { order: 4; width: 88px !important; flex-shrink: 0; }
  .pay-timing, .mou-pay-timing    { order: 5; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }

  /* Line 3: amount full width */
  .pay-amount, .mou-pay-amount    { order: 6; flex: 0 0 100% !important; width: 100% !important; font-size: 13px !important; padding: 6px 11px !important; text-align: right; box-sizing: border-box; }
}

@media (max-width: 575.98px) {
  .topbar-title { font-size: 15px; }
  .page-header-left h2 { font-size: 17px; }

  /* Hide date text in dashboard topbar on very small screens */
  .topbar-date { display: none; }

  /* Buttons smaller */
  .btn { font-size: 13px; padding: 7px 14px; }
  .btn-sm { font-size: 12px; padding: 5px 11px; }
}

/* ═══════════════════════════════════════════
   PAGINATION — ganti warna default Bootstrap (biru) biar ikut design system
   (dipake clients/index.php, payment/index.php, dll — semua page pager sbd_pager.php)
   ═══════════════════════════════════════════ */
.pagination .page-link {
  color: var(--black-default);
}
.pagination .page-link:hover {
  color: var(--black-default);
  background: var(--yellow-background);
  border-color: var(--yellow-border);
}
.pagination .page-item.disabled .page-link {
  color: #b0b7c3;
  background: var(--grey-bg-3);
}

/* ═══════════════════════════════════════════
   CHOICES.JS — select-one, samain persis sama native <select class="form-select">
   Dipakai: seo_reports/index.php (modal-client-select), social_media/index.php
   (modal-sm-client), payment/index.php (filter client). Ketemu 3 bug pas dev payment
   filter (height beda, placeholder gak center, lebar ngikut panjang text, chevron beda) —
   fix generik di sini biar kepake otomatis di semua page, gak perlu ulang tiap file.
   Halaman dengan konteks compact non-Bootstrap (mis. filter-bar) override lebih spesifik
   sendiri (lihat payment/index.php `.filter-bar .choices`).
   ═══════════════════════════════════════════ */
.choices[data-type*="select-one"] { width: 100%; margin-bottom: 0; }
.choices[data-type*="select-one"] .choices__inner {
  display: block;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem 2.25rem .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--black-default);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
}
/* Varian .form-select-sm */
.choices[data-type*="select-one"]:has(select.form-select-sm) .choices__inner {
  height: calc(1.5em + .5rem + 2px);
  padding: .25rem 2rem .25rem .5rem;
  font-size: .875rem;
  border-radius: 6px;
}
.choices[data-type*="select-one"]::after { display: none; } /* segitiga bawaan Choices diganti chevron di background-image atas */
.choices[data-type*="select-one"] .choices__list--single {
  padding: 0;
  display: block;
  width: 100%;
  overflow: hidden;
}
.choices[data-type*="select-one"] .choices__list--single .choices__item {
  padding: 0;
  line-height: 1.5;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.choices[data-type*="select-one"]:has(select.form-select-sm) .choices__list--single .choices__item,
.choices[data-type*="select-one"]:has(select.form-select-sm) .choices__input {
  font-size: .875rem;
}
.choices[data-type*="select-one"] .choices__input {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  background: #fff;
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--yellow-default);
  box-shadow: 0 0 0 3px rgba(250, 208, 61, .15);
}