@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* ── Design tokens ───────────────────────────────────────────────────── */
:root {
    --awe-primary:     #2563eb;
    --awe-primary-dk:  #1d4ed8;
    --awe-bg:          #f0f4f8;
    --awe-surface:     #ffffff;
    --awe-border:      #e2e8f0;
    --awe-text:        #1a202c;
    --awe-muted:       #718096;
    --awe-radius:      6px;
    --awe-shadow:      0 1px 3px 0 rgba(0,0,0,.08), 0 1px 2px -1px rgba(0,0,0,.05);
}

/* ── Base ────────────────────────────────────────────────────────────── */
html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter',
                 Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    color: var(--awe-text);
    background: var(--awe-bg);
}

h1:focus { outline: none; }

/* ── Links ───────────────────────────────────────────────────────────── */
a, .btn-link { color: var(--awe-primary); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--awe-primary);
    border-color:     var(--awe-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--awe-primary-dk);
    border-color:     var(--awe-primary-dk);
}
.btn-outline-secondary {
    color:        var(--awe-muted);
    border-color: var(--awe-border);
}
.btn-outline-secondary:hover {
    background-color: var(--awe-border);
    color:            var(--awe-text);
    border-color:     var(--awe-border);
}

/* ── Cards ───────────────────────────────────────────────────────────── */
.card {
    border-color:  var(--awe-border);
    border-radius: var(--awe-radius);
    box-shadow:    var(--awe-shadow);
}

/* ── Stat cards (dashboard KPIs) ─────────────────────────────────────── */
.stat-card {
    background:       var(--awe-surface);
    border:           1px solid var(--awe-border);
    border-left-width: 4px;
    border-radius:    var(--awe-radius);
    padding:          1rem 1.25rem;
    box-shadow:       var(--awe-shadow);
    height:           100%;
}
.stat-card .stat-label {
    font-size:      0.6875rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--awe-muted);
    margin-bottom:  0.25rem;
}
.stat-card .stat-value {
    font-size:   1.875rem;
    font-weight: 700;
    line-height: 1.15;
    color:       var(--awe-text);
}
.stat-card .stat-unit {
    font-size:  0.75rem;
    color:      var(--awe-muted);
    margin-top: 0.125rem;
}
.stat-card.s-blue  { border-left-color: #2563eb; }
.stat-card.s-teal  { border-left-color: #0d9488; }
.stat-card.s-green { border-left-color: #16a34a; }
.stat-card.s-amber { border-left-color: #d97706; }
.stat-card.s-slate { border-left-color: #64748b; }
.stat-card.s-red   { border-left-color: #dc2626; }

/* ── Form controls ───────────────────────────────────────────────────── */
.form-control, .form-select {
    border-color:  var(--awe-border);
    border-radius: var(--awe-radius);
    font-size:     0.875rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--awe-primary);
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
}
.form-label {
    font-size:   0.8125rem;
    font-weight: 500;
}

/* ── Validation ──────────────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #16a34a; }
.invalid                              { outline: 1px solid #dc2626; }
.validation-message                   { color: #dc2626; font-size: 0.8125rem; }

/* ── Content layout hook ─────────────────────────────────────────────── */
.content { padding-top: 0; }

/* ── Blazor error UI ─────────────────────────────────────────────────── */
#blazor-error-ui {
    background: #fffbeb;
    bottom: 0; left: 0;
    box-shadow: 0 -1px 3px rgba(0,0,0,.12);
    display: none;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed; width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem; top: 0.5rem;
}
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmsiPjxwYXRoIGQ9Ik0yNjMuNTA2IDUxQzI2NC43MTcgNTEgMjY1LjgxMyA1MS40ODM3IDI2Ni42MDYgNTIuMjY1OEwyNjcuMDUyIDUyLjc5ODcgMjY3LjUzOSA1My42MjgzIDI5MC4xODUgOTIuMTgzMSAyOTAuNTQ1IDkyLjc5NSAyOTAuNjU2IDkyLjk5NkMyOTAuODc3IDkzLjUxMyAyOTEgOTQuMDgxNSAyOTEgOTQuNjc4MiAyOTEgOTcuMDY1MSAyODkuMDM4IDk5IDI4Ni42MTcgOTlMMjQwLjM4MyA5OUMyMzcuOTYzIDk5IDIzNiA5Ny4wNjUxIDIzNiA5NC42NzgyIDIzNiA5NC4zNzk5IDIzNi4wMzEgOTQuMDg4NiAyMzYuMDg5IDkzLjgwNzJMMjM2LjMzOCA5My4wMTYyIDIzNi44NTggOTIuMTMxNCAyNTkuNDczIDUzLjYyOTQgMjU5Ljk2MSA1Mi43OTg1IDI2MC40MDcgNTIuMjY1OEMyNjEuMiA1MS40ODM3IDI2Mi4yOTYgNTEgMjYzLjUwNiA1MVoiIGZpbGw9IiNGRkU1MDAiLz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }