/* Shift AI — app styles */

.sai { padding: 24px 0 80px; }
.sai [hidden] { display: none !important; }
.sai-muted { color: var(--c-muted); }
.sai-small { font-size: .82rem; }
.sai-hint { font-size: .82rem; color: var(--c-muted); margin: 10px 2px 0; }

.sai-alert { border-radius: var(--r-md); padding: 14px 18px; margin: 0 auto 16px; width: min(1200px, 100% - 40px); font-size: .92rem; }
.sai-dialog .sai-alert { width: auto; }
.sai-alert--error { background: var(--c-danger-bg); color: var(--c-danger-fg); border: 1px solid var(--c-danger-line); }
.sai-alert--warn { background: var(--c-warn-bg); color: var(--c-warn-fg); border: 1px solid var(--c-warn-line); }

/* ---------- form controls ---------- */
.sai-field { display: grid; gap: 6px; margin-bottom: 16px; }
.sai-field > span { font-size: .82rem; font-weight: 600; color: var(--c-muted); letter-spacing: .01em; }
.sai input[type="text"], .sai input[type="password"], .sai input[type="number"], .sai input[type="date"],
.sai input[type="time"], .sai select, .sai textarea, .sai-dialog input[type="text"], .sai-dialog textarea {
	font: inherit; font-size: .92rem; padding: 8px 12px;
	border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
	background: var(--c-surface); color: var(--c-text); width: 100%; min-width: 0;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur);
}
.sai textarea, .sai-dialog textarea { resize: vertical; line-height: 1.6; }
.sai input:hover, .sai select:hover { border-color: var(--c-faint); }
.sai input:focus, .sai select:focus, .sai textarea:focus { border-color: var(--c-primary); outline: none; box-shadow: var(--shadow-glow); }
.sai input[type="color"] { width: 36px; height: 34px; padding: 3px; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-surface); cursor: pointer; }
.sai input[type="file"] { font-size: .85rem; border: 1.5px dashed var(--c-line-strong); padding: 12px; border-radius: var(--r-sm); }
.sai input::placeholder { color: var(--c-faint); }
.sai-check { display: flex; align-items: flex-start; gap: 8px; font-size: .89rem; margin: 6px 0 14px; cursor: pointer; }
.sai-check input { margin-top: .35em; accent-color: var(--c-primary); }
.sai input[type="checkbox"], .sai input[type="radio"] { accent-color: var(--c-primary); }
.w-num { width: 64px !important; text-align: center; }
.w-xs { width: 54px !important; text-align: center; }
.sai select.sai-auto, .sai-bar select, .sai-inline-form select, .sai-inline-form input { width: auto !important; }

/* ---------- lock screen ---------- */
.sai-lock { max-width: 960px; }
.sai-lock__header { text-align: center; margin-bottom: 8px; }
.sai-lock__title { margin: 12px 0 6px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.sai-lock__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 28px; }
.sai-card {
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl);
	padding: 28px; box-shadow: var(--shadow-1);
	transition: box-shadow var(--dur), border-color var(--dur);
}
.sai-card:hover { box-shadow: var(--shadow-2); border-color: var(--c-line-strong); }
.sai-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: var(--r-md);
	background: var(--c-primary-soft); font-size: 1.15rem; line-height: 1;
	margin-bottom: 10px;
}
.sai-card h2 { margin: 0 0 10px; font-size: 1.12rem; font-weight: 700; }
.sai-card p { font-size: .92rem; color: var(--c-muted); line-height: 1.65; }
#sai-key-input { font-family: var(--mono); letter-spacing: .03em; }
.sai-msg { min-height: 1.6em; margin-top: 14px; font-size: .9rem; }
.sai-msg--error { color: var(--c-danger); }
.sai-msg--ok { color: var(--c-ok); }

/* ---------- app shell ---------- */
.sai-main { width: min(1440px, 100% - 32px); margin-inline: auto; }
.sai-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	padding: 12px 18px; background: var(--c-surface); border: 1px solid var(--c-line);
	border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
