/* ============================================
   STYLE.FULL.CSS
   Main stylesheet for inventory management system
   
   ORGANIZATION:
   1. CSS Variables & Theme
   2. Base Styles & Reset
   3. Layout & Grid Systems
   4. Components (Buttons, Cards, Forms, etc.)
   5. Navigation (Banner, Topnav, Responsive Menu)
   6. Tables & Data Display
   7. Dashboard & Module Styles
   8. Responsive Breakpoints:
      - Desktop: > 1366px (full desktop menu)
      - Tablet: ≤ 1366px (responsive menu)
      - Mobile: ≤ 1024px (stacked layouts)
      - Small Mobile: ≤ 768px (mobile optimizations)
   ============================================ */

:root{
  --bg:#0b0f14; --card:#111823; --card-alt:#0e1535;
  --muted:#94a3b8; --text:#e6eef8;
  --pri:#4da3ff; --pri-hover:#3a86e9;
  --ok:#2ec27e; --warn:#ffcc00; --danger:#ff6b6b;
  --line:#273d5e; --link:#cfe3ff;
  --input:#0f1722; --input-focus:#17314d;
  /* Table colors */
  --table-header-bg:#0f1722; --table-header-color:#dbeafe;
  --table-row-odd:#162338; --table-row-hover:#132235;
  --table-border:#152135;
  /* Font sizes */
  --font-xs:0.75em; --font-sm:0.85em; --font-base:1em; --font-md:0.9em;
  --font-lg:1.1em; --font-xl:1.2em; --font-2xl:1.3em; --font-3xl:1.4em;
  --font-4xl:1.5em; --font-5xl:1.8em; --font-6xl:2.8em;
}

/* Light theme */
[data-theme="light"]{
  --bg:#f5f7fa; --card:#ffffff; --card-alt:#f0f4f8;
  --muted:#64748b; --text:#1e293b;
  --pri:#2563eb; --pri-hover:#1d4ed8;
  --ok:#059669; --warn:#d97706; --danger:#dc2626;
  --line:#e2e8f0; --link:#1e40af;
  --input:#ffffff; --input-focus:#e0e7ff;
  /* Table colors - light theme */
  --table-header-bg:#f1f5f9; --table-header-color:#1e293b;
  --table-row-odd:#edf2f7; --table-row-hover:#e2e8f0;
  --table-border:#e2e8f0;
}

/* Base */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,Segoe UI,Roboto,Arial}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.container{max-width:1800px;margin:28px auto;padding:0 18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.tenants-users-grid{display:grid;grid-template-columns:1fr 2fr;gap:20px;align-items:start}
.tenants-users-grid>.card{min-width:0;overflow:hidden}
.tenants-users-grid>.card:first-child .user-form-row{grid-template-columns:1fr !important}
.tenants-users-grid>.card:first-child .user-form-row-password{grid-template-columns:1fr 1fr auto !important}
.form-grid-align {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
}
.form-grid-align > label,
.form-grid-align > div {
  margin: 0 !important;
}
.form-grid-align .flex-1 {
  flex: 1;
  min-width: 180px;
}

.inspection-start-date-wrap{
  display:flex;
  gap:4px;
  align-items:center;
  flex-wrap:nowrap;
  min-width:0;
}

.inspection-start-date-wrap .inspection-start-date{
  flex:1;
  min-width: 100px;
}

.inspection-start-date-wrap .quick-date{
  min-width: 28px;
  flex-shrink:0;
  font-size:0.75rem;
  padding:2px 6px;
}

.inspection-row .inspections-remove-btn{
  flex: 0 0 auto;
  align-self: end;
}

.inspections-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
}

@media (max-width: 768px){
   .inspection-start-date-wrap{
     flex-wrap:wrap;
   }
   .inspection-start-date-wrap .inspection-start-date{
     min-width: 0;
     width: 100%;
   }
 }
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Mobile container improvements */
@media (max-width:768px){
  .container{padding:0 12px;margin:16px auto}
  .card{padding:14px;margin-bottom:12px}
  .card h2{font-size:1.3em}
  .tenants-users-grid{grid-template-columns:1fr}
}

/* Dashboard responsive layout */
.dashboard-overview{
  width:100%;
  margin-bottom:16px;
}
/* .dashboard-items - Use .w-full utility class instead */
.dashboard-filters{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  align-items:end;
  min-width:600px;
}

/* Overview Content Layout - KPIs and Status Breakdown side-by-side on desktop */
.overview-content-layout{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

/* ============================================
   MODULE SHARED STYLES
   Common patterns for all modules
   ============================================ */

/* Module Overview Card */
.module-overview{
  width:100%;
  margin-bottom:16px;
}

/* Module Overview Header */
.module-overview-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
/* .module-overview-header h2 - Use .m-0 utility class instead */

/* Module KPI Grid - Flexible column count */
.module-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:20px;
  align-items: stretch;
}
.module-kpi-grid.kpi-4-cols{
  grid-template-columns:repeat(4,1fr);
}
.module-kpi-grid.kpi-3-cols{
  grid-template-columns:repeat(3,1fr);
}
.module-kpi-grid.kpi-2-cols{
  grid-template-columns:repeat(2,1fr);
  max-width: 400px;
  margin: 0 auto 20px auto;
  justify-content: center;
}

/* Specific centering for Apparatus & Stations card */
.card .module-kpi-grid.kpi-2-cols {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
  max-width: none !important;
  margin: 0 0 20px 0 !important;
}

.card .module-kpi-grid.kpi-2-cols .kpi {
  flex: 0 0 calc(50% - 6px) !important;
  max-width: calc(50% - 6px) !important;
}
.module-kpi-grid.kpi-1-cols{
  grid-template-columns:repeat(1,1fr);
}
.module-kpi-grid.kpi-6-cols{
  grid-template-columns:repeat(6,1fr);
}
.module-kpi-grid.kpi-7-cols{
  grid-template-columns:repeat(7,1fr);
}
.module-kpi-grid.kpi-8-cols{
  grid-template-columns:repeat(8,1fr);
}
.module-kpi-grid.kpi-10-cols{
  grid-template-columns:repeat(10,1fr);
}

/* Module KPI Item - shared base styles */
.module-kpi-grid .kpi,
.module-type-grid .kpi{
  text-align:center;
  padding:6px 2px;
  border:2px solid var(--line);
  border-radius:12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 100%;
}
.module-kpi-grid .kpi strong{
  font-size:1.8em;
  display:block;
  line-height:1.2;
  margin-top: auto;
}
.module-type-grid .kpi strong{
  font-size:1.6em;
  display:block;
  line-height:1.2;
  margin-top: auto;
}
.module-kpi-grid .kpi .muted,
.module-type-grid .kpi .muted{
  display:block;
  margin-bottom:4px;
  font-size:0.85em;
  line-height:1.3;
  padding:0 2px;
}
.module-kpi-grid .kpi .muted{
  white-space:nowrap;
}
.module-type-grid .kpi .muted{
  white-space:normal;
  word-wrap:break-word;
  word-break:break-word;
}

/* Module Type Counts Grid (for breakdowns by type) */
.module-type-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

/* Module Items Section */
/* .module-items - Use .w-full utility class instead */

/* Legacy support - map old classes to new shared classes */
.overview-kpis-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  flex:1;
  margin-bottom:0;
}
.overview-kpis-grid .kpi{
  padding:8px 4px;
  border:1px solid var(--line);
  border-radius:12px;
}
.overview-kpis-grid .kpi strong{
  font-size:1.8em;
  line-height:1.2;
}
.overview-kpis-grid .kpi .muted{
  font-size:0.85em;
  margin-bottom:4px;
  white-space:normal;
  word-wrap:break-word;
  word-break:break-word;
  line-height:1.3;
  padding:0 2px;
}

/* ============================================
   TABLET BREAKPOINT (Galaxy Tab A, iPad, etc.)
   Targets screens 1024px - 1366px
   ============================================ */
@media (max-width:1366px){
  /* Tighter container padding */
  .container{padding:0 14px;margin:20px auto}
  
  /* Reduce KPI grid columns for better fit */
  .module-kpi-grid.kpi-10-cols{grid-template-columns:repeat(5,1fr)}
  .module-kpi-grid.kpi-8-cols{grid-template-columns:repeat(4,1fr)}
  .module-kpi-grid.kpi-7-cols{grid-template-columns:repeat(4,1fr)}
  .module-kpi-grid.kpi-6-cols{grid-template-columns:repeat(3,1fr)}
  .overview-kpis-grid{grid-template-columns:repeat(3,1fr)}
  
  /* Slightly smaller KPI text */
  .module-kpi-grid .kpi strong,
  .overview-kpis-grid .kpi strong{font-size:1.5em}
  
  /* Dashboard filters: 4 columns instead of 5 */
  .dashboard-filters{grid-template-columns:repeat(4,1fr)}
  
  /* Reduce table min-width for tablet */
  .table-wrapper .table{min-width:500px}
  
  /* Tighter card padding */
  .card{padding:16px}
  
  /* Button sizes handled in buttons.css */
  
  /* Reduce table column padding for better fit */
  #items-table thead th{padding:10px 4px !important;font-size:0.9em}
  #items-table tbody td{padding:10px 4px !important}
  
  /* Hide Asset ID and Type columns on tablet for better fit */
  #items-table .col-asset-id,
  #items-table .col-manufacturer,
  #items-table .col-type{display:none}
  
  /* Force table to fixed layout for better column control */
  #items-table{table-layout:fixed !important;width:100% !important}
  
  /* Checkbox column - force very narrow width, left-aligned on tablet */
  #items-table thead th:first-child,
  #items-table thead th:nth-child(1),
  #items-table tbody td:first-child,
  #items-table tbody td:nth-child(1),
  #items-table .table-checkbox-header,
  #items-table thead th.table-checkbox-header{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    padding:8px 4px 8px 6px !important;
    box-sizing:border-box !important;
    text-align:left !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }
  
  /* Make checkbox input smaller and left-aligned */
  #items-table input[type="checkbox"],
  #items-table .item-checkbox,
  #items-table #select-all-items{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    max-width:18px !important;
    margin:0 !important;
    display:block !important;
    flex-shrink:0 !important;
  }
  
  /* Set equal widths for all visible data columns (6 columns) */
  /* Checkbox = 30px fixed, remaining space divided equally among 6 columns */
  #items-table.table-has-checkbox .table-col-location,
  #items-table.table-has-checkbox .table-col-status,
  #items-table.table-has-checkbox .table-col-lifespan,
  #items-table.table-has-checkbox .table-col-end-of-life,
  #items-table.table-has-checkbox .table-col-date-destroyed{
    width:calc(((100% - 30px) * 0.7) / 5) !important;
    min-width:0 !important;
    overflow-wrap:break-word !important;
    word-wrap:break-word !important;
  }
  #items-table.table-has-checkbox .table-col-name,
  #items-table.table-has-checkbox td.table-name-cell{
    width:calc((100% - 30px) * 0.3) !important;
    min-width:12ch !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  #items-table.table-no-checkbox .table-col-location,
  #items-table.table-no-checkbox .table-col-status,
  #items-table.table-no-checkbox .table-col-lifespan,
  #items-table.table-no-checkbox .table-col-end-of-life,
  #items-table.table-no-checkbox .table-col-date-destroyed{
    width:calc(70% / 5) !important;
    min-width:0 !important;
    overflow-wrap:break-word !important;
    word-wrap:break-word !important;
  }
  #items-table.table-no-checkbox .table-col-name,
  #items-table.table-no-checkbox td.table-name-cell{
    width:30% !important;
    min-width:12ch !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  
  /* Show note about hidden columns */
  #items-table-hidden-note{display:block !important;margin-bottom:12px;padding:8px 12px;background:rgba(77,163,255,0.1);border-left:3px solid var(--pri);border-radius:4px;font-size:0.9em}
}

