/* ============================================================================
   PiCall CRM — refinement layer
   Loaded after callcenter.css; overrides only, no markup changes required.

   The base sheet came from a 2018-era visual language: 50px drop shadows,
   translucent "glass" panels, hero banners on every page, and a teal/amber
   pairing. Modern CRM tooling (Linear, Attio, Front) moved the opposite way —
   flat surfaces separated by 1px hairlines, denser type, and a single
   restrained accent. This sheet makes that shift.
   ========================================================================= */

:root {
  /* Neutrals carry a faint cool cast so they read as chosen, not defaulted. */
  --cc-bg:             #FBFBFC;
  --cc-surface:        #FFFFFF;
  --cc-surface-strong: #FFFFFF;
  --cc-surface-sunk:   #F5F6F8;
  --cc-border:         #E7E9EC;
  --cc-border-strong:  #D8DCE1;
  --cc-text:           #15181D;
  --cc-text-2:         #3D444E;
  --cc-muted:          #757C87;

  /* One accent, deepened from PiCall's cyan so it passes contrast on white. */
  --cc-primary:        #0E7C8C;
  --cc-primary-hover:  #0B6675;
  --cc-primary-soft:   #E6F3F6;
  --cc-primary-line:   #A8D5DE;

  /* Semantics sit apart from the accent and stay low-saturation — a status
     chip should register without shouting across the page. */
  --cc-success:        #0E7C5A;
  --cc-success-soft:   #E4F3EE;
  --cc-accent:         #9A6216;
  --cc-accent-soft:    #FBF1E3;
  --cc-danger:         #B4232B;
  --cc-danger-soft:    #FBEAEB;

  /* Shadows become almost nothing. Depth comes from borders now. */
  --cc-shadow:         0 1px 2px rgba(21, 24, 29, .04);
  --cc-shadow-pop:     0 4px 16px -6px rgba(21, 24, 29, .18), 0 0 0 1px var(--cc-border);
  --cc-radius:         8px;
  --cc-radius-sm:      6px;
}

body {
  background: var(--cc-bg);
  color: var(--cc-text);
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Digits that sit in columns must not jitter as they change. */
table, .cc-row, input, select, textarea,
[class*="count"], [class*="total"], [class*="-id"] {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- surfaces */
.cc-panel {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  backdrop-filter: none;          /* kill the glass */
  overflow: hidden;
}

.cc-panel-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--cc-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cc-panel-title {
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--cc-text);
  margin: 0;
}

.cc-panel-subtitle {
  font-size: .78rem;
  color: var(--cc-muted);
  margin: 2px 0 0;
  font-weight: 450;
}

/* Hero banners belong on marketing pages, not inside a tool the user lives
   in all day. Demote to a compact page header. */
.cc-hero {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 0 16px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--cc-border);
  border-radius: 0;
  color: var(--cc-text);
}
.cc-hero h1 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.022em;
  margin: 0 0 3px;
  color: var(--cc-text);
  text-wrap: balance;
}
.cc-hero p {
  font-size: .85rem;
  color: var(--cc-muted);
  margin: 0;
  max-width: 62ch;
}

/* ----------------------------------------------------------------- sidebar */
.cc-sidebar {
  background: var(--cc-surface);
  border-right: 1px solid var(--cc-border);
  box-shadow: none;
  backdrop-filter: none;
}

.cc-nav-label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #9AA1AB;
  padding: 0 12px;
  margin: 18px 0 6px;
}

.cc-nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  margin: 1px 6px;
  border-radius: var(--cc-radius-sm);
  font-size: .855rem;
  font-weight: 500;
  color: var(--cc-text-2);
  border: 0;
  transition: background .12s ease, color .12s ease;
}
.cc-nav-link:hover {
  background: var(--cc-surface-sunk);
  color: var(--cc-text);
}
/* Active state is a quiet tint, not a saturated fill — the sidebar should
   recede so the record in front of the user is what carries emphasis. */
