/* ==========================================================================
   STYLES.CSS — Drop-in build with enhanced MENU (accordion + flyout on collapse)
   Base: your latest stylesheet, extended to match the other site's behavior.
   Implements:
   - Collapsible sidebar (icons-only) with label fade
   - Nested accordion submenus with chevron rotation (aria-expanded)
   - Hover flyout for submenus when collapsed
   - Tooltips for labels when collapsed
   - Mobile off-canvas with overlay
   - Active trail highlighting
   ========================================================================== */

/* ------------------------------
   Tokens
------------------------------ */
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --sidebar: #f8f9fa;
  --text: #1f2937;
  --text-secondary: #6b7280;
  --muted: #9ca3af;
  --border: #e5e7eb;
  --border-light: #f3f4f6;

  /* Accent palette (green) */
  --accent: #047857; 
  --accent-hover: #0e9f6e;

  --success: #10b981;
  --danger: #ef4444;
  --hover: #d8eae5;
  --shadow: rgba(0, 0, 0, 0.1);
  --shadow-lg: rgba(0, 0, 0, 0.15);

  /* --sidebar-w-collapsed: 80px; */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 60px;

  /* Sizes  original=42px*/
  --nav-h: 40px;

  /* card colors */
  --card-yellow-verylight: #FFFBEB; /* very light yellow */
  --card-green-verylight:  #ECFDF5; /* very light green */
  --card-blue-verylight:   #EFF6FF; /* very light blue  */
  --card-border:           #E5E7EB; /* subtle border    */
  --card-text:             #0F172A; /* dark text        */

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Cascadia Mono", "Liberation Mono", "DejaVu Sans Mono",
          "Courier New", monospace;
}

/* ------------------------------
   Resets / Base
------------------------------ */
* { box-sizing: border-box; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
  font-size: 14px; line-height: 1.5;
  height: 100%;
  overflow-x: hidden; overflow-y: auto;
}

a { color: inherit; text-decoration: none; }
.link { color: var(--accent); cursor: pointer; transition: color .2s ease; }
.link:hover { color: var(--accent-hover); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--border-light); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Global period toolbar (top-right) */
.topbar-right .period-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 768px) {
  .topbar-right .period-toolbar { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}


/* ------------------------------
   App Shell
------------------------------ */
.app-container { display: flex; height: 100vh; overflow: hidden; }

.main-content {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg);
}
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--border);
  min-height: 56px; box-shadow: 0 1px 3px var(--shadow);
}
.topbar-left { display: flex; align-items: center; gap: 8px; }
.mobile-menu-btn {
  display: none; background: transparent; border: none; color: var(--text-secondary);
  cursor: pointer; padding: 8px; border-radius: 6px; transition: all .2s ease;
}
.mobile-menu-btn:hover { background: var(--hover); color: var(--text); }
.page-title { font-size: 22px; font-weight: 600; color: var(--text); margin: 0; }
/* Assistant badge next to page title */
.assistant-badge {
  margin-left: 10px; color: var(--muted); font-size: 12px; line-height: 1;
  display: inline-block; max-width: 45vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Make assistant badge interactive (opens selectors) */
#assistantBadge { cursor: pointer; text-decoration: underline dotted transparent; }
#assistantBadge:hover { text-decoration-color: currentColor; }

/* Tiny toggle button left of badge */
.selector-toggle {
  margin-left: 8px; margin-right: 2px;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: #f3f4f6; color: #6b7280; border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
}
.selector-toggle:hover { background: var(--hover); color: var(--text); border-color: var(--accent); }
.selector-toggle .chev { transition: transform .18s ease; }
.selector-toggle.open .chev { transform: rotate(180deg); }
@media (min-width: 1024px) { .assistant-badge { max-width: 420px; } }

.selector-bar { background: var(--card); border-bottom: 1px solid var(--border); padding: 16px 24px; }
.selector-inner { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.selector-group { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
/* Make assistant phone look like a read-only field and align with select height */
#assistantPhone { display: flex; align-items: center; padding: 4px 8px; min-height: 32px; border: 1px solid var(--border); border-radius: 6px; background: #f9fafb; color: var(--text); }
/* Compact selectors inside topbar */
.topbar-right.selector-inner { gap: 8px; }
.topbar-right .selector-group { gap: 2px; min-width: auto; }
.topbar-right .selector-group label { font-size: 12px; }
.topbar-right .select { min-height: 0px; font-size: 12px; padding: 1px 3px; margin-right: 30px;}
.topbar-right #assistantPhone { min-height: 32px; font-size: 14px; padding: 4px 8px; }

.content-area {
  flex: 1; overflow-y: auto; padding: 24px; background: var(--border-light);
}
.content-panel { max-width: 99%; margin: 0 auto; }
.content-panel.hidden { display: none; }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px var(--shadow);
}
/* Position refresh/corner buttons inside cards */
#panel-dashboard .card,
#panel-billing .card { position: relative; }
.dash-refresh, .card-refresh { position: absolute; top: 12px; right: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #065f46; border-radius: 8px; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 0 !important; line-height: 1; font-weight: 400; }
.dash-refresh:hover, .card-refresh:hover { background: #10b981; border-color: #059669; color: #ffffff; }

/* Right side content in the topbar */
.topbar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ------------------------------
   Billing
------------------------------ */
/* Billing > Statement: tabela deve ocupar toda a largura e não “apertar” as células */
#panel-billing .tab-statement table,
#panel-billing #statementTable {
  width: 100%;
  table-layout: auto;     /* deixe o browser distribuir as larguras pelas colunas */
}

#panel-billing .tab-statement th,
#panel-billing .tab-statement td,
#panel-billing #statementTable th,
#panel-billing #statementTable td {
  white-space: normal;    /* permite quebra de linha */
  max-width: none;        /* remove limites estreitos herdados de .compact-table */
  text-overflow: clip;    /* evita “…” desnecessário aqui */
}

/* ------------------------------
   Sidebar
------------------------------ */
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: var(--sidebar); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: relative; z-index: 10;
  transition: width .3s ease, min-width .3s ease;
}
.sidebar-inner {
  display: flex; flex-direction: column; height: 100%; overflow-y: auto;
}
@media (max-width: 768px) {
  /* Use dynamic viewport height to avoid mobile browser chrome issues */
  .sidebar-inner {
    height: 100dvh;
    max-height: 100dvh;
    /* Ensure bottom content isn't obscured by device nav bar */
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

.sidebar-header {
  display: flex; align-items: center; gap: 12px; padding: 20px;
  border-bottom: 1px solid var(--border); height: 5vh;
}
.menu-toggle {
  background: transparent; border: none; color: var(--text-secondary); cursor: pointer;
  padding: 4px; border-radius: 6px; transition: all .2s ease; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  margin-left: -4px;
}
.menu-toggle:hover { background: var(--hover); color: var(--accent); }
.brand {
  font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -.5px; transition: opacity .3s ease;
}

.icon-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer;
  color: var(--text-secondary); transition: all .2s ease; display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--hover); border-color: var(--accent); color: var(--accent); }

/* MENU: base row button */
.sidebar-menu { display: flex; flex-direction: column; gap: 2px; padding: 16px 9px; flex: 1; }
.navbtn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; background: transparent; border: none; color: var(--text-secondary);
  border-radius: 8px; cursor: pointer; transition: all .2s ease; font-size: 14px; font-weight: 500; height: var(--nav-h);
}
.navbtn:hover { background: var(--hover); color: var(--text); }
.navbtn.active { background: var(--accent); color: #fff; }
.navbtn .icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.navbtn .label { transition: opacity .3s ease; }
.sidebar .navbtn .label, .sidebar .brand, .sidebar .user-details, .sidebar .btn-logout .label { transition: opacity .3s ease; }

/* Align icons consistently */
.sidebar .navbtn { padding-left: 20px; }
.sidebar .user-info { padding-left: 20px; }
.sidebar .btn-logout { padding-left: 20px; }
.sidebar .btn-logout svg { width: 20px; height: 20px; }

/* Role-gated navigation visibility */
.requires-manager,
.requires-admin {
  display: none;
}
html[data-user-level="manager"] .requires-manager,
html[data-user-level="admin"] .requires-manager,
html[data-user-level="superadmin"] .requires-manager,
html[data-user-level="admin"] .requires-admin,
html[data-user-level="superadmin"] .requires-admin {
  display: flex;
}

/* ------------------------------
   MENU: Accordion + Chevron + Flyout
   (new)
------------------------------ */
.navitem { position: relative; list-style: none; }
.navitem.has-children > .navbtn { position: relative; }
.navbtn .chev {
  margin-left: auto; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  transform: rotate(-90deg); opacity: .7; transition: transform .18s ease, opacity .18s ease;
}
.has-children[aria-expanded="true"] > .navbtn .chev { transform: rotate(0deg); opacity: 1; }

/* Accordion container */
.submenu {
  display: grid; grid-template-rows: 0fr; overflow: hidden; margin-left: 36px;
  border-left: 1px dashed var(--border);
  transition: grid-template-rows .22s ease, padding .22s ease;
}
.submenu > .submenu-inner { min-height: 0; }
.has-children[aria-expanded="true"] > .submenu { grid-template-rows: 1fr; padding: 6px 0 6px 10px; }

/* Submenu buttons */
.submenu .navbtn {
  height: 36px; border-radius: 6px; padding: 0 10px; color: var(--text-secondary); font-weight: 500;
}
.submenu .navbtn:hover { background: var(--hover); color: var(--text); }
.submenu .navbtn.active { background: var(--accent-hover); color: #fff; }

/* Active trail highlight on parents */
.has-children .navbtn.is-trail { background: var(--border-light); color: var(--text); }

/* Collapsed Sidebar (icons only) */
body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); min-width: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .sidebar .brand,
body.sidebar-collapsed .sidebar .label,
body.sidebar-collapsed .sidebar .user-details {
  opacity: 0; pointer-events: none; white-space: nowrap; overflow: hidden;
}
/* In collapsed mode, center the logout icon and remove label width */
/* Match nav button alignment when collapsed */
body.sidebar-collapsed .sidebar .btn-logout {
  justify-content: flex-start;
  padding: 10px 6px;
}
body.sidebar-collapsed .sidebar .btn-logout .label { display: none !important; width: 0; max-width: 0; }
body.sidebar-collapsed .sidebar .btn-logout .icon { margin: 0; }
/* Ensure same vertical sizing as menu items */
.btn-logout { height: var(--nav-h); }
/* body.sidebar-collapsed .navbtn { justify-content: flex-start; padding: 10px 8px; } */
body.sidebar-collapsed .navbtn { padding: 10px 8px; }
body.sidebar-collapsed .navbtn .chev { display: none; }
body.sidebar-collapsed .submenu { display: none !important; }

/* Tooltips (labels) when collapsed — add data-tooltip on .navbtn */
.navbtn[data-tooltip] { position: relative; }
body.sidebar-collapsed .navbtn[data-tooltip]:hover::after,
body.sidebar-collapsed .navbtn[data-tooltip]:hover::before {
  content: attr(data-tooltip);
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: #111827; color: #fff; border-radius: 6px; padding: 6px 8px; font-size: 12px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.15); z-index: 2;
}
body.sidebar-collapsed .navbtn[data-tooltip]:hover::before {
  content: ""; width: 0; height: 0; border: 6px solid transparent; border-right-color: #111827;
  left: calc(100% + 2px); margin-top: -6px;
}

/* Sidebar selectors card (Client / Assistant / Phone) */
.sidebar-selectors {
  margin: 0 12px 12px 12px;
  padding: 12px;
}
.sidebar-selectors .selector-group { gap: 2px; }
.sidebar-selectors .selector-group label { margin: 0; line-height: 1.2; font-size: 12px; }
.sidebar-selectors .selector-group { min-width: 0; width: 100%; }
.sidebar-selectors .select,
.sidebar-selectors #assistantPhone { width: 100%; }
.sidebar-selectors #assistantPhone {
  display: flex; align-items: center; padding: 6px 8px; min-height: 32px;
  border: 1px solid var(--border); border-radius: 6px; background: #f9fafb; color: var(--text);
}
/* Hide selectors card when sidebar is collapsed (icons-only) */
body.sidebar-collapsed .sidebar-selectors { display: none; }
/* On mobile, when the sidebar is opened as an overlay, show selectors even if collapsed */
@media (max-width: 768px) {
  body.sidebar-collapsed .sidebar.open .sidebar-selectors { display: block; }
}

