/* ==========================================================================
   ShiftPeek — staff.css  (Staff Interface / SI · UI)
   Same "Branded Card" language as the clock interface, adapted to a phone-first
   app: top bar, scrollable content, bottom tab bar, and a full-screen QR scanner.
   Self-contained (the SI is a separate static app).
   ========================================================================== */

:root{
	--ink:        #14181b;
	--ink-2:      #3b454c;
	--muted:      #586068;
	--line:       #e6e9ec;
	--line-2:     #d7dde1;
	--bg:         #ffffff;
	--bg-tint:    #eef5f3;

	--teal:       #0a6b5e;
	--teal-dark:  #074c43;
	--teal-deep:  #053b34;
	--teal-ink:   #0a5a4f;
	--teal-50:    #e7f3f0;
	--teal-100:   #cfe9e3;
	--mint:       #16b89a;
	--coral:      #e8745b;
	--danger:     #c43d2f;
	--amber:      #b3791a;

	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--radius:     16px;
	--radius-lg:  24px;
	--radius-pill:999px;
	--shadow:     0 10px 30px rgba(16,24,28,.10), 0 2px 8px rgba(16,24,28,.06);
	--shadow-lg:  0 24px 60px rgba(5,37,31,.18);
	--ring:       0 0 0 3px rgba(10,107,94,.30);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body.si-body{
	margin:0;
	font-family:var(--font);
	color:var(--ink);
	background:
		radial-gradient(1200px 600px at 50% -10%, var(--teal-50), transparent 60%),
		var(--bg-tint);
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px; }
img{ display:block; }
button{ font-family:var(--font); }


/* ================= full-screen stages (loading / offline / login) ================= */
.si-stage{ min-height:100svh; min-height:100vh; }
.si-screen{
	min-height:100svh; min-height:100vh;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:18px; padding:28px 20px;
	animation:si-fade .3s ease both;
}
@keyframes si-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.si-brand{ display:inline-flex; align-items:center; gap:12px; color:var(--ink); font-weight:800; letter-spacing:-.02em; }
.si-brand-name{ font-size:1.5rem; }
.si-brand-sm .si-brand-name{ font-size:1.1rem; }
.si-brand-sm img{ width:24px; height:24px; }

.si-spinner{
	width:38px; height:38px; border-radius:50%;
	border:4px solid var(--teal-100); border-top-color:var(--teal);
	animation:si-spin .8s linear infinite;
}
@keyframes si-spin{ to{ transform:rotate(360deg); } }
.si-msg{ margin:0; color:var(--ink-2); font-weight:600; font-size:1.05rem; }

.si-card{
	width:100%; max-width:420px;
	background:var(--bg); border:1px solid var(--line);
	border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
	padding:30px 26px;
}

/* offline */
.si-offline .si-card{ text-align:center; }
.si-offline-ic{
	width:64px; height:64px; margin:0 auto 18px;
	display:grid; place-items:center; border-radius:50%;
	background:#fbeae6; color:var(--danger);
}
.si-offline h1{ margin:0 0 8px; font-size:1.4rem; letter-spacing:-.02em; }
.si-offline p{ margin:0 0 22px; color:var(--ink-2); line-height:1.5; }


/* ================= login ================= */
.si-login-head{ text-align:center; margin-bottom:22px; }
.si-login-head .si-brand{ margin-bottom:14px; }
.si-pill{
	display:inline-flex; align-items:center; gap:8px;
	background:var(--teal-50); color:var(--teal-ink);
	font-weight:700; font-size:.82rem;
	padding:6px 14px; border-radius:var(--radius-pill);
	border:1px solid var(--teal-100); margin-bottom:14px;
}
.si-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); }
.si-login-head h1{ margin:0 0 6px; font-size:1.5rem; letter-spacing:-.02em; }
.si-login-head p{ margin:0; color:var(--ink-2); line-height:1.5; }

.si-alert{
	display:none;
	background:#fbeae6; color:#8f2a1f; border:1px solid #f3c9c1;
	border-radius:12px; padding:11px 14px;
	font-size:.95rem; font-weight:600; margin-bottom:16px;
}
.si-alert.show{ display:block; }
.si-alert.si-alert-info{ background:var(--teal-50); color:var(--teal-deep); border-color:var(--teal-100); }
.si-alert.si-alert-ok{ background:var(--teal-50); color:var(--teal-deep); border-color:var(--teal-100); }