/* toolbar + tabs sticky container */
.sai-top { position: sticky; top: 60px; z-index: 30; background: var(--c-bg); padding: 10px 0 2px; margin-top: -10px; }
/* scroll-margin so panels land below sticky */
.sai-panel :is(button, input, select, textarea, summary, td[role="button"]), .sai-tcard, .sai-box, .sai-panel h3 { scroll-margin-top: 180px; }
.sai-top .sai-tabs { margin-bottom: 10px; }
.sai-bar__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.02rem; }
.sai-bar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sai-badge {
	font-size: .74rem; padding: 3px 12px; border-radius: 999px;
	background: var(--c-accent-soft); color: var(--c-accent);
	font-weight: 700; letter-spacing: .01em;
	border: 1px solid color-mix(in srgb, var(--c-accent) 18%, transparent);
}
.sai-save-status { font-size: .83rem; color: var(--c-muted); transition: color .3s; }
.sai-save-status.is-ok { color: var(--c-ok); }
.sai-save-status.is-warn { color: var(--c-warn); }
.sai-save-status.is-error { color: var(--c-danger); }

/* ---------- tabs ---------- */
.sai-tabs {
	display: flex; gap: 2px; margin: 16px 0 0; padding: 4px; overflow-x: auto;
	background: var(--c-surface-3); border: 1px solid var(--c-line); border-radius: var(--r-md);
	scrollbar-width: none;
}
.sai-tabs::-webkit-scrollbar { display: none; }
.sai-tabs button {
	font: inherit; font-weight: 600; font-size: .9rem; background: none; border: 0;
	border-radius: var(--r-sm); padding: 9px 20px; color: var(--c-muted); cursor: pointer; white-space: nowrap;
	transition: background var(--dur) var(--ease), color var(--dur), box-shadow var(--dur);
}
.sai-tabs button:hover { color: var(--c-text); background: var(--c-primary-soft-2); }
.sai-tabs button[aria-selected="true"] {
	color: var(--c-primary); background: var(--c-surface);
	box-shadow: var(--shadow-1);
	font-weight: 700;
}

/* ---------- panels ---------- */
.sai-panel {
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl);
	padding: 28px; box-shadow: var(--shadow-1);
}
.sai-panel > p:first-child { margin-top: 0; }
.sai-panel h3 { font-size: .96rem; margin: 30px 0 12px; letter-spacing: .01em; font-weight: 700; color: var(--c-text); }
.sai-panel h3:first-child { margin-top: 0; }
.sai-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 20px; }
.sai-radio-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.sai-radio {
	display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 16px 18px;
	border: 1px solid var(--c-line); border-radius: var(--r-md); cursor: pointer;
	transition: border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.sai-radio input { grid-row: span 2; margin-top: .4em; }
.sai-radio small { color: var(--c-muted); font-size: .86rem; }
.sai-radio:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-soft); box-shadow: var(--shadow-glow); }
.sai-radio:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.sai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; align-items: center; }
.sai-actions--end { justify-content: flex-end; margin-top: 20px; }

/* ---------- box ---------- */
.sai-box {
	border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 22px;
	background: var(--c-surface-2);
	transition: border-color var(--dur);
}
.sai-box:hover { border-color: var(--c-line-strong); }
.sai-box h3 { margin: 0 0 6px !important; }
.sai-box .sai-msg { min-height: 1.4em; margin: 8px 0; font-size: .86rem; }
.sai-box .sai-key { font-size: .78rem; }