/* Make the user info simple: one-line text, no card look */
.sidebar-footer .user-info {
  background: transparent;
  border: 0;
  padding: 0 0 4px 0;
  gap: 4px;
}
.sidebar-footer .user-info.simple { display: block; }
.sidebar-footer .user-info .user-line { font-size: 13px; color: var(--text); }
.sidebar-footer .user-info .user-role { color: var(--muted); font-weight: 500; }

/* Hide user text in collapsed mode, but show when mobile overlay is open */
body.sidebar-collapsed .sidebar .user-info { opacity: 0; pointer-events: none; }
@media (max-width: 768px) {
  body.sidebar-collapsed .sidebar.open .user-info { opacity: 1; pointer-events: auto; }
}

/* Flyout submenu on hover when collapsed */
body.sidebar-collapsed .navitem.has-children { position: relative; }
.flyout {
  position: absolute; left: calc(100% + 8px); top: 4px; min-width: 220px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 28px var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease; z-index: 3;
}
.flyout .navbtn { justify-content: flex-start; height: 36px; padding: 0 10px; }
.flyout .section-title { padding: 6px 8px 4px 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.has-children > .flyout { display: none; }
body.sidebar-collapsed .has-children > .flyout { display: block; }
body.sidebar-collapsed .navitem.has-children:hover > .flyout { opacity: 1; visibility: visible; transform: translateY(0); }

/* ------------------------------
   Sidebar Footer (user + logout)
------------------------------ */
.sidebar-footer {
  padding: 16px 12px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
  /* Keep the footer visible at the bottom of the scrollable sidebar */
  position: sticky; bottom: 0; z-index: 2;
  background: var(--sidebar);
  /* Respect safe area on devices with gesture bars */
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.user-info {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--card);
  border: 1px solid var(--border); border-radius: 8px;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--hover);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0;
}
.user-details { display: flex; flex-direction: column; min-width: 0; flex: 1; transition: opacity .3s ease; }
.user-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.btn-logout {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-secondary); cursor: pointer; transition: all .2s ease; font-size: 13px;
}
.btn-logout:hover { background: var(--hover); border-color: var(--danger); color: var(--danger); }
.btn-logout .label { transition: opacity .3s ease; }
body.sidebar-collapsed .sidebar .btn-logout .label { opacity: 0; visibility: hidden; }
/* Ensure logout label shows on mobile when the sidebar overlay is open */
@media (max-width: 768px) {
  body.sidebar-collapsed .sidebar.open .btn-logout .label { opacity: 1; visibility: visible; }
  /* When opened over mobile, expand sidebar to full width for readability */
  body.sidebar-collapsed .sidebar.open { width: var(--sidebar-w); min-width: var(--sidebar-w); }
}

/* ------------------------------
   Tables, Forms, Buttons (existing)
------------------------------ */
/* Amount coloring on generic tables */
.table td.credit { color: var(--success); }
.table td.debit { color: var(--danger); }

.chart-bar {
  display: flex; align-items: flex-end; gap: 6px; height: 160px; margin: 12px 0 20px;
}
.chart-bar .bar-wrapper { flex: 1; display: flex; flex-direction: column; align-items: center; }
.chart-bar .bar { width: 100%; border-radius: 4px 4px 0 0; position: relative; }
.chart-bar .bar::after {
  content: attr(data-val); position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--text-secondary);
}
.chart-bar .bar-label { margin-top: 4px; font-size: 11px; text-align: center; color: var(--text-secondary); }
.invoice-header { margin: 12px 0; font-weight: 500; }

