:root {
    --primary: #107c10;
    --primary-dark: #0a5e0a;
    --primary-light: #e8f5e9;
    --primary-hover: #0d6b0d;
    --secondary: #005a9e;
    --accent: #ff8c00;
    --danger: #d13438;
    --warning: #fce100;
    --success: #107c10;
    --info: #005a9e;
    --neutral-100: #ffffff;
    --neutral-90: #f9f9f9;
    --neutral-80: #f3f3f3;
    --neutral-70: #e0e0e0;
    --neutral-60: #c8c8c8;
    --neutral-40: #767676;
    --neutral-20: #323130;
    --neutral-10: #201f1e;
    --font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    --font-size-xs: 11px; --font-size-sm: 12px; --font-size-md: 14px;
    --font-size-lg: 16px; --font-size-xl: 20px; --font-size-h1: 24px;
    --space-xs: 4px; --space-sm: 8px; --space-md: 12px;
    --space-lg: 16px; --space-xl: 24px; --space-xxl: 32px;
    --header-height: 52px; --nav-height: 56px; --content-max: 1200px;
    --sidebar-width: 240px; --sidebar-collapsed: 60px;
    --border-radius: 4px; --border-radius-lg: 8px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.10);
    --shadow-md: 0 4px 6px rgba(0,0,0,.10),0 2px 4px rgba(0,0,0,.08);
    --shadow-card: 0 2px 8px rgba(0,0,0,.08);
    --z-header: 100; --z-bottom-nav: 100; --z-modal: 200; --z-toast: 300;
}
@media (prefers-color-scheme: dark) { :root {
    --neutral-100:#1b1b1b; --neutral-90:#252525; --neutral-80:#2d2d2d;
    --neutral-70:#3d3d3d; --neutral-60:#555; --neutral-40:#aaa;
    --neutral-20:#e0e0e0; --neutral-10:#f0f0f0;
    --shadow-card: 0 2px 8px rgba(0,0,0,.4);
}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--font-size-md);-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--font-family);color:var(--neutral-20);background:var(--neutral-90);
    min-height:100vh;padding:0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.main-content{max-width:var(--content-max);margin:0 auto;padding:var(--space-md)}
@media(min-width:768px){.main-content{max-width:100%;padding:var(--space-lg) var(--space-xl)}}
.app-header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:var(--primary);
    color:white;display:flex;align-items:center;padding:0 var(--space-lg);z-index:var(--z-header);
    box-shadow:var(--shadow-md);gap:var(--space-md)}
.app-header .app-title{font-size:var(--font-size-lg);font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.header-icon-btn{background:transparent;border:none;color:white;width:36px;height:36px;
    border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;
    position:relative;transition:background .15s}
.header-icon-btn:hover{background:rgba(255,255,255,.15)}
.notification-badge{position:absolute;top:4px;right:4px;background:var(--danger);color:white;
    font-size:9px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-weight:700}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-height);background:var(--neutral-100);
    border-top:1px solid var(--neutral-70);display:flex;z-index:var(--z-bottom-nav);
    box-shadow:0 -2px 8px rgba(0,0,0,.08)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;cursor:pointer;padding:6px 0;color:var(--neutral-40);text-decoration:none;
    font-size:var(--font-size-xs);font-weight:500;border-top:3px solid transparent;transition:all .15s}
.nav-item i{font-size:18px}
.nav-item.active{color:var(--primary);border-top:3px solid var(--primary)}
.nav-item:hover{color:var(--primary);background:var(--primary-light)}
.card{background:var(--neutral-100);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-card);
    padding:var(--space-lg);margin-bottom:var(--space-md)}
.card-header{display:flex;align-items:center;justify-content:space-between;
    margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--neutral-70)}
.card-title{font-size:var(--font-size-lg);font-weight:600;color:var(--neutral-20)}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-md);margin-bottom:var(--space-lg)}
@media(min-width:768px){.kpi-grid{grid-template-columns:repeat(4,1fr)}}
.kpi-card{background:var(--neutral-100);border-radius:var(--border-radius-lg);padding:var(--space-lg);
    box-shadow:var(--shadow-card);text-align:center;border-left:4px solid var(--primary);transition:transform .15s}
.kpi-card:hover{transform:translateY(-2px)}
.kpi-card.danger{border-left-color:var(--danger)}.kpi-card.warning{border-left-color:var(--accent)}.kpi-card.info{border-left-color:var(--secondary)}
.kpi-value{font-size:var(--font-size-h1);font-weight:700;color:var(--primary);line-height:1.2}
.kpi-card.danger .kpi-value{color:var(--danger)}.kpi-card.warning .kpi-value{color:var(--accent)}.kpi-card.info .kpi-value{color:var(--secondary)}
.kpi-label{font-size:var(--font-size-sm);color:var(--neutral-40);margin-top:var(--space-xs)}
.kpi-icon{font-size:24px;margin-bottom:var(--space-xs);opacity:.7}
.btn{display:inline-flex;align-items:center;gap:var(--space-xs);padding:8px 16px;border-radius:var(--border-radius);
    font-size:var(--font-size-md);font-family:var(--font-family);font-weight:500;cursor:pointer;
    border:1px solid transparent;transition:all .15s;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--primary);color:white}.btn-primary:hover{background:var(--primary-dark)}