/* ---------- tables ---------- */
.sai-scroll { overflow: auto; max-width: 100%; border: 1px solid var(--c-line); border-radius: var(--r-md); margin-bottom: 14px; background: var(--c-surface); }
.sai-scroll--flush { border: 0; border-radius: 0; margin: 0; background: transparent; }
.sai-table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.sai-table th, .sai-table td { padding: 8px 10px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: middle; }
.sai-table thead th {
	background: var(--c-surface-2); font-size: .78rem; color: var(--c-muted);
	white-space: nowrap; position: sticky; top: 0; z-index: 2; font-weight: 700;
	letter-spacing: .02em; text-transform: none;
}
.sai-table tbody tr:last-child th, .sai-table tbody tr:last-child td { border-bottom: 0; }
.sai-table tbody tr { transition: background .15s; }
.sai-table tbody tr:hover { background: var(--c-surface-2); }
.sai-table--staff { min-width: 1080px; }
.sai-table--staff tbody th.sai-name { position: sticky; left: 0; background: var(--c-surface); z-index: 1; min-width: 150px; }
.sai-table--staff thead th { vertical-align: bottom; }
.sai-table--staff td, .sai-table--staff tbody th { padding: 6px 8px; }
.sai-table--staff tbody tr:hover th.sai-name { background: var(--c-surface-2); }
.sai-table--sum { font-variant-numeric: tabular-nums; }
.sai-table--sum tr.is-total th, .sai-table--sum tr.is-total td { font-weight: 700; background: var(--c-surface-2); }
.sai-allowed { display: flex; flex-wrap: wrap; gap: 5px; min-width: 132px; max-width: 230px; }
.sai-tag {
	display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid var(--c-line-strong);
	border-radius: 999px; padding: 2px 12px 2px 8px; font-size: .8rem; cursor: pointer; white-space: nowrap;
	transition: background var(--dur), border-color var(--dur);
}
.sai-tag:hover { background: var(--c-primary-soft-2); border-color: var(--c-primary); }
.sai-tag--skill { border-style: dashed; }
.sai-row-actions { white-space: nowrap; }
.sai-row-actions .btn { margin-left: 4px; }

.sai-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sai-chips { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sai-chip {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--c-surface-2); border: 1px solid var(--c-line);
	border-radius: 999px; padding: 4px 8px 4px 14px; font-size: .84rem;
	transition: border-color var(--dur);
}
.sai-chip:hover { border-color: var(--c-line-strong); }
.sai-chip .btn--icon { width: 22px; height: 22px; border-radius: 50%; border-color: transparent; }

/* ---------- shift type cards ---------- */
.sai-cards { display: grid; gap: 16px; }
.sai-tcard {
	border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); overflow: hidden;
	transition: border-color var(--dur), box-shadow var(--dur);
}
.sai-tcard:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-xs); }
.sai-tcard__head {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 14px 16px; background: var(--c-surface-2); border-bottom: 1px solid var(--c-line);
}
.sai-tcard__color { flex: none; }
.sai-tcard__name { width: auto !important; min-width: 120px; max-width: 190px; font-weight: 700; }
.sai-tcard__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.sai-mini { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--c-muted); white-space: nowrap; }
.sai-mini input[type="time"] { width: auto !important; }
.sai-pill {
	display: inline-flex; align-items: center; padding: 2px 10px;
	border-radius: 999px; background: var(--c-surface-3); color: var(--c-muted);
	font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.sai-pill.is-warn { background: var(--c-warn-bg); color: var(--c-warn-fg); }
.sai-need { border-collapse: collapse; width: 100%; font-size: .85rem; }
.sai-need th, .sai-need td { border-bottom: 1px solid var(--c-line); padding: 6px 8px; text-align: center; }
.sai-need thead th { font-size: .76rem; color: var(--c-muted); font-weight: 700; }
.sai-need thead th.is-sat { color: var(--c-sat); }
.sai-need thead th.is-sun { color: var(--c-sun); }
.sai-need tbody tr:last-child th, .sai-need tbody tr:last-child td { border-bottom: 0; }
.sai-need__lbl { text-align: left !important; white-space: nowrap; min-width: 118px; font-weight: 600; }
.sai-need__of { color: var(--c-faint); font-size: .74rem; margin-left: 5px; }
.sai-need tr.is-total th { color: var(--c-text); }
.sai-need tr.is-skill { background: var(--c-surface-2); }
.sai-need tr.is-skill input { border-style: dashed; }
.sai-skilltag {
	display: inline-flex; align-items: center; padding: 2px 10px;
	border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary);
	font-size: .78rem; font-weight: 700;
}

