/* ============================================================
   GLOBAL — variables, resets, typography
   Loaded on every page via _Layout.cshtml
   ============================================================ */

:root {
    --color-primary:       #2563eb;
    --color-primary-dk:    #1d4ed8;
    --color-primary-muted: #e8f0fe;
    --color-success:       #16a34a;
    --color-danger:     #dc2626;
    --color-warning:    #d97706;
    --color-muted:      #6b7280;
    --color-border:     #e5e7eb;
    --color-bg:         #f9fafb;
    --color-surface:    #ffffff;
    --color-text:       #111827;
    --color-text-light: #374151;

    --radius:    6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --shadow-sm: 0 2px 6px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
    --shadow:    0 2px 8px rgba(0,0,0,.12);

    --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'Consolas', 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 15px; position: relative; min-height: 100%; }

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    margin: 0;
    margin-bottom: 60px;
}

h1, h2, h3, h4 { font-weight: 600; color: var(--color-text); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.navbar-brand:hover { text-decoration: none; }

/* Focus ring — overrides Bootstrap default */
.btn:focus, .btn:active:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--color-focus-ring), 0 0 0 0.25rem var(--color-primary);
}

/* Utility */
.text-muted   { color: var(--color-muted)   !important; }
.text-success { color: var(--color-success)  !important; }
.text-danger  { color: var(--color-danger)   !important; }
.text-warning { color: var(--color-warning)  !important; }
.text-mono    { font-family: var(--font-mono); }

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--color-border);
}

/* Form floating placeholder fix (Bootstrap) */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

/* Hide empty validation summary bars — ASP.NET sets .validation-summary-valid when there are no errors;
   without this, any .alert-danger wrapping renders as a blank red box on GET. */
.validation-summary-valid.alert-danger { display: none !important; }

/* ── Metrics Customizer ────────────────────────────────────────────── */

.mc-wrapper { position: relative; }

.mc-btn {
    position: absolute;
    top: 0.35rem;
    right: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--color-muted);
    opacity: 0;
    transition: opacity .15s, background .15s;
    cursor: pointer;
    z-index: 10;
    padding: 0;
}

.mc-wrapper:hover .mc-btn,
.mc-btn.active,
.mc-btn:focus-visible { opacity: 1; }

.mc-btn:hover,
.mc-btn.active {
    background: var(--color-border);
    border-color: var(--color-border);
    color: var(--color-text);
}

.stat-card.mc-hidden { display: none; }

.mc-editing .stat-card.mc-hidden {
    display: flex;
    opacity: 0.35;
    overflow: hidden;
}

.mc-editing .stat-card {
    cursor: grab;
    outline: 1px dashed var(--color-border);
    position: relative;
}

/* Pin button is hidden in edit mode — layout and pinning are separate intents. */
.mc-editing .tile-pin { display: none; }

.stat-card.mc-dragging  { opacity: 0.4; cursor: grabbing; }

