/* ── THG App Styles ─────────────────────────────────────────── */
:root {
    --blue-dark: #0d1b2a;
    --blue-mid: #1b4f8a;
    --blue-light: #4a90d9;
    --blue-pale: #d6e8f7;
    --white: #ffffff;
    --grey-light: #f0f4f8;
    --grey-mid: #d0d9e4;
    --grey-dark: #5a6a7a;
    --text: #0d1b2a;
    --danger: #c0392b;
    --warning: #e67e22;
    --info: #2980b9;
    --success: #27ae60;
    --sidebar-w: 260px;
    --header-h: 56px;
    --radius: 6px;
    --shadow: 0 2px 8px rgba(0,0,0,0.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 14px; color: var(--text); background: var(--grey-light); }

/* ── Splash ─────────────────────────────────────────────────── */
.thg-splash { display:flex; align-items:center; justify-content:center; height:100vh; background:var(--blue-dark); color:var(--white); text-align:center; }
.thg-splash-inner h1 { font-size:3rem; letter-spacing:.2rem; color:var(--blue-light); }
.thg-splash-inner p { margin-top:.5rem; font-size:1rem; color:var(--grey-mid); }
.thg-loader { margin:1.5rem auto 0; width:40px; height:40px; border:4px solid rgba(255,255,255,.2); border-top-color:var(--blue-light); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Layout ─────────────────────────────────────────────────── */
.thg-layout { display:flex; height:100vh; overflow:hidden; }
.thg-sidebar { width:var(--sidebar-w); background:var(--blue-dark); color:var(--white); display:flex; flex-direction:column; overflow-y:auto; flex-shrink:0; }
.thg-main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.thg-header { height:var(--header-h); background:var(--blue-mid); color:var(--white); display:flex; align-items:center; padding:0 1.25rem; gap:1rem; box-shadow:var(--shadow); flex-shrink:0; }
.thg-header h2 { flex:1; font-size:1rem; font-weight:600; }
.thg-content { flex:1; overflow-y:auto; padding:1.25rem; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.thg-brand { padding:1rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.1); }
.thg-brand h1 { font-size:1.4rem; color:var(--blue-light); letter-spacing:.1rem; }
.thg-brand small { color:var(--grey-mid); font-size:.75rem; }
.thg-nav { flex:1; padding:.5rem 0; }
.thg-nav-section { border-bottom:1px solid rgba(255,255,255,.07); }
.thg-nav-section-header { display:flex; align-items:center; gap:.5rem; padding:.6rem 1.25rem; cursor:pointer; font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.06rem; color:var(--blue-pale); user-select:none; }
.thg-nav-section-header:hover { background:rgba(255,255,255,.07); }
.thg-nav-section-header .arrow { margin-left:auto; transition:transform .2s; }
.thg-nav-section-header .arrow.open { transform:rotate(90deg); }
.thg-nav-sub { padding:.25rem 0; }
.thg-nav-link { display:block; padding:.45rem 1.25rem .45rem 2.25rem; color:rgba(255,255,255,.75); text-decoration:none; font-size:.85rem; transition:background .15s, color .15s; }
.thg-nav-link:hover { background:rgba(255,255,255,.08); color:var(--white); }
.thg-nav-link.active { background:var(--blue-mid); color:var(--white); border-left:3px solid var(--blue-light); padding-left:calc(2.25rem - 3px); }
.thg-nav-footer { padding:1rem 1.25rem; border-top:1px solid rgba(255,255,255,.1); font-size:.8rem; color:var(--grey-mid); }
.thg-user-chip { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.thg-user-chip span { font-weight:600; color:var(--white); }

/* ── Page Card ───────────────────────────────────────────────── */
.thg-card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.25rem; margin-bottom:1rem; }
.thg-card-title { font-size:1rem; font-weight:700; color:var(--blue-mid); margin-bottom:1rem; padding-bottom:.5rem; border-bottom:2px solid var(--blue-pale); display:flex; align-items:center; gap:.5rem; }

/* ── Form ────────────────────────────────────────────────────── */
.thg-form-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:.85rem; }
.thg-form-group { display:flex; flex-direction:column; gap:.3rem; }
.thg-form-group label { font-size:.78rem; font-weight:600; color:var(--grey-dark); text-transform:uppercase; letter-spacing:.04rem; }
.thg-form-group input, .thg-form-group select, .thg-form-group textarea { padding:.45rem .65rem; border:1px solid var(--grey-mid); border-radius:var(--radius); font-size:.9rem; color:var(--text); background:var(--white); transition:border-color .15s; }
.thg-form-group input:focus, .thg-form-group select:focus, .thg-form-group textarea:focus { outline:none; border-color:var(--blue-light); box-shadow:0 0 0 2px rgba(74,144,217,.18); }
.thg-form-group input[readonly] { background:var(--grey-light); color:var(--grey-dark); }
.thg-form-group textarea { resize:vertical; min-height:70px; }
.thg-form-actions { margin-top:1rem; display:flex; gap:.6rem; flex-wrap:wrap; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .85rem; border-radius:var(--radius); border:none; cursor:pointer; font-size:.85rem; font-weight:600; transition:filter .15s, opacity .15s; }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-primary { background:var(--blue-mid); color:var(--white); }
.btn-primary:hover:not(:disabled) { filter:brightness(1.15); }
.btn-secondary { background:var(--grey-mid); color:var(--text); }
.btn-secondary:hover:not(:disabled) { filter:brightness(.93); }
.btn-danger { background:var(--danger); color:var(--white); }
.btn-danger:hover:not(:disabled) { filter:brightness(1.1); }
.btn-sm { padding:.28rem .6rem; font-size:.78rem; }
.btn-warning { background:var(--warning); color:var(--white); }
.btn-info { background:var(--info); color:var(--white); }

/* ── Table ───────────────────────────────────────────────────── */
.thg-table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.85rem; }
thead tr { background:var(--blue-dark); color:var(--white); }
thead th { padding:.6rem .75rem; text-align:left; font-weight:600; white-space:nowrap; }
tbody tr { border-bottom:1px solid var(--grey-mid); transition:background .1s; }
tbody tr:hover { background:var(--blue-pale); }
tbody td { padding:.5rem .75rem; }
.td-actions { display:flex; gap:.35rem; }