/* ---------- skills ---------- */
.sai-skills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.sai-skilledit {
	display: inline-flex; align-items: center; gap: 4px;
	background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: 999px;
	padding: 3px 6px 3px 12px;
	transition: border-color var(--dur), box-shadow var(--dur);
}
.sai-skilledit:focus-within { border-color: var(--c-primary); box-shadow: var(--shadow-glow); }
.sai-skilledit input { width: 8.5em !important; border: 0 !important; background: transparent; padding: 2px 0; font-size: .86rem; font-weight: 600; }
.sai-skilledit input:focus { box-shadow: none; }
.sai-skilledit__n { font-size: .74rem; color: var(--c-faint); white-space: nowrap; }
.sai-skilledit .btn--icon { width: 22px; height: 22px; border-radius: 50%; border-color: transparent; }

/* ---------- schedule grids ---------- */
.sai-grid { border-collapse: separate; border-spacing: 0; font-size: .8rem; width: 100%; }
.sai-grid th, .sai-grid td { border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); text-align: center; padding: 0; }
.sai-grid thead th { position: sticky; top: 0; background: var(--c-surface-2); z-index: 2; }
.sai-grid .sai-name {
	position: sticky; left: 0; background: var(--c-surface); z-index: 1; text-align: left;
	padding: 5px 10px; white-space: nowrap; min-width: 136px; max-width: 210px; overflow: hidden;
	text-overflow: ellipsis; font-weight: 600; border-right: 1px solid var(--c-line-strong);
}
.sai-grid thead .sai-name { z-index: 3; background: var(--c-surface-2); }
.sai-grid tfoot .sai-name { background: var(--c-surface-2); font-weight: 600; color: var(--c-muted); font-size: .76rem; }
.sai-grid tbody tr:hover .sai-name { background: var(--c-primary-soft-2); }
.sai-dh { min-width: 34px; padding: 4px 0 !important; line-height: 1.2; }
.sai-dh__d { display: block; font-weight: 700; }
.sai-dh__w { display: block; font-size: .68rem; color: var(--c-muted); }
.sai-dh.is-sat { background: color-mix(in srgb, var(--c-sat) 8%, var(--c-surface-2)) !important; }
.sai-dh.is-sat .sai-dh__w { color: var(--c-sat); }
.sai-dh.is-sun { background: color-mix(in srgb, var(--c-sun) 8%, var(--c-surface-2)) !important; }
.sai-dh.is-sun .sai-dh__w { color: var(--c-sun); }
.sai-c {
	width: 34px; height: 34px; cursor: pointer; user-select: none; font-weight: 700;
	transition: filter .12s, outline-color .12s;
}
.sai-c:hover { filter: brightness(.92); outline: 2px solid var(--c-primary); outline-offset: -2px; }
.sai-req.is-off { background: var(--c-danger-bg); color: var(--c-danger-fg); }
.sai-req.is-soft { background: var(--c-warn-bg); color: var(--c-warn-fg); }
.sai-req.is-want { font-size: .76rem; }
.sai-res.is-offday { background: var(--c-surface); color: var(--c-danger); font-weight: 500; font-size: .74rem; }
.sai-res.is-reqoff.is-offday { background: repeating-linear-gradient(45deg, var(--c-surface), var(--c-surface) 4px, var(--c-danger-bg) 4px, var(--c-danger-bg) 8px); }
.sai-res.is-reqsoft { box-shadow: inset 0 -3px 0 var(--c-warn); }
.sai-res.is-reqoff.is-on { box-shadow: inset 0 0 0 3px var(--c-danger); }
.sai-res.is-wantmiss { box-shadow: inset 0 -3px 0 #8b5cf6; }
.sai-res.is-locked { position: relative; }
.sai-res.is-locked::after { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-text); box-shadow: 0 0 0 1.5px var(--c-surface); }
.sai-sum { min-width: 40px; padding: 0 7px !important; color: var(--c-muted); font-variant-numeric: tabular-nums; background: var(--c-surface-2); font-size: .78rem; }
.sai-cov { font-size: .7rem; height: 26px; font-variant-numeric: tabular-nums; color: var(--c-muted); }
.sai-cov.is-ok { color: var(--c-ok); }
.sai-cov.is-under { background: var(--c-danger-bg); color: var(--c-danger-fg); font-weight: 700; }
.sai-cov.is-over { background: var(--c-warn-bg); color: var(--c-warn-fg); }
.sai-emp {
	display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px;
	border-radius: 5px; background: var(--c-surface-3); color: var(--c-muted);
	font-size: .66rem; font-weight: 700; vertical-align: 1px;
}
.sai-skilldot { color: var(--c-primary); font-size: .6rem; margin-left: 5px; vertical-align: 2px; }