.cc-nav-link.active,
.cc-nav-link[aria-current="page"] {
  background: var(--cc-primary-soft);
  color: var(--cc-primary);
  font-weight: 600;
  box-shadow: none;
}
.cc-nav-link i { width: 15px; text-align: center; opacity: .75; font-size: .88em; }
.cc-nav-link.active i { opacity: 1; }

/* ------------------------------------------------------------------ header */
.cc-header {
  background: var(--cc-surface);
  border-bottom: 1px solid var(--cc-border);
  box-shadow: none;
  backdrop-filter: none;
  padding: 10px 20px;
}

.cc-brand-mark, .cc-logo-chip {
  border-radius: var(--cc-radius-sm);
  box-shadow: none;
}

.cc-connection-badge {
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cc-success-soft);
  color: var(--cc-success);
  border: 1px solid transparent;
}

/* ----------------------------------------------------------------- buttons */
.cc-btn {
  border-radius: var(--cc-radius-sm);
  font-size: .84rem;
  font-weight: 600;
  padding: 7px 13px;
  border: 1px solid var(--cc-border-strong);
  background: var(--cc-surface);
  color: var(--cc-text-2);
  box-shadow: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  letter-spacing: -.005em;
}
.cc-btn:hover { background: var(--cc-surface-sunk); border-color: #C7CDD4; color: var(--cc-text); }

.cc-btn-primary {
  background: var(--cc-primary);
  border-color: var(--cc-primary);
  color: #fff;
}
.cc-btn-primary:hover { background: var(--cc-primary-hover); border-color: var(--cc-primary-hover); color: #fff; }

.cc-btn-light { background: var(--cc-surface); color: var(--cc-text-2); }
.cc-btn-danger { background: var(--cc-danger); border-color: var(--cc-danger); color: #fff; }
.cc-btn-danger:hover { background: #9C1E25; border-color: #9C1E25; }
.cc-btn-sm { padding: 5px 10px; font-size: .79rem; }

.cc-btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cc-primary);
  outline-offset: 1px;
}

/* ------------------------------------------------------------------ inputs */
input[type="text"], input[type="password"], input[type="email"],
input[type="date"], input[type="number"], input[type="search"],
select, textarea, .form-control {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-sm);
  padding: 7px 10px;
  font-size: .86rem;
  color: var(--cc-text);
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--cc-primary);
  box-shadow: 0 0 0 3px var(--cc-primary-soft);
  outline: none;
}
label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--cc-muted);
  letter-spacing: .01em;
}

/* ------------------------------------------------------------------ tables */
table { border-collapse: collapse; width: 100%; font-size: .855rem; }

thead th {
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cc-muted);
  background: transparent;
  border-bottom: 1px solid var(--cc-border-strong);
  padding: 9px 12px;
  white-space: nowrap;
}

tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--cc-border);
  color: var(--cc-text-2);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
/* Hairline separation reads cleaner than zebra striping at this density. */
tbody tr:nth-child(even) { background: transparent; }
tbody tr:hover { background: var(--cc-surface-sunk); }

/* Wide tables scroll in their own container so the page never moves sideways. */
.cc-panel > .table-responsive,
.cc-panel > div[style*="overflow"] { overflow-x: auto; }

/* -------------------------------------------------------------- status pill */
.badge, .cc-pill, .cc-status,
[class*="status-"], [class*="badge-"] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 650;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: .005em;
  border: 1px solid transparent;
}

/* ------------------------------------------------------------------ modals */
.modal-content {
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  box-shadow: 0 16px 48px -12px rgba(21, 24, 29, .28);
}
.modal-header {
  border-bottom: 1px solid var(--cc-border);
  padding: 14px 18px;
}
.modal-title { font-size: .98rem; font-weight: 650; letter-spacing: -.01em; }
.modal-body { padding: 18px; }

