/* ═══════════════════════════════════════════════════════════════
   CAPT Design Tokens — Single Source of Truth
   See: core/docs/theme.md, core/docs/color_theme.md
   ═══════════════════════════════════════════════════════════════

   This file defines all shared CSS custom properties used across
   the platform. App-level CSS files (hospital_dashboard.css,
   rsa_edit.css, order_browser.css, etc.) should reference these
   tokens instead of hard-coding hex values.

   Included by both base.html and base_v2.html via:
       <link rel="stylesheet" href="{% static 'css/theme.css' %}">
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─── Layout ─── */
    --navbar-height: 56px;
    --sidebar-width: 280px;
    --rail-width: 56px;

    /* ─── Brand — Red One Medical ───
       Red is a signature accent, not a theme color.
       Use sparingly: CTA button, active nav indicator,
       sidebar badges, environment badge.
       ROM Red: PANTONE 485 C / #DE2100 */
    --brand-red:          #DE2100;
    --brand-red-dark:     #B21B00;
    --brand-red-deeper:   #8A1500;
    --brand-red-subtle:   rgba(222, 33, 0, 0.08);
    --brand-red-glow:     rgba(222, 33, 0, 0.15);

    /* ─── Brand — ROM Blue Primary ───
       Deep navy used as the dark chrome surface color.
       ROM Blue: PANTONE 2747 C / #070265 */
    --brand-blue:         #070265;
    --brand-blue-light:   #0E0A80;
    --brand-blue-subtle:  rgba(7, 2, 101, 0.12);

    /* ─── Interactive — Indigo ───
       Every clickable, focusable, or selectable element. */
    --accent-primary:        #4f46e5;   /* indigo-600 */
    --accent-primary-hover:  #4338ca;   /* indigo-700 */
    --accent-primary-subtle: #eef2ff;   /* indigo-50  */
    --accent-primary-glow:   rgba(79, 70, 229, 0.38);

    /* ─── Focus ─── */
    --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.15);

    /* ─── Status Colors ───
       Semantic meaning for badges, dots, row accents, charts. */
    --status-draft:       #94a3b8;   /* slate-400  — neutral          */
    --status-submitted:   #3b82f6;   /* blue-500   — submitted        */
    --status-in-progress: #3b82f6;   /* blue-500   — actively worked  */
    --status-pending:     #f59e0b;   /* amber-500  — awaiting action  */
    --status-approved:    #10b981;   /* emerald-500 — approved/done   */
    --status-rejected:    #ef4444;   /* red-500    — rejected/error   */
    --status-on-hold:     #8b5cf6;   /* purple-500 — paused           */
    --status-shipped:     #6366f1;   /* indigo-500 — shipped          */
    --status-backordered: #f97316;   /* orange-500 — backordered      */
    --status-partial:     #8b5cf6;   /* purple-500 — partially shipped*/
    --status-failed:      #ef4444;   /* red-500    — failed/returned  */
    --status-processing:  #f59e0b;   /* amber-500  — processing/unknown*/

    /* ─── Badge Palettes (text + bg for pill-style badges) ─── */
    --status-draft-text:       #64748b;   /* slate-500 */
    --status-draft-bg:         #f1f5f9;   /* slate-100 */
    --status-submitted-text:   #1d4ed8;   /* blue-700 */
    --status-submitted-bg:     #dbeafe;   /* blue-100 */
    --status-pending-text:     #92400e;   /* amber-800 */
    --status-pending-bg:       #fef3c7;   /* amber-100 */
    --status-approved-text:    #065f46;   /* emerald-800 */
    --status-approved-bg:      #d1fae5;   /* emerald-100 */
    --status-rejected-text:    #991b1b;   /* red-800 */
    --status-rejected-bg:      #fee2e2;   /* red-100 */
    --status-on-hold-text:     #5b21b6;   /* violet-800 */
    --status-on-hold-bg:       #ede9fe;   /* violet-100 */
    --status-shipped-text:     #3730a3;   /* indigo-800 */
    --status-shipped-bg:       #e0e7ff;   /* indigo-100 */
    --status-backordered-text: #9a3412;   /* orange-800 */
    --status-backordered-bg:   #ffedd5;   /* orange-100 */
    --status-partial-text:     #5b21b6;   /* violet-800 */
    --status-partial-bg:       #ede9fe;   /* violet-100 */

    /* Order-specific statuses */
    --status-missing-payment-text: #991b1b;
    --status-missing-payment-bg:   #fecaca;
    --status-shipped-paid-text:    #065f46;
    --status-shipped-paid-bg:      #d1fae5;
    --status-processing-text:      #92400e;
    --status-processing-bg:        #fef3c7;
    --status-failed-text:          #991b1b;
    --status-failed-bg:            #fee2e2;

    /* ─── Surfaces — Dark Chrome (navbar + sidebar) ───
       Uses ROM Blue Primary as the dark base instead of slate-900 */
    --sidebar-bg:           #070265;                    /* ROM Blue Primary */
    --sidebar-bg-hover:     rgba(255, 255, 255, 0.08);
    --sidebar-bg-active:    rgba(255, 255, 255, 0.12);
    --sidebar-border:       #12107A;                    /* ROM Blue lightened */
    --sidebar-text:         #B4B4C7;                    /* blue-tinted gray — brightened for ROM Blue bg */
    --sidebar-text-hover:   #E0E0F0;                    /* blue-tinted light */
    --sidebar-text-active:  #ffffff;

    /* ─── Surfaces — Light Content ─── */
    --content-bg:           #f8fafc;   /* gray-50   — page canvas     */
    --card-bg:              #ffffff;   /* white     — cards / panels   */
    --content-bg-active:    #f1f5f9;   /* gray-100  — selected / hover */

    /* ─── Borders ─── */
    --border-structural:    #e2e8f0;   /* slate-200 — between sections */
    --border-subtle:        #f1f5f9;   /* gray-100  — within sections  */

    /* ─── Text ─── */
    --text-primary:         #0f172a;   /* slate-900 — headings, data   */
    --text-body:            #334155;   /* slate-700 — default content  */
    --text-secondary:       #64748b;   /* slate-500 — metadata, labels */
    --text-muted:           #94a3b8;   /* slate-400 — placeholders     */
}