.btn-secondary{background:var(--neutral-80);color:var(--neutral-20);border-color:var(--neutral-70)}.btn-secondary:hover{background:var(--neutral-70)}
.btn-danger{background:var(--danger);color:white}.btn-danger:hover{background:#b02a2e}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}.btn-outline:hover{background:var(--primary-light)}
.btn-sm{padding:5px 10px;font-size:var(--font-size-sm)}.btn-lg{padding:12px 24px;font-size:var(--font-size-lg)}
.btn-block{width:100%;justify-content:center}.btn:disabled{opacity:.5;cursor:not-allowed}
.form-group{margin-bottom:var(--space-md)}
.form-label{display:block;font-size:var(--font-size-sm);font-weight:600;color:var(--neutral-20);margin-bottom:var(--space-xs)}
.form-label .required{color:var(--danger);margin-left:2px}
.form-control{width:100%;padding:8px 10px;border:1px solid var(--neutral-60);border-radius:var(--border-radius);
    font-size:var(--font-size-md);font-family:var(--font-family);color:var(--neutral-20);background:var(--neutral-100);
    transition:border-color .15s,box-shadow .15s;height:36px}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(16,124,16,.2)}
.form-control.is-invalid{border-color:var(--danger)}
textarea.form-control{height:auto;min-height:72px;resize:vertical}
select.form-control{cursor:pointer}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}
.table-wrapper{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--font-size-md)}
th{background:var(--neutral-80);color:var(--neutral-20);font-weight:600;padding:10px 12px;
    text-align:left;white-space:nowrap;border-bottom:2px solid var(--neutral-70);
    font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.4px}
td{padding:10px 12px;border-bottom:1px solid var(--neutral-80);vertical-align:middle}
tr:hover td{background:var(--primary-light)}tr:last-child td{border-bottom:none}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:12px;
    font-size:var(--font-size-xs);font-weight:600;white-space:nowrap}
.badge-success{background:#e6f4ea;color:var(--primary)}.badge-danger{background:#fde7e9;color:var(--danger)}
.badge-warning{background:#fff4ce;color:#7d5c00}.badge-info{background:#dce9f5;color:var(--secondary)}
.badge-neutral{background:var(--neutral-80);color:var(--neutral-40)}.badge-pending{background:#fff4ce;color:#7d5c00}
.scan-bar{background:var(--primary-light);border:2px dashed var(--primary);border-radius:var(--border-radius-lg);
    padding:var(--space-lg);margin-bottom:var(--space-md);display:flex;gap:var(--space-sm);align-items:center}
.scan-bar .scan-icon{font-size:28px;color:var(--primary);flex-shrink:0}
.scan-bar .form-control{flex:1}
.scan-bar .scan-input{flex:1;font-size:15px;padding:10px 14px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:var(--z-modal);
    display:flex;align-items:flex-end;justify-content:center}
@media(min-width:600px){.modal-overlay{align-items:center}}
.modal{background:var(--neutral-100);border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0;
    width:100%;max-width:600px;max-height:90vh;overflow-y:auto;animation:slideUp .2s ease}
@media(min-width:600px){.modal{border-radius:var(--border-radius-lg)}}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg);
    border-bottom:1px solid var(--neutral-70);position:sticky;top:0;background:var(--neutral-100);z-index:1}
.modal-title{font-size:var(--font-size-lg);font-weight:600}
.modal-close{background:none;border:none;cursor:pointer;font-size:20px;color:var(--neutral-40);padding:4px}
.modal-body{padding:var(--space-lg)}
.modal-footer{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--neutral-70);
    display:flex;gap:var(--space-sm);justify-content:flex-end;position:sticky;bottom:0;background:var(--neutral-100)}
.toast-container{position:fixed;top:calc(var(--header-height) + 8px);right:16px;z-index:var(--z-toast);
    display:flex;flex-direction:column;gap:8px;max-width:320px}
.toast{background:var(--neutral-100);border-radius:var(--border-radius);box-shadow:var(--shadow-md);
    padding:12px 16px;border-left:4px solid var(--primary);animation:toastIn .2s ease}