.si-field{ margin-bottom:16px; }
.si-field label{ display:block; font-weight:700; font-size:.92rem; color:var(--ink); margin-bottom:7px; }
.si-input{
	width:100%; font-family:var(--font); font-size:1.05rem; color:var(--ink);
	background:#fff; border:1.5px solid var(--line-2); border-radius:12px;
	padding:13px 14px; transition:border-color .15s, box-shadow .15s;
}
.si-input::placeholder{ color:#9aa3aa; }
.si-input:focus{ border-color:var(--teal); box-shadow:var(--ring); }
.si-hint{ margin:7px 0 0; font-size:.86rem; color:var(--muted); line-height:1.45; }
.si-hint code{ background:var(--teal-50); color:var(--teal-ink); padding:1px 6px; border-radius:6px; font-size:.85em; font-weight:600; }

/* buttons */
.si-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	font-weight:700; font-size:1.05rem;
	border:1.5px solid transparent; border-radius:var(--radius-pill);
	padding:14px 22px; cursor:pointer;
	transition:background .15s, color .15s, border-color .15s, opacity .15s;
}
.si-btn:disabled{ opacity:.55; cursor:default; }
.si-btn-primary{ background:var(--teal); color:#fff; box-shadow:var(--shadow); }
.si-btn-primary:hover:not(:disabled){ background:var(--teal-dark); }
.si-btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.si-btn-ghost:hover:not(:disabled){ border-color:var(--ink); }
.si-btn-danger{ background:#fff; color:var(--danger); border-color:#f0c4be; }
.si-btn-danger:hover:not(:disabled){ background:#fbeae6; }
.si-btn-block{ width:100%; }


/* ================= app shell (logged-in) ================= */
.si-app{
	display:flex; flex-direction:column;
	height:100vh; height:100svh; height:100dvh;   /* fixed frame: content scrolls inside */
	max-width:480px; margin:0 auto;
	background:transparent;
	overflow:hidden;
}
.si-top{
	position:sticky; top:0; z-index:5;
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:14px 18px calc(14px + env(safe-area-inset-top));
	background:rgba(238,245,243,.86);
	backdrop-filter:saturate(1.2) blur(8px);
	border-bottom:1px solid var(--line);
}
.si-top-store{ text-align:right; min-width:0; }
.si-top-store .nm{ display:block; font-weight:800; font-size:.98rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px; }
.si-top-store .sfx{ font-size:.78rem; color:var(--teal-ink); font-weight:700; }

.si-content{
	flex:1 1 auto; min-height:0; width:100%;
	overflow-y:auto; -webkit-overflow-scrolling:touch;
	padding:0 18px 96px;     /* no top padding: lets a sticky header sit flush; bottom room for tabs */
}
.si-view{ animation:si-fade .25s ease both; padding-top:18px; }
.si-view-shifts{ padding-top:0; }   /* the sticky header provides its own top spacing */

/* bottom tab bar */
.si-tabs{
	position:fixed; left:50%; transform:translateX(-50%);
	bottom:0; width:100%; max-width:480px; z-index:6;
	display:flex;
	background:rgba(255,255,255,.94);
	backdrop-filter:saturate(1.2) blur(10px);
	border-top:1px solid var(--line);
	padding-bottom:env(safe-area-inset-bottom);
}
.si-tab{
	flex:1; margin:6px;
	display:flex; flex-direction:column; align-items:center; gap:4px;
	padding:8px 4px; background:none; border:0; cursor:pointer;
	color:var(--muted); font-size:.72rem; font-weight:700;
	border-radius:14px;
	transition:background .15s, color .15s;
}
.si-tab svg{ width:23px; height:23px; }
/* The current view (Home / Shifts / Account) fills its whole button area with the
   brand teal and white text — same treatment as the primary buttons. */
.si-tab.is-active{ background:var(--teal); color:#fff; box-shadow:var(--shadow); }


/* ================= HOME ================= */
.si-hello{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; margin:4px 0 16px; }
.si-hello span{ color:var(--teal-ink); }

.si-status{
	display:flex; align-items:center; gap:14px;
	background:var(--bg); border:1px solid var(--line);
	border-radius:var(--radius); box-shadow:var(--shadow);
	padding:18px; margin-bottom:18px;
}
.si-status-dot{ width:14px; height:14px; border-radius:50%; flex:none; }
.si-status-off .si-status-dot{ background:var(--line-2); }
.si-status-on  .si-status-dot{ background:var(--mint); box-shadow:0 0 0 5px rgba(22,184,154,.18); animation:si-pulse 2s ease-in-out infinite; }
@keyframes si-pulse{ 0%,100%{ box-shadow:0 0 0 5px rgba(22,184,154,.18); } 50%{ box-shadow:0 0 0 9px rgba(22,184,154,.06); } }
.si-status-label{ display:block; font-size:1.15rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.si-status-sub{ display:block; font-size:.9rem; color:var(--muted); margin-top:2px; font-weight:600; }

.si-actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.si-bigbtn{
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
	min-height:120px; border-radius:var(--radius-lg); cursor:pointer;
	font-size:1.05rem; font-weight:800; letter-spacing:.01em;
	border:1.5px solid transparent;
	transition:transform .12s, background .15s, box-shadow .15s, opacity .15s;
}
.si-bigbtn:active:not(:disabled){ transform:scale(.97); }
.si-bigbtn svg{ width:34px; height:34px; }
.si-bigbtn:disabled{ opacity:.5; cursor:default; }
.si-start{ background:var(--teal); color:#fff; box-shadow:var(--shadow); }
.si-start:hover:not(:disabled){ background:var(--teal-dark); }
.si-end{ background:#fff; color:var(--teal-ink); border-color:var(--teal-100); box-shadow:var(--shadow); }
.si-end:hover:not(:disabled){ border-color:var(--teal); }
.si-end.is-armed{ background:var(--coral); color:#fff; border-color:transparent; }
.si-end.is-armed:hover:not(:disabled){ background:#d9603f; }

/* explanatory note under the buttons (e.g. why START is disabled) */
.si-note{ margin:-4px 0 18px; text-align:center; font-size:.9rem; color:var(--muted); font-weight:600; line-height:1.45; }

/* amber warning banner (earlier un-ended shift) */
.si-warn{
	display:flex; align-items:flex-start; gap:10px;
	background:#fdf6e9; border:1px solid #efd9a8; color:#7a531a;
	border-radius:14px; padding:12px 14px; margin-bottom:16px;
	font-size:.92rem; font-weight:600; line-height:1.45;
}
.si-warn svg{ flex:none; width:19px; height:19px; margin-top:1px; }

.si-month-card{
	display:flex; align-items:center; gap:14px;
	background:var(--bg); border:1px solid var(--line);
	border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);
}
.si-month-ic{ width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:12px; background:var(--teal-50); color:var(--teal-ink); }
.si-month-card .mc-text{ flex:1; min-width:0; }
.si-month-label{ display:block; font-size:.82rem; color:var(--muted); font-weight:700; }
.si-month-val{ display:block; font-size:1.4rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.si-month-card .mc-link{ font-size:.86rem; font-weight:700; color:var(--teal-ink); background:none; border:0; cursor:pointer; white-space:nowrap; }


/* ================= SHIFTS ================= */
/* Sticky header: keeps the month selector visible while the list scrolls. */
.si-shifts-head{
	position:sticky; top:0; z-index:3;
	margin:0 -18px 14px;              /* break out of .si-content side padding; flush to top */
	padding:16px 18px 12px;
	background:var(--bg-tint);
	border-bottom:1px solid var(--line);
}
.si-shifts-head .si-month-nav{ margin-bottom:0; }

.si-csv{
	display:flex; align-items:center; justify-content:center; gap:8px;
	width:100%; margin:0 0 14px;
	font-family:var(--font); font-weight:700; font-size:.95rem;
	color:var(--teal-ink); background:#fff;
	border:1.5px solid var(--teal-100); border-radius:var(--radius-pill);
	padding:11px 16px; cursor:pointer; transition:border-color .15s, background .15s;
}
.si-csv:hover{ border-color:var(--teal); background:var(--teal-50); }
.si-csv svg{ width:18px; height:18px; }

.si-month-nav{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	margin-bottom:14px;
}
.si-month-nav .mn-label{ font-size:1.15rem; font-weight:800; letter-spacing:-.01em; }
.si-navbtn{
	width:40px; height:40px; border-radius:12px; cursor:pointer;
	background:#fff; border:1.5px solid var(--line-2); color:var(--ink);
	display:grid; place-items:center; transition:border-color .15s;
}
.si-navbtn:hover:not(:disabled){ border-color:var(--ink); }
.si-navbtn:disabled{ opacity:.4; cursor:default; }

.si-total{
	display:flex; align-items:baseline; justify-content:space-between;
	background:var(--teal-50); border:1px solid var(--teal-100);
	border-radius:var(--radius); padding:14px 16px; margin-bottom:14px;
}
.si-total .tl{ font-size:.86rem; font-weight:700; color:var(--teal-ink); }
.si-total .tv{ font-size:1.3rem; font-weight:800; color:var(--teal-deep); letter-spacing:-.02em; }

.si-shift-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.si-shift{
	display:flex; align-items:center; gap:12px;
	background:var(--bg); border:1px solid var(--line);
	border-radius:14px; padding:13px 15px; box-shadow:var(--shadow);
}
.si-shift-day{ text-align:center; flex:none; width:42px; }
.si-shift-day .d{ display:block; font-size:1.2rem; font-weight:800; line-height:1; }
.si-shift-day .mo{ display:block; font-size:.7rem; font-weight:700; color:var(--muted); text-transform:uppercase; margin-top:2px; }
.si-shift-mid{ flex:1; min-width:0; }
.si-shift-time{ font-weight:700; color:var(--ink); font-size:.98rem; }
.si-shift-meta{ font-size:.82rem; color:var(--muted); margin-top:2px; }
.si-shift-dur{ font-weight:800; color:var(--teal-ink); font-size:.98rem; white-space:nowrap; }
.si-shift-open{ color:var(--coral); }

.si-empty{ text-align:center; color:var(--muted); padding:40px 10px; }
.si-empty svg{ width:40px; height:40px; color:var(--line-2); margin:0 auto 12px; }


/* ================= ACCOUNT ================= */
.si-profile{
	display:flex; align-items:center; gap:14px;
	background:var(--bg); border:1px solid var(--line);
	border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin-bottom:18px;
}
.si-avatar{
	width:52px; height:52px; flex:none; border-radius:50%;
	background:var(--teal); color:#fff; display:grid; place-items:center;
	font-weight:800; font-size:1.15rem;
}
.si-profile .pf-name{ font-size:1.15rem; font-weight:800; letter-spacing:-.01em; }
.si-profile .pf-login{ font-size:.86rem; color:var(--muted); margin-top:2px; }
.si-profile .pf-login code{ background:var(--teal-50); color:var(--teal-ink); padding:1px 6px; border-radius:6px; font-weight:600; }

.si-section{
	background:var(--bg); border:1px solid var(--line);
	border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin-bottom:18px;
}
.si-section h2{ margin:0 0 14px; font-size:1.05rem; letter-spacing:-.01em; }
.si-meter{ height:6px; border-radius:var(--radius-pill); background:var(--line); overflow:hidden; margin-top:8px; }
.si-meter::after{ content:""; display:block; height:100%; width:0; background:var(--danger); transition:width .2s, background .2s; }
.si-meter.s1::after{ width:25%; background:var(--danger); }
.si-meter.s2::after{ width:50%; background:var(--amber); }
.si-meter.s3::after{ width:75%; background:#3a9; }
.si-meter.s4::after{ width:100%; background:var(--teal); }


/* ================= toast ================= */
.si-toast-root{ position:fixed; left:0; right:0; bottom:84px; z-index:60; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.si-toast{
	max-width:90%;
	background:var(--ink); color:#fff;
	padding:12px 18px; border-radius:var(--radius-pill);
	font-weight:600; font-size:.95rem; box-shadow:var(--shadow-lg);
	opacity:0; transform:translateY(10px); transition:opacity .25s, transform .25s;
}
.si-toast.show{ opacity:1; transform:none; }
.si-toast.si-toast-ok{ background:var(--teal); }
.si-toast.si-toast-err{ background:var(--danger); }


/* ================= scanner / capture overlay ================= */
.si-overlay{
	position:fixed; inset:0; z-index:50;
	background:rgba(5,37,31,.55);
	display:flex; align-items:flex-end; justify-content:center;
	animation:si-fade .2s ease both;
}
.si-sheet{
	width:100%; max-width:480px;
	background:var(--bg);
	border-radius:var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow:var(--shadow-lg);
	padding:18px 18px calc(20px + env(safe-area-inset-bottom));
	animation:si-rise .28s cubic-bezier(.2,.8,.2,1) both;
	max-height:94svh; overflow:auto;
}
@keyframes si-rise{ from{ transform:translateY(100%); } to{ transform:none; } }
.si-sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.si-sheet-head h2{ margin:0; font-size:1.25rem; letter-spacing:-.02em; }
.si-x{
	width:38px; height:38px; flex:none; border-radius:50%; cursor:pointer;
	background:var(--bg-tint); border:0; color:var(--ink-2);
	display:grid; place-items:center;
}
.si-x:hover{ background:var(--line); }

/* confirm sheet */
.si-confirm-body p{ margin:0 0 18px; color:var(--ink-2); font-size:1rem; line-height:1.55; }
.si-confirm-actions{ display:flex; gap:12px; }
.si-confirm-actions .si-btn{ flex:1; }

/* camera */
.si-cam{
	position:relative; width:100%; aspect-ratio:1/1;
	background:#0b1411; border-radius:var(--radius); overflow:hidden;
	display:grid; place-items:center;
}
.si-cam video{ width:100%; height:100%; object-fit:cover; }
.si-reticle{
	position:absolute; inset:14%;
	border:3px solid rgba(255,255,255,.9);
	border-radius:18px;
	box-shadow:0 0 0 100vmax rgba(0,0,0,.28);
}
.si-reticle::before{
	content:""; position:absolute; left:0; right:0; height:3px;
	background:linear-gradient(90deg, transparent, var(--mint), transparent);
	animation:si-scanline 1.8s ease-in-out infinite;
}
@keyframes si-scanline{ 0%{ top:4%; } 50%{ top:92%; } 100%{ top:4%; } }
.si-cam-msg{ position:absolute; color:#fff; font-weight:600; padding:0 24px; text-align:center; }

.si-scan-hint{ margin:14px 0 6px; text-align:center; color:var(--ink-2); font-size:1rem; }
.si-link-btn{ display:block; width:100%; text-align:center; background:none; border:0; cursor:pointer; color:var(--teal-ink); font-weight:700; font-size:.95rem; padding:10px; }
.si-link-btn:hover{ text-decoration:underline; }

/* manual entry (test mode) */
.si-manual textarea{
	width:100%; min-height:88px; resize:vertical;
	font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9rem;
	border:1.5px solid var(--line-2); border-radius:12px; padding:12px;
}
.si-manual textarea:focus{ border-color:var(--teal); box-shadow:var(--ring); outline:none; }

/* capture confirmed -> extra minutes step */
.si-step-ok{ text-align:center; }
.si-ok-ic{
	width:60px; height:60px; margin:4px auto 12px;
	display:grid; place-items:center; border-radius:50%;
	background:var(--teal-50); color:var(--teal);
}
.si-step-ok h2{ margin:0 0 6px; font-size:1.3rem; }
.si-step-ok p{ margin:0 0 18px; color:var(--ink-2); line-height:1.5; }

.si-xtr-label{ font-weight:700; font-size:.95rem; margin:0 0 8px; }
.si-xtr-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.si-xtr-input{
	width:96px; text-align:center; font-size:1.15rem; font-weight:700;
	border:1.5px solid var(--line-2); border-radius:12px; padding:11px;
}
.si-xtr-input:focus{ border-color:var(--teal); box-shadow:var(--ring); outline:none; }
.si-xtr-unit{ color:var(--muted); font-weight:600; }
.si-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.si-chip{
	border:1.5px solid var(--line-2); background:#fff; color:var(--ink-2);
	border-radius:var(--radius-pill); padding:8px 14px; cursor:pointer;
	font-weight:700; font-size:.9rem; transition:.15s;
}
.si-chip:hover{ border-color:var(--teal); }
.si-chip.is-on{ background:var(--teal-50); border-color:var(--teal); color:var(--teal-ink); }


/* larger screens: keep it phone-width and centered */
@media (min-width:520px){
	.si-screen .si-card{ box-shadow:var(--shadow-lg); }
}