/* Dashboard - phone polish (loaded last, after the theme) */

/* Bars with no colour class used to inherit a near-black fill on the dark theme */
.progress-bar:not([class*="bg-"]){background:var(--lx-accent,#6366f1)}

/* table header: desktop layout */
.lx-table-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding:1rem 1.25rem!important;border-bottom:1px solid var(--cx-line,rgba(255,255,255,.08))!important;margin-bottom:0!important}
.lx-table-bar{display:flex;align-items:center;gap:.75rem;flex:1 1 auto}
.lx-table-bar h5{margin:0!important;display:flex;align-items:center;gap:.55rem;font-size:1rem!important;font-weight:800!important;color:#fff!important}
.lx-table-bar h5 i{font-size:1.2rem;color:#aab4ff}
.lx-table-actions{display:flex;align-items:center;gap:.4rem}
.lx-table-filters{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.lx-filter-toggle{display:none!important}
.lx-btn-icon-mobile .bx{margin-inline-end:.35rem}

/* all screens: card styling + hide toggle on desktop */
.dashboard-page-header{margin-bottom:1rem!important;padding:1.5rem 1.5rem!important}
.row.mb-4:has(.dashboard-page-header){margin-bottom:.75rem!important}
.dashboard-table-card{border-radius:18px!important;overflow:hidden}
.dashboard-table-card .card-header{border-radius:18px 18px 0 0!important}
.dashboard-table-card .card-header::before{display:none}
.dashboard-table-card .card-body{padding-top:0!important}
.dashboard-table-card .table-responsive{padding:0!important}
.lx-toggle-cell{display:none!important}

@media (max-width:768px){
  /* never let one wide element scroll the whole page sideways */
  .content-wrapper,.layout-page,.layout-container{max-width:100vw;overflow-x:clip}
  .container-xxl{padding-inline:.9rem!important}
  .container-p-y{padding-block:1rem!important}

  /* headings / page headers */
  h3,.h3{font-size:1.25rem}
  h4,.h4{font-size:1.1rem}
  .card-header{padding:.85rem 1rem;flex-wrap:wrap;gap:.5rem}
  .card-body{padding:1rem}
  .card-header .btn,.card-header .badge{flex:none}

  /* ---- mobile table header ---- */
  .lx-table-header{display:flex;flex-direction:column;gap:.55rem;border-radius:0!important;padding:.75rem 1rem!important}
  .lx-table-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%}
  .lx-table-bar h5{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dashboard-table-card .card-body{padding:.5rem .75rem!important}
  .lx-table-actions{display:flex;align-items:center;gap:.35rem;flex-shrink:0}
  .lx-table-actions .btn{min-height:34px;min-width:34px;padding:.3rem .55rem;font-size:.8rem}
  .lx-filter-toggle{display:inline-flex!important;align-items:center;justify-content:center;width:34px;padding:0!important}
  .lx-filter-toggle i{font-size:1.1rem}
  .lx-btn-icon-mobile span{display:none}
  .lx-btn-icon-mobile .bx{margin:0!important}
  .lx-table-actions .btn span{display:none}
  .lx-table-actions .btn .bx{margin:0!important}
  .lx-table-filters{display:none;flex-direction:column;gap:.4rem;width:100%;padding-top:.45rem;border-top:1px solid var(--lx-border,rgba(255,255,255,.08))}
  .lx-table-filters.show{display:flex}
  .lx-table-filters .form-control,.lx-table-filters .form-select{width:100%!important;min-width:0!important;font-size:14px!important;min-height:36px}

  /* fallback for old-style headers not yet restructured */
  .card-header:not(.lx-table-header)>.d-flex{flex-direction:column;align-items:stretch!important;width:100%;gap:.45rem}
  .card-header:not(.lx-table-header) .d-flex.gap-2{flex-direction:column;align-items:stretch!important;gap:.45rem}
  .card-header:not(.lx-table-header) .form-control,.card-header:not(.lx-table-header) .form-select{width:100%!important;min-width:0!important}
  .card-header:not(.lx-table-header) .btn{width:100%;justify-content:center}

  /* button rows that overflowed (e.g. renew / plans buttons) */
  .d-flex.gap-2,.d-flex.gap-3{flex-wrap:wrap}
  .d-flex.justify-content-between.align-items-center.mb-4{flex-wrap:wrap;gap:.75rem}

  /* forms: bigger touch targets, no iOS zoom-on-focus */
  .form-control,.form-select,input[type=text],input[type=email],input[type=number],input[type=password],input[type=search],textarea,select{font-size:16px!important;min-height:44px}
  .btn{min-height:40px}
  .input-group{flex-wrap:nowrap}

  /* modals fill the width sanely */
  .modal-dialog{margin:.75rem}
  .modal-body{padding:1rem}
  .modal-footer{flex-wrap:wrap;gap:.5rem}
  .modal-footer .btn{flex:1 1 140px}

  /* dropdown menus never wider than the screen */
  .dropdown-menu{max-width:calc(100vw - 1.5rem)}

  /* data tables become stacked cards (labels come from mobile-tables.js) */
  .table-responsive{overflow-x:visible}
  table.lx-stack{display:block;border:0;background:transparent;width:100%!important}
  table.lx-stack thead{display:none}
  table.lx-stack tbody{display:block}
  table.lx-stack tr{display:block;margin:0;padding:.45rem .7rem;border-radius:0;border:0!important;border-bottom:1px solid var(--lx-border,rgba(255,255,255,.1))!important}
  table.lx-stack tr:first-child{border-radius:10px 10px 0 0}
  table.lx-stack tr:last-child{border-radius:0 0 10px 10px;border-bottom:0!important}
  table.lx-stack tr:nth-child(odd){background:#161b22}
  table.lx-stack tr:nth-child(even){background:#1e2740}
  table.lx-stack td,table.lx-stack th{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%!important;padding:.25rem 0!important;border:0!important;border-bottom:1px dashed var(--lx-border,rgba(255,255,255,.06))!important;text-align:end!important;word-break:break-word;font-size:.8rem}
  table.lx-stack tr>*:last-child{border-bottom:0!important}
  table.lx-stack td[data-label]::before{content:attr(data-label);flex:none;max-width:40%;font-size:.68rem;font-weight:700;color:var(--lx-text-muted,#8b949e);text-align:start}
  table.lx-stack td .avatar-initial{display:none!important}
  table.lx-stack td .me-3{margin-inline-end:0!important}
  table.lx-stack td h6{font-size:.8rem!important;margin:0}
  table.lx-stack td .badge{font-size:.68rem;padding:.15rem .4rem}
  table.lx-stack td strong{font-size:.8rem}
  table.lx-stack td[colspan]{display:block;text-align:center!important}
  table.lx-stack td>*{max-width:100%}
  table.lx-stack td .dropdown-menu{text-align:start}
  table.lx-stack td.text-end,table.lx-stack td.text-center{justify-content:space-between}
  table.lx-stack td:not([data-label]){justify-content:flex-end}
  /* collapsed rows: only show first 3 cells, keep toggle visible */
  table.lx-stack tr:not(.lx-expanded) td:nth-child(n+4):not(.lx-toggle-cell){display:none}
  table.lx-stack tr:not(.lx-expanded) td:not([data-label]):not(.lx-toggle-cell):last-child{display:none}
  .lx-toggle-cell{display:block!important;padding:0!important;border:0!important}
  /* toggle button */
  .lx-more-btn{display:flex;align-items:center;justify-content:center;gap:.3rem;width:100%;padding:.25rem 0;margin-top:.15rem;border:0;background:transparent;color:var(--lx-accent,#818cf8);font-size:.72rem;font-weight:700;cursor:pointer}
  .lx-more-btn:hover{color:#a5b4fc}
  .lx-more-btn i{font-size:.85rem;transition:transform .2s}
  .lx-expanded .lx-more-btn i{transform:rotate(180deg)}
}

@media (max-width:480px){
  .container-xxl{padding-inline:.75rem!important}
  .card-header .form-control,.card-header .form-select{font-size:14px!important;min-height:38px}
  .card-header .btn-sm{font-size:.8rem;min-height:36px}
}

@media (max-width:768px){
  /* KPI scorecards: two per row, compact */
  .dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.65rem!important}
  .lexora-kpi-card .card-body{padding:.8rem!important;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
  .lexora-kpi-card .stat-icon{width:38px;height:38px;font-size:1.15rem;border-radius:10px}
  .lexora-kpi-card h3{font-size:1.25rem!important}
  .lexora-kpi-card p{font-size:.78rem;margin-bottom:.1rem!important}
  .finance-grid{gap:.6rem}
  .finance-grid>div{padding:.9rem 1rem}
}

@media (max-width:768px){
  .finance-grid>div{min-height:0}
  .bar-series{gap:.35rem}
}

@media (max-width:768px){
  /* page header cards: compact on mobile */
  .dashboard-page-header{padding:.7rem .85rem!important;margin-bottom:.5rem!important}
  .dashboard-page-header>.d-flex,.dashboard-page-header .d-flex.justify-content-between{flex-direction:column;align-items:stretch!important;gap:.3rem}
  .dashboard-page-header .btn{width:100%;justify-content:center}
  .dashboard-page-header h5{font-size:.95rem;margin-bottom:.1rem!important}
  .dashboard-page-header p{font-size:.78rem;margin:0!important}
  .row.mb-4:has(.dashboard-page-header){margin-bottom:.5rem!important}

  /* stat cards (cases/clients/... dashboards): two per row, compact */
  .row>.col-12:has(>.stat-card){flex:0 0 50%;max-width:50%;margin-bottom:.65rem!important;padding-inline:.35rem}
  .row:has(>.col-12>.stat-card){margin-inline:-.35rem}
  .stat-card .card-body{padding:.8rem!important}
  .stat-card .card-body>.d-flex{flex-direction:column;align-items:flex-start!important;margin-bottom:0!important;gap:.5rem}
  .stat-card .avatar{margin:0!important}
  .stat-card .avatar-initial{width:36px!important;height:36px!important;font-size:1.1rem}
  .stat-card h4{font-size:1.05rem!important;word-break:break-word}
  .stat-card p{font-size:.76rem}
}

@media (max-width:768px){
  /* an odd last stat card spans the full row instead of sitting alone on one side */
  .row>.col-12:has(>.stat-card):last-child:nth-child(odd){flex:0 0 100%;max-width:100%}
}