/* ==========================================================================
   ShiftPeek — clock.css  (Clock Interface / CI kiosk)
   Direction B "Branded Card": light, ShiftPeek-branded, QR in a rounded card.
   Self-contained: the CI is a separate static app, so it carries its own
   palette/typography rather than depending on index.css.
   ========================================================================== */

: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;
	--danger:     #c43d2f;

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

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

*{ box-sizing:border-box; }

html,body{ height:100%; }

body.ci-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:8px; }

img{ display:block; }


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


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


/* ---------- spinner ---------- */
.ci-spinner{
	width:38px; height:38px;
	border-radius:50%;
	border:4px solid var(--teal-100);
	border-top-color:var(--teal);
	animation:ci-spin .8s linear infinite;
}
@keyframes ci-spin{ to{ transform:rotate(360deg); } }

.ci-msg{ margin:0; color:var(--ink-2); font-weight:600; font-size:1.05rem; }


/* ---------- card ---------- */
.ci-card{
	width:100%;
	max-width:440px;
	background:var(--bg);
	border:1px solid var(--line);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-lg);
	padding:30px 28px;
}


/* ===================== LOADING ===================== */
.ci-loading{ gap:22px; }


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


/* ===================== LOGIN ===================== */
.ci-login .ci-card{ max-width:420px; }
.ci-login-head{ text-align:center; margin-bottom:22px; }
.ci-login-head .ci-brand{ margin-bottom:14px; }
.ci-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;
}
.ci-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); }
.ci-login-head h1{ margin:0 0 6px; font-size:1.5rem; letter-spacing:-.02em; }
.ci-login-head p{ margin:0; color:var(--ink-2); font-size:1rem; line-height:1.5; }

.ci-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;
}
.ci-alert.show{ display:block; }
.ci-alert.ci-alert-info{ background:var(--teal-50); color:var(--teal-deep); border-color:var(--teal-100); }

.ci-field{ margin-bottom:16px; }
.ci-field label{
	display:block;
	font-weight:700; font-size:.92rem;
	color:var(--ink);
	margin-bottom:7px;
}
.ci-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;
}
.ci-input::placeholder{ color:#9aa3aa; }
.ci-input:focus{ border-color:var(--teal); box-shadow:var(--ring); }
.ci-hint{ margin:7px 0 0; font-size:.86rem; color:var(--muted); line-height:1.45; }
.ci-hint code{
	background:var(--teal-50); color:var(--teal-ink);
	padding:1px 6px; border-radius:6px;
	font-size:.85em; font-weight:600;
}

/* ---------- buttons (always clearly visible) ---------- */
.ci-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	font-family:var(--font);
	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;
}
.ci-btn:disabled{ opacity:.6; cursor:default; }
.ci-btn-primary{ background:var(--teal); color:#fff; box-shadow:var(--shadow); }
.ci-btn-primary:hover:not(:disabled){ background:var(--teal-dark); }
.ci-btn-block{ width:100%; }
.ci-btn-ghost{
	background:#fff; color:var(--ink);
	border-color:var(--line-2);
}
.ci-btn-ghost:hover:not(:disabled){ border-color:var(--ink); }

.ci-login-foot{
	margin:18px 0 0;
	text-align:center;
	font-size:.86rem; color:var(--muted); line-height:1.5;
}


/* ===================== CLOCK (rotating QR) ===================== */
.ci-clock-card{ max-width:460px; padding:24px 24px 20px; }

.ci-clock-head{
	display:flex; align-items:center; justify-content:space-between;
	gap:14px;
	margin-bottom:18px;
}
.ci-store{ text-align:right; min-width:0; }
.ci-store-name{
	display:block;
	font-weight:800; font-size:1.05rem; color:var(--ink);
	letter-spacing:-.01em;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	max-width:200px;
}
.ci-store-badge{
	display:inline-block;
	font-size:.8rem; font-weight:700; color:var(--teal-ink);
	background:var(--teal-50); border:1px solid var(--teal-100);
	border-radius:var(--radius-pill);
	padding:2px 10px;
	margin-top:3px;
}

/* QR */
.ci-qr-wrap{
	display:flex; justify-content:center;
	padding:18px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:inset 0 0 0 1px #fff;
}
.ci-qr{ width:280px; height:280px; line-height:0; }
.ci-qr canvas, .ci-qr img, .ci-qr table{ width:280px !important; height:280px !important; }

.ci-scan-hint{
	margin:18px 0 16px;
	text-align:center;
	font-size:1.08rem; color:var(--ink-2); line-height:1.45;
}
.ci-scan-hint strong{ color:var(--teal-ink); font-weight:800; }

/* countdown */
.ci-count{ margin-bottom:18px; }
.ci-count-track{
	height:8px;
	background:var(--teal-50);
	border-radius:var(--radius-pill);
	overflow:hidden;
}
.ci-count-bar{
	height:100%;
	width:100%;
	background:linear-gradient(90deg, var(--mint), var(--teal));
	border-radius:var(--radius-pill);
}
.ci-count-text{
	margin:8px 0 0;
	text-align:center;
	font-size:.9rem; color:var(--muted); font-weight:600;
}
.ci-count-text b{ color:var(--teal-ink); }

/* footer: live clock + sign out */
.ci-clock-foot{
	display:flex; align-items:center; justify-content:space-between;
	gap:14px;
	padding-top:16px;
	border-top:1px solid var(--line);
}
.ci-time{ display:flex; flex-direction:column; }
.ci-time-h{
	font-size:1.7rem; font-weight:800; color:var(--ink);
	letter-spacing:-.02em; line-height:1;
	font-variant-numeric:tabular-nums;
}
.ci-time-d{ font-size:.82rem; color:var(--muted); font-weight:600; margin-top:4px; }
.ci-signout{
	font-family:var(--font);
	font-size:.9rem; font-weight:700;
	color:var(--ink-2);
	background:#fff;
	border:1.5px solid var(--line-2);
	border-radius:var(--radius-pill);
	padding:9px 16px;
	cursor:pointer;
	transition:border-color .15s, color .15s;
}
.ci-signout:hover{ border-color:var(--ink); color:var(--ink); }

.ci-poweredby{
	margin:0;
	font-size:.82rem; color:var(--muted); font-weight:600;
	text-align:center;
}


/* ---------- confirm sign-out inline panel ---------- */
.ci-confirm{ text-align:center; }
.ci-confirm h1{ margin:0 0 8px; font-size:1.35rem; }
.ci-confirm p{ margin:0 0 22px; color:var(--ink-2); line-height:1.5; }
.ci-confirm-actions{ display:flex; gap:12px; }
.ci-confirm-actions .ci-btn{ flex:1; }


/* ---------- small screens ---------- */
@media (max-width:480px){
	.ci-card{ padding:24px 18px; }
	.ci-qr, .ci-qr canvas, .ci-qr img, .ci-qr table{ width:240px !important; height:240px !important; }
	.ci-store-name{ max-width:150px; }
}