/* Agent portal — shared styles.
 * Brand tokens live in each page's inline tailwind.config block (red/yellow/
 * ink/surface/rule/success/danger). This file is for behaviours not easily
 * expressed via Tailwind utilities. */

/* page chrome */
body { font-family: 'Inter', system-ui, sans-serif; background: #F4F4F4; color: #1A1A1A; }
h1, h2, h3, h4 { font-family: 'Inter Tight', Inter, system-ui, sans-serif; letter-spacing: -0.02em; font-weight: 800; }
.tnum { font-variant-numeric: tabular-nums; }
a:focus-visible, button:focus-visible { outline: 3px solid #FFD200; outline-offset: 2px; border-radius: 2px; }

/* mobile drawer */
.mobile-drawer { transform: translateX(-100%); transition: transform .2s ease-out; }
.mobile-drawer.is-open { transform: translateX(0); }

/* sidebar nav active state */
.agent-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 6px; font-size: 14px; color: #525252; }
.agent-nav a:hover { background: #F4F4F4; color: #1A1A1A; }
.agent-nav a.is-active { background: #FCE7E8; color: #DA222A; font-weight: 700; }
.agent-nav a.is-active i[data-lucide] { color: #DA222A; }

/* status badges */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 18px; }
.badge--blue   { background: #E0EAFC; color: #1E3A8A; }
.badge--amber  { background: #FEF3C7; color: #92400E; }
.badge--green  { background: #DCFCE7; color: #15803D; }
.badge--red    { background: #FCE7E8; color: #A8121E; }
.badge--gray   { background: #F4F4F4; color: #525252; }
.badge--purple { background: #F3E8FF; color: #6B21A8; }

/* table common */
table.qx { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
table.qx thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #767676; padding: 10px 14px; background: #F4F4F4; border-bottom: 1px solid #E5E5E5; }
table.qx tbody td { padding: 12px 14px; border-bottom: 1px solid #E5E5E5; vertical-align: top; }
table.qx tbody tr:hover { background: #FAFAFA; cursor: pointer; }

/* form controls (used by rate-card forms) */
.qx-input, .qx-select, .qx-textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid #E5E5E5; border-radius: 6px;
  font-size: 14px; background: white;
}
.qx-input:focus, .qx-select:focus, .qx-textarea:focus { outline: none; border-color: #DA222A; box-shadow: 0 0 0 3px rgba(218,34,42,.1); }
.qx-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: #1A1A1A; }
.qx-hint { font-size: 12px; color: #767676; margin-top: 4px; }

/* alerts */
.alert { padding: 12px 16px; border-radius: 6px; font-size: 14px; margin-bottom: 16px; }
.alert--err  { background: #FCE7E8; border: 1.5px solid #DA222A; color: #A8121E; }
.alert--ok   { background: #DCFCE7; border: 1.5px solid #2E7D32; color: #15803D; }
.alert--warn { background: #FEF3C7; border: 1.5px solid #F59E0B; color: #92400E; }

/* responsive sidebar — hidden on mobile, shown lg+ */
@media (min-width: 1024px) {
  .agent-sidebar { display: flex; }
}