/* ── Alert ───────────────────────────────────────────────────── */
.thg-alert { padding:.7rem 1rem; border-radius:var(--radius); margin-bottom:.85rem; font-size:.88rem; }
.thg-alert-success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.thg-alert-error { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
.thg-alert-info { background:#d1ecf1; color:#0c5460; border:1px solid #bee5eb; }
.thg-alert-warning { background:#fff3cd; color:#856404; border:1px solid #ffc107; }

/* ── Badge ───────────────────────────────────────────────────── */
.badge { display:inline-block; padding:.2rem .5rem; border-radius:20px; font-size:.72rem; font-weight:700; }
.badge-green { background:#d4edda; color:#155724; }
.badge-red { background:#fde8e8; color:var(--danger); }
.badge-grey { background:var(--grey-mid); color:var(--grey-dark); }
.badge-yellow { background:#fff3cd; color:#856404; }
.badge-blue { background:var(--blue-pale); color:var(--blue-mid); }

/* ── Login page ──────────────────────────────────────────────── */
.thg-login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--blue-dark); }
.thg-login-box { background:var(--white); border-radius:12px; padding:2.5rem; width:360px; box-shadow:0 8px 32px rgba(0,0,0,.35); }
.thg-login-logo { text-align:center; margin-bottom:1.5rem; }
.thg-login-logo h1 { font-size:2.2rem; color:var(--blue-mid); }
.thg-login-logo p { color:var(--grey-dark); font-size:.85rem; }
.thg-login-box .thg-form-group { margin-bottom:.85rem; }

/* ── Utility ─────────────────────────────────────────────────── */
.mt-1 { margin-top:.5rem; }
.mt-2 { margin-top:1rem; }
.text-muted { color:var(--grey-dark); font-size:.82rem; }
.text-right { text-align:right; }
.d-flex { display:flex; }
.gap-1 { gap:.5rem; }
.align-center { align-items:center; }
.w-100 { width:100%; }
.loading-overlay { text-align:center; padding:2rem; color:var(--grey-dark); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .thg-sidebar { position:fixed; left:calc(-1 * var(--sidebar-w)); z-index:100; transition:left .25s; }
    .thg-sidebar.open { left:0; }
    .thg-form-grid { grid-template-columns:1fr; }
}

/* ── Error UI ────────────────────────────────────────────────── */
#blazor-error-ui { background:lightyellow; bottom:0; box-shadow:0 -1px 2px rgba(0,0,0,.2); display:none; left:0; padding:0.6rem 1.25rem 0.7rem 1.25rem; position:fixed; width:100%; z-index:1000; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:0.75rem; top:0.5rem; }

/* ── Performance & PWA additions ─────────────────────────────── */
/* GPU-accelerated animations */
.thg-loader, .arrow { will-change: transform; }

/* Smooth scrolling */
html { scroll-behavior: smooth; }
.thg-content, .thg-sidebar { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

/* Prevent layout shift during load */
.thg-layout { contain: layout style; }

/* Focus styles for accessibility */
:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--blue-light); outline-offset: 2px;
}

/* Session expiry warning pulse */
.thg-alert-warning { animation: pulse-warn 2s ease-in-out infinite; }
@keyframes pulse-warn {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.75; }
}

/* Locked row indicator */
tr.locked-row { background: #fafafa; color: var(--grey-dark); }
tr.locked-row td { opacity: 0.7; }

/* Responsive table text */
@media (max-width: 640px) {
    thead th, tbody td { padding: .4rem .5rem; font-size: .78rem; }
    .btn-sm { padding: .22rem .45rem; font-size: .72rem; }
}

/* Print styles */
@media print {
    .thg-sidebar, .thg-header, .thg-form-actions, .td-actions { display: none !important; }
    .thg-main { display: block; }
    .thg-content { padding: 0; }
    .thg-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ── Dashboard ───────────────────────────────────────────────── */
.dash-welcome { margin-bottom: 1rem; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }

.stat-card {
    background: var(--white); border-radius: 10px; padding: 1.25rem;
    box-shadow: var(--shadow); cursor: pointer; transition: transform .15s, box-shadow .15s;
    position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 1rem;
    border-left: 4px solid transparent;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.13); }
.stat-card::before { content:''; position:absolute; top:0;right:0;width:80px;height:80px;border-radius:50%; opacity:.08; transform:translate(20px,-20px); background:currentColor; }

.stat-blue   { border-left-color: #1b4f8a; color: #1b4f8a; }
.stat-green  { border-left-color: #27ae60; color: #27ae60; }
.stat-teal   { border-left-color: #16a085; color: #16a085; }
.stat-purple { border-left-color: #8e44ad; color: #8e44ad; }
.stat-warn   { border-left-color: #e67e22; color: #e67e22; }
.stat-grey   { border-left-color: #5a6a7a; color: #5a6a7a; }

.stat-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.stat-body { flex: 1; }
.stat-num  { font-size: 2rem; font-weight: 800; line-height: 1; color: inherit; }
.stat-label{ font-weight: 700; font-size: .88rem; color: var(--text); margin: .2rem 0 .15rem; }
.stat-sub  { font-size: .75rem; color: var(--grey-dark); }

.stat-badge {
    position: absolute; top: .6rem; right: .6rem;
    background: #e67e22; color: #fff;
    font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border-radius: 12px;
}
.stat-badge-red { background: var(--danger); }

/* ── Dashboard Quick Links ───────────────────────────────────── */
.dash-links { display: flex; flex-wrap: wrap; gap: .65rem; }
.dash-link  {
    display: flex; align-items: center; gap: .5rem;
    background: var(--grey-light); border: 1px solid var(--grey-mid); border-radius: 8px;
    padding: .55rem 1rem; cursor: pointer; font-size: .88rem; font-weight: 600;
    color: var(--text); transition: background .15s, border-color .15s, transform .1s;
    white-space: nowrap;
}
.dash-link:hover { background: var(--blue-pale); border-color: var(--blue-light); transform: translateY(-1px); }
.dash-link-icon  { font-size: 1.15rem; }
.dash-link-label { }

@media (max-width: 640px) {
    .dash-grid { grid-template-columns: 1fr 1fr; }
    .stat-num  { font-size: 1.6rem; }
}