/* ITL TimeTrack — Blazor PWA brand stylesheet (coral #E14E40), no Tailwind/npm. */
:root {
  --brand-50:#fdf3f1; --brand-100:#fbe3df; --brand-300:#f09d90; --brand-500:#e14e40;
  --brand-600:#c73b2e; --brand-700:#a32e24;
  --s1:#f1f5f9; --s2:#e2e8f0; --s3:#cbd5e1; --s4:#94a3b8; --s5:#64748b; --s6:#475569; --s7:#334155; --s8:#1e293b; --s9:#0f172a;
}
* { box-sizing:border-box; }
html, body, .app-root { height:100%; }
body {
  margin:0; background:var(--s1); color:var(--s8);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing:antialiased;
}
h1:focus { outline:none; }
a { color:var(--brand-600); text-decoration:none; }
a:hover { text-decoration:underline; }
.center-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; color:var(--s5); }

/* ---- Inputs / buttons / alerts ---- */
.field { display:block; margin-bottom:.8rem; }
.field > span { display:block; font-size:.82rem; font-weight:500; color:var(--s7); margin-bottom:.25rem; }
.input, select.input {
  width:100%; border:1px solid var(--s3); border-radius:.5rem; padding:.55rem .75rem; font-size:.95rem;
  color:var(--s9); background:#fff; outline:none; transition:border-color .15s, box-shadow .15s;
}
.input:focus { border-color:var(--brand-500); box-shadow:0 0 0 1px var(--brand-500); }
.btn {
  width:100%; border:none; border-radius:.5rem; background:var(--brand-500); color:#fff;
  font-weight:600; font-size:.95rem; padding:.65rem; cursor:pointer; transition:background .15s;
}
.btn:hover { background:var(--brand-600); }
.btn:disabled { opacity:.5; cursor:default; }
.btn-out { background:#dc2626; }
.btn-out:hover { background:#b91c1c; }
.btn-sm { width:auto; display:inline-block; padding:.4rem .8rem; font-size:.85rem; }
.btn-ghost { background:#fff; color:var(--s6); border:1px solid var(--s3); }
.btn-ghost:hover { background:var(--s1); }
.alert { border:1px solid; border-radius:.5rem; padding:.5rem .75rem; font-size:.85rem; margin-bottom:.75rem; }
.alert.error { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.alert.success { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }

/* ---- Auth shell ---- */
.auth-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem; }
.auth-card { width:100%; max-width:24rem; background:#fff; border:1px solid var(--s2); border-radius:1rem; padding:1.5rem; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.auth-head { text-align:center; margin-bottom:1.5rem; }
.auth-logo { width:64px; height:64px; border-radius:1rem; margin:0 auto .75rem; display:block; box-shadow:0 1px 2px rgba(15,23,42,.08); }
.auth-title { font-size:1.25rem; font-weight:600; color:var(--s9); }
.auth-sub { font-size:.85rem; color:var(--s5); margin-top:.25rem; }

/* ---- App header ---- */
.topbar { border-bottom:1px solid var(--s2); background:#fff; }
.topbar-inner { max-width:80rem; margin:0 auto; height:3.5rem; display:flex; align-items:center; justify-content:space-between; padding:0 1.25rem; }
.brandwrap { display:flex; align-items:center; gap:.5rem; }
.logo-sq { width:2rem; height:2rem; border-radius:.5rem; }
.brand-name { font-weight:600; letter-spacing:-.01em; color:var(--s9); }
.topbar-right { display:flex; align-items:center; gap:.75rem; font-size:.875rem; }
.who { color:var(--s6); }
@media (max-width:640px){ .who { display:none; } }
.role-chip { background:var(--brand-500); color:#fff; font-size:.7rem; border-radius:999px; padding:.1rem .5rem; }
.linkbtn { background:none; border:none; color:var(--s6); cursor:pointer; font-size:.875rem; }
.linkbtn:hover { color:var(--s9); }

/* ---- Notification bell ---- */
.bell { position:relative; background:none; border:none; color:var(--s5); cursor:pointer; padding:.35rem; border-radius:.5rem; display:inline-flex; }
.bell:hover { background:var(--s1); color:var(--s7); }
.bell .badge { position:absolute; top:-2px; right:-2px; background:var(--brand-500); color:#fff; border-radius:999px; font-size:.6rem; font-weight:700; padding:.05rem .3rem; }
.ndrop { position:absolute; right:0; top:2.4rem; width:20rem; max-width:90vw; background:#fff; border:1px solid var(--s2); border-radius:.75rem; box-shadow:0 14px 34px rgba(15,23,42,.18); overflow:hidden; z-index:30; }
.ndrop-head { display:flex; justify-content:space-between; align-items:center; padding:.55rem .7rem; border-bottom:1px solid var(--s1); font-size:.8rem; font-weight:600; color:var(--s9); }
.nitem { width:100%; text-align:left; border:none; border-bottom:1px solid var(--s1); background:#fff; padding:.55rem .7rem; cursor:pointer; }
.nitem.unread { background:var(--brand-50); }
.nitem b { display:block; font-size:.78rem; color:var(--s8); }
.nitem span { font-size:.72rem; color:var(--s5); }
.nitem em { font-style:normal; font-size:.65rem; color:var(--s4); }

/* ---- Page + dashboard ---- */
.page-main { max-width:80rem; margin:0 auto; padding:1.25rem; }
.welcome { font-size:1.25rem; font-weight:600; color:var(--s9); margin:0 0 .25rem; }
.sub { font-size:.85rem; color:var(--s5); margin:0 0 1.25rem; }
.grid { display:grid; grid-template-columns:repeat(1,1fr); gap:.75rem; }
@media (min-width:640px){ .grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid { grid-template-columns:repeat(3,1fr); } }
.module { display:block; background:#fff; border:1px solid var(--s2); border-radius:.75rem; padding:1rem; transition:border-color .15s, box-shadow .15s; }
.module:hover { border-color:var(--brand-300); box-shadow:0 1px 2px rgba(15,23,42,.06); text-decoration:none; }
.module b { display:block; font-weight:500; color:var(--s8); }
.module i { display:block; font-style:normal; margin-top:.25rem; font-size:.72rem; color:var(--brand-600); }

/* ---- generic card ---- */
.card { background:#fff; border:1px solid var(--s2); border-radius:.75rem; padding:1rem; margin-bottom:.75rem; }
.card h2 { margin:0 0 .5rem; font-size:1rem; color:var(--s9); }

/* ===== Blazor framework UI (kept from template) ===== */
#blazor-error-ui {
  color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
  box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: #e2e8f0; stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: #e14e40; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto .2rem; color:#475569; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }
.validation-message { color: #dc2626; font-size:.8rem; }

/* ===== Shared component classes for ported feature pages ===== */
.topbar-inner.narrow { max-width:42rem; }

/* sections / cards */
.section { background:#fff; border:1px solid var(--s2); border-radius:.75rem; padding:1rem; margin-bottom:1rem; }
.section h2 { margin:0 0 .25rem; font-size:1rem; font-weight:600; color:var(--s9); }
.section .hint { font-size:.75rem; color:var(--s5); margin:0 0 .75rem; }
.cols-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
.cols-3 { display:grid; gap:1.5rem; }
@media (min-width:1024px){ .cols-3 { grid-template-columns:repeat(3,1fr); } }

/* text helpers */
.muted { color:var(--s5); }
.muted-xs { color:var(--s4); font-size:.72rem; }
.small { font-size:.85rem; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.stack > * + * { margin-top:.5rem; }
.spaced { display:flex; gap:.5rem; flex-wrap:wrap; }

/* data tables */
.data-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.data-table th { background:var(--brand-500); color:#fff; text-align:left; font-weight:600; padding:.5rem .7rem; white-space:nowrap; }
.data-table td { padding:.45rem .7rem; border-bottom:1px solid var(--s2); color:var(--s7); vertical-align:top; }
.data-table tbody tr:nth-child(even) { background:var(--s1); }
.table-wrap { overflow-x:auto; border:1px solid var(--s2); border-radius:.75rem; background:#fff; }

/* badges / pills */
.pill { display:inline-block; font-size:.7rem; font-weight:600; border-radius:999px; padding:.1rem .5rem; }
.pill.ok { background:#dcfce7; color:#15803d; }
.pill.warn { background:#fef9c3; color:#a16207; }
.pill.bad { background:#fee2e2; color:#b91c1c; }
.pill.neu { background:var(--s1); color:var(--s5); }

/* list rows */
.list { list-style:none; margin:0; padding:0; }
.list > li { padding:.7rem 0; border-bottom:1px solid var(--s1); }
.list > li:last-child { border-bottom:none; }

/* checkbox row */
.check-row { display:flex; align-items:flex-start; gap:.6rem; border:1px solid var(--s2); border-radius:.5rem; padding:.6rem .7rem; cursor:pointer; }
.check-row:hover { background:var(--s1); }
.check-row input { margin-top:.15rem; accent-color:var(--brand-500); }

/* selfie / media placeholder */
.media-box { background:linear-gradient(135deg,#cbd5e1,#94a3b8); border-radius:.6rem; aspect-ratio:4/3; width:100%; max-width:22rem; margin:0 auto; display:flex; align-items:center; justify-content:center; color:#fff; }
.media-box video, .media-box img { width:100%; height:100%; object-fit:cover; border-radius:.6rem; }
.big-action { width:100%; border:none; border-radius:.75rem; padding:1rem; font-size:1.1rem; font-weight:600; color:#fff; cursor:pointer; }
.big-action.in { background:var(--brand-500); }
.big-action.out { background:#dc2626; }
.big-action:disabled { opacity:.5; cursor:default; }

/* misc helpers used by ported pages */
.block { display:block; }
.input.narrow { width:6rem; }
.span-2 { grid-column: span 2; }

/* inline sub-form (e.g. create-schedule inside the holiday form, invite link panel) */
.card.subtle { background:var(--brand-50); border-color:var(--brand-100); }

/* row currently loaded into an editor */
.row-active, .data-table tbody tr.row-active { background:var(--brand-50) !important; box-shadow:inset 3px 0 0 var(--brand-500); }

/* per-row action stack on the right of a list item (pill + edit/delete) */
.loc-actions { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; white-space:nowrap; }

/* break out of the centered page container to use the full viewport width
   (used by the timesheet month grid so a whole month of columns is visible) */
.full-bleed { width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-radius:0; }
.full-bleed > .table-wrap { border-left:none; border-right:none; border-radius:0; }