.billing-tabs { display: flex; gap: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.billing-tab {
  padding: 8px 12px; border: none; background: transparent; cursor: pointer; color: var(--text-secondary);
  font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.billing-tab:hover { color: var(--text); }
.billing-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.billing-tab-panel.hidden { display: none; }

.empty-state { padding: 20px; color: var(--text-secondary); font-style: italic; }

.input, select, textarea {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 8px; padding: 8px 12px; font-size: 14px; width: 100%; transition: all .2s ease;
}
.form-note {
  background: rgba(4, 120, 87, 0.12);
  border: 1px solid rgba(4, 120, 87, 0.35);
  color: #065f46;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.45;
}
.table .cell-input {
  padding: 4px 8px; /* more compact inside tables */
}
.input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.select { cursor: pointer; }
label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 6px; font-weight: 500; }
.muted { color: var(--muted); }

.btn {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: all .2s ease; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn:hover { background: var(--hover); border-color: var(--accent); color: var(--accent); }
.btn.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { background: #dc2626; border-color: #dc2626; }

/* Ensure refresh icon buttons override generic .btn styles */
.btn.dash-refresh, .btn.card-refresh {
  font-size: 25px; /* visible but not oversized */
  font-weight: 400;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px; /* square with rounded edges */
  background: #f0fdf4; /* very light green */
  border: 1px solid #bbf7d0; /* pale green border */
  color: #065f46; /* dark green icon */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.dash-refresh:hover, .btn.card-refresh:hover {
  background: #10b981; /* strong green hover */
  border-color: #059669;
  color: #ffffff; /* white icon for contrast */
}

.delete-btn {
  background: var(--danger); border: 1px solid #dc2626; border-radius: 4px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease;
}
.delete-btn:hover { background: #dc2626; }
.delete-btn svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 2; }

/* Tables */
.table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border); margin-top: 16px; }
.table { width: auto; border-collapse: collapse; font-size: 14px; background: var(--card); }
.table th {
  color: var(--text); text-align: left; font-weight: 600; padding: 12px 16px;
  background: var(--border-light); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1;
}
.table td { border-bottom: 1px solid var(--border); padding: 12px 16px; color: var(--text); }
.table tbody tr:hover { background: var(--hover); }
.table tbody tr:last-child td { border-bottom: none; }

/* Special Hours Tables */
#hoursTable.table { width: auto; }
/* Force Special Hours to occupy the container so rows are visible immediately */
#specialsTable.table { width: 100%; }       /* or: min-width: 100%; */
/* Optional: ensure the specials area never collapses visually */
#panel-specials .table-wrap { min-height: 220px; }
.btn-past {
  background: #f8fafc;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(15,23,42,0.08);
  transition: all .12s ease;
  margin-left: auto;
}
.btn-past:hover { background: #e2e8f0; border-color: #cbd5e1; transform: translateY(-1px); }

.billing-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
.billing-filters select, .billing-filters input[type="date"] {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 14px; background: var(--card); color: var(--text);
}
.billing-filters #customDateRange { display: flex; align-items: center; gap: 4px; }

/* Dashboard filters */
.dashboard-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.dashboard-filters label { font-size: 14px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.dashboard-filters select {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 14px; background: var(--card); color: var(--text);
}

/* Overlay: single place for client/assistant selection */
.selector-overlay { position: fixed; z-index: 1000; inset: 0; pointer-events: none; }
.selector-overlay .selector-card {
  position: absolute; top: 76px; left: calc(var(--sidebar-w) + 24px);
  background: var(--card); border: 2px solid #5b8a37; border-radius: 16px;
  width: 360px; padding: 14px; box-shadow: 0 10px 24px var(--shadow-lg);
  display: flex; flex-direction: column; gap: 10px; pointer-events: auto;
}
.selector-overlay .selector-card::before {
  /* Outer green triangle */
  content: ""; position: absolute; top: -10px; left: var(--arrow-left, 28px);
  transform: translateX(-50%);
  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #5b8a37;
}
.selector-overlay .selector-card::after {
  /* Inner fill triangle to match card background, removing the bottom half look */
  content: ""; position: absolute; top: -8px; left: var(--arrow-left, 28px);
  transform: translateX(-50%);
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid var(--card);
}
.selector-overlay.hidden { display: none; }
.selector-overlay .selector-body { display: flex; flex-direction: column; gap: 10px; }
.selector-overlay .selector-group { display: flex; flex-direction: column; gap: 6px; }
.selector-overlay .selector-group label { color: var(--text-secondary); font-weight: 600; }
.selector-overlay .selector-group .select { border-radius: 12px; padding: 10px 12px; font-size: 15px; }
.selector-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.overlay-apply { background: #2f6f1c; color: #fff; border: 1px solid #2f6f1c; border-radius: 4px; padding: 6px 10px; font-weight: 700; cursor: pointer; height: 28px; display: inline-flex; align-items: center; }
.overlay-apply:hover { background: #2a6319; }
/* Mobile: expand to full width with close button */
@media (max-width: 768px) {
  .selector-overlay .selector-card { left: 12px; right: 12px; width: auto; top: 64px; }
}
.mobile-only { display: none; }
@media (max-width: 768px) { .mobile-only { display: inline-flex; } }
.overlay-close {
  align-self: flex-end; width: 22px; height: 22px; border-radius: 4px; border: 1px solid #ef4444;
  background: #ef4444; color: #fff; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
}

/* Mobile layout for title/badge/toggle */
@media (max-width: 768px) {
.topbar-left { flex-wrap: wrap; align-items: center; }
  #selectorToggle { order: 2; margin-left: auto; }
  #assistantBadge { order: 3; flex-basis: 100%; margin-left: 0; max-width: 100%; white-space: normal; overflow: visible; display: block; }
}
.dashboard-metrics { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.dashboard-skeletons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.skeleton-card {
  flex: 1 1 calc(20% - 12px);
  min-height: 120px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(229,231,235,0.8), rgba(243,244,246,0.6), rgba(229,231,235,0.8));
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.metric-card {
  flex: 1 1 calc(20% - 12px); background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 16px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.03);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.metric-card h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.metric-card p { margin: 4px 0 0 0; font-size: 20px; font-weight: 700; color: var(--text); }

#dashPlanLabel {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sentiment-eq{
  position: relative;
  width: 100%;
  height: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: end;
}
.sentiment-eq.sentiment2{
  height: 54px;
  gap: 12px;
}
.sentiment-eq.sentiment2 .sentiment-eq-col{
  height: 54px;
  border-radius: 12px;
}
.sentiment-eq.sentiment2 .sentiment-eq-fill{
  border-radius: 12px 12px 0 0;
}
.sentiment-eq-col{
  height: 44px;
  border-radius: 10px;
  background: rgba(229,231,235,0.8);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.sentiment-eq-fill{
  width: 100%;
  height: 50%;
  border-radius: 10px 10px 0 0;
  opacity: 0.95;
}
.sentiment-eq-col.neg .sentiment-eq-fill{ background: #de3f3f; }
.sentiment-eq-col.neu .sentiment-eq-fill{ background: #b3d97e; }
.sentiment-eq-col.pos .sentiment-eq-fill{ background: #35c30d; }
.sentiment-eq-dot{
  position: absolute;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: #111827;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  pointer-events: none;
}

/* sentiment3 (image-like pill bar with handle) */
.sentimentkpi-wrap{ display:flex; flex-direction:column; gap:4px !important; width:100%; align-items:center; }
.sentimentkpi-pcts{
  width: 100%;
  max-width: 340px;
  display: flex;
  justify-content: space-around;
  font-size: 15px;
  font-weight: 900;
  color: #111827;
  line-height: 1;
}
.sentimentkpi-barwrap{
  position: relative;
  width: 100%;
  max-width: 340px;
  overflow: visible;
}
.sentimentkpi-bar{
  position:relative;
  width:100%;
  height:25px;
  border-radius: 999px;
  overflow:hidden;
  background:#e5e7eb;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
}
.sentimentkpi-bar .s3-seg{ height:100%; float:left; }
.sentimentkpi-bar .s3-seg.neg{ background:#de3f3f; }
.sentimentkpi-bar .s3-seg.neu{ background:#b3d97e; }
.sentimentkpi-bar .s3-seg.pos{ background:#35c30d; }
.sentimentkpi-handle{
  position:absolute;
  top:4px;
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  pointer-events:none;
}
.sentimentkpi-handle .s3-score{
  display:none;
}
.sentimentkpi-avgline{
  position:absolute;
  top: calc(100% + 2px);
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  text-align: center;
  white-space: nowrap;
}
.sentimentkpi-handle .s3-knob{
  width:14px;
  height:30px;
  border-radius:999px;
  background:#111827;
  border:3px solid #f8fafc;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

/* sentiment4 */
.sentiment4{ width:100%; display:flex; flex-direction:column; gap:10px; }
.sentiment4{ gap:6px; }
.sentiment4-labels{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  color: rgba(17,24,39,0.55);
  text-align:center;
}
.sentiment4-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sentiment4-box{
  position:relative;
  height:78px;
  border-radius:14px;
  border:2px solid rgba(17,24,39,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.55));
  overflow:hidden;
  text-align:center;
  padding-top:10px;
}
.sentiment4-mid{
  font-size: clamp(16px, 3.4vw, 22px);
  font-weight: 900;
  margin-top: 0px;
  color: #111827;
  line-height: 1;
  position: relative;
  z-index: 2;
}
.sentiment4-fill{
  position:absolute;
  left:0; right:0; bottom:0;
  height:30%;
  opacity:0.95;
  z-index: 1;
}
.sentiment4-box.neg{ border-color: rgba(222,63,63,0.45); }
.sentiment4-box.neu{ border-color: rgba(179,217,126,0.45); }
.sentiment4-box.pos{ border-color: rgba(53,195,13,0.45); }
.sentiment4-box.neg .sentiment4-fill{ background: rgba(222,63,63,0.85); }
.sentiment4-box.neu .sentiment4-fill{ background: rgba(179,217,126,0.85); }
.sentiment4-box.pos .sentiment4-fill{ background: rgba(53,195,13,0.85); }
.sentiment4-prog{
  width:100%;
  height:10px;
  border-radius:999px;
  background: rgba(17,24,39,0.08);
  overflow:hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
}
.sentiment4-prog-bar{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(30,64,175,0.9), rgba(59,130,246,0.85));
}
.sentiment4-score{
  font-size:14px;
  font-weight:800;
  text-align:right;
  color:#111827;
  line-height:1;
}

/* sentiment5 */
.sentiment5{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  height: 100%;
  justify-content: center;
}
.metric-card.sentiment5-card{ justify-content: flex-start; }
.sentiment5-score-row{
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: center;
}
.sentiment-gauge { overflow: hidden; }
.sentiment5-score{
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: #111827;
}
.sentiment5-label{
  font-size: 13px;
  font-weight: 700;
  color: rgba(17,24,39,0.75);
  margin-top: 0;
}
.sentiment5-pill{
  width: 100%;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(17,24,39,0.08);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.10);
  margin-top: -2px;
}
.sentiment5-pill .s5-seg{ height: 100%; float:left; }
.sentiment5-pill .s5-seg.neg{ background: linear-gradient(90deg, rgba(222,63,63,0.95), rgba(222,63,63,0.75)); }
.sentiment5-pill .s5-seg.neu{ background: linear-gradient(90deg, rgba(179,217,126,0.95), rgba(179,217,126,0.75)); }
.sentiment5-pill .s5-seg.pos{ background: linear-gradient(90deg, rgba(53,195,13,0.95), rgba(53,195,13,0.75)); }
.sentiment5-stats{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 0px;
}
.sentiment5-stats .s5-stat .pct{
  font-size: 18px;
  font-weight: 900;
  color: #111827;
  line-height: 1;
}
.sentiment5-stats .s5-stat .lbl{
  font-size: 11px;
  font-weight: 700;
  color: rgba(17,24,39,0.70);
  margin-top: 2px;
}

.metric-card.card-green{
  background: var(--card-green-verylight);
  border-color: var(--card-border);
  color: var(--card-text);
}

.metric-card.card-blue{
  background: var(--card-blue-verylight);
  border-color: var(--card-border);
  color: var(--card-text);
}

.metric-card.card-yellow{
  background: var(--card-yellow-verylight);
  border-color: var(--card-border);
  color: var(--card-text);
}

/* optional: tiny elevation & smooth hover */
.metric-card.card-green,
.metric-card.card-blue,
.metric-card.card-yellow{
  transition: box-shadow .15s ease;
}
.metric-card.card-green:hover,
.metric-card.card-blue:hover,
.metric-card.card-yellow{
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.sentiment-gauges{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.metric-subtext { display: block; margin-top: 6px; font-size: 12px; color: var(--text-secondary); }

.dashboard-top-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.btn.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn.btn-ghost:hover { background: var(--hover); }

.superadmin-only.hidden { display: none !important; }
.superadmin-only { display: none; }
html[data-user-level="superadmin"] .superadmin-only { display: inline-flex; }

/* Live calls card tweaks */
#liveCallsCard { flex: 1 1 100%; text-align: left; }
.live-calls-wrap { max-height: 240px; overflow: auto; }
.live-cards { display:flex; flex-wrap:wrap; gap:16px; }
/*
   Live call cards: reuse the card aesthetic from the dashboard.  Each
   `.live-item` is also a `.card`, with centered content and larger
   typography for the caller line.  Flexbox is used so the three lines
   stack with consistent spacing.  We explicitly set the background and
   shadow to integrate with the rest of the UI.
*/
.live-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  box-shadow: 0 1px 3px var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 300px;
  gap: 4px;
}
.live-item:hover { background: var(--hover); }
.live-info { font-size: 13px; color: var(--text-secondary); }
.live-phone { font-weight: 700; font-size: 1.4em; color: var(--text); }
.live-meta { font-size: 13px; color: var(--text-secondary); }

@media (max-width:900px){ .live-item { flex:0 0 260px; } }
@media (max-width:600px){ .live-item { flex:1 1 100%; } }

.dashboard-charts { margin-top: 16px; }
.chart-bar .bar-row { margin-bottom: 6px; }
.chart-bar .bar-inner { display: flex; align-items: center; }
.chart-bar .bar-label {
  flex: 0 0 100px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
.chart-bar .bar-wrap {
  flex: 1; height: 10px; background: var(--border-light); margin: 0 8px; border-radius: 4px; overflow: hidden;
}
.chart-bar .bar-fill { height: 10px; background: var(--accent); border-radius: 4px; }
.chart-bar .bar-value { flex: 0 0 auto; font-size: 12px; white-space: nowrap; color: var(--text-secondary); }

.table th.delete-header, .table td:last-child { width: 40px; text-align: center; padding: 8px; }
/* Do not constrain actions width on Clients table */
#clients-table th:last-child, #clients-table td:last-child { width: auto; text-align: left; padding: 8px 12px; }

/* Compact tables */
.compact-table { font-size: 12px; }
.compact-table th { padding: 8px 12px; font-size: 12px; }
.compact-table td {
  padding: 6px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; cursor: pointer;
}
.compact-table td:hover { background: var(--accent); color: #fff; }

/* Modal */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal.hidden { display: none; }
.modal-content {
  background: var(--card); border-radius: 12px; box-shadow: 0 10px 25px var(--shadow-lg);
  max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--text); }
.btn-close {
  background: transparent; border: none; color: var(--text-secondary);
  cursor: pointer; padding: 4px; border-radius: 4px; transition: all .2s ease;
}
.btn-close:hover { background: var(--hover); color: var(--text); }
.modal-body { padding: 24px; }
.modal-body p { margin: 0; color: var(--text); line-height: 1.6; white-space: pre-line; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }
/* Disclaimer text inside modals */
.ai-disclaimer, .modal .disclaimer {
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
/* AI instructions/example styling */
#aiReviewModal .ai-example {
  font-family: var(--mono);
  background: #f8fafc;
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 12px;
  white-space: pre-wrap;
  color: var(--text);
}
/* Make the AI Suggestion/Instructions modal wider on desktop */
#aiReviewModal .modal-content {
  max-width: 840px;
  width: min(94vw, 840px);
}

/* Badges */
.badge { background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 16px; padding: 4px 12px; font-size: 12px; font-weight: 600; display: inline-block; }
.badge.success { background: var(--success); border-color: var(--success); }

/* Toolbar */
.toolbar { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.search { max-width: 300px; }
.pagination { display: flex; gap: 12px; align-items: center; }

/* Billing type filters */
.billing-type-filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.billing-type-filters label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.billing-type-filters input[type="checkbox"] { width: 14px; height: 14px; }

/* Rates panel */
.rates-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rates-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.rate-card {
  background: var(--card);
  border: 1px solid var(--border); /* similar to dashboard metric cards */
  border-radius: 8px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.rate-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.rate-hint { font-size: 12px; color: var(--text-secondary); }
.rate-value.readonly { font-weight: 700; color: var(--text); font-size: 22px; }
.rate-value { text-align: center; }
.rate-card .input { font-size: 20px; font-weight: 700; padding: 10px 12px; text-align: center; }
.rate-meta { font-size: 12px; color: var(--muted); }
.rate-list { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--text); }
/* Subscription cards in soft green */
.rate-card.sub { background: #f0fdf4; border-color: #bbf7d0; }

/* Date Label */
.date-label {
  display: inline-block; padding: 6px 12px; background: var(--border-light); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 14px;
}

/* Utilities */
.hidden { display: none !important; }
.row { display: flex; gap: 12px; align-items: center; }
.right { justify-content: flex-end; }

/* Reports drawer */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 90vw);
  height: 100vh;
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 16px rgba(0,0,0,0.16);
  z-index: 1800;
  padding: 16px;
  overflow-y: auto;
}
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.drawer-body { display: flex; flex-direction: column; gap: 10px; }
.drawer-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.schedule-list { display: flex; flex-direction: column; gap: 10px; }
.schedule-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  background: var(--border-light);
}
.schedule-row .sched-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.schedule-row .sched-field label { color: var(--text-secondary); font-size: 12px; }
.schedule-row input, .schedule-row select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}
.schedule-row .sched-actions { display: flex; align-items: flex-end; }
.schedule-row .sched-actions button { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; padding: 6px 10px; border-radius: 6px; cursor: pointer; }

/* ------------------------------
   Hours / Specials tweaks
------------------------------ */
.table-container { position: relative; }
.btn-save-hours {
  position: absolute; top: -16px; right: 75px;
  background: var(--danger); color: #fff; border: 1px solid var(--danger);
  border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s ease; z-index: 10;
}
.btn-save-hours:hover { background: #dc2626; border-color: #dc2626; }
.btn-save-hours.hidden { display: none; }

.btn-save-specials {
  background: var(--danger); color: #fff; border: 1px solid var(--danger);
  border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s ease;
}
.btn-save-specials:hover { background: #dc2626; border-color: #dc2626; }
.btn-save-specials.hidden { display: none; }

#specialsTable .c-date input[type="date"], #specialsTable .c-comment input[type="text"] {
  border: 1px solid var(--border); padding: 4px 8px; border-radius: 4px;
}
#specialsTable td.c-date, #specialsTable td.c-comment { border: 1px solid var(--border); }

#specialsTable .date-input-container {
  border: 1px solid var(--border); border-radius: 4px; display: flex; align-items: center; padding: 0 4px; background: #fff;
}
#specialsTable .date-input-container input[type="date"] { border: none; outline: none; padding: 4px 0; flex: 1; color: var(--text); }
#specialsTable .date-input-container .calendar-icon { margin-left: 4px; color: var(--text-secondary); }

.date-input.compact, .time-input.compact, .comment-input.compact {
  font-size: 12px; padding: 4px 8px; border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont,'Segoe UI','Roboto',monospace; font-weight: 400; letter-spacing: -.2px;
  border: 1px solid var(--border); background: var(--card);
}
.date-input.compact { width: 110px; min-width: 110px; }
.time-input.compact { width: 70px; min-width: 70px; }
#specialsTable tbody tr.is-new-row { background: #fff7cc; box-shadow: inset 0 0 0 1px #fbbf24; }
#specialsTable tbody tr.is-new-row:hover { background: #fff1a3; }
#specialsTable tbody tr.is-past { background: #dddddd; color: var(--text); }
#specialsTable tbody tr.is-past:hover { background: #d1d1d1; }

.date-range-container { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.date-separator { font-size: 11px; color: var(--muted); white-space: nowrap; font-weight: 500; }

/* Time inputs */
#hoursTable { table-layout: fixed; }
#hoursTable th:first-child, #hoursTable td:first-child { width: 80px; }
#hoursTable th:nth-child(2), #hoursTable td:nth-child(2) { width: 80px; }
#hoursTable th:not(:first-child):not(:nth-child(2)), #hoursTable td:not(:first-child):not(:nth-child(2)) {
  width: calc((100% - 160px) / var(--time-columns, 4)); text-align: center;
}
.table input.time {
  width: 100%; border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; text-align: center; font-size: 13px; background: var(--card); color: var(--text);
}
.table input.time:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,.1); }
.table input.time.invalid { border-color: var(--danger); background: rgba(239,68,68,.1); }

.xmask {
  display: inline-block; color: var(--text-secondary); font-weight: bold; text-align: center; width: 100%;
  padding: 6px 8px; background: var(--card); border: 1px solid var(--border); border-radius: 4px;
}

/* Calls table widths */
#callTable th:nth-child(1), #callTable td:nth-child(1) { min-width: 160px; width: 160px; white-space: nowrap; }
#callTable th:nth-child(2), #callTable td:nth-child(2) { min-width: 70px; width: 70px; text-align: center; font-weight: 600; white-space: nowrap; }
#callTable th:nth-child(3), #callTable td:nth-child(3),
#callTable th:nth-child(4), #callTable td:nth-child(4) { min-width: 160px; white-space: nowrap; }
/* Align Duration column (now 6th) to the right */
#callTable th:nth-child(6), #callTable td:nth-child(6) { text-align: right; min-width: 80px; width: 80px; }

/* Blacklist minor tweaks */
#panel-blacklist .table td:last-child, #panel-blacklist .table th:last-child { width: 90px; text-align: right; }
/* Column sizing: min widths but allow growth */
#panel-blacklist table { table-layout: auto; width: 100%; }
#panel-blacklist th:nth-child(1), #panel-blacklist td:nth-child(1) { min-width: 180px; }
#panel-blacklist th:nth-child(2), #panel-blacklist td:nth-child(2) { min-width: 150px; white-space: nowrap; }
#panel-blacklist th:nth-child(3), #panel-blacklist td:nth-child(3) { min-width: 80px; text-align: right; }
#panel-blacklist th:nth-child(4), #panel-blacklist td:nth-child(4) { min-width: 220px; }

/* Blacklist inputs should span the full width of their cell. Without this,
   the phone and description fields render narrower than the available space,
   leaving an awkward gap. */
#panel-blacklist .phone-input,
#panel-blacklist .desc-input {
  width: 100%;
}

/* Tweak column widths for the blacklist table.  Make the phone number
   narrower, give the description more space, shrink the call count,
   and allow the last call column to fully display the date/time. */
#panel-blacklist th:nth-child(2), #panel-blacklist td:nth-child(2) {
  width: 30%;
  min-width: 160px;
}
#panel-blacklist th:nth-child(3), #panel-blacklist td:nth-child(3) {
  width: 45%;
  min-width: 200px;
}
#panel-blacklist th:nth-child(4), #panel-blacklist td:nth-child(4) {
  width: 10%;
  min-width: 60px;
  text-align: center;
}
#panel-blacklist th:nth-child(5), #panel-blacklist td:nth-child(5) {
  width: 15%;
  min-width: 160px;
  white-space: nowrap;
}

/* Add-circle button at top-left of table */
#panel-blacklist .card { position: relative; }
#panel-blacklist .table-wrap { position: static; padding-top: 0; }
#panel-blacklist .btn-add-circle {
  position: absolute; top: 8px; left: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; cursor: pointer;
}
#panel-blacklist .btn-add-circle:hover { background: var(--hover); }

/* Call log row highlight when Generate Lead is true */
/* Use the very light green used elsewhere for lead rows */
.call-row.lead { background: var(--card-green-verylight); }
/* Disable admin status colouring on the call log rows so only the lead flag
   controls row highlighting. */
.call-row.status-in-progress,
.call-row.status-other {
  background: inherit;
}

/* Transcript formatting */
.transcript { white-space: pre-wrap; line-height: 1.35; }
/* Color AI/Launch lines only when shown in modal (table stays neutral) */
.modal .transcript .launch { color: #059669; }

/* In table view, keep transcript single-line and allow ellipsis */
#panel-calls .compact-table td .transcript {
  display: inline;
  white-space: nowrap;
}
/* Hide line breaks inside transcript in table cells to preserve ellipsis */
#panel-calls .compact-table td .transcript br { display: none; }

/* Calls card: make the table area scroll and keep header stuck to the top of that area */
#panel-calls .card { display: flex; flex-direction: column; }
#panel-calls .table-wrap { position: relative; overflow: auto; max-height: calc(100dvh - 180px); }
#panel-calls thead th { position: sticky; top: 0; background: var(--card); z-index: 3; }
/* Call status highlighting for admins */
.call-row.status-in-progress,
.call-row.status-other {
  /* Override any earlier status backgrounds so only the generate‑lead flag controls row colouring. */
  background: inherit;
}

/* Recording play button */
.play-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #10b981; color: #fff !important; text-decoration: none; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.play-btn:hover { background: #059669; }
.play-btn svg { width: 12px; height: 12px; fill: currentColor; }
/* Larger in detail header */
.detail-header .play-btn { width: 28px; height: 28px; }

/* Language + flag */
.lang-flag { display: inline-flex; align-items: center; gap: 6px; }
.lang-flag .flag { font-size: 16px; line-height: 1; }

/* Give lead rows priority over any other row background rules */
#panel-calls .call-row.lead { background: var(--card-green-verylight) !important; }

/* Live listen overlay */
.live-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 2000; }
.live-overlay.hidden { display: none; }
.live-overlay:not(.hidden) { display: flex; }
.live-card { position: relative; width: min(92vw, 520px); background: var(--card); border-radius: 12px; padding: 24px; text-align: center; box-shadow: 0 10px 30px var(--shadow-lg); }
.live-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; background: #ef4444; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-weight: 800; }
.speaker-icon { font-size: 72px; line-height: 1; margin: 16px 0 8px; }
.live-status { margin-top: 8px; }
.live-ctrls { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.live-ctrls .row { display: flex; gap: 8px; align-items: center; }
.live-ctrls .input { flex: 1; }

/* Recording playback overlay */
.rec-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 2100; }
.rec-overlay.hidden { display: none; }
.rec-overlay:not(.hidden) { display: flex; }
.rec-card { position: relative; width: min(92vw, 560px); background: var(--card); border-radius: 12px; padding: 18px; box-shadow: 0 10px 30px var(--shadow-lg); }
.rec-close { position: static; width: 28px; height: 28px; background: #ef4444; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: 800; flex: 0 0 auto; }
.rec-body { display: flex; flex-direction: column; gap: 10px; }
.rec-ctrls { display: flex; align-items: center; gap: 12px; }
.rec-play { background: #10b981; color: #fff; border: none; border-radius: 8px; padding: 8px 12px; font-weight: 700; cursor: pointer; }
.rec-play.paused { background: #10b981; }
.rec-play.playing { background: #059669; }
.rec-times { font-size: 12px; color: var(--text-secondary); margin-left: auto; }
.rec-slider { width: 100%; appearance: none; height: 4px; border-radius: 4px; background: #e5e7eb; }
.rec-slider::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #10b981; cursor: pointer; }
.rec-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #10b981; border: none; cursor: pointer; }

/* Live page & overlay refinements */
.live-section { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.live-section:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.live-section h5 { margin: 0 0 4px; font-size: 14px; color: var(--text-secondary); }
.live-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.live-presets .btn { flex: 1; }

/* ------------------------------
   Calls Detail Right Sidebar
------------------------------ */
.detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 1400; }
.detail-overlay.open { opacity: 1; pointer-events: auto; }

.detail-sidebar {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(520px, 94vw);
  background: var(--card); border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .25s ease; z-index: 1500;
  display: flex; flex-direction: column;
  font-size: 13px; /* smaller overall font in sidebar */
}
.detail-sidebar.open { transform: translateX(0); }
.detail-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.detail-title { font-size: 15px; font-weight: 600; color: var(--text); }
.detail-subtitle { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.detail-reason { font-size: 12px; font-weight: 700; color: var(--text); margin-top: 2px; display: flex; align-items: baseline; gap: 6px; }
.detail-reason .lbl { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.detail-reason .txt { font-size: 12px; font-weight: 700; color: var(--text); }
.detail-close { background: #ef4444; color: #fff; border: none; border-radius: 6px; width: 28px; height: 28px; font-size: 18px; line-height: 1; cursor: pointer; }
.detail-close:hover { background: #dc2626; }
.detail-content { padding: 10px 12px; overflow-y: auto; }
/* Compact label-value rows */
.detail-item { display: grid; grid-template-columns: 140px 1fr; gap: 6px 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); align-items: center; }
.detail-item:last-child { border-bottom: none; }
.detail-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .02em; }
.detail-value { font-size: 13px; color: var(--text); }
.transcript-block { background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-family: var(--mono); font-size: 12px; color: #0f172a; }
/* Transcript lines: agent vs caller for easier reading */
.transcript-block .tline {
  margin: 3px 0;
  padding: 4px 6px;
  border-radius: 6px;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.transcript-block .tline .lbl {
  font-weight: 700;
  flex-shrink: 0;
}
.transcript-block .tline .txt {
  flex: 1;
}
.transcript-block .tline.ai {
  color: #065f46;
  background: #f4fdf9;
  border-left: 2px solid #34d399; /* softer green accent for AI */
}
.transcript-block .tline.caller {
  color: #0f172a;
  background: #f6f8fb;
  border-left: 2px solid #94a3b8; /* softer slate accent for caller */
}
/* Tabs inside the call detail sidebar */
.detail-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin: 6px 0 8px; padding: 0 2px; }
.detail-tab { padding: 6px 10px; border: 1px solid transparent; border-bottom: 2px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; border-top-left-radius: 6px; border-top-right-radius: 6px; font-size: 12px; }
.detail-tab:hover { color: var(--text); background: #f9fafb; }
.detail-tab.active { color: var(--text); border-color: var(--accent); border-bottom-color: var(--accent); background: #ecfdf5; font-weight: 600; }
.detail-panel { display: none; }
.detail-panel.active { display: block; }

/* Reason highlight card in the right sidebar */
.reason-card {
  background: var(--card-yellow-verylight);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0 10px;
}
.reason-card-title {
  font-size: 11px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px;
}
.reason-card-text { font-size: 13px; color: var(--text); font-weight: 600; }

/* Compact info tiles grid (for Info + replicated in General) */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 8px; margin: 6px 0 4px; }
.info-item { border: 1px solid var(--border); border-radius: 8px; background: #f9fafb; padding: 6px 8px; }
.info-item .k { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .02em; }
.info-item .v { font-size: 12px; color: var(--text); font-weight: 500; margin-top: 2px; }

/* Mini facts grid for General Info */
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 6px; margin-top: 6px; }
.fact { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: #f9fafb; }
.fact .k { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; }
.fact .v { font-size: 12px; color: var(--text); font-weight: 600; }

/* Boolean chips */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 999px; border: 1px solid; font-size: 11px; font-weight: 600; }
.chip i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.chip-yes { border-color: #10b981; color: #065f46; background: #ecfdf5; }
.chip-yes i { background: #10b981; }
.chip-no { border-color: #9ca3af; color: #374151; background: #f3f4f6; }
.chip-no i { background: #9ca3af; }

/* Boolean cards (
   YES/NO prominent, label to the right; green for YES, red for NO) */
.bool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 8px; }
.bool-card { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: #f9fafb; }
.bool-status { font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; }
.bool-label { font-size: 12px; color: var(--text); font-weight: 600; }
.bool-card.yes { background: #ecfdf5; border-color: #a7f3d0; }
.bool-card.no { background: #fef2f2; border-color: #fecaca; }
.bool-status.yes { color: #065f46; background: #d1fae5; border-color: #10b981; }
.bool-status.no { color: #de3f3f; background: #fecaca; border-color: #ef4444; }

/* String cards for FieldXX values */
.str-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 8px; }
.str-card { border: 1px solid var(--border); border-radius: 8px; background: #f9fafb; padding: 8px 10px; }
.str-card .k { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .02em; }
.str-card .v { font-size: 12px; color: var(--text); font-weight: 600; margin-top: 2px; }
/* Sentiment card */
.sentiment-card { border: 1px solid var(--border); border-radius: 8px; background: #f9fafb; padding: 8px 10px; margin-bottom: 6px; }
.sentiment-card .k { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .02em; }
.sentiment-card .v { font-size: 12px; color: var(--text); font-weight: 600; margin-top: 2px; }
.sentiment-card.pos { background: #e7f8da; border-color: #c7efaa; }
.sentiment-card.neu { background: #f2f8e6; border-color: #d8e8b6; }
.sentiment-card.neg { background: #fde7e7; border-color: #f0bfbf; }

/* Floating actions */
.floating-actions {
  position: fixed; top: 20px; right: 20px; display: flex; gap: 12px; z-index: 1000;
}
.floating-actions .btn-save-hours, .floating-actions .btn-discard-hours,
.floating-actions .btn-save-specials, .floating-actions .btn-discard-specials {
  padding: 10px 16px; border-radius: 8px; border: 1px solid; cursor: pointer; font-size: 14px; font-weight: 500;
  transition: all .2s ease; box-shadow: 0 4px 12px rgba(0,0,0,.15); backdrop-filter: blur(8px);
}
.floating-actions .btn-save-hours, .floating-actions .btn-save-specials {
  background: var(--danger); border-color: var(--danger); color: #fff;
}
.floating-actions .btn-save-hours:hover, .floating-actions .btn-save-specials:hover {
  background: #dc2626; border-color: #dc2626; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.floating-actions .btn-discard-hours, .floating-actions .btn-discard-specials {
  background: rgba(255,255,255,.9); border-color: var(--border); color: var(--text-secondary);
}
.floating-actions .btn-discard-hours:hover, .floating-actions .btn-discard-specials:hover {
  background: #fff; border-color: var(--danger); color: var(--danger); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

/* ------------------------------
   Placeholders (Assistant Info)
------------------------------ */
#panel-placeholders .ph-section {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.03); overflow: hidden; margin: 18px 0;
}
#panel-placeholders .card { position: relative; overflow-y: auto; }
/* Place the print button inside the card to avoid covering the topbar controls */
#panel-placeholders .ph-print-btn { position: absolute; top: 12px; right: 12px; z-index: 2; }
/* Avoid clipping the print button by card scroll container if needed */
@media (pointer: fine) {
  #panel-placeholders .card { overflow: visible; }
}
/* Assistant Info: search bar */
#panel-placeholders .ph-search {
  display: flex; gap: 8px; align-items: center; margin-bottom: 12px; padding-right: 56px;
}
#panel-placeholders .ph-search input[type="text"] {
  flex: 1; min-width: 160px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text);
}
#panel-placeholders .ph-search .btn { min-height: 32px; }
/* Optional: emphasize green search action */
#panel-placeholders .ph-search .btn.btn-primary { background: var(--success); border-color: var(--success); }
#panel-placeholders .ph-search .btn.btn-primary:hover { background: #059669; border-color: #059669; }

/* Highlight for matched answers */
#panel-placeholders .ph-search-highlight { background: #fff9c4 !important; }

/* Mobile: prevent print and search overlap */
@media (max-width: 720px) {
  #panel-placeholders .ph-print-btn {
    position: static; /* participate in normal flow */
    float: right;     /* align to the right edge */
    margin: 0 0 8px 12px; /* add spacing below/left */
  }
  #panel-placeholders .ph-search {
    clear: both;       /* ensure search row starts below print button */
    padding-right: 0;  /* no need to reserve space on mobile */
    flex-wrap: wrap;   /* allow controls to wrap if needed */
    gap: 8px;
  }
  #panel-placeholders .ph-search input[type="text"] {
    flex: 1 1 100%;
  }
}
/* Cleaner info icon next to placeholder labels */
#panel-placeholders .ph-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; vertical-align: text-top;
  color: var(--text-secondary); cursor: help;
}
#panel-placeholders .ph-info svg { width: 16px; height: 16px; display:block; }
#panel-placeholders .ph-info:hover { color: var(--accent); }
#panel-placeholders .ph-group-header {
  /* position: sticky; */ top: 0; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: linear-gradient(#f3f4f6,#e5e7eb); border-bottom: 2px solid var(--accent);
}
#panel-placeholders .ph-editing .ph-group-header[data-can-drag="1"] {
  cursor: grab;
}
#panel-placeholders .ph-editing .ph-group-header[data-can-drag="1"]:active {
  cursor: grabbing;
}
#panel-placeholders .ph-group {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,0.05);
  position: relative;
}
#panel-placeholders .ph-group-header h4 {
  margin: 0;
  flex: 1;
}
#panel-placeholders .ph-group-header .ph-review-label {
  color: #b45309;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 6px;
}
#panel-placeholders .ph-group-title { font-weight: 600; color: #111827; letter-spacing: .2px; }
#panel-placeholders .ph-group-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: #6b7280; font-weight: 500; cursor: pointer; user-select: none; }
#panel-placeholders .ph-group-toggle .chev { transition: transform .18s ease; }
#panel-placeholders .ph-group.collapsed .ph-group-toggle .chev { transform: rotate(-90deg); }

#panel-placeholders .ph-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
#panel-placeholders .ph-table thead th {
  /* osition: sticky; */ top: 42px; z-index: 0; background: #f9fafb; color: #6b7280; font-weight: 600;
  letter-spacing: .2px; padding: 10px 12px; border-bottom: 1px solid #e5e7eb;
}
#panel-placeholders .ph-table th:first-child, #panel-placeholders .ph-table td:first-child { width: 24%; }
#panel-placeholders .ph-table th:last-child, #panel-placeholders .ph-table td:last-child { width: 76%; }
#panel-placeholders .ph-table td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid #f1f5f9; color: #111827; }
#panel-placeholders .ph-table tr:last-child td { border-bottom: none; }
#panel-placeholders .ph-table td { position: relative; }
#panel-placeholders .ph-table td .ph-ai-btn {
  position: absolute; top: 0px; left: 0px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid #93c5fd; background: #e6f0ff; color: #111827; z-index: 20;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
#panel-placeholders .ph-table td .ph-ai-btn:hover { background: #dbeafe; border-color: #60a5fa; }
#panel-placeholders .ph-table td .ph-ai-btn .ph-ai-img { width: 16px; height: 16px; display: block; }

/* Tooltip for AI instructions */
.ph-tooltip {
  position: fixed; z-index: 2000; max-width: 420px;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  box-shadow: 0 6px 20px var(--shadow-lg); border-radius: 8px; padding: 8px 10px;
  font-size: 12px; line-height: 1.4; white-space: pre-wrap; pointer-events: none;
}
/* Info icon next to placeholder descriptions */
#panel-placeholders .info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 6px;
  border-radius: 50%; border: 1px solid #9ca3af; color: #374151; background: #fff;
  font-size: 10px; font-weight: 700; line-height: 1; cursor: default;
  vertical-align: middle; transform: translateY(-1px); /* align with text baseline */
}
#panel-placeholders .info-icon::before { content: 'i'; }
#panel-placeholders .ph-input, #panel-placeholders .ph-textarea {
  width: 100%; border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; padding: 8px 10px; font: inherit; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  font-family: var(--mono);
  font-variant-ligatures: none; /* keep widths consistent */
  font-size: 12px;
}
#panel-placeholders .ph-textarea { min-height: 112px; height: auto; resize: vertical; line-height: 1.4; }
#panel-placeholders .ph-input:focus, #panel-placeholders .ph-textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
#panel-placeholders .ph-review-flag { border: 3pt solid #facc15 !important; }
#panel-placeholders .ph-review-flag:focus { border: 3pt solid #facc15 !important; box-shadow: 0 0 0 3px rgba(250,204,21,.35) !important; }
#panel-placeholders .ph-row.changed td { background: #fffdf3; }
#panel-placeholders .ph-json-wrapper {
  --ph-json-font-scale: 1;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 112px;
  resize: vertical;
  overflow: visible;
  font-family: var(--mono);
  font-size: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#panel-placeholders .ph-json-wrapper:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
#panel-placeholders .ph-json-wrapper.ph-json-empty {
  background: var(--danger-bg, #fef2f2);
}
#panel-placeholders .ph-json-wrapper.ph-json-invalid {
  border-color: #fca5a5;
}
#panel-placeholders .ph-json-wrapper.ph-search-highlight {
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
  border-color: #3b82f6;
}
#panel-placeholders .ph-question-toggle {
  position: absolute;
  top: 68px;
  left: 24px;
  display: none;
}
#panel-placeholders .ph-question-toggle.active {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 4;
}
#panel-placeholders .ph-switch-stack {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#panel-placeholders .ph-switch-stack .ph-switch {
  margin-right: 0;
}
.ph-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
}
.ph-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ph-switch-track {
  position: relative;
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: #d1d5db;
  transition: background .2s ease;
}
.ph-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.25);
  transition: transform .2s ease;
}
.ph-switch input:checked + .ph-switch-track {
  background: #2563eb;
}
.ph-switch input:checked + .ph-switch-track .ph-switch-thumb {
  transform: translateX(18px);
}
.ph-switch-label {
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
}
#panel-placeholders .ph-json-wrapper.ph-json-expanded {
  transform: translateX(calc(-1 * var(--ph-json-expand-offset, 0px)));
  width: var(--ph-json-expand-width, calc(100% + var(--ph-json-expand-offset, 0px)));
  max-width: none;
  box-shadow: 0 16px 32px rgba(15,23,42,.18);
  border-color: #3b82f6;
  z-index: 5;
}
#panel-placeholders .ph-question-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
#panel-placeholders .ph-section-handle,
#panel-placeholders .ph-row-handle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  color: #94a3b8;
  background: rgba(148,163,184,0.15);
  cursor: grab;
  font-size: 11px;
  line-height: 1;
  user-select: none;
}
#panel-placeholders .ph-section-handle::before,
#panel-placeholders .ph-row-handle::before {
  content: '⋮⋮';
}
#panel-placeholders .ph-editing .ph-section-handle,
#panel-placeholders .ph-editing .ph-row-handle {
  display: inline-flex;
}
#panel-placeholders .ph-section-handle {
  margin-left: -4px;
  margin-right: 6px;
}
#panel-placeholders .ph-row-handle {
  margin-right: 8px;
}
#panel-placeholders .ph-group.ph-drop-section-before::before,
#panel-placeholders .ph-group.ph-drop-section-after::after,
#panel-placeholders .ph-group.ph-drop-row-after-group::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  height: 3px;
  background: #2563eb;
  box-shadow: 0 0 6px rgba(37,99,235,0.45);
  z-index: 6;
  pointer-events: none;
}
#panel-placeholders .ph-group.ph-drop-section-before::before {
  top: 0;
}
#panel-placeholders .ph-group.ph-drop-section-after::after,
#panel-placeholders .ph-group.ph-drop-row-after-group::after {
  bottom: 0;
}
#panel-placeholders .ph-group.ph-drop-row-after-group::after {
  left: 28px;
  right: 28px;
}
#panel-placeholders .ph-table tbody tr {
  position: relative;
}
#panel-placeholders .ph-table tbody tr.ph-drop-row-before::before,
#panel-placeholders .ph-table tbody tr.ph-drop-row-after::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: #2563eb;
  box-shadow: 0 0 6px rgba(37,99,235,0.45);
  z-index: 5;
  pointer-events: none;
}
#panel-placeholders .ph-table tbody tr.ph-drop-row-before::before {
  top: -2px;
}
#panel-placeholders .ph-table tbody tr.ph-drop-row-after::after {
  bottom: -2px;
}
#panel-placeholders .ph-section-rename-input {
  width: 100%;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  padding: 6px 10px;
  font-weight: 600;
  font-size: 14px;
  color: #111827;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
