/* MG Group ERP — unified adaptive UI layer
   Loaded after the legacy stylesheet so every module shares one restrained,
   Flutter-inspired visual language without changing business logic. */
:root {
  --ui-primary: #4f46e5;
  --ui-primary-dark: #3730a3;
  --ui-primary-soft: #eef2ff;
  --ui-bg: #f5f7fb;
  --ui-card: #ffffff;
  --ui-text: #182033;
  --ui-muted: #697386;
  --ui-line: #e5e9f0;
  --ui-radius: 16px;
  --ui-shadow: 0 4px 18px rgba(15,23,42,.055);
  --primary: var(--ui-primary);
  --primary-dark: var(--ui-primary-dark);
  --primary-soft: var(--ui-primary-soft);
  --bg: var(--ui-bg);
  --surface: var(--ui-card);
  --surface-soft: #f8fafc;
  --ink: var(--ui-text);
  --ink-soft: var(--ui-muted);
  --border: var(--ui-line);
}

body:not(.login-body) { background: var(--ui-bg); color: var(--ui-text); }
button, input, select, textarea { font-family: inherit; }

/* Surfaces */
.card,
.row-card,
.pending-card,
.cf-detail-card,
.cf-order-card,
.acc-order-card,
.utility-card {
  border: 1px solid var(--ui-line);
  background: var(--ui-card);
  box-shadow: var(--ui-shadow);
}
.card { border-radius: 18px; }
.row-card { border-radius: 14px; background: #fff; }
.row-card-paid,.row-card-good { background: #f2fbf5; }
.row-card-pending { background: #fffaf0; }
.row-card-info { background: #f3f8ff; }
.row-card-bad { background: #fff5f5; }
.row-card-neutral { background: #fff; }
.card:hover,.row-card:hover { box-shadow: 0 7px 24px rgba(15,23,42,.075); }

/* Page hierarchy */
.page-header {
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--ui-shadow);
}
.page-header-green,.page-header-amber,.page-header-blue,.page-header-red,.page-header-purple { background: #fff; }
.page-header-title { color: var(--ui-text); font-size: 18px; letter-spacing: -.02em; }
.section-head h3,.card > h2:first-child,.card > h3:first-child { color: var(--ui-text); letter-spacing: -.015em; }
.help-text,.text-soft { color: var(--ui-muted); }

/* Forms */
label { color: #3c465b; font-weight: 700; }
input[type=text],input[type=number],input[type=date],input[type=time],input[type=datetime-local],
input[type=password],input[type=file],input[type=url],input[type=email],input[type=tel],input[type=month],select,textarea {
  min-height: 44px;
  border: 1px solid #d7dce5;
  border-radius: 11px;
  background: #fff;
  color: var(--ui-text);
  box-shadow: none;
}
textarea { min-height: 96px; }
input:focus,select:focus,textarea:focus {
  border-color: var(--ui-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(79,70,229,.11);
}
input::placeholder,textarea::placeholder { color: #a0a8b8; }

/* Actions */
.btn { min-height: 42px; border-radius: 11px; font-weight: 750; box-shadow: none; }
.btn-primary,.btn-accent,.segmented-btn.active {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover,.btn-accent:hover { background: var(--ui-primary-dark); }
.btn-outline { border-color: #d8dde7; background: #fff; color: #475467; }
.btn-outline:hover { border-color: #c7cddd; background: #f8fafc; }
.btn-danger { box-shadow: none; }
.btn-sm { min-height: 34px; border-radius: 9px; }
.segmented { border: 1px solid var(--ui-line); background: #f2f4f7; }

/* Data */
.table-wrap { border: 1px solid var(--ui-line); border-radius: 14px; background: #fff; }
thead th { padding: 12px; border-bottom: 1px solid var(--ui-line); background: #f7f8fc; color: #596275; }
tbody td { padding: 12px; }
tbody tr:hover { background: #fafbfe; }
.pill { border-radius: 999px; font-weight: 750; }
.progress-bar { background: #edf0f5; }
.progress-bar-fill { background: var(--ui-primary); }

/* Dialogs and sheets */
.modal-overlay,.masters-modal-overlay { background: rgba(15,23,42,.55); backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal-box,.masters-modal { border: 0; background: #fff; }
.masters-modal-head,.modal-box-head { border-bottom: 1px solid var(--ui-line); background: #fff; }
.alert { border: 0; border-radius: 12px; }

/* Navigation */
.sidebar { background: #172033; }
.sidebar a.nav-link { border-radius: 10px; }
.sidebar a.nav-link.active { background: var(--ui-primary); box-shadow: none; }
.sidebar-brand-text small { color: #a5b4fc; }
.sidebar-logout-wrap { margin-top: 22px; padding: 14px 8px 0; border-top: 1px solid rgba(255,255,255,.09); }
.sidebar-logout-link { display:flex; align-items:center; gap:11px; min-height:44px; padding:10px 12px; border-radius:11px; background:rgba(239,68,68,.1); color:#fca5a5; font-size:13px; font-weight:750; }
.sidebar-logout-link:hover { background:rgba(239,68,68,.17); color:#fff; text-decoration:none; }
.sidebar-logout-link svg { width:17px; height:17px; }

@media (min-width: 901px) {
  .content { max-width: 1540px; }
  .card { padding: 22px 24px; }
  .form-row { gap: 18px; }
  .masters-modal { max-width: 760px; height: min(78vh,760px); border-radius: 22px 22px 0 0; }
  .filter-modal-sm { max-width: 620px; height: auto; max-height: 70vh; }
  .modal-box { max-width: 520px; border-radius: 20px; }
  .row-card-fields { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }
}

@media (max-width: 900px) {
  body:not(.login-body) { background: var(--ui-bg); }
  .content { overflow-x: hidden; }
  .brand-topbar {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }
  .brand-topbar-name { min-width: 0; }
  .brand-topbar-logout {
    display: inline-flex;
    margin-left: auto;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }
  .bottom-tabbar {
    display: grid;
    grid-template-columns: repeat(var(--tab-count,5),minmax(0,1fr));
    width: auto;
    max-width: none;
    overflow: hidden;
    left: 10px;
    right: 10px;
    bottom: max(9px,env(safe-area-inset-bottom));
    padding: 5px;
    border: 1px solid rgba(226,232,240,.92);
    border-radius: 21px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 12px 34px rgba(15,23,42,.18);
  }
  .bottom-tabbar .tab-link {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 56px;
    padding: 7px 2px 5px;
    border-radius: 16px;
    overflow: hidden;
  }
  .bottom-tabbar .tab-link span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bottom-tabbar .tab-indicator {
    top: 5px;
    height: calc(100% - 10px);
    border-radius: 16px;
    background: var(--ui-primary-soft);
  }
  .bottom-tabbar .tab-link.active { color: var(--ui-primary); }
  .content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .page-header { min-height: 66px; margin-bottom: 14px; padding: 12px 14px; border-radius: 17px; }
  .page-header .icon-chip-lg { width: 40px; height: 40px; border-radius: 12px; }
  .page-header-title { font-size: 17px; }
  .card { margin-bottom: 13px; padding: 16px; border: 0; border-radius: 17px; }
  details.card > summary { padding: 16px; }
  .card-detail,.batch-detail { padding: 16px; }
  .row-list { gap: 10px; }
  .row-card { padding: 13px 14px; border: 0; border-radius: 15px; }
  details.row-card > summary { min-height: 56px; padding: 13px 14px; }
  .row-card-detail { padding: 14px; }
  .row-card-fields { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .field-value { overflow-wrap: anywhere; }
  .form-row { grid-template-columns: minmax(0,1fr); gap: 13px; }
  .filter-form { grid-template-columns: minmax(0,1fr); }
  input[type=text],input[type=number],input[type=date],input[type=time],input[type=datetime-local],
  input[type=password],input[type=file],input[type=url],input[type=email],input[type=tel],input[type=month],select,textarea { width: 100%; min-height: 48px; font-size: 16px; }
  .btn { min-height: 46px; padding: 11px 15px; }
  .btn-sm { min-height: 38px; }
  .flex-between { align-items: stretch; }
  .flex-between > .btn { flex: 1; }
  .table-wrap { margin-left: -2px; margin-right: -2px; border: 0; box-shadow: var(--ui-shadow); }
  .table-wrap table { min-width: 650px; }
  thead th,tbody td { padding: 11px; }
  .masters-modal { max-width: none; max-height: 88dvh; border-radius: 24px 24px 0 0; }
  .masters-modal-head { min-height: 58px; padding: 14px 18px; }
  .filter-modal-sm { height: auto; max-height: 78dvh; }
  /* The floating bottom tab bar sits over the sheet's bottom edge - keep the Filter button clear of it. */
  .filter-modal-body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .modal-box { width: calc(100% - 28px); border-radius: 20px; }
  .notif-item { border: 0; border-radius: 14px; background: #f7f8fb; }
  .notif-item-unread { background: var(--ui-primary-soft); }
  .pill { padding: 5px 9px; }
  .segmented { width: 100%; }
  .segmented-btn { flex: 1; justify-content: center; min-height: 42px; }
  .pagination,.pending-card-actions { gap: 8px; }

  /* Page-by-page native screen behaviour. */
  .ui-kind-form .page-header,
  .ui-kind-detail .page-header,
  .ui-kind-list .page-header,
  .ui-kind-report .page-header { position: relative; }
  .ui-kind-form .card > h2:first-child,
  .ui-kind-form .card > h3:first-child { margin-bottom: 18px; }
  .ui-kind-form .form-row > div { width: 100%; min-width: 0; }
  .ui-kind-form form > .btn:last-child,
  .ui-kind-form form > button[type=submit]:last-child { width: 100%; justify-content: center; }
  .ui-kind-list .row-list { margin: 0; }
  .ui-kind-list .row-card { min-height: 58px; }
  .ui-kind-list .row-card-heading { line-height: 1.35; }
  .ui-kind-list details.row-card > summary { border-radius: 15px; }
  .ui-kind-report .activity-card-row { margin-right: -12px; }
  .ui-kind-report .activity-card { flex: 0 0 150px; border: 0; }
  .ui-kind-report .card { overflow: hidden; }
  .ui-kind-detail .cf-detail-hero,
  .ui-kind-detail .cf-order-detail-hero { border: 0; border-radius: 18px; box-shadow: var(--ui-shadow); }
  .ui-kind-detail .row-card-fields { gap: 14px; }
  .ui-kind-detail img { max-width: 100%; height: auto; }
  .ui-kind-detail .pending-card-actions,
  .ui-kind-detail .cf-detail-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-cf-partners .row-card > summary { align-items: flex-start; }
  .page-cf-partners .row-card-heading { flex: 1; max-width: calc(100% - 26px); }
  .page-cf-partners .row-card-heading > strong { flex: 1 0 100%; }
  .page-cf-partners .cf-partner-open-hint { flex: 1 0 100%; white-space: normal; }
  .page-cf-partners .cf-edit-partner-btn,
  .page-cf-partners .cf-delete-partner-btn { flex: 0 0 auto; }
}

@media (max-width: 420px) {
  .row-card-fields { grid-template-columns: minmax(0,1fr); }
  .grid-2:not(.dashboard-grid),.grid-3,.grid-4 { grid-template-columns: minmax(0,1fr); }
  .card h2,.card h3 { line-height: 1.3; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Utilities application hub */
.utilities-hero { position:relative; display:flex; align-items:center; gap:16px; overflow:hidden; margin-bottom:26px; padding:24px; border-radius:22px; background:#172033; color:#fff; box-shadow:0 14px 30px rgba(15,23,42,.14); }
.utilities-hero::after { content:''; position:absolute; right:-42px; top:-62px; width:180px; height:180px; border-radius:50%; background:rgba(99,102,241,.22); }
.utilities-hero-icon { position:relative; z-index:1; display:grid; place-items:center; width:58px; height:58px; flex:0 0 58px; border-radius:17px; background:#4f46e5; }
.utilities-hero-icon svg { width:27px; height:27px; }
.utilities-hero-copy { position:relative; z-index:1; min-width:0; }
.utilities-eyebrow { color:#a5b4fc; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.utilities-hero h1 { margin:3px 0 2px; font-size:25px; letter-spacing:-.035em; }
.utilities-hero p { margin:0; color:#b8c1d1; font-size:13px; }
.utilities-count { position:relative; z-index:1; margin-left:auto; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.1); color:#dbe2ed; font-size:11px; font-weight:750; white-space:nowrap; }
.utilities-section-head { display:flex; align-items:end; justify-content:space-between; margin:0 2px 14px; }
.utilities-section-head h2 { margin:0; font-size:19px; letter-spacing:-.025em; }
.utilities-section-head p { margin:3px 0 0; color:var(--ui-muted); font-size:12px; }
.utilities-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.utility-app-card { position:relative; display:flex; align-items:center; gap:13px; width:100%; min-height:104px; padding:17px; overflow:hidden; border:1px solid var(--ui-line); border-radius:18px; background:#fff; color:var(--ui-text); box-shadow:var(--ui-shadow); cursor:pointer; text-align:left; transition:transform .18s ease,box-shadow .18s ease; }
.utility-app-card::after { display:none; }
.utility-app-card:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(15,23,42,.09); }
.utility-app-icon { display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; border-radius:14px; }
.utility-app-icon svg { width:21px; height:21px; }
.utility-app-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; }
.utility-app-copy strong { font-size:14px; line-height:1.25; }
.utility-app-copy small { color:var(--ui-muted); font-size:11px; line-height:1.35; }
.utility-app-arrow { display:flex; flex:0 0 auto; color:#98a2b3; }
.utility-app-arrow svg { width:16px; height:16px; }
.utility-app-card-red .utility-app-icon { background:#fff0f0; color:#dc3b2e; }
.utility-app-card-amber .utility-app-icon { background:#fff7e8; color:#d18a20; }
.utility-app-card-green .utility-app-icon { background:#ebf9ef; color:#16a34a; }
.utility-app-card-blue .utility-app-icon { background:#edf6ff; color:#2878bd; }
.utility-app-card-violet .utility-app-icon { background:#f4efff; color:#7c3aed; }
.utility-app-card-orange .utility-app-icon { background:#fff3e8; color:#e27620; }
.utility-app-card-indigo .utility-app-icon { background:#eef2ff; color:#4f46e5; }

@media (max-width:900px) {
  .utilities-hero { margin:0 0 24px; padding:19px; border-radius:21px; }
  .utilities-hero-icon { width:52px; height:52px; flex-basis:52px; }
  .utilities-hero h1 { font-size:22px; }
  .utilities-hero p { max-width:220px; }
  .utilities-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .utility-app-card { min-height:144px; padding:15px; align-items:flex-start; flex-direction:column; }
  .utility-app-icon { width:44px; height:44px; flex-basis:44px; }
  .utility-app-copy strong { font-size:13px; }
  .utility-app-copy small { font-size:10.5px; }
  .utility-app-arrow { position:absolute; right:14px; top:17px; }
}

@media (max-width:380px) {
  .utilities-count { display:none; }
  .utilities-hero p { font-size:11.5px; }
  .utility-app-card { min-height:138px; }
}

/* Date picker (assets/js/date-picker.js) - every date field shows as a
   "DATE / Today" button that opens a bottom-sheet calendar. The real
   <input type="date"> stays inside .dp-wrap, invisible, for the form. */
.dp-wrap { position:relative; width:100%; }
.dp-wrap input.dp-native { position:absolute; left:0; bottom:0; width:100%; height:100%; min-height:0; margin:0; padding:0; border:0; opacity:0; pointer-events:none; }
.dp-trigger { display:flex; align-items:center; gap:12px; width:100%; min-height:52px; margin:0; padding:7px 12px 7px 7px; border:1px solid #d7dce5; border-radius:14px; background:#fff; color:var(--ui-text); font:inherit; text-align:left; cursor:pointer; }
.dp-trigger:hover { border-color:#c3c9d6; }
.dp-trigger:focus-visible { outline:3px solid var(--ui-primary-soft); outline-offset:0; border-color:var(--ui-primary); }
.dp-trigger:disabled { cursor:default; background:#f8fafc; }
.dp-trigger:disabled .dp-trigger-chev { display:none; }
.dp-trigger-icon { display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0; border-radius:11px; background:var(--ui-primary-soft); color:var(--ui-primary); }
.dp-trigger-icon svg { width:19px; height:19px; }
.dp-trigger-text { display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.25; }
.dp-trigger-cap { font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ui-muted); }
.dp-trigger-val { font-size:15.5px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dp-trigger-val.is-empty { font-weight:500; color:var(--ui-muted); }
.dp-trigger-chev { display:flex; flex-shrink:0; color:var(--ui-muted); }
.dp-trigger-chev svg { width:18px; height:18px; }
.dp-wrap-inline { width:auto; }
.dp-wrap-inline .dp-trigger { width:auto; min-width:160px; min-height:40px; gap:9px; padding:4px 10px 4px 4px; border-radius:11px; }
.dp-wrap-inline .dp-trigger-icon { width:30px; height:30px; border-radius:9px; }
.dp-wrap-inline .dp-trigger-icon svg { width:16px; height:16px; }
.dp-wrap-inline .dp-trigger-cap { display:none; }
.dp-wrap-inline .dp-trigger-val { font-size:14px; }

.dp-overlay { position:fixed; inset:0; z-index:3200; display:flex; align-items:flex-end; justify-content:center; background:rgba(15,23,42,.48); opacity:0; visibility:hidden; transition:opacity .22s ease, visibility 0s linear .22s; }
.dp-overlay.is-open { opacity:1; visibility:visible; transition:opacity .22s ease; }
.dp-sheet { width:100%; max-width:480px; max-height:92dvh; overflow-y:auto; padding:10px 20px calc(18px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; background:#fff; box-shadow:0 -12px 40px rgba(15,23,42,.22); transform:translateY(100%); transition:transform .32s cubic-bezier(.32,.72,0,1); }
.dp-overlay.is-open .dp-sheet { transform:translateY(0); }
.dp-grip { width:40px; height:4px; margin:0 auto 14px; border-radius:4px; background:#d7dce5; }
.dp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.dp-title { font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--ui-text); }
.dp-sub { margin-top:2px; font-size:13px; color:var(--ui-muted); }
.dp-close { display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0; border:0; border-radius:50%; background:#eef0f4; color:var(--ui-text); font-size:22px; line-height:1; cursor:pointer; }
.dp-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:18px 0 10px; }
.dp-arrow { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; border:0; border-radius:50%; background:#f1f3f7; color:var(--ui-text); cursor:pointer; }
.dp-arrow svg { width:20px; height:20px; }
.dp-arrow:disabled { opacity:.4; cursor:default; }
.dp-period { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:0; border-radius:10px; background:none; color:var(--ui-text); font:inherit; font-size:17px; font-weight:800; cursor:pointer; }
.dp-period:hover { background:#f5f7fb; }
.dp-period svg { width:18px; height:18px; color:var(--ui-muted); }
.dp-weekdays,.dp-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.dp-weekdays span { padding:8px 0; text-align:center; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ui-muted); }
.dp-weekdays .dp-sun { color:var(--ui-primary); }
.dp-days { row-gap:4px; }
.dp-day { justify-self:center; width:42px; height:42px; padding:0; border:1.5px solid transparent; border-radius:50%; background:none; color:var(--ui-text); font:inherit; font-size:15px; font-weight:500; cursor:pointer; }
.dp-day:hover:not(:disabled):not(.is-picked) { background:#f1f3f7; }
.dp-day.is-other { color:#b3bac7; }
.dp-day.is-today { border-color:var(--ui-primary); color:var(--ui-primary); font-weight:700; }
.dp-day.is-current { background:var(--ui-primary-soft); color:var(--ui-primary); font-weight:700; }
.dp-day.is-picked,.dp-day.is-picked:hover { background:var(--ui-primary); border-color:var(--ui-primary); color:#fff; font-weight:700; }
.dp-day:disabled { color:#d0d5de; cursor:default; }
.dp-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:4px 0; }
.dp-cell { min-height:48px; border:1px solid var(--ui-line); border-radius:12px; background:#fff; color:var(--ui-text); font:inherit; font-size:15px; font-weight:650; cursor:pointer; }
.dp-cell:hover:not(:disabled) { background:#f5f7fb; }
.dp-cell.is-current { border-color:var(--ui-primary); background:var(--ui-primary-soft); color:var(--ui-primary); }
.dp-cell:disabled { background:#f8fafc; color:#c4cad5; cursor:default; }
.dp-foot { display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--ui-line); }
.dp-foot .btn { flex:1; min-height:48px; margin:0; }
.dp-foot .dp-cancel { flex:0 0 34%; }
.dp-foot .dp-select:disabled { border-color:#d7dce5; background:#d7dce5; color:#fff; opacity:1; cursor:default; }
.dp-clear { padding:8px 4px; border:0; background:none; color:#dc2626; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }

@media (min-width:901px) {
  .dp-overlay { align-items:center; }
  .dp-sheet { max-width:420px; border-radius:22px; transform:translateY(24px) scale(.97); transition:transform .24s ease; }
  .dp-overlay.is-open .dp-sheet { transform:none; }
  .dp-grip { display:none; }
}
@media (max-width:360px) {
  .dp-sheet { padding-left:14px; padding-right:14px; }
  .dp-day { width:38px; height:38px; }
}

/* ---- Modern sidebar ------------------------------------------------------
   Deep navy panel, brand card, icon chips on every link, a soft pill for the
   current page and tidy collapsible section headers. Visual only. */
.sidebar { background: linear-gradient(180deg, #121a2d 0%, #172033 55%, #1b2540 100%); padding: 0 12px 24px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 6px; }
.sidebar-brand { margin: 12px 0 6px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.05); }
.sidebar-brand-text { font-size: 15.5px; }
.sidebar-brand-text small { color: #a5b4fc; font-size: 10px; letter-spacing: .12em; }

.sidebar-group-label { margin-top: 6px; padding: 14px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: #6f7a97; }
.sidebar-group-label.is-collapsible { border-radius: 8px; padding-right: 8px; }
.sidebar-group-label.is-collapsible:hover { color: #c4cae0; background: rgba(255,255,255,.04); }
.sidebar-group-label.is-collapsible::after { border-color: #6f7a97; }
.sidebar-group-body { padding-bottom: 2px; }

.sidebar a.nav-link { position: relative; gap: 12px; margin: 2px 0; padding: 8px 10px; border-radius: 12px; color: #b4bbd3; font-size: 13.5px; font-weight: 500; }
.sidebar a.nav-link svg { box-sizing: content-box; width: 16px; height: 16px; padding: 6px; border-radius: 9px; background: rgba(255,255,255,.06); opacity: 1; transition: background .15s ease, color .15s ease; }
.sidebar a.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar a.nav-link:hover svg { background: rgba(255,255,255,.12); }
.sidebar a.nav-link.active { background: linear-gradient(90deg, rgba(99,102,241,.32), rgba(99,102,241,.10)); color: #fff; font-weight: 650; box-shadow: inset 0 0 0 1px rgba(129,140,248,.28); }
.sidebar a.nav-link.active svg { background: var(--ui-primary); color: #fff; box-shadow: 0 4px 10px rgba(79,70,229,.45); }
.sidebar a.nav-link.active::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: #818cf8; }
.sidebar-logout-wrap { margin-top: 20px; }

/* Two popups never stack: while the app's own popup (e.g. Tasks Pending) is open the hammer
   popups wait, and appear as soon as it is closed. */
body:has(#appModalPopup) #hammerNotice,
body:has(#appModalPopup) #hammerPopup { display: none; }
/* Dashboard card icons that arrive as bare SVGs must never blow up to full size. */
.batch-summary-progress-label svg { width: 16px; height: 16px; }

/* Sidebar on phones / small screens: contained scroll, no sideways overflow, finger-sized rows. */
.sidebar { overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sidebar a.nav-link { min-height: 44px; min-width: 0; }
.sidebar a.nav-link span { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
@media (max-width: 899px) {
  .sidebar { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .sidebar-brand { margin-top: calc(10px + env(safe-area-inset-top)); }
  .sidebar-group-label.is-collapsible { min-height: 40px; }
  .sidebar a.nav-link.active::before { left: -8px; }
}

.tp-row { display:flex; align-items:center; gap:6px; }
.tp-row select { width:auto; flex:1 1 0; min-width:0; min-height:44px; margin:0; padding:6px 8px; text-align:center; }
.tp-row .tp-sep { font-weight:700; }
.tp-wrap input.dp-native { display:none; }