/* Mobile dashboard */
@media (max-width:1024px){
  .overview-collapse-btn{
    display:inline-flex !important;
  }
  .dashboard-overview-body{
    max-height:2000px;
    overflow:hidden;
  }
  .dashboard-overview-body.is-collapsed{
    max-height:0;
    opacity:0;
    pointer-events:none;
  }

  .dashboard-filters{
    grid-template-columns:repeat(2,1fr);
    min-width:0;
    gap:10px;
  }
  
  /* KPI grids maintain 4 columns but with adjusted spacing */
  .module-kpi-grid.kpi-4-cols{
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    align-items: stretch;
  }
  
  /* Ensure other KPI grid types maintain their layout */
  .module-kpi-grid.kpi-3-cols{
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    align-items: stretch;
  }
  .module-kpi-grid.kpi-2-cols{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    align-items: stretch;
    max-width: 400px;
    margin: 0 auto 20px auto;
  }
  .module-kpi-grid.kpi-1-cols{
    grid-template-columns:repeat(1,1fr);
    gap:10px;
    align-items: stretch;
  }
  
  /* Ensure KPI grids don't get affected by flex stacking */
  .overview-content-layout .module-kpi-grid{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
  }
  
  /* Ensure dashboard KPI grids maintain layout */
  .dashboard-grid .module-kpi-grid.kpi-4-cols{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    align-items: stretch !important;
  }
  
  /* Overview content stacks vertically on mobile */
  .overview-content-layout{
    flex-direction:column;
    gap:16px;
  }
  .overview-status-breakdown{
    padding-left:0 !important;
    border-left:none !important;
    padding-top:16px !important;
    border-top:1px solid var(--border) !important;
  }
  
  /* Condensed overview on mobile */
  .dashboard-overview{
    padding:12px !important;
  }
  .dashboard-overview h2{
    font-size:1.2em !important;
    margin-bottom:12px !important;
  }
  .overview-kpis-grid{
    grid-template-columns:repeat(6,1fr);
    gap:6px;
    margin-bottom:0;
  }
  .overview-kpis-grid .kpi{
    padding:6px 2px;
  }
  .overview-kpis-grid .kpi strong{
    font-size:1.4em !important;
    line-height:1.2;
  }
  .overview-kpis-grid .kpi .muted{
    font-size:0.7em;
    margin-bottom:2px;
  }
  .overview-status-breakdown{
    font-size:0.8em !important;
    margin-top:0 !important;
  }
  .overview-status-breakdown h3{
    font-size:0.85em !important;
    margin-bottom:4px !important;
  }
  .overview-status-breakdown > div{
    margin-bottom:2px !important;
  }
  
  /* Module KPI Grids - Mobile responsive (all collapse to 3 columns) */
  .module-kpi-grid,
  .module-type-grid,
  .overview-kpis-grid{
    grid-template-columns:repeat(3,1fr) !important;
    gap:8px !important;
    align-items: stretch !important;
  }
  .module-kpi-grid .kpi,
  .module-type-grid .kpi,
  .overview-kpis-grid .kpi{
    padding:6px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-height: 100% !important;
  }
  .module-kpi-grid .kpi strong,
  .module-type-grid .kpi strong,
  .overview-kpis-grid .kpi strong{
    font-size:1.4em !important;
    line-height:1.2 !important;
    margin-top: auto !important;
  }
  .module-kpi-grid .kpi .muted,
  .module-type-grid .kpi .muted,
  .overview-kpis-grid .kpi .muted{
    font-size:0.7em !important;
    margin-bottom:2px !important;
  }
}

/* ============================================
   BANNER RESPONSIVE MENU STYLES
   Mobile menu for banner navigation
   ============================================ */

/* Desktop (>1366px): Show desktop icons, hide mobile menu */
@media (min-width: 1367px) {
  .banner-icons-desktop {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  
  .banner-icons-mobile {
    display: none;
  }
}

/* Tablet and Mobile (≤1366px): Show mobile menu, hide desktop icons */
@media (max-width: 1366px) {
  .banner-icons-desktop {
    display: none;
  }
  
  .banner-icons-mobile {
    display: inline-block;
  }
}

/* Mobile menu container */
.banner-menu-container {
  position: relative;
  display: inline-block;
}

/* Menu toggle button styles moved to buttons.css */

/* Menu dropdown */
.banner-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 200px;
  z-index: 1000;
  padding: 4px;
}

/* Tablet (769px-1366px): Make menu dropdown wider */
@media (min-width: 769px) and (max-width: 1366px) {
  .banner-menu-dropdown {
    min-width: 320px !important;
    max-width: 400px !important;
    width: auto !important;
  }
}

/* Mobile (≤768px): Menu width is fine as is */

.banner-menu-item {
  display: block;
  padding: 10px 12px;
  color: var(--text);
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.banner-menu-item:hover {
  background-color: var(--card);
  text-decoration: none;
}

.banner-menu-item.active {
  background-color: rgba(77, 163, 255, 0.15);
  color: var(--pri);
}

.banner-menu-item-link {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-size: inherit;
  font-family: inherit;
}

.banner-menu-item-link:hover {
  background-color: var(--card);
}

.banner-menu-item span {
  margin-right: 8px;
  font-size: 1.1em;
}

/* Light theme for menu */
[data-theme="light"] .banner-menu-dropdown {
  background: var(--card-alt);
  border-color: var(--line);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .banner-menu-item:hover,
[data-theme="light"] .banner-menu-item-link:hover {
  background-color: var(--card);
}

[data-theme="light"] .banner-menu-item.active {
  background-color: rgba(37, 99, 235, 0.1);
  color: var(--pri);
}

/* Hide columns on inspections "All Items" table for mobile */
@media (max-width:768px){
  /* Make search field larger in responsive view - more room available now */
  .banner-search-container {
    flex: 1 1 auto;
    min-width: 0;
  }
  .banner-search-container #global-search-input.table-search-input {
    min-width: 250px;
    flex: 1 1 auto;
    max-width: none;
    width: auto;
  }
  
  /* Consolidated: Header button containers stack on mobile */
  .card-header-actions,
  .module-overview-header{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
  }
  .card-actions-buttons,
  .module-overview-header > div{
    flex-wrap:wrap !important;
    width:100% !important;
  }
  
  #inspections-all-items-table .col-insp-type,
  #inspections-all-items-table .col-insp-assigned,
  #inspections-all-items-table .col-insp-inspection-type,
  #inspections-all-items-table .col-insp-frequency,
  #inspections-all-items-table .col-insp-last,
  #inspections-all-items-table .col-insp-next{
    display:none;
  }
  /* Make table fit mobile width without horizontal scroll */
  #inspections-all-items-table{
    table-layout:auto !important;
    width:100% !important;
  }
  #inspections-all-items-table thead th,
  #inspections-all-items-table tbody td{
    width:auto !important;
  }
  /* Checkbox column - keep it narrow */
  #inspections-all-items-table thead th:first-child,
  #inspections-all-items-table tbody td:first-child{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    padding:8px 4px !important;
  }
  #inspections-all-items-table thead th:not(:first-child):not(.col-insp-type):not(.col-insp-assigned):not(.col-insp-inspection-type):not(.col-insp-frequency):not(.col-insp-last):not(.col-insp-next),
  #inspections-all-items-table tbody td:not(:first-child):not(.col-insp-type):not(.col-insp-assigned):not(.col-insp-inspection-type):not(.col-insp-frequency):not(.col-insp-last):not(.col-insp-next){
    min-width:80px;
  }
  /* Consolidated: Inspections tables - table layout and width */
  #inspections-all-items-table,
  #inspections-needs-config-table,
  #overdue-inspections-table{
    table-layout:auto !important;
    width:100% !important;
  }
  #inspections-all-items-table thead th,
  #inspections-all-items-table tbody td,
  #inspections-needs-config-table thead th,
  #inspections-needs-config-table tbody td,
  #overdue-inspections-table thead th,
  #overdue-inspections-table tbody td{
    width:auto !important;
  }
  
  /* Checkbox columns - keep narrow */
  #inspections-all-items-table thead th:first-child,
  #inspections-all-items-table tbody td:first-child,
  #inspections-needs-config-table thead th:first-child,
  #inspections-needs-config-table tbody td:first-child{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    padding:8px 4px !important;
  }
  
  /* Hide Type and Manufacturer columns on "Items Needing Configuration" table */
  #inspections-needs-config-table .col-needs-config-type,
  #inspections-needs-config-table .col-needs-config-manufacturer{
    display:none;
  }

  /* Hide Model column on "Items Needing Configuration" table */
  #inspections-needs-config-table thead th:nth-child(4),
  #inspections-needs-config-table tbody td:nth-child(4){
    display:none;
  }

  /* Keep Status column on one line on "Items Needing Configuration" table */
  #inspections-needs-config-table thead th:nth-child(5),
  #inspections-needs-config-table tbody td:nth-child(5){
    white-space:nowrap !important;
  }

  /* Align all cells middle for "Items Needing Configuration" rows */
  #inspections-needs-config-table thead th,
  #inspections-needs-config-table tbody td{
    vertical-align:middle !important;
  }
  #inspections-needs-config-table tbody td.actions-right{
    align-items:center;
  }
  
  /* Hide columns on "Overdue Inspections" table for mobile */
  #overdue-inspections-table .col-overdue-type,
  #overdue-inspections-table .col-overdue-assigned,
  #overdue-inspections-table .col-overdue-inspection-type,
  #overdue-inspections-table .col-overdue-frequency,
  #overdue-inspections-table .col-overdue-last,
  #overdue-inspections-table .col-overdue-due-date{
    display:none;
  }
  
  /* Item column - allow text wrapping on mobile */
  #overdue-inspections-table .col-overdue-item{
    min-width:120px;
    max-width:50%;
    white-space:normal !important;
    word-wrap:break-word;
    word-break:break-word;
  }
  /* Days Overdue column */
  #overdue-inspections-table .col-overdue-days{
    min-width:80px;
    text-align:center !important;
  }
  
  /* Consolidated: Actions column - stack buttons vertically for all inspections tables */
  #inspections-all-items-table tbody td.actions-right,
  #inspections-needs-config-table tbody td.actions-right,
  #overdue-inspections-table tbody td.actions-right{
    display:flex;
    flex-direction:column;
    gap:4px;
    align-items:flex-end;
    white-space:normal;
  }

  /* Keep Actions column compact on mobile so buttons don't get excessively wide */
  #inspections-all-items-table thead th.actions-right,
  #inspections-all-items-table tbody td.actions-right,
  #inspections-needs-config-table thead th.actions-right,
  #inspections-needs-config-table tbody td.actions-right,
  #overdue-inspections-table thead th.actions-right,
  #overdue-inspections-table tbody td.actions-right{
    width:120px !important;
    min-width:120px !important;
    max-width:120px !important;
  }
}

/* Small mobile - single column filters */
@media (max-width:600px){
  .dashboard-filters{
    grid-template-columns:1fr;
    gap:10px;
  }
  /* .dashboard-filters label - Use .m-0 utility class instead */
}