#panel-placeholders .ph-question-wrap > span {
  font-weight: 600;
}
#panel-placeholders .ph-placeholder-token {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
  font-style: italic;
}
#panel-placeholders .ph-json-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
#panel-placeholders .ph-json-font-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
#panel-placeholders .ph-json-font-btn {
  border: none;
  background: #f3f4f6;
  color: #1f2937;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
#panel-placeholders .ph-json-font-btn:hover {
  background: #e0e7ff;
  color: #1d4ed8;
}
#panel-placeholders .ph-json-font-btn[disabled],
#panel-placeholders .ph-json-font-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}
#panel-placeholders .ph-json-font-btn:focus-visible,
#panel-placeholders .ph-json-fullscreen-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59,130,246,.35);
}
#panel-placeholders .ph-json-font-btn .large {
  font-size: 14px;
}
#panel-placeholders .ph-json-fullscreen-btn {
  border: none;
  background: #f3f4f6;
  color: #1f2937;
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  margin-left: 6px;
}
#panel-placeholders .ph-json-fullscreen-btn:hover {
  background: #e0e7ff;
  color: #1d4ed8;
}
#panel-placeholders .ph-json-fullscreen-btn.active {
  background: #1d4ed8;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(29,78,216,.25);
}
#panel-placeholders .ph-json-fullscreen-btn[disabled],
#panel-placeholders .ph-json-fullscreen-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}
#panel-placeholders .ph-json-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #f3f4f6;
  width: fit-content;
}
#panel-placeholders .ph-json-toggle-indicator {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: calc(50% - 4px);
  left: 2px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.15);
  transition: transform .18s ease;
  pointer-events: none;
}
#panel-placeholders .ph-json-toggle[data-mode="table"] .ph-json-toggle-indicator {
  transform: translateX(100%);
}
#panel-placeholders .ph-json-toggle[data-mode="json"] .ph-json-toggle-indicator {
  transform: translateX(0%);
}
#panel-placeholders .ph-json-toggle-btn {
  position: relative;
  z-index: 2;
  border: none;
  background: transparent;
  padding: 4px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #374151;
  cursor: pointer;
  transition: color .15s ease;
}
#panel-placeholders .ph-json-toggle-btn.active {
  color: #1f2937;
  font-weight: 600;
}
#panel-placeholders .ph-json-toggle-btn[disabled],
#panel-placeholders .ph-json-toggle-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .45;
}
#panel-placeholders .ph-json-message {
  font-size: 11px;
  color: #b91c1c;
  min-height: 0;
}
#panel-placeholders .ph-json-message:empty {
  display: none;
}
#panel-placeholders .ph-json-editor {
  width: 100%;
  min-height: 160px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  resize: none;
  color: inherit;
}
#panel-placeholders .ph-json-editor.hidden {
  display: none;
}
#panel-placeholders .ph-json-table-container {
  flex: 1 1 auto;
  min-height: 112px;
  border: 1px solid #d8dee9;
  border-radius: 12px;
  background: #f8fafc;
  overflow: auto;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.08);
  padding: 12px;
  font-size: calc(12px * var(--ph-json-font-scale, 1));
}
#panel-placeholders .ph-json-table-container.hidden {
  display: none;
}
#panel-placeholders .ph-json-table {
  width: 100%;
  min-width: 320px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
