@font-face { font-family:Gordita; src:url('fonts/Gordita-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:Gordita; src:url('fonts/Gordita-Medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:Gordita; src:url('fonts/Gordita-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
:root { --black:#040404; --white:#fff; --olive:#757321; --gold:#cc901a; --green:#484715; --sage:#acab7a; --cream:#f1f1e9; --line:#ddddd1; --control-border:#838376; --muted:#5e5e53; --danger:#a22832; --radius:14px; --text-small:.875rem; --text-ui:1rem; --text-body:1.0625rem; color-scheme:light; }
* { box-sizing:border-box; }
body { margin:0; color:var(--black); background:#f8f8f3; font:400 var(--text-body)/1.6 Gordita,Arial,sans-serif; overflow-wrap:anywhere; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.65; }
a { color:var(--green); }
img { max-width:100%; height:auto; }
h1,h2,p { margin-top:0; }
h1 { font-size:clamp(2rem,1.5rem + 2vw,2.875rem); line-height:1.2; letter-spacing:-.025em; margin-bottom:12px; }
h2 { font-size:1.5rem; line-height:1.3; letter-spacing:-.025em; }
small,.small { font-size:var(--text-small); }
strong { font-weight:700; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.sidebar :focus-visible { outline-color:var(--green); outline-offset:-3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:8px; left:8px; transform:translateY(-150%); z-index:100; background:white; padding:12px; border-radius:8px; }
.skip-link:focus { transform:none; }
.muted { color:var(--muted); }
.eyebrow { color:var(--green); font-size:var(--text-small); font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:5px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:10px 17px; border:1px solid var(--control-border); border-radius:8px; color:var(--green); background:white; text-decoration:none; font-size:var(--text-ui); font-weight:500; line-height:1.5; white-space:normal; text-align:center; transition:background .15s,box-shadow .15s; }
.button:hover { background:var(--cream); border-color:var(--sage); }
.button.primary { border-color:var(--gold); background:var(--gold); color:#171504; font-weight:700; box-shadow:0 4px 11px #80570014; }
.button.primary:hover { background:#dea12b; box-shadow:0 6px 16px #80570024; }
.button.compact { padding:8px 12px; font-size:var(--text-ui); }
.button.danger { color:var(--danger); margin-right:auto; }
.icon-button { min-width:48px; min-height:48px; flex-shrink:0; border:1px solid var(--control-border); border-radius:8px; background:white; color:var(--green); font-size:1.5rem; line-height:1; }
.icon-button:hover { background:var(--cream); }
label { display:grid; min-width:0; gap:8px; font-size:var(--text-ui); font-weight:500; color:var(--green); }
input:not([type=checkbox]),select,textarea { width:100%; min-width:0; min-height:48px; padding:10px 12px; color:var(--black); border:1px solid var(--control-border); border-radius:7px; background:white; font-size:var(--text-ui); font-weight:400; line-height:1.5; }
input::placeholder { color:var(--muted); opacity:1; }
input:focus,select:focus,textarea:focus { border-color:var(--green); }
input[type=date]:not(:disabled):not([readonly]) { cursor:pointer; }
input:disabled,select:disabled,textarea:disabled { background:#f5f5ef; opacity:1; color:#666659; cursor:default; }
input[type=checkbox] { width:20px; height:20px; min-width:20px; margin:0; accent-color:var(--green); cursor:pointer; }
.check { display:flex; align-items:center; gap:10px; min-height:48px; font-weight:400; color:var(--black); }
.check small { display:block; margin-top:4px; color:var(--muted); }
.check-with-info { display:flex; align-items:center; gap:8px; }
.field-label-with-info { display:flex; align-items:center; gap:8px; width:max-content; max-width:100%; }
fieldset { border:0; margin:0; padding:0; min-width:0; }
.wide-field { grid-column:1/-1; }
.time-field legend { font-size:var(--text-ui); font-weight:500; color:var(--green); margin-bottom:8px; }
.time-selects { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:20px; }
.hours-form-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:20px; }
.hours-form-grid > label,.hours-form-grid > .time-field { width:100%; min-width:0; }
.hours-form-grid > label > input,.hours-form-grid > label > select { width:100%; }
.form-grid label small { font-size:var(--text-small); font-weight:400; line-height:1.6; color:var(--muted); }
.form-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.form-footer small { color:var(--muted); }
.info { position:relative; display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--control-border); border-radius:50%; font:bold 1rem/1 Georgia,serif; color:var(--green); vertical-align:middle; cursor:help; }
.tooltip { display:none; position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%); width:290px; max-width:70vw; padding:12px 14px; background:var(--green); color:white; border-radius:7px; box-shadow:0 4px 15px #0002; font:400 var(--text-small)/1.6 Gordita,Arial,sans-serif; text-align:left; white-space:normal; z-index:30; }
.info:focus .tooltip,.info:hover .tooltip { display:block; }
.notice { padding:13px 16px; margin:0 0 20px; border:1px solid var(--line); border-radius:8px; background:var(--cream); color:var(--green); font-size:var(--text-ui); }
.notice.error,.form-error { background:#fff0f0; color:#84232c; border-color:#e7bdc0; }
.notice.success { background:#edf0e1; color:var(--green); }
.form-error { padding:12px; border-radius:7px; margin:18px 0 0; font-size:var(--text-ui); }
.tft-portal { background:var(--white); }
.tft-portal.menu-open { overflow:hidden; }
.app-shell { --sidebar-width:15.25rem; display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); min-height:100vh; transition:grid-template-columns .2s ease; }
.sidebar { position:sticky; top:0; z-index:40; height:100vh; height:100dvh; min-width:0; background:var(--white); color:var(--black); border-right:1px solid var(--line); box-shadow:8px 0 28px #0404040d; }
.sidebar-content { display:flex; flex-direction:column; height:100%; padding:22px 14px 18px; overflow-y:auto; scrollbar-width:thin; }
.brand { display:grid; place-items:center; flex-shrink:0; height:128px; margin:0 8px 18px; }
.brand img { display:block; width:auto; max-width:180px; max-height:112px; object-fit:contain; }
.sidebar-role { display:grid; gap:3px; margin:0 10px 14px; padding-bottom:15px; border-bottom:1px solid var(--line); color:var(--green); font-size:var(--text-ui); }
.sidebar-role small { color:var(--muted); font-size:var(--text-small); font-weight:400; }
.sidebar nav { display:grid; gap:3px; }
.sidebar nav button,.sidebar .logout-link,.sidebar-back-link { display:flex; align-items:center; gap:11px; width:100%; min-width:0; min-height:48px; padding:7px 10px; border:0; border-radius:4px; background:transparent; color:var(--black); text-align:left; font-size:var(--text-ui); font-weight:500; line-height:1.4; text-decoration:none; }
.sidebar .shell-icon { width:30px; height:30px; flex:0 0 30px; border:1px solid currentColor; border-radius:50%; color:var(--olive); display:grid; place-content:center; }
.sidebar .shell-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sidebar .nav-label { min-width:0; font:inherit; }
.sidebar nav button:hover,.sidebar nav button:focus-visible,.sidebar nav button[aria-current=page],.sidebar-bottom a:hover,.sidebar-bottom a:focus-visible { color:var(--green); background:var(--cream); }
.sidebar-bottom { display:grid; gap:3px; margin-top:auto; padding-top:7px; border-top:1px solid var(--line); }
.sidebar-toggle { position:absolute; top:4px; right:-22px; z-index:2; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--green); display:grid; place-items:center; }
.sidebar-toggle::before { content:''; position:absolute; inset:6px; border:1px solid var(--line); border-radius:50%; background:var(--white); }
.sidebar-toggle span { position:relative; font:400 1.375rem/1 Arial,sans-serif; transform:translateY(-1px); }
.sidebar-toggle:hover::before { background:var(--cream); border-color:var(--sage); }
.sidebar-backdrop { position:fixed; inset:0; z-index:39; width:100%; height:100%; border:0; background:#04040440; }
#main { --content-gutter:24px; min-width:0; padding:0 var(--content-gutter); }
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:88px; margin-inline:calc(-1 * var(--content-gutter)); padding:10px var(--content-gutter); border-bottom:1px solid var(--line); background:var(--white); }
.avatar { width:44px; height:44px; flex-shrink:0; border:1px solid #d2d1af; border-radius:50%; color:var(--green); background:#e7e7d6; font-weight:700; font-size:var(--text-ui); }
.avatar:hover { background:#dedec4; }
.page-heading { display:flex; flex:1 1 auto; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; min-width:0; margin:0; }
.page-heading>div:first-child { min-width:0; }
.page-heading h1 { margin:0; font-size:clamp(1.5rem,1.15rem + 1vw,2rem); line-height:1.15; }
.page-heading p { margin:0; color:var(--muted); font-size:var(--text-ui); }
.heading-actions { display:flex; flex-shrink:0; flex-wrap:wrap; gap:10px; min-width:0; margin-left:auto; }
.admin-context { margin:14px 0 0; border-left:3px solid var(--gold); padding:8px 12px; background:#fbf4e3; font-size:var(--text-small); color:var(--green); }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:18px; border:1px solid var(--line); background:white; border-radius:12px 12px 0 0; }
.week-nav { display:flex; align-items:center; gap:12px; }
.week-title { display:grid; min-width:0; text-align:center; }
.week-title strong { font-size:var(--text-ui); color:var(--green); }
.week-title span { font-size:var(--text-small); color:var(--muted); }
.date-picker { width:12rem; max-width:100%; }
.toolbar-filters { display:flex; flex:1 1 350px; flex-wrap:nowrap; align-items:center; gap:10px; margin-left:auto; justify-content:flex-end; }
.toolbar-filters label { max-width:14rem; flex:1 1 12rem; }
.toolbar-filters input,.toolbar-filters select,.date-picker input { font-size:var(--text-ui); }
.search-label { width:240px; }
.summary-line { display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; min-height:53px; padding:14px 18px; background:white; border:1px solid var(--line); border-top:0; font-size:var(--text-small); color:var(--muted); }
.summary-line strong { color:var(--green); font-size:var(--text-ui); }
.schedule-scroll { overflow:auto; max-height:none; min-height:280px; border:1px solid var(--line); border-top:0; border-radius:0 0 12px 12px; background:white; scrollbar-color:var(--sage) var(--cream); }
.schedule { width:100%; min-width:64rem; table-layout:fixed; border-collapse:separate; border-spacing:0; }
.schedule th,.schedule td { border-bottom:1px solid var(--line); border-right:1px solid var(--line); vertical-align:top; text-align:left; }
.schedule th:last-child,.schedule td:last-child { border-right:0; }
.schedule thead th { position:sticky; top:0; z-index:5; height:84px; background:var(--cream); text-align:center; padding:6px 8px; }
.schedule thead th span,.schedule thead th small { display:block; color:var(--muted); font-size:var(--text-small); font-weight:400; line-height:1.15; text-transform:uppercase; }
.schedule thead th strong { display:grid; place-items:center; width:2.5rem; height:2.5rem; margin:0 auto; border:3px solid transparent; border-radius:50%; font-size:1.625rem; line-height:1; }
.schedule thead th.today { background:#e9e9d6; }
.schedule thead th.today strong { border-color:var(--gold); background:var(--gold); color:#171504; box-shadow:none; }
.initial { display:grid; place-items:center; flex-shrink:0; width:2rem; height:2rem; background:var(--olive); color:white; border-radius:50%; font-size:var(--text-small); font-weight:700; }
.schedule td { height:220px; padding:9px; background:#fff; }
.schedule td.today { background:#fdfdf8; }
.shift-card { display:grid; gap:5px; width:100%; margin-bottom:7px; padding:11px 8px; border:1px solid #d9d9bd; border-left:3px solid var(--olive); border-radius:7px; background:#eeeedf; color:var(--green); text-align:left; font-size:var(--text-small); overflow-wrap:anywhere; }
.shift-card:hover { background:#ededdc; border-color:var(--sage); }
.shift-card strong { font-size:var(--text-ui); }
.shift-card span { color:var(--black); }
.shift-card small { font-size:var(--text-small); color:var(--muted); }
.shift-card .shift-time { font-size:var(--text-ui); font-weight:500; color:var(--green); }
.shift-card.unfilled { border:1px dashed #b9b9a7; border-left:3px solid var(--sage); background:#fafaf7; }
.shift-card.unfilled:hover { background:var(--cream); border-color:var(--olive); }
.shift-card.unfilled .shift-person { color:var(--muted); }
.add-cell { display:block; width:100%; min-height:44px; padding:0; border:1px dashed transparent; border-radius:6px; background:transparent; color:var(--green); font-size:1.5rem; }
.schedule td:hover .add-cell,.add-cell:focus-visible { opacity:1; border-color:var(--line); background:var(--cream); }
/* Keep the native add button, but make the entire empty day its click/tap target. */
.schedule td.empty-day { position:relative; }
.schedule td.empty-day > .add-cell { position:absolute; inset:0; width:100%; height:100%; border-radius:0; outline-offset:-3px; }
.hours-bulk { display:flex; align-items:center; justify-content:flex-end; gap:16px; padding:10px 18px; border:1px solid var(--line); border-top:0; background:white; }
.hours-bulk-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-shrink:0; }
.hours-select-all { min-height:44px; white-space:nowrap; }
.hours-bulk .button:disabled { cursor:not-allowed; }
.hours-list { border:1px solid var(--line); border-top:0; border-radius:0 0 12px 12px; overflow-x:auto; background:white; }
.hours-table { width:100%; min-width:69rem; border-collapse:collapse; font-size:var(--text-ui); }
.hours-table th,.hours-table td { padding:8px 10px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--line); }
.hours-table thead th { background:var(--cream); color:var(--green); font-size:var(--text-small); font-weight:500; white-space:nowrap; }
.hours-table tbody tr:last-child>* { border-bottom:0; }
.hours-table tbody tr,.hours-table tbody tr:hover { background:#fff; }
.hours-table tbody tr.is-unapproved,.hours-table tbody tr.is-unapproved:hover { background:rgb(204 144 26 / 5%); }
.hours-table .hours-select { width:48px; padding-inline:6px; text-align:center; }
.hours-select label { display:inline-grid; place-items:center; width:36px; height:36px; cursor:pointer; }
.hours-select input:disabled { cursor:not-allowed; opacity:.45; }
.hours-table .hours-person { min-width:9rem; max-width:14rem; }
.hours-role { min-width:12rem; max-width:16rem; overflow-wrap:normal; word-break:normal; -webkit-hyphens:auto; hyphens:auto; text-wrap:pretty; }
.hours-location { min-width:6rem; max-width:10rem; }
.hours-date { white-space:nowrap; color:var(--green); }
.hours-table .hours-status,.hours-table .hours-action { white-space:nowrap; }
.hours-table .hours-status { width:7rem; text-align:center; }
.hours-status-label { display:none; }
.hours-status .badge { min-width:3.25rem; font-weight:700; }
.hours-table .hours-action { width:1%; padding-inline:6px; text-align:right; }
.hours-action .button { min-width:7.5rem; max-width:9rem; min-height:42px; padding:6px 8px; white-space:normal; }
.hours-action .button:disabled { cursor:not-allowed; opacity:.7; }
.time-block { display:grid; gap:4px; }
.time-block>.hours-cell-label { display:none; }
.time-block strong { font-size:var(--text-ui); white-space:nowrap; }
.time-block small { color:var(--muted); font-size:var(--text-small); }
.badge { display:inline-flex; align-items:center; justify-content:center; border:1px solid #deded1; border-radius:20px; padding:5px 10px; background:#f3f3ed; color:#555548; white-space:normal; text-align:center; font-size:var(--text-small); }
.badge.approved { background:#eceedd; color:var(--green); border-color:#d5d9b7; }
.card { border:1px solid var(--line); border-radius:12px; background:white; padding:24px; margin-top:20px; }
.card h2 { font-size:1.25rem; color:var(--green); }
.card-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:15px; }
.card-heading h2 { margin:0; }
.employee-records #toolbar .toolbar { border:0; border-radius:0; padding:0; margin-bottom:18px; }
.employee-fields { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:12px 20px; }
.employee-fields .wide-field { grid-column:auto; }
.employee-options { grid-column:1/-1; display:grid; gap:8px; min-width:0; }
.add-employee .employee-options { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.employee-travel-options,.employee-status-options { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; min-width:0; }
.employee-options .check,.employee-options .check-with-info { min-height:48px; margin:0; }
.employee-options .km-field { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.employee-options .km-field input { width:6rem; }
.employee-status-options { justify-content:flex-end; }
.employee-status-options .info .tooltip { left:auto; right:0; transform:none; max-width:min(290px,calc(100vw - 48px)); }
.add-employee .form-footer { margin-top:12px; padding-top:12px; }
.table-scroll { position:relative; overflow-x:auto; overflow-y:visible; padding-top:1px; }
.records-table { width:100%; border-collapse:collapse; font-size:var(--text-ui); }
.records-table th { background:var(--cream); color:var(--green); font-size:var(--text-small); font-weight:500; text-align:left; padding:13px; white-space:nowrap; }
.records-table td { padding:16px 13px; border-bottom:1px solid var(--line); vertical-align:middle; min-width:90px; max-width:260px; overflow-wrap:anywhere; }
.records-table td:nth-child(3) { min-width:170px; }
.records-table td:last-child { text-align:right; }
.records-table small { display:block; color:var(--muted); }
.records-table .info .tooltip { top:calc(100% + 9px); bottom:auto; left:auto; right:-10px; transform:none; }
.empty-state { border:1px solid var(--line); border-top:0; border-radius:0 0 12px 12px; padding:60px 24px; background:white; text-align:center; }
.empty-state h2 { color:var(--green); }
.empty-state p { color:var(--muted); font-size:var(--text-ui); }
.empty-state .button { margin-top:10px; }
.empty-icon { display:inline-grid; place-items:center; width:56px; height:56px; background:var(--cream); color:var(--olive); border-radius:14px; font-size:1.75rem; margin-bottom:20px; }
.app-footer { display:flex; justify-content:space-between; gap:15px; padding:30px 0; color:var(--muted); font-size:var(--text-small); }
.app-footer span { color:var(--muted); }
.print-heading { display:none; }
.mobile-day-nav,.mobile-label,.mobile-date-weekday { display:none; }
dialog { width:min(760px,calc(100% - 24px)); max-width:calc(100% - 16px); max-height:calc(100dvh - 24px); padding:28px; border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 90px #14140033; color:var(--black); overflow:auto; }
dialog::backdrop { background:#22220f70; backdrop-filter:blur(3px); }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:22px; }
.dialog-heading h2 { margin:0; color:var(--green); font-size:1.5rem; }
.dialog-heading .icon-button { border:0; background:var(--cream); flex-shrink:0; }
.dialog-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:26px; border-top:1px solid var(--line); padding-top:20px; }
dialog .employee-fields { grid-template-columns:1fr 1fr; }
dialog .employee-fields .wide-field { grid-column:1/-1; }
.approval-check { display:flex; align-items:flex-start; justify-content:flex-start; gap:10px; background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:15px; }
.approval-check > input { flex:0 0 20px; margin-top:4px; }
.approval-check > span { flex:1 1 auto; min-width:0; }
.shift-date-picker { margin:0 0 24px; padding:16px; border:1px solid var(--line); border-radius:10px; }
.shift-date-picker legend { padding:0 5px; font-size:var(--text-ui); font-weight:500; color:var(--green); }
.shift-date-picker .small { margin:0 0 12px; font-size:var(--text-small); }
.date-month-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.date-month-label { font-size:var(--text-ui); color:var(--green); text-align:center; }
.date-weekdays,.date-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.date-weekdays { text-align:center; font-size:var(--text-small); color:var(--muted); margin-bottom:6px; }
.date-day { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:60px; padding:6px 0; margin:0; border:1px solid var(--control-border); border-radius:6px; cursor:pointer; font-size:var(--text-ui); }
.date-day input[type=checkbox] { width:16px; height:16px; min-width:16px; }
.date-day.selected { background:var(--cream); border-color:var(--green); color:var(--green); }
.date-day:focus-within { outline:2px solid var(--green); outline-offset:1px; }
.shift-date-picker .date-count { margin:12px 0 6px; color:var(--green); }
.date-selection { display:flex; flex-wrap:wrap; gap:6px; max-height:120px; overflow:auto; }
.date-chip { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 10px; background:var(--cream); color:var(--green); border:1px solid var(--control-border); border-radius:5px; font-size:var(--text-small); cursor:pointer; }
.date-chip span { font-size:var(--text-ui); }
.shift-date-picker .date-selection-error { margin:8px 0 0; }
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.profile-grid>div { background:var(--cream); border-radius:8px; padding:15px; }
.profile-grid dt { font-size:var(--text-small); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:5px; }
.profile-grid dd { margin:0; font-size:var(--text-ui); overflow-wrap:anywhere; }
.login-shell { display:grid; grid-template-columns:1fr 1fr; width:min(1040px,calc(100% - 48px)); margin:8vh auto; min-height:610px; border-radius:18px; overflow:hidden; box-shadow:0 18px 70px #48471514; border:1px solid var(--line); }
.login-intro { display:flex; flex-direction:column; justify-content:space-between; gap:40px; background:var(--green); padding:50px 42px 30px; color:white; }
.login-intro :is(h1,h2) { font-size:3rem; letter-spacing:-.05em; line-height:1.13; margin:18px 0; }
.login-intro .eyebrow { color:#d3c69c; }
.login-intro p:not(.eyebrow) { color:#dedec9; font-size:var(--text-ui); max-width:310px; line-height:1.8; }
.login-intro .login-foot { font-size:var(--text-small)!important; margin:0; letter-spacing:.07em; }
.login-form { display:flex; flex-direction:column; justify-content:center; padding:48px; background:white; }
.login-form :is(h1,h2) { font-size:2.25rem; color:var(--green); margin:10px 0 14px; }
.login-form>p { font-size:var(--text-ui); color:var(--muted); }
.login-form form { display:grid; gap:20px; margin-top:18px; }
.login-form .button { justify-content:space-between; }
.login-form .check { font-size:var(--text-ui); }
.login-form .subtle-link { font-size:var(--text-small); margin-top:25px; }
.login-form .small { margin-top:24px; font-size:var(--text-small); }
.password-wrap { display:flex; position:relative; }
.password-wrap input { padding-right:5.5rem; }
.text-button { border:0; background:transparent; color:var(--green); font-size:var(--text-small); position:absolute; top:0; bottom:0; right:3px; min-height:48px; padding:10px; }
.access-page { margin:10vh auto; padding:36px; width:min(600px,calc(100% - 32px)); background:white; border:1px solid var(--line); border-radius:16px; }
.access-page img { margin-bottom:40px; }
@media(min-width:1700px) { #main { --content-gutter:50px; } }
@media(max-width:1200px) {
  #main { --content-gutter:22px; }
  .page-heading { align-items:flex-start; }
  .toolbar-filters { margin-left:0; width:100%; }
  .toolbar-filters label { max-width:none; }
  .employee-fields { grid-template-columns:1fr 1fr; }
  .employee-fields .wide-field { grid-column:1/-1; }
}
@media(min-width:901px) {
  .app-shell.is-collapsed { --sidebar-width:4.75rem; }
  .is-collapsed .sidebar-content { padding-inline:9px; }
  .is-collapsed .brand { height:56px; margin:22px 0 18px; padding:5px; }
  .is-collapsed .brand img { max-width:48px; max-height:46px; }
  .is-collapsed .sidebar-role { display:none; }
  .is-collapsed .sidebar .nav-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .is-collapsed .sidebar nav button,.is-collapsed .sidebar-bottom a { padding-inline:5px; justify-content:center; }
}
@media(max-width:900px) {
  .app-shell { display:block; }
  .sidebar { position:fixed; inset:0 auto 0 0; width:min(15.25rem,calc(100vw - 56px)); transform:translateX(-100%); transition:transform .2s ease; }
  .menu-open .sidebar { transform:translateX(0); }
  .sidebar-toggle { top:10px; right:-48px; }
  .topbar { min-height:72px; padding-left:60px; gap:12px; }
  .page-heading { gap:8px 12px; }
  .page-heading h1 { font-size:1.5rem; }
  .page-heading p { display:none; }
}
@media(max-width:800px) {
  :root { --text-body:1rem; }
  #main { --content-gutter:18px; }
  .heading-actions .button { font-size:var(--text-ui); padding:10px 12px; }
  .login-shell { display:flex; flex-direction:column-reverse; margin:24px auto; width:calc(100% - 32px); }
  .login-intro { padding:35px 28px; }
  .login-form { padding:35px 28px; }
  .login-intro :is(h1,h2) { font-size:2.5rem; }
}
@media screen and (max-width:900px) {
  /* One set of records/actions: the semantic table becomes cards on small screens. */
  .hours-bulk { align-items:stretch; flex-direction:column; padding:10px 12px; }
  .hours-bulk-actions { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; justify-content:stretch; gap:10px; width:100%; }
  .hours-bulk-actions .button { width:100%; min-height:44px; padding:7px 10px; }
  .hours-list { overflow:hidden; }
  .hours-table,.hours-table tbody { display:block; width:100%; min-width:0; }
  .hours-table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .hours-table .hours-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px; padding:14px; border-bottom:1px solid var(--line); }
  .hours-table .hours-row:last-child { border-bottom:0; }
  .hours-table .hours-row>* { display:block; min-width:0; max-width:none; padding:0; border:0; white-space:normal; }
  .hours-table .hours-select { grid-column:1; grid-row:1; width:auto; text-align:left; }
  .hours-table .hours-date { grid-column:2; grid-row:1; text-align:right; color:var(--olive); text-transform:uppercase; font-size:var(--text-small); }
  .hours-table .hours-person { grid-column:1/-1; }
  .hours-table .hours-person { margin-top:-4px; }
  .hours-role,.hours-location { color:var(--muted); font-size:var(--text-small); }
  .time-block>.hours-cell-label { display:block; font-size:var(--text-small); color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
  .time-block strong { white-space:normal; }
  .hours-table .hours-status,.hours-table .hours-action { grid-column:1/-1; }
  .hours-table .hours-status { display:flex; align-items:center; gap:8px; padding-top:0; text-align:left; }
  .hours-status-label { display:inline-block; margin:0; color:var(--muted); font-size:var(--text-small); text-transform:uppercase; letter-spacing:0; white-space:nowrap; overflow-wrap:normal; word-break:normal; }
  .hours-table .hours-action { text-align:left; }
  .hours-action .button { width:100%; max-width:none; min-height:44px; padding:7px 10px; white-space:normal; }
}
@media(max-width:580px) {
  .topbar { align-items:flex-start; padding-right:12px; gap:8px; }
  .page-heading { flex-direction:column; gap:8px; }
  .heading-actions { width:100%; gap:6px; }
  .heading-actions .button { flex:0 0 auto; min-width:0; padding:8px 6px; font-size:var(--text-small); white-space:nowrap; }
  .heading-actions .button.primary { flex:1 1 auto; }
  .toolbar { padding:12px; gap:10px; }
  .week-nav { width:100%; justify-content:space-between; gap:8px; }
  .date-picker { flex:1 1 11rem; max-width:none; }
  .toolbar-filters { flex-wrap:wrap; gap:8px; }
  .toolbar-filters label { flex:1 1 140px; }
  .toolbar-filters label:first-child { flex-basis:100%; }
  #toolbar:has(#status-filter) .toolbar-filters label:not(:first-child) { flex-basis:calc(50% - 4px); }
  .summary-line { min-height:48px; padding:10px 12px; }
  .hours-table .hours-row { padding:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card { padding:20px 15px; }
  .card-heading,.form-footer,.app-footer { flex-wrap:wrap; }
  .employee-fields,.form-grid,dialog .employee-fields { grid-template-columns:minmax(0,1fr); gap:20px; }
  .employee-fields .wide-field,dialog .employee-fields .wide-field { grid-column:auto; }
  .employee-fields { row-gap:12px; }
  .add-employee .employee-options { grid-template-columns:minmax(0,1fr); }
  .employee-status-options { justify-content:flex-start; }
  .form-footer { align-items:flex-start; }
  .search-label { width:100%; }
  .profile-grid { grid-template-columns:minmax(0,1fr); }
  dialog { padding:16px; }
  .shift-date-picker { padding:12px 10px; }
  .dialog-actions .button.danger { flex-basis:100%; }
  .app-footer { font-size:var(--text-small); }
  .login-shell { margin:18px auto; width:calc(100% - 24px); }
  .login-intro { padding:30px 24px; gap:30px; }
  .login-intro :is(h1,h2) { font-size:2rem; }
  .login-intro img { max-width:145px; }
  .login-form { padding:32px 24px; }
  .login-form :is(h1,h2) { font-size:2rem; }
  .tooltip { left:auto; right:-12px; transform:none; }
}
@media(max-width:420px) {
  #main { --content-gutter:12px; }
  .toolbar-filters label { flex-basis:100%; }
  #toolbar:has(#status-filter) .toolbar-filters label:not(:first-child) { flex-basis:calc(50% - 4px); }
  .date-month-nav { flex-wrap:wrap; }
  .date-month-label { flex-basis:100%; order:-1; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }
@media screen and (max-width:900px) {
  .mobile-label,.mobile-date-weekday { display:inline; }
  .desktop-label { display:none; }
  .mobile-day-nav { display:flex; gap:3px; overflow-x:auto; overscroll-behavior-inline:contain; padding:10px 6px; border-inline:1px solid var(--line); scrollbar-width:none; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .mobile-day-nav::-webkit-scrollbar { display:none; }
  .mobile-day-nav button { display:grid; place-items:center; flex:0 0 calc((100% - 18px)/7); min-width:42px; min-height:52px; padding:4px 0; border:1px solid transparent; border-radius:6px; background:white; color:var(--green); font-size:var(--text-small); scroll-snap-align:start; }
  .mobile-day-nav button strong { font-size:var(--text-ui); }
  .mobile-day-nav button.today strong { display:grid; place-items:center; width:2rem; height:2rem; border:2px solid var(--gold); border-radius:50%; background:var(--gold); color:#171504; }
  .mobile-day-nav button[aria-pressed=true] { border-color:var(--green); background:var(--cream); }
  .schedule-scroll { max-height:none; min-height:0; overflow:visible; }
  .schedule { min-width:0; }
  .schedule col:not(.selected-day),.schedule th:not(.selected-day),.schedule td:not(.selected-day) { display:none; }
  .schedule thead th { position:static; height:auto; padding:8px; }
  .schedule thead th span,.schedule thead th strong,.schedule thead th small { display:inline; margin-inline:3px; }
  .schedule thead th strong { font-size:var(--text-ui); }
  .schedule thead th.today strong { width:auto; height:auto; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .schedule td { height:auto; padding:10px; border-right:0; }
  .schedule td.empty-day { height:120px; }
  .shift-card { gap:3px; padding:10px; }
  .employee-records .table-scroll { overflow:visible; }
  .records-table,.records-table tbody { display:block; width:100%; }
  .records-table thead { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
  .records-table .employee-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; padding:14px 0; border-top:1px solid var(--line); }
  .records-table .employee-row td { display:block; min-width:0; max-width:none; padding:0; border:0; }
  .records-table .employee-name,.records-table .employee-role,.records-table .employee-address,.records-table .employee-action { grid-column:1/-1; }
  .records-table .employee-role { color:var(--muted); font-size:var(--text-small); margin-top:-4px; }
  .records-table td[data-label]::before { content:attr(data-label); display:block; font-size:var(--text-small); color:var(--muted); }
  .records-table .employee-row .is-empty { display:none; }
  .records-table .employee-row .employee-action { text-align:left; }
  .records-table .employee-action .button { min-height:44px; padding:7px 12px; }
  .employee-records #toolbar .toolbar { gap:8px; margin-bottom:12px; }
  .employee-records .card-heading { margin-bottom:8px; }
  .hours-table .hours-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; padding:12px; }
  .hours-table .hours-person { margin-top:-4px; }
  .hours-table .hours-status { padding-top:0; }
  .tooltip { position:fixed; left:12px; right:12px; bottom:16px; top:auto; width:auto; max-width:none; transform:none; z-index:100; }
  .shift-date-picker { padding:12px; margin-bottom:16px; }
  .shift-date-picker .small { margin-bottom:8px; }
  .date-weekdays { display:none; }
  .date-days { display:flex; gap:8px; overflow-x:auto; padding:4px; scroll-snap-type:x proximity; }
  .date-days>span { display:none; }
  .date-day { flex:0 0 52px; min-height:76px; gap:2px; scroll-snap-align:center; }
  .date-day small { font-size:var(--text-small); }
  .date-selection { max-height:94px; }
  #shift-form .dialog-actions { position:sticky; bottom:-16px; margin-top:16px; padding-block:12px; background:white; z-index:2; }
}
@media screen and (min-width:380px) and (max-width:900px) {
  .hours-table .hours-status { grid-column:1; align-self:center; }
  .hours-table .hours-action { grid-column:2; text-align:right; }
}
@page { size:A4 landscape; margin:10mm; }
@media print {
  body.tft-portal.menu-open { overflow:visible; }
  html,body { background:white!important; color:black!important; font-size:8pt; }
  .sidebar,.sidebar-backdrop,.topbar,.page-heading,.admin-context,#toolbar,#notice,.summary-line,.app-footer,.add-cell,.skip-link,dialog { display:none!important; }
  .app-shell { display:block; min-height:0; }
  #main { padding:0; }
  .print-heading { display:block; margin-bottom:4mm; }
  .print-heading h2 { margin:0 0 2mm; font-size:13pt; }
  .print-heading p { margin:0; font-size:9pt; }
  .schedule-scroll { display:block; overflow:visible!important; height:auto!important; max-height:none!important; min-height:0; border:0; border-radius:0; }
  .schedule { width:100%!important; min-width:0!important; table-layout:fixed; border-collapse:collapse; }
  .schedule th,.schedule td { position:static!important; border:0.2mm solid #aaa!important; padding:2mm!important; height:auto!important; background:white!important; }
  .schedule thead { display:table-header-group; }
  .schedule tr { break-inside:auto; page-break-inside:auto; }
  .schedule thead th { padding:2mm!important; vertical-align:middle!important; }
  .schedule thead th span,.schedule thead th strong,.schedule thead th small { display:block!important; width:auto!important; height:auto!important; margin:0!important; border:0!important; border-radius:0!important; background:transparent!important; transform:none!important; line-height:1.2!important; color:black!important; }
  .schedule thead th span,.schedule thead th small { font-size:7pt; }
  .schedule thead th strong { font-size:13pt; margin:1mm 0!important; }
  .schedule thead th.today strong { display:grid!important; place-items:center; width:8mm!important; height:8mm!important; margin:1mm auto!important; border:0.6mm solid var(--gold)!important; border-radius:50%!important; background:var(--gold)!important; color:#171504!important; }
  .shift-card { display:block; width:100%; min-height:0; box-shadow:none; border:0; border-bottom:0.2mm solid #bbb; border-radius:0; padding:1mm 0; background:none!important; margin-bottom:1mm; color:black; break-inside:avoid; }
  .shift-card:last-of-type { border-bottom:0; }
  .shift-card strong,.shift-card span,.shift-card small,.shift-card .shift-time,.shift-card.unfilled .shift-person { display:block; font-size:7pt; color:black; }
  .shift-card strong { font-size:7.5pt; }
}