/* Top nav */
.topnav{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.topnav a{background:#0f1722;color:var(--link);padding:9px 14px;border-radius:12px;border:1px solid var(--line);font-weight:600;letter-spacing:.2px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.topnav a.position-relative{position:relative;overflow:visible}
.topnav a:hover{background:#122035}
.topnav a.active{background:var(--pri);border-color:#2f7fd1;color:#041019;box-shadow:0 0 0 2px rgba(77,163,255,.25) inset}
[data-theme="light"] .topnav a{background:#f1f5f9;color:var(--link);border:1px solid var(--line)}
[data-theme="light"] .topnav a:hover{background:#e2e8f0}
[data-theme="light"] .topnav a.active{background:var(--pri);border-color:#2563eb;color:#fff;box-shadow:0 0 0 2px rgba(37,99,235,.25) inset}

/* Tablet and Mobile navigation - hide topnav, use responsive menu */
@media (max-width:1366px){
  .topnav{display:none !important}
}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.card.alt{background:var(--card-alt)}
.card.inset{background:#0f1722;border-color:#1b2636}
.card.warning{background:rgba(255,152,0,0.15);border-left:4px solid #ff9800;margin:16px;position:relative;z-index:998}
.card.inspections-border{border:2px solid #ff9800;background:var(--card);border-radius:16px;padding:18px;margin-bottom:16px;box-shadow:0 10px 28px rgba(0,0,0,.28)}
[data-theme="light"] .card.inset{background:#f8fafc;border-color:#e2e8f0}

/* Card header row: title | hint | actions */
.card-header-row{display:flex;align-items:center;gap:12px}
.header-title{flex:1 1 auto;min-width:160px}
.header-hint{margin-left:auto;margin-right:8px;white-space:nowrap;font-size:.9rem}
.header-actions{display:flex;align-items:center;gap:8px}
@media (max-width:720px){.header-hint{display:none}}

/* Collapsible helpers */
/* .collapse - Use .d-none utility class instead */
/* .collapse.open - Use .d-block utility class instead */

/* Settings sections */
.settings-section{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.settings-section-header{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#0f1722;cursor:pointer;border-bottom:1px solid var(--line);user-select:none}
.settings-section-header:hover{background:#122035}
[data-theme="light"] .settings-section-header{background:#f1f5f9}
[data-theme="light"] .settings-section-header:hover{background:#e2e8f0}
.settings-section-header h3{font-size:1.1em;font-weight:600}
.section-toggle{color:var(--muted);font-size:0.85em;transition:transform 0.2s}
.settings-section-content{padding:16px;background:var(--card)}
.settings-section-content .card.inset{margin-top:8px;margin-bottom:8px}

/* Settings sub-tabs */
.subtabs{display:flex;gap:10px;margin:8px 0 16px;flex-wrap:wrap}

/* ============================================
   INPUT BASE STYLES
   All inputs, selects, and textareas share these base styles
   Use utility classes below for width variations
   ============================================ */
label{display:flex;flex-direction:column;gap:8px;margin:8px 0}
input,select,textarea{
  /* Default: Fill container width (use width utilities to override) */
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  
  /* Visual styling */
  background:var(--input);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  
  /* Behavior */
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  transition:border .15s ease, box-shadow .15s ease, background .15s ease;
  
  /* Typography */
  font-size:16px;/* Prevents zoom on iOS */
  font-family:inherit;
  line-height:1.45;
}
input:focus,select:focus,textarea:focus{border-color:#2f7fd1;box-shadow:0 0 0 3px rgba(77,163,255,.18);background:var(--input-focus)}
input:disabled,select:disabled,textarea:disabled{opacity:0.6;cursor:not-allowed}
select[multiple]{min-height:120px;background-image:none}
textarea{resize:vertical;min-height:80px}

/* Mobile input improvements */
@media (max-width:768px){
  input,select,textarea{padding:12px;font-size:16px;/* Prevents zoom on iOS */}
  label{margin:12px 0}
}

/* ============================================
   INPUT WIDTH UTILITY CLASSES
   Use these classes to override the default 100% width
   Pattern: .input-{size} or .input-w-{pixels}
   ============================================ */

/* Semantic size classes */
.input-full { width: 100% !important; max-width: 100% !important; }
.input-auto { width: auto !important; }
.input-flex { flex: 1 !important; min-width: 0 !important; }

/* Named size classes (common use cases) */
.input-xs { width: 60px !important; min-width: 60px !important; }  /* Year, small numbers */
.input-sm { width: 80px !important; min-width: 80px !important; }  /* Short codes, IDs */
.input-md { width: 110px !important; min-width: 110px !important; } /* Dates, short text */
.input-lg { width: 150px !important; min-width: 150px !important; } /* Medium text */
.input-xl { width: 200px !important; min-width: 200px !important; } /* Longer text */
.input-2xl { width: 250px !important; min-width: 250px !important; } /* Names, titles */
.input-3xl { width: 300px !important; min-width: 300px !important; } /* Descriptions */

/* Pixel-specific width classes (for precise control) */
.input-w-50 { width: 50px !important; min-width: 50px !important; }
.input-w-60 { width: 60px !important; min-width: 60px !important; }
.input-w-70 { width: 70px !important; min-width: 70px !important; }
.input-w-80 { width: 80px !important; min-width: 80px !important; }
.input-w-90 { width: 90px !important; min-width: 90px !important; }
.input-w-100 { width: 100px !important; min-width: 100px !important; }
.input-w-110 { width: 110px !important; min-width: 110px !important; }
.input-w-120 { width: 120px !important; min-width: 120px !important; }
.input-w-130 { width: 130px !important; min-width: 130px !important; }
.input-w-140 { width: 140px !important; min-width: 140px !important; }
.input-w-150 { width: 150px !important; min-width: 150px !important; }
.input-w-160 { width: 160px !important; min-width: 160px !important; }
.input-w-170 { width: 170px !important; min-width: 170px !important; }
.input-w-180 { width: 180px !important; min-width: 180px !important; }
.input-w-200 { width: 200px !important; min-width: 200px !important; }
.input-w-220 { width: 220px !important; min-width: 220px !important; }
.input-w-250 { width: 250px !important; min-width: 250px !important; }
.input-w-300 { width: 300px !important; min-width: 300px !important; }
.input-w-350 { width: 350px !important; min-width: 350px !important; }
.input-w-400 { width: 400px !important; min-width: 400px !important; }
.input-w-450 { width: 450px !important; min-width: 450px !important; }
.input-w-500 { width: 500px !important; min-width: 500px !important; }

/* Percentage-based widths (for responsive layouts) */
.input-w-25p { width: 25% !important; min-width: 0 !important; }
.input-w-33p { width: 33.333% !important; min-width: 0 !important; }
.input-w-50p { width: 50% !important; min-width: 0 !important; }
.input-w-66p { width: 66.666% !important; min-width: 0 !important; }
.input-w-75p { width: 75% !important; min-width: 0 !important; }

/* Max-width constraints (useful for preventing overly wide inputs) */
.input-max-w-200 { max-width: 200px !important; }
.input-max-w-300 { max-width: 300px !important; }
.input-max-w-400 { max-width: 400px !important; }
.input-max-w-500 { max-width: 500px !important; }
.input-max-w-600 { max-width: 600px !important; }

/* Character-based max width helpers */
.max-w-40ch { max-width: 40ch !important; }

/* Min-height helpers */
.min-h-60 { min-height: 60px !important; }

/* Locations page helpers */
.alert-card{
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:16px;
}
.alert-error{background:#2a1a1a;border-color:#d32f2f;color:#ffcdd2}
.alert-success{background:#1a2a1a;border-color:#4caf50;color:#c8e6c9}

.form-message-banner{
  display:none;
  margin-bottom:12px;
  padding:8px 12px;
  border-radius:8px;
  font-size:0.9em;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.05);
}

.text-nowrap{white-space:nowrap !important;}

.location-actions{
  display:flex;
  gap:4px;
  align-items:center;
  flex-wrap:wrap;
}

.location-edit-form{
  display:none;
  gap:4px;
  align-items:center;
  flex-wrap:wrap;
}

.location-edit-form select{
  min-width:150px;
}

.location-chip-group{
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}

.location-chip-header{
  margin-bottom:8px;
  font-weight:600;
  color:var(--text);
}

.location-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.location-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line);
  border-radius:6px;
}

.location-chip-label{
  white-space:nowrap;
}

.location-chip-edit-form{
  display:none;
  gap:4px;
  align-items:center;
  flex:1;
}

.location-chip-edit-form input{
  flex:1;
  min-width:120px;
  padding:2px 6px;
}

.location-chip-edit-form .btn{
  padding:2px 6px;
  font-size:0.75em;
}

.location-chip-actions{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

/* Checkboxes - restore native appearance */
input[type="checkbox"]{
  width:18px !important;
  height:18px;
  min-width:18px;
  padding:0;
  margin:0;
  appearance:checkbox !important;
  -webkit-appearance:checkbox !important;
  cursor:pointer;
  flex-shrink:0;
}
input[type="checkbox"]:focus{
  box-shadow:0 0 0 3px rgba(77,163,255,.18);
  background:var(--input);
}

/* Radio buttons - restore native appearance */
input[type="radio"]{
  width:18px !important;
  height:18px;
  min-width:18px;
  padding:0;
  margin:0;
  appearance:radio !important;
  -webkit-appearance:radio !important;
  cursor:pointer;
  flex-shrink:0;
}
input[type="radio"]:focus{
  box-shadow:0 0 0 3px rgba(77,163,255,.18);
  background:var(--input);
}


/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{text-align:left;font-weight:700;background:var(--table-header-bg);color:var(--table-header-color);position:sticky;top:0;padding:12px;border-bottom:1px solid var(--line)}
.table tbody td{padding:12px;border-bottom:1px solid var(--table-border)}
.table tbody tr:nth-child(odd){background:var(--table-row-odd)}
.table tbody tr:hover{background:var(--table-row-hover)}

/* Reminders table uses grouped-row background; don't apply default nth-child striping */
#reminders-table tbody tr{background:transparent}
#reminders-table tbody tr:hover{background:var(--table-row-hover)}

/* Reminders table - keep cells top-aligned (especially with rowspan) */
#reminders-table thead th,
#reminders-table tbody td{
  vertical-align:top;
}

/* PPE assignments table - center Actions column */
#ppe-assignments-table thead th.actions-right,
#ppe-assignments-table tbody td.actions-right,
#ppe-returned-assignments-table thead th.actions-right,
#ppe-returned-assignments-table tbody td.actions-right{
  text-align:center !important;
}
#ppe-assignments-table tbody td.actions-right,
#ppe-returned-assignments-table tbody td.actions-right{
  display:flex;
  justify-content:center;
}

/* Responsive table wrapper */
.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:16px}
.table-wrapper .table{min-width:600px}

/* Table columns hidden note - hidden by default (desktop) */
/* .table-columns-hidden-note - Use .d-none utility class instead */

/* Mobile table improvements */
@media (max-width:768px){
  .table-wrapper .table{min-width:0;table-layout:auto}
  .table-wrapper{margin-left:-18px;margin-right:-18px;padding:0}
  
  /* Consolidated table cell padding - most tables use 8px 4px */
  .table thead th,
  .table tbody td,
  #reminders-table thead th,
  #reminders-table tbody td,
  #apparatus-list-table thead th,
  #apparatus-list-table tbody td,
  #apparatus-inspections-table thead th,
  #apparatus-inspections-table tbody td,
  #apparatus-inspection-history-table thead th,
  #apparatus-inspection-history-table tbody td,
  .tenants-table thead th,
  .tenants-table tbody td,
  .users-table thead th,
  .users-table tbody td{
    padding:8px 4px;
    font-size:var(--font-md);
  }
  
  /* Hide Asset ID, Type, Manufacturer, Category, and Lifespan columns on mobile */
  /* NOTE: Name column (col-name), Status, End of Life, and Date Destroyed columns MUST remain visible */
  #items-table .col-asset-id,
  #items-table .col-type,
  #items-table .col-manufacturer,
  #items-table .col-category,
  #items-table .col-lifespan,
  #items-table .col-location{
    display:none;
  }
  
  /* Show note about hidden columns on mobile */
  #items-table-hidden-note,
  .table-columns-hidden-note{display:block !important;margin-bottom:12px;padding:8px 12px;background:rgba(77,163,255,0.1);border-left:3px solid var(--pri);border-radius:4px;font-size:var(--font-md)}
  
  /* Ensure Name column is ALWAYS visible on mobile */
  #items-table .col-name{
    display:table-cell !important;
  }
  
  /* Consolidated table layout - all tables use auto layout on mobile */
  #items-table,
  #reminders-table,
  #ppe-assignments-table,
  #ppe-returned-assignments-table,
  #apparatus-list-table,
  #apparatus-inspections-table,
  #apparatus-inspection-history-table,
  .card table.table[style*="table-layout:fixed"]{
    table-layout:auto !important;
    width:100% !important;
  }
  #items-table thead th,
  #items-table tbody td,
  #reminders-table thead th,
  #reminders-table tbody td,
  #ppe-assignments-table thead th,
  #ppe-assignments-table tbody td,
  #ppe-returned-assignments-table thead th,
  #ppe-returned-assignments-table tbody td,
  #apparatus-list-table thead th,
  #apparatus-list-table tbody td,
  #apparatus-inspections-table thead th,
  #apparatus-inspections-table tbody td,
  #apparatus-inspection-history-table thead th,
  #apparatus-inspection-history-table tbody td{
    width:auto !important;
  }

  #ppe-assignments-table .col-ppe-type,
  #ppe-assignments-table .col-ppe-asset-id,
  #ppe-assignments-table .col-ppe-assigned-date,
  #ppe-assignments-table .col-ppe-returned-date,
  #ppe-returned-assignments-table .col-ppe-type,
  #ppe-returned-assignments-table .col-ppe-asset-id,
  #ppe-returned-assignments-table .col-ppe-assigned-date,
  #ppe-returned-assignments-table .col-ppe-returned-date{
    display:none;
  }

  #ppe-assignments-table .col-ppe-firefighter,
  #ppe-assignments-table .col-ppe-item,
  #ppe-returned-assignments-table .col-ppe-firefighter,
  #ppe-returned-assignments-table .col-ppe-item{
    min-width:120px;
    max-width:50%;
    white-space:normal !important;
    word-wrap:break-word;
    word-break:break-word;
  }

  #ppe-assignments-table .col-ppe-status,
  #ppe-returned-assignments-table .col-ppe-status{
    white-space:nowrap !important;
  }

  #ppe-assignments-table thead th.actions-right,
  #ppe-assignments-table tbody td.actions-right,
  #ppe-returned-assignments-table thead th.actions-right,
  #ppe-returned-assignments-table tbody td.actions-right{
    width:120px !important;
    min-width:120px !important;
    max-width:120px !important;
    white-space:nowrap !important;
  }
  /* Checkbox column - keep it narrow */
  #items-table thead th:first-child,
  #items-table tbody td:first-child{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    padding:8px 4px !important;
  }
  
  /* Name column - allow text wrapping - MUST BE VISIBLE */
  #items-table .col-name,
  #apparatus-list-table thead th:first-child,
  #apparatus-list-table tbody td:first-child{
    display:table-cell !important;
    min-width:200px;
    max-width:60%;
    white-space:normal !important;
    word-wrap:break-word !important;
  }
  /* Ensure Name column links are visible and clickable */
  #items-table .col-name a{
    display:inline !important;
    color:inherit;
    text-decoration:underline;
  }
  /* Also handle nth-child for backward compatibility */
  #items-table thead th:nth-child(2),
  #items-table tbody td:nth-child(2){
    display:table-cell !important;
  }
  #items-table thead th:not(:first-child):not(.col-asset-id):not(.col-type):not(.col-manufacturer):not(.col-category):not(.col-date-destroyed):not(.col-lifespan):not(.col-location):not(.col-name),
  #items-table tbody td:not(:first-child):not(.col-asset-id):not(.col-type):not(.col-manufacturer):not(.col-category):not(.col-date-destroyed):not(.col-lifespan):not(.col-location):not(.col-name){
    min-width:80px;
  }
  
  /* Remove horizontal scroll on mobile for items table */
  .dashboard-items .table-wrapper{
    overflow-x:visible;
    margin-left:0;
    margin-right:0;
    padding:0;
  }
  
  /* Hide Item Status and Location on mobile */
  #reminders-table .col-item-status,
  #reminders-table .col-location{
    display:none;
  }

  /* Due Date MUST remain visible on mobile */
  #reminders-table .col-due-date{
    display:table-cell !important;
  }
  /* Item column - allow wrapping on mobile only */
  #reminders-table .col-item{
    min-width:100px;
    max-width:50%;
    white-space:normal !important;
    word-wrap:break-word;
    word-break:break-word;
  }
  /* Field and Date Status columns - allow wrapping on mobile */
  #reminders-table .col-field{
    min-width:100px;
    max-width:150px;
    white-space:normal !important;
    word-wrap:break-word;
    word-break:break-word;
  }
  #reminders-table .col-date-status{
    min-width:100px;
    white-space:normal !important;
    text-align:center !important;
    padding:8px 4px !important;
  }
  
  /* Reduce text size in reminders KPI cards on mobile */
  .window-label,
  .warn-period-label{
    font-size:1.05em !important;
  }
  
  /* Also reduce the strong text in KPI cards on mobile */
  .grid-2 .kpi strong{
    font-size:1.425em !important;
  }
  
  /* Hide less important columns on mobile for apparatus list - NO LONGER NEEDED */
  /* #apparatus-list-table .col-truck, */
  /* #apparatus-list-table .col-station{ */
  /*   display:none; */
  /* } */
  
  /* Hide less important columns on mobile for inspection history */
  #apparatus-inspection-history-table .col-inspector,
  #apparatus-inspection-history-table .col-notes{
    display:none;
  }
  
  /* Actions column - keep buttons compact */
  #apparatus-list-table .actions-right,
  #apparatus-inspections-table .actions-right,
  #apparatus-inspection-history-table .actions-right{
    min-width:100px;
  }
  
  /* Apparatus view page - prevent overflow */
  .grid-2 > .card{
    max-width:100%;
    overflow:hidden;
  }
  
  /* Photo containers - ensure they wrap and don't overflow */
  .photo-dropzone{
    max-width:100%;
    overflow:hidden;
  }
  .photo-dropzone > div[style*="display:flex"]{
    max-width:100% !important;
  }
  .photo-dropzone img{
    max-width:100% !important;
    height:auto !important;
  }
  
  /* Inspection status card - ensure table doesn't overflow */
  #apparatus-inspections-table{
    font-size:0.85em;
  }
  #apparatus-inspections-table th,
  #apparatus-inspections-table td{
    padding:6px 4px !important;
    word-wrap:break-word;
  }
  
  /* Compartments grid - ensure it stacks properly */
  .grid-3{
    grid-template-columns:1fr !important;
  }
  
  /* Consolidated: Flex containers with space-between stack on mobile */
  .card > div[style*="display:flex"][style*="justify-content:space-between"],
  .card > div[style*="display:flex"][style*="justify-content:space-between"]:has(h2){
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  .card > div[style*="display:flex"][style*="justify-content:space-between"]{
    gap:8px;
  }
  .card > div[style*="display:flex"][style*="justify-content:space-between"]:has(h2){
    gap:12px;
  }
  .card > div[style*="display:flex"][style*="justify-content:space-between"] > div{
    width:100%;
    word-wrap:break-word;
  }
  .card > div[style*="display:flex"][style*="justify-content:space-between"]:has(h2) form{
    width:100%;
  }
  
  /* Apparatus inspections tables - smaller padding */
  .card table.table,
  .table-responsive table.table{
    font-size:var(--font-sm);
  }
  .card table.table th,
  .card table.table td,
  .table-responsive table.table th,
  .table-responsive table.table td,
  #firefighters-table th,
  #firefighters-table td,
  .card table.table[style*="table-layout:fixed"] th,
  .card table.table[style*="table-layout:fixed"] td{
    padding:6px 4px !important;
    word-wrap:break-word;
  }
  
  /* Hide Frequency column on mobile (scoped to the apparatus inspections table only) */
  #apparatus-inspections-table th:nth-child(2),
  #apparatus-inspections-table td:nth-child(2){
    display:none;
  }
  /* Actions column - allow wrapping */
  .card table.table td.actions-right{
    white-space:normal !important;
  }
  
  /* Email templates table - hide columns on mobile */
  .table-responsive table.table th:nth-child(3),
  .table-responsive table.table td:nth-child(3),
  .table-responsive table.table th:nth-child(5),
  .table-responsive table.table td:nth-child(5){
    display:none;
  }
  /* Allow Subject to wrap */
  .table-responsive table.table td:nth-child(2){
    max-width:200px;
  }
  /* Actions column - stack buttons */
  .table-responsive table.table td.actions-right > div{
    flex-direction:column !important;
    gap:4px !important;
    align-items:stretch !important;
  }
  
  /* Consolidated: Form grids stack on mobile */
  .firefighters-form-grid,
  .tenant-form-grid,
  .tenant-edit-form-row,
  .user-form-row{
    grid-template-columns:1fr !important;
  }
  .firefighters-form-grid{
    gap:8px !important;
  }
  
  /* Responsive table classes for templates */
  .hide-mobile{
    display:none;
  }
  
  .mobile-stack.table{
    table-layout:auto;
  }
  
  .mobile-stack.table thead{
    display:none;
  }
  
  .mobile-stack.table,
  .mobile-stack.table tbody,
  .mobile-stack.table tr,
  .mobile-stack.table td{
    display:block;
    width:100% !important;
  }
  
  .mobile-stack.table tr{
    margin-bottom:12px;
    border:1px solid var(--line);
    border-radius:4px;
    padding:8px;
  }
  
  .mobile-stack.table td{
    border:none !important;
    padding:4px 0 !important;
    text-align:left !important;
  }
  
  .mobile-stack.table td:before{
    content:attr(data-label) ": ";
    font-weight:600;
    color:var(--text-muted);
    display:inline-block;
    margin-right:4px;
  }
  
  .mobile-stack.table td[data-label="Name"]:first-child:before{
    display:none;
  }
  
  .action-buttons.mobile-friendly{
    display:flex;
    flex-direction:row;
    gap:4px;
    flex-wrap:wrap;
    margin-top:8px;
  }
  
  .action-buttons.mobile-friendly .btn{
    flex:1;
    min-width:60px;
  }
  
  .action-buttons.mobile-friendly form{
    flex:1;
  }
  
  .action-buttons.mobile-friendly form .btn{
    width:100%;
  }
  .firefighters-form-grid label{
    display:flex !important;
    flex-direction:column !important;
    gap:4px;
  }
  .firefighters-form-grid label > span{
    text-align:left !important;
    padding-right:0 !important;
    grid-column:auto !important;
  }
  .firefighters-form-grid label input,
  .firefighters-form-grid label select,
  .firefighters-form-grid label textarea{
    grid-column:auto !important;
    width:100% !important;
  }
  .firefighters-form-grid .form-help{
    grid-column:1 !important;
  }
  
  /* Firefighters list table - hide less important columns on mobile */
  #firefighters-table .col-rank,
  #firefighters-table th:nth-child(3),
  #firefighters-table td:nth-child(3),
  #firefighters-table th:nth-child(4),
  #firefighters-table td:nth-child(4),
  #firefighters-table th:nth-child(5),
  #firefighters-table td:nth-child(5),
  #firefighters-table th:nth-child(6),
  #firefighters-table td:nth-child(6){
    display:none;
  }
  /* Allow name to wrap */
  #firefighters-table td:nth-child(2){
    white-space:normal !important;
    word-wrap:break-word;
  }
  
  /* Firefighters list view - station tables */
  .card table.table[style*="table-layout:fixed"]{
    font-size:var(--font-sm);
  }
  .card table.table[style*="table-layout:fixed"] colgroup{
    display:none;
  }
  .card table.table[style*="table-layout:fixed"] th,
  .card table.table[style*="table-layout:fixed"] td{
    white-space:normal !important;
    word-wrap:break-word;
  }
  /* Hide rank column on mobile in list view */
  .card table.table[style*="table-layout:fixed"] th:nth-child(3),
  .card table.table[style*="table-layout:fixed"] td:nth-child(3){
    display:none;
  }
  /* Actions column - allow wrapping */
  .card table.table[style*="table-layout:fixed"] td:last-child > div{
    flex-wrap:wrap !important;
  }
}