#panel-placeholders .ph-json-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #dcfce7;
  color: #166534;
  font-weight: 600;
  font-size: calc(12px * var(--ph-json-font-scale, 1));
  line-height: calc(1.4 * var(--ph-json-font-scale, 1));
  letter-spacing: .2px;
  padding: 10px 12px;
  border-bottom: 1px solid #bbf7d0;
  border-right: 1px solid #bbf7d0;
}
#panel-placeholders .ph-json-table thead th,
#panel-placeholders .ph-json-table tbody td {
  position: relative;
}
#panel-placeholders .ph-json-table thead th:last-child {
  border-right: none;
}
#panel-placeholders .ph-json-table tbody td {
  padding: 0;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  background: #fff;
  font-size: inherit;
}
#panel-placeholders .ph-json-table tbody tr:nth-child(odd) td {
  background: #f0fdf4;
}
#panel-placeholders .ph-json-table tbody tr:hover td {
  background: #bbf7d0;
}
#panel-placeholders .ph-json-table tbody tr:last-child td {
  border-bottom: none;
}
#panel-placeholders .ph-json-table td:last-child,
#panel-placeholders .ph-json-table th:last-child {
  border-right: none;
}
#panel-placeholders .ph-json-cell {
  display: block;
  padding: 9px 12px;
  min-height: 34px;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  font-size: inherit;
  line-height: calc(1.5 * var(--ph-json-font-scale, 1));
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
  caret-color: #1d4ed8;
}
#panel-placeholders .ph-json-cell:focus {
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(59,130,246,.35);
}
#panel-placeholders .ph-json-row-actions {
  width: 52px;
  text-align: center;
  background: #fff;
}
#panel-placeholders .ph-json-table tbody td.ph-json-row-actions {
  padding: 6px 8px;
}
#panel-placeholders .ph-json-table tbody tr:nth-child(odd) td.ph-json-row-actions {
  background: #f8fafc;
}
#panel-placeholders .ph-json-col-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
}
.ph-json-resize-mask {
  position: fixed;
  inset: 0;
  z-index: 3000;
  cursor: col-resize;
  background: transparent;
}
.ph-json-icon {
  width: 16px;
  height: 16px;
  display: block;
}
#panel-placeholders .ph-json-row-remove {
  border: none;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