/* ------------------------------------------------------------------- misc */
.cc-row {
  border-bottom: 1px solid var(--cc-border);
  padding: 9px 0;
}
.cc-row:last-child { border-bottom: 0; }

.cc-sidebar-note {
  font-size: .74rem;
  color: var(--cc-muted);
  background: var(--cc-surface-sunk);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  padding: 9px 11px;
  line-height: 1.45;
}

.cc-paginate .cc-btn { min-width: 32px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #D3D7DD;
  border-radius: 6px;
  border: 2px solid var(--cc-bg);
}
::-webkit-scrollbar-thumb:hover { background: #BCC2CA; }
::-webkit-scrollbar-track { background: transparent; }

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

/* The CRM renders inside an iframe in the agent console, where the chrome is
   already provided by PiCall. Trim the outer padding so no space is wasted. */
@media (max-width: 900px) {
  .cc-main { padding: 14px; }
  .cc-hero { padding-bottom: 12px; margin-bottom: 14px; }
}

/* --------------------------------------------------------- nav active state
   The template marks the current page with `is-active` (not `.active`), so the
   earlier rule never matched and the selected item inherited a washed-out
   colour from the base sheet — legible only on hover. Target the real class,
   and state it strongly enough that the current page is obvious at a glance. */
.cc-nav-link.is-active,
.cc-nav-link.is-active:hover {
  background: var(--cc-primary-soft);
  color: var(--cc-primary);
  font-weight: 650;
  box-shadow: inset 2px 0 0 var(--cc-primary);
}
.cc-nav-link.is-active i { opacity: 1; color: var(--cc-primary); }

/* Non-active items need enough contrast to be readable without hovering. */
.cc-nav-link,
.cc-nav-link:link,
.cc-nav-link:visited {
  color: var(--cc-text-2);
  text-decoration: none;
}
.cc-nav-link:hover { background: var(--cc-surface-sunk); color: var(--cc-text); }

/* Sidebar brand block: tighten now that the tagline below it is gone. */
.cc-brand-copy strong { font-size: .92rem; font-weight: 700; letter-spacing: -.01em; }
.cc-brand-copy span   { font-size: .74rem; color: var(--cc-muted); }
.cc-sidebar .cc-nav-group:first-of-type .cc-nav-label { margin-top: 14px; }

/* ------------------------------------------------------ escalation bell */
.cc-notif { position: relative; }

.cc-notif-btn {
  position: relative;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-surface);
  color: var(--cc-text-2);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.cc-notif-btn:hover { background: var(--cc-surface-sunk); border-color: #C7CDD4; }
.cc-notif-btn i { font-size: .95rem; }

/* The count is work owed, so it reads as an alert rather than the accent. */
.cc-notif-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cc-danger); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 1;
  border-radius: 999px;
  border: 2px solid var(--cc-surface);
  font-variant-numeric: tabular-nums;
}

/* Something arrived since the user last looked. */
.cc-notif-btn.has-new i { color: var(--cc-danger); }
@media (prefers-reduced-motion: no-preference) {
  .cc-notif-btn.has-new .cc-notif-count { animation: cc-notif-pop 1.6s ease-in-out 3; }
}
@keyframes cc-notif-pop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

.cc-notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-width: calc(100vw - 24px);
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: 0 12px 32px -10px rgba(21, 24, 29, .26);
  z-index: 1200;
  overflow: hidden;
}
.cc-notif-panel[hidden] { display: none; }

