/* ── Usage Page (Enterprise) ──────────────────────────────────────────────── */

/* Page header */
.u-page-hdr   { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.75rem; gap:1rem; }
.u-page-title { font-family:var(--font-heading); font-size:1.5rem; font-weight:700; color:var(--color-text); margin-bottom:4px; }
.u-page-sub   { font-size:14px; color:var(--color-text-light); }

.u-live-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--color-success); background:#ECFDF5; border:1px solid #A7F3D0; border-radius:999px; padding:5px 13px; white-space:nowrap; flex-shrink:0; margin-top:4px; }
.u-live-dot   { width:7px; height:7px; border-radius:50%; background:currentColor; animation:u-pulse 2s ease-in-out infinite; }
@keyframes u-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* KPI strip */
.u-kpi-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.25rem; }
.u-kpi-card  { display:flex; align-items:center; gap:1.125rem; padding:1.25rem 1.5rem; }
.u-kpi-icon  { width:46px; height:46px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.u-kpi-icon--blue  { background:#EFF6FF; color:var(--color-primary); }
.u-kpi-icon--green { background:#ECFDF5; color:var(--color-success); }
.u-kpi-icon--amber { background:#FFFBEB; color:var(--color-warning); }
.u-kpi-icon--red   { background:#FEF2F2; color:var(--color-error); }
.u-kpi-value         { font-family:var(--font-heading); font-size:1.875rem; font-weight:700; line-height:1; margin-bottom:5px; color:var(--color-text); }
.u-kpi-value--success{ color:var(--color-success); }
.u-kpi-value--warn   { color:var(--color-warning); }
.u-kpi-value--error  { color:var(--color-error); }
.u-kpi-label { font-size:13px; font-weight:600; color:var(--color-text); margin-bottom:2px; }
.u-kpi-sub   { font-size:12px; color:var(--color-text-light); }

/* Credits utilization */
.u-credits-card { padding:1.25rem 1.5rem; margin-bottom:1.5rem; }
.u-credits-hdr  { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem; flex-wrap:wrap; gap:0.5rem; }
.u-credits-title{ font-size:13px; font-weight:600; color:var(--color-text); margin-right:0.5rem; }
.u-credits-pct  { font-size:12px; color:var(--color-text-light); }
.u-credits-legend { display:inline-flex; align-items:center; font-size:12px; color:var(--color-text-light); }
.u-credits-dot    { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; vertical-align:middle; }
.u-credits-track { height:8px; background:var(--color-border); border-radius:999px; overflow:hidden; }
.u-credits-fill  { height:100%; border-radius:999px; transition:width .6s ease; }

/* Section cards */
.u-section     { padding:0; overflow:hidden; margin-bottom:1.5rem; }
.u-section-hdr { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; padding:1.125rem 1.5rem; border-bottom:1px solid var(--color-border); }
.u-section-hdr-left  { display:flex; align-items:center; gap:0.875rem; min-width:0; }
.u-section-hdr-right { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }
.u-section-hdr-icon  { width:36px; height:36px; border-radius:var(--radius-sm); background:#EFF6FF; color:var(--color-primary); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.u-section-title { font-family:var(--font-heading); font-size:15px; font-weight:700; color:var(--color-text); margin-bottom:2px; }
.u-section-sub   { font-size:12px; color:var(--color-text-light); margin:0; }
.u-section-body  { padding:1.5rem; }

/* Key pill & selector */
.u-key-select { font-size:13px; padding:6px 10px; min-width:200px; }
.u-key-pill   { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--color-text-mid); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:6px 12px; }
.u-key-pill-badge           { font-size:11px; font-weight:600; padding:2px 7px; border-radius:999px; }
.u-key-pill-badge--active   { background:#ECFDF5; color:#059669; }
.u-key-pill-badge--revoked  { background:#F1F5F9; color:var(--color-text-light); }

/* Empty states */
.u-empty-state { padding:3.5rem 2rem; text-align:center; }
.u-empty-icon  { font-size:2.25rem; color:var(--color-text-light); opacity:.3; margin-bottom:0.875rem; }
.u-empty-title { font-weight:700; font-size:15px; color:var(--color-text); margin-bottom:0.375rem; }
.u-empty-sub   { font-size:13px; color:var(--color-text-light); }
.u-link { color:var(--color-primary); }
.u-link:hover { text-decoration:underline; }

/* Notice banner */
.u-notice       { display:flex; align-items:flex-start; gap:0.625rem; font-size:13px; padding:1rem 1.25rem; border-radius:var(--radius-md); line-height:1.5; }
.u-notice--info { background:#F0F9FF; color:#0369A1; border:1px solid #BAE6FD; }

/* Token stat tiles row */
.u-token-tiles     { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--color-border); border-bottom:1px solid var(--color-border); }
.u-token-tile      { background:#fff; padding:1.375rem 1.5rem; text-align:center; }
.u-token-tile-value{ display:block; font-family:var(--font-heading); font-size:2rem; font-weight:700; line-height:1; margin-bottom:7px; color:var(--color-text); }
.u-token-tile-label{ display:block; font-size:11px; font-weight:600; color:var(--color-text-light); text-transform:uppercase; letter-spacing:.06em; }
.u-token-tile-mono { display:block; font-family:var(--font-mono); font-size:12px; color:var(--color-text-mid); word-break:break-all; margin-bottom:7px; }
.u-token-tile--warn    .u-token-tile-value { color:var(--color-warning); }
.u-token-tile--success .u-token-tile-value { color:var(--color-success); }
.u-token-tile--neutral .u-token-tile-value { color:var(--color-text-mid); }

/* Sub-sections */
.u-subsection      { padding:1.25rem 1.5rem 0; }
.u-subsection--last{ padding-bottom:1.5rem; }
.u-subsection-hdr  { display:flex; align-items:center; gap:0.5rem; font-size:13px; font-weight:600; color:var(--color-text); margin-bottom:1rem; }
.u-subsection-hdr i{ color:var(--color-primary); }
.u-subsection-count{ margin-left:auto; font-size:12px; font-weight:400; color:var(--color-text-light); background:var(--color-surface); border:1px solid var(--color-border); border-radius:999px; padding:2px 10px; }

/* Endpoint bar chart */
.u-ep-grid    { display:flex; flex-direction:column; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; margin-bottom:0.25rem; }
.u-ep-row     { display:grid; grid-template-columns:1fr 2fr 72px 72px; align-items:center; gap:1rem; padding:0.7rem 1rem; border-bottom:1px solid var(--color-border); }
.u-ep-row:last-child { border-bottom:none; }
.u-ep-row--hdr{ background:var(--color-surface); font-size:11px; font-weight:600; color:var(--color-text-light); text-transform:uppercase; letter-spacing:.05em; padding:0.5rem 1rem; }
.u-ep-name    { font-family:var(--font-mono); font-size:12px; color:var(--color-text-mid); }
.u-ep-bar-col { display:flex; }
.u-bar-wrap   { display:flex; align-items:center; gap:0.5rem; flex:1; }
.u-bar-track  { flex:1; height:6px; background:var(--color-border); border-radius:999px; overflow:hidden; }
.u-bar-fill   { height:100%; background:var(--color-primary); border-radius:999px; opacity:.75; transition:width .4s ease; }
.u-bar-pct    { font-size:11px; color:var(--color-text-light); width:32px; text-align:right; flex-shrink:0; }
.u-ta-right   { text-align:right; }
.u-num        { font-family:var(--font-mono); font-size:12px; color:var(--color-text-mid); }

/* Shared table */
.u-table        { width:100%; border-collapse:collapse; }
.u-table thead tr { background:var(--color-surface); }
.u-table th     { padding:9px 16px; text-align:left; font-size:11px; font-weight:600; color:var(--color-text-light); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--color-border); white-space:nowrap; }
.u-table td     { padding:13px 16px; border-bottom:1px solid var(--color-border); font-size:13px; vertical-align:middle; }
.u-table tbody tr:last-child td { border-bottom:none; }
.u-table tbody tr:hover { background:var(--color-surface); }
.u-time         { font-size:12px; color:var(--color-text-light); }
.u-mono         { font-family:var(--font-mono); font-size:12px; color:var(--color-text-mid); }
.u-req-id       { font-family:var(--font-mono); font-size:11px; color:var(--color-text-mid); letter-spacing:.02em; }

/* Table empty */
.u-table-empty  { display:flex; align-items:center; gap:0.625rem; padding:1.5rem 0 1.25rem; font-size:13px; color:var(--color-text-light); }
.u-table-empty i{ font-size:1rem; opacity:.5; }

/* Status badges */
.u-badge          { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; letter-spacing:.02em; }
.u-badge--success { background:#ECFDF5; color:#059669; }
.u-badge--error   { background:#FEF2F2; color:#DC2626; }
.u-badge--warn    { background:#FFFBEB; color:#D97706; }
.u-badge--neutral { background:#F1F5F9; color:var(--color-text-mid); }

/* Response time bar */
.u-rt       { display:inline-flex; align-items:center; gap:8px; }
.u-rt-bar   { width:52px; height:4px; background:var(--color-border); border-radius:999px; overflow:hidden; flex-shrink:0; }
.u-rt-fill  { height:100%; border-radius:999px; }
.u-rt--fast .u-rt-fill { background:var(--color-success); }
.u-rt--mid  .u-rt-fill { background:var(--color-warning); }
.u-rt--slow .u-rt-fill { background:var(--color-error); }
.u-rt-val   { font-family:var(--font-mono); font-size:12px; font-weight:500; }
.u-rt--fast .u-rt-val { color:var(--color-success); }
.u-rt--mid  .u-rt-val { color:var(--color-warning); }
.u-rt--slow .u-rt-val { color:var(--color-error); }
.u-rt-unit  { font-size:11px; color:var(--color-text-light); font-weight:400; }

/* Search toolbar */
.u-toolbar        { display:flex; align-items:center; gap:1rem; padding:0.875rem 1.5rem; border-bottom:1px solid var(--color-border); flex-wrap:wrap; background:var(--color-surface); }
.u-toolbar-search { position:relative; flex:1; max-width:320px; min-width:160px; }
.u-toolbar-icon   { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--color-text-light); font-size:13px; pointer-events:none; }
.u-search-input   { width:100%; padding:7px 32px 7px 30px; border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:13px; background:var(--color-white); color:var(--color-text); outline:none; font-family:var(--font-body); }
.u-search-input:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.u-search-input::placeholder { color:var(--color-text-light); }
.u-clear-btn      { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--color-text-light); padding:3px 5px; font-size:12px; border-radius:4px; }
.u-clear-btn:hover{ color:var(--color-text); background:var(--color-border); }
.u-result-count   { font-size:13px; color:var(--color-text-light); white-space:nowrap; }

/* Pagination */
.u-pagination    { display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:1rem 1.5rem; border-top:1px solid var(--color-border); flex-wrap:wrap; }
.u-page-pills    { display:flex; align-items:center; gap:3px; }
.u-page-pill     { min-width:34px; height:34px; padding:0 6px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-white); font-size:13px; color:var(--color-text-mid); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all .15s; font-family:var(--font-body); }
.u-page-pill:hover { border-color:var(--color-primary); color:var(--color-primary); background:#EFF6FF; }
.u-page-pill--active { background:var(--color-primary); border-color:var(--color-primary); color:#fff; font-weight:600; }
.u-page-ellipsis { font-size:13px; color:var(--color-text-light); padding:0 4px; user-select:none; }