/* =========================================================
   AKS CRM — phone & tablet layer
   Below 992px the sidebar becomes a slide-in drawer and a bottom tab bar appears.
   Below 768px tables switch to card lists, filters move into a bottom sheet,
   and dialogs open as bottom sheets.
   ========================================================= */
:root {
  --tabbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* things that only exist on phones are hidden on desktop */
.tabbar, .mbar { display: none; }
.m-list { display: none; }
.filter-btn { display: none; }

/* no hover lift on touch screens */
@media (hover: none) {
  .card:hover, .kpi:hover, .tile:hover, a.tile:hover, a.mini-stat:hover { transform: none; box-shadow: var(--shadow); }
}

/* =========================== < 992px =========================== */
@media (max-width: 991.98px) {
  html { -webkit-tap-highlight-color: transparent; }
  body { overscroll-behavior-y: none; }

  /* drawer */
  .sidebar { width: min(86vw, 320px); box-shadow: 24px 0 60px -20px rgba(0,0,0,.5); padding-top: var(--safe-t); }
  .sb-user { display: flex; align-items: center; gap: 12px; margin: 4px 16px 6px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.06); color: #fff; }
  .sb-user small { color: var(--side-text); font-size: 11.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar .nav-link { padding: 12px 14px; font-size: 15px; }

  /* top bar */
  .topbar { padding: calc(8px + var(--safe-t)) 10px 8px; gap: 6px; min-height: calc(58px + var(--safe-t)); }
  .top-actions { gap: 2px; }
  .top-actions .btn-icon { width: 40px; height: 40px; }
  .user-chip { padding: 2px; }
  .top-search { display: none; }
  body.search-open .top-search { display: flex; align-items: center; flex: 1; max-width: none; }
  body.search-open .top-search input { font-size: 16px; padding-top: 9px; padding-bottom: 9px; }
  body.search-open .m-title, body.search-open .top-actions, body.search-open .topbar > .btn-icon { display: none !important; }

  .app-footer { display: none; }
  .content { padding: 16px 14px 28px; }
  .has-tabbar .content, .has-mbar .content { padding-bottom: calc(var(--tabbar-h) + 28px + var(--safe-b)); }

  /* titles: the top bar already shows the page title */
  .page-head { margin-bottom: 14px; gap: 10px; align-items: center; }
  .page-head h1, .page-head .breadcrumb, .content > .breadcrumb { display: none; }
  .page-head .sub { margin-top: 0; font-size: 12.5px; }
  .page-head > div:last-child:not(:first-child) { display: flex; gap: 8px; flex-wrap: nowrap; }

  /* bottom tab bar */
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    height: calc(var(--tabbar-h) + var(--safe-b)); padding: 0 6px var(--safe-b);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid var(--border);
  }
  .tab-item {
    height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--muted); font-size: 10.5px; font-weight: 650; letter-spacing: 0;
  }
  .tab-item .tab-ico { position: relative; font-size: 21px; line-height: 1; height: 24px; display: grid; place-items: center; }
  .tab-item.active { color: var(--primary); }
  .tab-item.active .tab-ico::before {
    content: ''; position: absolute; inset: -4px -14px; border-radius: 999px; background: var(--primary-soft); z-index: -1;
  }
  .tab-item .tab-ico { isolation: isolate; }
  .tab-badge {
    position: absolute; top: -6px; left: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--bad); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center;
    border: 2px solid var(--surface);
  }
  .tab-fab {
    justify-self: center; align-self: center; width: 54px; height: 54px; border-radius: 18px; border: 0; margin-top: -26px;
    color: #fff; font-size: 24px; display: grid; place-items: center;
    background: linear-gradient(145deg, #3f74ec, #1b4fcc);
    box-shadow: 0 14px 26px -10px rgba(33,86,214,.8), inset 0 1px 0 rgba(255,255,255,.3);
    transition: transform .18s var(--ease);
  }
  .tab-fab:active { transform: scale(.94); }

  /* contextual action bar on record pages */
  .mbar {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    padding: 10px 12px calc(10px + var(--safe-b));
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid var(--border);
  }
  .mbar .btn { flex: 1; min-height: 46px; flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 4px; border-radius: 14px; }
  .mbar .btn i { font-size: 18px; }
  .mbar .btn-primary { flex: 1.4; flex-direction: row; font-size: 14px; gap: 8px; }

  /* bottom sheets (offcanvas-bottom) */
  .sheet.offcanvas-bottom, .offcanvas-lg.offcanvas-bottom {
    height: auto; max-height: 88vh; border-radius: 24px 24px 0 0; border: 0;
    padding-bottom: var(--safe-b); box-shadow: 0 -20px 60px -20px rgba(0,0,0,.45);
  }
  .sheet-handle { width: 40px; height: 5px; border-radius: 99px; background: var(--border-strong); margin: 10px auto 2px; }
  .quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 8px; }
  .quick-tile {
    display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border);
  }
  .quick-tile .kpi-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; margin-bottom: 4px; }
  .quick-tile b { font-size: 15px; }
  .quick-tile small { color: var(--muted); font-size: 12px; }
  .quick-tile:active { transform: scale(.98); }

  /* record header */
  .profile-head { padding: 18px 16px 16px; gap: 14px; }
  .profile-head h2 { font-size: 20px; }
  .profile-head .avatar.xl { width: 58px; height: 58px; font-size: 20px; }
  .profile-meta { gap: 6px 14px; font-size: 12.5px; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-strip > div { padding: 12px 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .stat-strip > div:nth-child(2n) { border-right: 0; }
  .stat-strip > div:nth-last-child(-n+2):nth-child(odd), .stat-strip > div:last-child { border-bottom: 0; }

  /* tabs stick under the top bar and scroll sideways */
  .nav-tabs-x { position: sticky; top: calc(58px + var(--safe-t)); z-index: 6; background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; padding: 0 6px; scrollbar-width: none; }
  .nav-tabs-x::-webkit-scrollbar { display: none; }
  .nav-tabs-x .nav-link { padding: 13px 10px; }

  .stepper .step { min-width: 84px; font-size: 11px; }
  .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .dl-grid dd { font-size: 13.5px; }
  .card-body { padding: 16px; }
  .card-header { padding: 14px 16px; }

  /* forms */
  .sticky-actions {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 1040;
    padding: 10px 14px calc(10px + var(--safe-b)); border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
  }
  .sticky-actions .btn { flex: 1; min-height: 46px; font-size: 15px; }
  .sticky-actions .form-check { flex-basis: 100%; }
  .no-tabbar .content { padding-bottom: calc(96px + var(--safe-b)); }
  .form-section > .fs-head { padding: 14px 16px; }
  .form-section > .fs-body { padding: 16px; }

  /* dashboard */
  .dash-head { margin-bottom: 16px; }
  .dash-tools { width: 100%; }
  .dash-tools .seg { flex: 1 1 100%; }
  .dash-tools .form-select { flex: 1; min-width: 0; }
  .hero { padding: 22px 20px 18px; border-radius: 22px; }
  .hero-stats b { font-size: 16px; }
  .hero-stats > div + div { padding-left: 12px; }
  .hero-spark { height: 70px; }
  .strip {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 62%); grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -14px 14px; padding: 2px 14px 6px; scrollbar-width: none;
  }
  .strip::-webkit-scrollbar { display: none; }
  .strip > * { scroll-snap-align: start; }
  .chart-xl { height: 260px; } .chart-md { height: 240px; }
  .panel { border-radius: 18px; }
  .panel-head { padding: 16px 16px 2px; }
  .panel-body { padding: 12px 16px 16px; }
  .panel .list-row { padding: 12px 16px; }
  .agenda { flex-wrap: nowrap; overflow-x: auto; margin: 12px -14px 0; padding: 0 14px 2px; scrollbar-width: none; }
  .agenda::-webkit-scrollbar { display: none; }
  .agenda a { flex-shrink: 0; }
}