.toast.error{border-left-color:var(--danger)}.toast.warning{border-left-color:var(--accent)}.toast.info{border-left-color:var(--secondary)}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.toast-title{font-weight:600;font-size:var(--font-size-md)}.toast-msg{font-size:var(--font-size-sm);color:var(--neutral-40);margin-top:2px}
.alert{padding:var(--space-md);border-radius:var(--border-radius);margin-bottom:var(--space-md);border:1px solid transparent;font-size:var(--font-size-sm)}
.alert-success{background:#e6f4ea;border-color:var(--primary);color:var(--primary-dark)}
.alert-danger{background:#fde7e9;border-color:var(--danger);color:#a80000}
.alert-warning{background:#fff4ce;border-color:#d0900b;color:#7d5c00}
.alert-info{background:#dce9f5;border-color:var(--secondary);color:var(--secondary)}
.spinner{width:20px;height:20px;border:2px solid var(--neutral-70);border-top-color:var(--primary);
    border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-state{text-align:center;padding:var(--space-xxl) var(--space-xl);color:var(--neutral-40)}
.empty-state i{font-size:48px;margin-bottom:var(--space-md);display:block;opacity:.4}
.empty-state h3{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--space-sm)}
[data-tooltip]{position:relative;cursor:help}
[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;
    transform:translateX(-50%) translateY(-4px);background:var(--neutral-10);color:white;
    font-size:var(--font-size-xs);padding:4px 8px;border-radius:var(--border-radius);white-space:nowrap;
    pointer-events:none;opacity:0;transition:opacity .15s;z-index:50;max-width:200px;white-space:normal;text-align:center}
[data-tooltip]:hover::after{opacity:1}
.text-muted{color:var(--neutral-40);font-size:var(--font-size-sm)}.text-danger{color:var(--danger)}
.text-success{color:var(--primary)}.text-warning{color:var(--accent)}
.text-right{text-align:right}.text-center{text-align:center}.text-bold{font-weight:600}
.divider{border:none;border-top:1px solid var(--neutral-70);margin:var(--space-md) 0}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-gap{display:flex;align-items:center;gap:var(--space-sm)}
.mt-1{margin-top:var(--space-xs)}.mt-2{margin-top:var(--space-sm)}.mt-3{margin-top:var(--space-md)}
.mb-2{margin-bottom:var(--space-sm)}.mb-3{margin-bottom:var(--space-md)}.w-100{width:100%}

/* ── Blazor loading / error UI ──────────────────────────────────── */
#blazor-error-ui{background:#fff3cd;color:#856404;bottom:0;left:0;position:fixed;width:100%;z-index:1000;
    padding:0.6rem 1.25rem 0.7rem;box-shadow:0 -2px 6px rgba(0,0,0,0.1);display:none;font-size:13px}
#blazor-error-ui .reload{color:#856404;text-decoration:underline;margin-left:8px;cursor:pointer}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:0.75rem;top:0.5rem;font-size:18px}
#blazor-error-ui[style*="display:block"]{display:flex!important;align-items:center;gap:6px}

.loading-progress{position:relative;display:block;width:8rem;height:8rem;margin:20vh auto}
.loading-progress circle{fill:none;stroke:#e0e0e0;stroke-width:6;transform-origin:50% 50%;
    transform:rotate(-90deg)}.loading-progress circle:last-child{stroke:var(--primary);
    stroke-dasharray:calc(3.141*var(--blazor-load-percentage,0%)*2.4/100)," "}
.loading-progress-text{position:absolute;text-align:center;font-weight:600;font-size:1.1rem;
    top:50%;left:50%;transform:translate(-50%,-50%)}
.loading-progress-text:after{content:var(--blazor-load-percentage-text,"Loading…")}

/* ── Autocomplete dropdown ──────────────────────────── */
.autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;z-index:50;background:var(--neutral-100);
    border:1px solid var(--neutral-70);border-radius:var(--border-radius);
    box-shadow:var(--shadow-md);max-height:200px;overflow-y:auto;margin-top:2px}
.autocomplete-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;
    cursor:pointer;font-size:13px;transition:background .1s}
.autocomplete-item:hover{background:var(--primary-light)}

/* ── Detail grid ─────────────────────────────────────── */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
@media(min-width:768px){.detail-grid{grid-template-columns:1fr 1fr 1fr;gap:var(--space-lg) var(--space-xl)}}
.detail-field{display:flex;flex-direction:column;gap:2px}
.detail-label{font-size:11px;color:var(--text-secondary,#666);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.detail-field>span:last-child{font-size:14px;font-weight:500}

/* ── Timeline ────────────────────────────────────────── */
.timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:24px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--neutral-70,#ddd)}
.timeline-item{display:flex;align-items:flex-start;gap:12px;padding:8px 0;position:relative}
.timeline-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;position:absolute;left:-20px;top:10px;border:2px solid #fff}
.timeline-dot.created{background:var(--primary,#107c10)}
.timeline-dot.grn{background:var(--secondary,#005a9e)}
.timeline-dot.closed{background:var(--neutral-40,#767676)}
.timeline-content{display:flex;flex-direction:column;gap:2px}
.timeline-title{font-size:13px;font-weight:600}
.timeline-date{font-size:11px;color:var(--text-secondary,#666)}