#panel-placeholders .ph-json-row-remove:hover {
  background: #fecaca;
  color: #7f1d1d;
}
#panel-placeholders .ph-json-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
#panel-placeholders .ph-json-controls.hidden {
  display: none;
}
#panel-placeholders .ph-json-add-row {
  border: 1px solid #3b82f6;
  background: #3b82f6;
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
#panel-placeholders .ph-json-add-row:hover {
  background: #2563eb;
  border-color: #2563eb;
}
#panel-placeholders .ph-json-table-empty {
  padding: 12px;
  font-size: 12px;
  color: #6b7280;
}
#panel-placeholders .ph-json-expanded-cell {
  position: relative;
  overflow: visible !important;
}
#panel-placeholders .ph-json-expanded-table {
  position: relative;
  z-index: 1;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#panel-placeholders .ph-group.collapsed .ph-table-wrap { display: none; }
#panel-placeholders .ph-chip {
  padding: 2px 8px; background: #eef2ff; border: 1px solid #e0e7ff; color: #3730a3; font-weight: 600; border-radius: 999px; font-size: 12px;
}
#panel-placeholders .savebar { position: sticky; top: 8px; z-index: 5; }

@media (max-width: 1024px) {
  #panel-placeholders .ph-table th:first-child, #panel-placeholders .ph-table td:first-child { width: 30%; }
  #panel-placeholders .ph-table th:last-child, #panel-placeholders .ph-table td:last-child { width: 70%; }
}
@media (max-width: 720px) {
  #panel-placeholders .ph-table thead { display: none; }
  #panel-placeholders .ph-table, #panel-placeholders .ph-table tbody, #panel-placeholders .ph-table tr, #panel-placeholders .ph-table td {
    display: block; width: 100%;
  }
  #panel-placeholders .ph-table tr { padding: 14px 0; margin-bottom: 12px; border-bottom: 8px solid #f8fafc; }
  #panel-placeholders .ph-table td { border-bottom: none; }
  #panel-placeholders .ph-table td:first-child {
    font-weight: 600; color: #374151; padding-bottom: 6px; border-bottom: 0; font-size: 14px;
  }
  #panel-placeholders .ph-table td:last-child { padding-top: 0; }
  /* Mobile: make inputs span the usable viewport width */
  #panel-placeholders .ph-input, #panel-placeholders .ph-textarea {
    font-size: 12px;
    padding: 10px 12px;
    display: block;
    /* Fill viewport minus card padding (16px left/right + 8px allowance) */
    width: calc(100vw - 48px);
  }
  /* Use dynamic viewport when available to avoid Android/Safari chrome issues */
  @supports (width: 100dvw) {
    #panel-placeholders .ph-input, #panel-placeholders .ph-textarea {
      width: calc(100dvw - 48px);
    }
  }
}