/* =========================== < 768px =========================== */
@media (max-width: 767.98px) {
  /* 16px inputs stop iOS from zooming in on focus */
  .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px; min-height: 44px; }
  textarea.form-control { min-height: 0; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }

  /* segmented controls scroll sideways instead of wrapping */
  .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg a { white-space: nowrap; flex-shrink: 0; padding: 7px 12px; }

  /* list pages: cards instead of tables */
  .m-list { display: block; }
  .d-table-desktop { display: none !important; }
  .m-card {
    display: block; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text); position: relative;
  }
  .m-card:last-child { border-bottom: 0; }
  .m-card:active { background: var(--surface-2); }
  .m-card .m-row { display: flex; align-items: center; gap: 12px; }
  .m-card .m-main { flex: 1; min-width: 0; }
  .m-card .m-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-card .m-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-card .m-amt { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  .m-card .m-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-left: 44px; font-size: 12px; color: var(--text-2); }
  .m-card .m-actions { display: flex; gap: 8px; margin-top: 10px; padding-left: 44px; }
  .m-card .m-actions .btn { min-height: 34px; padding: 4px 12px; font-size: 12.5px; border-radius: 10px; }
  .m-card .avatar { width: 32px; height: 32px; }

  /* filters live in a bottom sheet */
  .filter-btn { display: inline-flex; }
  .list-toolbar { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .list-toolbar .m-search { flex: 1; position: relative; }
  .list-toolbar .m-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
  .list-toolbar .m-search input { padding-left: 36px; border-radius: 12px; }
  .filter-sheet .filter-bar { flex-direction: column; align-items: stretch; background: transparent; border: 0; padding: 0; gap: 12px; }
  .filter-sheet .filter-bar > div { width: 100%; min-width: 0 !important; }
  .filter-sheet .filter-bar .form-select, .filter-sheet .filter-bar .form-control { min-width: 0; width: 100%; }
  .filter-sheet .filter-bar .d-flex.gap-2 { position: sticky; bottom: 0; background: var(--surface); padding: 10px 0 4px; }
  .filter-sheet .filter-bar .d-flex.gap-2 .btn { flex: 1; min-height: 46px; }
  .filter-sheet .f-search { display: none; }
  .filter-count { background: var(--primary); color: #fff; border-radius: 99px; font-size: 10.5px; padding: 0 6px; margin-left: 2px; }

  /* table cards that stay tables get tighter padding */
  .table > :not(caption) > * > * { padding: 10px 12px; }

  /* dialogs become bottom sheets */
  .modal-dialog { margin: 0; position: fixed; left: 0; right: 0; bottom: 0; max-width: none; width: 100%; }
  .modal.fade .modal-dialog { transform: translateY(100%); transition: transform .32s var(--ease); }
  .modal.show .modal-dialog { transform: none; }
  .modal-content { border-radius: 24px 24px 0 0; border: 0; max-height: 92vh; overflow-y: auto; padding-bottom: var(--safe-b); }
  .modal-content::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 99px; background: var(--border-strong); margin: 10px auto 0; }
  .modal-header { padding: 10px 18px 12px; }
  .modal-footer { position: sticky; bottom: 0; background: var(--surface); }
  .modal-footer .btn { flex: 1; min-height: 46px; }

  /* dashboard team table -> cards */
  .team-row.head { display: none; }
  .team-row { grid-template-columns: repeat(4, 1fr); gap: 10px 8px; padding: 14px 16px; }
  .team-row .t-name { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .team-row .num { text-align: left; font-size: 15px; }
  .team-row .num::before { content: attr(data-label); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 650; }
  .team-row .t-prog { grid-column: 1 / -1; }
  .team-row .t-over { display: none; }

  /* employees cards */
  .profile-head > .d-flex.gap-2:last-child { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .profile-head > .d-flex.gap-2:last-child::-webkit-scrollbar { display: none; }

  .empty-state { padding: 30px 12px; }
  .pagination .page-link { padding: .45rem .8rem; }
}

/* =========================== small phones =========================== */
@media (max-width: 379.98px) {
  .hero-value { font-size: 34px; }
  .hero-stats b { font-size: 14.5px; }
  .tab-item { font-size: 9.5px; }
  .dl-grid { grid-template-columns: 1fr; }
}

/* installed as an app (standalone): a little more top room for the status bar */
@media (display-mode: standalone) and (max-width: 991.98px) {
  .topbar { background: color-mix(in srgb, var(--surface) 92%, transparent); }
}

/* login on phones */
.auth-m-brand { display: none; }
@media (max-width: 991.98px) {
  .auth-form { min-height: 100vh; padding: calc(24px + var(--safe-t)) 18px calc(24px + var(--safe-b)); align-content: center; gap: 22px;
    background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%); }
  .auth-m-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .auth-m-brand .brand-mark { width: 56px; height: 56px; font-size: 24px; border-radius: 16px; }
  .auth-m-brand b { font-size: 18px; }
  .auth-m-brand small { color: var(--muted); }
  .auth-card { padding: 22px; border-radius: 22px; }
  .auth-card .form-control-lg { font-size: 16px; }
}

/* stretched-link cards: keep action buttons clickable on top */
.m-card .m-actions, .m-card .m-meta a, .m-card .m-actions a, .m-card .m-actions button { position: relative; z-index: 2; }
.filter-sheet .offcanvas-body > form { flex: 1; }
@media (min-width: 768px) { .filter-sheet { position: static; } }
@media (max-width: 767.98px) {
  .fu-tabs .mini-stat { padding: 10px 12px; gap: 10px; }
  .fu-tabs .mini-stat .kpi-icon { width: 32px; height: 32px; font-size: 14px; }
  .fu-tabs .mini-stat b { font-size: 17px; }
}
@media (max-width: 767.98px) {
  .fs-toggle { cursor: pointer; user-select: none; }
  .fs-toggle .fs-chev { margin-left: auto; color: var(--muted); transition: transform .25s var(--ease); }
  .fs-toggle .btn ~ .fs-chev { margin-left: 8px; }
  .form-section.m-collapsed > .fs-body { display: none; }
  .form-section.m-collapsed > .fs-head { border-bottom: 0; }
  .form-section.m-collapsed .fs-chev { transform: rotate(-90deg); }
  .form-section { margin-bottom: 12px; }
}
@media (max-width: 991.98px) {
  .page-head > form { width: 100%; flex-wrap: wrap; }
  .page-head > form > div { flex: 1 1 40%; }
  .page-head > form .btn { flex: 1; }
  .page-head .seg { max-width: 100%; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
}