/**
 * Custom CSS Overrides (v5)
 * Copied from /public/css/custom.css so v5 theme assets live under /v5.
 */

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-body-color);
}

.datepicker table tr td.today {
    background-color: var(--bs-warning-bg-subtle) !important;
    border-color: var(--bs-warning-border-subtle) !important;
    color: var(--bs-warning-text-emphasis) !important;
}

.datepicker table tr td.today:hover,
.datepicker table tr td.today:focus,
.datepicker table tr td.today.active {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: var(--bs-white) !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active.highlighted,
.datepicker table tr td.selected,
.datepicker table tr td.selected.highlighted {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.datepicker table tr td.active:hover,
.datepicker table tr td.active:focus,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:focus {
    background-color: var(--primary-600, var(--bs-primary)) !important;
    border-color: var(--primary-600, var(--bs-primary)) !important;
    color: var(--bs-white) !important;
}

.datepicker table tr td.highlighted {
    background-color: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary-border-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
}

.datepicker table tr td span.active {
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
    color: var(--bs-primary) !important;
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary) !important;
}

/* DataTables - default left-align for all columns */
table.dataTable th,
table.dataTable td {
    text-align: left;
}
table.dataTable th.dt-type-numeric,
table.dataTable td.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-date {
    text-align: left;
}
table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-numeric div.dt-column-footer,
table.dataTable th.dt-type-date div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-footer {
    flex-direction: row;
}

/* DataTables - modern look (SmartAdmin-style) */
table.dataTable {
    border-radius: 0.375rem;
    overflow: hidden;
}
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-striped-bg: rgba(0, 0, 0, 0.02);
}
table.dataTable.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.1);
}
table.dataTable thead th {
    font-weight: 600;
    border-bottom-width: 2px;
}

/* Logo version badge (data-prefix) — white text on brand green background */
.app-logo[data-prefix]::before {
    color: #000000 !important;
    background: #6bb33e !important;
}

/* Bootstrap Modal — mobile stacking fix (same as global custom.css) */
.modal-backdrop {
    z-index: 2000 !important;
}

.modal {
    z-index: 2005 !important;
}

.modal-backdrop.show {
    opacity: .6 !important;
}

.backdrop {
    z-index: 1500 !important;
}

/* ══════════════════════════════════════════════════════════════════
   Call Flow Preview — reusable (call_flow_preview.js)
   Used by: client-hunt-group-settings.php, client-custom-ivr-settings.php (Menu Preview)
   See: migration_docs/CALL_FLOW_PREVIEW_REFERENCE.md, CUSTOM_IVR_CALL_MENU_ANALYSIS.md §15
   ══════════════════════════════════════════════════════════════════ */

.app-body { overflow-x:visible!important; }
.flow-panel { z-index:5; transition:none; }
.flow-panel.is-fixed { position:fixed; max-height:calc(100vh - 90px); overflow-y:auto; }
.flow-start { display:flex; align-items:center; gap:.45rem; padding:.45rem .75rem; background:var(--bs-tertiary-bg); border:1px solid var(--bs-border-color); border-radius:.375rem; margin-bottom:0; font-size:.73rem; font-weight:500; color:var(--bs-secondary-color); }
.flow-start .flow-start-icon { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--bs-secondary-color); color:var(--bs-body-bg); font-size:.6rem; flex-shrink:0; }
.flow-end { display:flex; align-items:center; gap:.5rem; padding:.55rem .85rem; background:var(--bs-tertiary-bg); border:1px dashed var(--bs-border-color); border-radius:.375rem; margin-top:0; font-size:.72rem; color:var(--bs-secondary-color); font-style:italic; }
.flow-tree { list-style:none; padding:0; margin:0; }
.ft-node { position:relative; display:flex; align-items:flex-start; gap:.55rem; padding:.65rem .75rem .65rem 2rem; font-size:.78rem; line-height:1.4; color:var(--bs-body-color); }
.ft-node::before { content:''; position:absolute; left:12px; top:0; bottom:0; width:2px; background:var(--bs-primary-border-subtle); }
.ft-node:last-child::before { bottom:50%; }
.ft-node::after { content:''; position:absolute; left:12px; top:50%; width:12px; height:2px; background:var(--bs-primary-border-subtle); }
.ft-icon { position:relative; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-size:.72rem; flex-shrink:0; z-index:1; border:2px solid var(--bs-body-bg); box-shadow:0 0 0 1px rgba(0,0,0,.1); }
.ft-body { min-width:0; padding-top:.15rem; }
.ft-label { font-weight:700; color:var(--bs-body-color); font-size:.78rem; }
.ft-desc { color:var(--bs-secondary-color); font-size:.73rem; display:block; margin-top:.1rem; }
.ft-desc strong { color:var(--bs-body-color); font-weight:600; }
.ft-badge { display:inline-block; padding:.1rem .4rem; border-radius:.2rem; font-size:.65rem; font-weight:600; background:var(--bs-secondary-bg); color:var(--bs-secondary-color); }
.flow-empty { text-align:center; padding:2rem 1rem; color:var(--bs-secondary-color); font-size:.82rem; }
.flow-empty i { display:block; font-size:1.5rem; margin-bottom:.5rem; opacity:.5; }