/* ═══════════════════════════════════════════════════════════════
   Item Annotations — Backorder & Comments
   ═══════════════════════════════════════════════════════════════ */

/* CSS tooltip (shared hover/focus — fixed positioning to escape overflow) */
.co-has-tooltip {
    position: relative;
}
.co-has-tooltip::before {
    content: "";
    position: absolute;
    inset: -6px;
}
.co-tooltip-text {
    display: none;
    position: fixed;
    z-index: 9999;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: 6px;
    max-width: 260px;
    width: max-content;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.co-tooltip-text.co-tooltip-visible {
    display: block;
}
.co-tooltip-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 2px;
}

/* Backorder icon (inline — deep orange-red clock with glow) */
.co-backorder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #c2410c;
    background: rgba(234, 88, 12, 0.10);
    border-radius: 4px;
    flex-shrink: 0;
    cursor: default;
    margin-left: 4px;
    box-shadow: 0 0 8px rgba(234, 88, 12, 0.45);
}
.co-backorder-icon svg {
    width: 16px;
    height: 16px;
}

/* Comment icon (inline — purple speech bubble) */
.co-comment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 4px;
    flex-shrink: 0;
    cursor: default;
    margin-left: 4px;
}
.co-comment-icon svg {
    width: 16px;
    height: 16px;
}

/* Icon legend — toggleable (below search bar) */
.co-icon-legend-wrapper {
    margin-top: 6px;
}
.co-icon-legend-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
}
.co-icon-legend-toggle:hover {
    color: var(--text-secondary);
}
.co-icon-legend-toggle > svg:first-child {
    width: 13px;
    height: 13px;
}
.co-icon-legend-chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}
.co-legend-open .co-icon-legend-chevron {
    transform: rotate(180deg);
}
.co-icon-legend-body {
    display: none;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--content-bg-active);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
}
.co-legend-open .co-icon-legend-body {
    display: block;
}
.co-icon-legend-items {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    color: var(--text-secondary);
}
.co-icon-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.co-icon-legend-items .co-backorder-icon,
.co-icon-legend-items .co-comment-icon {
    width: 16px;
    height: 16px;
    margin-left: 0;
}
.co-icon-legend-items .co-backorder-icon svg,
.co-icon-legend-items .co-comment-icon svg {
    width: 12px;
    height: 12px;
}
.co-icon-legend-hint {
    margin: 5px 0 0;
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
}

/* Responsive */
@media (max-width: 639px) {
    .co-tooltip-text {
        max-width: 200px;
        font-size: 11px;
        padding: 6px 8px;
    }
}