/* Mobile: Make Assistant Info card use full width */
@media (max-width: 768px) {
#panel-placeholders .card,
#panel-placeholders .table-container {
  width: 100% !important;
  max-width: none !important;
}
#panel-placeholders .ph-question-toggle.active + #placeholdersContainer {
  padding-top: 40px;
}
}

/* Assistant Info (placeholder table) sizing
   By default the description column was too narrow which caused long titles
   to wrap unnecessarily. Increase its width to 35% and shrink the value
   column to 65% so that placeholder titles have more room. These rules
   override earlier definitions. */
/* Override placeholder table column widths.  Give the description column more
   room to prevent truncation. */
#panel-placeholders .ph-table th:first-child,
#panel-placeholders .ph-table td:first-child {
  width: 40%;
}
#panel-placeholders .ph-table th:last-child,
#panel-placeholders .ph-table td:last-child {
  width: 60%;
}

/* Ensure placeholder descriptions wrap within their allotted space rather than
   truncating prematurely. */
#panel-placeholders .ph-table td:first-child span {
  /* display: block;  <<<< para consertar o i de informacao no placeholder */ 
  word-break: break-word;
}
/* Remove default margin on the Assistant Info card when on mobile to allow
   the card and its table to utilize the full screen width. */
@media (max-width: 768px) {
  #panel-placeholders.content-panel,
  #panel-placeholders .card {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ------------------------------
   Dashboard add-ons: Pie / Heatmap / Line
------------------------------ */
.selector-group.date-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.selector-group.date-range select, .selector-group.date-range input[type="date"] {
  padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); font-size: 14px;
}
.selector-group.date-range button {
  padding: 6px 10px; font-size: 14px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 4px; cursor: pointer;
}
.selector-group.date-range button:hover { background: var(--accent-hover); }

.pie-chart { width: 220px; height: 220px; border-radius: 50%; margin: 0 auto; }
.pie-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin-top: 6px; font-size: 12px; }
.pie-legend span { display: flex; align-items: center; gap: 4px; }
.pie-legend i { width: 12px; height: 12px; display: inline-block; border-radius: 2px; }

.heatmap { display: grid; grid-template-columns: repeat(24, 1fr); grid-auto-rows: 16px; gap: 1px; margin-top: 6px; }
.heatmap .cell { width: 100%; height: 16px; font-size: 0; }

.chart-line svg { width: 100% !important; height: 200px !important; }