/* Responsive model grid layout */
@media (max-width:768px){
  .model-grid-header.grid-template-columns-1fr-80px-120px{
    display:none;
  }
  
  .model-form.grid-template-columns-1fr-80px-120px,
  .model-readonly.grid-template-columns-1fr-80px-120px{
    display:block;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:8px;
    padding:16px;
    margin-bottom:12px;
  }
  
  .model-form.grid-template-columns-1fr-80px-120px > div,
  .model-readonly.grid-template-columns-1fr-80px-120px > div{
    display:block;
    margin-bottom:12px;
  }
  
  .model-form.grid-template-columns-1fr-80px-120px > div:last-child,
  .model-readonly.grid-template-columns-1fr-80px-120px > div:last-child{
    margin-bottom:0;
  }
  
  .model-form.grid-template-columns-1fr-80px-120px > div::before,
  .model-readonly.grid-template-columns-1fr-80px-120px > div::before{
    content:attr(data-label);
    display:block;
    font-weight:600;
    color:var(--text);
    margin-bottom:4px;
    font-size:0.9em;
  }
  
  .model-form.grid-template-columns-1fr-80px-120px > div:nth-child(1)::before{
    content:"Model Name";
  }
  
  .model-form.grid-template-columns-1fr-80px-120px > div:nth-child(2)::before{
    content:"Weight";
  }
  
  .model-form.grid-template-columns-1fr-80px-120px > div:nth-child(3)::before{
    content:"Actions";
  }
  
  .model-form.grid-template-columns-1fr-80px-120px input{
    width:100%;
    padding:12px;
    font-size:16px;
    border:1px solid var(--line);
    border-radius:4px;
    background:var(--input-bg);
    color:var(--text);
  }
  
  .model-form.grid-template-columns-1fr-80px-120px .form-inline-flex{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  
  .model-form.grid-template-columns-1fr-80px-120px .form-inline-flex .btn{
    width:100%;
    padding:12px;
    font-size:16px;
  }
  
  .model-readonly.grid-template-columns-1fr-80px-120px > div{
    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  
  .model-readonly.grid-template-columns-1fr-80px-120px > div:last-child{
    border-bottom:none;
  }
  
  .weight-update-row{
    display:block;
    background:rgba(77,163,255,0.15);
    border:1px solid rgba(77,163,255,0.3);
    border-radius:8px;
    padding:16px;
    margin:12px 0;
  }
  
  .weight-update-row .weight-update-label{
    display:block;
    font-weight:600;
    color:var(--text);
    margin-bottom:8px;
  }
  
  .weight-update-row .weight-update-weight{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
  }
  
  .weight-update-row .weight-update-weight input{
    padding:8px 12px;
    border-radius:4px;
    font-size:16px;
  }
  
  .weight-update-row .weight-update-action{
    display:block;
  }
  
  .weight-update-row .weight-update-action .btn{
    width:100%;
    padding:12px;
    font-size:16px;
  }
}

/* Desktop: Item and Location columns should not wrap */
#reminders-table .col-item{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#reminders-table .col-location{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Alternating rows inside expanded inset tables */
.card.inset table.alt-rows tbody tr:nth-child(even){background:var(--card-alt)}
.card.inset table.alt-rows tbody tr:hover{background:#142238}

/* Light theme alternating rows */
[data-theme="light"] .card.inset table.alt-rows tbody tr:hover{background:#e2e8f0}

/* Right-aligned action cells */
td.actions-right,th.actions-right{text-align:right;white-space:nowrap}
td.actions-right form{display:inline-flex;align-items:center;gap:8px}

/* Inspections module - stack action buttons vertically in all tables */
.inspections-page .table tbody td.actions-right,
#inspections-all-items-table tbody td.actions-right,
#inspections-needs-config-table tbody td.actions-right,
#overdue-inspections-table tbody td.actions-right{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-end;
  white-space:normal;
}

/* Inline-right form helper */
.inline-right{display:flex;gap:10px;align-items:flex-end;justify-content:flex-end}
.inline-right>label{flex:1}

/* KPIs */
.kpi{display:flex;flex-direction:column;gap:6px}
.kpi strong{font-size:28px}

/* Firefighters page - status column */
#firefighters-table td:nth-child(7),
.firefighters-status-cell{
  white-space:nowrap;
}

/* Firefighters form - label and field on same line, two per row */
.firefighters-form-grid{
  display:grid;
  grid-template-columns:140px 1fr 140px 1fr;
  gap:12px;
  align-items:center;
  margin-bottom:12px
}
.firefighters-form-grid label{
  margin:0;
  display:contents
}
.firefighters-form-grid label > span{
  font-weight:600;
  white-space:nowrap;
  text-align:right;
  padding-right:8px
}
/* First field in row */
.firefighters-form-grid > label:first-of-type > span{
  grid-column:1
}
.firefighters-form-grid > label:first-of-type input,
.firefighters-form-grid > label:first-of-type select,
.firefighters-form-grid > label:first-of-type textarea{
  grid-column:2;
  margin:0
}
/* Second field in row (if exists) */
.firefighters-form-grid > label:nth-of-type(2) > span{
  grid-column:3
}
.firefighters-form-grid > label:nth-of-type(2) input,
.firefighters-form-grid > label:nth-of-type(2) select,
.firefighters-form-grid > label:nth-of-type(2) textarea{
  grid-column:4;
  margin:0
}
/* Help text */
.firefighters-form-grid .form-help{
  grid-column:2 / span 3;
  margin-top:4px;
  font-size:0.85em
}
/* Single field spans full width */
.firefighters-form-grid > label:only-of-type{
  grid-column:1 / span 3
}
.firefighters-form-grid > label:only-of-type input,
.firefighters-form-grid > label:only-of-type select,
.firefighters-form-grid > label:only-of-type textarea{
  grid-column:2 / span 3
}
.muted{color:var(--muted)}

/* Small utilities */
.card h2{margin:0 0 10px}

/* ------------------------------------------------------------------
   TYPE-SPECIFIC FIELDS (items_add) – 3-column stacked cards
   - full-width controls
   - no hairline rails/dividers
   ------------------------------------------------------------------ */

/* The AJAX fragment outputs .type-fields inside #typeFields */
#typeFields .type-fields{
  position:relative;                          /* for pseudo resets below */
  display:grid;
  grid-template-columns:repeat(3, minmax(300px, 1fr));
  gap:20px;
  align-items:start;
  margin-top:8px;
}

/* Each field row is a self-contained card */
#typeFields .type-fields > .tf-row{
  display:block !important;                   /* defeat old flex row rules */
  background:var(--input);
  border:0;
  border-radius:12px;
  padding:12px;
  box-sizing:border-box;
  box-shadow:0 1px 0 rgba(0,0,0,.15) inset, 0 6px 16px rgba(0,0,0,.05);
}

/* Label + input stacked in the card */
#typeFields .type-fields .tf-label,
#typeFields .type-fields .tf-input{
  display:block !important;
  width:100% !important;
  margin:0;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
#typeFields .type-fields .tf-label{margin-bottom:8px;font-weight:600}

/* Controls fill the card (override compact widths) */
#typeFields .type-fields .tf-input input,
#typeFields .type-fields .tf-input select,
#typeFields .type-fields .tf-input textarea{
  display:block;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box;
}
#typeFields .type-fields .w-compact{        /* legacy helper, neutralized */
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

/* Required badge */
#typeFields .type-fields .req-badge{
  display:inline-block;
  padding:2px 8px;
  font-size:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  margin-left:8px;
  vertical-align:middle;
}

/* Remove any faint rails/dividers from legacy styles */
#typeFields .type-fields::before,
#typeFields .type-fields::after,
#typeFields .type-fields .tf-row::before,
#typeFields .type-fields .tf-row::after,
#typeFields .type-fields .tf-label::before,
#typeFields .type-fields .tf-label::after,
#typeFields .type-fields .tf-rail,
#typeFields .type-fields .tf-divider,
#typeFields .type-fields .divider,
#typeFields .type-fields .vr{
  content:none !important;
  display:none !important;
}
/* Keep the top row (Item Type / Category / Add New Category) in place,
   and make the Type-Specific Fields block start on its own row. */
.grid-3 > #typeFields { 
  grid-column: 1 / -1;     /* TSF spans the full width, on the next row */
  margin-top: 8px;
}

.grid-3 > *:not(#typeFields) {
  grid-column: auto;       /* don't let any of the top cells span */
}

/* If any headings inside the TSF were set to span, scope that to TSF only */
#typeFields .type-specific-title { grid-column: 1 / -1; }

/* Responsive breakpoints */
@media (max-width:1400px){
  #typeFields .type-fields{grid-template-columns:repeat(2, minmax(280px,1fr))}
}
@media (max-width:780px){
  #typeFields .type-fields{grid-template-columns:1fr}
}

/* inline input + button, same row height as selects */
.inline-input-btn{
  display:flex;
  gap:8px;
  align-items:center;
}
.inline-input-btn input{ flex:1; }
@media (max-width:900px){
  .inline-input-btn{ flex-direction:column; align-items:stretch; }
}



/* Label printing styles */
.label-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.label{
  border:1px solid var(--line);
  border-radius:4px;
  padding:4px;
  text-align:center;
  background:#fff;
  color:#000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.label .code{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:4px;
  min-height:48px;
  background:#fff;
  border:none;
  padding:0;
}
.label .code svg{
  max-width:100%;
  height:auto;
}
.label .code canvas{
  max-width:100%;
  height:auto;
}
.label .code img{
  max-width:100%;
  height:auto;
}
.label .caption{
  font-size:0.85em;
  color:#000;
  word-wrap:break-word;
  word-break:break-word;
}

body.label-debug .label{ outline:1px dashed rgba(255, 0, 0, 0.55); outline-offset:-1px; }
body.label-debug .label .code{ outline:1px dashed rgba(0, 160, 255, 0.7); outline-offset:-1px; }
body.label-debug .label .caption{ outline:1px dashed rgba(46, 194, 126, 0.75); outline-offset:-1px; }

body.ptouch-mode .label-grid{
  grid-template-columns:1fr !important;
  gap:6px;
}
body.ptouch-mode .label{
  border:1px solid var(--line);
  border-radius:0;
  padding:calc(var(--ptouch-pad-mm, 1) * 1mm);
  background:#fff;
  color:#000;
  height:calc(var(--ptouch-mm, 18) * 1mm);
  box-sizing:border-box;
  overflow:hidden;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  gap:calc(var(--ptouch-pad-mm, 1) * 1mm);
}
body.ptouch-mode .label .code{
  margin-bottom:0;
  min-height:0;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
body.ptouch-mode .label .code > *{
  max-height:100%;
  max-width:100%;
}
body.ptouch-mode .label .caption{
  flex:1 1 auto;
  align-self:center;
  text-align:left;
  font-size:var(--ptouch-caption-font, 10px);
  line-height:1.1;
  color:#000;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Print styles - hide everything except labels */
@media print{
  @page{
    size:auto;
    margin:12mm 12mm 12mm 24mm;
  }
  
  /* Hide header, nav, footer, banner, and other page elements */
  header,nav,footer,.no-print,#top-info-banner{
    display:none !important;
  }

  /* High-contrast print defaults (inspections + general pages)
     Ensure forms render as black-on-white even when the app is in dark theme. */
  :root{
    --bg:#fff !important;
    --card:#fff !important;
    --card-alt:#fff !important;
    --input:#fff !important;
    --text:#000 !important;
    --muted:#333 !important;
    --line:#bbb !important;
    --border:#bbb !important;
    --pri:#000 !important;
  }
  html,body{
    color:#000 !important;
    background:#fff !important;
  }
  *, *::before, *::after{
    color:#000 !important;
    text-shadow:none !important;
    box-shadow:none !important;
    filter:none !important;
  }
  a, a:visited{
    color:#000 !important;
    text-decoration:underline !important;
  }
  .muted{ color:#333 !important; }
  .badge{ color:#000 !important; border:1px solid #000 !important; background:#fff !important; }
  input, select, textarea{
    background:#fff !important;
    color:#000 !important;
    border:1px solid #000 !important;
  }
  input::placeholder, textarea::placeholder{
    color:#555 !important;
  }
  .date-display,
  .date-container,
  .date-text{
    color:#000 !important;
  }
  
  /* Reset body */
  html,body{
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  /* Ensure print content starts on page 1 (avoid hidden banner offsets) */
  body{
    padding-top:0 !important;
    margin-top:0 !important;
  }
  .container{
    margin:0 !important;
    padding:0 !important;
    max-width:none !important;
  }
  
  /* Reset card styling for print */
  .card{
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
  }
  
  /* Show only the labels container */
  .print-labels-container{
    display:block !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  
  /* Hide cards only when printing labels (body has print-labels class) */
  body.print-labels .card{
    display:none !important;
  }
  body.print-labels .print-labels-container{
    display:block !important;
  }
  
  /* Add safe top margin for standard printers so first row isn't clipped */
  body:not(.ptouch-mode) .print-labels-container{
    padding-top:8mm !important;
  }
  
  .label-grid{
    display:grid !important;
    grid-template-columns:repeat(3,1fr);
    gap:12mm;
    padding:0;
    margin:0;
    width:100%;
    box-sizing:border-box;
  }
  
  .label-grid .label{
    page-break-inside:avoid;
    break-inside:avoid;
    border:1px solid #888 !important;
    background:#fff !important;
    padding:4mm !important;
    margin:0;
    box-sizing:border-box;
  }
  
  .label-grid .label .code{
    min-height:auto;
  }
  
  .label-grid .label .caption{
    color:#000 !important;
    font-size:9pt !important;
    margin-top:2mm;
  }
  
  /* P-touch mode print */
  body.ptouch-mode .label-grid{
    grid-template-columns:1fr !important;
    gap:6mm;
  }
}


/* ============================================
   UTILITY CLASSES
   Common utility classes to replace inline styles
   ============================================ */

/* Display Utilities */
.d-flex{display:flex}
.d-inline-flex{display:inline-flex}
.d-block{display:block}
.d-inline-block{display:inline-block}
.d-none{display:none}

/* Flex Direction */
.flex-row{flex-direction:row}
.flex-column{flex-direction:column}

/* Flex Alignment */
.align-items-start{align-items:flex-start}
.align-items-center{align-items:center}
.align-items-end{align-items:flex-end}
.align-items-stretch{align-items:stretch}
.justify-content-start{justify-content:flex-start}
.justify-content-center{justify-content:center}
.justify-content-end{justify-content:flex-end}
.justify-content-between{justify-content:space-between}
.align-self-center{align-self:center}

/* Flex Wrap */
.flex-wrap{flex-wrap:wrap}
.flex-nowrap{flex-wrap:nowrap}

/* Gap Utilities */
.gap-2{gap:2px}
.gap-4{gap:4px}
.gap-6{gap:6px}
.gap-8{gap:8px}
.gap-10{gap:10px}
.gap-12{gap:12px}
.gap-16{gap:16px}
.gap-20{gap:20px}

/* Margin Utilities */
.m-0{margin:0}
.mt-0{margin-top:0}
.mt-4{margin-top:4px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mt-20{margin-top:20px}
.mb-0{margin-bottom:0}
.mb-4{margin-bottom:4px}
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.ml-auto{margin-left:auto}
.mr-8{margin-right:8px}

/* Padding Utilities */
.p-0{padding:0}
.pt-0{padding-top:0}
.pb-0{padding-bottom:0}
.p-8{padding:8px}
.p-12{padding:12px}
.p-16{padding:16px}

/* Text Alignment */
.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}

/* White Space */
.whitespace-nowrap{white-space:nowrap}
.whitespace-normal{white-space:normal}

/* Width Utilities */
.w-full{width:100%}
.w-auto{width:auto}
.w-50{width:50px}
.w-80{width:80px}
.w-100{width:100px}
.w-110{width:110px}
.w-120{width:120px}
.w-150{width:150px}
.w-200{width:200px}
.w-220{width:220px}
.w-250{width:250px}
.w-300{width:300px}
.min-w-80{min-width:80px}
.min-w-100{min-width:100px}
.min-w-120{min-width:120px}
.min-w-150{min-width:150px}
.min-w-200{min-width:200px}
.max-w-80{max-width:80px}
.max-w-400{max-width:400px}

/* Table cell ellipsis utility - consolidates 6 duplicate rules */
.table-cell-ellipsis{
  max-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Flex center with gap utility - consolidates 3 duplicate rules */
.flex-center-gap-8{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Overflow */
.overflow-hidden{overflow:hidden}
.overflow-auto{overflow:auto}

/* Font Size */
.text-xs{font-size:0.75em}
.text-sm{font-size:0.85em}
.text-md{font-size:0.9em}
.text-base{font-size:1em}
.text-lg{font-size:1.1em}

/* Font Weight */
.font-normal{font-weight:400}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}

/* Border */
.border-top{border-top:1px solid var(--line)}
.border-bottom{border-bottom:1px solid var(--line)}
.border-left{border-left:1px solid var(--line)}
.border-right{border-right:1px solid var(--line)}

/* Divider */
.divider{margin:16px 0;border:none;border-top:1px solid var(--line);opacity:0.6}

/* Cursor */
.cursor-pointer{cursor:pointer}
.cursor-not-allowed{cursor:not-allowed}

/* Flex Shrink/Grow */
.flex-shrink-0{flex-shrink:0}
.flex-1{flex:1 1 0}
.flex-auto{flex:1 1 auto}

/* Position */
.position-relative{position:relative}
.position-absolute{position:absolute}

/* Color Utilities */
.text-danger{color:#ff6b6b}
.text-muted{color:var(--muted)}
.text-success{color:#4caf50}
.text-warning{color:#ffcc00}

/* Text Decoration */
.no-underline{text-decoration:none}

/* Word Wrap */
.word-wrap{word-wrap:break-word;word-break:break-word}

/* User Select */
.user-select-none{user-select:none}

/* Vertical Align */
.vertical-align-middle{vertical-align:middle}
.vertical-align-top{vertical-align:top}

/* Line Height */
.line-height-1{line-height:1}
.line-height-1-2{line-height:1.2}
.line-height-1-3{line-height:1.3}
.line-height-1-4{line-height:1.4}
.line-height-1-6{line-height:1.6}

/* ============================================
   FORM INPUT CONSOLIDATION
   Standardized classes for form inputs
   ============================================ */

/* Standard form label with stacked layout */
.form-label{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.form-label-inline{display:flex;flex-direction:row;align-items:center;gap:8px;margin:8px 0}
.form-label-text{display:block;font-size:0.9em;margin-bottom:4px;color:var(--muted)}

/* Legacy form-input-* classes - mapped to new input-* classes for backward compatibility */
.form-input-full{width:100% !important}
.form-input-sm{width:80px !important;min-width:80px !important}
.form-input-md{width:110px !important;min-width:110px !important}
.form-input-lg{width:150px !important;min-width:150px !important}
.form-input-xl{width:200px !important;min-width:200px !important}
.form-input-2xl{width:250px !important;min-width:250px !important}
.form-input-flex{flex:1 !important;min-width:150px !important}

/* Form row layouts */
.form-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.form-row-nowrap{display:flex;gap:12px;align-items:flex-end;flex-wrap:nowrap}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* Form actions (button groups) */
.form-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.form-actions-right{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}

/* Mobile responsive form layouts */
@media (max-width:768px){
  .form-grid-2,.form-grid-3{grid-template-columns:1fr}
  .form-row{flex-direction:column;align-items:stretch}
  .form-input-flex{min-width:0}
}

/* ============================================
   LAYOUT HELPERS
   Common layout patterns to replace inline styles
   ============================================ */

/* Flex containers with common patterns */
.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-center{display:flex;justify-content:center;align-items:center}
.flex-start{display:flex;justify-content:flex-start;align-items:center}
.flex-end{display:flex;justify-content:flex-end;align-items:center}

/* Card header patterns */
.card-header-flex{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.card-title{margin:0;white-space:nowrap}

/* Table column width helpers */
.table-col-w-40{width:40px}
.table-col-w-50{width:50px}
.table-col-w-60{width:60px}
.table-col-w-80{width:80px}
.table-col-w-100{width:100px}
.table-col-w-120{width:120px}
.table-col-w-150{width:150px}
.table-col-w-200{width:200px}
.table-col-w-220{width:220px}
.table-col-w-10p{width:10%}
.table-col-w-20p{width:20%}
.table-col-w-30p{width:30%}
.table-col-w-40p{width:40%}
.table-col-w-50p{width:50%}
.table-col-w-60p{width:60%}

/* Dashboard Sortable Headers and KPI Links */
.sortable-header{
  background:rgba(74,158,255,0.15)!important;
  color:#fff!important;
  font-weight:600!important;
  border-radius:4px;
  padding:4px 8px!important;
  transition:all 0.2s ease;
  text-decoration:none!important;
  display:inline-block;
  cursor:pointer;
  font-size:0.9em
}
.sortable-header:hover{
  background:rgba(74,158,255,0.25)!important;
  color:#fff!important;
  transform:translateY(-1px)
}
.sort-indicator{
  color:#fff;
  font-weight:bold;
  margin-left:4px
}
.kpi-count-link{
  background:rgba(74,158,255,0.15)!important;
  border-radius:4px;
  padding:4px 12px!important;
  transition:all 0.2s ease;
  display:inline-block;
  cursor:pointer
}
.kpi-count-link:hover{
  background:rgba(74,158,255,0.25)!important;
  transform:translateY(-1px)
}
.kpi-count-link.kpi-count-active{
  background:rgba(74,158,255,0.35)!important;
  border:1px solid rgba(74,158,255,0.6)!important;
  box-shadow:0 0 8px rgba(74,158,255,0.3)!important
}
.kpi-count-link strong{
  display:block
}
.status-breakdown-item{
  background:rgba(74,158,255,0.15)!important;
  border-radius:4px;
  transition:all 0.2s ease;
  cursor:pointer
}
.status-breakdown-item:hover{
  background:rgba(74,158,255,0.25)!important;
  transform:translateY(-1px)
}
.status-breakdown-active{
  background:rgba(74,158,255,0.35)!important;
  border:1px solid rgba(74,158,255,0.6)!important;
  box-shadow:0 0 8px rgba(74,158,255,0.3)!important
}
@media (max-width:768px){
  .module-kpi-grid .kpi .muted{
    white-space:normal!important;
    word-wrap:break-word!important;
    overflow-wrap:break-word!important;
    word-break:break-word!important;
    max-width:100%!important
  }
  .module-kpi-grid .kpi .kpi-content,
  .module-kpi-grid .kpi .kpi-content-padded{
    max-width:100%!important;
    width:100%!important;
    overflow:hidden!important;
  }
}

/* Notifications page KPI cards - NEVER wrap the KPI counts, only the cards themselves */
.notifications-overview .module-kpi-grid.kpi-4-cols {
  grid-template-columns: repeat(4, 1fr) !important;
  display: grid !important;
}

/* Override the overview-content-layout rule for notifications page */
.notifications-overview .overview-content-layout .module-kpi-grid.kpi-4-cols {
  grid-template-columns: repeat(4, 1fr) !important;
  display: grid !important;
}

/* Override ALL media queries for notifications page KPI grids - NEVER wrap */
@media (max-width: 1400px) {
  .notifications-overview .module-kpi-grid.kpi-4-cols,
  .notifications-overview .overview-content-layout .module-kpi-grid.kpi-4-cols {
    grid-template-columns: repeat(4, 1fr) !important;
    display: grid !important;
  }
}

@media (max-width: 1200px) {
  .notifications-overview .module-kpi-grid.kpi-4-cols,
  .notifications-overview .overview-content-layout .module-kpi-grid.kpi-4-cols {
    grid-template-columns: repeat(4, 1fr) !important;
    display: grid !important;
  }
}

@media (max-width: 1024px) {
  .notifications-overview .module-kpi-grid.kpi-4-cols,
  .notifications-overview .overview-content-layout .module-kpi-grid.kpi-4-cols {
    grid-template-columns: repeat(4, 1fr) !important;
    display: grid !important;
  }
  
  /* Keep cards side-by-side at 1024px for notifications page */
  .notifications-overview .overview-content-layout {
    flex-direction: row !important;
    gap: 16px !important;
  }
}

@media (max-width: 992px) {
  .notifications-overview .module-kpi-grid.kpi-4-cols,
  .notifications-overview .overview-content-layout .module-kpi-grid.kpi-4-cols {
    grid-template-columns: repeat(4, 1fr) !important;
    display: grid !important;
  }
  
  /* Keep cards side-by-side at 992px for notifications page */
  .notifications-overview .overview-content-layout {
    flex-direction: row !important;
    gap: 16px !important;
  }
}

@media (max-width: 768px) {
  .notifications-overview .module-kpi-grid.kpi-4-cols,
  .notifications-overview .overview-content-layout .module-kpi-grid.kpi-4-cols {
    grid-template-columns: repeat(4, 1fr) !important;
    display: grid !important;
  }
  
  /* Keep cards side-by-side at 768px for notifications page */
  .notifications-overview .overview-content-layout {
    flex-direction: row !important;
    gap: 16px !important;
  }
}

@media (max-width: 767px) {
  .notifications-overview .module-kpi-grid.kpi-4-cols,
  .notifications-overview .overview-content-layout .module-kpi-grid.kpi-4-cols {
    grid-template-columns: repeat(4, 1fr) !important;
    display: grid !important;
  }
  
  /* Allow cards to stack only under 768px for notifications page */
  .notifications-overview .overview-content-layout {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
  }
}

@media (max-width: 480px) {
  .notifications-overview .module-kpi-grid.kpi-4-cols,
  .notifications-overview .overview-content-layout .module-kpi-grid.kpi-4-cols {
    grid-template-columns: repeat(4, 1fr) !important;
    display: grid !important;
  }
  
  /* Keep cards stacked at 480px for notifications page */
  .notifications-overview .overview-content-layout {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
  }
}

/* Light theme variants for Dashboard styles */
[data-theme="light"] .sortable-header{
  background:rgba(37,99,235,0.1)!important;
  color:#1e40af!important;
  border:1px solid rgba(37,99,235,0.2)!important
}
[data-theme="light"] .sortable-header:hover{
  background:rgba(37,99,235,0.2)!important;
  color:#1e3a8a!important;
  border-color:rgba(37,99,235,0.3)!important
}
[data-theme="light"] .sort-indicator{
  color:#1e40af
}
[data-theme="light"] .kpi-count-link{
  background:rgba(37,99,235,0.1)!important;
  border:1px solid rgba(37,99,235,0.15)!important;
  color:#1e40af!important
}
[data-theme="light"] .kpi-count-link:hover{
  background:rgba(37,99,235,0.2)!important;
  border-color:rgba(37,99,235,0.3)!important;
  color:#1e3a8a!important
}
[data-theme="light"] .kpi-count-link.kpi-count-active{
  background:rgba(37,99,235,0.25)!important;
  border:1px solid rgba(37,99,235,0.5)!important;
  color:#1e3a8a!important;
  box-shadow:0 0 8px rgba(37,99,235,0.2)!important
}
[data-theme="light"] .status-breakdown-item{
  background:rgba(37,99,235,0.1)!important;
  border:1px solid rgba(37,99,235,0.15)!important
}
[data-theme="light"] .status-breakdown-item:hover{
  background:rgba(37,99,235,0.2)!important;
  border-color:rgba(37,99,235,0.3)!important
}
[data-theme="light"] .status-breakdown-active{
  background:rgba(37,99,235,0.25)!important;
  border:1px solid rgba(37,99,235,0.5)!important;
  box-shadow:0 0 8px rgba(37,99,235,0.2)!important
}

/* Light theme support for apparatus compartments */
[data-theme="light"] .grid-3 > div[style*="background:rgba(255,255,255,0.02)"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

/* Light theme support for photo dropzones */
[data-theme="light"] .photo-dropzone[style*="border:2px dashed rgba(255,255,255,0.3)"] {
  border: 2px dashed #cbd5e1 !important;
  background: #f8fafc !important;
}

/* Light theme support for audit scan panels */
[data-theme="light"] div[style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] div[style*="background:rgba(255,255,255,0.02)"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

/* Status Change History */
.status-history-section{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line)
}
.status-history-title{
  font-size:0.85em;
  color:var(--muted);
  margin-bottom:8px
}
.status-history-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:200px;
  overflow-y:auto
}
.status-history-row{
  padding:6px 8px;
  background:var(--input);
  border-radius:6px;
  font-size:0.9em;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
.status-history-content{
  flex:1;
  min-width:200px
}
.status-history-content span{
  color:var(--muted)
}
.status-history-arrow{
  color:var(--muted);
  margin:0 4px
}
.status-history-meta{
  display:flex;
  gap:12px;
  align-items:center;
  flex-shrink:0
}
.status-history-meta span{
  color:var(--muted);
  font-size:0.85em
}

/* Settings Gear Icon */
.settings-gear{
  font-size:1.8em;
  color:var(--text);
  padding:0;
  border:none;
  background:none;
  text-decoration:none;
  flex-shrink:0
}
.settings-gear:hover{
  opacity:0.8
}

/* Dashboard Inline Styles - Extracted from dashboard.php */

/* Security Alert */
.security-alert-card{
  background:rgba(255,152,0,0.15);
  border-left:4px solid #ff9800;
  margin-bottom:16px
}
.security-alert-content{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.security-alert-title{
  color:#ff9800
}
.security-alert-message{
  margin:4px 0 0 0;
  color:#fff
}

/* KPI Grid */
.module-kpi-grid.kpi-8-cols{
  max-width:100%;
  margin:0 auto
}

/* KPI Content Padded - Word wrap */
.kpi-content-padded-wrap{
  word-wrap:break-word;
  overflow-wrap:break-word;
  hyphens:auto;
  max-width:100%;
  width:100%;
  box-sizing:border-box
}
.kpi-content-padded-wrap .muted{
  white-space:normal !important;
  word-wrap:break-word;
  overflow-wrap:break-word;
  line-height:1.2;
  text-align:center;
  display:block;
  max-width:100%;
  word-break:break-word
}
.kpi-content-line-height-1-3{
  line-height:1.3
}
.kpi-content-line-height-1-2{
  line-height:1.2
}

/* Status Breakdown Header */
.status-breakdown-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px
}
.status-breakdown-clear-cache{
  padding:2px 8px;
  font-size:0.85em;
  white-space:nowrap;
  text-decoration:none
}

/* Items Card Header */
.items-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  flex-wrap:wrap;
  gap:8px
}
.items-card-title{
  white-space:nowrap;
  margin:0
}
.items-card-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:nowrap;
}
/* Button flex styles moved to buttons.css */

@media (max-width:1200px){
  .items-card-actions{
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  /* Button flex styles moved to buttons.css */
}

.dashboard-overview-header{
  gap:12px;
  flex-wrap:wrap;
}
.dashboard-overview-heading{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.overview-collapse-btn{
  display:none !important;
}
.dashboard-overview-body{
  transition:max-height .25s ease,opacity .2s ease;
}

@media (max-width:1024px){
  .overview-collapse-btn{
    display:inline-flex !important;
  }
}

/* Bulk Update Section */
.bulk-update-section{
  display:none;
  margin-bottom:16px
}
.bulk-update-section .card{
  border:1px solid rgba(255,153,0,0.35);
}
.bulk-update-intro{
  margin-bottom:16px
}
.bulk-update-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:12px;
  margin-bottom:12px
}
.bulk-update-field-label{
  display:block;
  margin-bottom:4px;
  font-size:0.9em
}
/* .bulk-update-field-select - Use .w-full utility class instead */
.bulk-update-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap
}

/* Bulk Update Location Section */
.bulk-update-location-section{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line)
}
.bulk-update-section-title{
  font-size:1.1em;
  font-weight:600;
  margin-bottom:12px;
  color:var(--text)
}
.bulk-update-location-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:12px;
  margin-bottom:16px
}
.bulk-update-cascading-fields{
  margin-top:12px
}
.bulk-update-cascading-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px
}
/* .bulk-selected-count - Use .text-sm utility class instead */

/* Filter Form */
.dashboard-filters-form{
  margin-bottom:20px
}
.dashboard-filters-row{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap
}
.dashboard-filters-grid{
  flex:1;
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
/* .dashboard-filter-label - Use .m-0 utility class instead */
.dashboard-filter-label-flex{
  flex:1;
  min-width:200px;
  max-width:400px
}
.dashboard-filter-label-span{
  display:block;
  font-size:0.85em;
  margin-bottom:4px;
  color:var(--muted)
}
.dashboard-filter-label-center{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center
}
.dashboard-filter-label-center-span{
  display:block;
  font-size:0.85em;
  margin-bottom:4px;
  color:var(--muted);
  text-align:center
}
.dashboard-filter-toggle-container{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:32px
}
#dashboard-filters-form .toggle-slider{
  position:relative;
  width:44px;
  height:24px;
  border-radius:12px;
  border:none;
  background:rgba(255,255,255,0.1);
  cursor:pointer;
  padding:2px;
  transition:background 0.2s
}
#dashboard-filters-form .toggle-slider.active{
  background:rgba(76,175,80,0.5)
}
#dashboard-filters-form .toggle-slider-handle{
  display:block;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  transition:transform 0.2s;
  transform:translateX(0)
}
#dashboard-filters-form .toggle-slider.active .toggle-slider-handle{
  transform:translateX(20px)
}
.location-filters-row{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-top:12px;
  justify-content:flex-start
}
.location-filter-label {
  margin: 0 !important;
}
.location-filter-select{
  width:150px;
  min-width:150px
}
.location-filter-select-wide{
  width:200px;
  min-width:200px
}
.filter-apparatus-fields{
  display:none;
  gap:12px;
  flex-wrap:wrap
}
.filter-apparatus-fields.active{
  display:flex
}
.filter-location-fields{
  display:none;
  gap:12px;
  flex-wrap:wrap
}
.filter-location-fields.active{
  display:flex
}
.status-breakdown-item:not(.status-breakdown-active):hover{
  background:rgba(77,163,255,0.1) !important;
  border-color:rgba(77,163,255,0.3) !important
}
.location-filter-submit{
  flex-shrink:0
}

/* Table Styles */
/* .items-table - Use .w-full utility class instead */
.table-checkbox-header{
  width:40px
}
.table-col-name{
  width:20%;
  min-width:6ch
}
.table-col-asset-id{
  width:12%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.table-col-location{
  width:14%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.table-col-type{
  width:14%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.table-col-manufacturer{
  width:14%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.table-col-status{
  width:10%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.table-col-lifespan{
  width:8%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.table-col-end-of-life{
  width:12%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

 #items-table th.table-col-end-of-life,
 #items-table td.table-end-of-life-cell{
   text-align:center;
 }
.table-col-date-destroyed{
  width:12%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.table-name-cell{
  word-wrap:break-word;
  word-break:break-word;
  min-width:6ch;
  padding:0 6px
}
#items-table .table-col-name .sortable-header{
  display:inline-flex;
  align-items:center;
  min-width:6ch;
  padding:0 6px
}
.table-asset-id-cell{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:0
}
.table-location-cell{
  font-size:0.75em;
  line-height:1.3;
  padding:4px 8px;
  vertical-align:top
}
.table-type-cell{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:0
}
.table-manufacturer-cell{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:0
}
.table-status-cell{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:0
}
.table-lifespan-cell{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:0
}
.table-end-of-life-cell{
  white-space:nowrap;
  text-align:center
}
.table-date-destroyed-cell{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:0
}

/* End of Life Display - moved to dates.css */

/* Pagination */
.pagination{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap
}
.pagination-container{
  margin-top:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px
}
.pagination-controls{
  display:flex;
  gap:4px;
  align-items:center
}
.pagination-all-link{
  margin-left:8px
}
.pagination-info{
  margin:0 8px
}
.pagination-ellipsis{
  padding:0 4px;
  color:var(--muted)
}

/* Batch Operations Button Highlight */
.batch-operations-btn-highlight{
  background:rgba(255,235,59,0.3) !important;
  border-color:rgba(255,235,59,0.5) !important;
  color:#fff !important;
  font-weight:600 !important
}

/* Status Breakdown Item Hover */
.status-breakdown-item-hover{
  background:rgba(77,163,255,0.1) !important;
  border-color:rgba(77,163,255,0.3) !important
}

/* ============================================
   TENANT MANAGEMENT RESPONSIVE STYLES
   ============================================ */

/* Tenant Management Table - Desktop: Align actions to left */
.actions-container {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.tenants-table .tenant-action-icon{
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px !important;
  line-height: 1 !important;
}

/* Tenant Management Table - Mobile Responsive */
@media (max-width: 768px) {
  /* Make table scrollable on mobile */
  .tenants-table {
    font-size: 0.9em;
  }
  
  .tenants-table thead th,
  .tenants-table tbody td {
    padding: 8px 4px;
  }
  
  /* Stack tenant info vertically on mobile */
  .tenants-table tbody td:first-child {
    white-space: normal !important;
  }
  
  .tenants-table tbody td:first-child > div {
    margin-bottom: 4px;
  }
  
  /* Hide less important columns on mobile */
  .tenants-table thead th:nth-child(2),
  .tenants-table tbody td:nth-child(2) {
    display: none;
  }
  
  /* Make actions column full width with wrapping buttons */
  .tenants-table tbody td[data-actions-cell] {
    width: 100%;
    display: block;
    padding: 12px !important;
    border-top: 2px solid var(--line, #333);
    background: var(--card-alt, #0e1535);
  }
  
  .tenants-table .actions-container {
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .tenants-table .actions-container .btn,
  .tenants-table .actions-container form {
    flex-shrink: 0;
    display: inline-flex;
  }
  
  .tenants-table .actions-container form .btn {
    width: auto;
  }
  
  /* Keep action buttons at icon size on mobile, allow wrapping */
  /* Tenant action button styles moved to buttons.css - use .tenant-action-icon class */
  
  /* Stack admin/default tenant info */
  .tenants-table tbody td[data-actions-cell] > div {
    flex-direction: row;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .tenants-table tbody td[data-actions-cell] > div > span {
    text-align: center;
    display: block;
    width: 100%;
    margin-top: 8px;
  }
}

/* Tenant Form - Mobile Responsive */
@media (max-width: 768px) {
  /* Stack form grid on mobile */
  .tenant-form-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  /* Stack form actions */
  .tenant-form-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  
  .tenant-form-actions > div {
    width: 100%;
  }
  
  /* Button width styles moved to buttons.css - use .w-full class */
}

/* Tenant Edit Form - Mobile Responsive */
@media (max-width: 768px) {
  /* Stack form rows */
  .tenant-edit-form-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  .tenant-edit-label {
    text-align: left !important;
    padding-top: 0 !important;
    font-weight: 600;
  }
  
  /* Stack user form rows */
  .user-form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .user-form-row-password {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .user-form-row-password > div:last-child {
    display: flex;
    justify-content: center;
  }
  
  /* Hide less important columns on mobile (roles only) */
  .users-table thead th:nth-child(3),
  .users-table tbody td:nth-child(3) {
    display: none;
  }
  
  /* Tab navigation - stack on mobile */
  .tenant-tabs {
    flex-direction: column;
    border-bottom: none;
    border-left: 2px solid var(--line);
    padding-left: 8px;
  }
  
  /* Tab button styles moved to buttons.css */
}

/* Smaller mobile devices */
@media (max-width: 480px) {
  .tenants-table,
  .users-table {
    font-size: 0.85em;
  }
  
  .tenants-table thead th,
  .tenants-table tbody td,
  .users-table thead th,
  .users-table tbody td {
    padding: 6px 2px;
  }
  
  /* Tenant action button mobile styles moved to buttons.css */
}

.ptm-modal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.ptm-modal.open{display:flex}
.ptm-dialog{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  max-width:600px;
  width:100%;
  max-height:80vh;
  overflow-y:auto;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
.ptm-header{
  padding:20px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.ptm-close{
  background:none;
  border:none;
  font-size:24px;
  cursor:pointer;
  color:var(--text);
  padding:0;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ptm-content{padding:20px}
.ptm-loading{margin:0 0 16px 0;color:var(--muted)}
.ptm-footer{padding:16px 20px;border-top:1px solid var(--line);text-align:right}
.ptm-body{
  padding:20px;
}
.ptm-intro{margin:0 0 16px 0;color:var(--text)}
.ptm-ticket{padding:16px;background:var(--bg);border:1px solid var(--line);border-radius:4px;margin-bottom:12px}
.ptm-ticket-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ptm-badges{display:flex;gap:8px;align-items:center}
.ptm-badge{padding:4px 8px;border-radius:4px;font-size:0.85em;font-weight:600;color:#fff}
.ptm-badge-type{background:#2196F3}
.ptm-badge-status{background:#888}
.ptm-meta{display:flex;gap:16px;margin-bottom:12px;font-size:0.85em;color:var(--muted);flex-wrap:wrap}
.ptm-user-note{padding:12px;background:rgba(33,150,243,0.1);border-left:3px solid #2196F3;border-radius:4px;margin-bottom:12px;white-space:pre-wrap;color:var(--text)}
.ptm-description{padding:12px;margin-top:8px;background:var(--bg);border:1px solid var(--line);border-radius:4px;white-space:pre-wrap;color:var(--text);font-size:0.9em;line-height:1.5}
.ptm-completed{margin-top:24px}
.ptm-completed-details{
  cursor:pointer;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px;
}
.ptm-completed-summary{
  font-weight:600;
  color:var(--text);
  padding:8px;
  background:transparent;
  border-radius:6px;
  user-select:none;
}
.ptm-completed-content{margin-top:12px}

.ptm-status-pending{background:#ff9800}
.ptm-status-open{background:#2196F3}
.ptm-status-in_progress{background:#9c27b0}
.ptm-status-in-progress{background:#9c27b0}
.ptm-status-testing{background:#00bcd4}
.ptm-status-complete{background:#8bc34a}
.ptm-status-not_planned{background:#607d8b}
.ptm-status-not-planned{background:#607d8b}
.ptm-status-closed{background:#4caf50}

/* ============================================
   USERS TABLE - Tenant Edit Page
   ============================================ */
.users-table tbody td{
  vertical-align:middle;
}
.users-table .user-label-col{
  text-align:right;
  white-space:nowrap;
  width:80px;
}
.users-table .user-label-col div{
  line-height:24px;
  font-size:0.85em;
}
.users-table .user-info-col div{
  line-height:24px;
}
.users-table .user-info-col .user-email{
  font-size:0.9em;
}
.users-table .user-roles-col{
  text-align:center;
}
.users-table .user-roles-col span{
  font-size:0.9em;
}
.users-table .user-status-col{
  text-align:center;
}
.users-table .user-actions-col{
  text-align:center;
  width:120px;
}
.users-table .user-actions-col div{
  justify-content:center;
}
.users-table .user-actions-col div{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}
.users-table .user-actions-col form{
  display:inline;
}
.users-table thead th.user-label-col{
  text-align:right;
  width:80px;
}
.users-table thead th.user-actions-col{
  width:120px;
}