/* ==========================================================
   ABHome — Tenant Management Design System
   One accent, neutral ground.
   ========================================================== */

/* ---- Tokens ---- */
:root{
  --bg: #F8F9FB;
  --bg-subtle: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F9FAFB;
  --surface-3: #F3F4F6;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --text: #0F172A;
  --text-2: #334155;
  --text-3: #64748B;
  --text-4: #94A3B8;
  --accent: #0F172A;
  --accent-hover: #1E293B;
  --accent-soft: #F1F5F9;
  --success: #0F6B3A;
  --success-bg: #ECFDF5;
  --success-bd: #A7F3D0;
  --danger: #991B1B;
  --danger-bg: #FEF2F2;
  --danger-bd: #FECACA;
  --warning: #92400E;
  --warning-bg: #FFFBEB;
  --warning-bd: #FDE68A;
  --info: #1E40AF;
  --info-bg: #EFF6FF;
  --info-bd: #BFDBFE;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 10px -2px rgba(15,23,42,.08), 0 2px 6px -2px rgba(15,23,42,.06);
  --header-h: 56px;
  --content-max: 1280px;
}

/* ---- Base ---- */
html{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body{
  background: var(--bg) !important;
  color: var(--text-2) !important;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  letter-spacing: -0.011em;
}
a{ color: var(--text) !important; text-decoration: none; }
a:hover{ color: var(--text) !important; }
h1,h2,h3,h4,h5,h6{ color: var(--text) !important; letter-spacing: -0.02em; font-weight: 650; }
p{ color: var(--text-2); }

/* Kill legacy wrappers */
.hk-wrapper, .hk-pg-wrapper{ background: transparent !important; }
.hk-pg-wrapper{ padding-top: 0 !important; min-height: auto !important; }
.saas-page .container-fluid{ padding: 0 !important; }

/* ==========================================================
   Shell / Header — solid, no blur, product-like
   ========================================================== */
.saas-shell{ min-height: 100vh; display: flex; flex-direction: column; }
.saas-header{
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
}
.saas-header__inner{
  width: 100%; max-width: none; margin: 0;
  padding: 0 20px;
  display: flex; align-items: center; gap: 12px;
}
.saas-brand{ display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }
.saas-brand__logo{ height: 24px; width: auto; object-fit: contain; display: block; }
.saas-brand__divider{ width: 1px; height: 20px; background: var(--border); flex-shrink: 0; display: inline-block; }
/* Wordmark (agency header) */
.saas-brand__wordmark{ display: flex; flex-direction: column; line-height: 1; gap: 1px; }
.saas-brand__title{ font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1; }
.saas-brand__sub{ font-size: 10px; font-weight: 600; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
@media (max-width: 1550px){ .saas-brand__wordmark{ display: none; } }

/* Nav — compact so it does not collide with header actions */
.saas-nav{ display: flex; align-items: center; gap: 1px; flex: 1; min-width: 0; overflow: visible; flex-wrap: nowrap; }
.saas-nav .dropdown{ position: relative; }
.saas-nav__link{
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 8px;
  font-size: 12.5px; font-weight: 500; color: var(--text-3) !important;
  border-radius: 7px; white-space: nowrap; text-decoration: none !important;
  border: 1px solid transparent;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.saas-nav__link:hover{ background: var(--surface-3); color: var(--text) !important; }
.saas-nav__link.is-active{ background: var(--text); color: #fff !important; border-color: var(--text); }
.saas-nav__link.is-active:hover{ background: var(--accent-hover) !important; color: #fff !important; }
.saas-nav__link svg, .saas-nav__link i{ opacity: .9; }

/* Dropdowns */
.saas-nav .dropdown-menu{
  margin-top: 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-md) !important;
  padding: 6px !important;
  min-width: 200px;
  z-index: 100;
  background: #fff !important;
}
.saas-nav .dropdown-item{
  font-size: 13px !important; font-weight: 450 !important;
  color: var(--text-2) !important;
  padding: 7px 10px !important; border-radius: 7px !important;
  transition: background .12s ease;
}
.saas-nav .dropdown-item:hover, .saas-nav .dropdown-item:focus{ background: var(--surface-3) !important; color: var(--text) !important; }
.saas-nav .dropdown-item:active{ background: #E2E8F0 !important; }

/* Mega menu */
.saas-mega{ min-width: 420px !important; padding: 10px !important; }
.saas-mega.show{ display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.saas-mega--3col.show{ grid-template-columns: 1fr 1fr; min-width: 500px !important; }
.saas-mega__col{ min-width: 0; }
.saas-mega__label{ font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-4); padding: 8px 10px 4px; }
.saas-mega__sep{ height:1px; background: var(--border); margin: 8px 10px; }
@media (max-width: 1330px){
  .saas-mega.show, .saas-mega--3col.show{ grid-template-columns: 1fr; min-width: 220px !important; }
}

/* Header actions / user */
.saas-header__actions{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.saas-cmdkTrigger__label{ display: inline; }
@media (max-width: 1400px){ .saas-cmdkTrigger__label{ display: none; } .saas-cmdkTrigger kbd{ display: none; } .saas-cmdkTrigger{ padding: 0 8px; min-width: 32px; justify-content: center; } }
.saas-user{
  display: flex; align-items: center; gap: 10px;
  padding: 3px 3px 3px 10px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.saas-user:hover{ border-color: var(--border-strong); background: var(--surface-2); }
.saas-user__meta{ text-align: right; line-height: 1.1; }
.saas-user__name{ font-size: 13px; font-weight: 600; color: var(--text); display: block; }
.saas-user__role{ font-size: 11px; color: var(--text-3); display: block; }
.saas-user__avatar{
  width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center;
  background: var(--text); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  flex-shrink: 0;
}
.saas-iconbtn{
  width: 32px; height: 32px; display: inline-grid; place-items: center;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: var(--text-3); cursor: pointer; transition: all .14s ease;
}
.saas-iconbtn:hover{ background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }

.saas-burger{ display: none; }
@media (max-width: 1580px){
  .saas-burger{ display: inline-grid; }
  .saas-nav{ display: none; }
  .saas-nav.is-open{
    display: flex; position: absolute; left: 0; right: 0; top: var(--header-h);
    background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
    padding: 12px 16px; flex-wrap: wrap; gap: 6px; z-index: 39;
    overflow: visible;
  }
}
@media (min-width: 1581px) and (max-width: 1650px){
  .saas-header__inner{ gap: 10px; }
}
/* ==========================================================
   Page container / Page head
   ========================================================== */
.saas-page{
  width: 100%; max-width: var(--content-max); margin: 0 auto;
  padding: 24px 20px 36px;
  flex: 1;
}
@media (max-width: 640px){ .saas-page{ padding: 16px 14px 28px; } }

.saas-pagehead{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.saas-pagehead > div:first-child{ min-width: 0; flex: 1 1 320px; }
.saas-pagehead__title, .saas-pagehead__desc, .saas-pagehead__eyebrow{ overflow-wrap: anywhere; word-break: break-word; }
.saas-pagehead__title{ overflow: hidden; text-overflow: ellipsis; }
.saas-pagehead__title{
  font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: var(--text);
  line-height: 1.2; margin: 0;
}
.saas-pagehead__desc{ font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.4; }
.saas-pagehead__eyebrow{
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-4);
  margin-bottom: 4px;
}
.saas-pagehead__actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Breadcrumb under title (optional) */
.saas-crumb{ font-size: 12px; color: var(--text-3); display: flex; gap: 6px; align-items: center; }
.saas-crumb a{ color: var(--text-3) !important; }
.saas-crumb a:hover{ color: var(--text) !important; text-decoration: underline !important; text-underline-offset: 2px; }
.saas-crumb__sep{ color: var(--border-strong); }

/* ==========================================================
   Cards / Stats
   ========================================================== */
.saas-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.saas-card__hd{
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  min-width: 0;
  flex-wrap: wrap;
}
.saas-card__hd > div:first-child{ min-width: 0; }
.saas-card__title{ font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.saas-card__body{ padding: 16px; }
.saas-card__foot{ padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); display: flex; justify-content: flex-end; gap: 8px; }

/* Stat */
.saas-stat{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; gap: 8px;
  min-height: 96px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.saas-stat:hover{ border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.saas-stat__label{ font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-4); }
.saas-stat__value{ font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.saas-stat__foot{ display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-3); margin-top: auto; }
.saas-stat__pct{ display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.saas-stat--hero{ padding: 16px; }
.saas-stat--hero .saas-stat__value{ font-size: 26px; }

.saas-divider{ height: 1px; background: var(--border); margin: 16px 0; }
.saas-sectionLabel{ font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-4); margin: 18px 0 10px; }
.saas-sectionLabel:first-child{ margin-top: 0; }

/* Grids */
.saas-grid{ display: grid; gap: 12px; }
.saas-grid--kpi{ grid-template-columns: repeat(12, 1fr); }
.saas-grid--kpi > *{ grid-column: span 2; }
@media (max-width: 1180px){ .saas-grid--kpi > *{ grid-column: span 3; } }
@media (max-width: 768px){ .saas-grid--kpi > *{ grid-column: span 6; } }
@media (max-width: 480px){ .saas-grid--kpi > *{ grid-column: span 12; } }

.saas-chartCard{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: center; }
@media (max-width: 768px){ .saas-chartCard{ grid-template-columns: 1fr; } }

/* Agency dashboard */
.saas-dashKpi{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 16px;
}
.saas-dashKpi .saas-stat__label{ font-size: 11px; }
.saas-stat__value--money{
  font-size: clamp(16px, 1.6vw, 21px);
  letter-spacing: -0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.saas-stat__value--success{ color: var(--success); }
.saas-stat__link,
.saas-card__link{
  font-size: 12px; font-weight: 600; color: var(--text-3);
  text-decoration: none; white-space: nowrap;
}
.saas-stat__link:hover,
.saas-card__link:hover{ color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.saas-stat__link:focus-visible,
.saas-card__link:focus-visible{ outline: 2px solid #0F172A; outline-offset: 2px; border-radius: 4px; }

.saas-dashGrid{
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
.saas-card__sub{ font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }

.saas-trend{
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px; align-items: end; min-height: 168px; padding-top: 8px;
}
.saas-trend__item{ display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.saas-trend__count{ font-size: 11px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.saas-trend__barWrap{ height: 112px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.saas-trend__bar{
  width: 100%; max-width: 34px; height: var(--bar-height, 0%); min-height: 4px;
  background: var(--text); border-radius: 6px 6px 2px 2px;
  transition: height .2s ease, background .14s ease;
}
.saas-trend__bar.is-zero{ background: var(--surface-3); }
.saas-trend__label{ font-size: 11px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.saas-trend__summary{
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3);
}
.saas-trend__summary strong{ color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

.saas-recent{ display: flex; flex-direction: column; gap: 8px; }
.saas-recent__item{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: inherit; text-decoration: none; min-width: 0;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.saas-recent__item:hover{
  background: var(--surface); border-color: var(--border-strong);
  box-shadow: var(--shadow-xs); color: inherit; text-decoration: none;
}
.saas-recent__item:focus-visible{ outline: 2px solid #0F172A; outline-offset: 2px; }
.saas-recent__main{ min-width: 0; flex: 1 1 auto; }
.saas-recent__name{
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.saas-recent__meta{
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px;
  font-size: 11px; color: var(--text-3); line-height: 1.35;
}
.saas-recent__meta span{ min-width: 0; overflow-wrap: anywhere; }
.saas-dashRecent .saas-card__body{ padding: 12px; }

@media (max-width: 1180px){
  .saas-dashKpi{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px){
  .saas-dashGrid{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px){
  .saas-trend{ gap: 6px; min-height: 150px; }
  .saas-trend__barWrap{ height: 96px; }
  .saas-trend__count,
  .saas-trend__label{ font-size: 10px; }
  .saas-dashKpi .saas-stat{ min-height: auto; }
}
@media (max-width: 480px){
  .saas-dashKpi{ grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================
   Controls — toolbar, inputs, buttons
   ========================================================== */
.saas-toolbar{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.saas-input, .saas-select{
  height: 34px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 450;
  box-shadow: var(--shadow-xs);
  outline: none; transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.saas-input:focus, .saas-select:focus{ border-color: var(--text); box-shadow: 0 0 0 3px rgba(15,23,42,.08); }
.saas-input::placeholder{ color: var(--text-4); }
.saas-input:disabled, .saas-select:disabled{ background: var(--surface-3); color: var(--text-4); }

/* Buttons */
.btn{
  border-radius: 8px !important;
  font-weight: 600 !important; font-size: 13px !important;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-xs) !important;
  border: 1px solid transparent !important;
  padding: 7px 13px !important;
  line-height: 1.35 !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px !important;
  white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; vertical-align: middle;
  max-width: 100%;
}
.btn .fa, .btn [data-feather], .btn i{ flex-shrink: 0; }
.btn .fa:not([style*="margin"]){ margin-right: 0 !important; }
.btn:active{ transform: translateY(0.5px); }
.btn-sm{ padding: 5px 10px !important; font-size: 12.5px !important; }
.btn-xs{ padding: 4px 8px !important; font-size: 12px !important; }
.btn-primary, .btn-gradient-primary, .btn-gradient-danger, .btn-gradient-warning, .btn-gradient-info{
  background: var(--text) !important; color: #fff !important; border-color: var(--text) !important;
}
.btn-primary:hover, .btn-gradient-primary:hover{ background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.btn-primary:focus{ box-shadow: 0 0 0 3px rgba(15,23,42,.18) !important; }
.btn-secondary, .btn-default, .btn-light, .btn-outline-secondary{
  background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important;
}
.btn-secondary:hover{ background: var(--surface-3) !important; border-color: var(--border-strong) !important; color: var(--text) !important; }
.btn-outline{ background: transparent !important; border-color: var(--border) !important; color: var(--text) !important; }
.btn-ghost{ background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--text-3) !important; }
.btn-ghost:hover{ background: var(--surface-3) !important; color: var(--text) !important; }
.btn-danger{ background: #DC2626 !important; border-color: #DC2626 !important; color: #fff !important; }
.btn-danger:hover{ background: #B91C1C !important; border-color: #B91C1C !important; }

/* Icon-only button in tables */
.saas-action{
  width: 28px; height: 28px; display: inline-grid; place-items: center;
  border: 1px solid var(--border); border-radius: 7px; background: #fff;
  color: var(--text-3) !important; font-size: 12px; transition: all .14s ease;
  text-decoration: none !important;
}
.saas-action:hover{ background: var(--surface-3); color: var(--text) !important; border-color: var(--border-strong); }
.saas-action--danger:hover{ background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger) !important; }

/* ==========================================================
   Tables — precise, Stripe-inspired, dense
   ========================================================== */
.saas-tableWrap{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.table{ margin: 0 !important; color: var(--text-2) !important; border-collapse: separate; border-spacing: 0; }
.table thead th{
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.05em !important; text-transform: uppercase !important;
  color: var(--text-3) !important;
  padding: 9px 12px !important;
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.table tbody td{
  padding: 10px 12px !important;
  border-top: 1px solid #F1F5F9 !important;
  font-size: 13px !important; vertical-align: middle !important;
  color: var(--text-2) !important;
  line-height: 1.45;
}
.table tbody tr:first-child td{ border-top: none !important; }
.table tbody tr:hover td{ background: #F8FAFC !important; }
.table tfoot td{ background: var(--surface-2) !important; font-weight: 600; border-top: 1px solid var(--border) !important; }
.table .btn, .table a{ font-size: 12.5px !important; }
/* Wrapper: keep horizontal table scroll usable */
.hk-sec-wrapper[style*="overflow:hidden"] .table-responsive{ overflow-x: auto; overflow-y: hidden; }
.table-responsive{ -webkit-overflow-scrolling: touch; overflow-x: auto; }
.table-responsive::-webkit-scrollbar{ height: 6px; }
.table-responsive::-webkit-scrollbar-thumb{ background: #E2E8F0; border-radius: 999px; }

/* Empty state inside table */
.table tbody td.text-center{ color: var(--text-3) !important; padding: 28px 12px !important; }
.table tbody td[colspan]{ text-align: center; }

/* Status pill for tables */
.saas-pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid var(--border); background: var(--surface-3); color: var(--text-2);
  white-space: nowrap;
}
.saas-pill::before{ content:""; width:6px; height:6px; border-radius:999px; background: var(--text-4); display:inline-block; }
.saas-pill--success{ background: var(--success-bg); border-color: var(--success-bd); color: var(--success); }
.saas-pill--success::before{ background: #10B981; }
.saas-pill--danger{ background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger); }
.saas-pill--danger::before{ background: #EF4444; }
.saas-pill--warning{ background: var(--warning-bg); border-color: var(--warning-bd); color: var(--warning); }
.saas-pill--warning::before{ background: #F59E0B; }
.saas-pill--info{ background: var(--info-bg); border-color: var(--info-bd); color: var(--info); }
.saas-pill--info::before{ background: #3B82F6; }
.saas-pill--neutral{ background: #F8FAFC; border-color: #E2E8F0; color: var(--text-3); }

/* ==========================================================
   Legacy panels — hk-sec-wrapper harmonized (no HTML changes needed)
   ========================================================== */
.hk-sec-wrapper{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 16px !important;
}
.hk-sec-wrapper + .hk-sec-wrapper{ margin-top: 12px; }
.hk-sec-wrapper .hk-sec-title{
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
  color: var(--text-3) !important; margin-bottom: 12px !important;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.hk-pg-header{ margin-bottom: 14px !important; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hk-pg-title{ font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.025em !important; line-height: 1.2 !important; }

/* Ensure old row filter + table layout collapses nicely on mobile */
@media (max-width: 991px){
  .saas-page .row > [class*="col-md-3"],
  .saas-page .row > [class*="col-lg-3"]{ margin-bottom: 14px; }
}

/* Filters: tighten */
.hk-sec-wrapper .form-group{ margin-bottom: 12px !important; }
.hk-sec-wrapper .form-group:last-child{ margin-bottom: 0 !important; }

/* ==========================================================
   Forms — consistent, accessible
   ========================================================== */
.form-control{
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  height: 34px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  background: #fff !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color .14s ease, box-shadow .14s ease;
  padding: 6px 11px !important;
}
.form-control::placeholder{ color: var(--text-4) !important; }
.form-control:focus{ border-color: var(--text) !important; box-shadow: 0 0 0 3px rgba(15,23,42,.08) !important; outline: none !important; }
textarea.form-control{ height: auto !important; min-height: 88px; padding-top: 8px !important; line-height: 1.5 !important; }
select.form-control{ padding-right: 28px !important; }
.form-control[readonly], .form-control:disabled{ background: var(--surface-3) !important; color: var(--text-3) !important; }

label, .control-label, .col-form-label{
  font-size: 11.5px !important; font-weight: 600 !important; color: var(--text-2) !important;
  letter-spacing: -0.01em; margin-bottom: 4px !important; line-height: 1.3;
}
label.required::after, .required label::after{ content:" *"; color: #DC2626; font-weight: 700; }
.help-block, .help-text{ font-size: 11.5px !important; color: var(--text-3) !important; margin-top: 4px !important; line-height: 1.4; }
.has-error .form-control, .form-group.has-error .form-control, .has-error .select2-selection{
  border-color: #FCA5A5 !important; background: #FFFBFB !important;
}
.has-error .form-control:focus{ box-shadow: 0 0 0 3px rgba(220,38,38,.1) !important; border-color: #EF4444 !important; }
.has-error .help-block{ color: #DC2626 !important; }
.has-success .form-control{ border-color: #6EE7B7 !important; }

/* ActiveForm error summary */
.error-summary{ background: var(--danger-bg) !important; border: 1px solid var(--danger-bd) !important; border-radius: 8px !important; padding: 12px 14px !important; color: var(--danger) !important; font-size: 13px !important; }
.error-summary ul{ margin: 6px 0 0 18px !important; }

/* File input */
input[type="file"].form-control{ padding: 6px !important; height: auto !important; line-height: 1; }

/* Checkbox / radio */
.form-check-input{ width: 16px; height: 16px; border: 1px solid var(--border-strong) !important; }
.form-check-label{ font-weight: 500 !important; color: var(--text-2) !important; }

/* Select2 harmonized */
.select2-container--default .select2-selection--single{
  height: 34px !important; border: 1px solid var(--border) !important; border-radius: 8px !important;
  background: #fff !important; box-shadow: var(--shadow-xs);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height: 32px !important; font-size: 13px !important; color: var(--text) !important; padding-left: 11px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height: 32px !important; right: 6px !important; }
.select2-dropdown{ border: 1px solid var(--border) !important; border-radius: 10px !important; box-shadow: var(--shadow-md) !important; overflow: hidden; }
.select2-results__option{ font-size: 13px !important; padding: 7px 10px !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background: var(--surface-3) !important; color: var(--text) !important; }

/* Input group */
.input-group-text{ background: var(--surface-2) !important; border: 1px solid var(--border) !important; color: var(--text-3) !important; font-size: 13px !important; border-radius: 8px !important; }
.input-group .form-control{ border-radius: 8px !important; }
.input-group .form-control:not(:first-child){ border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group .form-control:not(:last-child){ border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* Detail view (Yii DetailView) */
table.detail-view th{ background: var(--surface-2) !important; color: var(--text-3) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase !important; width: 180px; }
table.detail-view td{ font-size: 13px !important; color: var(--text-2) !important; }

/* ==========================================================
   Pagination — compact
   ========================================================== */
.pagination{ gap: 4px; margin: 0; flex-wrap: wrap; }
.pagination .page-item .page-link{
  border: 1px solid var(--border) !important;
  border-radius: 7px !important; color: var(--text-2) !important;
  font-size: 13px !important; font-weight: 500 !important;
  padding: 5px 9px !important; background: var(--surface) !important;
  min-width: 30px; text-align: center; line-height: 1.3;
  box-shadow: var(--shadow-xs);
  transition: all .12s ease;
}
.pagination .page-item .page-link:hover{ background: var(--surface-3) !important; border-color: var(--border-strong) !important; color: var(--text) !important; }
.pagination .page-item.active .page-link{
  background: var(--text) !important; border-color: var(--text) !important; color: #fff !important; box-shadow: var(--shadow-xs) !important;
}
.pagination .page-item.disabled .page-link{ opacity: .5; background: var(--surface-2) !important; }

/* ==========================================================
   Alerts — calm, not loud
   ========================================================== */
.alert{
  border-radius: 8px !important; border: 1px solid var(--border) !important;
  font-size: 13px !important; line-height: 1.5 !important;
  padding: 10px 12px !important; display: flex; gap: 10px; align-items: flex-start;
  box-shadow: var(--shadow-xs);
}
.alert .close{ font-size: 16px !important; opacity: .5 !important; padding: 0 4px !important; line-height: 1 !important; }
.alert .close:hover{ opacity: .9 !important; }
.alert-success{ background: var(--success-bg) !important; border-color: var(--success-bd) !important; color: var(--success) !important; }
.alert-danger{ background: var(--danger-bg) !important; border-color: var(--danger-bd) !important; color: var(--danger) !important; }
.alert-info{ background: var(--info-bg) !important; border-color: var(--info-bd) !important; color: var(--info) !important; }
.alert-warning{ background: var(--warning-bg) !important; border-color: var(--warning-bd) !important; color: var(--warning) !important; }
.alert a{ color: inherit !important; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }

/* ==========================================================
   Footer — quiet
   ========================================================== */
.saas-footer{
  border-top: 1px solid var(--border);
  background: #fff;
  padding: 12px 20px;
  color: var(--text-4); font-size: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.saas-footer a{ color: var(--text-3) !important; }
.saas-footer a:hover{ color: var(--text) !important; }

/* ==========================================================
   Login — centered, trustworthy, not marketing
   ========================================================== */
.saas-login{
  min-height: 100vh; display: grid; place-items: center;
  padding: 24px 16px; background: var(--bg);
}
.saas-login__card{
  width: 100%; max-width: 400px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.saas-login__head{ padding: 24px 24px 0; text-align: left; }
.saas-login__brand{ display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.saas-login__brand img{ height: 26px; display: block; }
.saas-login__kicker{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-4); margin-bottom: 8px; }
.saas-login__title{ font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.2; }
.saas-login__sub{ font-size: 13px; color: var(--text-3); margin-top: 4px; line-height: 1.45; }
.saas-login__body{ padding: 18px 24px 24px; }
.saas-login__foot{
  padding: 12px 24px; background: var(--surface-2); border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-4); text-align: center; line-height: 1.4;
}
.saas-login .form-control{ height: 38px !important; }
.saas-login .btn{ height: 38px; font-size: 13px !important; }
.saas-login .form-group{ margin-bottom: 12px; }
.hk-auth-wrapper{ background: transparent !important; }

/* ==========================================================
   Modals
   ========================================================== */
.modal-content{ border: 1px solid var(--border) !important; border-radius: 12px !important; box-shadow: var(--shadow-md) !important; overflow: hidden; }
.modal-header{ padding: 14px 16px !important; border-bottom: 1px solid var(--border) !important; background: #fff !important; }
.modal-title{ font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--text) !important; }
.modal-body{ padding: 16px !important; font-size: 13px !important; color: var(--text-2) !important; }
.modal-footer{ padding: 12px 16px !important; border-top: 1px solid var(--border) !important; background: var(--surface-2) !important; gap: 8px; }

/* ==========================================================
   Breadcrumbs / misc
   ========================================================== */
.breadcrumb{ background: transparent !important; padding: 0 !important; margin: 0 0 12px !important; font-size: 12px !important; gap: 6px; }
.breadcrumb-item + .breadcrumb-item::before{ content:"/" !important; color: var(--border-strong) !important; padding: 0 6px !important; }
.breadcrumb-item a{ color: var(--text-3) !important; }
.breadcrumb-item.active{ color: var(--text) !important; font-weight: 500; }

/* Badge restrained */
.badge{ font-weight: 600 !important; letter-spacing: -0.01em; border-radius: 999px !important; padding: 3px 8px !important; font-size: 11px !important; border: 1px solid transparent; }
.badge-primary{ background: var(--text) !important; color: #fff !important; }
.badge-secondary{ background: var(--surface-3) !important; color: var(--text-2) !important; border-color: var(--border) !important; }
.badge-success{ background: var(--success-bg) !important; color: var(--success) !important; border-color: var(--success-bd) !important; }
.badge-danger{ background: var(--danger-bg) !important; color: var(--danger) !important; border-color: var(--danger-bd) !important; }

/* Utilities */
.muted{ color: var(--text-3) !important; }
.mono{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Daterangepicker polish */
.daterangepicker{ border-radius: 12px !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; font-family: 'Inter', sans-serif !important; }
.daterangepicker .ranges li.active{ background: var(--text) !important; }
.daterangepicker td.active, .daterangepicker td.active:hover{ background: var(--text) !important; }

/* Feather crisp */
.feather{ width: 15px; height: 15px; stroke-width: 1.9; }

/* DataTables / Bootstrap-table etc neutralize */
.bootstrap-table .fixed-table-container{ border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; overflow: hidden; }

/* Tables: header nowrap, body wraps */
table thead th{ white-space: nowrap; }
table tbody td{ white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
table tbody td.mono, table tbody td[data-label="#"], td:last-child{ white-space: nowrap; overflow-wrap: normal; word-break: normal; }
td.truncate, th.truncate{ max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; }
@media (max-width: 991px){ td.truncate{ max-width: 180px; } }

/* Action cell */
td:last-child{ white-space: nowrap; }
.table tbody td:last-child a{
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border: 1px solid transparent; border-radius: 7px;
  color: var(--text-3) !important; background: transparent;
  margin: 0 1px; vertical-align: middle;
  transition: all .12s ease;
}
.table tbody td:last-child a:hover{ background: var(--surface-3); border-color: var(--border); color: var(--text) !important; }
.table tbody td:last-child a:has(.fa-trash):hover, .table tbody td a[data-method="post"]:hover{ background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger) !important; }
td .fa{ font-size: 12px; line-height: 1; }

/* Improve old .borderless */
.borderless td, .borderless th{ border: none !important; }

/* ==========================================================
   Filter collapsible + chips
   ========================================================== */
.saas-filterToggle{
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--text-2); font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-xs); cursor: pointer;
}
.saas-filterToggle:hover{ background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
.saas-filterToggle .feather{ width: 13px; height: 13px; }
.saas-filterPanel{ transition: opacity .14s ease, transform .14s ease; }
.saas-filterPanel.is-collapsed{ display: none !important; }
@media (max-width: 991px){
  .saas-filterPanel.is-collapsed{ display: none !important; }
  .saas-filterPanel:not(.is-collapsed){ animation: saasFadeIn .14s ease; }
}
@keyframes saasFadeIn{ from{opacity:0; transform: translateY(-4px)} to{opacity:1; transform:none} }
.saas-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; min-width: 0; max-width: 100%; overflow: hidden; }
.saas-chip{
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px;
  background: #F8FAFC; border: 1px solid #E2E8F0;
  font-size: 12px; font-weight: 500; color: var(--text-2);
}
.saas-chip__x{ width:18px; height:18px; display:grid; place-items:center; border-radius:999px; background:#fff; border:1px solid var(--border); cursor:pointer; font-size:10px; line-height:1; }
.saas-chip__x:hover{ background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger); }
.saas-resultMeta{ font-size: 12px; color: var(--text-3); display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width: 0; max-width: 100%; }
.saas-resultMeta strong{ color: var(--text); font-weight:600; }
.saas-empty{
  text-align:center; padding: 28px 16px; color: var(--text-3);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-width: 0; max-width: 100%; overflow: visible;
}
.saas-empty__icon{ width:36px; height:36px; border-radius:10px; background:#F8FAFC; border:1px solid #E2E8F0; display:grid; place-items:center; color: var(--text-4); font-size:16px; flex-shrink: 0; }
.saas-empty__title{ font-size:13px; font-weight:600; color: var(--text); max-width: 100%; overflow-wrap: anywhere; }
.saas-empty__desc{ font-size:12.5px; color: var(--text-3); max-width: 420px; line-height:1.5; overflow-wrap: anywhere; }
.saas-empty .btn{ max-width: 100%; white-space: nowrap !important; flex-shrink: 0; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.35; padding: 6px 14px !important; overflow: visible !important; text-overflow: clip; }
.saas-empty .btn.btn-sm{ padding: 6px 14px !important; font-size: 12.5px !important; }
/* Empty state inside table colspan */
.table tbody td[colspan] .saas-empty{ margin: 0 auto; width: 100%; }
.table tbody td[colspan]{ overflow: visible !important; padding: 0 !important; }
.table-responsive:has(.saas-empty){ overflow: visible !important; }

/* ==========================================================
   Card-list mobile <640px — label Indonesia via data-label
   ========================================================== */
@media (max-width: 640px){
  .saas-table--cards thead{ display: none !important; }
  .saas-table--cards, .saas-table--cards tbody, .saas-table--cards tr, .saas-table--cards td{ display: block; width: 100% !important; }
  .saas-table--cards tr{
    border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #fff; box-shadow: var(--shadow-xs);
  }
  .saas-table--cards tr:last-child{ margin-bottom: 0; }
  .saas-table--cards tbody td{
    display: flex !important; justify-content: space-between; align-items: center; gap: 12px;
    padding: 9px 12px !important; border-top: 1px solid #F1F5F9 !important; white-space: normal !important; text-align: right !important;
  }
  .saas-table--cards tbody td[data-label="#"]{ display: none !important; }
  .saas-table--cards tbody td:nth-child(2){ border-top: none !important; background: var(--surface-2); font-weight: 600; color: var(--text) !important; }
  .saas-table--cards tbody td::before{
    content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing:.05em; text-transform: uppercase; color: var(--text-3); text-align:left; flex-shrink:0; max-width:45%;
  }
  .saas-table--cards tbody td:last-child{ justify-content: flex-end; border-top: 1px solid var(--border) !important; }
  .saas-table--cards tbody td:last-child::before{ content: "Aksi"; }
  .saas-table--cards tbody td[colspan]{ display: block !important; text-align: center !important; }
  .saas-table--cards tbody td[colspan]::before{ display:none; }
}

/* ==========================================================
   Command Palette (Cmd+K) — rekomendasi: navigasi + aksi
   ========================================================== */
.saas-cmdk{ position: fixed; inset: 0; z-index: 80; display: none; }
.saas-cmdk.is-open{ display: block; }
.saas-cmdk__backdrop{ position:absolute; inset:0; background: rgba(15,23,42,.34); }
.saas-cmdk__panel{
  position: relative; max-width: 560px; margin: 12vh auto 0; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-md); overflow: hidden;
}
.saas-cmdk__head{ display:flex; align-items:center; gap:10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.saas-cmdk__input{ flex:1; border:none; outline:none; font-size:13px; color: var(--text); background: transparent; }
.saas-cmdk__input::placeholder{ color: var(--text-4); }
.saas-cmdk__kbd{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--text-4); border:1px solid var(--border); background: var(--surface-2); border-radius:6px; padding:2px 6px; }
.saas-cmdk__list{ max-height: 360px; overflow:auto; padding: 6px; }
.saas-cmdk__groupLabel{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--text-4); padding: 8px 8px 4px; }
.saas-cmdk__item{
  display:flex; align-items:center; gap:10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text-2); font-size:13px;
}
.saas-cmdk__item:hover, .saas-cmdk__item.is-active{ background: var(--surface-3); color: var(--text); }
.saas-cmdk__item kbd{ margin-left:auto; font-size:10px; border:1px solid var(--border); border-radius:5px; padding:1px 5px; background:#fff; color: var(--text-4); }
.saas-cmdk__hint{ padding: 8px 12px; border-top:1px solid var(--border); background: var(--surface-2); font-size:11.5px; color: var(--text-3); display:flex; gap:12px; flex-wrap:wrap; }
.saas-cmdkTrigger{
  display: inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px;
  border:1px solid var(--border); border-radius:8px; background:#fff; color: var(--text-3); font-size:12px; font-weight:500; cursor:pointer; box-shadow: var(--shadow-xs);
}
.saas-cmdkTrigger:hover{ background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.saas-cmdkTrigger kbd{ font-size:10px; border:1px solid var(--border); border-radius:5px; padding:1px 5px; background: var(--surface-2); color: var(--text-4); }

/* ==========================================================
   Accessibility — focus visible & reduced motion
   ========================================================== */
:focus-visible{ outline: 2px solid #0F172A; outline-offset: 2px; border-radius: 2px; }
.btn:focus-visible, .saas-action:focus-visible, .saas-filterToggle:focus-visible, .saas-cmdkTrigger:focus-visible, .form-control:focus-visible{ outline:2px solid #0F172A; outline-offset:2px; box-shadow:0 0 0 3px rgba(15,23,42,.12) !important; }
.saas-nav__link:focus-visible{ outline:2px solid #0F172A; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
/* Ensure skip link if present */
.saas-skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.saas-skip:focus{ left:12px; top:8px; width:auto; height:auto; padding:8px 12px; background:#0F172A; color:#fff !important; border-radius:8px; z-index:100; }

@media (max-width: 991px){ .saas-stickyCol{ position: static !important; } }