.cc-notif-head {
  padding: 11px 14px;
  border-bottom: 1px solid var(--cc-border);
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.cc-notif-head strong { font-size: .9rem; font-weight: 650; color: var(--cc-text); }
.cc-notif-head span   { font-size: .74rem; color: var(--cc-muted); }

.cc-notif-list { max-height: 380px; overflow-y: auto; }

.cc-notif-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px;
  border-bottom: 1px solid var(--cc-border);
  text-decoration: none;
  transition: background .12s ease;
}
.cc-notif-item:last-child { border-bottom: 0; }
.cc-notif-item:hover { background: var(--cc-surface-sunk); text-decoration: none; }
.cc-notif-item.is-new { background: var(--cc-primary-soft); }
.cc-notif-item.is-new:hover { background: #DAEDF1; }

.cc-notif-dot {
  width: 8px; height: 8px; border-radius: 999px;
  margin-top: 5px; flex: 0 0 8px;
}

.cc-notif-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cc-notif-body strong {
  font-size: .855rem; font-weight: 620; color: var(--cc-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-notif-issue {
  font-size: .79rem; color: var(--cc-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-notif-meta { font-size: .72rem; color: var(--cc-muted); }

.cc-notif-empty {
  padding: 26px 14px; text-align: center;
  font-size: .82rem; color: var(--cc-muted);
}

.cc-notif-foot {
  display: block; padding: 10px 14px; text-align: center;
  font-size: .79rem; font-weight: 600;
  color: var(--cc-primary); background: var(--cc-surface-sunk);
  border-top: 1px solid var(--cc-border);
  text-decoration: none;
}
.cc-notif-foot:hover { background: #EDEFF2; text-decoration: none; }

/* ---------------------------------------------------- searchable picker */
.cc-picker { position: relative; margin-top: 4px; }

.cc-picker > input[type="text"] {
  width: 100%;
  padding: 8px 30px 8px 11px;
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-sm);
  font-size: .93em;
  box-sizing: border-box;
}

.cc-picker-clear {
  position: absolute; top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: var(--cc-surface-sunk);
  color: var(--cc-muted);
  font-size: 1rem; line-height: 1;
  cursor: pointer;
}
.cc-picker-clear:hover { background: #E3E6EA; color: var(--cc-text); }
.cc-picker-clear[hidden] { display: none; }

.cc-picker-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 240px; overflow-y: auto;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  box-shadow: 0 10px 28px -10px rgba(21, 24, 29, .26);
  z-index: 60;
}
.cc-picker-list[hidden] { display: none; }

.cc-picker-opt {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 11px;
  cursor: pointer;
  border-bottom: 1px solid var(--cc-border);
}
.cc-picker-opt:last-child { border-bottom: 0; }
.cc-picker-opt:hover,
.cc-picker-opt.is-active { background: var(--cc-primary-soft); }

.cc-picker-nm { font-size: .86rem; font-weight: 600; color: var(--cc-text); }
.cc-picker-rl {
  font-size: .73rem; color: var(--cc-muted);
  font-variant-numeric: tabular-nums;
}

.cc-picker-empty {
  padding: 16px 11px; text-align: center;
  font-size: .8rem; color: var(--cc-muted);
}

/* ------------------------------------------------------- two-up case form */
/* Grid rather than inline styles so the columns can collapse — the CRM also
   renders inside a narrow iframe in the agent console. */
.cc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 16px;
  align-items: start;
}
.cc-form-grid .cc-span-2 { grid-column: 1 / -1; }

/* Labels sat on their own line with a 4px gap each; tightening them takes a
   few rows off the height without crowding the inputs. */
.cc-form-grid label { display: block; margin-bottom: 3px; }
.cc-form-grid input[type="text"],
.cc-form-grid select,
.cc-form-grid textarea { margin-top: 0 !important; }

@media (max-width: 780px) {
  .cc-form-grid { grid-template-columns: 1fr; }
}

/* The picker's dropdown is absolutely positioned, but .cc-panel sets
   overflow:hidden for its rounded corners, which clipped the list to the panel
   and left the search box looking like it returned nothing. This panel holds a
   form rather than a table, so it has no corners worth clipping. */
.cc-panel.cc-panel-overflow { overflow: visible; }

/* Sits above the form rows that follow it in the grid. */
.cc-picker-list { z-index: 400; }