@media(max-width:991.98px){ .flow-panel,.flow-panel.is-fixed{position:static!important;max-height:none;width:auto!important;top:auto!important;} }

/* ══════════════════════════════════════════════════════════════════
   Hunt Group Builder (client-hunt-group-settings.php only)
   Call Menu Builder (client-custom-ivr-settings.php) — .cm-* shares card chrome
   ══════════════════════════════════════════════════════════════════ */

/* Step / option cards */
.hg-card, .cm-card { background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-left:3px solid var(--bs-primary); border-radius:.375rem; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:box-shadow .15s,border-color .15s,transform .15s; }
.hg-card:hover, .cm-card:hover { box-shadow:0 3px 10px rgba(0,0,0,.1); }
.hg-card.sortable-ghost, .cm-card.sortable-ghost { opacity:.35; border:2px dashed var(--bs-primary); border-left-width:3px; background:var(--bs-primary-bg-subtle); transform:scale(.98); }
.hg-card.sortable-chosen, .cm-card.sortable-chosen { box-shadow:0 8px 24px rgba(0,0,0,.15); transform:scale(1.01); z-index:10; }
.hg-card.is-invalid-card, .cm-card.is-invalid-card { border-color:var(--bs-danger)!important; border-left-color:var(--bs-danger)!important; background:var(--bs-danger-bg-subtle); }
.hg-card-header, .cm-card-header { display:flex; align-items:center; gap:.5rem; padding:.4rem .85rem; border-bottom:1px solid var(--bs-border-color-translucent); background:var(--bs-tertiary-bg); border-radius:.375rem .375rem 0 0; }
.hg-card-body, .cm-card-body { padding:.85rem; }

/* Drag handle */
.drag-handle { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:.375rem; background:var(--bs-secondary-bg); color:var(--bs-secondary-color); font-size:1rem; cursor:grab; touch-action:none; user-select:none; flex-shrink:0; transition:background .15s,color .15s; }
.drag-handle:hover { background:var(--bs-primary-bg-subtle); color:var(--bs-primary); }
.drag-handle:active { cursor:grabbing; background:var(--bs-primary-bg-subtle); }