/* ---------- generate & tools ---------- */
.sai-gen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sai-gen .sai-check { margin: 0; }
.sai-gen--tools { padding: 14px 0; border-top: 1px dashed var(--c-line); }
.sai-progress { width: 180px; height: 6px; background: var(--c-surface-3); border-radius: 999px; overflow: hidden; }
.sai-progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); transition: width .15s linear; border-radius: 999px; }
.sai-seg { display: inline-flex; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); overflow: hidden; }
.sai-seg label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; font-size: .84rem; cursor: pointer; transition: background var(--dur), color var(--dur); }
.sai-seg label:has(input:checked) { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 700; }
.sai-seg input { position: absolute; opacity: 0; pointer-events: none; }

.sai-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .8rem; color: var(--c-muted); margin: 10px 0 0; }
.sai-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.sai-legend__sw {
	display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 5px;
	font-weight: 700; font-size: .72rem; border: 1px solid var(--c-line); position: relative;
	background: var(--c-surface);
}
.sai-legend__sw.is-locked-sw::after { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-text); }
.sai-legend__sw.is-reqoff-sw { background: repeating-linear-gradient(45deg, var(--c-surface), var(--c-surface) 4px, var(--c-danger-bg) 4px, var(--c-danger-bg) 8px); }

/* ---------- violations ---------- */
.sai-violations { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.sai-violations li { padding: 9px 14px; border-radius: var(--r-sm); font-size: .88rem; display: flex; gap: 10px; align-items: baseline; }
.sai-violations .is-hard { background: var(--c-danger-bg); color: var(--c-danger-fg); }
.sai-violations .is-warn { background: var(--c-warn-bg); color: var(--c-warn-fg); }
.sai-violations .is-info { background: var(--c-surface-2); }
.sai-violations .is-ok { background: var(--c-ok-bg); color: var(--c-ok-fg); font-weight: 600; }
.sai-vtag {
	font-size: .7rem; font-weight: 700; padding: 2px 10px; border-radius: 999px;
	background: var(--c-surface); white-space: nowrap;
}
.is-hard .sai-vtag { color: var(--c-danger); } .is-warn .sai-vtag { color: var(--c-warn); } .is-info .sai-vtag { color: var(--c-muted); }
.sai-precheck { margin-bottom: 16px; max-height: 190px; }

/* ---------- dialogs ---------- */
.sai-dialog {
	border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: 28px;
	width: min(560px, 100% - 32px); box-shadow: var(--shadow-3);
	color: var(--c-text); background: var(--c-surface);
	animation: sai-dialog-in .25s var(--ease);
}
@keyframes sai-dialog-in { from { opacity: 0; transform: scale(.96) translateY(8px); } }
.sai-dialog::backdrop { background: rgba(8, 12, 24, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sai-dialog h2 { margin: 0 0 12px; font-size: 1.14rem; font-weight: 700; }
.sai-dialog p { font-size: .92rem; }
.sai-key {
	display: block; font-family: var(--mono); font-size: .9rem;
	background: #0d1320; color: #dce5f6; border-radius: var(--r-sm);
	padding: 14px 16px; word-break: break-all; user-select: all; margin: 12px 0;
	border: 1px solid rgba(255, 255, 255, .06);
}
.sai-confirm-input { margin: 12px 0 0; }

/* ---------- staff viewer / request form ---------- */
.sai-ro { cursor: default; }
.sai-ro:hover { filter: none; outline: none; }
.sai-grid tr.is-me .sai-name { background: var(--c-warn-bg); box-shadow: inset 4px 0 0 var(--c-warn); }
.sai-grid tr.is-me td { border-top: 2px solid var(--c-warn); border-bottom: 2px solid var(--c-warn); }
.sai-mine {
	margin: 16px 0 4px; padding: 18px 20px; background: var(--c-surface);
	border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--shadow-1);
}
.sai-mine .sai-chips { margin-top: 10px; }
.sai-chip--shift { background: var(--c-surface); border: 2px solid var(--c-line); padding: 4px 14px; }
.sai-view-scroll { margin-top: 16px; }
.sai-bar .sai-inline-form { display: inline-flex; align-items: center; gap: 6px; }
#sai-share-link { font-size: .78rem; }

.sai-panel--solo { margin-top: 14px; }
.sai-formpage { max-width: 720px; }
.sai-cal { width: 100%; border-collapse: separate; border-spacing: 5px; table-layout: fixed; margin: 10px 0 14px; }
.sai-cal th { font-size: .76rem; color: var(--c-muted); font-weight: 700; padding: 2px 0; }
.sai-cal th.is-sat { color: var(--c-sat); } .sai-cal th.is-sun { color: var(--c-sun); }
.sai-cal td {
	height: 64px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface);
	text-align: center; vertical-align: top; padding: 6px 2px; cursor: pointer; user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.sai-cal td:hover { border-color: var(--c-primary); box-shadow: var(--shadow-glow); }
.sai-cal td.is-empty { border: 0; background: transparent; cursor: default; box-shadow: none; }
.sai-cal__d { display: block; font-size: .78rem; color: var(--c-muted); }
.sai-cal__m { display: inline-grid; place-items: center; min-width: 29px; height: 27px; margin-top: 3px; border-radius: 7px; font-weight: 700; padding: 0 4px; }
.sai-cal td.is-off { background: var(--c-danger-bg); border-color: var(--c-danger-line); }
.sai-cal td.is-off .sai-cal__m { color: var(--c-danger-fg); }
.sai-cal td.is-soft { background: var(--c-warn-bg); border-color: var(--c-warn-line); }
.sai-cal td.is-soft .sai-cal__m { color: var(--c-warn-fg); }
.sai-cal td.is-want { border-color: var(--c-line-strong); }
.sai-form-comment { margin-top: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
	.sai-panel { padding: 18px; border-radius: var(--r-lg); }
	.sai-bar { padding: 10px 14px; }
	.sai-top { top: 58px; }
	.sai-tcard__meta { margin-left: 0; width: 100%; }
	.sai-tcard__name { max-width: none; flex: 1 1 140px; }
	.sai-grid .sai-name { min-width: 104px; }
	.sai-c { width: 30px; height: 32px; }
	.sai-dialog { padding: 22px; border-radius: var(--r-lg); }
}

/* ---------- print ---------- */
@media print {
	@page { size: A4 landscape; margin: 8mm; }
	:root { color-scheme: light; }
	body { background: #fff; color: #000; }
	.site-header, .site-footer, .sai-bar, .sai-tabs, .sai-gen, .sai-violations, .sai-precheck,
	.sai-panel h3, .sai-lock, .skip-link, .sai-box, .sai-mine, #sai-emp-summary, .sai-panel > p, .sai-top { display: none !important; }
	.sai, .sai-main, .sai-panel { padding: 0 !important; border: 0 !important; width: auto !important; box-shadow: none !important; margin: 0 !important; }
	.sai-panel[data-panel]:not([data-panel="result"]):not([data-panel="history"]) { display: none !important; }
	.sai-print-title { display: block; font-weight: 700; font-size: 13pt; margin-bottom: 6px; }
	.sai-scroll { overflow: visible; border: 0; }
	.sai-grid { font-size: 8pt; }
	.sai-grid .sai-name, .sai-grid thead th { position: static; }
	.sai-c, .sai-dh { width: auto; min-width: 0; height: 17px; }
	.sai-res.is-locked::after, .sai-skilldot { display: none; }
	* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.sai-print-title { display: none; }