/* ------------------------------
   Responsive
------------------------------ */
@media (max-width: 1024px) {
  .topbar { padding: 12px 16px; }
  .content-area { padding: 16px; }
}
@media (max-width: 768px) {
  .app-container { flex-direction: column; }

  .sidebar {
    position: fixed; top: 0; left: -260px; height: 100vh; z-index: 100;
    transition: left .3s ease; width: 260px; box-shadow: 2px 0 10px var(--shadow-lg);
  }
  .sidebar.open { left: 0; }

  /* Mobile collapsed behavior: hidden until opened */
  body.sidebar-collapsed .sidebar { left: -260px; width: 260px; min-width: 260px; }
  body.sidebar-collapsed .sidebar.open { left: 0; width: 260px; min-width: 260px; }

  /* Reveal texts when open on mobile */
  body.sidebar-collapsed .sidebar.open .user-details,
  body.sidebar-collapsed .sidebar.open .label,
  body.sidebar-collapsed .sidebar.open .brand {
    opacity: 1; pointer-events: auto; width: auto; overflow: visible;
  }
  body.sidebar-collapsed .sidebar.open .navbtn,
  body.sidebar-collapsed .sidebar.open .user-info,
  body.sidebar-collapsed .sidebar.open .btn-logout {
    padding: 10px 12px; justify-content: flex-start;
  }

  .main-content { width: 100%; }
  .mobile-menu-btn { display: flex; }
  .page-title { font-size: 20px; }

  /* Compact topbar layout: title on first row, filters beneath */
  .topbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .topbar-left { justify-content: space-between; }
  .topbar-right { width: 100%; }
  .topbar-right.selector-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-items: end; }
  .topbar-right .selector-group { min-width: 0; }
  .topbar-right .selector-group label { font-size: 12px; }
  .topbar-right .select { min-height: 0px; font-size: 12px; padding: 3px 1px; margin-right: 34px; }
  .topbar-right #assistantPhone { min-height: 32px; font-size: 14px; padding: 4px 8px; }

  .selector-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .selector-group { min-width: auto; }

  .toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .search { max-width: none; }

  .table th, .table td { padding: 8px 12px; }
  .compact-table th, .compact-table td { padding: 4px 8px; }

  .card { padding: 16px; }
  .modal-content { width: 95%; }
  .modal-header, .modal-body { padding: 16px; }

  .date-range-container { flex-direction: column; align-items: stretch; gap: 4px; }
  .date-input.compact { width: 100%; }

  /* Sidebar overlay */
  .sidebar-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99;
    opacity: 0; visibility: hidden; transition: all .3s ease;
  }
  .sidebar-overlay.active { opacity: 1; visibility: visible; }

  /* Sticky footer with safe-area */
  .sidebar-inner { max-height: calc(100vh - env(safe-area-inset-bottom,0px)); overflow-y: auto; }
  .sidebar-footer {
    position: sticky; bottom: 0; background: var(--sidebar);
    padding-bottom: calc(16px + env(safe-area-inset-bottom,0px)); z-index: 1;
    flex-direction: row; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center;
  }
  .sidebar-footer .user-info { flex: 1 1 auto; }
  .sidebar-footer .btn-logout { flex: 0 0 auto; }

  /* Hours actions on mobile */
  .hours-actions { flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .btn-save-hours, .btn-discard-hours, .btn-save-specials, .btn-discard-specials { width: 100%; justify-content: center; }

  /* Calls table */
  #callTable th:nth-child(1), #callTable th:nth-child(2),
  #callTable td:nth-child(1), #callTable td:nth-child(2) {
    min-width: 120px; width: 120px; font-size: 11px;
  }
}
@media (max-width: 480px) {
  .topbar { padding: 8px 12px; }
  .content-area { padding: 12px; }
  .page-title { font-size: 18px; }
  .btn { padding: 6px 12px; font-size: 13px; }
  .sidebar { width: 240px; left: -240px; }
  .compact-table td { max-width: 100px; }
  .card { padding: 16px; border-radius: 8px; }
  .time-label { min-width: 50px; font-size: 11px; padding: 4px 2px; }
  .table th, .table td { padding: 8px 4px; font-size: 12px; }
  .btn-save-hours, .btn-discard-hours, .btn-save-specials, .btn-discard-specials { padding: 10px 16px; font-size: 14px; }
  .seg-head { font-size: 11px; }
  .wday { font-size: 12px; }

  /* On very small screens, stack all selector groups in a single column */
  .topbar-right.selector-inner { grid-template-columns: 1fr; }
  /* Make phone span full width when 2-column grid is used (fallback safe) */
  .topbar-right.selector-inner .selector-group:last-child { grid-column: 1 / -1; }
}

/* Touch targets */
@media (hover: none) and (pointer: coarse) {
  .navbtn ↶</button>{ min-height: 44px; }
  .btn, .btn-save-hours, .btn-discard-hours, .btn-save-specials, .btn-discard-specials { min-height: 44px; }
}

/* Landscape tablet */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .sidebar { width: 200px; min-width: 200px; }
  body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); min-width: var(--sidebar-w-collapsed); }
  .content-area { padding: 20px; }
  .selector-inner { gap: 16px; }
  .selector-group { min-width: 150px; }
}

/* Print */
@media print {
  .sidebar, .topbar, .selector-bar { display: none; }
  .main-content { width: 100%; }
  .content-area { padding: 0; }
}


/* --- Fix: prevent label wrapping during sidebar collapse; keep icons static --- */
.navbtn .label,
.sidebar-footer .label,
.sidebar-footer .user-details { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Keep icon boxes fixed width so they don't shift while collapsing */
.navbtn .icon, .btn-logout .icon, .user-info .user-avatar { width: 20px; min-width: 20px; display:flex; align-items:center; justify-content:center; }

/* Stabilize footer block during collapse/expand */
.sidebar-footer { position: sticky; bottom: 0; background: var(--sidebar); }
body.sidebar-collapsed .sidebar-footer .user-details,
body.sidebar-collapsed .sidebar-footer .label { opacity: 0; pointer-events: none; }

/* --- Dashboard charts responsive grid: fit up to 3 cards per row on desktop --- */
/* Sentiment gauge sizing */
.sentiment-gauge { width: 140px; height: 72px; margin: 4px auto 0; }
.sentiment-gauge svg { width: 100%; height: 100%; display: block; }
.sentiment-summary .sentiment-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 6px 0; }
.sentiment-chip { border-radius: 999px; padding: 4px 8px; font-size: 12px; font-weight: 700; background: #e5e7eb; color: #111827; }
.sentiment-chip.pos { background: #e7f8da; color: #1f5f0b; }
.sentiment-chip.neu { background: #f2f8e6; color: #5a6e3c; }
.sentiment-chip.neg { background: #fde7e7; color: #8f1f1f; }
/* charts */
.dashboard-charts { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.dashboard-charts .chart-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.03); display: flex; flex-direction: column; height: 320px; }
.dashboard-charts .chart-card h4 { margin: 0 0 8px 0; font-size: 14px; color: var(--text-secondary); }
.dashboard-charts .chart-line svg { height: 200px !important; }
/* Contain charts within their cards, prevent horizontal overflow */
.dashboard-charts { width: 100%; overflow-x: hidden; }
.chart-card { overflow: hidden; }
/* .chart-card canvas, .chart-card svg { display: block; max-width: 100% !important; width: 100% !important; } */
.chart-card canvas, .chart-card svg { display: block; }

@media (max-width: 1200px) {
  .dashboard-charts { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 720px) {
  .dashboard-charts { grid-template-columns: 1fr; }
}

/* Fixed-size cards for charts */
.chart-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; }
.chart-holder { height: 220px; min-height: 220px; width:100%; position: relative; }
.chart-holder canvas, .chart-holder svg { position:absolute; inset:8px 8px 8px 8px; width: calc(100% - 16px) !important; height: calc(100% - 16px) !important; }
.chart-title { margin:0 0 8px 0; font-size:14px; color: var(--text-secondary); }

/* Enforce a minimum height and relative positioning on dashboard chart containers.
   Without these rules the Chart.js canvases may collapse or overflow,
   especially when the data set is empty.  The direct child div of each
   chart-card corresponds to the placeholder element used by dashboard.js. */
.dashboard-charts .chart-card > div { min-height: 0; position: relative; flex: 1 1 auto; }

/* Tinted chart cards to mimic pastel colored metric graphs */
.chart-card.tinted-green  { background: linear-gradient(180deg, #e8faf1, #def7ec); }
.chart-card.tinted-orange { background: linear-gradient(180deg, #fff4e6, #ffedd5); }
.chart-card.tinted-purple { background: linear-gradient(180deg, #f4f0ff, #ede9fe); }
.chart-card.tinted-blue   { background: linear-gradient(180deg, #eef7ff, #e0f2fe); }
.chart-card.tinted-pink   { background: linear-gradient(180deg, #ffeef6, #fee2e2); }
.chart-card.tinted h4     { color: #111827; opacity: .7; }

/* Large KPI numbers similar to the screenshot */
.dashboard-metrics .metric-card h4 { color: var(--text-secondary); margin: 0; font-weight: 500; }
.dashboard-metrics .metric-card p  { font-size: 32px; font-weight: 800; letter-spacing: .02em; margin: 4px 0 0 0; color: #111827; }

/* =============================
   Skeleton Loading Placeholders
   ============================= */
/* Base skeleton shimmer */
.skeleton { position: relative; overflow: hidden; background: #eee; border-radius: 6px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  animation: skopgoShimmer 1.2s infinite;
}
@keyframes skopgoShimmer { 100% { transform: translateX(100%); } }

/* Small bar for numbers/text */
.skeleton-bar { height: 16px; width: 60%; max-width: 160px; }
.skeleton-bar.sm { height: 12px; width: 40%; max-width: 120px; }
.skeleton-bar.lg { height: 20px; width: 70%; max-width: 200px; }

/* Table skeleton */
.skeleton-table { width: 100%; border-collapse: collapse; }
.skeleton-table td, .skeleton-table th { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.skeleton-cell { height: 12px; width: 100%; }

/* Chart-like skeletons */
.skeleton-chart { position: relative; min-height: 220px; border-radius: 8px; }

/* Bar chart: vertical bars of varying height */
.skeleton-chart-bar { display: flex; align-items: flex-end; gap: 8px; height: 220px; padding: 8px; }
.skeleton-chart-bar .bar { flex: 1; border-radius: 4px 4px 0 0; background: #e5e7eb; position: relative; overflow: hidden; }
.skeleton-chart-bar .bar::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); animation: skopgoShimmer 1.2s infinite; }

/* Line chart: series band */
.skeleton-chart-line { position: relative; height: 220px; padding: 8px; }
.skeleton-chart-line .band { position: absolute; left: 8px; right: 8px; height: 120px; top: 40px; border-radius: 6px; background: #eef2f7; }
.skeleton-chart-line .band::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0)); animation: skopgoShimmer 1.2s infinite; }

/* Heatmap: grid */
.skeleton-heatmap { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; padding: 8px; }
.skeleton-heatmap .cell { height: 16px; background: #e5e7eb; border-radius: 3px; position: relative; overflow: hidden; }
.skeleton-heatmap .cell::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); animation: skopgoShimmer 1.2s infinite; }

/* Placeholders list skeleton */
.skeleton-ph-group { margin: 12px 0; }
.skeleton-ph-header { width: 180px; height: 16px; }
.skeleton-ph-row { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; margin: 8px 0; }
.skeleton-ph-row .left { height: 12px; }
.skeleton-ph-row .right { height: 12px; }

/* =============================
   Auto Logout Overlay
   ============================= */
.auto-logout-overlay { position: fixed; inset: 0; background: rgba(185, 28, 28, 0.3); display: none; align-items: center; justify-content: center; z-index: 9999; }
.auto-logout-overlay.active { display: flex; }
.auto-logout-card { width: min(92vw, 420px); background: #b91c1c; border: 1px solid #7f1d1d; border-radius: 12px; box-shadow: 0 10px 30px rgba(185, 28, 28, 0.4); padding: 20px; text-align: center; color: #fff; }
.auto-logout-title { margin: 0 0 8px 0; font-size: 18px; color: #fff; font-weight: 700; }
.auto-logout-text { margin: 0; color: #ffe4e4; font-weight: 600; }
.auto-logout-timer { margin: 10px 0 4px 0; font-size: 40px; font-weight: 800; color: #fff; letter-spacing: .03em; text-shadow: 0 0 12px rgba(0,0,0,0.35); }
.auto-logout-help { margin: 6px 0 0 0; font-size: 12px; color: #ffe4e4; }