:root {
  --brand-primary: #30507c;
  --brand-navy: #30507c;
  --brand-navy-rgb: 48, 80, 124;
  --brand-navy-hover: #243f65;
  --brand-red: #e21e1e;
  --brand-red-rgb: 226, 30, 30;
  --brand-red-strong: #b42318;
  --brand-gold: #fbbb04;
  --brand-gold-rgb: 251, 187, 4;
  --brand-background: #faf8f5;
  --brand-text: #192339;
  --brand-text-rgb: 25, 35, 57;
  --primary: var(--brand-primary);
  --primary-hover: var(--brand-navy-hover);
  --secondary: var(--brand-navy);
  --secondary-hover: var(--brand-navy-hover);
  --surface: #ffffff;
  --surface-alt: #f4f5f7;
  --background: var(--brand-background);
  --text-primary: var(--brand-text);
  --text-secondary: #5d6675;
  --border: #dfe3e8;
  --success: #167a52;
  --warning: #91610b;
  --danger: var(--brand-red-strong);
  --focus: var(--brand-navy);
  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --shadow: 0 18px 48px rgba(var(--brand-text-rgb), 0.1);
}

* { box-sizing: border-box; }
html { min-height: 100%; font-size: 16px; }
body { min-height: 100vh; margin: 0; color: var(--text-primary); background: var(--surface); font-family: "Segoe UI", Tahoma, Arial, sans-serif; line-height: 1.65; }
a { color: var(--secondary); text-underline-offset: 0.2em; }
a:hover { color: var(--primary); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 0.2rem; }
.skip-link { position: fixed; z-index: 9999; inset-inline-start: 1rem; top: -5rem; padding: 0.75rem 1rem; color: #fff; background: var(--text-primary); }
.skip-link:focus { top: 1rem; }
.container { width: min(100% - 2rem, 1180px); margin-inline: auto; }
.narrow { width: min(100%, 840px); }

.site-header { position: relative; z-index: 20; min-height: 84px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); }
.navbar { min-height: 84px; padding-block: 0.65rem; }
.brand-link { display: inline-flex; gap: .8rem; align-items: center; color: var(--text-primary); text-decoration: none; }
.brand-link:hover { color: var(--text-primary); }
.brand-logo { width: 54px; height: 54px; object-fit: contain; border-radius: .65rem; }
.brand-copy { display: grid; line-height: 1.2; }
.brand-copy strong { max-width: 19rem; font-size: .92rem; }
.brand-copy small { margin-top: .25rem; color: var(--text-secondary); font-size: .75rem; }
.nav-link { padding: .65rem .8rem !important; color: var(--text-primary); font-weight: 600; border-radius: .55rem; }
.nav-link:hover { color: var(--primary); background: rgba(var(--brand-navy-rgb),.08); }
.language-link { display: inline-flex; min-height: 42px; align-items: center; margin-inline-start: .5rem; padding: .45rem .85rem; color: var(--secondary); font-weight: 700; text-decoration: none; border: 1px solid var(--border); border-radius: 999px; }
.navbar-toggler { border-color: var(--border); }
.admin-nav { color: #fff; background: var(--brand-navy); border-bottom: 1px solid rgba(255,255,255,.14); }
.admin-nav-scroll { min-height: 52px; display: flex; gap: .25rem; align-items: center; overflow-x: auto; scrollbar-width: thin; }
.admin-nav a, .admin-nav button { display: inline-flex; min-height: 38px; align-items: center; padding: .45rem .72rem; color: #fff; background: transparent; border: 0; border-radius: .55rem; font: inherit; font-size: .82rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.admin-nav a:hover, .admin-nav button:hover { color: #fff; background: rgba(255,255,255,.14); }
.admin-nav form { margin-inline-start: auto; }

.hero-section { position: relative; overflow: hidden; padding: clamp(4rem, 8vw, 7.5rem) 0; background: radial-gradient(circle at 82% 28%, rgba(var(--brand-gold-rgb),.16), transparent 26%), linear-gradient(145deg, #fff 20%, var(--brand-background) 100%); }
.hero-section::before { content: ""; position: absolute; width: 15rem; height: .4rem; inset-inline-start: -4rem; bottom: 0; background: linear-gradient(90deg, var(--brand-red), var(--brand-gold)); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.hero-copy { max-width: 690px; }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: var(--secondary); font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.status-dot { width: .6rem; height: .6rem; border-radius: 999px; background: var(--success); box-shadow: 0 0 0 .25rem rgba(22,122,82,.12); }
h1 { margin: .75rem 0 1.1rem; font-size: clamp(2.55rem, 6vw, 5rem); line-height: 1.03; letter-spacing: -.045em; }
.hero-copy > p, .content-hero p { max-width: 660px; margin: 0; color: var(--text-secondary); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .7rem; padding: .68rem 1.25rem; font-weight: 800; text-decoration: none; border: 1px solid transparent; border-radius: .75rem; cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--primary); }
.button-primary:hover { color: #fff; background: var(--primary-hover); }
.button-secondary { color: var(--secondary); background: #fff; border-color: var(--secondary); }
.button-secondary:hover { color: #fff; background: var(--secondary-hover); }

.attendance-orbit { position: relative; min-height: 370px; display: grid; place-items: center; }
.attendance-orbit::before, .attendance-orbit::after { content: ""; position: absolute; border: 1px solid rgba(var(--brand-navy-rgb),.2); border-radius: 50%; }
.attendance-orbit::before { width: 340px; height: 340px; }
.attendance-orbit::after { width: 270px; height: 270px; border-style: dashed; }
.main-orbit-card { position: relative; z-index: 4; display: grid; justify-items: center; width: 190px; padding: 1.7rem; background: #fff; border: 1px solid rgba(var(--brand-navy-rgb),.18); border-radius: 1.6rem; box-shadow: var(--shadow); }
.orbit-icon { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; color: #fff; background: var(--success); border-radius: 50%; font-size: 1.5rem; }
.main-orbit-card strong { margin-top: .75rem; font-size: 2.4rem; line-height: 1; }
.main-orbit-card small { margin-top: .45rem; color: var(--text-secondary); text-align: center; }
.orbit-pulse { position: absolute; width: 105px; height: 105px; border-radius: 50%; background: rgba(var(--brand-red-rgb),.1); }
.orbit-label { position: absolute; z-index: 5; padding: .38rem .68rem; color: var(--secondary); background: #fff; border: 1px solid var(--border); border-radius: 999px; font-size: .72rem; font-weight: 800; box-shadow: 0 8px 25px rgba(var(--brand-text-rgb),.1); }
.label-a { top: 12%; inset-inline-start: 15%; }.label-b { top: 29%; inset-inline-end: 4%; }.label-c { bottom: 12%; inset-inline-start: 22%; }

.entry-section { padding: 0 0 clamp(4rem, 7vw, 7rem); background: var(--surface-alt); }
.entry-grid { position: relative; top: -1px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.entry-card { position: relative; min-height: 310px; overflow: hidden; padding: clamp(1.5rem, 4vw, 2.5rem); color: var(--text-primary); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.entry-card:hover { color: var(--text-primary); border-color: var(--brand-gold); transform: translateY(-3px); box-shadow: var(--shadow); }
.employee-card { border-top: 5px solid var(--brand-red); }.admin-card { border-top: 5px solid var(--brand-gold); }
.entry-card h2 { margin: 4.25rem 0 .7rem; font-size: clamp(1.55rem, 3vw, 2.15rem); }
.entry-card p { max-width: 500px; color: var(--text-secondary); }
.card-number { position: absolute; inset-block-start: 1.35rem; inset-inline-end: 1.5rem; color: #aaa4b4; font: 700 .78rem/1 monospace; }
.card-icon { display: grid; position: absolute; inset-block-start: 1.5rem; inset-inline-start: 1.5rem; width: 2.7rem; height: 2.7rem; place-items: center; color: var(--brand-navy); background: rgba(var(--brand-gold-rgb),.2); border-radius: .75rem; font-size: 1.25rem; }
.card-action { position: absolute; inset-inline-start: clamp(1.5rem, 4vw, 2.5rem); bottom: 1.7rem; color: var(--primary); font-weight: 800; }

.content-hero { padding: clamp(3.5rem, 7vw, 6rem) 0 3rem; background: linear-gradient(140deg, #fff, var(--surface-alt)); border-bottom: 1px solid var(--border); }
.content-hero h1 { max-width: 800px; font-size: clamp(2.2rem, 5vw, 4rem); }
.content-section { min-height: 32vh; padding: clamp(2.5rem, 6vw, 5rem) 0; }
.prose-grid { display: grid; gap: 0; }
.prose-grid article { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.7rem 0; border-bottom: 1px solid var(--border); }
.prose-grid article > span { color: var(--brand-red-strong); font: 800 .8rem/2 monospace; }
.prose-grid h2, .support-card h2 { margin: 0 0 .45rem; font-size: 1.35rem; }
.prose-grid p, .support-card p { margin: 0; color: var(--text-secondary); }
.support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.support-card { position: relative; min-height: 230px; padding: 5rem 1.7rem 1.7rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); }

.login-section { min-height: calc(100vh - 170px); display: grid; place-items: center; padding: 3rem 1rem; background: radial-gradient(circle at 15% 20%, rgba(var(--brand-red-rgb),.08), transparent 25%), var(--brand-background); }
.login-shell { width: min(100%, 900px); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 1.6rem; box-shadow: var(--shadow); }
.login-brand { padding: clamp(2rem, 5vw, 4rem); color: #fff; background: var(--brand-navy); }
.login-brand-logo { display: block; width: min(100%, 180px); max-height: 150px; margin: 0 0 1.5rem; padding: .6rem; object-fit: contain; background: var(--brand-background); border-radius: 1rem; }
.login-brand .eyebrow { color: #f7dc8d; }.login-brand h1 { margin-top: 1rem; font-size: clamp(2rem, 4vw, 3.2rem); }.login-brand p { color: #e7edf5; }
.login-form { padding: clamp(2rem, 5vw, 4rem); align-self: center; }
.field { display: grid; gap: .35rem; margin-bottom: 1rem; }.field label { font-weight: 750; }
.field input { width: 100%; min-height: 48px; padding: .65rem .8rem; color: var(--text-primary); background: #fff; border: 1px solid #aaa4b4; border-radius: .65rem; }
.field input:focus { border-color: var(--focus); box-shadow: 0 0 0 .2rem rgba(var(--brand-navy-rgb),.14); outline: none; }
.field span, .validation-summary { color: var(--danger); font-size: .86rem; }
.validation-summary:empty { display: none; }.validation-summary { margin-bottom: 1rem; padding: .8rem; background: #fff2f0; border-inline-start: 4px solid var(--danger); }
.validation-summary ul { margin: 0; padding-inline-start: 1rem; }
.check-field { display: flex; gap: .55rem; align-items: flex-start; margin: 1rem 0 1.4rem; color: var(--text-secondary); font-size: .9rem; }
.check-field input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--primary); }

.admin-header { padding: 2.6rem 0 2rem; background: var(--text-primary); color: #fff; }
.admin-header .eyebrow { color: #f7dc8d; }.admin-header h1 { margin: .4rem 0 0; font-size: clamp(2rem, 4vw, 3.5rem); }.admin-header p { margin: .4rem 0 0; color: #c7d1df; }
.admin-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.live-pill { display: inline-flex; gap: .45rem; align-items: center; padding: .4rem .7rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; font-size: .8rem; }
.live-pill i { width: .5rem; height: .5rem; background: #47d69b; border-radius: 50%; }
.admin-content { min-height: 50vh; padding: 1.3rem 0 5rem; background: var(--background); }
.metric-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.metric-card { min-height: 145px; display: flex; flex-direction: column; padding: 1.2rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); }
.metric-card span { color: var(--text-secondary); font-size: .82rem; font-weight: 700; }.metric-card strong { margin-top: auto; font-size: 2.4rem; line-height: 1; }.metric-card small { margin-top: .4rem; color: var(--text-secondary); font-size: .72rem; }
.metric-card.attention { border-top: 3px solid var(--brand-red); }.metric-card.warning { border-top: 3px solid var(--brand-gold); }
.dashboard-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 1rem; margin-top: 1rem; }
.panel { min-height: 330px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); }
.panel-heading { padding: 1.3rem 1.4rem; border-bottom: 1px solid var(--border); }.panel-heading h2, .setup-panel h2 { margin: 0; font-size: 1.1rem; }
.empty-state { min-height: 250px; display: grid; place-content: center; justify-items: center; color: var(--text-secondary); }.empty-state span { font-size: 2.5rem; }.empty-state h3 { margin-top: .5rem; font-size: 1rem; }
.activity-list > div { position: relative; display: grid; grid-template-columns: 1fr auto; padding: 1rem 1.4rem 1rem 2.5rem; border-bottom: 1px solid var(--border); }.activity-list small { color: var(--text-secondary); }.activity-mark { position: absolute; inset-inline-start: 1.25rem; top: 1.45rem; width: .55rem; height: .55rem; background: var(--success); border-radius: 50%; }
.setup-panel { display: grid; place-items: center; padding: 2rem; text-align: center; }.setup-panel .card-icon { position: static; margin: 0 auto 1rem; }.setup-panel p { color: var(--text-secondary); }

.admin-stack { display: grid; gap: 1rem; }
.admin-stack .panel { min-height: 0; }
.form-panel { padding: clamp(1rem, 3vw, 1.5rem); }
.form-panel > summary, .row-actions summary { color: var(--secondary); cursor: pointer; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid > label, .filter-bar label { display: grid; gap: .38rem; color: var(--text-secondary); font-size: .82rem; font-weight: 750; }
.form-grid input:not([type="checkbox"]):not([type="radio"]), .form-grid select, .form-grid textarea, .filter-bar input:not([type="checkbox"]):not([type="radio"]), .filter-bar select, .inline-edit input:not([type="checkbox"]):not([type="radio"]), .inline-edit select, .inline-form input:not([type="checkbox"]):not([type="radio"]), .table-edit-form input:not([type="checkbox"]):not([type="radio"]), .table-edit-form select { width: 100%; min-height: 44px; padding: .55rem .7rem; color: var(--text-primary); background: #fff; border: 1px solid #aaa4b4; border-radius: .55rem; }
.form-grid textarea { resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .filter-bar input:focus, .filter-bar select:focus { border-color: var(--focus); box-shadow: 0 0 0 .18rem rgba(var(--brand-navy-rgb),.13); outline: none; }
.form-grid .wide, .form-actions, .validation-summary { grid-column: 1 / -1; }
.form-grid small { color: var(--text-secondary); font-weight: 500; }
.form-grid [data-valmsg-for] { color: var(--danger); font-size: .78rem; font-weight: 500; }
.form-actions { display: flex; justify-content: flex-end; }
.btn-brand, .btn-secondary { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: .55rem 1rem; border-radius: .6rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.btn-brand { color: #fff; background: var(--primary); border: 1px solid var(--primary); }.btn-brand:hover { color: #fff; background: var(--primary-hover); }
.btn-secondary { color: var(--secondary); background: #fff; border: 1px solid var(--secondary); }.btn-secondary:hover { color: #fff; background: var(--secondary); }
.btn-link { padding: .3rem .45rem; color: var(--secondary); background: transparent; border: 0; font: inherit; font-size: .82rem; font-weight: 800; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.table-panel { overflow: hidden; }
.table-responsive { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.data-table th { padding: .8rem 1rem; color: var(--text-secondary); background: var(--surface-alt); border-bottom: 1px solid var(--border); font-size: .75rem; letter-spacing: .025em; text-align: start; white-space: nowrap; }
.data-table td { min-width: 6rem; padding: .85rem 1rem; vertical-align: top; border-bottom: 1px solid var(--border); }
.data-table tbody tr:hover { background: #fbfafc; }
.data-table small { display: block; margin-top: .15rem; color: var(--text-secondary); }
.status-pill { display: inline-flex; align-items: center; padding: .2rem .5rem; border: 1px solid var(--border); border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.status-pill.success, .status-ontime, .status-completed, .status-checkedin { color: #0f5e3e; background: #e9f8f1; border-color: #b8dfcf; }
.status-pill.muted, .status-notcheckedin { color: var(--text-secondary); background: var(--surface-alt); }
.status-late, .status-missingcheckin, .status-missingcheckout { color: #744b00; background: #fff6df; border-color: #ead29d; }
.row-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: flex-start; }.row-actions form { margin: 0; }
.row-actions details { min-width: 8rem; }.row-actions details[open] { position: relative; z-index: 4; }
.inline-edit, .inline-form { display: grid; min-width: 18rem; gap: .5rem; margin-top: .55rem; padding: .75rem; background: #fff; border: 1px solid var(--border); border-radius: .7rem; box-shadow: var(--shadow); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; padding: 1rem; }
.filter-bar label { min-width: 9rem; flex: 1; }.filter-bar .btn-brand, .filter-bar .btn-secondary { flex: 0 0 auto; }
.notice { padding: .85rem 1rem; color: var(--secondary); background: rgba(var(--brand-navy-rgb),.08); border-inline-start: 4px solid var(--secondary); border-radius: .5rem; }
.notice.warning { color: #624200; background: #fff6df; border-color: var(--warning); }.notice.success { color: #0f5e3e; background: #e9f8f1; border-color: var(--success); }
.map-canvas { min-height: 360px; overflow: hidden; border: 1px solid var(--border); border-radius: .8rem; }
.day-picker, .workplace-picker { display: flex; flex-wrap: wrap; gap: .45rem; padding: .8rem; border: 1px solid var(--border); border-radius: .7rem; }
.day-picker label, .workplace-picker label { display: inline-flex; gap: .4rem; align-items: center; padding: .35rem .55rem; background: var(--surface-alt); border-radius: .5rem; font-size: .8rem; }.day-picker input, .workplace-picker input { width: 1rem; min-height: 1rem; accent-color: var(--secondary); }
.grouped-fieldset { min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: .8rem; }
.grouped-fieldset > legend { float: none; width: auto; margin: 0; padding-inline: .4rem; color: var(--text-primary); font-size: .95rem; font-weight: 800; }
.segment-list { display: grid; gap: .65rem; }
.segment-card { min-width: 0; margin: 0; padding: .7rem .85rem .85rem; background: #fff; border: 1px solid var(--border); border-radius: .7rem; transition: opacity .16s ease, background .16s ease, border-color .16s ease; }
.segment-card > legend { float: none; width: auto; margin: 0; padding-inline: .3rem; color: var(--secondary); font-size: .78rem; font-weight: 800; }
.segment-card[data-segment-active="false"] { opacity: .58; background: var(--surface-alt); }
.segment-card[data-segment-active="false"] .segment-time-range, .segment-card[data-segment-active="false"] .segment-next-day { opacity: .65; }
.segment-controls { display: grid; grid-template-columns: minmax(7rem, .6fr) minmax(17rem, 2fr) minmax(12rem, 1fr); gap: .8rem; align-items: end; }
.segment-controls .check-field, .policy-option .check-field { margin: 0; align-items: center; color: var(--text-primary); font-weight: 750; }
.segment-controls .check-field { min-height: 44px; }
.segment-controls .check-field input, .policy-option .check-field input { flex: 0 0 auto; margin: 0; }
.segment-time-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .5rem; align-items: end; unicode-bidi: isolate; }
.time-field { min-width: 0; display: grid; gap: .3rem; color: var(--text-secondary); font-size: .76rem; font-weight: 750; }
.time-field input { direction: ltr; unicode-bidi: isolate; }
.time-separator { align-self: end; padding-bottom: .65rem; color: var(--text-secondary); font-weight: 800; }
html[dir="rtl"] .time-field > span { direction: rtl; text-align: right; }
.shift-inline-edit { width: min(44rem, calc(100vw - 3rem)); }
.compact-segment-list .segment-controls { grid-template-columns: minmax(7rem, .6fr) minmax(17rem, 2fr) minmax(12rem, 1fr); }
.compact-segment-list .segment-time-range { width: 100%; }
.shift-sequence { display: flex; flex-wrap: wrap; gap: .25rem .45rem; align-items: center; min-width: 13rem; direction: ltr; unicode-bidi: isolate; }
.shift-time-range { display: inline-flex; gap: .3rem; align-items: center; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.next-day-label { color: var(--text-secondary); font-size: .78rem; font-weight: 700; unicode-bidi: isolate; }
.segment-divider { color: var(--text-secondary); font-weight: 800; }
.day-shift-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.day-shift-grid > label { min-width: 0; display: grid; gap: .3rem; color: var(--text-secondary); font-size: .78rem; font-weight: 750; }
.section-heading { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.section-heading h2 { margin: 0; font-size: 1.05rem; }
.weekly-schedule-list { display: grid; grid-template-columns: repeat(2, minmax(12rem, 1fr)); gap: .35rem; min-width: 24.35rem; }
.weekly-day { display: grid; grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr); gap: .45rem; align-items: center; padding: .35rem .45rem; background: var(--surface-alt); border-radius: .45rem; }
.weekly-day.is-off { background: #fbfaf8; }
.weekly-day-name { font-weight: 800; }
.weekly-shift { min-width: 0; display: grid; line-height: 1.25; }
.weekly-shift bdi { color: var(--secondary); font-weight: 800; white-space: nowrap; }
.weekly-shift small { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.schedule-inline-edit { width: min(34rem, calc(100vw - 3rem)); }
.schedule-inline-edit .day-shift-grid { grid-template-columns: 1fr; }
.schedules-table-wrap { max-width: 100%; overscroll-behavior-inline: contain; }
.schedules-table { table-layout: fixed; }
.shift-template-table { min-width: 68rem; }
.weekly-schedules-table { min-width: 76rem; }
.shift-column-code { width: 15%; }.shift-column-name { width: 22%; }.shift-column-category { width: 11%; }.shift-column-segments { width: 32%; }.shift-column-status { width: 9%; }.shift-column-actions { width: 11%; }
.weekly-column-code { width: 18%; }.weekly-column-name { width: 18%; }.weekly-column-days { width: 40%; }.weekly-column-grace { width: 8%; }.weekly-column-status { width: 8%; }.weekly-column-actions { width: 8%; }
.schedules-table .code-cell, .schedules-table .code-cell bdi { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.schedule-name-cell { overflow-wrap: anywhere; word-break: normal; }
.schedule-name-cell > span { display: block; }
.table-edit-row[hidden] { display: none; }
.table-edit-row > td { min-width: 0; padding: 0; background: var(--surface-alt); }
.table-edit-row:hover { background: transparent !important; }
.table-edit-card { width: 100%; min-width: 0; padding: 1rem; border-block: 1px solid var(--border); box-shadow: inset 0 .2rem 0 rgba(var(--brand-navy-rgb),.08); }
.table-edit-heading { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: .85rem; color: var(--secondary); }
.table-edit-heading bdi { font-size: .82rem; }
.table-edit-form { display: grid; min-width: 0; gap: .85rem; }
.edit-fields-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.edit-fields-grid > label { min-width: 0; display: grid; gap: .3rem; color: var(--text-secondary); font-size: .78rem; font-weight: 750; }
.table-edit-form .day-shift-grid select { min-width: 0; direction: ltr; unicode-bidi: isolate; }
.table-edit-toggle[aria-expanded="true"] { color: var(--primary); }
.policy-section { padding: 1rem; background: #fff; }
.policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.policy-field { min-width: 0; display: grid; gap: .38rem; color: var(--text-secondary); font-size: .82rem; font-weight: 750; }
.policy-option { min-width: 0; display: grid; align-content: start; gap: .45rem; padding: .85rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: .7rem; }
.policy-option small { padding-inline-start: 1.7rem; line-height: 1.5; }
.policy-friday-option { gap: .75rem; }
.policy-dependent-field { padding-top: .65rem; border-top: 1px solid var(--border); }
.channel-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.channel-badge { display: inline-flex; align-items: center; width: fit-content; padding: .25rem .5rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-alt); color: var(--text-primary); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.channel-desktopweb { border-color: #d7aa3a; background: #fff7df; color: #624200; }
.channel-nativeandroid, .channel-nativeios { border-color: #9bcdb8; background: #e9f8f1; color: #0f5e3e; }
.device-alert { margin-top: .35rem; color: #7b4f00; font-weight: 750; }
.filter-check { min-width: 12rem; margin: 0 0 .65rem; align-items: center; }
.inline-reset-form { margin: 0; }
.btn-link.danger { color: #a4262c; }
.record-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; background: var(--border); }.record-summary > div { display: grid; gap: .25rem; padding: 1rem; background: #fff; }.record-summary span { color: var(--text-secondary); font-size: .76rem; }
.pagination { display: flex; gap: .8rem; align-items: center; justify-content: center; padding: 1rem; }.pagination a { font-weight: 750; }.pagination .disabled { pointer-events: none; opacity: .45; }
.data-table pre { max-width: 32rem; max-height: 12rem; overflow: auto; padding: .6rem; color: var(--text-primary); background: var(--surface-alt); border-radius: .45rem; font-size: .72rem; white-space: pre-wrap; }

.site-footer { padding: 2rem 0; color: #d6d2dd; background: var(--text-primary); }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-grid > div { display: grid; }.footer-grid span { color: #aaa5b4; font-size: .78rem; }
.footer-grid nav { display: flex; flex-wrap: wrap; gap: 1rem; }.footer-grid a { color: #ece9f2; font-size: .86rem; text-decoration: none; }.footer-grid a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 1050px) { .metric-grid { grid-template-columns: repeat(3, 1fr); }.segment-controls, .compact-segment-list .segment-controls { grid-template-columns: minmax(7rem, .55fr) minmax(16rem, 1.7fr); }.segment-next-day { grid-column: 2; }.edit-fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) {
  .brand-copy strong { max-width: 12rem; font-size: .78rem; }.brand-copy small { display: none; }.navbar-collapse { padding: 1rem 0; }.language-link { margin: .5rem 0 0; }
  .hero-grid, .entry-grid, .support-grid, .login-shell, .dashboard-grid { grid-template-columns: 1fr; }.hero-section { padding-top: 3.3rem; }.attendance-orbit { min-height: 300px; }.attendance-orbit::before { width: 280px; height: 280px; }.attendance-orbit::after { width: 220px; height: 220px; }
  .entry-card { min-height: 290px; }.login-brand { min-height: 230px; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.admin-title-row, .footer-grid { align-items: flex-start; flex-direction: column; }
  .form-grid, .record-summary, .policy-grid { grid-template-columns: 1fr; }.admin-nav-scroll { width: 100%; }.data-table { font-size: .82rem; }
  .day-shift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.segment-controls, .compact-segment-list .segment-controls { grid-template-columns: 1fr; }.segment-next-day { grid-column: auto; }.edit-fields-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .segment-time-range { grid-template-columns: 1fr; }.time-separator { justify-self: center; padding: 0; transform: rotate(90deg); }.day-shift-grid { grid-template-columns: 1fr; }.weekly-schedule-list { grid-template-columns: 1fr; min-width: 14rem; } }
@media (max-width: 460px) { .brand-logo { width: 44px; height: 44px; }.brand-copy strong { max-width: 9rem; }.hero-actions .button { width: 100%; }.metric-grid { grid-template-columns: 1fr 1fr; }.metric-card { min-height: 130px; padding: 1rem; }.metric-card strong { font-size: 2rem; }.footer-grid nav { display: grid; gap: .45rem; }.grouped-fieldset { padding: .75rem; }.segment-card { padding-inline: .65rem; }.shift-inline-edit, .schedule-inline-edit { width: calc(100vw - 2rem); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }