/* classic.css — refined early-2000s corporate aesthetic, JMA branded.
   Tahoma 11px, elegant panels with subtle shadows, clean tables.
   Colors per 2026 JMA Brand Book:
     Primary:   Black #000000, Gold #F2A900, White #FFFFFF
     Secondary: Red #E03C31, Gray #63666A, Light Gray #A7A8A9
   Derived:  gold hover #D99700, dark-gold links #996F00,
             charcoal gradient end #2B2B2B (spec §139). */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #ECECED;
  font: 11px Tahoma, Verdana, "MS Sans Serif", Arial, sans-serif;
  line-height: 1.4;
  color: #333;
}
a { color: #996F00; text-decoration: none; }
a:visited { color: #63666A; }
a:hover { color: #E03C31; text-decoration: underline; }

/* Title bar — refined gradient */
.titlebar {
  background: #000000;
  background: linear-gradient(135deg, #000000 0%, #2B2B2B 100%);
  color: #FFF; font-weight: bold; font-size: 12px;
  padding: 6px 12px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 3px solid #F2A900;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.titlebar .userbox { font-weight: normal; font-size: 11px; opacity: 0.95; }
.titlebar a { color: #FFF; }

/* Menu bar — cleaner */
.menubar {
  background: #E5E5E6;
  border-bottom: 1px solid #A7A8A9;
  padding: 4px 8px;
  display: flex;
  gap: 2px;
}
.menubar a {
  display: inline-block; padding: 4px 12px; text-decoration: none; color: #333;
  border-radius: 2px;
  transition: all 0.15s ease;
  cursor: pointer;
}
.menubar a:hover { 
  background: #D6D6D8; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.menubar a.active { 
  background: #000000; 
  color: #FFF;
  font-weight: bold;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

/* Layout */
.layout { display: flex; min-height: calc(100vh - 52px); }
.sidebar {
  width: 200px; min-width: 200px;
  background: linear-gradient(to bottom, #F5F5F6, #EFEFF0);
  border-right: 1px solid #A7A8A9;
  padding: 8px;
}
.sidebar .navhead {
  background: linear-gradient(135deg, #000000 0%, #2B2B2B 100%);
  color: #FFF; font-weight: bold;
  padding: 5px 8px; margin: 12px 0 6px;
  border-radius: 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sidebar .navhead:first-child { margin-top: 0; }
.sidebar a {
  display: block; padding: 4px 8px 4px 16px; text-decoration: none; color: #996F00;
  border-radius: 2px;
  margin-bottom: 1px;
  transition: all 0.15s ease;
  position: relative;
}
.sidebar a:before {
  content: "▶";
  position: absolute;
  left: 6px;
  opacity: 0;
  font-size: 8px;
  transition: opacity 0.15s ease;
}
.sidebar a:hover { 
  background: #E2E2E4;
  color: #000000;
  padding-left: 18px;
}
.sidebar a:hover:before { opacity: 1; }
.content { 
  flex: 1; 
  padding: 12px 16px; 
  overflow-x: auto;
  background: #FAFAFA;
}

/* Panels — refined with soft shadows */
.panel {
  background: #FFF;
  border: 1px solid #D3D3D5;
  border-radius: 3px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  /* no overflow:hidden — it clipped absolutely-positioned dropdowns
     (asset autocomplete); header corners are rounded on h2 instead */
}
.panel h2 {
  margin: 0; font-size: 12px; font-weight: bold;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(to right, #000000, #2B2B2B);
  color: #FFF;
  border-bottom: 3px solid #F2A900;
  padding: 6px 10px;
  letter-spacing: 0.3px;
}
.panel .inner { 
  padding: 10px;
  line-height: 1.5;
}

/* Data tables — clean & modern */
table.data { 
  border-collapse: collapse; 
  width: 100%; 
  background: #FFF;
}
table.data th {
  background: #F2F2F3;
  border-bottom: 2px solid #000000;
  border-right: 1px solid #D3D3D5;
  text-align: left; 
  padding: 6px 8px; 
  font-weight: bold; 
  white-space: nowrap;
  color: #333;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
table.data td { 
  border-right: 1px solid #ECECED;
  border-bottom: 1px solid #F2F2F3;
  padding: 5px 8px; 
}
table.data tr:nth-child(even) td { background: #FAFAF8; }
table.data tr:hover td { 
  background: #F0F5FF;
  transition: background 0.1s ease;
}

/* Property sheets (label/value) */
table.props { border-collapse: collapse; }
table.props th {
  text-align: right; vertical-align: top; padding: 5px 12px 5px 0;
  color: #555; font-weight: bold; white-space: nowrap;
}
table.props td { padding: 5px 24px 5px 0; }

/* Buttons & inputs — refined modern retro */
button, input[type=submit] {
  font: 13px/16px Tahoma, Verdana, sans-serif;
  font-weight: 600;
  background: #F2A900;
  color: #000;
  border: 1px solid #F2A900;
  padding: 9px 16px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
button:hover, input[type=submit]:hover {
  background: #D99700;
  border-color: #D99700;
  box-shadow: 0 2px 4px rgba(242, 169, 0, 0.35);
}
button:active, input[type=submit]:active {
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
/* Destructive actions */
button.danger, input[type=submit].danger {
  background: #FFF;
  color: #E03C31;
  border: 1px solid #E03C31;
  font-weight: 500;
}
button.danger:hover, input[type=submit].danger:hover {
  background: #E03C31;
  border-color: #E03C31;
  color: #FFF;
  box-shadow: 0 2px 4px rgba(224, 60, 49, 0.3);
}
/* Compact buttons for inline table rows / sub-forms */
button.small, input[type=submit].small {
  padding: 5px 10px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
}

input[type=text], input[type=password], input[type=date], select, textarea {
  font: 13px/16px Tahoma, Verdana, sans-serif;
  border: 1px solid #C9C9CB;
  padding: 9px 10px;
  background: #FFF;
  border-radius: 3px;
  color: #333;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
select { cursor: pointer; }
input[type=text]:hover, input[type=password]:hover, input[type=date]:hover, select:hover, textarea:hover {
  border-color: #A7A8A9;
}
input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #F2A900;
  box-shadow: 0 0 3px rgba(242, 169, 0, 0.45);
}
textarea { width: 100%; }

/* Status / priority pills — refined */
.pill { 
  padding: 3px 7px; 
  font-weight: bold; 
  border: 1px solid rgba(0,0,0,0.15);
  white-space: nowrap;
  border-radius: 2px;
  font-size: 10px;
}
.pri-Critical { background: #E74C3C; color: #FFF; }
.pri-Urgent   { background: #E67E22; color: #FFF; }
.pri-High     { background: #F39C12; color: #FFF; }
.pri-Normal   { background: #ECF0F1; color: #333; }
.pri-Low      { background: #F5F5F5; color: #7F8C8D; }
.sla-breached { color: #E74C3C; font-weight: bold; }
.sla-at_risk  { color: #E67E22; font-weight: bold; }
.sla-ok, .sla-met { color: #27AE60; }

/* Conversation timeline */
.msg { 
  border: 1px solid #D3D3D5; 
  margin-bottom: 8px; 
  background: #FFF;
  border-radius: 2px;
  overflow: hidden;
}
.msg .head {
  padding: 5px 8px; 
  border-bottom: 1px solid #ECECED; 
  font-weight: bold;
  background: #F5F5F6;
  font-size: 11px;
}
.msg .body { 
  padding: 8px; 
  white-space: pre-wrap;
  line-height: 1.4;
}
.msg.internal_note { 
  border: 1px solid #E6D5A8;
  background: #FFFEF9;
}
.msg.internal_note .head { 
  background: #F9F3E6;
  font-weight: bold;
}
.msg.internal_note .head::before { 
  content: "⚠ INTERNAL NOTE "; 
  color: #D4A017;
  margin-right: 4px;
}
.msg.system_event .body, .msg.automation .body, .msg.monitoring_event .body { 
  color: #666; 
  font-style: italic;
  font-size: 10px;
}
.msg.system_event .head, .msg.monitoring_event .head { 
  background: #FFF6E0;
}

/* Dashboard stat blocks */
.stats { display: flex; flex-wrap: wrap; gap: 12px; }
.stat {
  background: #FFF; 
  border: 1px solid #D3D3D5;
  padding: 10px 16px; 
  min-width: 120px;
  text-align: center;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.stat .n { font-size: 24px; font-weight: bold; display: block; margin-bottom: 4px; }
.stat .n.warn { color: #E67E22; }
.stat .n.bad { color: #E74C3C; }
.stat .label { font-size: 10px; color: #7F8C8D; text-transform: uppercase; }

/* Login */
.loginbox {
  width: 380px; margin: 60px auto; background: #FFF;
  border: 1px solid #D3D3D5;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.loginbox h1 {
  margin: 0; font-size: 13px; color: #FFF; padding: 8px 12px;
  background: linear-gradient(135deg, #000000, #2B2B2B);
  letter-spacing: 0.5px;
}
.loginbox .inner { padding: 20px; }

.footer {
  border-top: 1px solid #A7A8A9; 
  color: #7F8C8D;
  padding: 6px 10px; 
  text-align: center;
  font-size: 10px;
}

@media (prefers-reduced-motion: reduce) { 
  * { transition: none !important; animation: none !important; }
}

/* Asset status pills */
.st-active   { background: #D5F4E6; color: #1E7E34; border-color: #1E7E34; }
.st-in_repair{ background: #FFE8CC; color: #8B4513; border-color: #8B4513; }
.st-storage  { background: #E8E8F8; color: #4A148C; border-color: #4A148C; }
.st-retired  { background: #F0F0F0; color: #666; border-color: #999; }
.st-lost     { background: #FFCCCB; color: #E03C31; border-color: #E03C31; }

/* Sortable headers & pager */
th a.sortlink { 
  color: #333; 
  text-decoration: none; 
  display: block;
  transition: color 0.15s ease;
}
th a.sortlink:hover { 
  color: #996F00; 
  text-decoration: underline;
}
.filterbar {
  margin-bottom: 12px;
  padding: 12px 14px;
  background: #FFF;
  border-radius: 4px;
  border: 1px solid #D3D3D5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 6px;
  font-size: 12px;
  font-weight: 600;
  color: #63666A;
}
.filterbar select, .filterbar input[type=text] { margin-right: 10px; font-weight: normal; }
.filterbar input[type=submit] { margin-left: 2px; }
.pager { 
  margin-top: 10px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  font-size: 10px;
}
.pager .pages a, .pager .pages b { margin: 0 4px; }
.pager .dim { color: #A7A8A9; margin: 0 4px; }

/* Tags, tasks */
.pill.tag { background: #FFF6E0; color: #333; border-color: #A7A8A9; }
.tagx { 
  border: none; 
  background: none; 
  padding: 0 4px; 
  cursor: pointer; 
  color: #E74C3C; 
  font-weight: bold;
  transition: color 0.15s ease;
}
.tagx:hover { color: #E03C31; }
.taskrow { padding: 3px 0; }
.taskbox { 
  border: none; 
  background: none; 
  cursor: pointer; 
  font-size: 13px; 
  padding: 0 4px 0 0;
  transition: color 0.15s ease;
}
.taskbox:hover { color: #996F00; }
.taskdone { text-decoration: line-through; color: #A7A8A9; }
.taskmeta { color: #999; font-style: italic; font-size: 10px; }

/* Reliability scores */
.relscore { 
  font-weight: bold; 
  padding: 3px 8px; 
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 2px;
  font-size: 10px;
}
.rel-good    { background: #D5F4E6; color: #1E7E34; }
.rel-watch   { background: #FFF3CD; color: #856404; }
.rel-problem { background: #F8D7DA; color: #721C24; }

/* Knowledge base article rendering */
.kb-body h3 { font-size: 13px; margin: 16px 0 6px; color: #000000; font-weight: bold; }
.kb-body h4 { font-size: 12px; margin: 12px 0 6px; color: #333; font-weight: bold; }
.kb-body p { margin: 0 0 10px; line-height: 1.5; }
.kb-body ul, .kb-body ol { margin: 0 0 10px 24px; padding: 0; }
.kb-body li { margin-bottom: 4px; }
.kb-body code { 
  background: #F5F5F6; 
  border: 1px solid #ECECED; 
  padding: 2px 6px; 
  font-family: "Courier New", monospace;
  border-radius: 2px;
}
.kb-body pre { 
  background: #2D2D2D; 
  color: #E8E8E8; 
  padding: 10px; 
  overflow-x: auto; 
  font-family: "Courier New", monospace;
  font-size: 11px;
  border-radius: 2px;
  border: 1px solid #1A1A1A;
  line-height: 1.4;
}
.kb-body pre code { 
  background: none; 
  border: none; 
  padding: 0; 
  color: inherit;
}

/* Back button styling */
.back-button {
  display: inline-block;
  padding: 6px 12px;
  background: #f0f0f0;
  color: #000000;
  text-decoration: none;
  border-radius: 3px;
  font-size: 0.85em;
  margin-right: 12px;
  border: 1px solid #ddd;
  transition: all 0.15s ease;
  font-weight: 500;
  cursor: pointer;
}
.back-button:hover {
  background: #e8e8e8;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  color: #996F00;
}

/* Tab styling */
.tab-container {
  display: flex;
  border-bottom: 2px solid #000000;
  margin-bottom: 16px;
  gap: 4px;
}
.tab {
  display: inline-block;
  padding: 12px 20px;
  background: #f0f0f0;
  color: #333;
  text-decoration: none;
  border: 1px solid #ccc;
  border-bottom: 2px solid #ccc;
  margin-right: 4px;
  border-radius: 4px 4px 0 0;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.15s ease;
  cursor: pointer;
}
.tab:hover {
  background: #e8e8e8;
  border-color: #bbb;
  color: #000000;
}
.tab.active {
  background: white;
  color: #000000;
  border: 1px solid #000000;
  border-bottom: 2px solid white;
  font-weight: 600;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
}

/* Back to top button */
.back-to-top {
  display: inline-block;
  padding: 9px 16px;
  line-height: 16px;
  background: #f0f0f0;
  color: #000000;
  text-decoration: none;
  border-radius: 3px;
  font-size: 13px;
  border: 1px solid #ddd;
  transition: all 0.15s ease;
  font-weight: 500;
  cursor: pointer;
}
.back-to-top:hover {
  background: #e8e8e8;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  color: #996F00;
}

/* Filter buttons (view options) */
.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}
.filter-button {
  display: inline-block;
  padding: 9px 16px;
  line-height: 16px;
  background: #f0f0f0;
  color: #333;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  cursor: pointer;
}
.filter-button:hover {
  background: #e8e8e8;
  border-color: #bbb;
  color: #000000;
}
.filter-button.active {
  background: #000000;
  color: white;
  border-color: #000000;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.filter-separator {
  color: #ccc;
  margin: 0 4px;
}
.filter-button.primary {
  background: #F2A900;
  color: #000;
  border-color: #F2A900;
}
.filter-button.primary:hover {
  background: #D99700;
  border-color: #D99700;
  box-shadow: 0 2px 4px rgba(242, 169, 0, 0.35);
}

/* Reset button with icon */
.reset-button {
  display: inline-block;
  padding: 9px 13px;
  line-height: 16px;
  background: #f0f0f0;
  color: #333;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 16px;
  font-weight: normal;
  transition: all 0.15s ease;
  cursor: pointer;
  line-height: 1;
}
.reset-button:hover {
  background: #e8e8e8;
  border-color: #bbb;
  color: #996F00;
  title: 'Reset filters';
}

/* Cancel button (secondary action) */
.cancel-button {
  display: inline-block;
  padding: 9px 16px;
  line-height: 16px;
  background: #f0f0f0;
  color: #333;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  cursor: pointer;
  margin-left: 8px;
}
.cancel-button:hover {
  background: #e8e8e8;
  border-color: #bbb;
  color: #333;
}

/* Action button with icons */
.action-button {
  display: inline-block;
  padding: 8px 14px;
  background: #f0f0f0;
  color: #333;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.action-button:hover {
  background: #e8e8e8;
  border-color: #bbb;
  color: #000000;
}
a .action-button:hover {
  color: #000000;
}

/* RMM Actions styling */
.rmm-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.rmm-actions select {
  padding: 9px 10px;
  line-height: 16px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: white;
  color: #333;
  font-size: 13px;
  font-family: Tahoma, sans-serif;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.rmm-actions select:hover {
  border-color: #000000;
}
.rmm-actions select:focus {
  outline: none;
  border-color: #F2A900;
  box-shadow: 0 0 3px rgba(242, 169, 0, 0.45);
}
.rmm-actions button {
  padding: 9px 14px;
  line-height: 16px;
  background: #F2A900;
  color: #000;
  border: 1px solid #F2A900;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.rmm-actions button:hover {
  background: #D99700;
  border-color: #D99700;
  box-shadow: 0 2px 4px rgba(242, 169, 0, 0.35);
}
.rmm-actions button:active {
  transform: translateY(1px);
}
.rmm-actions.compact select {
  font-size: 11px;
  padding: 5px 8px;
}
.rmm-actions.compact button {
  font-size: 11px;
  padding: 5px 10px;
}

/* Analytics dashboard */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.stat-card {
  background: #FFF;
  border: 1px solid #D3D3D5;
  border-radius: 4px;
  border-top: 3px solid #F2A900;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.stat-card .stat-value { font-size: 26px; font-weight: bold; color: #000; line-height: 1.1; }
.stat-card .stat-label { font-size: 11px; color: #63666A; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; }
.stat-card.stat-warn { border-top-color: #E03C31; }
.stat-card.stat-warn .stat-value { color: #E03C31; }

/* Daily volume — CSS column chart */
.volume-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
  padding: 4px 0;
  border-bottom: 2px solid #000;
}
.volume-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.volume-bar {
  width: 100%;
  background: linear-gradient(to top, #D99700, #F2A900);
  border-radius: 2px 2px 0 0;
  min-height: 1px;
  transition: background 0.15s ease;
}
.volume-col:hover .volume-bar { background: #000; }
.volume-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #63666A;
  margin-top: 4px;
}

/* SLA progress */
.sla-track, .bar-track {
  background: #ECECED;
  border-radius: 3px;
  height: 14px;
  overflow: hidden;
  width: 100%;
}
.sla-fill { height: 100%; border-radius: 3px; }
.fill-good { background: #1E7E34; }
.fill-mid  { background: #F2A900; }
.fill-bad  { background: #E03C31; }
.sla-good { color: #1E7E34; }
.sla-mid  { color: #B87400; }
.sla-bad  { color: #E03C31; }

/* Horizontal breakdown bars */
.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bar-label { width: 130px; min-width: 130px; font-weight: 600; color: #333; text-align: right; }
.bar-fill { height: 100%; background: linear-gradient(to right, #D99700, #F2A900); border-radius: 3px; }
.bar-count { width: 40px; min-width: 40px; font-weight: bold; color: #000; }

/* Side-by-side panels */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 12px;
}
.two-col .panel { margin-bottom: 12px; }
@media (max-width: 1100px) { .two-col { grid-template-columns: 1fr; } }

/* Asset autocomplete dropdown */
.autocomplete-wrap { position: relative; display: inline-block; }
.autocomplete-list {
  position: absolute;
  top: 100%; left: 0;
  z-index: 200;
  min-width: 380px;
  max-height: 260px;
  overflow-y: auto;
  background: #FFF;
  border: 1px solid #A7A8A9;
  border-top: 2px solid #F2A900;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.autocomplete-item {
  display: grid;
  grid-template-columns: 150px 1fr 130px;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid #ECECED;
  align-items: center;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.active { background: #FFF6E0; }
.autocomplete-item .ac-tag { font-weight: bold; color: #000; }
.autocomplete-item .ac-name { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autocomplete-item .ac-assigned { color: #63666A; font-style: italic; text-align: right; }

/* Live-update banner (ticket list / dashboard) */
#itops-refresh-banner {
  display: none;
  position: fixed;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  background: #F2A900;
  color: #000;
  font-weight: bold;
  padding: 8px 18px;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  text-decoration: none;
  cursor: pointer;
}
#itops-refresh-banner:hover { background: #D99700; }

/* Report builder column lists */
.col-list {
  list-style: none; margin: 0; padding: 4px;
  min-height: 120px; max-height: 320px; overflow-y: auto;
  border: 1px solid #D3D3D5; border-radius: 3px; background: #FAFAFA;
}
.col-list.selected { background: #FFFDF5; border-color: #F2A900; }
.col-list.drop-target { outline: 2px dashed #F2A900; }
.col-list li {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; margin: 2px 0; background: #FFF;
  border: 1px solid #ECECED; border-radius: 3px; cursor: grab;
}
.col-list li.dragging { opacity: 0.4; }
.col-list li .grip { color: #A7A8A9; cursor: grab; }
.col-list li .col-ctl, .col-list li .col-add { margin-left: auto; }
.col-list li button {
  min-height: 0; height: 22px; padding: 0 6px; font-size: 11px; line-height: 20px;
  background: #F5F5F6; border: 1px solid #D3D3D5; color: #333; margin-left: 2px;
}
.col-list li button:hover { background: #F2A900; color: #000; }

/* =====================================================================
   MOBILE (phones and small tablets). The desktop look is untouched;
   below 820px the sidebar becomes a drawer, key tables become cards,
   forms stack, and type scales up for thumbs. Admin pages are marked
   desktop-first and simply scroll.
   ===================================================================== */
.nav-toggle, .title-short, .desktop-note { display: none; }

@media (max-width: 820px) {
  html, body { font-size: 14px; }
  body { -webkit-text-size-adjust: 100%; }

  /* Title bar: hamburger, short title, compact user box */
  .titlebar { flex-wrap: wrap; gap: 4px 10px; padding: 8px 10px; }
  .nav-toggle {
    display: inline-block; color: #F2A900; text-decoration: none;
    font-size: 22px; line-height: 1; margin-right: 10px; vertical-align: middle;
  }
  .title-full { display: none; }
  .title-short { display: inline; }
  .titlebar .userbox { font-size: 12px; flex-basis: 100%; }

  /* Top menubar scrolls sideways instead of wrapping */
  .menubar { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .menubar a { display: inline-block; padding: 12px 14px; font-size: 14px; }

  /* Sidebar → drawer */
  .layout { display: block; min-height: 0; }
  .sidebar {
    display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px;
    overflow-y: auto; z-index: 400; box-shadow: 4px 0 18px rgba(0,0,0,0.35); padding-bottom: 40px;
  }
  body.nav-open .sidebar { display: block; }
  body.nav-open::before {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 390;
  }
  .sidebar a { padding: 12px 16px; font-size: 15px; }
  .sidebar .navhead { font-size: 12px; padding: 10px 16px; }
  .content { width: auto; padding: 8px; }

  /* Panels */
  .panel { margin-bottom: 10px; }
  .panel h2 { white-space: normal; line-height: 1.4; }
  .panel .inner { padding: 10px; }
  .back-button { margin-bottom: 4px; }

  /* Every control is a thumb target */
  input[type=text], input[type=password], input[type=date], input[type=email],
  select, textarea, input[type=submit], button, .filter-button, .action-button,
  .cancel-button, .reset-button {
    font-size: 15px !important; min-height: 44px; line-height: 20px;
  }
  input[type=text], input[type=password], input[type=date], input[type=email],
  select, textarea { width: 100% !important; box-sizing: border-box; max-width: 100%; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  .small { min-height: 36px !important; }

  /* Filter bars and view buttons stack */
  .filter-bar, .filterbar, form.filterbar { display: block !important; }
  .filter-bar label, .filterbar label { display: block; margin-bottom: 8px; }
  .filter-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
  .filter-buttons .filter-button { flex: 1 1 44%; text-align: center; }

  /* Property tables (detail pages, forms) stack label over value */
  table.props, table.props tbody, table.props tr, table.props th, table.props td { display: block; width: 100%; box-sizing: border-box; }
  table.props th { text-align: left; padding: 8px 0 2px; border: none; background: none; color: #63666A; font-size: 12px; }
  table.props td { padding: 0 0 8px; border: none; }

  /* Generic data tables: horizontal scroll fallback */
  .inner table.data:not(.cards) { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* Card tables: one card per row, label: value lines */
  table.data.cards, table.data.cards tbody { display: block; width: 100%; }
  table.data.cards tr { display: block; margin-bottom: 10px; border: 1px solid #D3D3D5; border-radius: 4px; background: #FFF; padding: 8px 10px; }
  table.data.cards tr:first-child { display: none; }               /* header row */
  table.data.cards td { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border: none; border-bottom: 1px dotted #ECECED; text-align: right; }
  table.data.cards td:last-child { border-bottom: none; }
  table.data.cards td::before { content: attr(data-label); color: #63666A; font-size: 12px; text-align: left; flex: 0 0 38%; }
  table.data.cards td[data-label=""]::before { display: none; }
  table.data.cards td:first-child { font-size: 16px; }
  table.data.cards td:first-child::before, table.data.cards td:nth-child(2)::before { display: none; }
  table.data.cards td:nth-child(2) { text-align: left; font-weight: bold; }
  .pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
  .pager a, .pager b { padding: 8px 10px; display: inline-block; }

  /* Ticket detail: inline action forms stack */
  .inner form[style*="display:inline"] { display: block !important; margin-bottom: 8px; }
  .inner form[style*="display:inline"] select { margin-bottom: 6px; }

  /* Dashboard stat cards wrap tighter */
  .stats { flex-wrap: wrap; }
  .stats .stat { flex: 1 1 30%; min-width: 90px; }

  /* Autocomplete dropdown fits the screen */
  .autocomplete-list { min-width: 0; width: 100%; }
  .autocomplete-item { grid-template-columns: 1fr; gap: 2px; }
  .autocomplete-item .ac-assigned { text-align: left; }

  /* Admin pages: note bar */
  .desktop-note {
    display: block; background: #FFF6E0; border: 1px solid #F2A900; color: #63666A;
    padding: 8px 10px; margin-bottom: 8px; font-size: 12px; border-radius: 3px;
  }

  /* Live-update banner sits under the title bar */
  #itops-refresh-banner { top: 56px; width: 92%; text-align: center; }
}