/* =====================================================================
   gp-revamp.css — Hybrid design polish layer
   Loads AFTER tokens.css + gp-polish.css. Restyles Bootstrap components
   to the design tokens — a markup-free visual upgrade (no logic/markup
   changes), so it is safe on the live dialer and instantly reversible
   (remove the <link>). Direction: A-base neutrals, B forest chrome,
   tasteful + conservative.
   ===================================================================== */

/* ---- Typography rhythm -------------------------------------------- */
body { color: var(--gp-text); }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5 { font-family: var(--gp-font-head); font-weight: var(--gp-fw-head); letter-spacing: -.01em; }

/* ---- Buttons: single weight, token-driven, smooth ------------------ */
.btn { border-radius: var(--gp-radius-sm); font-weight: 600; transition: var(--gp-transition); }
.btn:focus-visible { box-shadow: var(--gp-ring); }
.btn-primary { background-color: var(--gp-green); border-color: var(--gp-green); }
.btn-primary:hover,.btn-primary:focus { background-color: var(--gp-green-hover); border-color: var(--gp-green-hover); }
.btn-success { background-color: var(--gp-success); border-color: var(--gp-success); }
.btn-danger  { background-color: var(--gp-danger);  border-color: var(--gp-danger); }
.btn-warning { background-color: var(--gp-warning); border-color: var(--gp-warning); color:#fff; }
.btn-info    { background-color: var(--gp-info);    border-color: var(--gp-info); color:#fff; }
.btn-outline-secondary { color: var(--gp-text); border-color: var(--gp-border); }
.btn-outline-secondary:hover { background: var(--gp-surface-2); color: var(--gp-text); border-color: var(--gp-muted-2); }
.btn-sm { border-radius: calc(var(--gp-radius-sm) - 1px); }

/* ---- Cards: flat, 1px border, soft shadow, consistent radius ------- */
.card { border: 1px solid var(--gp-border); border-radius: var(--gp-radius); box-shadow: var(--gp-shadow-sm); }
.card-header { background: var(--gp-surface); border-bottom: 1px solid var(--gp-border); font-weight: 600; }
.card-header:first-child { border-radius: var(--gp-radius) var(--gp-radius) 0 0; }

/* ---- Badges → pills (still color-coded, but rounder + readable) ---- */
.badge { border-radius: 999px; font-weight: 600; padding: .38em .72em; letter-spacing: .01em; }

/* ---- Tables: uppercase muted headers, quiet hover, sticky head ----- */
.table > thead th,
.table thead th { text-transform: uppercase; font-size: var(--gp-fs-xs); letter-spacing: .04em;
  color: var(--gp-muted); font-weight: 600; border-bottom: 1px solid var(--gp-border); }
.table tbody tr { transition: background var(--gp-transition); }
.table-hover tbody tr:hover { background: var(--gp-surface-2); }
.table td, .table th { vertical-align: middle; }

/* ---- Forms: token radius + green focus ring ------------------------ */
.form-control, .form-select { border-radius: var(--gp-radius-sm); border-color: var(--gp-border); transition: var(--gp-transition); }
.form-control:focus, .form-select:focus { border-color: var(--gp-green); box-shadow: var(--gp-ring); }
.input-group-text { background: var(--gp-surface-2); border-color: var(--gp-border); }

/* ---- Modals: clean, layered, sane stacking ------------------------- */
.modal-content { border: none; border-radius: var(--gp-radius-lg); box-shadow: var(--gp-shadow-lg); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--gp-border); }
.modal-footer { border-top: 1px solid var(--gp-border); }
.modal-backdrop.show { opacity: .5; }

/* ---- Global focus visibility (a11y) -------------------------------- */
:focus-visible { outline: 2px solid var(--gp-green); outline-offset: 2px; }

/* ---- Status pill utility (icon + text + tonal bg) — for adoption --- */
.gp-pill { display: inline-flex; align-items: center; gap: .4em; border-radius: 999px;
  padding: .3em .72em; font-size: var(--gp-fs-xs); font-weight: 600; line-height: 1; }
.gp-pill .bi { font-size: .9em; }
.gp-pill-live    { background: var(--gp-success-50); color: var(--gp-success-700); }
.gp-pill-ringing { background: var(--gp-warning-50); color: var(--gp-warning-700); }
.gp-pill-paused  { background: rgba(122,92,255,.12); color: #5b3fd1; }
.gp-pill-failed  { background: var(--gp-danger-50);  color: var(--gp-danger-700); }
.gp-pill-idle    { background: var(--gp-surface-2);  color: var(--gp-muted); }

/* ---- Misc polish --------------------------------------------------- */
.alert { border-radius: var(--gp-radius); border: 1px solid transparent; }
.dropdown-menu { border: 1px solid var(--gp-border); border-radius: var(--gp-radius); box-shadow: var(--gp-shadow); }
.page-link { color: var(--gp-green); }
.page-item.active .page-link { background: var(--gp-green); border-color: var(--gp-green); }
hr { border-color: var(--gp-border); opacity: 1; }

/* ---- Call-timer duration escalation (wired in dialer _scripts.blade.php) ---- */
#call-duration-display { transition: background-color var(--gp-transition); }
#call-duration-display.gp-dur-warn { background-color: var(--gp-warning) !important; color: #fff !important; }
#call-duration-display.gp-dur-crit { background-color: var(--gp-danger) !important; color: #fff !important;
  animation: gp-dur-pulse 1.1s ease-in-out infinite; }
@keyframes gp-dur-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(217,45,32,.45); }
  50%     { box-shadow: 0 0 0 6px rgba(217,45,32,0); }
}