/* Step badge & title */
.hg-step-badge, .cm-step-badge { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; font-weight:700; font-size:.75rem; background:var(--bs-primary); color:#fff; flex-shrink:0; }
.hg-step-title, .cm-step-title { font-weight:600; font-size:.8rem; color:var(--bs-body-color); flex-grow:1; min-width:0; }

/* Card actions */
.hg-card-actions, .cm-card-actions { display:flex; align-items:center; gap:.35rem; flex-shrink:0; }
.hg-card-actions .btn-group .btn, .cm-card-actions .btn-group .btn { padding:.25rem .4rem; font-size:.72rem; line-height:1; }
.hg-card-actions .btn-icon-sm, .cm-card-actions .btn-icon-sm { padding:.25rem .45rem; font-size:.72rem; line-height:1; border-radius:.25rem; }

/* Field grid */
.hg-field-grid { display:grid; grid-template-columns:1fr 1fr auto; gap:.75rem; align-items:start; }
.hg-field-grid .field-full { grid-column:1/-1; }
.cm-field-grid { display:grid; grid-template-columns:1fr 1fr minmax(100px,120px); gap:.75rem 1rem; align-items:end; }
.cm-field-grid .field-desc { grid-column:1/-1; }
.cm-card-header { flex-wrap:wrap; gap:.5rem .65rem; }
.cm-dtmf-chip { font-size:.85rem; font-weight:700; min-width:2.5rem; text-align:center; letter-spacing:.02em; }
.cm-card-title-block { min-width:0; flex:1 1 140px; max-width:100%; }
.cm-card-line1 { font-size:.8rem; line-height:1.3; color:var(--bs-body-color); word-break:break-word; }
.cm-card-line2 { font-size:.72rem; line-height:1.25; margin-top:.12rem; color:var(--bs-secondary-color); word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cm-preview-panel-inner { display:flex; flex-direction:column; gap:0; }
.cm-preview-summary { margin-bottom:.75rem; }
.cm-preview-summary-card { font-size:.72rem; line-height:1.45; padding:.65rem .75rem; border:1px solid var(--bs-border-color-translucent); border-radius:.375rem; background:var(--bs-tertiary-bg); }
.cm-preview-sum-h { font-size:.74rem; font-weight:600; margin-bottom:.45rem; color:var(--bs-body-color); }
.cm-preview-sum-row { display:flex; flex-wrap:wrap; gap:.25rem .5rem; margin-bottom:.28rem; align-items:baseline; }
.cm-preview-sum-row:last-child { margin-bottom:0; }
.cm-preview-sum-k { color:var(--bs-secondary-color); min-width:7.5rem; flex-shrink:0; }
.cm-preview-sum-v { font-weight:500; color:var(--bs-body-color); word-break:break-word; }
.cm-flow-preview-panel .panel-content { padding-top:.85rem!important; }
.cm-preview-node-detail { display:flex; flex-direction:column; gap:.2rem; }
.cm-preview-line { font-size:.73rem; line-height:1.35; color:var(--bs-body-color); word-break:break-word; }
.cm-preview-line:first-child { font-weight:600; color:var(--bs-body-color); }
.ft-body .cm-preview-node-detail { min-width:0; }
.cm-order-pill { font-size:.65rem; font-weight:600; flex-shrink:0; align-self:center; }
.cm-settings-panel .select2-container { width:100%!important; }
.cm-flow-menu-line { font-size:.78rem; line-height:1.45; color:var(--bs-body-color); }
.hg-card .select2-container, .cm-card .select2-container { width:100%!important; }
.hg-card .form-control.is-invalid,
.hg-card .select2-container .select2-selection.is-invalid-s2,
.cm-card .form-control.is-invalid,
.cm-card .select2-container .select2-selection.is-invalid-s2 { border-color:var(--bs-danger)!important; }
.hg-card .form-label, .cm-card .form-label { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--bs-secondary-color); margin-bottom:.3rem; }
.hg-help { font-size:.72rem; color:var(--bs-secondary-color); margin-top:.2rem; line-height:1.3; }
.cm-help { font-size:.72rem; color:var(--bs-secondary-color); margin-top:.2rem; line-height:1.3; }

/* Action bar */
.hg-action-bar, .cm-action-bar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.75rem 1rem; background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-radius:.5rem; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.hg-action-bar .spacer, .cm-action-bar .spacer { flex:1 1 auto; }

/* Call Menu — Menu Options builder (client-custom-ivr-settings.php) */
.cm-menu-options-panel .panel-container { border-radius:0 0 .375rem .375rem; }
.cm-menu-options-hdr { align-items:center!important; min-height:3rem; padding-top:.65rem!important; padding-bottom:.65rem!important; }
.cm-menu-options-title { display:flex; align-items:center; margin:0; font-weight:600; letter-spacing:.01em; }
.cm-menu-options-body { padding:1rem 1.1rem 1.15rem!important; background:linear-gradient(180deg, var(--bs-tertiary-bg) 0%, var(--bs-body-bg) 52%); border-top:1px solid var(--bs-border-color-translucent); }
.cm-option-list { display:flex; flex-direction:column; gap:.85rem; margin-top:.15rem; }
.cm-menu-empty { margin-top:.25rem; border-radius:.375rem; border:1px dashed var(--bs-border-color); background:var(--bs-tertiary-bg); }

/* Option cards — stronger header/body split, cleaner accent (scoped to menu panel) */
.cm-menu-options-panel .cm-option-card { margin-bottom:0; border-left-width:4px; border-color:var(--bs-border-color); border-left-color:var(--bs-primary); border-radius:.4rem; box-shadow:0 2px 10px rgba(0,0,0,.07); overflow:hidden; }
.cm-menu-options-panel .cm-option-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.1); border-color:rgba(var(--bs-primary-rgb), .28); }
.cm-menu-options-panel .cm-option-card-hdr { flex-wrap:nowrap; gap:.6rem .75rem; padding:.55rem 1rem .55rem .75rem; background:linear-gradient(180deg, var(--bs-secondary-bg) 0%, var(--bs-tertiary-bg) 100%); border-bottom:1px solid var(--bs-border-color); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.cm-menu-options-panel .cm-option-card-body { padding:1rem 1rem 1.05rem; background:var(--bs-body-bg); }
.cm-menu-options-panel .cm-option-card .drag-handle { width:34px; height:34px; border:1px solid var(--bs-border-color-translucent); }
.cm-menu-options-panel .cm-option-card .cm-dtmf-chip { min-width:2.65rem; padding:.35rem .45rem; font-size:.8rem; border-radius:.3rem; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.cm-menu-options-panel .cm-option-card .cm-card-title-block { flex:1 1 auto; min-width:0; padding-left:.15rem; }
.cm-menu-options-panel .cm-option-card .cm-card-line1 { font-weight:600; font-size:.82rem; }
.cm-menu-options-panel .cm-option-card .cm-order-pill { align-self:center; opacity:.9; }
/* Action cluster: match Hunt Group — use shared .hg-card-actions/.cm-card-actions rules only; do not set min-height on .btn-icon-sm or the up/down group will look misaligned vs delete/link. */
.cm-menu-options-panel .cm-option-card .cm-card-actions { gap:.35rem; margin-left:auto; align-items:center; flex-shrink:0; }
.cm-menu-options-panel .cm-option-card .cm-card-actions .btn-group { box-shadow:0 1px 2px rgba(0,0,0,.05); border-radius:.25rem; overflow:hidden; }
.cm-menu-options-panel .cm-option-card .cm-card-actions .btn-group .btn { display:inline-flex; align-items:center; justify-content:center; }
.cm-menu-options-panel .cm-prompt-textarea { min-height:4.25rem; line-height:1.45; padding:.5rem .65rem; resize:vertical; }
.cm-menu-options-panel .cm-field-grid { gap:.85rem 1.1rem; padding-top:.1rem; }

/* Call Menu option cards — mobile: 3-row header (handle+DTMF+title | subtitle | actions), desktop unchanged */
@media(max-width:767.98px){
  .cm-menu-options-panel .cm-option-list { gap:1rem; }
  .cm-menu-options-panel .cm-option-card-hdr.cm-card-header {
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "cmhandle cmdtmf cmtitle cmorder"
      "cmsub cmsub cmsub cmsub"
      "cmactions cmactions cmactions cmactions";
    gap:.45rem .4rem;
    row-gap:.5rem;
    align-items:center;
    flex-direction:unset;
    flex-wrap:unset;
    padding:.65rem .75rem;
  }
  .cm-menu-options-panel .cm-option-card-hdr .cm-card-title-block { display:contents; }
  .cm-menu-options-panel .cm-option-card-hdr .drag-handle { grid-area:cmhandle; align-self:center; }
  .cm-menu-options-panel .cm-option-card-hdr .cm-dtmf-chip { grid-area:cmdtmf; align-self:center; }
  .cm-menu-options-panel .cm-option-card-hdr .cm-card-line1 {
    grid-area:cmtitle;
    min-width:0;
    align-self:center;
  }
  .cm-menu-options-panel .cm-option-card-hdr .cm-order-pill { grid-area:cmorder; align-self:center; justify-self:end; }
  .cm-menu-options-panel .cm-option-card-hdr .cm-card-line2 {
    grid-area:cmsub;
    margin-top:0;
    padding:.15rem 0 0;
    align-self:start;
    -webkit-line-clamp:4;
    line-height:1.35;
  }
  .cm-menu-options-panel .cm-option-card-hdr .cm-card-actions {
    grid-area:cmactions;
    justify-self:end;
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-top:0;
    padding-top:.15rem;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:.45rem;
  }
  /* Tap-friendly controls (mobile only) */
  .cm-menu-options-panel .cm-option-card .cm-card-actions .btn-group .btn {
    min-height:2.5rem;
    min-width:2.5rem;
    padding:.4rem .5rem;
    font-size:.8rem;
  }
  .cm-menu-options-panel .cm-option-card .cm-card-actions .btn-icon-sm {
    min-width:2.5rem;
    min-height:2.5rem;
    padding:.45rem .5rem;
    font-size:.85rem;
  }
}

@media(max-width:767.98px){ .hg-field-grid{grid-template-columns:1fr;} .cm-field-grid{grid-template-columns:1fr;} .cm-field-grid .field-desc{grid-column:1;} }

/* ══════════════════════════════════════════════════════════════════
   TBR Schedule-Routing Board (client-time-based-routing-edit.php)
   Full-width card grid that shows routing coverage by schedule.
   ══════════════════════════════════════════════════════════════════ */

.tbr-board-grid { display:flex; flex-wrap:wrap; gap:.875rem; padding:.1rem 0; }

.tbr-rule-card { flex:1 1 230px; min-width:200px; max-width:340px; border:1px solid var(--bs-border-color); border-top:3px solid var(--bs-primary); border-radius:.375rem; padding:.875rem 1rem; background:var(--bs-body-bg); display:flex; flex-direction:column; gap:.5rem; box-shadow:0 1px 3px rgba(0,0,0,.05); transition:box-shadow .15s; }
.tbr-rule-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.10); }
.tbr-rule-card--fallback { border-top-color:var(--bs-warning,#f59e0b); background:rgba(var(--bs-warning-rgb,245,158,11),.06); }
.tbr-rule-card--warning  { border-top-color:var(--bs-danger); background:rgba(var(--bs-danger-rgb,220,53,69),.05); }

.tbr-rule-schedule { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; }

.tbr-schedule-chip { display:inline-flex; align-items:center; font-size:.72rem; font-weight:600; letter-spacing:.01em; background:var(--bs-primary); color:#fff; border-radius:999px; padding:.22em .75em; line-height:1.55; flex-shrink:0; }
.tbr-schedule-chip--tg       { background:var(--bs-info,#0ea5e9); color:#fff; }
.tbr-schedule-chip--fallback { background:var(--bs-warning,#f59e0b); color:#000; }
.tbr-schedule-chip--warn     { background:var(--bs-danger); color:#fff; }

.tbr-schedule-time { font-size:.775rem; color:var(--bs-secondary-color); font-weight:500; line-height:1.4; }

.tbr-rule-dest { font-size:.875rem; font-weight:400; color:var(--bs-body-color); line-height:1.4; display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.tbr-dest-type  { color:var(--bs-secondary-color); font-size:.78rem; flex-shrink:0; line-height:1.3; }
.tbr-dest-arrow { color:var(--bs-primary); font-size:.7rem; flex-shrink:0; }
.tbr-dest-name  { font-weight:600; color:var(--bs-body-color); }
.tbr-rule-dest--warning { color:var(--bs-warning-text,#92400e); font-size:.82rem; }
.tbr-rule-dest--empty   { color:var(--bs-secondary-color); font-size:.8rem; font-style:italic; }

.tbr-rule-note { font-size:.75rem; color:var(--bs-secondary-color); line-height:1.4; border-top:1px solid var(--bs-border-color-translucent); padding-top:.35rem; margin-top:.05rem; }

.tbr-board-empty { text-align:center; padding:2.25rem 1rem; color:var(--bs-secondary-color); font-size:.85rem; width:100%; }
.tbr-board-empty i { display:block; font-size:2rem; margin-bottom:.5rem; opacity:.3; }

@media(max-width:767.98px){ .tbr-rule-card{ flex:1 1 100%; max-width:100%; } }

/* ══════════════════════════════════════════════════════════════════
   TBR Weekly Routing Timeline  (client-time-based-routing-edit.php)
   Day-by-day schedule coverage view.
   ══════════════════════════════════════════════════════════════════ */

/* Outer container */
.tbr-timeline { display:flex; flex-direction:column; gap:0; }

/* One day section */
.tbr-tl-day { padding:.5rem 0 .8rem; border-bottom:1px solid var(--bs-border-color-translucent); }
.tbr-tl-day:last-child { border-bottom:none; padding-bottom:0; }

/* Day header row */
.tbr-tl-day-hdr { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.tbr-tl-day-chip { display:inline-flex; align-items:center; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.1); border:1px solid rgba(var(--bs-primary-rgb),.25); border-radius:4px; padding:.2em .7em; flex-shrink:0; min-width:6.5rem; justify-content:center; }
.tbr-tl-day-empty-note { font-size:.7rem; color:var(--bs-secondary-color); font-style:italic; }

/* Rows container */
.tbr-tl-rows { display:flex; flex-direction:column; gap:.28rem; padding-left:.6rem; }

/* Individual timeline row */
.tbr-tl-row { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; font-size:.8rem; line-height:1.35; padding:.3rem .6rem; border-radius:.25rem; border-left:3px solid var(--bs-primary); background:var(--bs-tertiary-bg,rgba(0,0,0,.02)); min-height:1.9rem; }
.tbr-tl-row--fallback         { border-left-color:var(--bs-warning,#f59e0b); background:rgba(var(--bs-warning-rgb,245,158,11),.07); }
.tbr-tl-row--fallback-missing { border-left-color:var(--bs-danger); background:rgba(var(--bs-danger-rgb,220,53,69),.05); }

/* Time / TG badge */
.tbr-tl-time { display:inline-flex; align-items:center; font-size:.7rem; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; background:var(--bs-body-bg); border:1px solid var(--bs-border-color); color:var(--bs-body-color); padding:.1em .5em; border-radius:3px; flex-shrink:0; }
.tbr-tl-time--fallback         { color:var(--bs-warning-text,#92400e); border-color:var(--bs-warning,#f59e0b); }
.tbr-tl-time--fallback-missing { color:var(--bs-danger); border-color:var(--bs-danger); }

.tbr-tl-tg-badge { display:inline-flex; align-items:center; font-size:.7rem; font-weight:600; background:var(--bs-info,#0ea5e9); color:#fff; border-radius:3px; padding:.12em .55em; flex-shrink:0; }

/* Arrow icons */
.tbr-tl-arrow { color:var(--bs-secondary-color); font-size:.75rem; flex-shrink:0; }
.tbr-tl-sep   { color:var(--bs-secondary-color); font-size:.6rem; flex-shrink:0; opacity:.55; }

/* Destination parts */
.tbr-tl-dest-type { font-size:.72rem; color:var(--bs-secondary-color); flex-shrink:0; }
.tbr-tl-dest-name { font-weight:600; color:var(--bs-body-color); }
.tbr-tl-dest--fallback { color:var(--bs-warning-text,#92400e) !important; }
.tbr-tl-dest--missing  { color:var(--bs-danger); font-style:italic; }

/* Optional description note */
.tbr-tl-note { font-size:.69rem; color:var(--bs-secondary-color); font-style:italic; width:100%; padding-left:.1rem; line-height:1.3; }

/* Empty state */
.tbr-timeline-empty { text-align:center; padding:2.25rem 1rem; color:var(--bs-secondary-color); font-size:.85rem; width:100%; }
.tbr-timeline-empty i { display:block; font-size:2rem; margin-bottom:.5rem; opacity:.3; }

@media(max-width:575.98px) {
    .tbr-tl-day-chip { min-width:auto; }
    .tbr-tl-row { gap:.3rem; }
}

/* ══════════════════════════════════════════════════════════════════
   TBR Weekly Routing Graph  (client-time-based-routing-edit.php)
   Horizontal bar graph: rows = days, columns = 24-hour time scale.
   Muted professional palette; full-day coverage via fallback fill.
   ══════════════════════════════════════════════════════════════════ */

/* Outer scroll wrapper */
.tbr-wg-wrap { width:100%; overflow-x:auto; padding-bottom:.5rem; }

/* Layout rows */
.tbr-wg-header,
.tbr-wg-row   { display:flex; align-items:center; gap:.55rem; margin-bottom:.38rem; }

.tbr-wg-day-col    { width:3rem; min-width:3rem; flex-shrink:0; text-align:right; padding-right:.2rem; }
.tbr-wg-tracks-col { flex:1; min-width:0; position:relative; }

/* Time-scale header */
.tbr-wg-scale  { height:1.3rem; position:relative; }
.tbr-wg-tick   { position:absolute; font-size:.61rem; color:var(--bs-secondary-color); transform:translateX(-50%); white-space:nowrap; line-height:1; }
.tbr-wg-tick:first-child { transform:none; }
.tbr-wg-tick:last-child  { transform:translateX(-100%); }

/* Day label */
.tbr-wg-day-lbl { font-size:.67rem; font-weight:700; color:var(--bs-secondary-color); text-transform:uppercase; letter-spacing:.06em; line-height:1; }
.tbr-wg-row:hover .tbr-wg-day-lbl { color:var(--bs-primary); }

/* Bar track — slightly taller for label readability */
.tbr-wg-bar {
    position:relative; height:2.25rem;
    border:1px solid var(--bs-border-color); border-radius:5px;
    overflow:hidden; background:var(--bs-body-bg);
}
.tbr-wg-row:hover .tbr-wg-bar {
    border-color:rgba(var(--bs-primary-rgb),.35);
    box-shadow:0 0 0 2px rgba(var(--bs-primary-rgb),.05);
}

/* Absolute-fill helper */
.tbr-wg-abs-fill { position:absolute; inset:0; }

/* Fallback / uncovered fill — very soft warm sand + whisper hatch */
.tbr-wg-fallback-bg {
    background-color: rgba(220, 205, 180, 0.22);
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(195, 175, 145, 0.09) 0px,
        rgba(195, 175, 145, 0.09) 3px,
        transparent 3px,
        transparent 10px
    );
}
/* No-fallback — muted caution, not alarmist */
.tbr-wg-nofallback-bg {
    background-color: rgba(200, 120, 120, 0.06);
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(190, 110, 110, 0.08) 0px,
        rgba(190, 110, 110, 0.08) 3px,
        transparent 3px,
        transparent 10px
    );
}

/* Quarter-day gridlines */
.tbr-wg-gridline { position:absolute; top:0; bottom:0; width:1px; background:var(--bs-border-color); opacity:.4; pointer-events:none; z-index:1; }

/* Rule segment blocks — pastel fill from inline bg; structure from border + type */
.tbr-wg-seg {
    position:absolute; top:2px; bottom:2px;
    border-radius:3px; overflow:hidden; cursor:default;
    display:flex; align-items:center; padding:0 .4rem;
    min-width:3px; z-index:2;
    border:1px solid rgba(0,0,0,.1);
    box-shadow:0 1px 2px rgba(0,0,0,.06);
    transition:filter .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tbr-wg-seg:hover {
    filter:brightness(0.97);
    border-color:rgba(0,0,0,.16);
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    z-index:3;
}
.tbr-wg-seg--overnight  { border-style:dashed; border-color:rgba(0,0,0,.12); }
/* Carry-over: the early-morning continuation of an overnight rule on the next day */
.tbr-wg-seg--carryover  { border-style:dashed; border-color:rgba(0,0,0,.10); opacity:.82; }

/* Label inside segment — readable on light pastels */
.tbr-wg-seg-lbl {
    font-size:.62rem; font-weight:600; color:rgba(33,37,41,.88);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    pointer-events:none; user-select:none;
    letter-spacing:.01em;
}

/* Moon icon for overnight segments */
.tbr-wg-overnight-icon {
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    font-size:.56rem; color:rgba(33,37,41,.42); pointer-events:none;
}

/* Time Group rules section */
.tbr-wg-tg-section { margin-top:.55rem; padding:.4rem .6rem; border:1px dashed rgba(var(--bs-secondary-rgb),.22); border-radius:4px; background:var(--bs-tertiary-bg); }
.tbr-wg-tg-title   { font-size:.65rem; font-weight:700; color:var(--bs-secondary-color); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.28rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.tbr-wg-tg-note    { font-size:.63rem; font-weight:400; color:var(--bs-secondary-color); text-transform:none; letter-spacing:0; opacity:.65; }
.tbr-wg-tg-list    { display:flex; flex-wrap:wrap; gap:.28rem; }
.tbr-wg-tg-item    { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; padding:.2em .5em; border-left:3px solid var(--bs-secondary); background:var(--bs-body-bg); border-radius:0 3px 3px 0; cursor:default; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.tbr-wg-tg-name    { font-weight:600; color:var(--bs-body-color); }
.tbr-wg-tg-dest    { color:var(--bs-secondary-color); font-size:.69rem; }

/* Legend */
.tbr-wg-legend      { display:flex; flex-wrap:wrap; gap:.3rem .6rem; margin-top:.55rem; align-items:center; }
.tbr-wg-legend-item { display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; color:var(--bs-secondary-color); }
.tbr-wg-legend-swatch {
    width:11px; height:11px; border-radius:2px; flex-shrink:0;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.tbr-wg-legend-swatch--tg {
    background:#c5dde1;
    border-color:rgba(90,120,130,.2);
}
.tbr-wg-fallback-swatch {
    background-color: rgba(220, 205, 180, 0.55);
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(195, 175, 145, 0.22) 0px,
        rgba(195, 175, 145, 0.22) 2px,
        transparent 2px,
        transparent 6px
    );
    border:1px solid rgba(185, 165, 135, 0.35);
}

/* Empty state */
.tbr-wg-empty { text-align:center; padding:2.25rem 1rem; color:var(--bs-secondary-color); font-size:.85rem; width:100%; }
.tbr-wg-empty i { display:block; font-size:2rem; margin-bottom:.5rem; opacity:.3; }

/* Flatpickr — above BS5 modals (2005) and Select2 (3060) when appended to body */
.flatpickr-calendar {
    z-index: 3150 !important;
    border-radius: var(--bs-border-radius, 0.375rem);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0.35rem 1.1rem rgba(0, 0, 0, 0.12);
    font-family: inherit;
}
.flatpickr-calendar.noCalendar {
    width: auto;
    min-width: 9.5rem;
}
.flatpickr-time {
    border-top: 1px solid var(--bs-border-color-translucent);
    max-height: none;
}
.flatpickr-time .flatpickr-am-pm,
.flatpickr-time input {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-radius: var(--bs-border-radius-sm, 0.25rem);
}
.flatpickr-time input:hover,
.flatpickr-time input:focus {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
}

/* TBR list — column rhythm and metadata styling */
#dt_tbr.dt-tbr-list thead th {
    vertical-align: middle;
    white-space: nowrap;
}
#dt_tbr.dt-tbr-list tbody td {
    vertical-align: middle;
}
#dt_tbr.dt-tbr-list .tbr-list-rules {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.12rem 0.45rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.25rem;
}
#dt_tbr.dt-tbr-list .tbr-list-created {
    display: inline-block;
    font-size: 0.8125rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
}
#dt_tbr.dt-tbr-list .tbr-list-created__date {
    color: var(--bs-body-color);
    font-weight: 500;
}
#dt_tbr.dt-tbr-list .tbr-list-created__time {
    color: var(--bs-secondary-color);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
#dt_tbr.dt-tbr-list .tbr-list-created__sep {
    color: var(--bs-secondary-color);
    opacity: 0.45;
    font-weight: 400;
}
#dt_tbr.dt-tbr-list .tbr-list-created--empty {
    font-size: 0.875rem;
}

/* TBR create modal — paired time fields */
#create_tbr .tbr-modal-time-row .tbr-modal-time-col {
    display: flex;
    flex-direction: column;
}
#create_tbr .tbr-modal-time-row .tbr-time-input.form-control {
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    text-align: center;
    letter-spacing: 0.02em;
    min-height: calc(1.5em + 0.75rem + 2px);
}
#create_tbr .tbr-modal-time-row .tbr-time-input::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.65;
    font-weight: 500;
}

/* TBR time inputs elsewhere (e.g. edit page modals) */
input.tbr-time-input.form-control {
    cursor: pointer;
}

/* Mobile */
@media (max-width:575.98px) {
    .tbr-wg-day-col { width:2.4rem; min-width:2.4rem; }
    .tbr-wg-bar     { height:1.8rem; }
    .tbr-wg-seg-lbl { display:none; }
}

/* =============================================================================
   Admin Clients (config.php?hash=clients) — scoped under .clients-page-panel
   ============================================================================= */

.clients-page-panel .clients-status-chips .clients-status-chip {
    min-height: calc(1.5rem + 0.5rem + 2px);
    padding: 0.35rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.clients-page-panel .clients-status-chips .clients-status-chip .clients-status-count {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.2em 0.5em;
    border-radius: 10rem;
    min-width: 1.35rem;
    text-align: center;
}

.clients-page-panel .panel-hdr .clients-panel-util-btn {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.clients-page-panel .panel-hdr .clients-panel-util-btn:hover {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.12));
    background: var(--bs-tertiary-bg);
}
.clients-page-panel .panel-hdr .clients-panel-util-btn .sa-icon {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

.clients-page-panel .panel-content > .dt-container {
    margin-top: 0.25rem;
}
.clients-page-panel .panel-content .dt-container > .dt-row:first-child {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    align-items: center;
}
.clients-page-panel .panel-content .dt-container div.dt-length select {
    border-radius: 0.375rem;
}
.clients-page-panel .panel-content .dt-container div.dt-search input {
    border-radius: 0.375rem;
    min-width: 12rem;
}

.clients-page-panel #dt_clients.table thead th {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    vertical-align: middle;
    white-space: nowrap;
}
.clients-page-panel #dt_clients.table > :not(caption) > * > * {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.clients-page-panel .dt_clients_agi_cell {
    min-width: 5.5rem;
    vertical-align: middle !important;
}
.clients-page-panel .dt_clients_agi_cell .select2-container {
    width: 100% !important;
    max-width: 100%;
}
.clients-page-panel .dt_clients_agi_cell select.select2-hidden-accessible + .select2-container .select2-selection--single {
    min-height: 31px;
    display: flex;
    align-items: center;
}

.clients-page-panel .dt-clients-actions {
    gap: 0.35rem;
}
.clients-page-panel .dt-clients-actions .btn {
    font-weight: 600;
    border-radius: 0.375rem;
}