.stat-card.mc-dragover {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.mc-grip {
    position: absolute;
    top: 3px;
    left: 4px;
    font-size: .85rem;
    color: var(--color-muted);
    cursor: grab;
    user-select: none;
    line-height: 1;
}

.mc-toggle {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 50%;
    font-size: .75rem;
    line-height: 1;
    color: var(--color-muted);
    cursor: pointer;
    padding: 0;
    transition: background .1s, color .1s;
}

.mc-toggle:hover {
    background: rgba(0,0,0,.06);
    color: var(--color-danger);
    border-color: var(--color-border);
}

/* Remove-from-bar button — bottom-right corner, always danger-coloured to signal destructive intent.
   Distinct from the hide toggle (top-right) which keeps the tile in the layout at 0 visibility. */
.mc-remove-btn {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 50%;
    font-size: .9rem;
    line-height: 1;
    color: var(--color-danger);
    cursor: pointer;
    padding: 0;
    opacity: .5;
    transition: background .1s, border-color .1s, opacity .1s;
}
.mc-remove-btn:hover {
    background: rgba(220,53,69,.1);
    border-color: var(--color-danger);
    opacity: 1;
}

.mc-action-link {
    display: inline-block;
    margin-top: 0.4rem;
    margin-right: 0.75rem;
    font-size: .78rem;
    color: var(--color-primary);
    text-decoration: none;
    opacity: 0.85;
}
.mc-action-link:hover { opacity: 1; text-decoration: underline; }
.mc-action-link--secondary { color: var(--color-muted); }

/* Empty InsightBar — always visible so the gear can be discovered; styled subtly */
.mc-bar-empty {
    min-height: 44px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    align-items: center;
    padding: 0.5rem 1rem;
}

.mc-bar-empty-hint {
    color: var(--color-muted);
    font-size: .78rem;
    font-style: italic;
    opacity: 0.7;
    pointer-events: none;
}

.mc-editing.mc-bar-empty {
    border-color: var(--color-primary);
    border-style: dashed;
    background: rgba(37, 99, 235, 0.03);
}

/* ── Attachment link card (_AttachmentLink.cshtml) ────────────────────────── */
/* Shared across Bulletin, Conversation, and Reminder contexts. */
.att-link-card {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .45rem .75rem;
    margin-top: .5rem;
    background: var(--color-bg);
    font-size: .82rem;
    color: var(--color-text);
}
.att-link-anchor {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: .5rem;
    color: inherit;
    text-decoration: none;
}
.att-link-anchor:hover { color: var(--color-primary); }
.att-link-icon { font-size: .9rem; flex-shrink: 0; color: var(--color-muted); }
.att-link-body { display: flex; flex-direction: column; min-width: 0; }
.att-link-type  { font-size: .72rem; color: var(--color-muted); line-height: 1.2; }
.att-link-caption { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-link-arrow { flex-shrink: 0; color: var(--color-muted); font-size: .82rem; }
.att-link-preview {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0 .25rem;
    color: var(--color-muted);
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
}
.att-link-preview:hover { color: var(--color-primary); }

/* In message bubbles the bubble width is driven by the text content; a short message
   would compress the attachment card below a readable threshold without this floor. */
.msg-bubble .att-link-card { width: 16rem; max-width: 100%; }

/* Attachment cards inside "mine" bubbles use a semi-transparent dark overlay so the card
   adapts to the blue bubble background in any theme. */
.msg-mine .att-link-card {
    background: rgba(0,0,0,.2);
    border-color: rgba(255,255,255,.2);
    color: #fff;
}
.msg-mine .att-link-card .att-link-type,
.msg-mine .att-link-card .att-link-icon,
.msg-mine .att-link-card .att-link-arrow,
.msg-mine .att-link-card .att-link-preview { color: rgba(255,255,255,.8); }
.msg-mine .att-link-card .att-link-anchor:hover,
.msg-mine .att-link-card .att-link-preview:hover { color: #fff; }
.msg-theirs .att-link-card { background: rgba(0,0,0,.05); }

/* Attach toggle (Conversation reply form) */
.attach-toggle-btn {
    background: none;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-muted);
    font-size: .8rem;
    padding: .25rem .6rem;
    cursor: pointer;
    margin-bottom: .5rem;
}
.attach-toggle-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* ── New semantic variables (light mode values) ──────────────────────── */
:root {
    --color-surface-alt:      #f3f4f6;
    --color-hover:            #f0f4ff;
    --color-focus-ring:       white;
    --color-primary-border:   #93c5fd;
    --color-success-muted:    #f0fdf4;
    --color-success-border:   #bbf7d0;
    --color-danger-muted:     #fee2e2;
    --color-warning-muted:    #fef9c3;
    --color-urgent:           #f97316;
    --color-indent-line:      #e9ecef;
    --color-profit-pos:       #15803d;
    --color-profit-neg:       #dc2626;
    --color-delta-up-bg:      #d1fae5;
    --color-delta-up-text:    #065f46;
    --color-delta-down-bg:    #fee2e2;
    --color-delta-down-text:  #991b1b;

    /* Status badges */
    --badge-unlisted-bg:      #e5e7eb;  --badge-unlisted-text:     #374151;
    --badge-listed-bg:        #dbeafe;  --badge-listed-text:       #1d4ed8;
    --badge-sold-bg:          #dcfce7;  --badge-sold-text:         #15803d;
    --badge-ebay-bg:          #fef3c7;  --badge-ebay-text:         #92400e;
    --badge-resale-bg:        #ede9fe;  --badge-resale-text:       #5b21b6;

    /* Ticket status badges */
    --badge-tk-new-bg:        #dbeafe;  --badge-tk-new-text:       #1e40af;  --badge-tk-new-border:      #93c5fd;
    --badge-tk-inprog-bg:     #fef9c3;  --badge-tk-inprog-text:    #854d0e;  --badge-tk-inprog-border:   #fde047;
    --badge-tk-review-bg:     #ede9fe;  --badge-tk-review-text:    #5b21b6;  --badge-tk-review-border:   #c4b5fd;
    --badge-tk-resolved-bg:   #dcfce7;  --badge-tk-resolved-text:  #166534;  --badge-tk-resolved-border: #86efac;
    --badge-tk-closed-bg:     #f3f4f6;  --badge-tk-closed-text:    #374151;  --badge-tk-closed-border:   #d1d5db;
    --badge-tk-wontfix-bg:    #fee2e2;  --badge-tk-wontfix-text:   #991b1b;  --badge-tk-wontfix-border:  #fca5a5;

    /* Ticket priority badges */
    --badge-pri-low-bg:       #f0fdf4;  --badge-pri-low-text:      #15803d;  --badge-pri-low-border:     #bbf7d0;
    --badge-pri-med-bg:       #fefce8;  --badge-pri-med-text:      #a16207;  --badge-pri-med-border:     #fde68a;
    --badge-pri-high-bg:      #fff7ed;  --badge-pri-high-text:     #c2410c;  --badge-pri-high-border:    #fdba74;
    --badge-pri-crit-bg:      #fef2f2;  --badge-pri-crit-text:     #b91c1c;  --badge-pri-crit-border:    #fca5a5;

    /* Calendar chips */
    --cal-chip-bg:            #dbeafe;  --cal-chip-text:           #1e40af;
    --cal-chip-overdue-bg:    #fee2e2;  --cal-chip-overdue-text:   #b91c1c;
    --cal-chip-urgent-bg:     #ffedd5;  --cal-chip-urgent-text:    #c2410c;
    --cal-chip-global-bg:     #fef9c3;  --cal-chip-global-text:    #854d0e;
    --cal-grid-gap:           #dde3ed;

    /* Bulletin semantic */
    --badge-pin-bg:           #fff3cd;  --badge-pin-text:          #856404;  --badge-pin-border:         #ffc107;
    --badge-admin-bg:         #e9d8fd;  --badge-admin-text:        #5a21b0;  --badge-admin-border:       #c084fc;
    --color-pinned-bg:        #fffdf4;
    --color-admin-only-bg:    #f8f5ff;

    /* Entity picker additional tokens */
    --ep-chip-border:         #93c5fd;
    --ep-bg-selected-hover:   #bfdbfe;
    --ep-icon-bg:             #f3f4f6;
    --ep-count-bg:            #e5e7eb;
    --ep-bg-alt:              #f9fafb;
}

/* ── Tip box ──────────────────────────────────────────────────────────── */
.tip-box {
    background: var(--color-primary-muted);
    border-left: 4px solid var(--color-primary);
    padding: .6rem 1rem;
    border-radius: 0 .375rem .375rem 0;
    margin: .75rem 0;
    font-size: .9rem;
}

/* ── Dark mode overrides ─────────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --color-bg:               #0f172a;
    --color-surface:          #1e293b;
    --color-surface-alt:      #273549;
    --color-text:             #f1f5f9;
    --color-text-light:       #cbd5e1;
    --color-muted:            #94a3b8;
    --color-border:           #334155;
    --color-primary:          #60a5fa;
    --color-primary-dk:       #3b82f6;
    --color-primary-muted:    #1e3a5f;
    --color-primary-border:   #1e40af;
    --color-success:          #4ade80;
    --color-success-muted:    #052e16;
    --color-success-border:   #166534;
    --color-danger:           #f87171;
    --color-danger-muted:     #450a0a;
    --color-warning:          #fbbf24;
    --color-warning-muted:    #2d1b00;
    --color-hover:            #1e3a5f;
    --color-focus-ring:       #1e293b;
    --color-urgent:           #fb923c;
    --color-indent-line:      #334155;
    --color-profit-pos:       #4ade80;
    --color-profit-neg:       #f87171;
    --color-delta-up-bg:      #052e16;
    --color-delta-up-text:    #4ade80;
    --color-delta-down-bg:    #450a0a;
    --color-delta-down-text:  #f87171;
    --shadow-sm:              0 2px 6px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.2);
    --shadow:                 0 2px 8px rgba(0,0,0,.5);

    /* Status badges */
    --badge-unlisted-bg:      #1f2937;  --badge-unlisted-text:     #9ca3af;
    --badge-listed-bg:        #1e3a5f;  --badge-listed-text:       #93c5fd;
    --badge-sold-bg:          #052e16;  --badge-sold-text:         #4ade80;
    --badge-ebay-bg:          #2d1b00;  --badge-ebay-text:         #fbbf24;
    --badge-resale-bg:        #2e1065;  --badge-resale-text:       #c4b5fd;

    /* Ticket status badges */
    --badge-tk-new-bg:        #0c1a3a;  --badge-tk-new-text:       #93c5fd;  --badge-tk-new-border:      #1e40af;
    --badge-tk-inprog-bg:     #2d1b00;  --badge-tk-inprog-text:    #fde68a;  --badge-tk-inprog-border:   #d97706;
    --badge-tk-review-bg:     #1a0633;  --badge-tk-review-text:    #c4b5fd;  --badge-tk-review-border:   #7c3aed;
    --badge-tk-resolved-bg:   #052e16;  --badge-tk-resolved-text:  #4ade80;  --badge-tk-resolved-border: #16a34a;
    --badge-tk-closed-bg:     #1f2937;  --badge-tk-closed-text:    #9ca3af;  --badge-tk-closed-border:   #4b5563;
    --badge-tk-wontfix-bg:    #450a0a;  --badge-tk-wontfix-text:   #fca5a5;  --badge-tk-wontfix-border:  #b91c1c;

    /* Ticket priority badges */
    --badge-pri-low-bg:       #052e16;  --badge-pri-low-text:      #4ade80;  --badge-pri-low-border:     #166534;
    --badge-pri-med-bg:       #2d1b00;  --badge-pri-med-text:      #fbbf24;  --badge-pri-med-border:     #92400e;
    --badge-pri-high-bg:      #431407;  --badge-pri-high-text:     #fb923c;  --badge-pri-high-border:    #c2410c;
    --badge-pri-crit-bg:      #450a0a;  --badge-pri-crit-text:     #fca5a5;  --badge-pri-crit-border:    #b91c1c;

    /* Calendar chips */
    --cal-chip-bg:            #1e3a5f;  --cal-chip-text:           #93c5fd;
    --cal-chip-overdue-bg:    #450a0a;  --cal-chip-overdue-text:   #fca5a5;
    --cal-chip-urgent-bg:     #431407;  --cal-chip-urgent-text:    #fb923c;
    --cal-chip-global-bg:     #2d1b00;  --cal-chip-global-text:    #fbbf24;
    --cal-grid-gap:           #0f172a;

    /* Bulletin semantic */
    --badge-pin-bg:           #2d1b00;  --badge-pin-text:          #fbbf24;  --badge-pin-border:         #d97706;
    --badge-admin-bg:         #2e1065;  --badge-admin-text:        #c4b5fd;  --badge-admin-border:       #7c3aed;
    --color-pinned-bg:        #1f1900;
    --color-admin-only-bg:    #1a0a2e;

    /* Entity picker */
    --ep-chip-border:         #1e40af;
    --ep-bg-selected-hover:   #1d3461;
    --ep-icon-bg:             #273549;
    --ep-count-bg:            #334155;
    --ep-bg-alt:              #273549;
}