:root {
  --ink: #f7f7f7;
  --muted: #a7a7ad;
  --line: #352025;
  --surface: #121212;
  --soft: #1c1719;
  --accent: #c8102e;
  --accent-dark: #8f0b21;
  --gold: #e5b24b;
  --danger: #ff5a67;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: #080808;
  font-family: Tahoma, Arial, sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  background: var(--accent);
}

button:hover {
  background: var(--accent-dark);
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  border: 1px solid #493038;
  border-radius: 10px;
  padding: 0 12px;
  background: #0e0e0f;
  color: var(--ink);
}

textarea { min-height: 92px; padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(200,16,46,.38); border-color: var(--accent); }

label {
  color: var(--muted);
  font-size: 14px;
}

.hidden {
  display: none !important;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 420px;
  gap: 24px;
  align-items: center;
  padding: 32px;
  background: radial-gradient(circle at 15% 20%, rgba(200,16,46,.22), transparent 28%), linear-gradient(135deg,#19090d,#070707 60%,#12070a);
}

.brand-panel {
  color: #fff;
  max-width: 720px;
}

.brand-mark {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  color: #fff;
  background: rgba(200, 16, 46, 0.22);
  box-shadow: 0 0 28px rgba(200,16,46,.25);
  font-weight: 800;
  letter-spacing: 0;
  font-size: 0;
  background-image: url('./lucky-roll-logo.jpeg');
  background-size: cover;
  background-position: center;
}

.brand-mark.small {
  width: 46px;
  height: 46px;
  color: #fff;
  border-color: var(--accent);
  background: #4d0b18;
  background-image: url('./lucky-roll-logo.jpeg');
}
.sidebar .brand-mark.small { overflow:hidden; padding:0; background:#fff; box-shadow:0 0 18px rgba(200,16,46,.3); }
.sidebar .brand-mark.small img { display:block; width:100%; height:100%; object-fit:cover; }

.company-logo { width: min(260px, 55vw); max-height: 150px; object-fit: contain; border-radius: 18px; border: 1px solid #6e1b2b; box-shadow: 0 12px 32px rgba(200,16,46,.25); }
.small-logo { width: 46px; height: 46px; object-fit: cover; border-radius: 12px; }
.owner-credentials { display: grid; gap: 8px; padding: 12px; border: 1px solid #542331; border-radius: 10px; background: #1b0d11; text-align: center; }
.owner-credentials strong { color: #ffd7dc; font-size: 14px; }
.credential-copy { min-height: 34px; padding: 0 10px; color: #ffd5da; background: #2a1017; border: 1px solid #75283b; font-family: monospace; direction: ltr; }
.credential-copy:hover { background: #4b1220; }
.weekly-extra-fields { margin: 18px 0; padding: 18px; border: 1px solid #4b202b; border-radius: 14px; background: #171112; }
.weekly-live-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:18px; }.weekly-live-summary article { padding:13px; border:1px solid #4b2930; border-radius:12px; background:linear-gradient(145deg,#211416,#151011); }.weekly-live-summary span,.weekly-live-summary strong { display:block; }.weekly-live-summary span { color:#bba8ac; font-size:11px; }.weekly-live-summary strong { margin-top:6px; color:#fff; font-size:20px; }.weekly-document-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:18px 0; }.weekly-document-summary article { padding:10px; border:1px solid #ddd; border-radius:8px; background:#faf4f5; }.weekly-document-summary span,.weekly-document-summary strong { display:block; }.weekly-document-summary span { color:#666; font-size:11px; }.weekly-document-summary strong { margin-top:4px; color:#8f0010; font-size:17px; }
@media (max-width:850px) { .weekly-live-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .weekly-live-summary { grid-template-columns:1fr; } }
.report-preview { margin-top: 22px; overflow-x: auto; }
.weekly-report-document { max-width: 1000px; margin: 0 auto; padding: 34px; color: #242424; background: #fff; border-radius: 8px; font-family: Tahoma, Arial, sans-serif; line-height: 1.8; box-shadow: 0 16px 40px rgba(0,0,0,.35); direction: rtl; }
.report-document-header { display:flex; align-items:center; gap:18px; padding-bottom:18px; border-bottom:4px solid #c8102e; }
.report-document-header img { width:82px; height:82px; object-fit:cover; border-radius:14px; }
.report-document-header strong { display:block; color:#c8102e; font-size:26px; letter-spacing:1px; }
.report-document-header span { color:#555; font-size:18px; }
.weekly-report-document h3 { color:#a50d28; border-right:4px solid #c8102e; padding-right:10px; margin:24px 0 8px; }
.weekly-report-document table { min-width:0; color:#222; }
.weekly-report-document th { color:#fff; background:#a50d28; }
.weekly-report-document th, .weekly-report-document td { border:1px solid #ddd; white-space:normal; }
.report-meta { display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:16px; padding:12px; background:#f7e9eb; border-radius:8px; }
.reports-home { min-height: 220px; }
.report-tile { display:grid; gap:8px; width:min(360px,100%); min-height:150px; padding:24px; text-align:right; border:1px solid #7d1a30; background:linear-gradient(145deg,#3a0d18,#180b0e); cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.report-tile span { font-size:32px; }
.report-tile strong { font-size:20px; }
.report-tile small { color:#e6aeb8; }
.report-tile:hover { background:linear-gradient(145deg,#571022,#230c12); transform:translateY(-2px); }
.report-tile:focus-visible { outline:2px solid #efc46b; outline-offset:3px; border-color:#efc46b; }
.report-tile:active { transform:translateY(0) scale(.99); }
.report-tile.is-active { border-color:#efc46b; box-shadow:0 0 0 1px rgba(239,196,107,.2),0 12px 28px rgba(0,0,0,.3); }
.weekly-report-page > .panel { margin-top:0; }
.attendance-report-page > .panel { margin-top:0; }
.report-month-toolbar { display:flex; align-items:end; justify-content:flex-start; gap:12px; width:100%; margin:0 0 14px; padding:13px; border:1px solid #493037; border-radius:13px; background:#171112; direction:rtl; }.report-month-toolbar label { display:grid; flex:0 1 240px; min-width:210px; gap:5px; margin:0; color:#c5b3b7; }.report-month-toolbar input,.report-month-toolbar button { min-height:42px; margin:0; }.report-month-toolbar button { width:auto; min-width:170px; padding:0 16px; white-space:nowrap; }
.attendance-report-tile { border-color:#7d5420; background:linear-gradient(145deg,#3a2710,#181109); }
.attendance-report-tile:hover { background:linear-gradient(145deg,#5a3b12,#24170a); }
.attendance-report-table-wrap { margin-top:14px; border:1px solid #513037; border-radius:14px; background:#151011; }
.report-screen-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:14px 0; }.report-screen-stat { display:flex; align-items:center; gap:9px; min-width:0; min-height:82px; padding:12px; border:1px solid #4b2d34; border-radius:13px; background:linear-gradient(145deg,#211416,#151011); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }.report-screen-stat:hover { transform:translateY(-2px); border-color:#87505c; box-shadow:0 9px 22px rgba(0,0,0,.22); }.report-screen-stat i { display:grid; flex:none; width:34px; height:34px; place-items:center; border:1px solid currentColor; border-radius:10px; background:#171112; font-style:normal; font-size:16px; }.report-screen-stat div { min-width:0; }.report-screen-stat span,.report-screen-stat strong { display:block; }.report-screen-stat span { color:#bca8ac; font-size:9px; line-height:1.35; }.report-screen-stat strong { margin-top:5px; color:#fff; font-size:22px; line-height:1; overflow-wrap:anywhere; }.report-screen-stat.is-total { color:#d8b15e; }.report-screen-stat.is-present { color:#55c88b; }.report-screen-stat.is-late { color:#e6a64d; }.report-screen-stat.is-absent { color:#ed6678; }.report-screen-stat.is-leave { color:#62aee1; }.report-screen-stat.is-overtime { color:#a784d5; }.report-screen-stats-loading { grid-column:1/-1; margin:0; padding:20px; text-align:center; color:#bca8ac; }.report-person-link { text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; }.report-person-link:hover { text-decoration-color:currentColor; }
.attendance-report-table-wrap .table { margin:0; }
.attendance-report-table-wrap th { padding:14px 16px; color:#ffe7eb; background:#4c111d; }
.attendance-report-table-wrap td { padding:14px 16px; border-color:#3b252a; }
.attendance-report-table-wrap tbody tr:hover td { background:#251619; }
.attendance-report-state { padding:30px !important; text-align:center !important; color:#bdaeb1; }
.attendance-report-state.is-error { color:#ff8797; }
.attendance-report-cards { display:none; gap:10px; margin-top:14px; }
.attendance-report-card { padding:15px; border:1px solid #513037; border-radius:14px; background:linear-gradient(145deg,#211416,#141011); }
.attendance-report-card header { padding-bottom:11px; border-bottom:1px solid #3b252a; color:#fff; }
.attendance-report-card>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:11px; }
.attendance-report-card span { display:flex; justify-content:space-between; gap:8px; padding:9px; border-radius:9px; color:#bdaeb1; background:#1b1214; }
.attendance-report-card b { color:#fff; }
.report-person-link { width:auto; min-height:32px; margin:0; padding:4px 8px; border:1px solid transparent; border-radius:8px; color:#fff; background:transparent; font:inherit; font-weight:800; text-align:right; cursor:pointer; }.report-person-link:hover { color:#efc46b; border-color:#70404a; background:#2b171b; }.report-person-link:focus-visible { outline:2px solid #efc46b; outline-offset:2px; }
.report-person-calendar-modal { position:fixed; inset:0; z-index:115; display:grid; width:100vw; height:100vh; place-items:center; padding:20px; }.report-person-calendar-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }.report-person-calendar-card { position:relative; z-index:1; width:min(920px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:26px; border:1px solid #70404a; border-radius:20px; background:linear-gradient(145deg,#211315,#100e0f); box-shadow:0 28px 90px rgba(0,0,0,.75); }.report-person-calendar-head { padding:0 0 16px 48px; border-bottom:1px solid #482830; }.report-person-calendar-head h2 { margin:4px 0; color:#fff; }.report-person-calendar-head>span { color:#c7b4b8; }.report-person-calendar-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin:16px 0; }.report-person-calendar-summary article { padding:11px; border:1px solid #482830; border-radius:11px; background:#191113; }.report-person-calendar-summary span,.report-person-calendar-summary strong { display:block; }.report-person-calendar-summary span { color:#aa969b; font-size:10px; }.report-person-calendar-summary strong { margin-top:5px; color:#fff; font-size:18px; }.report-calendar-legend { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; }.report-calendar-legend span { padding:5px 9px; border:1px solid currentColor; border-radius:999px; font-size:10px; }.report-calendar-weekdays,.report-person-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }.report-calendar-weekdays { margin-bottom:6px; color:#bca9ad; font-size:10px; text-align:center; }.report-calendar-day { display:grid; align-content:space-between; min-width:0; min-height:76px; margin:0; padding:8px; border:1px solid #493039; border-radius:10px; color:#fff; background:#171112; text-align:right; cursor:pointer; }.report-calendar-day b { font-size:15px; }.report-calendar-day span { margin-top:12px; font-size:9px; overflow-wrap:anywhere; }.report-calendar-day:hover,.report-calendar-day:focus-visible,.report-calendar-day.is-selected { transform:translateY(-1px); outline:none; border-color:#efc46b; box-shadow:0 0 0 2px rgba(239,196,107,.18); }.report-calendar-blank { min-height:76px; }.report-calendar-day-details { margin-top:15px; padding:15px; border:1px solid #4d3037; border-radius:13px; background:#191113; }.report-calendar-day-details>strong { color:#fff; }.report-calendar-day-details>p { margin:7px 0 0; color:#bca9ad; }.report-calendar-status { display:inline-block; margin-right:9px; padding:4px 8px; border-radius:999px; font-size:10px; }.report-calendar-day-details dl { display:grid; grid-template-columns:1fr 2fr; gap:9px; margin:13px 0 0; }.report-calendar-day-details dl>div { padding:10px; border-radius:9px; background:#221519; }.report-calendar-day-details dt { color:#a99599; font-size:10px; }.report-calendar-day-details dd { margin:5px 0 0; color:#fff; }.report-calendar-day.is-present,.report-calendar-status.is-present { border-color:#287f57; background:#143124; }.report-calendar-day.is-late,.report-calendar-status.is-late { border-color:#b07b28; background:#342611; }.report-calendar-day.is-absent,.report-calendar-status.is-absent { border-color:#a6384a; background:#35151b; }.report-calendar-day.is-leave,.report-calendar-status.is-leave { border-color:#397db0; background:#142838; }.report-calendar-day.is-rest,.report-calendar-status.is-rest { border-color:#7658a3; background:#241a35; }.report-calendar-day.is-unregistered,.report-calendar-status.is-unregistered { border-color:#4a4143; background:#1a1718; color:#a99fa1; }.report-calendar-legend .is-present { color:#6ad39d; }.report-calendar-legend .is-late { color:#efbd5f; }.report-calendar-legend .is-absent { color:#ff8192; }.report-calendar-legend .is-leave { color:#72b8e8; }.report-calendar-legend .is-rest { color:#b694e3; }.report-calendar-legend .is-unregistered { color:#aaa0a2; }
@media (max-width:850px) { .attendance-report-table-wrap { display:none; }.attendance-report-cards { display:grid; }.attendance-report-card>div { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:1100px) { .report-screen-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { .report-person-calendar-card { padding:18px; }.report-person-calendar-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.report-calendar-weekdays span { font-size:0; }.report-calendar-weekdays span::first-letter { font-size:10px; }.report-calendar-day { min-height:60px; padding:6px; }.report-calendar-day span { font-size:0; }.report-calendar-blank { min-height:60px; }.report-calendar-day-details dl { grid-template-columns:1fr; } }
@media (max-width:520px) { .attendance-report-card>div { grid-template-columns:1fr; }.report-screen-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.report-screen-stat { min-height:76px; padding:10px; }.report-screen-stat strong { font-size:19px; } }
@media (max-width:520px) { .report-month-toolbar { align-items:stretch; flex-direction:column; }.report-month-toolbar label,.report-month-toolbar button { width:100%; min-width:0; flex:auto; } }
.star-select { min-width: 150px; color: #f3bd45; background: #241517; border-color: #7d3a28; font-size: 20px; letter-spacing: 2px; direction: ltr; text-align: center; }
.evaluation-stars { max-width: 190px; }
.timeline { display:grid; gap:12px; margin-top:18px; }
.timeline[hidden] { display:none !important; }
.timeline-item { display:grid; grid-template-columns:minmax(135px,.75fr) minmax(0,1.5fr) auto; gap:16px; align-items:center; padding:16px 18px; border:1px solid #43232c; border-radius:12px; background:#171313; line-height:1.55; }
.timeline-item > div { min-width:0; }
.timeline-item strong, .timeline-item span { display:block; white-space:normal; overflow-wrap:anywhere; }
.timeline-time { direction:rtl; text-align:right; }
.timeline-time strong { color:#fff; font-size:16px; }
.timeline-time span { color:#b8aab0; font-size:13px; margin-top:4px; }
.timeline-item .status-pill { justify-self:end; white-space:nowrap; }
.timeline-empty { padding:20px; text-align:center; color:var(--muted); }
@media (max-width:700px) { .timeline-item { grid-template-columns:1fr; gap:8px; } .timeline-item .status-pill { justify-self:start; } }

/* Booking directory - matches the clean customer-record visual language */
#bookings .workspace-grid > .panel:last-child { border-radius:18px; border-color:#482830; background:linear-gradient(145deg,#1b1214,#100f10); }
#bookings .section-heading { align-items:center; }
.booking-directory-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:16px 0; }.booking-stat-card { position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"icon title" "icon value"; align-items:center; column-gap:11px; min-height:86px; margin:0; padding:13px 15px; text-align:right; border:1px solid #482830; border-radius:12px; background:#241518; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }.booking-stat-card:hover { transform:translateY(-2px); border-color:#8f3c4d; background:#2b181c; box-shadow:0 10px 26px rgba(0,0,0,.2); }.booking-stat-card.is-active { border-color:#d1a74f; background:linear-gradient(135deg,#342019,#241518); box-shadow:0 0 0 1px rgba(209,167,79,.18); }.booking-stat-card i { grid-area:icon; display:grid; place-items:center; width:38px; height:38px; border:1px solid #6d3540; border-radius:11px; color:#dfb65e; background:#1a1113; }.booking-stat-card svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.booking-stat-card span { grid-area:title; display:block; color:#bfaeb2; font-size:11px; font-weight:600; }.booking-stat-card strong { grid-area:value; display:block; margin-top:2px; color:#fff; font-size:30px; line-height:1; }.booking-directory-stats small { color:#dfb65e; font-size:11px; }
#bookings .filter-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:12px; border:1px solid #482830; border-radius:13px; background:#171112; }.filter-row #bookingSearch { flex:1 1 220px; }.filter-row input,.filter-row select { margin:0; min-height:40px; }.filter-row button { margin:0; min-height:40px; }
#bookings .table-wrap { margin-top:14px; border:1px solid #482830; border-radius:14px; background:#120f10; }#bookings .table th { padding:14px 12px; color:#eddbdf; background:#351219; }#bookings .table td { padding:13px 12px; border-color:#372329; }#bookings .table tbody tr:hover td { background:#271519; }#bookings .table td small { color:#bba9ad; }
#bookings .timeline { padding-top:16px; border-top:1px solid #482830; }#bookings .timeline-item { grid-template-columns:110px minmax(0,1fr) auto; padding:14px 16px; border-color:#482830; border-radius:14px; background:linear-gradient(90deg,#251519,#171112); }#bookings .timeline-item:hover { border-color:#8d374a; background:#2b171c; }#bookings .timeline-time { padding-left:14px; border-left:2px solid #b22942; }#bookings .timeline-time strong { font-size:15px; }#bookings .timeline-item > div:nth-child(2) strong { color:#fff; font-size:16px; }#bookings .timeline-item > div:nth-child(2) span { margin-top:4px; color:#c2afb3; font-size:13px; }
.booking-history-toggle { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; width:100%; margin-top:18px; padding:17px 19px; text-align:right; color:#fff; border:1px solid #562933; border-radius:15px; background:linear-gradient(135deg,#2b151a,#171011); }.booking-history-toggle:hover,.booking-history-toggle.is-open { border-color:#b34b5e; background:linear-gradient(135deg,#421925,#211215); transform:translateY(-1px); }.history-toggle-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:#2a100b; background:linear-gradient(135deg,#e6bc66,#a95b25); font-size:23px; }.booking-history-toggle strong,.booking-history-toggle small { display:block; }.booking-history-toggle strong { font-size:16px; }.booking-history-toggle small { margin-top:4px; color:#c5afb4; font-size:12px; }.booking-history-toggle b { color:#efc76e; font-size:13px; white-space:nowrap; }
.overtime-dashboard-shortcut { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; width:230px; min-height:92px; margin:16px 0; padding:14px; text-align:right; color:#fff; border:1px solid #7c5420; border-radius:16px; background:linear-gradient(135deg,#39260f,#1d140a); }.overtime-dashboard-shortcut:hover { transform:translateY(-2px); border-color:#e5b65c; background:linear-gradient(135deg,#543714,#24170b); }.overtime-shortcut-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:#2d1905; background:linear-gradient(135deg,#f3cf76,#bd7629); font-size:22px; }.overtime-dashboard-shortcut strong,.overtime-dashboard-shortcut small { display:block; }.overtime-dashboard-shortcut strong { font-size:16px; }.overtime-dashboard-shortcut small { margin-top:4px; color:#e1c99d; font-size:11px; line-height:1.45; }.overtime-dashboard-shortcut b { display:none; }
.dashboard-overview-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:13px; padding:17px 19px; border:1px solid #4e2830; border-radius:16px; background:linear-gradient(135deg,rgba(39,19,23,.96),rgba(17,14,15,.94)); }.dashboard-overview-head .eyebrow { margin:0 0 4px; }.dashboard-overview-head h3 { margin:0; color:#fff; font-size:21px; }.dashboard-date-time { text-align:left; }.dashboard-date-time strong,.dashboard-date-time span { display:block; }.dashboard-date-time strong { color:#eadde0; font-size:13px; }.dashboard-date-time span { margin-top:4px; color:#e1b45a; font-size:18px; font-weight:800; }.dashboard-metric-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }.dashboard-metric { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"icon label" "icon value"; align-items:center; gap:3px 9px; width:100%; min-height:104px; margin:0; padding:14px; border:1px solid #4a2b32; border-radius:14px; color:#fff; text-align:right; background:linear-gradient(145deg,#211416,#151011); cursor:default; }.dashboard-metric[data-dashboard-target] { cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }.dashboard-metric[data-dashboard-target]:hover { transform:translateY(-2px); border-color:#9d4052; background:linear-gradient(145deg,#2c171c,#191113); box-shadow:0 10px 24px rgba(0,0,0,.24); }.dashboard-metric:focus-visible { outline:2px solid #efc46b; outline-offset:3px; }.dashboard-metric i { grid-area:icon; display:grid; place-items:center; width:35px; height:35px; border:1px solid #7a3946; border-radius:10px; color:#efc46b; background:#171011; font-style:normal; font-size:14px; }.dashboard-metric span { grid-area:label; margin:0; color:#bda9ad; font-size:9px; line-height:1.4; }.dashboard-metric strong { grid-area:value; color:#fff; font-size:23px; line-height:1.1; overflow-wrap:anywhere; }.dashboard-actions-panel,.dashboard-alerts-panel { margin-top:14px; }.dashboard-action-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.dashboard-action-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; width:100%; min-height:72px; margin:0; padding:12px; border:1px solid #553139; border-radius:12px; color:#fff; text-align:right; background:#191113; }.dashboard-action-item:hover { border-color:#a34a5c; background:#261519; transform:translateY(-1px); }.dashboard-action-item i { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; color:#271006; background:linear-gradient(135deg,#efc56b,#aa6027); font-style:normal; }.dashboard-action-item strong,.dashboard-action-item small { display:block; }.dashboard-action-item small { margin-top:3px; color:#bba8ac; font-size:10px; }.dashboard-action-item>b { min-width:30px; padding:5px 8px; border-radius:999px; color:#fff; background:#8f1830; text-align:center; }.dashboard-alerts-list { gap:8px; }.dashboard-alert-item { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; margin:0; padding:11px 13px; border:1px solid #493038; border-radius:11px; color:#e9dfe1; text-align:right; background:#181113; }.dashboard-alert-item:hover { border-color:#8f4654; background:#241519; }.dashboard-alert-item b { color:#e7ba60; font-size:11px; white-space:nowrap; }.dashboard-empty-state { margin:0; padding:24px; border:1px dashed #4b3036; border-radius:12px; color:#af9da1; text-align:center; background:#171112; }
@media (max-width:1300px) { .dashboard-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) { .dashboard-overview-head { align-items:flex-start; flex-direction:column; }.dashboard-date-time { text-align:right; }.dashboard-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-action-list { grid-template-columns:1fr; } }
@media (max-width:380px) { .dashboard-metric-grid { grid-template-columns:1fr; } }

.eyebrow {
  margin: 24px 0 8px;
  color: var(--gold);
  font-weight: 700;
}

.brand-panel h1 {
  margin: 0;
  max-width: 740px;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.05;
}

.intro {
  max-width: 600px;
  color: #dbe7e7;
  font-size: 19px;
  line-height: 1.8;
}

.sample-users {
  display: grid;
  gap: 10px;
  max-width: 420px;
  margin-top: 26px;
}

.sample-users span {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.login-card {
  display: grid;
  gap: 18px;
  padding: 28px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* Centered, compact sign-in experience */
.login-shell { position:relative; display:grid; grid-template-columns:1fr; place-items:center; padding:32px; overflow:hidden; }
.login-shell::before { content:""; position:absolute; width:620px; height:620px; right:-210px; top:50%; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle,rgba(200,16,46,.14),transparent 67%); pointer-events:none; }
.login-shell .brand-panel { position:absolute; right:clamp(24px,5vw,82px); top:32px; z-index:1; max-width:500px; transform:none; pointer-events:none; }.login-shell .brand-panel .brand-mark { width:64px; height:64px; }
.login-shell .brand-panel h1 { margin-top:10px; font-size:clamp(28px,3.2vw,46px); }.login-shell .brand-panel .intro { font-size:16px; }.login-shell .brand-panel .eyebrow { margin-top:14px; }
.login-card { position:relative; z-index:2; width:min(360px,calc(100vw - 40px)); gap:14px; padding:24px; border:1px solid #482630; border-radius:16px; background:linear-gradient(145deg,#191416,#0f0f10); box-shadow:0 22px 58px rgba(0,0,0,.52); }
.login-card h2 { font-size:25px; }.login-card input { min-height:40px; }.login-card .owner-credentials { margin-top:4px; }
@media (max-width:900px) { .login-shell .brand-panel { position:relative; right:auto; top:auto; transform:none; margin-bottom:18px; text-align:center; }.login-shell .brand-panel .brand-mark { margin-inline:auto; }.login-shell .brand-panel h1 { font-size:32px; }.login-shell .brand-panel .intro { display:none; }.login-shell { align-content:center; gap:18px; }.login-card { width:min(360px,100%); } }

.login-card h2 {
  margin: 0 0 4px;
}

.error,
.form-message {
  min-height: 22px;
  margin: 0;
  color: var(--danger);
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  background: #080808;
}

.sidebar {
  padding: 22px;
  border-left: 1px solid var(--line);
  background: #101010;
}

.logo-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
}

.logo-row span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-item {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  color: #d5d5d8;
  text-align: right;
  background: transparent;
}

.nav-item:hover,
.nav-item.active {
  color: #fff;
  background: linear-gradient(90deg,#9d0c24,#c8102e);
  box-shadow: 0 7px 18px rgba(200,16,46,.2);
}

.content-shell {
  min-width: 0;
  padding: 22px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
}

.topbar .eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
}

.topbar h2 {
  margin: 0;
  font-size: 28px;
}

.user-box {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #121212;
}

.user-box span {
  color: var(--muted);
  font-size: 13px;
}

.ghost-button {
  color: #ffccd3;
  border: 1px solid #8f2437;
  background: #260d13;
}

.ghost-button:hover {
  background: #4a101d;
}

.view {
  display: none;
}

.active-view {
  display: block;
}

.metric-grid,
.report-grid,
.employee-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.metric,
.report-grid article,
.employee-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg,#171717,#0f0f0f);
  box-shadow: 0 8px 22px rgba(24, 35, 52, 0.05);
}

.metric span,
.report-grid span {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
}

.metric strong,
.report-grid strong {
  font-size: 28px;
}

.panel {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #121212;
  box-shadow: 0 8px 22px rgba(24, 35, 52, 0.05);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.section-heading h3 {
  margin: 0;
  font-size: 19px;
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  gap: 16px;
}

.workspace-grid .panel {
  margin-top: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.wide {
  grid-column: 1 / -1;
}

.form-panel {
  display: grid;
  gap: 16px;
  align-content: start;
}

.tab-group {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1b1315;
}

.tab {
  min-height: 34px;
  padding: 0 14px;
  color: var(--muted);
  background: transparent;
}

.tab.active {
  color: #fff;
  background: var(--accent);
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

th,
td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-size: 13px;
}

.alerts-list,
.issue-list,
.audit-list {
  display: grid;
  gap: 10px;
}

.alert,
.issue,
.audit-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  color: #ffd5da;
  background: #4a101b;
  font-size: 13px;
}

.issue-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.issue-status-control { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.issue-status-control select { width:auto; min-width:132px; margin:0; padding:8px 28px 8px 10px; font-size:13px; background-color:#241316; }
.save-issue-status { margin:0; white-space:nowrap; }
.issue-history-panel { max-width:100%; }
.issue-history-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 18px; padding:12px; border:1px solid #482830; border-radius:12px; background:#171112; }
.issue-history-tools input { flex:1 1 280px; margin:0; }.issue-history-tools select { width:auto; min-width:150px; margin:0; }.issue-history-tools button { margin:0; white-space:nowrap; }
.issue-history-table td { vertical-align:middle; }.issue-history-table small { color:var(--muted); }
.overtime-requests-panel { background:linear-gradient(145deg,#1c1214,#120f10); border-color:#5a2933; }
.overtime-requests-panel .section-heading { align-items:center; }.overtime-requests-panel .section-heading h3 { margin:0; }
.overtime-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:4px 0 16px; }.overtime-summary article { padding:13px; border-radius:11px; border:1px solid #482830; background:#28171b; }.overtime-summary span { display:block; color:#bda9ad; font-size:12px; }.overtime-summary strong { display:block; margin-top:5px; color:#fff; font-size:22px; }.overtime-summary small { color:#dcb15c; font-size:11px; }
#overtimeList .issue { padding:16px; border-radius:12px; border-color:#4a2930; background:linear-gradient(90deg,#241519,#161112); transition:transform .18s ease,border-color .18s ease; }.overtime-requests-panel #overtimeList .issue:hover { transform:translateX(-2px); border-color:#9a4355; }.overtime-requests-panel #overtimeList .issue>div:first-child { flex:1; }.overtime-requests-panel #overtimeList strong { color:#fff; font-size:16px; }.overtime-requests-panel #overtimeList span:not(.status-pill) { display:block; margin-top:5px; color:#c7b3b7; }.overtime-requests-panel #overtimeList p { margin:8px 0 0; color:#a89196; font-size:13px; }.overtime-requests-panel #overtimeList button { margin:0; white-space:nowrap; }
#overtimeList .issue { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:10px; min-height:0; }.overtime-requests-panel #overtimeList .issue .status-pill { min-height:25px; padding:0 8px; white-space:nowrap; }.overtime-requests-panel #overtimeList .issue button { min-width:64px; padding:8px 10px; font-size:13px; }
#overtimeHistoryPanel { margin-top:18px; border-color:#4c2c33; background:linear-gradient(145deg,#1b1314,#111011); }.overtime-manager-panel .table-wrap { border:1px solid #3f282d; border-radius:12px; }.overtime-manager-panel .table th { background:#3c121c; color:#ffe2e7; }.overtime-manager-panel .table td { padding:14px 12px; }.overtime-manager-panel .table tr:hover td { background:#28161a; }
@media print { .sidebar,.topbar,#issueForm,#issuesList,.issue-history-tools,.section-heading .eyebrow { display:none !important; } .app-shell,.content-shell,#maintenance,.issue-history-panel { display:block !important; padding:0 !important; margin:0 !important; border:0 !important; background:#fff !important; color:#111 !important; } .issue-history-panel table,.issue-history-panel td,.issue-history-panel th { color:#111 !important; } .issue-history-panel th { background:#eee !important; } }
@media (max-width:900px) { .booking-directory-stats { grid-template-columns:repeat(3,1fr); } } @media (max-width:700px) { .booking-directory-stats { grid-template-columns:1fr 1fr; }.booking-stat-card { min-height:78px; padding:11px 13px; }.booking-stat-card strong { font-size:26px; } #bookings .timeline-item { grid-template-columns:1fr auto; gap:10px; } #bookings .timeline-time { grid-column:1 / -1; padding:0 0 8px; border-left:0; border-bottom:2px solid #b22942; } }

.booking-status-confirmed { color:#d9ffe6; background:#17623d; border-color:#2d985e; }.booking-status-pending { color:#fff1bf; background:#77551a; border-color:#ba8c30; }.booking-status-cancelled { color:#ffd7dc; background:#6c202d; border-color:#aa3b4d; }.booking-status-completed { color:#d8edff; background:#1d4d79; border-color:#367cad; }.booking-current { border-color:#d7ac50 !important; box-shadow:0 0 0 1px rgba(215,172,80,.2); }.booking-upcoming { border-right:3px solid #b22a43; }.booking-completed { opacity:.72; }.booking-cancelled { opacity:.58; border-color:#7c3441 !important; }.booking-now-marker { margin:12px 0 6px; padding:7px 12px; border-right:3px solid #e8bd62; border-radius:9px; color:#f1ce7e; background:rgba(232,189,98,.1); font-size:12px; font-weight:800; }

.bookings-page-actions { display:flex; justify-content:flex-start; margin-bottom:14px; }.bookings-page-actions button { margin:0; min-height:44px; padding:0 22px; }

#bookings .booking-filter-panel { display:grid; grid-template-columns:minmax(0,1fr) 150px; align-items:stretch; gap:10px; padding:14px; }.booking-filter-fields { display:grid; gap:10px; min-width:0; }.booking-filter-line { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.booking-filter-line > input,.booking-filter-line > select,.booking-search-field,.booking-search-field input { width:100%; height:46px; min-height:46px; margin:0; }.booking-search-field { position:relative; display:block; }.booking-search-field svg { position:absolute; z-index:1; top:50%; right:14px; width:19px; height:19px; color:#c89d4c; fill:none; stroke:currentColor; stroke-width:1.8; transform:translateY(-50%); pointer-events:none; }.booking-search-field input { padding-right:43px; }.booking-filter-actions { display:grid; grid-template-rows:repeat(2,46px); gap:10px; }.booking-filter-actions button { width:100%; height:46px; min-height:46px; margin:0; padding:0 12px; }

@media (max-width:700px) { #bookings .booking-filter-panel { grid-template-columns:1fr; }.booking-filter-actions { grid-template-columns:1fr 1fr; grid-template-rows:46px; } } @media (max-width:600px) { .booking-filter-line { grid-template-columns:1fr; } }

/* Maintenance workspace */
.maintenance-page-actions { display:flex; justify-content:flex-start; margin-bottom:14px; }
.maintenance-page-actions button { min-height:44px; margin:0; padding:0 22px; }
.issue-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.issue-stat-card { display:grid; grid-template-columns:auto 1fr; grid-template-areas:"icon label" "icon value"; align-items:center; gap:2px 11px; min-height:84px; margin:0; padding:13px; text-align:right; border:1px solid #482830; border-radius:13px; background:linear-gradient(145deg,#241518,#171112); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.issue-stat-card:hover { transform:translateY(-2px); border-color:#9d4053; box-shadow:0 12px 28px rgba(0,0,0,.24); }
.issue-stat-card.is-active { border-color:#d6aa50; box-shadow:0 0 0 1px rgba(214,170,80,.22); background:linear-gradient(145deg,#342018,#211417); }
.issue-stat-card span { grid-area:label; color:#c1adb1; font-size:11px; font-weight:700; }
.issue-stat-card strong { grid-area:value; color:#fff; font-size:28px; line-height:1; }
.issue-stat-icon { grid-area:icon; position:relative; display:grid; place-items:center; width:38px; height:38px; border:1px solid #6a3540; border-radius:11px; background:#160f10; }
.issue-stat-icon::before { content:""; width:14px; height:14px; border:2px solid #d7a94c; border-radius:4px; }
.issue-stat-check::after { content:""; position:absolute; width:10px; height:5px; border-left:2px solid #61cb91; border-bottom:2px solid #61cb91; transform:rotate(-45deg); }
.issue-stat-urgent::before { border-radius:50%; border-color:#e45367; }
.issue-stat-urgent::after { content:"!"; position:absolute; color:#ffbec7; font-size:13px; font-style:normal; font-weight:900; }
.issue-stat-calendar::before { border-radius:3px; border-color:#d7a94c; box-shadow:inset 0 4px 0 rgba(215,169,76,.25); }
.current-issues-panel { margin:0; }
.current-issues-panel .section-heading { margin-bottom:16px; }
.issue-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.issue-card { position:relative; display:block; overflow:visible; min-width:0; padding:18px 18px 16px; border-radius:14px; background:linear-gradient(140deg,#24171a,#151112); border-color:#4d2e35; transition:transform .18s ease,border-color .18s ease; }
.issue-card::before { content:""; position:absolute; top:15px; bottom:15px; right:0; width:4px; border-radius:4px 0 0 4px; background:#ce314b; }
.issue-card:hover { transform:translateY(-2px); border-color:#7b3b49; }
.issue-card.issue-status-repairing::before { background:#d5a93f; }
.issue-card.issue-status-parts::before { background:#dd762d; }
.issue-card.issue-status-completed::before { background:#37a96b; }
.issue-card.issue-status-cancelled::before { background:#777176; }
.issue-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.issue-card-heading small { display:block; color:#b8a3a7; font-size:11px; }
.issue-card-heading strong { display:block; margin-top:4px; color:#fff; font-size:17px; }
.issue-card-badges { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.issue-card h4 { margin:17px 0 7px; color:#efc46c; font-size:15px; }
.issue-card p { min-height:43px; margin:0; color:#d7c7ca; font-size:13px; line-height:1.7; }
.issue-card-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 14px; margin-top:16px; padding-top:13px; border-top:1px solid #43272d; color:#ad999d; font-size:11px; }
.issue-card-meta b { color:#decdd0; font-weight:700; }
.issue-status-badge,.issue-priority-badge { display:inline-flex; align-items:center; min-height:26px; padding:0 9px; border:1px solid transparent; border-radius:999px; font-size:11px; font-weight:800; white-space:nowrap; }
.issue-status-badge.issue-status-open { color:#ffd9de; background:#5e1b27; border-color:#a33247; }
.issue-status-badge.issue-status-repairing { color:#ffefbd; background:#5e491d; border-color:#96762d; }
.issue-status-badge.issue-status-parts { color:#ffe0c7; background:#623719; border-color:#a85a25; }
.issue-status-badge.issue-status-completed { color:#d8ffe6; background:#173e2a; border-color:#2e7950; }
.issue-status-badge.issue-status-cancelled { color:#ddd7da; background:#373236; border-color:#625b60; }
.issue-priority-low { color:#ddd7da; background:#393438; border-color:#625b60; }
.issue-priority-medium { color:#fff0bd; background:#55431d; border-color:#886d2d; }
.issue-priority-high { color:#ffe1c6; background:#60361b; border-color:#a15827; }
.issue-priority-urgent { color:#ffd7dd; background:#641725; border-color:#bd314a; }
.issue-actions-menu { position:relative; width:max-content; margin:15px 0 0 auto; }
.issue-actions-menu summary { min-width:108px; padding:9px 14px; list-style:none; cursor:pointer; text-align:center; color:#f3d8dd; border:1px solid #923249; border-radius:9px; background:#2c151b; font-size:12px; font-weight:800; }
.issue-actions-menu summary::-webkit-details-marker { display:none; }
.issue-actions-menu[open] summary { border-color:#d6a74e; color:#f2cd7e; }
.issue-actions-menu>div { position:absolute; z-index:12; left:0; bottom:calc(100% + 7px); display:grid; width:190px; overflow:hidden; padding:6px; border:1px solid #6c3440; border-radius:11px; background:#171011; box-shadow:0 18px 45px #000; }
.issue-actions-menu button { width:100%; min-height:36px; margin:0; padding:7px 10px; text-align:right; border:0; border-radius:7px; color:#e8d9dc; background:transparent; font-size:12px; }
.issue-actions-menu button:hover { color:#fff; background:#3a1b23; transform:none; }
.issue-drawer { position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center; visibility:hidden; overflow:hidden; padding:16px; pointer-events:none; }
.issue-drawer.is-open { visibility:visible; pointer-events:auto; }
.issue-drawer-backdrop { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; opacity:0; background:rgba(0,0,0,.74); backdrop-filter:blur(4px); transition:opacity .24s ease; }
.issue-drawer.is-open .issue-drawer-backdrop { opacity:1; }
.issue-drawer-panel { position:relative; z-index:1; display:flex; flex-direction:column; box-sizing:border-box; width:min(800px,100%); height:min(760px,calc(100vh - 32px)); max-height:calc(100dvh - 32px); min-height:0; overflow:hidden; padding:0; border:1px solid #7d3040; border-radius:18px; opacity:0; background:linear-gradient(155deg,#231316,#0e0c0d 72%); box-shadow:0 28px 90px rgba(0,0,0,.72); transform:translateY(18px) scale(.985); transition:transform .24s ease,opacity .2s ease; }
.issue-drawer.is-open .issue-drawer-panel { opacity:1; transform:none; }
.issue-drawer-header { position:relative; z-index:3; display:flex; flex:0 0 auto; align-items:flex-start; justify-content:space-between; gap:16px; padding:14px 20px; border-bottom:1px solid #4b2830; background:linear-gradient(155deg,#231316,#171012); }
.issue-drawer-header h3 { margin:4px 0 0; color:#fff; font-size:23px; }
.issue-drawer-close { flex:none; width:38px; min-height:38px; margin:0; padding:0; border-radius:50%; font-size:25px; }
.issue-drawer .form-panel { display:flex; flex:1 1 auto; flex-direction:column; gap:0; width:100%; min-height:0; margin:0; padding:0; overflow:hidden; border:0; background:transparent; box-shadow:none; }
.issue-drawer-body { flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#71404a transparent; -webkit-overflow-scrolling:touch; }
.issue-drawer-body::-webkit-scrollbar { width:6px; }
.issue-drawer-body::-webkit-scrollbar-track { background:transparent; }
.issue-drawer-body::-webkit-scrollbar-thumb { border-radius:999px; background:#71404a; }
.issue-drawer .form-grid { grid-template-columns:1fr 1fr; align-content:start; overflow:visible; padding:18px 22px 28px; }
.issue-drawer .form-grid>* { min-width:0; }
.issue-drawer .form-grid input,.issue-drawer .form-grid select,.issue-drawer .form-grid textarea { width:100%; max-width:100%; }
.issue-drawer .form-message,.issue-drawer .booking-availability-message { margin-inline:22px; }
.issue-drawer-actions { position:relative; z-index:3; display:flex; flex:0 0 auto; gap:10px; margin:0; padding:14px 22px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid #4b2830; background:#120e0f; box-shadow:0 -10px 24px rgba(0,0,0,.3); }
.issue-drawer-actions button { flex:1; margin:0; }
.issue-drawer-open { overflow:hidden; }
@supports (height:100dvh) { .issue-drawer-panel { height:min(760px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px); } }
.issue-details-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:22px; }
.issue-modal-backdrop { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; background:rgba(0,0,0,.78); backdrop-filter:blur(5px); }
.issue-modal-card { position:relative; z-index:1; width:min(920px,100%); max-height:calc(100vh - 44px); overflow:auto; padding:27px; border:1px solid #703845; border-radius:20px; background:linear-gradient(145deg,#221416,#100e0f); box-shadow:0 28px 90px #000; }
.issue-detail-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 0 20px; border-bottom:1px solid #482830; }
.issue-detail-header h2 { margin:4px 0 0; color:#fff; font-size:24px; }
.issue-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:17px; }
.issue-detail-grid>section { padding:17px; border:1px solid #472a31; border-radius:13px; background:#1b1214; }
.issue-detail-grid>section.wide { grid-column:1 / -1; }
.issue-detail-grid h3 { margin:0 0 13px; color:#e5b95d; font-size:14px; }
.issue-detail-grid dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
.issue-detail-grid dl>div { padding:10px; border-radius:9px; background:#27171a; }
.issue-detail-grid dt { color:#a99498; font-size:11px; }
.issue-detail-grid dd { margin:5px 0 0; color:#f4eaec; font-size:13px; font-weight:700; }
.issue-system-times { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.issue-change-timeline { display:grid; gap:0; }
.issue-change-timeline article { position:relative; display:flex; gap:12px; min-height:52px; }
.issue-change-timeline article:not(:last-child)::after { content:""; position:absolute; top:18px; right:5px; bottom:-4px; width:1px; background:#69303d; }
.issue-change-timeline i { position:relative; z-index:1; width:11px; height:11px; margin-top:4px; border:2px solid #d5a94e; border-radius:50%; background:#1b1214; }
.issue-change-timeline strong,.issue-change-timeline span { display:block; }
.issue-change-timeline strong { color:#fff; font-size:13px; }
.issue-change-timeline span { margin-top:4px; color:#ad999d; font-size:11px; }
.issue-history-filter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; }
.issue-history-filter-grid input,.issue-history-filter-grid select,.issue-history-filter-grid button { width:100%; min-width:0; min-height:43px; margin:0; }
.issue-history-filter-grid label { color:#bba8ac; font-size:11px; }
.issue-history-filter-grid label input { margin-top:5px; }
.issue-history-table-wrap { max-height:520px; overflow:auto; }
.issue-history-table thead th { position:sticky; top:0; z-index:2; background:#30161d; box-shadow:0 1px 0 #66313c; }
.issue-history-table tbody tr:hover td { background:#28171a; }

@media (max-width:1180px) {
  .issue-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .issue-history-filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px) {
  .issue-list { grid-template-columns:1fr; }
  .issue-history-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .issue-detail-grid { grid-template-columns:1fr; }
  .issue-detail-grid>section.wide { grid-column:auto; }
  .issue-system-times { grid-template-columns:1fr !important; }
}
@media (max-width:600px) {
  .issue-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .issue-stat-card { min-height:76px; padding:10px; }
  .issue-stat-card strong { font-size:25px; }
  .issue-card-meta,.issue-detail-grid dl { grid-template-columns:1fr; }
  .issue-history-filter-grid { grid-template-columns:1fr; }
  .issue-drawer { padding:8px; }
  .issue-drawer-panel { width:100%; max-width:none; height:calc(100vh - 32px); max-height:calc(100vh - 32px); border-radius:14px; }
  .issue-drawer .form-grid { grid-template-columns:1fr; }
  .issue-drawer-header { padding:14px 16px; }
  .issue-drawer .form-grid { padding:14px 16px 24px; }
  .issue-drawer .form-message,.issue-drawer .booking-availability-message { margin-inline:16px; }
  .issue-drawer-actions { padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .issue-modal-card { padding:20px 15px; }
  .issue-card-heading { flex-direction:column; }
}
@supports (height:100dvh) { @media (max-width:600px) { .issue-drawer-panel { height:calc(100dvh - 32px); max-height:calc(100dvh - 32px); } } }
.backup-center { overflow:hidden; }
.backup-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.backup-summary-grid article { min-width:0; padding:14px; border:1px solid #4a2b32; border-radius:13px; background:#171112; }
.backup-summary-grid span,.backup-summary-grid strong { display:block; }
.backup-summary-grid span { color:#ac989c; font-size:11px; }
.backup-summary-grid strong { margin-top:7px; color:#fff; font-size:15px; overflow-wrap:anywhere; }
.backup-register { padding:14px; border:1px solid #482c32; border-radius:14px; background:#151011; }
.backup-history-list { display:grid; gap:8px; }
.backup-history-item { display:grid; grid-template-columns:minmax(220px,1fr) minmax(180px,.7fr) auto; align-items:center; gap:14px; padding:12px; border:1px solid #43282f; border-radius:11px; background:#1b1214; transition:.18s; cursor:pointer; }
.backup-history-item:hover,.backup-history-item:focus-visible { border-color:#803848; background:#241519; outline:none; box-shadow:0 8px 22px rgba(0,0,0,.14); }
.backup-history-main,.backup-history-meta { min-width:0; }
.backup-history-main strong,.backup-history-main span { display:block; overflow-wrap:anywhere; }
.backup-history-main strong { color:#fff; font-size:13px; }
.backup-history-main span { margin-top:4px; color:#ad999d; font-size:11px; }
.backup-history-meta { display:flex; gap:8px; flex-wrap:wrap; }
.backup-history-meta span { padding:4px 7px; border-radius:6px; color:#cdbec1; background:#26191c; font-size:10px; }
.backup-history-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.backup-history-actions button { white-space:nowrap; }
.backup-empty-state { margin:0; padding:22px; text-align:center; color:#aa969a; border:1px dashed #493038; border-radius:11px; }
.backup-details-card { width:min(760px,calc(100vw - 28px)); max-height:min(86vh,760px); overflow:auto; }
.backup-details-card header h2 { margin:4px 0; color:#fff; }
.backup-details-card header p:last-child { color:#ad999d; overflow-wrap:anywhere; }
.backup-details-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:16px 0; }
.backup-details-summary article { padding:11px; border:1px solid #482c32; border-radius:10px; background:#171112; }
.backup-details-summary span,.backup-details-summary strong { display:block; }
.backup-details-summary span { color:#a99599; font-size:10px; }
.backup-details-summary strong { margin-top:5px; color:#fff; font-size:12px; overflow-wrap:anywhere; }
.backup-details-card section h3 { margin:18px 0 8px; color:#edc76d; font-size:14px; }
.backup-table-counts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.backup-table-counts div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px; border:1px solid #42282e; border-radius:8px; background:#171112; }
.backup-table-counts code { color:#d8c7ca; overflow-wrap:anywhere; }
.backup-table-counts strong { color:#fff; }
.backup-error-list { display:grid; gap:6px; }
.backup-error-list article { padding:9px; border:1px solid #713541; border-radius:8px; background:#35161c; }
.backup-error-list strong,.backup-error-list span { display:block; overflow-wrap:anywhere; }
.backup-error-list strong { color:#ffc4cd; }
.backup-error-list span { margin-top:3px; color:#d6b7bc; font-size:11px; }
.backup-no-errors { color:#a9e6bd; }
@media (max-width:900px) { .backup-summary-grid,.backup-details-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.backup-history-item { grid-template-columns:1fr; }.backup-history-actions { justify-content:flex-start; } }
@media (max-width:560px) { .backup-summary-grid,.backup-details-summary,.backup-table-counts { grid-template-columns:1fr; }.backup-history-actions { display:grid; grid-template-columns:1fr; }.backup-history-actions button { width:100%; }.backup-center .settings-section-head>button { width:100%; } }
.database-health-center { overflow:hidden; }
.database-health-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.database-health-summary article,.database-project-info article { min-width:0; padding:13px; border:1px solid #472b32; border-radius:12px; background:#171112; }
.database-health-summary span,.database-health-summary strong,.database-project-info span,.database-project-info strong { display:block; }
.database-health-summary span,.database-project-info span { color:#a99599; font-size:10px; }
.database-health-summary strong { margin-top:6px; color:#fff; font-size:14px; overflow-wrap:anywhere; }
.database-health-message { margin:12px 0; padding:10px 12px; border:1px solid #4b3036; border-radius:9px; color:#cdbdc0; background:#1b1315; font-size:12px; }
.database-health-message.success { border-color:#386a49; color:#bfe9ca; background:#14271b; }
.database-health-message.warning { border-color:#785d2d; color:#f0d598; background:#2b2112; }
.database-health-message.danger-text { border-color:#783443; color:#ffc7d0; background:#32151b; }
.database-project-info { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.database-project-info strong { margin-top:5px; color:#eee3e5; font-size:12px; overflow-wrap:anywhere; }
.database-tables-register { padding:14px; border:1px solid #482c32; border-radius:14px; background:#151011; }
.database-table-list { display:grid; gap:7px; }
.database-table-item { display:grid; grid-template-columns:minmax(160px,.8fr) 115px 90px minmax(220px,1.5fr); align-items:center; gap:10px; padding:10px 12px; border:1px solid #40272d; border-radius:9px; background:#1b1214; }
.database-table-item code { color:#f0e4e6; font-size:12px; overflow-wrap:anywhere; }
.database-table-item>strong { color:#fff; text-align:center; }
.database-table-item>small { color:#ad999d; line-height:1.5; overflow-wrap:anywhere; }
.database-table-status { display:inline-flex; justify-content:center; min-height:25px; align-items:center; padding:2px 8px; border:1px solid #5b3b43; border-radius:999px; font-size:10px; }
.database-table-status.status-available { color:#b9ebc7; border-color:#39734d; background:#153321; }
.database-table-status.status-denied { color:#f1d18b; border-color:#80602b; background:#302410; }
.database-table-status.status-unavailable { color:#c9bbc0; border-color:#5b4b50; background:#242023; }
.database-table-status.status-error { color:#ffc1cb; border-color:#803747; background:#35151c; }
.database-table-status.status-pending { color:#b9a9ad; background:#21181a; }
@media (max-width:900px) { .database-health-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.database-project-info { grid-template-columns:repeat(2,minmax(0,1fr)); }.database-table-item { grid-template-columns:minmax(140px,1fr) 105px 70px; }.database-table-item>small { grid-column:1/-1; } }
@media (max-width:600px) { .database-health-summary,.database-project-info { grid-template-columns:1fr; }.database-health-center .settings-actions { display:grid; grid-template-columns:1fr; width:100%; }.database-table-item { grid-template-columns:1fr auto; align-items:start; }.database-table-item>strong { text-align:left; }.database-table-item>small { grid-column:1/-1; }.database-table-status { grid-row:1; grid-column:2; } }

/* Unified full-screen behavior for every modal in the system. */
html.modal-scroll-locked,
body.modal-open,
body.booking-drawer-open,
body.issue-drawer-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.customer-modal,
.booking-agreement-modal,
.booking-details-modal,
.employee-details-modal,
.issue-details-modal,
.report-details-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  padding: 22px;
  isolation: isolate;
}

.customer-modal-backdrop,
.agreement-backdrop,
.booking-details-backdrop,
.employee-details-backdrop,
.issue-modal-backdrop,
.report-details-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, .65) !important;
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.customer-modal-backdrop:hover,
.agreement-backdrop:hover,
.booking-details-backdrop:hover,
.employee-details-backdrop:hover,
.issue-modal-backdrop:hover,
.report-details-backdrop:hover {
  background: rgba(0, 0, 0, .65) !important;
  box-shadow: none !important;
  transform: none !important;
}

.customer-modal-card,
.agreement-card,
.booking-details-card,
.employee-details-card,
.issue-modal-card,
.report-details-card {
  position: relative;
  z-index: 1;
  max-width: calc(100vw - 44px);
  max-height: calc(100vh - 44px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.booking-drawer-backdrop,
.issue-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, .65) !important;
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.booking-drawer-backdrop:hover,
.issue-drawer-backdrop:hover {
  background: rgba(0, 0, 0, .65) !important;
  box-shadow: none !important;
  transform: none !important;
}

@supports (height: 100dvh) {
  .customer-modal,
  .booking-agreement-modal,
  .booking-details-modal,
  .employee-details-modal,
  .issue-details-modal,
  .report-details-modal,
  .customer-modal-backdrop,
  .agreement-backdrop,
  .booking-details-backdrop,
  .employee-details-backdrop,
  .issue-modal-backdrop,
  .report-details-backdrop,
  .booking-drawer-backdrop,
  .issue-drawer-backdrop {
    height: 100dvh !important;
  }

  .customer-modal-card,
  .agreement-card,
  .booking-details-card,
  .employee-details-card,
  .issue-modal-card,
  .report-details-card {
    max-height: calc(100dvh - 44px);
  }
}

@media (max-width: 600px) {
  .customer-modal,
  .booking-agreement-modal,
  .booking-details-modal,
  .employee-details-modal,
  .issue-details-modal,
  .report-details-modal {
    padding: 12px;
  }

  .customer-modal-card,
  .agreement-card,
  .booking-details-card,
  .employee-details-card,
  .issue-modal-card,
  .report-details-card {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
}

.booking-calendar-view { overflow-x:auto; border-color:#59313a; background:linear-gradient(145deg,#1c1315,#0e0d0e); }.booking-calendar-header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:13px; padding-bottom:15px; border-bottom:1px solid #492a31; }.booking-calendar-header h3 { margin:4px 0 0; color:#fff; font-size:23px; }.booking-calendar-controls { display:flex; align-items:center; gap:8px; }.booking-calendar-controls button { width:auto; min-height:38px; margin:0; padding:0 12px; white-space:nowrap; }.booking-calendar-controls strong { min-width:150px; color:#efc36b; text-align:center; font-size:14px; }.booking-calendar-legend { display:flex; justify-content:flex-end; gap:8px; margin-bottom:11px; }.booking-calendar-legend span { display:inline-flex; align-items:center; min-height:25px; padding:2px 9px; border-radius:999px; font-size:10px; font-weight:800; }.booking-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(115px,1fr)); min-width:805px; overflow:hidden; border:1px solid #4b2b32; border-radius:14px; background:#120f10; }.booking-calendar-weekday { padding:10px 7px; text-align:center; color:#dfcdd1; border-left:1px solid #4b2b32; background:#35151c; font-size:11px; font-weight:800; }.booking-calendar-day { min-height:145px; padding:8px; border-top:1px solid #3b252a; border-left:1px solid #3b252a; background:#171112; }.booking-calendar-day.is-outside { opacity:.42; background:#100e0f; }.booking-calendar-day.is-today { background:linear-gradient(145deg,#302217,#1a1213); box-shadow:inset 0 0 0 1px #c99d47; }.booking-calendar-day>header { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:7px; }.booking-calendar-day>header strong { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; color:#eee1e3; font-size:11px; }.booking-calendar-day.is-today>header strong { color:#271509; background:#e0b95d; }.booking-calendar-day>header span { display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:999px; color:#dfc6cc; background:#48232c; font-size:9px; }.booking-calendar-events { display:grid; gap:5px; }.calendar-booking { display:grid; grid-template-columns:auto 1fr; gap:2px 6px; width:100%; min-height:0; margin:0; padding:7px 8px; text-align:right; border-radius:8px; box-shadow:none; transition:transform .15s ease,filter .15s ease; }.calendar-booking:hover { transform:translateY(-1px); filter:brightness(1.12); }.calendar-booking strong { grid-row:1/3; align-self:center; font-size:10px; }.calendar-booking span,.calendar-booking small { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.calendar-booking span { font-size:10px; font-weight:800; }.calendar-booking small { opacity:.75; font-size:8px; }.calendar-type-karaoke { color:#ffe0e5; border-color:#97354a; background:#651d2d; }.calendar-type-birthday { color:#fff0c2; border-color:#987131; background:#654719; }.calendar-booking.is-cancelled { opacity:.42; text-decoration:line-through; }

@media (max-width:700px) { .booking-calendar-header { align-items:flex-start; flex-direction:column; }.booking-calendar-controls { width:100%; flex-wrap:wrap; }.booking-calendar-controls strong { order:-1; width:100%; }.booking-calendar-controls button { flex:1; }.booking-calendar-day { min-height:125px; } }

/* Premium authentication screen */
.login-shell { position:relative; display:grid; grid-template-columns:minmax(330px,390px) minmax(0,1fr); gap:clamp(48px,8vw,140px); align-items:center; min-height:100vh; padding:clamp(26px,5vw,80px); overflow:hidden; direction:ltr; background:radial-gradient(circle at 74% 48%,rgba(181,16,48,.22),transparent 29%),radial-gradient(circle at 12% 85%,rgba(129,8,31,.17),transparent 27%),linear-gradient(130deg,#09090a 0%,#0c0809 48%,#21080f 100%); }
.login-shell::before,.login-shell::after { content:""; position:absolute; border-radius:50%; pointer-events:none; filter:blur(3px); }.login-shell::before { width:530px; height:530px; right:-190px; top:-180px; border:1px solid rgba(214,35,68,.22); box-shadow:0 0 110px rgba(198,16,46,.14) inset; }.login-shell::after { width:360px; height:360px; left:-170px; bottom:-170px; background:rgba(169,11,41,.12); filter:blur(60px); }
.login-showcase { position:relative; z-index:1; grid-column:2; max-width:680px; direction:rtl; animation:premiumFade .7s ease both; }.showcase-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(5px); }.orb-one { width:260px; height:260px; right:18%; top:23%; background:rgba(198,16,46,.13); filter:blur(65px); }.orb-two { width:150px; height:150px; left:3%; bottom:-30px; background:rgba(227,159,62,.13); filter:blur(48px); }
.showcase-brand { display:flex; align-items:center; gap:13px; margin-bottom:clamp(46px,8vh,90px); }.showcase-brand img { width:62px; height:62px; object-fit:cover; border:1px solid rgba(255,255,255,.7); border-radius:17px; box-shadow:0 12px 32px rgba(0,0,0,.35); }.showcase-brand p { margin:0; color:#fff; font-size:18px; font-weight:800; letter-spacing:.7px; }.showcase-brand span { display:block; margin-top:4px; color:#e6b04f; font-size:12px; letter-spacing:.4px; direction:ltr; text-align:right; }
.showcase-copy { position:relative; }.showcase-copy .eyebrow { margin:0 0 13px; color:#dfaf52; font-size:12px; letter-spacing:1.8px; }.showcase-copy h1 { margin:0; color:#fff; font-size:clamp(42px,5vw,76px); line-height:1.1; letter-spacing:-1px; }.showcase-copy h1 em { color:#d81a3a; font-style:normal; }.showcase-copy>p:last-child { max-width:470px; margin:18px 0 30px; color:#c8b8bc; font-size:17px; line-height:1.8; }
.system-modules { display:grid; grid-template-columns:repeat(3,minmax(110px,1fr)); gap:11px; max-width:610px; }.system-modules article { display:flex; align-items:center; gap:9px; min-height:58px; padding:11px; color:#eee3e5; border:1px solid rgba(214,72,94,.28); border-radius:13px; background:rgba(255,255,255,.035); backdrop-filter:blur(8px); transition:transform .2s ease,border-color .2s ease,background .2s ease; }.system-modules article:hover { transform:translateY(-4px); border-color:#d6425d; background:rgba(200,16,46,.14); }.system-modules article span { font-size:20px; }.system-modules article strong { font-size:13px; }
.premium-login-card { position:relative; z-index:2; grid-column:1; width:100%; display:grid; gap:17px; padding:30px; direction:rtl; border:1px solid rgba(210,63,85,.45); border-radius:22px; background:linear-gradient(145deg,rgba(29,23,25,.84),rgba(13,13,14,.8)); box-shadow:0 24px 65px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(15px); animation:premiumSlideUp .65s .1s ease both; }.premium-login-card::before { content:""; position:absolute; top:0; right:28px; left:28px; height:2px; background:linear-gradient(90deg,transparent,#d62948,transparent); }.login-card-head { padding-bottom:4px; }.login-kicker { color:#e1ae52; font-size:12px; font-weight:700; }.premium-login-card h2 { margin:6px 0 5px; color:#fff; font-size:28px; }.premium-login-card .muted { margin:0; color:#bba9ad; font-size:13px; }.login-field { display:grid; gap:7px; color:#d7c5c9; font-size:13px; }.input-shell { display:flex; align-items:center; gap:10px; min-height:48px; padding:0 13px; border:1px solid #513139; border-radius:12px; background:rgba(6,6,7,.6); transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }.input-shell:focus-within { border-color:#cf2745; background:rgba(26,10,14,.86); box-shadow:0 0 0 4px rgba(200,16,46,.12); }.input-shell i { width:18px; color:#db9a5c; font-style:normal; text-align:center; }.input-shell input { min-height:44px; margin:0; padding:0; border:0; border-radius:0; background:transparent; outline:0; box-shadow:none; }.input-shell input::placeholder { color:#76666a; }.login-submit { position:relative; min-height:50px; margin-top:3px; overflow:hidden; border-radius:12px; font-weight:800; background:linear-gradient(135deg,#dc183b,#a80c27); box-shadow:0 10px 22px rgba(200,16,46,.25); transition:transform .2s ease,box-shadow .2s ease; }.login-submit:hover { transform:translateY(-2px); background:linear-gradient(135deg,#ec2549,#bd1030); box-shadow:0 14px 28px rgba(200,16,46,.35); }.login-submit:disabled { cursor:wait; opacity:.86; }.login-submit.is-loading span { opacity:0; }.login-submit.is-loading::after { content:""; position:absolute; inset:0; width:17px; height:17px; margin:auto; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:premiumSpin .7s linear infinite; }.premium-login-card .owner-credentials { margin-top:3px; padding:13px; border-color:#5b2834; border-radius:13px; background:rgba(73,14,28,.3); }.premium-login-card .owner-credentials strong { color:#f1c4cc; }.premium-login-card .credential-copy { border-radius:9px; }.premium-login-card .error { min-height:0; font-size:12px; }
@keyframes premiumFade { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:translateX(0); } } @keyframes premiumSlideUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } } @keyframes premiumSpin { to { transform:rotate(360deg); } }
@media (max-width:980px) { .login-shell { grid-template-columns:minmax(315px,370px) minmax(0,1fr); gap:40px; padding:38px; }.showcase-copy h1 { font-size:48px; }.system-modules { grid-template-columns:repeat(2,minmax(120px,1fr)); } }
@media (max-width:760px) { .login-shell { display:flex; flex-direction:column-reverse; justify-content:center; gap:28px; min-height:100svh; padding:28px 20px; }.login-showcase,.premium-login-card { width:min(100%,400px); }.login-showcase { text-align:center; }.showcase-brand { justify-content:center; margin-bottom:26px; }.showcase-copy h1 { font-size:36px; }.showcase-copy>p:last-child { display:none; }.system-modules { grid-template-columns:repeat(3,1fr); gap:8px; }.system-modules article { justify-content:center; min-height:48px; padding:8px; }.system-modules article strong { display:none; }.premium-login-card { padding:24px; } }

/* Simplified Lucky Roll Control login identity */
.login-shell { grid-template-columns:minmax(330px,390px) minmax(280px,1fr); grid-template-rows:1fr; gap:clamp(54px,10vw,180px); }.login-simple-brand { position:relative; z-index:1; grid-column:2; grid-row:1; align-self:center; direction:ltr; text-align:center; animation:premiumFade .65s ease both; }.login-simple-brand img { width:108px; height:108px; object-fit:cover; border:1px solid rgba(255,255,255,.75); border-radius:26px; box-shadow:0 16px 42px rgba(200,16,46,.25); }.login-simple-brand p { margin:20px 0 7px; color:#fff; font-size:clamp(23px,2.7vw,39px); font-weight:900; letter-spacing:1.2px; }.login-simple-brand span { color:#e5b24b; font-size:14px; letter-spacing:.7px; }.premium-login-card { grid-column:1; grid-row:1; }
@media (max-width:760px) { .login-shell { flex-direction:column; gap:26px; }.login-simple-brand { width:100%; text-align:center; }.login-simple-brand img { width:78px; height:78px; border-radius:20px; }.login-simple-brand p { margin:13px 0 5px; font-size:23px; }.login-simple-brand span { font-size:11px; }.premium-login-card { width:min(100%,390px); } }
.login-simple-brand p { display:none; }
.login-shell { display:grid; grid-template-columns:1fr; grid-template-rows:1fr; place-items:center; gap:0; padding:32px; }
.login-simple-brand { position:absolute; top:28px; right:clamp(26px,5vw,74px); z-index:3; display:flex; flex-direction:column; align-items:center; gap:9px; width:auto; grid-column:auto; grid-row:auto; direction:ltr; text-align:center; }.login-simple-brand img { width:64px; height:64px; border-radius:17px; }.login-simple-brand span { color:#e5b24b; font-family:Tahoma,Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:.55px; line-height:1.35; white-space:nowrap; text-shadow:0 2px 14px rgba(229,178,75,.22); }.premium-login-card { grid-column:auto; grid-row:auto; width:min(390px,calc(100vw - 40px)); }
@media (max-width:760px) { .login-shell { padding:24px 18px; }.login-simple-brand { top:20px; right:20px; gap:9px; }.login-simple-brand img { width:48px; height:48px; border-radius:13px; }.login-simple-brand span { font-size:10px; }.premium-login-card { margin-top:45px; } }
.login-bowling-art { position:absolute; z-index:1; left:max(30px,calc(50% - 535px)); top:50%; width:min(260px,20vw); margin:0; overflow:hidden; border:1px solid rgba(197,42,67,.4); border-radius:22px; background:#130b0e; box-shadow:0 22px 60px rgba(0,0,0,.45),0 0 44px rgba(200,16,46,.12); transform:translateY(-50%); animation:premiumFade .8s .2s ease both; }.login-bowling-art::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 44px rgba(0,0,0,.55); pointer-events:none; }.login-bowling-art img { display:block; width:100%; aspect-ratio:3 / 4; object-fit:cover; object-position:center; }
@media (max-width:1180px) { .login-bowling-art { display:none; } }
.login-bowling-art { display:none; }
.login-shell { background:radial-gradient(circle at 73% 47%,rgba(179,14,45,.2),transparent 30%),linear-gradient(90deg,rgba(5,5,6,.94) 0%,rgba(8,6,7,.88) 42%,rgba(30,6,13,.92) 100%); }
.login-shell::before { inset:0; width:auto; height:auto; right:auto; top:auto; border:0; border-radius:0; background:linear-gradient(90deg,rgba(6,6,7,.18),rgba(6,6,7,.7) 52%,rgba(6,6,7,.98)),url('./bowling-login-hero.png') left center / auto 100% no-repeat; box-shadow:none; filter:none; opacity:.48; transform:none; }
.login-shell { background-color:#090708; background-image:linear-gradient(90deg,rgba(5,5,6,.54),rgba(8,6,7,.62) 45%,rgba(30,6,13,.76) 100%),url('./bowling-login-hero.png'); background-position:center,center; background-repeat:no-repeat,no-repeat; background-size:cover,cover; }
.login-shell::before { display:none; }
.app-shell { background-color:#080808; background-image:linear-gradient(90deg,rgba(7,7,8,.82),rgba(16,6,10,.72)),url('./bowling-login-hero.png'); background-position:center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed; }
.content-shell { background:linear-gradient(90deg,rgba(8,8,8,.5),rgba(8,8,8,.34)); backdrop-filter:blur(2px); }
.booking-agreement-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:22px; }.agreement-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.76); backdrop-filter:blur(7px); }.agreement-card { position:relative; z-index:1; width:min(620px,100%); max-height:calc(100vh - 44px); overflow:auto; padding:26px; border:1px solid #873543; border-radius:20px; background:linear-gradient(145deg,#251316,#100e0f); box-shadow:0 28px 90px rgba(0,0,0,.7); }.agreement-card header { display:flex; align-items:start; justify-content:space-between; gap:18px; padding-bottom:17px; border-bottom:1px solid #4b2830; }.agreement-card header .eyebrow { margin:0 0 5px; font-size:11px; }.agreement-card h2 { margin:0; color:#fff; }.agreement-close { width:36px; min-height:36px; padding:0; border-radius:50%; font-size:25px; line-height:1; background:#3b1a20; }.agreement-terms { margin:18px 0; padding:16px; border:1px solid #4c2930; border-radius:13px; background:#1a1113; }.agreement-terms strong { color:#efc46b; }.agreement-terms p { margin:8px 0 0; color:#d3c1c4; font-size:14px; line-height:1.8; }.signature-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0 9px; }.signature-heading strong,.signature-heading span { display:block; }.signature-heading strong { color:#fff; }.signature-heading span { margin-top:3px; color:#bba6aa; font-size:12px; }.signature-heading button { min-height:34px; margin:0; padding:0 12px; }.agreement-card canvas { display:block; width:100%; height:160px; touch-action:none; cursor:crosshair; border:1px dashed #a34355; border-radius:13px; background:radial-gradient(circle at 15% 30%,rgba(200,16,46,.11),transparent 40%),#0d0c0d; }.agreement-card footer { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }.agreement-card footer button { min-height:44px; padding:0 16px; }.modal-open { overflow:hidden; }
@media (max-width:600px) { .agreement-card { padding:19px; }.signature-heading { align-items:start; flex-direction:column; }.agreement-card canvas { height:130px; }.agreement-card footer { flex-direction:column-reverse; }.agreement-card footer button { width:100%; } }
.booking-detail-trigger { cursor:pointer; }.booking-detail-trigger td:first-child { font-weight:700; }.booking-details-modal { position:fixed; inset:0; z-index:101; display:grid; place-items:center; padding:22px; }.booking-details-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.76); backdrop-filter:blur(7px); }.booking-details-card { position:relative; z-index:1; width:min(760px,100%); max-height:calc(100vh - 44px); overflow:auto; padding:28px; border:1px solid #703641; border-radius:20px; background:linear-gradient(145deg,#241416,#100e0f); box-shadow:0 28px 90px rgba(0,0,0,.7); }.booking-details-head { display:flex; align-items:center; gap:15px; padding-bottom:19px; border-bottom:1px solid #4a2930; }.booking-details-head h2 { margin:4px 0; color:#fff; }.booking-details-head p { margin:0; color:#c2aeb2; }.booking-details-avatar { display:grid; place-items:center; width:62px; height:62px; border-radius:18px; color:#2d1409; background:linear-gradient(135deg,#edc66c,#ab5d26); font-size:27px; font-weight:800; }.booking-detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:20px 0; }.booking-detail-grid article { padding:13px; border:1px solid #482a30; border-radius:12px; background:#1a1113; }.booking-detail-grid span { display:block; color:#bba6aa; font-size:12px; }.booking-detail-grid strong { display:block; margin-top:6px; color:#fff; font-size:14px; }.booking-terms-record,.booking-signature-record { margin-top:16px; padding:16px; border:1px solid #482a30; border-radius:13px; background:#191113; }.booking-terms-record h3,.booking-signature-record h3 { margin:0 0 8px; color:#efc36b; font-size:16px; }.booking-terms-record p,.booking-signature-record p { margin:0; color:#d4c1c4; line-height:1.8; font-size:14px; }.booking-terms-record small { display:block; margin-top:10px; color:#bba6aa; }.booking-signature-record img { display:block; width:100%; max-height:170px; object-fit:contain; border:1px dashed #9e4556; border-radius:10px; background:#0d0c0d; }
@media (max-width:600px) { .booking-details-card { padding:19px; }.booking-detail-grid { grid-template-columns:1fr 1fr; }.booking-details-head { padding-left:34px; } }
.booking-details-card { width:min(920px,100%); }.booking-dashboard-head { position:relative; padding-left:120px; }.booking-details-title { min-width:0; flex:1; }.booking-details-status { position:absolute; top:9px; left:48px; min-height:30px; padding:4px 12px; font-weight:800; }.booking-dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }.booking-info-section { padding:16px; border:1px solid #482a30; border-radius:15px; background:linear-gradient(145deg,#1d1315,#151011); }.booking-info-section>h3,.booking-mini-timeline>h3 { margin:0 0 13px; color:#efc36b; font-size:15px; }.booking-section-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.booking-section-grid article { padding:10px 11px; border:1px solid #3d272c; border-radius:10px; background:#171112; }.booking-section-grid span,.booking-finance-summary span { display:block; color:#aa969b; font-size:10px; }.booking-section-grid strong { display:block; margin-top:5px; color:#f3e7e9; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }.booking-finance-section { grid-column:1/-1; }.booking-finance-summary { display:grid; direction:ltr; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-areas:"remaining paid total"; gap:10px; }.booking-finance-summary article { direction:rtl; padding:14px; border:1px solid #4a2b31; border-radius:12px; background:#171112; }.booking-finance-summary article:nth-child(1) { grid-area:total; }.booking-finance-summary article:nth-child(2) { grid-area:paid; }.booking-finance-summary article:nth-child(3) { grid-area:remaining; }.booking-finance-summary article.is-paid { border-color:#285f42; background:#13261c; }.booking-finance-summary article.is-remaining { border-color:#82404a; background:#291419; }.booking-finance-summary strong { display:block; margin-top:6px; color:#fff; font-size:20px; }.booking-finance-summary .is-paid strong { color:#a9e6bd; }.booking-finance-summary .is-remaining strong { color:#ffc3cd; }.booking-payment-state { margin:12px 0 0; color:#ac989d; font-size:12px; }.booking-payment-state strong { color:#f0d078; }.booking-mini-timeline { margin-top:14px; padding:16px; border:1px solid #482a30; border-radius:15px; background:#171112; }.booking-mini-timeline>div { display:flex; align-items:flex-start; gap:0; overflow-x:auto; }.booking-mini-timeline article { position:relative; display:flex; flex:1 0 180px; align-items:flex-start; gap:9px; padding-left:14px; }.booking-mini-timeline article:not(:last-child)::after { content:""; position:absolute; top:7px; right:16px; left:0; height:1px; background:#59313a; }.booking-mini-timeline i { position:relative; z-index:1; flex:none; width:15px; height:15px; border:3px solid #211316; border-radius:50%; background:#d7ad56; box-shadow:0 0 0 1px #9c7433; }.booking-mini-timeline article.timeline-cancelled i { background:#c84459; box-shadow:0 0 0 1px #8e3142; }.booking-mini-timeline article.timeline-reactivated i { background:#39a66c; box-shadow:0 0 0 1px #287e50; }.booking-mini-timeline strong,.booking-mini-timeline span { display:block; }.booking-mini-timeline strong { color:#eee1e4; font-size:12px; }.booking-mini-timeline span { margin-top:4px; color:#9f8b90; font-size:10px; }.booking-terms-text { color:#d4c1c4; line-height:1.8; font-size:14px; white-space:pre-line; }
@media (max-width:700px) { .booking-dashboard-grid { grid-template-columns:1fr; }.booking-finance-section { grid-column:auto; }.booking-finance-summary { direction:rtl; grid-template-columns:1fr; grid-template-areas:"total" "paid" "remaining"; } } @media (max-width:600px) { .booking-dashboard-head { padding-left:34px; }.booking-details-status { position:static; margin-right:auto; }.booking-section-grid { grid-template-columns:1fr; } }
.worker-preparation-panel { max-width:1100px; margin:20px auto 0; border-color:#5a3038; background:linear-gradient(145deg,#1c1214,#100f10); }.worker-preparation-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:end; padding:15px; border:1px solid #47282f; border-radius:14px; background:#161112; }.worker-preparation-form label { min-width:0; }.worker-preparation-form button { min-height:42px; }.worker-preparation-table { margin-top:0; }.worker-preparation-table th { background:#3b131c; color:#f6dde2; }.worker-preparation-table td { vertical-align:middle; }
.worker-preparation-panel .section-heading label { min-width:190px; }.worker-preparation-panel .section-heading input { margin:5px 0 0; }.worker-preparation-actions { display:flex; align-items:center; gap:14px; margin-top:14px; }.worker-preparation-actions button { width:auto; margin:0; }.worker-preparation-actions .form-message { margin:0; }
.worker-form-note { align-self:center; color:#bca8ac; font-size:13px; line-height:1.65; }.worker-preparation-table select,.worker-preparation-table input { min-width:130px; margin:0; }
@media (max-width:850px) { .worker-preparation-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.worker-preparation-table { overflow-x:auto; } }.worker-preparation-form button { width:100%; } @media (max-width:520px) { .worker-preparation-form { grid-template-columns:1fr; }.worker-preparation-panel .section-heading,.worker-preparation-actions { align-items:stretch; flex-direction:column; }.worker-preparation-actions button { width:100%; } }
.worker-preparation-report { margin-top:20px; border-color:#62401f; background:linear-gradient(145deg,#1c1510,#100f0d); }.worker-report-tools { display:flex; align-items:end; gap:12px; flex-wrap:wrap; padding:13px; border:1px solid #493727; border-radius:13px; background:#17130f; }.worker-report-tools label { min-width:210px; }.worker-report-tools button { margin:0; min-height:42px; }.worker-preparation-report th { background:#4a2d12; color:#ffe8b4; }.worker-preparation-report td { vertical-align:middle; }
.worker-preparation-report-tile { border-color:#87611d; background:linear-gradient(145deg,#3a2910,#181108); }.worker-preparation-report-tile:hover { background:linear-gradient(145deg,#5b3c12,#241709); }.worker-preparation-report-page > .panel { margin-top:0; }
.agreement-terms p,.booking-terms-record p { white-space:pre-line; }
.booking-terms-list { margin:11px 0 0; padding-right:24px; color:#d5c2c5; }.booking-terms-list li { padding-right:5px; margin:0 0 9px; line-height:1.75; }.booking-terms-list li::marker { color:#efc46b; font-weight:800; }
.reports-home { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:stretch; }.reports-home > .section-heading { grid-column:1 / -1; }.reports-home .report-tile { width:100%; min-height:170px; }.report-history-tile { border-color:#5b496c; background:linear-gradient(145deg,#251a30,#140f19); }.report-history-tile:hover { background:linear-gradient(145deg,#382448,#1c1324); }.report-history-panel { margin-top:0; }.report-history-list { display:grid; gap:10px; }.report-history-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; padding:14px; border:1px solid #482c50; border-radius:13px; background:#19121c; }.report-history-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:#3b2546; font-size:18px; }.report-history-row strong,.report-history-row span { display:block; }.report-history-row>div:nth-child(2) span { margin-top:4px; color:#b7a7ba; font-size:13px; }.report-history-meta { text-align:left; }.report-history-meta strong { color:#e3bf6d; font-size:13px; }.report-history-meta span { margin-top:4px; color:#a998ad; font-size:11px; }
.report-history-row { width:100%; min-height:0; text-align:right; color:#fff; }.report-history-row:hover { background:#261a2b; border-color:#775a82; }.report-history-row>span:nth-child(2)>span { margin-top:4px; color:#b7a7ba; font-size:13px; }.report-details-modal { position:fixed; inset:0; z-index:102; display:grid; place-items:center; padding:22px; }.report-details-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.76); backdrop-filter:blur(7px); }.report-details-card { position:relative; z-index:1; width:min(960px,100%); max-height:calc(100vh - 44px); overflow:auto; padding:30px; border:1px solid #674675; border-radius:20px; background:#171016; box-shadow:0 28px 90px rgba(0,0,0,.7); }.report-details-head { padding-bottom:17px; border-bottom:1px solid #4d3555; }.report-details-head .eyebrow { margin:0 0 5px; }.report-details-head h2 { margin:0; color:#fff; }.report-details-head>span { display:block; margin-top:6px; color:#b9a8bb; font-size:13px; }.report-details-body { margin-top:20px; color:#dfd2df; }.report-details-body table { width:100%; margin-top:16px; border-collapse:collapse; }.report-details-body th,.report-details-body td { padding:11px; border:1px solid #4b354f; text-align:right; }.report-details-body th { color:#fff; background:#44204d; }.report-details-body h3 { color:#edc66a; }
.report-history-filters { display:grid; grid-template-columns:minmax(220px,1.4fr) minmax(160px,.8fr) minmax(160px,.8fr) auto; align-items:end; gap:10px; margin-bottom:14px; }.report-history-filters label { min-width:0; }.report-history-filters input,.report-history-filters select,.report-history-filters button { width:100%; min-height:42px; margin:0; }.report-history-table-wrap { overflow:auto; border:1px solid #482c50; border-radius:13px; }.report-history-table { min-width:850px; margin:0; }.report-history-table th { position:sticky; top:0; z-index:1; color:#f5e8f7; background:#3c2344; }.report-history-table td { vertical-align:middle; border-color:#3d2c42; }.report-history-table tbody tr:hover td { background:#241827; }.report-history-actions { display:flex; gap:6px; }.report-history-actions button { width:auto; min-height:32px; margin:0; padding:0 10px; font-size:10px; }.report-history-actions .danger-button { border:1px solid #9d3145; color:#ffd5dc; background:#481520; }
@media (max-width:950px) { .reports-home { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:600px) { .reports-home { grid-template-columns:1fr; }.report-history-row { grid-template-columns:auto minmax(0,1fr); }.report-history-meta { grid-column:2; text-align:right; } }
@media (max-width:850px) { .report-history-filters { grid-template-columns:1fr 1fr; } } @media (max-width:520px) { .report-history-filters { grid-template-columns:1fr; } }
@media (max-width:850px) { .employee-directory-row { grid-template-columns:1fr auto; }.employee-directory-contact,.employee-directory-permissions { grid-column:1 / -1; }.employee-directory-row button { grid-column:2; grid-row:1; } }

.employee-card strong {
  display: block;
  margin-bottom: 8px;
}

.employee-card span {
  color: var(--muted);
}
.employee-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: stretch; }
.employee-grid { display:grid; grid-template-columns:1fr; gap:10px; }.employee-directory-row { display:grid; grid-template-columns:minmax(180px,.9fr) minmax(200px,1fr) minmax(240px,1.5fr) auto; align-items:center; gap:16px; padding:14px 17px; border:1px solid #482830; border-radius:14px; background:linear-gradient(90deg,#211416,#151011); cursor:pointer; }.employee-directory-row:hover { border-color:#8d3a4d; background:#2a171c; }.employee-directory-identity { display:flex; align-items:center; gap:11px; }.employee-directory-identity>b { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:#2a1109; background:linear-gradient(135deg,#e3b353,#9c5a20); }.employee-directory-identity strong,.employee-directory-identity small { display:block; }.employee-directory-identity strong { color:#fff; }.employee-directory-identity small,.employee-directory-contact small { margin-top:4px; color:#b6a3a7; font-size:12px; }.employee-directory-contact span { display:block; color:#dbced1; overflow-wrap:anywhere; }.employee-directory-permissions { display:flex; flex-wrap:wrap; gap:6px; }.employee-directory-row button { min-width:72px; margin:0; cursor:pointer; }
.employee-details-modal { position:fixed; inset:0; z-index:103; display:grid; place-items:center; padding:22px; }.employee-details-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.76); backdrop-filter:blur(7px); }.employee-details-card { position:relative; z-index:1; width:min(680px,100%); max-height:calc(100vh - 44px); overflow:auto; padding:28px; border:1px solid #703641; border-radius:20px; background:linear-gradient(145deg,#241416,#100e0f); box-shadow:0 28px 90px rgba(0,0,0,.7); }.employee-details-head { display:flex; align-items:center; gap:15px; padding:0 0 19px; border-bottom:1px solid #4a2930; }.employee-details-head h2 { margin:4px 0; color:#fff; }.employee-details-head p { margin:0; color:#c2aeb2; }.employee-details-avatar { display:grid; place-items:center; width:62px; height:62px; border-radius:18px; color:#2d1409; background:linear-gradient(135deg,#edc66c,#ab5d26); font-size:27px; font-weight:800; }.employee-details-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:20px 0; }.employee-details-grid article { padding:13px; border:1px solid #482a30; border-radius:12px; background:#1a1113; }.employee-details-grid span { display:block; color:#bba6aa; font-size:12px; }.employee-details-grid strong { display:block; margin-top:6px; color:#fff; font-size:14px; overflow-wrap:anywhere; }.employee-details-permissions { padding:16px; border:1px solid #482a30; border-radius:13px; background:#191113; }.employee-details-permissions h3 { margin:0 0 11px; color:#efc36b; font-size:16px; }.employee-details-permissions>div { display:flex; flex-wrap:wrap; gap:7px; }.employee-details-permissions p { margin:0; color:#c8b5b8; }
.employee-details-form { margin-top:20px; }.employee-edit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.employee-edit-grid .wide { grid-column:1 / -1; }.employee-edit-grid label { display:grid; gap:7px; color:#e3d5d7; font-size:13px; }.employee-edit-grid label small { color:#a9969a; font-size:11px; }.employee-permission-editor { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px !important; }.employee-permission-editor label { display:flex; align-items:center; gap:6px; min-height:34px; padding:6px 8px; border:1px solid #40252b; border-radius:8px; color:#cdbfc1; background:linear-gradient(145deg,#181113,#120e0f); font-size:11px; line-height:1.2; cursor:pointer; transition:.18s ease; }.employee-permission-editor label:hover { border-color:#934051; background:#251419; color:#fff; transform:translateY(-1px); }.employee-permission-editor label:has(input:checked) { border-color:#b83a52; background:linear-gradient(145deg,#481320,#281016); color:#fff; box-shadow:inset 0 0 0 1px rgba(227,72,99,.12); }.employee-permission-editor input { width:14px; height:14px; margin:0; accent-color:#d71336; }.employee-details-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:17px; }.employee-details-actions button { min-height:43px; margin:0; }
@media (max-width:600px) { .employee-details-card { padding:19px; }.employee-details-head { padding-left:34px; }.employee-details-grid,.employee-edit-grid { grid-template-columns:1fr; }.employee-permission-editor { grid-template-columns:repeat(2,minmax(0,1fr)); }.employee-details-actions { flex-direction:column-reverse; }.employee-details-actions button { width:100%; } }
.employee-card { min-width: 0; overflow: hidden; line-height: 1.65; }
.employee-create-launcher { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px; border:1px solid #5f303a; border-radius:16px; background:linear-gradient(135deg,#251416,#120f10); box-shadow:0 14px 34px rgba(0,0,0,.2); }.employee-create-launcher span,.employee-create-launcher strong,.employee-create-launcher small { display:block; }.employee-create-launcher span { color:#e7b85a; font-size:11px; }.employee-create-launcher strong { margin-top:4px; color:#fff; font-size:17px; }.employee-create-launcher small { margin-top:5px; color:#b9a4a8; font-size:12px; }.employee-create-launcher button { width:auto; min-height:42px; margin:0; padding:0 17px; white-space:nowrap; }
.employee-card strong, .employee-card span, .employee-card small { overflow-wrap:anywhere; word-break:normal; white-space:normal; }
.employee-card button { min-width: 72px; margin: 8px 0; }
.employee-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid #3b2028; }
.employee-card-header > div { min-width:0; }
.employee-contact { display:grid; gap:8px; padding:10px 0; color:#c9c0c3; font-size:14px; line-height:1.8; }
.employee-contact span { display:block; overflow-wrap:anywhere; }
.employee-permissions { display:flex; flex-wrap:wrap; gap:7px; padding-top:8px; }
.permission-pill { display:inline-flex; align-items:center; min-height:27px; padding:2px 9px; border-radius:999px; color:#ffd9de !important; background:#4a101c; font-size:12px; white-space:nowrap !important; }
@media (max-width:600px) { .employee-create-launcher { align-items:stretch; flex-direction:column; }.employee-create-launcher button { width:100%; } }

/* Settings control center */
.settings-workspace { max-width:1240px; margin:0 auto; }.settings-hero { display:flex; align-items:end; justify-content:space-between; gap:18px; padding:6px 0 22px; }.settings-hero .eyebrow { margin:0 0 5px; }.settings-hero h2 { margin:0; color:#fff; font-size:28px; }.settings-hero p:last-child { margin:7px 0 0; color:#b9a6aa; }.settings-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:16px; align-items:start; }.settings-nav { display:grid; gap:7px; position:sticky; top:18px; padding:9px; border:1px solid #452830; border-radius:16px; background:linear-gradient(145deg,#1d1315,#100e0f); }.settings-tab { display:grid; grid-template-columns:23px 1fr auto; align-items:center; gap:9px; min-height:44px; padding:8px 10px; text-align:right; color:#cbbbbe; border:1px solid transparent; border-radius:10px; background:transparent; font-size:13px; }.settings-tab svg,.settings-section-icon svg { width:19px; height:19px; }.settings-tab small { padding:2px 5px; border-radius:5px; color:#ddb661; background:#332611; font-size:9px; }.settings-tab:hover { background:#29171b; }.settings-tab.active { color:#fff; border-color:#7c3141; background:linear-gradient(135deg,#4a1420,#261216); }.settings-tab.active svg { color:#efc66a; }.settings-content { min-width:0; }.settings-panel,.settings-form { padding:23px; border:1px solid #4a2a31; border-radius:18px; background:linear-gradient(145deg,#1d1416,#100f10); box-shadow:0 16px 38px rgba(0,0,0,.16); }.settings-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid #41282e; }.settings-section-head>div:first-child { display:flex; gap:12px; }.settings-section-head h3 { margin:0; color:#fff; font-size:20px; }.settings-section-head p { margin:5px 0 0; max-width:620px; color:#b9a6aa; font-size:13px; line-height:1.6; }.settings-section-head button,.settings-actions button { width:auto; min-height:39px; margin:0; padding:0 13px; white-space:nowrap; }.settings-section-icon { display:grid; flex:none; place-items:center; width:38px; height:38px; border-radius:11px; color:#271409; background:linear-gradient(135deg,#f0c866,#ad6427); }.settings-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }.settings-form-grid .wide { grid-column:1/-1; }.settings-form-grid label { display:grid; gap:2px; }.settings-form-grid input,.settings-form-grid select,.settings-form-grid textarea { margin-top:4px; }.settings-form-grid small { color:#a9969a; font-size:10px; line-height:1.45; }.logo-setting { display:flex; align-items:center; gap:15px; margin-top:18px; padding:13px; border:1px dashed #5a343c; border-radius:13px; background:#171112; }.logo-setting-preview { display:grid; flex:none; place-items:center; width:70px; height:70px; overflow:hidden; border:1px solid #84404e; border-radius:15px; background:#090909; }.logo-setting-preview img { width:100%; height:100%; object-fit:cover; }.logo-setting strong,.logo-setting p { display:block; }.logo-setting strong { color:#fff; }.logo-setting p { margin:4px 0 9px; color:#ae9a9e; font-size:12px; }.file-picker { display:inline-flex; align-items:center; min-height:32px; padding:0 10px; border:1px solid #8a3647; border-radius:8px; color:#f4dce1; background:#36121b; font-size:12px; cursor:pointer; }.file-picker input { display:none; }.settings-switch { display:flex; align-items:center; gap:10px; margin:18px 0; padding:13px; border:1px solid #4a2a31; border-radius:13px; background:#171112; cursor:pointer; }.settings-switch>input { position:absolute; opacity:0; }.settings-switch>span { position:relative; width:38px; height:21px; flex:none; border-radius:999px; background:#503037; transition:.2s; }.settings-switch>span::after { content:""; position:absolute; top:3px; right:3px; width:15px; height:15px; border-radius:50%; background:#e8dde0; transition:.2s; }.settings-switch input:checked+span { background:#bd2640; }.settings-switch input:checked+span::after { transform:translateX(-17px); }.settings-switch strong,.settings-switch small { display:block; }.settings-switch strong { color:#fff; font-size:13px; }.settings-switch small { margin-top:3px; color:#af9b9f; font-size:11px; }.hours-editor,.holiday-editor { margin-top:16px; padding:15px; border:1px solid #482c32; border-radius:13px; background:#151011; }.hours-editor-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }.hours-editor-head h4 { margin:0; color:#edc76d; font-size:15px; }.hours-editor-head span { color:#aa969a; font-size:11px; }.hours-row { display:grid; grid-template-columns:90px 1fr 1fr 78px; align-items:end; gap:8px; padding:9px 0; border-top:1px solid #342127; }.hours-row:first-of-type { border-top:0; }.hours-row strong { padding-bottom:11px; color:#dfd0d2; font-size:13px; }.hours-row label { font-size:11px; }.hours-row input { min-height:34px; margin-top:3px; font-size:12px; }.hours-row .day-open { display:flex; align-items:center; gap:5px; min-height:34px; padding-bottom:0; white-space:nowrap; }.hours-row .day-open input { width:14px; min-height:14px; margin:0; accent-color:#cf1736; }.holiday-add { display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:8px; }.holiday-add input { min-height:38px; margin:0; }.holiday-add button { min-height:38px; margin:0; padding:0 12px; }.holiday-list { display:grid; gap:7px; margin-top:12px; }.holiday-list article { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; border:1px solid #3f272d; border-radius:9px; background:#1b1214; }.holiday-list strong,.holiday-list span { display:block; }.holiday-list strong { color:#f1e4e6; font-size:12px; }.holiday-list span { margin-top:3px; color:#ad989d; font-size:11px; }.settings-empty { padding:15px 0 0; margin:0; color:#ab989c; font-size:13px; }.settings-table-wrap { overflow:auto; border:1px solid #43282f; border-radius:12px; }.settings-table { width:100%; min-width:640px; border-collapse:collapse; }.settings-table th { padding:12px; text-align:right; color:#e8dce0; background:#35151c; font-size:12px; }.settings-table td { padding:12px; border-top:1px solid #39242a; color:#cbbdc0; font-size:12px; }.settings-table td strong,.settings-table td small { display:block; }.settings-table td strong { color:#fff; }.settings-table td small { margin-top:3px; color:#a99498; }.settings-role,.settings-status { display:inline-flex; align-items:center; min-height:24px; padding:2px 8px; border-radius:999px; font-size:11px; }.settings-role { color:#f2d58d; background:#3a2914; }.settings-status.success,.success { color:#a9e6bd; background:#123a25; }.warning { color:#f1c870; background:#3c2b12; }.pending { color:#e8d2a2; }.table-action { width:auto; min-height:30px; margin:0; padding:0 9px; color:#eedee1; border:1px solid #703342; background:#271316; font-size:11px; }.table-action:hover { background:#4a1825; }.danger-text { color:#ffb8c2; }.settings-security-note { margin-top:14px; padding:11px 13px; border-right:3px solid #d7a84e; border-radius:8px; color:#c7b7b9; background:#251e13; font-size:12px; line-height:1.65; }.database-status-grid,.backup-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }.database-status-grid article,.backup-overview article { padding:14px; border:1px solid #482a31; border-radius:12px; background:#171112; }.database-status-grid span,.backup-overview span { display:block; color:#ae999e; font-size:11px; }.database-status-grid strong,.backup-overview strong,.backup-overview a { display:block; margin-top:5px; color:#fff; font-size:15px; overflow-wrap:anywhere; }.backup-overview a { color:#efc66b; text-decoration:none; }.database-status-grid small,.backup-overview small { display:block; margin-top:5px; color:#a89398; font-size:10px; }.settings-actions { display:flex; gap:8px; flex-wrap:wrap; }.backup-history { display:grid; gap:7px; margin-top:14px; }.backup-history article { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:10px; border:1px solid #42282e; border-radius:10px; background:#171112; }.backup-history strong { color:#e8dce0; font-size:12px; }.backup-history small { color:#aa969a; font-size:11px; }.audit-tools { display:flex; gap:8px; margin:-2px 0 13px; }.audit-tools input,.audit-tools select { min-height:38px; margin:0; }.audit-tools input { flex:1; }.audit-tools select { width:145px; }.settings-pagination { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:13px; }.settings-pagination button { width:auto; min-height:32px; margin:0; padding:0 10px; font-size:11px; }.settings-pagination span { color:#ad989d; font-size:11px; }.settings-toast { max-width:310px; padding:10px 12px; border:1px solid #47795b; border-radius:9px; color:#c8f1d2; background:#173522; font-size:12px; line-height:1.5; opacity:0; transform:translateY(-6px); pointer-events:none; transition:.2s; }.settings-toast.show { opacity:1; transform:translateY(0); }.settings-toast.is-error { border-color:#8b3847; color:#ffd2d8; background:#40151d; }.about-system { display:grid; grid-template-columns:150px 1fr; gap:24px; align-items:start; }.about-logo { display:grid; place-items:center; width:150px; height:150px; overflow:hidden; border:1px solid #87404e; border-radius:22px; background:#120d0e; }.about-logo img { width:100%; height:100%; object-fit:cover; }.about-system h3 { margin:10px 0 3px; color:#fff; font-size:24px; }.about-system p { margin:6px 0; color:#c1afb3; line-height:1.7; }.about-system dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:18px 0; }.about-system dl div { padding:10px; border:1px solid #43282f; border-radius:10px; background:#171112; }.about-system dt { color:#a9969a; font-size:11px; }.about-system dd { margin:5px 0 0; color:#fff; font-size:13px; }.about-system>a { color:#efc66b; }
@media (max-width:900px) { .settings-layout { grid-template-columns:1fr; }.settings-nav { position:static; display:flex; overflow:auto; padding:7px; }.settings-tab { flex:0 0 auto; grid-template-columns:20px auto; }.settings-tab small { display:none; }.settings-form,.settings-panel { padding:18px; } }
@media (max-width:600px) { .settings-hero,.settings-section-head { align-items:stretch; flex-direction:column; }.settings-section-head button,.settings-actions button { width:100%; }.settings-form-grid,.database-status-grid,.backup-overview,.about-system,.about-system dl { grid-template-columns:1fr; }.logo-setting { align-items:flex-start; }.holiday-add { grid-template-columns:1fr; }.hours-editor-head { align-items:flex-start; flex-direction:column; }.hours-row { grid-template-columns:1fr 1fr; }.hours-row strong { grid-column:1/-1; padding-bottom:0; }.hours-row .day-open { grid-column:1/-1; }.audit-tools { flex-direction:column; }.audit-tools select { width:100%; }.settings-toast { max-width:none; }.about-logo { width:100px; height:100px; }.backup-history article { grid-template-columns:1fr; } }

/* Compact bookings directory: table on desktop, cards on tablet and mobile. */
.booking-row-actions { display:flex; align-items:center; justify-content:flex-start; gap:6px; white-space:nowrap; }.booking-row-actions button { min-height:32px; margin:0; padding:0 9px; font-size:11px; }.bookings-mobile-list { display:none; }.booking-mobile-card { padding:15px; border:1px solid #482830; border-radius:14px; background:linear-gradient(135deg,#241518,#151011); }.booking-mobile-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.booking-mobile-card-head strong,.booking-mobile-card-head span { display:block; }.booking-mobile-card-head strong { color:#fff; font-size:16px; }.booking-mobile-card-head div>span { margin-top:4px; color:#d9b567; font-size:12px; }.booking-mobile-card-time { display:flex; justify-content:space-between; gap:10px; margin:14px 0; padding:10px 0; border-top:1px solid #482830; border-bottom:1px solid #482830; color:#cbb8bc; font-size:12px; }.booking-mobile-card-time strong { color:#f2e5e7; }.booking-mobile-card button { width:100%; min-height:38px; margin:0; }.booking-created-at { margin:15px 0 0; color:#ad989c; font-size:12px; }

#bookings .table-wrap { max-height:min(62vh,680px); overflow:auto; scrollbar-color:#773040 #171112; scrollbar-width:thin; }#bookings .table { border-collapse:separate; border-spacing:0; }#bookings .table thead th { position:sticky; top:0; z-index:4; padding:15px 12px; border-bottom:1px solid #713140; box-shadow:0 5px 14px rgba(0,0,0,.3); }#bookings .table tbody td { padding:16px 12px; transition:background .16s ease,color .16s ease; }#bookings .table tbody tr { cursor:pointer; }#bookings .table tbody tr:hover td { background:#2d191d; }#bookings .table tbody tr.booking-current td { background:#31231a; }#bookings .table tbody tr.booking-current:hover td { background:#3a291e; }#bookings .table tbody tr td:first-child { border-right:4px solid #8f6b72; }#bookings .table tbody tr.booking-row-status-confirmed td:first-child { border-right-color:#2d985e; }#bookings .table tbody tr.booking-row-status-pending td:first-child { border-right-color:#d2a132; }#bookings .table tbody tr.booking-row-status-cancelled td:first-child { border-right-color:#bc4054; }#bookings .table tbody tr.booking-row-status-completed td:first-child { border-right-color:#3a84ba; }.booking-row-actions { gap:7px; }.booking-row-actions button { min-height:34px; padding:0 11px; border-radius:9px; font-weight:700; transition:transform .16s ease,border-color .16s ease,background .16s ease; }.booking-row-actions button:hover { transform:translateY(-1px); }.booking-row-actions [data-booking-action="details"] { color:#eadde0; border-color:#68404a; background:#291a1d; }.booking-row-actions [data-booking-action="edit"] { color:#fff; border-color:#b92743; background:#9f1831; }.booking-row-actions [data-booking-action="cancel"] { color:#ffbcc7; border-color:#8e3142; background:#35151b; }.booking-row-actions [data-booking-action="reactivate"] { color:#d8ffe5; border-color:#287e50; background:#185c3a; }
@media (max-width:900px) { #bookings .table-wrap { display:none; } #bookings .bookings-mobile-list { display:grid; gap:10px; margin-top:14px; } #bookings .timeline { overflow:visible; } }
body, button, input, select, textarea { font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
.inline-form { display:flex; flex-wrap:wrap; align-items:end; gap:14px; padding:16px; margin-bottom:18px; border:1px solid #43232c; border-radius:14px; background:linear-gradient(145deg,#1a1214,#120f10); }
.inline-form label { min-width:210px; flex:1; }
.inline-form label:first-child { flex:0 0 180px; min-width:180px; }
.inline-form button[type="submit"] { flex:0 0 100%; width:100%; margin-top:2px; }
#attendance .panel { max-width:1100px; margin-inline:auto; }
#attendance .table-wrap { border:1px solid #43232c; border-radius:14px; background:#100f10; }
#attendance .table { min-width:620px; }
#attendance th { color:#ffd8de; background:#3e101b; font-size:14px; }
#attendance td { height:58px; vertical-align:middle; }
#attendance td select, #attendance td input { margin-top:0; min-width:150px; }
#attendanceMessage { padding:8px 12px; border-radius:8px; background:#251015; }
#employeeForm { min-width: 0; }
#employeeForm .permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; padding:14px; border:1px solid #43232c; border-radius:12px; background:#171313; }
#employeeForm .permission-grid label { display:flex; align-items:center; gap:9px; min-width:0; color:#ddd; }
#employeeForm .permission-grid input[type="checkbox"] { width:20px; min-width:20px; height:20px; min-height:20px; margin:0; accent-color:var(--accent); }
@media (max-width:700px) { #employeeForm .permission-grid { grid-template-columns:1fr; } }

@media (max-width: 980px) {
  .login-shell,
  .app-shell,
  .workspace-grid {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .content-shell { padding: 18px; }

  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-grid,
  .report-grid,
  .employee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .login-shell,
  .content-shell,
  .sidebar {
    padding: 16px;
  }

  .brand-panel h1 {
    font-size: 38px;
  }

  .topbar,
  .user-box,
  .section-heading,
  .alert,
  .issue,
  .audit-row {
    align-items: stretch;
    flex-direction: column;
  }

  .metric-grid,
  .report-grid,
  .employee-grid,
  .form-grid,
  .nav-list {
    grid-template-columns: 1fr;
  }
}

/* Responsive layout correction: desktop canvas, tablet collapse, mobile drawer */
html, body { overflow-x: hidden; }
body { direction: rtl; }
.customers-page { max-width:1180px; margin:0 auto; }
.customers-hero { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:26px; border:1px solid #5a2631; border-radius:18px; background:radial-gradient(circle at 90% 0,rgba(200,16,46,.22),transparent 33%),linear-gradient(135deg,#241115,#120f10); }
.customers-hero h3 { margin:4px 0 8px; font-size:29px; color:#fff; }.customers-hero p { margin:0; color:#cdbdc0; }
.customer-search { min-width:300px; display:flex; gap:10px; align-items:center; padding:0 14px; background:#0e0d0e; border:1px solid #5a3740; border-radius:11px; color:#dd9ba8; }.customer-search input { margin:0; border:0; background:transparent; }.customer-search input:focus { box-shadow:none; }
.customer-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0; }.customer-stats article,.customer-stat-card { width:100%; margin:0; padding:17px 19px; border:1px solid #482830; border-radius:14px; background:#171112; color:#fff; font:inherit; text-align:right; appearance:none; }.customer-stat-card { cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }.customer-stat-card:hover { transform:translateY(-2px); border-color:#8e3e4e; background:#211417; }.customer-stat-card:focus-visible { outline:2px solid #dfb45b; outline-offset:3px; border-color:#dfb45b; }.customer-stat-card.is-active { border-color:#dfb45b; background:linear-gradient(145deg,#39201f,#211416); box-shadow:0 0 0 1px rgba(223,180,91,.18),0 10px 24px rgba(0,0,0,.24); }.customer-stats span { display:block; color:#c9b8bb; font-size:13px; }.customer-stats strong { display:block; margin-top:7px; color:#fff; font-size:24px; }.customer-stats small,.profile-stats small { font-size:12px; color:#d7aa63; }
.customer-directory { overflow:hidden; border:1px solid #482830; border-radius:15px; background:#151011; }.directory-head,.customer-row { display:grid; grid-template-columns:1.5fr 1fr .7fr 1fr 32px; gap:16px; align-items:center; }.directory-head { padding:14px 20px; color:#bba9ad; background:#211416; font-size:12px; }.customer-row { width:100%; padding:15px 20px; border:0; border-top:1px solid #372329; border-radius:0; text-align:right; color:#d9ced0; background:transparent; }.customer-row:hover { background:#2b161b; }.customer-identity { display:flex; align-items:center; gap:11px; }.customer-identity>b { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#2a1109; background:linear-gradient(135deg,#e4b354,#9b5920); }.customer-identity strong { color:#fff; }.customer-identity small { display:block; margin-top:4px; color:#a9959a; font-weight:400; font-size:11px; }.customer-arrow { color:#e2ad54; font-size:20px; }.customer-empty { padding:42px; text-align:center; color:#bba9ad; }
.customer-modal { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:22px; }.customer-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }.customer-modal-card { position:relative; z-index:1; width:min(760px,100%); max-height:calc(100vh - 44px); overflow:auto; padding:28px; border:1px solid #70404a; border-radius:20px; background:linear-gradient(145deg,#211315,#100e0f); box-shadow:0 24px 80px #000; }.modal-close { position:absolute; left:17px; top:15px; width:37px; height:37px; padding:0; border-radius:50%; font-size:26px; line-height:1; color:#eddde0; background:#432027; }.profile-header { display:flex; align-items:center; gap:16px; padding-bottom:22px; border-bottom:1px solid #482830; }.profile-header h2 { margin:4px 0; color:#fff; }.profile-header p { margin:0; color:#c6b4b7; }.profile-avatar { display:grid; place-items:center; width:68px; height:68px; border-radius:19px; color:#2d1409; background:linear-gradient(135deg,#f1c866,#a85b23); font-size:30px; font-weight:800; }.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }.profile-stats article { padding:13px; border-radius:11px; background:#2a181c; }.profile-stats span { display:block; color:#c9b8bb; font-size:12px; }.profile-stats strong { display:block; margin-top:6px; color:#fff; font-size:18px; }.profile-history .section-heading span { color:#b69da2; font-size:13px; }.profile-booking { display:flex; justify-content:space-between; gap:18px; padding:16px 0; border-top:1px solid #3d272d; }.profile-booking>div>strong,.profile-booking-amount strong { display:block; color:#fff; }.profile-booking span,.profile-booking small { display:block; margin-top:5px; color:#bca8ac; font-size:13px; }.profile-booking-amount { text-align:left; min-width:132px; }.profile-booking-amount .status-pill { display:inline-block; margin-top:7px; }.modal-open { overflow:hidden; }
.app-shell { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) 280px; direction: rtl; }
.sidebar { width: 280px; min-width: 280px; display: flex; flex-direction: column; min-height: 100vh; }
.sidebar .nav-list { flex: 1; }
.content-shell { min-width: 0; width: 100%; padding: clamp(18px, 2.5vw, 36px); }
.workspace-grid { grid-template-columns: minmax(360px, 0.8fr) minmax(0, 1.7fr); align-items: start; }
.form-grid { gap: 18px; }
.issue, .alert, .audit-row { min-width: 0; line-height: 1.65; }
.issue * { overflow-wrap: normal; word-break: normal; }
.issue strong, .issue span, .issue p { white-space: normal; }
.issue-list { gap: 14px; }
#menuBtn, #menuClose, #sidebarOverlay { display: none; }

@media (max-width: 1100px) and (min-width: 701px) {
  .app-shell { grid-template-columns: minmax(0, 1fr) 250px; }
  .sidebar { width: 250px; min-width: 250px; }
  .workspace-grid { grid-template-columns: minmax(300px, .9fr) minmax(0, 1.2fr); }
  .content-shell { padding: 20px; }
}

@media (max-width: 700px) {
  .app-shell { display: block; min-height: 100vh; }
  .sidebar { position: fixed; z-index: 30; top: 0; right: 0; width: min(290px, 86vw); min-width: 0; height: 100vh; min-height: 100vh; transform: translateX(105%); transition: transform .22s ease; box-shadow: -18px 0 40px rgba(0,0,0,.55); }
  .sidebar.open { transform: translateX(0); }
  #sidebarOverlay { position: fixed; inset: 0; z-index: 20; display: block; visibility: hidden; opacity: 0; background: rgba(0,0,0,.65); transition: opacity .22s ease, visibility .22s ease; }
  #sidebarOverlay.show { visibility: visible; opacity: 1; }
  #menuBtn, #menuClose { display: inline-flex; align-items: center; justify-content: center; }
  #menuClose { align-self: flex-start; margin-bottom: 16px; }
  .content-shell { padding: 14px; }
  .topbar { gap: 10px; }
  .topbar h2 { font-size: 23px; }
  .workspace-grid, .form-grid { grid-template-columns: 1fr; }
  .workspace-grid .panel { width: 100%; }
  .wide { grid-column: auto; }
  .metric-grid, .employee-grid { grid-template-columns: 1fr; }
  .customers-hero { align-items:stretch; flex-direction:column; }.customer-search { min-width:0; }.customer-stats,.profile-stats { grid-template-columns:1fr; }.directory-head { display:none; }.customer-row { grid-template-columns:1fr auto; gap:10px; }.customer-row>span:nth-child(2),.customer-row>span:nth-child(4) { display:none; }.customer-arrow { grid-column:2; grid-row:1; }.customer-modal-card { padding:20px; }.profile-booking { flex-direction:column; }.profile-booking-amount { text-align:right; }
  .panel { padding: 14px; }
  .table-wrap { max-width: 100%; }
  .issue { align-items: stretch; }
  .issue-actions { justify-content:space-between; }
  .overtime-summary { grid-template-columns:1fr; }.overtime-requests-panel #overtimeList .issue { grid-template-columns:minmax(0,1fr) auto auto; align-items:center; padding:13px; gap:8px; }.overtime-requests-panel #overtimeList .issue>div:first-child { grid-column:1 / -1; }.overtime-requests-panel #overtimeList .issue button { width:auto; min-width:62px; padding:8px; }
}

/* Collapsible right navigation on all screen sizes */
.app-shell { display: block; min-height: 100vh; }
.content-shell { width: 100%; max-width: 1500px; margin: 0 auto; padding: clamp(20px, 3vw, 42px); }
.sidebar { position: fixed; z-index: 30; top: 0; right: 0; width: 280px; min-width: 280px; height: 100vh; min-height: 100vh; transform: translateX(105%); transition: transform .24s ease; box-shadow: -18px 0 40px rgba(0,0,0,.58); }
.sidebar.open { transform: translateX(0); }
#menuBtn { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; font-size: 22px; }
#menuClose { display: inline-flex; align-items: center; justify-content: center; }
#sidebarOverlay { position: fixed; inset: 0; z-index: 20; display: block; visibility: hidden; opacity: 0; background: rgba(0,0,0,.68); transition: opacity .24s ease, visibility .24s ease; }
#sidebarOverlay.show { visibility: visible; opacity: 1; }
.topbar { justify-content: flex-start; }
.topbar > div:nth-child(2) { flex: 1; text-align: center; }
.user-box { margin-inline-start: auto; }

@media (max-width: 700px) {
  .sidebar { width: min(290px, 86vw); min-width: 0; }
  .content-shell { padding: 14px; }
  .topbar > div:nth-child(2) { text-align: right; }
  .user-box { display: none; }
}

/* Keep these rules last so page-specific modal styles cannot weaken the overlay. */
.customer-modal,
.booking-agreement-modal,
.booking-details-modal,
.employee-details-modal,
.issue-details-modal,
.report-details-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  place-items: center !important;
}

.customer-modal-card,
.agreement-card,
.booking-details-card,
.employee-details-card,
.issue-modal-card,
.report-details-card {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Attendance and departure workspace */
.attendance-page { max-width:1440px; margin:0 auto; }
.attendance-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:24px 26px; border:1px solid #5b2b35; border-radius:19px; background:radial-gradient(circle at 90% 0,rgba(200,16,46,.2),transparent 38%),linear-gradient(135deg,#211215,#100f10); box-shadow:0 16px 36px rgba(0,0,0,.2); }
.attendance-hero .eyebrow { margin:0 0 6px; font-size:12px; }
.attendance-hero h3 { margin:0; color:#fff; font-size:30px; }
.attendance-hero p:last-child { margin:8px 0 0; color:#c6b5b9; line-height:1.7; }
.attendance-date-control { width:210px; flex:0 0 auto; }
.attendance-date-control span,.attendance-toolbar label>span { display:block; margin-bottom:7px; color:#cbb9bd; font-size:12px; }
.attendance-date-control input,.attendance-toolbar input,.attendance-toolbar select { margin:0; }
.attendance-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; margin:15px 0; }
.attendance-stat { position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"icon title" "icon value"; align-items:center; gap:3px 10px; width:100%; min-height:86px; padding:14px; border:1px solid #492930; border-radius:14px; color:#fff; background:linear-gradient(145deg,#1c1315,#111011); text-align:right; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.attendance-stat:hover { transform:translateY(-2px); border-color:#84404e; background:linear-gradient(145deg,#28171b,#151113); }
.attendance-stat:focus-visible { outline:3px solid rgba(229,178,75,.48); outline-offset:3px; border-color:#d4a84f; }
.attendance-stat.is-active { border-color:#cf9e43; background:linear-gradient(145deg,#3a2220,#211315); box-shadow:0 0 0 1px rgba(207,158,67,.2),0 10px 28px rgba(0,0,0,.28); }
.attendance-stat i { grid-area:icon; width:35px; height:35px; border:1px solid #663640; border-radius:11px; background:#25161a; }
.attendance-stat i::after { content:""; display:block; width:9px; height:9px; margin:12px; border-radius:50%; background:#9e7c82; box-shadow:0 0 12px currentColor; }
.attendance-stat.stat-present i::after { background:#4fc38b; }.attendance-stat.stat-absent i::after { background:#e65b6b; }.attendance-stat.stat-late i::after { background:#e9a448; }.attendance-stat.stat-leave i::after { background:#5d9ee7; }.attendance-stat.stat-overtime i::after { background:#dab05a; }
.attendance-stat.stat-present { border-color:#397a5c; background:linear-gradient(145deg,#183025,#111713); box-shadow:0 0 0 1px rgba(79,195,139,.12),0 8px 24px rgba(20,91,61,.18); }
.attendance-stat.stat-present strong { color:#b8f2d2; font-size:29px; }
.attendance-stat.stat-present:hover { border-color:#55aa7e; box-shadow:0 0 0 1px rgba(79,195,139,.2),0 12px 28px rgba(20,91,61,.25); }
.attendance-stat span { grid-area:title; color:#bba9ad; font-size:11px; }
.attendance-stat strong { grid-area:value; color:#fff; font-size:25px; line-height:1.1; }
.attendance-workspace { padding:19px; border-color:#4c2b32; background:linear-gradient(145deg,#191214,#0f0e0f); }
.attendance-toolbar { display:grid; grid-template-columns:minmax(220px,1.4fr) minmax(150px,.8fr) minmax(170px,.9fr) auto; gap:11px; align-items:end; padding:13px; border:1px solid #42262c; border-radius:13px; background:#151112; }
.attendance-toolbar button { margin:0; padding-inline:18px; }
.attendance-quick-actions { display:flex; justify-content:flex-end; gap:10px; margin:15px 0 10px; }
.attendance-quick-actions button { margin:0; min-width:145px; }
.attendance-quick-actions #saveAttendance { min-width:170px; }
.attendance-employees-section .attendance-quick-actions #saveAttendance { border-color:#e42d49; background:linear-gradient(135deg,#d41031,#9f0d25); box-shadow:0 8px 20px rgba(200,16,46,.2); font-weight:800; }
.attendance-employees-section .attendance-quick-actions #markAllPresent { color:#d9c7ca; border-color:#60333c; background:#211518; }
.attendance-loading,.attendance-empty { padding:28px; text-align:center; color:#c6b2b6; }
.attendance-workspace form.is-loading .attendance-table-wrap,
.attendance-workspace form.is-loading .attendance-cards,
.attendance-workspace form.is-loading .attendance-quick-actions { opacity:.45; pointer-events:none; user-select:none; }
.attendance-workspace button:disabled { opacity:.5; cursor:not-allowed; }
.attendance-table-wrap { margin-top:8px; border:1px solid #43272d; border-radius:14px; background:#100f10; }
.attendance-table { min-width:880px; table-layout:fixed; }
.attendance-table th:nth-child(1) { width:18%; }.attendance-table th:nth-child(2) { width:14%; }.attendance-table th:nth-child(3) { width:16%; }.attendance-table th:nth-child(4) { width:13%; }.attendance-table th:nth-child(5) { width:27%; }.attendance-table th:nth-child(6) { width:12%; }
.attendance-table th { position:sticky; top:0; z-index:2; padding:13px 10px; color:#ead8dc; background:#35151c; font-size:12px; white-space:nowrap; }
.attendance-table td { padding:11px 8px; border-color:#38242a; vertical-align:top; }
.attendance-table tbody tr:hover td { background:#241519; }
.attendance-table input,.attendance-table select,.attendance-table textarea { margin:0; min-height:38px; padding-inline:8px; font-size:12px; }
.attendance-table textarea { width:100%; min-height:64px; resize:vertical; }
.attendance-person { display:flex; align-items:center; gap:9px; min-width:135px; }
.attendance-person>b { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border-radius:11px; color:#2a120b; background:linear-gradient(135deg,#e2b85c,#985021); font-size:15px; }
.attendance-person strong { color:#fff; font-size:13px; }
.attendance-job-badge,.attendance-status-badge { display:inline-flex; align-items:center; min-height:27px; padding:4px 9px; border:1px solid #60404a; border-radius:999px; color:#dfcdd1; background:#24191c; font-size:11px; white-space:nowrap; }
.attendance-status-select { min-width:112px; border-right-width:4px; }
.attendance-status-select.status-present,.attendance-status-badge.status-present { border-color:#287a58; color:#9be1bd; background:#102c21; }
.attendance-status-select.status-late,.attendance-status-badge.status-late { border-color:#a96b28; color:#f0bd76; background:#342312; }
.attendance-status-select.status-absent,.attendance-status-badge.status-absent { border-color:#9d3442; color:#f3a4ad; background:#34151b; }
.attendance-status-select.status-leave,.attendance-status-badge.status-leave { border-color:#356a9e; color:#a8cff4; background:#14263a; }
.attendance-status-select.status-rest,.attendance-status-badge.status-rest { border-color:#5e6068; color:#c1c3ca; background:#202126; }
.attendance-approved-overtime { display:inline-flex; align-items:center; justify-content:center; min-height:31px; padding:5px 10px; border:1px solid #54464a; border-radius:999px; background:#211a1c; font-size:11px; font-weight:700; white-space:normal; text-align:center; }
.attendance-approved-overtime.has-overtime { border-color:#8f7131; color:#f1d17d; background:#302712; }
.attendance-approved-overtime.no-overtime { color:#97898d; }
.attendance-approved-overtime-field { display:grid; gap:6px; }
.attendance-approved-overtime-field>span:first-child { color:#cdb9bd; font-size:11px; }
.attendance-notes-field { display:block; width:100%; }
.attendance-notes-field>span { display:block; margin-bottom:6px; color:#d5c3c7; font-size:11px; }
.attendance-note-hint { display:block; width:auto; margin-top:5px; color:#e3a55d; font-size:10px; line-height:1.45; }
.attendance-not-applicable { display:block; color:#71666a; text-align:center; }
.attendance-updated { display:block; min-width:112px; color:#baa7ab; font-size:11px; line-height:1.55; }
.attendance-summary { display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:13px; padding:13px 15px; border:1px solid #42262c; border-radius:12px; color:#bdadb0; background:#151112; font-size:12px; }
.attendance-summary b { color:#fff; }
.attendance-cards { display:none; }

.attendance-hub-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.attendance-hub-card { position:relative; display:grid; grid-template-columns:48px 1fr; gap:12px; width:100%; min-width:0; min-height:235px; margin:0; padding:18px; overflow:hidden; border:1px solid #4c2b33; border-radius:18px; color:#f5ebed; background:radial-gradient(circle at 90% 0,rgba(200,16,46,.13),transparent 40%),linear-gradient(145deg,#211518,#120f10); text-align:right; cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.attendance-hub-card:hover { transform:translateY(-2px); border-color:#8d3a49; box-shadow:0 14px 30px rgba(0,0,0,.24); }
.attendance-hub-card:focus-visible { outline:2px solid #e2b85c; outline-offset:3px; }
.attendance-hub-card.is-active { border-color:#c7983e; background:radial-gradient(circle at 90% 0,rgba(226,184,92,.16),transparent 42%),linear-gradient(145deg,#281b18,#141010); box-shadow:0 0 0 1px rgba(226,184,92,.2),0 15px 34px rgba(0,0,0,.28); }
.attendance-hub-card-icon { display:grid; place-items:center; width:48px; height:48px; border:1px solid #75404a; border-radius:14px; color:#e2b85c; background:#2b171c; }
.attendance-hub-card-icon svg { width:25px; height:25px; }
.attendance-hub-card>strong { align-self:center; min-width:0; font-size:18px; }
.attendance-hub-card dl { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.attendance-hub-card dl div { min-width:0; padding:9px 10px; border:1px solid #3e292e; border-radius:11px; background:rgba(10,8,9,.4); }
.attendance-hub-card dt { overflow:hidden; color:#bca9ad; font-size:10px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.attendance-hub-card dd { margin:4px 0 0; color:#fff; font-size:15px; font-weight:800; line-height:1.4; overflow-wrap:anywhere; }
.attendance-hub-card-action { grid-column:1/-1; align-self:end; display:flex; align-items:center; justify-content:center; min-height:36px; padding:7px 12px; border-radius:10px; color:#f6d992; background:#382b19; font-size:12px; font-weight:700; }
.attendance-hub-stage { min-width:0; }
.attendance-hub-stage.has-open-section { margin-top:4px; }
.attendance-hub-section { min-width:0; animation:attendanceHubReveal .2s ease both; }
.attendance-hub-section-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:12px; padding:17px 19px; border:1px solid #4c2c33; border-radius:16px; background:linear-gradient(135deg,#201416,#120f10); }
.attendance-hub-section-head h2 { margin:3px 0 4px; color:#fff; font-size:22px; }
.attendance-hub-section-head p:last-child { margin:0; color:#baa8ac; font-size:12px; }
.attendance-hub-section-head button { flex:0 0 auto; width:auto; min-width:95px; margin:0; }
.attendance-hub-section-head .attendance-hub-back { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:auto; min-width:178px; min-height:38px; padding:0 12px; color:#d7c5c9; border-color:#60404a; background:#21171a; box-shadow:none; font-size:11px; font-weight:700; }
.attendance-hub-section-head .attendance-hub-back:hover { color:#fff; border-color:#8a5360; background:#2d1d21; }
.attendance-hub-section-head .attendance-hub-back svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.attendance-employees-section>.attendance-hub-section-head { display:grid; grid-template-columns:minmax(0,1fr) 210px auto; align-items:center; gap:14px; margin-bottom:10px; padding:11px 14px; }
.attendance-employees-section>.attendance-hub-section-head h2 { margin-top:0; font-size:20px; }
.attendance-employees-section>.attendance-hub-section-head .eyebrow { display:none; }
.attendance-employees-section>.attendance-hub-section-head p:last-child { margin-top:3px; line-height:1.45; }
.attendance-employees-section>.attendance-hub-section-head .attendance-date-control { width:210px; }
.attendance-employees-section>.attendance-hub-section-head .attendance-date-control span { margin-bottom:4px; font-size:10px; }
.attendance-employees-section>.attendance-hub-section-head .attendance-date-control input { min-height:36px; }
.attendance-employees-section>.attendance-workspace { padding:12px; }
.attendance-employees-section .attendance-toolbar { padding:11px; }
.attendance-employees-section .attendance-table-wrap { width:100%; margin-inline:0; }
.attendance-workers-section>.attendance-hub-section-head { display:grid; grid-template-columns:minmax(0,1fr) 210px auto; align-items:center; gap:14px; margin-bottom:10px; padding:11px 14px; }
.attendance-workers-section>.attendance-hub-section-head h2 { margin-top:0; font-size:20px; }
.attendance-workers-section>.attendance-hub-section-head .eyebrow { display:none; }
.attendance-workers-section>.attendance-hub-section-head p:last-child { margin-top:3px; line-height:1.45; }
.attendance-workers-section>.attendance-hub-section-head .attendance-date-control { width:210px; }
.attendance-workers-section>.attendance-hub-section-head .attendance-date-control span { margin-bottom:4px; font-size:10px; }
.attendance-workers-section>.attendance-hub-section-head .attendance-date-control input { min-height:36px; }
.attendance-workers-section>#workerPreparationPanel { padding:12px; }
.worker-preparation-stats { grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:0; }
.worker-preparation-stat { cursor:default; }
.worker-preparation-stat:hover { transform:none; }
.worker-preparation-toolbar { grid-template-columns:minmax(240px,1.5fr) minmax(180px,.8fr) auto; padding:11px; }
.worker-preparation-actions { justify-content:flex-end; margin:15px 0 10px; }
.worker-preparation-actions button { min-width:145px; }
.worker-preparation-actions button[type="submit"] { min-width:180px; border-color:#e42d49; background:linear-gradient(135deg,#d41031,#9f0d25); box-shadow:0 8px 20px rgba(200,16,46,.2); font-weight:800; }
.attendance-workers-section .worker-preparation-table { width:100%; margin-inline:0; }
.attendance-hub-section>.attendance-hero,.attendance-hub-section>#attendanceStats,.attendance-hub-section>.attendance-workspace,.attendance-hub-section>#overtimeRequestsPanel,.attendance-hub-section>#workerPreparationPanel { margin-top:0; }
.attendance-aligned-panel { max-width:none; }
.attendance-aligned-heading { align-items:flex-end; padding:0 0 15px; border-bottom:1px solid #42272d; }
.attendance-aligned-table { overflow:visible; border:1px solid #43272d; border-radius:14px; background:#100f10; }
.attendance-aligned-table table { width:100%; min-width:0; table-layout:fixed; }
.attendance-aligned-table th { position:sticky; top:0; z-index:2; padding:13px 10px; color:#ead8dc; background:#35151c; font-size:12px; white-space:nowrap; }
.attendance-aligned-table td { height:62px; padding:11px 10px; border-color:#38242a; vertical-align:middle; }
.attendance-aligned-table tbody tr:hover td { background:#241519; }
.attendance-aligned-table select,.attendance-aligned-table input { width:100%; min-width:0; min-height:38px; margin:0; padding-inline:8px; font-size:12px; }
.worker-preparation-actions { flex-wrap:wrap; }
.worker-preparation-actions .form-message { flex:1 1 260px; }
.worker-preparation-toast { position:absolute; top:12px; left:12px; z-index:4; }
.worker-preparation-panel { position:relative; }
@keyframes attendanceHubReveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

@media (max-width:1150px) {
  .attendance-hub-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .attendance-stats { grid-template-columns:repeat(3,1fr); }
  .attendance-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .worker-preparation-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .worker-preparation-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .worker-preparation-toolbar button { grid-column:1/-1; }
}

@media (max-width:1100px) {
  .attendance-table-wrap { display:none; }
  .attendance-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
  .attendance-employee-card { display:grid; gap:12px; padding:15px; border:1px solid #452930; border-radius:15px; background:linear-gradient(145deg,#201417,#121011); }
  .attendance-employee-card header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:11px; border-bottom:1px solid #3e252b; }
  .attendance-employee-card .attendance-person span { display:block; margin-top:3px; color:#b8a5a9; font-size:11px; }
  .attendance-employee-card label { display:block; }
  .attendance-employee-card input,.attendance-employee-card select,.attendance-employee-card textarea { margin-top:6px; }
  .attendance-employee-card textarea { min-height:70px; }
  .attendance-employee-card footer { padding-top:9px; border-top:1px solid #3e252b; color:#aa979b; font-size:11px; }
  .worker-preparation-table { overflow:visible; border:0; background:transparent; }
  .worker-preparation-table table,.worker-preparation-table tbody { display:block; width:100%; }
  .worker-preparation-table thead { display:none; }
  .worker-preparation-table tbody { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .worker-preparation-table tr { display:grid; gap:11px; min-width:0; padding:15px; border:1px solid #452930; border-radius:15px; background:linear-gradient(145deg,#201417,#121011); }
  .worker-preparation-table td { display:grid; grid-template-columns:minmax(100px,.8fr) minmax(0,1.2fr); align-items:center; gap:10px; width:100%; height:auto; padding:0; border:0; background:transparent !important; }
  .worker-preparation-table td[data-label]::before { content:attr(data-label); color:#bba7ab; font-size:11px; }
  .worker-preparation-table td:first-child { padding-bottom:10px; border-bottom:1px solid #3e252b; }
  .worker-preparation-table td:first-child strong { color:#fff; font-size:14px; }
}

@media (max-width:650px) {
  .attendance-hub-cards { grid-template-columns:1fr; }
  .attendance-hub-card { min-height:220px; }
  .attendance-hub-section-head { align-items:stretch; flex-direction:column; }
  .attendance-hub-section-head button { width:100%; }
  .attendance-employees-section>.attendance-hub-section-head { display:grid; grid-template-columns:1fr; padding:12px; }
  .attendance-employees-section>.attendance-hub-section-head .attendance-date-control { width:100%; }
  .attendance-employees-section>.attendance-workspace { padding:9px; }
  .attendance-workers-section>.attendance-hub-section-head { display:grid; grid-template-columns:1fr; padding:12px; }
  .attendance-workers-section>.attendance-hub-section-head .attendance-date-control { width:100%; }
  .attendance-workers-section>#workerPreparationPanel { padding:9px; }
  .attendance-hero { align-items:stretch; flex-direction:column; padding:19px; }
  .attendance-hero h3 { font-size:25px; }
  .attendance-date-control { width:100%; }
  .attendance-stats { grid-template-columns:repeat(2,1fr); }
  .attendance-stat { min-height:76px; padding:11px; }.attendance-stat strong { font-size:22px; }
  .attendance-toolbar { grid-template-columns:1fr; }
  .worker-preparation-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .worker-preparation-toolbar { grid-template-columns:1fr; }
  .worker-preparation-toolbar button { grid-column:auto; }
  .attendance-quick-actions { position:sticky; bottom:8px; z-index:5; display:grid; grid-template-columns:1fr 1fr; padding:9px; border:1px solid #542d36; border-radius:13px; background:rgba(18,15,16,.96); box-shadow:0 12px 35px #000; backdrop-filter:blur(8px); }
  .attendance-quick-actions button { min-width:0; width:100%; padding-inline:8px; font-size:12px; }
  .attendance-quick-actions #saveAttendance { grid-column:1/-1; min-width:0; }
  .attendance-cards { grid-template-columns:1fr; }
  .worker-preparation-table tbody { grid-template-columns:1fr; }
  .attendance-summary { display:grid; gap:8px; }
}

/* Employee monitoring workspace — read-only operational view. */
.employees-workspace { max-width:1280px; margin:0 auto; }
.employees-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:24px 26px; border:1px solid #5b2b35; border-radius:18px; background:radial-gradient(circle at 88% 0,rgba(200,16,46,.2),transparent 34%),linear-gradient(135deg,#241417,#120f10); }
.employees-hero h2 { margin:4px 0 7px; color:#fff; font-size:29px; }
.employees-hero p:last-child { margin:0; color:#c4b2b6; }
.employees-hero button { width:auto; min-height:43px; margin:0; padding:0 18px; white-space:nowrap; }
.employee-directory-message { min-height:20px; padding:6px 2px 0; color:#ffb8c4; font-size:12px; }
.employee-activity-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:14px 0; }
.employee-stat-card { display:grid; grid-template-columns:auto 1fr; grid-template-areas:"icon label" "icon value"; align-items:center; gap:2px 10px; width:100%; min-height:82px; margin:0; padding:13px; border:1px solid #482b31; border-radius:13px; background:linear-gradient(145deg,#241619,#171112); color:#fff; font:inherit; text-align:right; appearance:none; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.employee-stat-card:hover { transform:translateY(-2px); border-color:#8e3e4e; background:linear-gradient(145deg,#2b191d,#1b1214); }
.employee-stat-card:focus-visible { outline:2px solid #dfb45b; outline-offset:3px; border-color:#dfb45b; }
.employee-stat-card.is-active { border-color:#dfb45b; background:linear-gradient(145deg,#39201f,#211416); box-shadow:0 0 0 1px rgba(223,180,91,.18),0 10px 24px rgba(0,0,0,.24); }
.employee-stat-card span { grid-area:label; color:#b9a6aa; font-size:10px; font-weight:700; }
.employee-stat-card strong { grid-area:value; color:#fff; font-size:27px; line-height:1; }
.employee-stat-icon { grid-area:icon; position:relative; display:grid; place-items:center; width:36px; height:36px; border:1px solid #6b3540; border-radius:10px; background:#151011; }
.employee-stat-icon::before { content:""; width:14px; height:14px; border:2px solid #dfb45b; border-radius:50%; }
.employee-stat-active::after { content:""; position:absolute; right:5px; bottom:5px; width:7px; height:7px; border:2px solid #151011; border-radius:50%; background:#42b777; }
.employee-stat-suspended::after { content:""; position:absolute; width:17px; height:2px; background:#d64a5f; transform:rotate(-45deg); }
.employee-stat-booking::before,.employee-stat-issue::before { border-radius:4px; }
.employee-directory-panel { margin:0; }
.employee-directory-filters { display:grid; grid-template-columns:minmax(220px,1.5fr) minmax(140px,.7fr) minmax(140px,.7fr) auto; align-items:end; gap:10px; margin:14px 0 18px; padding:13px; border:1px solid #452a30; border-radius:13px; background:#171112; }
.employee-directory-filters label { display:grid; gap:5px; color:#b9a6aa; font-size:11px; }
.employee-directory-filters input,.employee-directory-filters select,.employee-directory-filters button { width:100%; min-height:43px; margin:0; }
.employee-directory-filters button { padding:0 15px; white-space:nowrap; }
.employee-monitoring-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.employee-monitor-card { min-width:0; padding:17px; border:1px solid #482b32; border-radius:15px; background:linear-gradient(145deg,#211416,#131011); transition:transform .18s ease,border-color .18s ease; }
.employee-monitor-card:hover { transform:translateY(-2px); border-color:#844050; }
.employee-monitor-card>header { display:flex; align-items:flex-start; justify-content:space-between; gap:13px; }
.employee-monitor-identity { display:flex; min-width:0; align-items:center; gap:11px; }
.employee-monitor-identity>b { display:grid; flex:none; place-items:center; width:46px; height:46px; border-radius:14px; color:#2c1609; background:linear-gradient(135deg,#e7bd62,#a35c24); font-size:20px; }
.employee-monitor-identity strong,.employee-monitor-identity span,.employee-monitor-identity small { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.employee-monitor-identity strong { color:#fff; font-size:15px; }
.employee-monitor-identity span { max-width:260px; margin-top:3px; color:#c5b4b7; font-size:11px; }
.employee-monitor-identity small { margin-top:3px; color:#968388; font-size:10px; }
.employee-monitor-badges { display:flex; justify-content:flex-end; gap:5px; flex-wrap:wrap; }
.employee-role-badge,.employee-account-badge { display:inline-flex; align-items:center; min-height:24px; padding:1px 8px; border:1px solid transparent; border-radius:999px; font-size:10px; font-weight:800; white-space:nowrap; }
.employee-role-badge.role-owner { color:#ffe7aa; border-color:#8b6930; background:#493719; }
.employee-role-badge.role-manager { color:#dcecff; border-color:#37658c; background:#1d3c58; }
.employee-role-badge.role-employee { color:#e9dce0; border-color:#60404a; background:#332229; }
.employee-account-badge.status-active { color:#d5ffe2; border-color:#2c7550; background:#173d2a; }
.employee-account-badge.status-suspended { color:#ffd6dc; border-color:#9b3448; background:#5a1c29; }
.employee-monitor-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:14px; padding:11px; border:1px solid #3b262b; border-radius:11px; background:#171112; }
.employee-monitor-meta span,.employee-monitor-meta b { display:block; }
.employee-monitor-meta span { color:#ddd0d3; font-size:10px; }
.employee-monitor-meta b { margin-bottom:4px; color:#9e8b90; font-size:9px; font-weight:600; }
.employee-monitor-activity { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-top:10px; }
.employee-monitor-activity article { padding:9px; border-radius:9px; background:#29181c; }
.employee-monitor-activity span,.employee-monitor-activity strong { display:block; }
.employee-monitor-activity span { color:#a99599; font-size:9px; }
.employee-monitor-activity strong { margin-top:4px; color:#fff; font-size:17px; }
.employee-last-action { min-height:34px; margin:11px 0 0; padding:8px 10px; overflow:hidden; color:#baa7ab; border-right:2px solid #b3873f; border-radius:7px; background:#211a12; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.employee-last-action b { color:#e9c36d; }
.employee-monitor-card>footer { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.employee-monitor-card>footer button { width:auto; min-height:36px; margin:0; padding:0 12px; font-size:11px; }
.employee-directory-empty { grid-column:1/-1; margin:0; padding:34px; text-align:center; color:#b6a3a7; border:1px dashed #55313a; border-radius:13px; background:#171112; }
.employee-profile-head { display:flex; align-items:center; gap:14px; padding:0 0 18px; border-bottom:1px solid #482a30; }
.employee-profile-head>div:nth-child(2) { min-width:0; flex:1; }
.employee-profile-head h2 { margin:4px 0; color:#fff; }
.employee-profile-head p:last-child { margin:0; color:#bba7ab; overflow-wrap:anywhere; }
.employee-profile-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.employee-profile-sections>section { padding:16px; border:1px solid #482a30; border-radius:13px; background:#191113; }
.employee-profile-sections>section.wide { grid-column:1/-1; }
.employee-profile-sections h3 { margin:0 0 12px; color:#edc469; font-size:14px; }
.employee-profile-data { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.employee-profile-data>div { padding:9px; border-radius:8px; background:#28171a; }
.employee-profile-data dt { color:#a79296; font-size:9px; }
.employee-profile-data dd { margin:4px 0 0; color:#f1e5e7; font-size:11px; font-weight:700; overflow-wrap:anywhere; }
.employee-profile-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.employee-profile-metrics article { padding:11px; border-radius:9px; background:#28171a; }
.employee-profile-metrics span,.employee-profile-metrics strong { display:block; }
.employee-profile-metrics span { color:#a79296; font-size:9px; }
.employee-profile-metrics strong { margin-top:5px; color:#fff; font-size:20px; }
.employee-profile-latest,.employee-profile-empty { margin:10px 0 0; padding:10px; color:#bba7ab; border-radius:8px; background:#211518; font-size:11px; line-height:1.65; }
.employee-profile-audit { display:grid; gap:7px; }
.employee-profile-audit article { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:10px; border:1px solid #3d272c; border-radius:9px; background:#241519; }
.employee-profile-audit strong,.employee-profile-audit span { display:block; }
.employee-profile-audit strong { color:#eee1e4; font-size:11px; }
.employee-profile-audit span,.employee-profile-audit time { margin-top:3px; color:#9f8b90; font-size:9px; }

@media (max-width:1100px) {
  .employee-activity-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .employee-monitoring-list { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .employees-hero { align-items:stretch; flex-direction:column; }
  .employees-hero button { width:100%; }
  .employee-directory-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .employee-profile-sections { grid-template-columns:1fr; }
  .employee-profile-sections>section.wide { grid-column:auto; }
}
@media (max-width:560px) {
  .employee-activity-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .employee-directory-filters { grid-template-columns:1fr; }
  .employee-monitor-card>header { flex-direction:column; }
  .employee-monitor-meta { grid-template-columns:1fr; }
  .employee-monitor-activity { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .employee-monitor-card>footer { flex-direction:column; }
  .employee-monitor-card>footer button { width:100%; }
  .employee-profile-data { grid-template-columns:1fr; }
  .employee-profile-audit article { align-items:flex-start; flex-direction:column; }
}

/* Supabase-backed customer directory. */
.customer-stats-expanded { grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.customer-stats-expanded article,.customer-stats-expanded .customer-stat-card { min-width:0; padding:14px; }
.customer-stats-expanded span { font-size:10px; }
.customer-stats-expanded strong { font-size:21px; overflow-wrap:anywhere; }
.customer-filter-panel { display:grid; grid-template-columns:minmax(230px,1.4fr) minmax(140px,.65fr) minmax(150px,.7fr) minmax(150px,.7fr) auto; align-items:end; gap:10px; margin:14px 0; padding:13px; }
.customer-filter-panel .customer-search { width:100%; min-width:0; min-height:43px; margin:0; }
.customer-filter-panel input,.customer-filter-panel select,.customer-filter-panel button { width:100%; min-height:43px; margin:0; }
.customer-filter-panel button { padding:0 14px; white-space:nowrap; }
.customer-date-filter { display:grid; gap:5px; color:#bba7ab; font-size:10px; }
.customer-date-filter input { margin:0; }
.customer-directory-head,.customer-directory-record { grid-template-columns:minmax(180px,1.25fr) minmax(105px,.8fr) minmax(80px,.55fr) minmax(110px,.75fr) minmax(100px,.65fr) minmax(100px,.65fr) minmax(75px,.5fr) auto; gap:11px; }
.customer-directory-head { padding:13px 16px; }
.customer-directory-record { align-items:center; width:100%; padding:13px 16px; border-top:1px solid #372329; background:transparent; }
.customer-directory-record:hover { background:#28161a; }
.customer-name-button { width:100%; min-width:0; min-height:0; margin:0; padding:0; text-align:right; border:0; background:transparent; box-shadow:none; }
.customer-name-button:hover { background:transparent; box-shadow:none; transform:none; }
.customer-name-button strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-name-button small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-directory-record>span { min-width:0; color:#d5c8ca; font-size:12px; overflow-wrap:anywhere; }
.customer-class-badge { display:inline-flex; align-items:center; min-height:25px; padding:1px 9px; border:1px solid transparent; border-radius:999px; font-size:10px; font-style:normal; font-weight:800; white-space:nowrap; }
.customer-class-badge.class-new { color:#dcecff; border-color:#37658c; background:#1c3a55; }
.customer-class-badge.class-repeat { color:#fff0bd; border-color:#876b2c; background:#514018; }
.customer-class-badge.class-vip { color:#ffe6a2; border-color:#a87530; background:linear-gradient(135deg,#68451c,#3b2812); box-shadow:0 0 14px rgba(224,176,73,.12); }
.customer-profile-button { width:auto; min-width:82px; min-height:34px; margin:0; padding:0 10px; font-size:10px; }
.customer-profile-header { display:flex; align-items:center; gap:15px; padding:0 0 19px; border-bottom:1px solid #482a30; }
.customer-profile-header>div:nth-child(2) { min-width:0; flex:1; }
.customer-profile-header h2 { margin:4px 0; color:#fff; }
.customer-profile-header p:last-child { margin:0; color:#bba8ac; }
.customer-name-warning { display:grid; gap:4px; margin-top:14px; padding:12px 14px; color:#ffe7b1; border:1px solid #8c682d; border-right:4px solid #d4a248; border-radius:10px; background:#332714; }
.customer-name-warning strong { font-size:12px; }
.customer-name-warning span { color:#d4c198; font-size:11px; }
.customer-profile-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin:16px 0; }
.customer-profile-summary article { padding:12px; border:1px solid #472a30; border-radius:10px; background:#1a1113; }
.customer-profile-summary span,.customer-profile-summary strong { display:block; }
.customer-profile-summary span { color:#a99599; font-size:9px; }
.customer-profile-summary strong { margin-top:5px; color:#fff; font-size:13px; overflow-wrap:anywhere; }
.customer-booking-history { margin-top:16px; }
.customer-booking-history .section-heading { margin-bottom:10px; }
.customer-booking-history .section-heading span { color:#bba8ac; font-size:11px; }
.customer-booking-table-wrap { max-height:420px; overflow:auto; border:1px solid #472a30; border-radius:11px; }
.customer-booking-table-wrap table { width:100%; min-width:980px; border-collapse:separate; border-spacing:0; }
.customer-booking-table-wrap th { position:sticky; top:0; z-index:2; padding:10px; color:#f2e3e6; background:#35151c; }
.customer-booking-table-wrap td { padding:10px; color:#cdbfc2; font-size:11px; }
.customer-booking-table-wrap tbody tr:hover td { background:#29171b; }
.customer-booking-table-wrap button { min-height:31px; margin:0; padding:0 9px; font-size:10px; }

@media (max-width:1180px) {
  .customer-stats-expanded { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .customer-filter-panel { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .customer-directory-head,.customer-directory-record { grid-template-columns:minmax(180px,1.2fr) minmax(105px,.8fr) 80px 110px 100px 75px auto; }
  .customer-directory-head>span:nth-child(6),.customer-directory-record>span:nth-child(6) { display:none; }
}
@media (max-width:850px) {
  .customer-directory-head { display:none; }
  .customer-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:10px; }
  .customer-directory-record { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px; border:1px solid #472a30; border-radius:13px; background:#191113; }
  .customer-directory-record .customer-name-button { grid-column:1/-1; }
  .customer-directory-record>span { display:block !important; padding:7px; border-radius:7px; background:#26171a; }
  .customer-directory-record>span:nth-child(6) { display:none !important; }
  .customer-profile-button { width:100%; grid-column:1/-1; }
  .customer-profile-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .customer-stats-expanded { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .customer-filter-panel { grid-template-columns:1fr; }
  .customer-list { grid-template-columns:1fr; }
  .customer-profile-header { align-items:flex-start; flex-wrap:wrap; }
  .customer-profile-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Dashboard-only layout safeguards. */
#dashboard { min-width:0; overflow-x:hidden; }
#dashboard .dashboard-overview-head { min-height:0; margin-bottom:10px; padding:10px 15px; border-radius:13px; }
#dashboard .dashboard-overview-head .eyebrow { margin:0 0 2px; font-size:9px; line-height:1.2; }
#dashboard .dashboard-overview-head h3 { font-size:17px; line-height:1.3; }
#dashboard .dashboard-date-time strong { font-size:11px; line-height:1.35; }
#dashboard .dashboard-date-time span { margin-top:2px; font-size:16px; line-height:1.2; }
#dashboard .dashboard-metric-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
#dashboard .dashboard-metric { grid-template-columns:34px minmax(0,1fr); column-gap:9px; min-width:0; min-height:88px; padding:11px 12px; border:1px solid #4a2b32; border-radius:13px; background:linear-gradient(145deg,#211416,#151011); }
#dashboard .dashboard-metric i { width:34px; height:34px; border-radius:10px; font-size:14px; font-weight:700; line-height:1; }
#dashboard .dashboard-metric span { margin:0; font-size:9px; line-height:1.3; }
#dashboard .dashboard-metric strong { font-size:24px; font-variant-numeric:tabular-nums; line-height:1.05; }
#dashboard .dashboard-metric[data-dashboard-target]:hover { transform:translateY(-2px); border-color:#9d4052; box-shadow:0 8px 18px rgba(0,0,0,.22); }
#dashboard .dashboard-actions-panel,
#dashboard .dashboard-alerts-panel,
#dashboard .dashboard-activity-panel { height:auto; min-height:0; margin-top:11px; padding:13px; }
#dashboard .dashboard-actions-panel .section-heading,
#dashboard .dashboard-alerts-panel .section-heading,
#dashboard .dashboard-activity-panel .section-heading { margin-bottom:10px; }
#dashboard .dashboard-action-list { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:8px; min-height:0; }
#dashboard .dashboard-action-list.single-item { grid-template-columns:minmax(0,1fr); }
#dashboard .dashboard-action-list.multiple-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
#dashboard .dashboard-action-item { min-height:0; padding:10px 11px; }
#dashboard .dashboard-action-item i { width:32px; height:32px; font-size:13px; font-weight:700; }
#dashboard .dashboard-alerts-list { grid-template-columns:minmax(0,1fr); align-items:start; min-height:0; gap:7px; }
#dashboard .dashboard-action-list > *,
#dashboard .dashboard-alerts-list > * { width:100%; min-width:0; }
#dashboard .dashboard-alert-item { min-height:0; padding:9px 11px; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; }
#dashboard .dashboard-alert-item:hover { transform:translateY(-1px); border-color:#8f4654; background:#241519; box-shadow:0 6px 14px rgba(0,0,0,.18); }
#dashboard .dashboard-alert-item:focus-visible,
#dashboard .dashboard-action-item:focus-visible { outline:2px solid #efc46b; outline-offset:2px; }
#dashboard .dashboard-empty-state { min-height:0; padding:12px 14px; font-size:11px; line-height:1.5; }
#dashboard .dashboard-activity-list { display:grid; gap:7px; width:100%; max-height:310px; min-height:0; overflow-y:auto; overflow-x:hidden; }
#dashboard .dashboard-activity-item { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-width:0; min-height:0; margin:0; padding:10px 11px; color:#eee2e4; text-align:right; border:1px solid #493038; border-radius:11px; background:#181113; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; }
#dashboard .dashboard-activity-item:hover { transform:translateY(-1px); border-color:#8f4654; background:#241519; box-shadow:0 6px 14px rgba(0,0,0,.18); }
#dashboard .dashboard-activity-item:focus-visible { outline:2px solid #efc46b; outline-offset:2px; }
#dashboard .dashboard-activity-item i { display:grid; width:32px; height:32px; place-items:center; color:#efc46b; border:1px solid #70404a; border-radius:9px; background:#171011; }
#dashboard .dashboard-activity-item svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#dashboard .dashboard-activity-item span { min-width:0; }
#dashboard .dashboard-activity-item strong,
#dashboard .dashboard-activity-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#dashboard .dashboard-activity-item strong { color:#fff; font-size:12px; }
#dashboard .dashboard-activity-item small { margin-top:3px; color:#af9ca0; font-size:10px; }
#dashboard .dashboard-activity-item time { color:#dfb75f; font-size:10px; white-space:nowrap; }
#dashboard .dashboard-activity-footer { display:flex; justify-content:flex-start; margin-top:9px; padding-top:9px; border-top:1px solid #3d282d; }
#dashboard .dashboard-activity-footer button { width:auto; min-height:35px; margin:0; padding:0 14px; font-size:11px; }
@media (max-width:1024px) {
  #dashboard .dashboard-action-list.multiple-items { grid-template-columns:1fr; }
}
@media (max-width:1300px) {
  #dashboard .dashboard-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:700px) {
  #dashboard .dashboard-overview-head { gap:8px; padding:11px 13px; }
  #dashboard .dashboard-date-time { width:100%; text-align:right; }
  #dashboard .dashboard-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #dashboard .dashboard-action-list { grid-template-columns:1fr; }
  #dashboard .dashboard-activity-item { grid-template-columns:32px minmax(0,1fr); }
  #dashboard .dashboard-activity-item time { grid-column:2; margin-top:-3px; }
}
@media (max-width:380px) {
  #dashboard .dashboard-metric-grid { grid-template-columns:1fr; }
}

/* Full operational activity register inside Settings. */
.activity-register-filters { display:grid; grid-template-columns:minmax(220px,1.5fr) repeat(2,minmax(145px,.75fr)) repeat(2,minmax(135px,.65fr)) auto; align-items:end; gap:8px; margin-bottom:12px; padding:11px; border:1px solid #432a30; border-radius:12px; background:#171112; }
.activity-register-filters input,.activity-register-filters select,.activity-register-filters button { width:100%; min-width:0; min-height:40px; margin:0; }
.activity-register-filters label { display:grid; gap:4px; color:#ad999d; font-size:10px; }
.activity-summary-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.audit-summary-cards { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.activity-summary-card { display:grid; gap:5px; width:100%; min-height:70px; margin:0; padding:10px 12px; color:#fff; text-align:right; border:1px solid #4b2e35; border-radius:11px; background:linear-gradient(145deg,#211416,#151011); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.activity-summary-card:hover { transform:translateY(-1px); border-color:#8f4654; box-shadow:0 7px 16px rgba(0,0,0,.18); }
.activity-summary-card.is-active { border-color:#d4a94d; box-shadow:0 0 0 1px rgba(212,169,77,.18); }
.activity-summary-card span { color:#b8a5a9; font-size:10px; }
.activity-summary-card strong { color:#fff; font-size:22px; font-variant-numeric:tabular-nums; }
.activity-register-table table { min-width:1080px; }
.audit-admin-register { min-width:0; max-width:100%; overflow:hidden; }
.audit-admin-table { max-width:100%; overflow-x:hidden; }
.audit-admin-table table { width:100%; min-width:0; table-layout:fixed; }
.audit-admin-table th:nth-child(1) { width:155px; }.audit-admin-table th:nth-child(2) { width:125px; }.audit-admin-table th:nth-child(3) { width:auto; }.audit-admin-table th:nth-child(4) { width:130px; }
.audit-admin-table td { min-width:0; overflow-wrap:anywhere; word-break:break-word; vertical-align:middle; }
.audit-date-cell { display:grid; gap:3px; }
.audit-date-cell small { color:#aa979b; font-size:10px; }
.audit-activity-cell { min-width:0; }
.audit-description-clamp { display:-webkit-box; margin:0 0 7px; overflow:hidden; color:#fff; font-size:12px; font-weight:700; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; line-height:1.55; }
.audit-activity-meta { display:flex; flex-wrap:wrap; gap:4px 13px; min-width:0; color:#aa979b; font-size:10px; }
.audit-activity-meta span { position:relative; max-width:100%; overflow-wrap:anywhere; }
.audit-activity-meta span:not(:last-child)::after { content:"•"; position:absolute; left:-9px; color:#75515a; }
.audit-row-actions { display:flex; flex-wrap:wrap; gap:5px; }
.audit-row-actions button { white-space:nowrap; }
.audit-compact-action { min-height:30px; margin:0; padding:5px 9px; font-size:10px; border-radius:7px; }
.audit-pagination { justify-content:space-between; flex-wrap:wrap; }
.audit-pagination>div { display:flex; align-items:center; gap:8px; }
.activity-register-table tbody tr[data-activity-open] { cursor:pointer; transition:background .15s ease; }
.activity-register-table tbody tr[data-activity-open]:hover td { background:#28171a; }
.activity-register-table tbody tr[data-activity-open]:focus-visible { outline:2px solid #efc46b; outline-offset:-2px; }
.activity-type-badge { display:inline-flex; align-items:center; min-height:24px; padding:2px 8px; border:1px solid #69404a; border-radius:999px; color:#eadde0; background:#29171b; font-size:10px; white-space:nowrap; }
.activity-type-badge.type-create,.activity-type-badge.type-attendance { color:#a9e6bd; border-color:#347554; background:#143524; }
.activity-type-badge.type-close { color:#acd8f4; border-color:#3b6f91; background:#162e3e; }
.activity-type-badge.type-cancel,.activity-type-badge.type-absence { color:#ffbec7; border-color:#8c3b4a; background:#3b171e; }
.activity-type-badge.type-overtime { color:#e0c9ff; border-color:#725899; background:#291f3a; }
.activity-type-badge.type-delete,.activity-type-badge.type-cancel,.activity-type-badge.type-reject { color:#ffbec7; border-color:#8c3b4a; background:#3b171e; }
.activity-type-badge.type-activate,.activity-type-badge.type-approve,.activity-type-badge.type-login { color:#a9e6bd; border-color:#347554; background:#143524; }
.activity-type-badge.type-suspend,.activity-type-badge.type-logout { color:#efcf91; border-color:#8a672d; background:#352713; }
.activity-type-badge.type-save { color:#acd8f4; border-color:#3b6f91; background:#162e3e; }
.activity-source-warning { margin:0 0 12px; padding:10px 12px; color:#efd59c; border-right:3px solid #d5a64d; border-radius:8px; background:#2a2113; font-size:11px; }
.activity-register-empty { padding:24px !important; color:#ad999d !important; text-align:center; }
@media (max-width:1180px) { .activity-register-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }.activity-summary-cards,.audit-summary-cards { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) {
  .activity-register-filters { grid-template-columns:1fr; }
  .activity-summary-cards,.audit-summary-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .audit-admin-table { overflow:visible; border:0; }
  .audit-admin-table table,.audit-admin-table tbody { display:block; min-width:0; }
  .audit-admin-table thead { display:none; }
  .audit-admin-table tr { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:9px; padding:11px; border:1px solid #43282f; border-radius:11px; background:#171112; }
  .audit-admin-table td { display:grid; gap:3px; padding:7px !important; border:0 !important; border-radius:7px; background:#211519; }
  .audit-admin-table td::before { content:attr(data-label); color:#a99599; font-size:9px; }
  .audit-admin-table .audit-activity-cell,.audit-admin-table .audit-actions-cell { grid-column:1/-1; }
  .audit-admin-table .audit-row-actions { justify-content:flex-start; }
  .audit-admin-table .activity-register-empty { display:block; }
  .audit-pagination { justify-content:center; }
  .audit-pagination>div { width:100%; justify-content:center; }
}

.audit-details-modal { position:fixed; inset:0; z-index:125; display:grid; width:100vw; height:100vh; place-items:center; padding:20px; background:transparent; }
.audit-details-modal:hover,.audit-details-modal:focus,.audit-details-modal:active { background:transparent; }
.audit-details-backdrop,
.audit-details-backdrop:hover,
.audit-details-backdrop:focus,
.audit-details-backdrop:focus-visible,
.audit-details-backdrop:active { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; outline:0; appearance:none; background:rgba(0,0,0,.72); box-shadow:none; transform:none; filter:none; backdrop-filter:blur(4px); }
.audit-details-card { position:relative; z-index:1; width:min(820px,100%); max-height:calc(100vh - 40px); overflow-y:auto; overflow-x:hidden; padding:24px; border:1px solid #70404a; border-radius:19px; background:linear-gradient(145deg,#211315,#100e0f); box-shadow:0 28px 90px rgba(0,0,0,.75); }
.audit-details-card:hover,.audit-details-card:focus-within { background:linear-gradient(145deg,#211315,#100e0f); }

/* Notification center */
.notifications-center { min-width:0; overflow:hidden; }
.notifications-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.notifications-heading h3 { margin:2px 0 5px; color:#fff; font-size:24px; }
.notifications-heading p { margin:0; color:#ad999d; }
.notifications-bulk-actions { display:flex; flex-wrap:wrap; gap:7px; }
.notifications-bulk-actions button { min-height:36px; margin:0; padding:7px 11px; }
.notification-summary { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.notification-summary-card { display:grid; gap:5px; min-width:0; min-height:72px; margin:0; padding:11px; text-align:right; border:1px solid #4c2c34; border-radius:11px; background:linear-gradient(145deg,#221416,#151011); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.notification-summary-card span { color:#b9a4a8; font-size:10px; }
.notification-summary-card strong { color:#fff; font-size:23px; font-variant-numeric:tabular-nums; }
.notification-summary-card:hover,.notification-summary-card:focus-visible { transform:translateY(-1px); border-color:#955062; box-shadow:0 7px 17px rgba(0,0,0,.2); }
.notification-summary-card.is-active { border-color:#d4a94d; box-shadow:0 0 0 1px rgba(212,169,77,.18); }
.notification-filters { display:grid; grid-template-columns:1.4fr repeat(3,minmax(120px,1fr)) repeat(2,minmax(130px,.9fr)) auto; gap:8px; align-items:end; margin-bottom:15px; padding:12px; border:1px solid #43282f; border-radius:12px; background:#161112; }
.notification-filters input,.notification-filters select,.notification-filters button { width:100%; min-width:0; min-height:40px; margin:0; }
.notification-filters label { display:grid; gap:4px; color:#aa969a; font-size:10px; }
.notification-list { display:grid; gap:8px; min-width:0; }
.notification-item { display:grid; grid-template-columns:44px minmax(0,1fr) auto auto; gap:12px; align-items:center; min-width:0; padding:13px; border:1px solid #43282f; border-radius:12px; background:#171112; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.notification-item.is-unread { border-right:3px solid #cf1537; background:linear-gradient(90deg,#171112,#211318); }
.notification-item:hover,.notification-item:focus-visible { transform:translateY(-1px); border-color:#87505d; outline:0; }
.notification-icon { display:grid; width:40px; height:40px; place-items:center; color:#efbd59; border:1px solid #60333d; border-radius:10px; background:#27161a; }
.notification-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.notification-copy { min-width:0; }
.notification-copy>div { display:flex; flex-wrap:wrap; gap:5px 10px; align-items:center; }
.notification-copy strong { color:#fff; font-size:13px; }
.notification-copy>div span,.notification-copy time { color:#a99196; font-size:10px; }
.notification-copy p { margin:5px 0; color:#d4c7ca; line-height:1.55; overflow-wrap:anywhere; }
.notification-badges { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.notification-badges span { display:inline-flex; min-height:24px; align-items:center; padding:3px 8px; border:1px solid #5c3941; border-radius:999px; color:#d9cbd0; background:#26181b; font-size:9px; white-space:nowrap; }
.notification-priority.priority-urgent { color:#ffbbc5; border-color:#96394b; background:#3a171e; }
.notification-priority.priority-important { color:#f3d193; border-color:#8a672d; background:#352713; }
.notification-priority.priority-normal { color:#b9d7ef; border-color:#416d89; background:#172d3b; }
.notification-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.notification-actions button { min-height:31px; margin:0; padding:5px 9px; font-size:9px; white-space:nowrap; }
.notification-empty { margin:0; padding:24px; color:#aa969a; text-align:center; border:1px dashed #4b3036; border-radius:12px; background:#151011; }
.notification-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; color:#ad999d; }
.notification-pagination>div { display:flex; align-items:center; gap:8px; }
.notification-pagination button { min-height:34px; margin:0; padding:6px 12px; }
@media (max-width:1180px) {
  .notification-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .notification-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .notification-item { grid-template-columns:40px minmax(0,1fr) auto; }
  .notification-actions { grid-column:2/-1; }
}

.booking-availability-message { min-height:18px; margin:8px 0 0; color:#b9a6aa; font-size:11px; line-height:1.5; }
.booking-availability-message.is-error { padding:8px 10px; color:#ffc1ca; border-right:3px solid #c91b3a; border-radius:7px; background:#35141a; }
#bookingForm select[name="time"]:disabled { cursor:not-allowed; opacity:.62; }
.hours-row { min-width:0; transition:opacity .18s ease,background .18s ease; }
.hours-row.is-closed { margin-inline:-7px; padding-inline:7px; border-radius:8px; background:#120e0f; }
.hours-row.is-closed>label:not(.day-open),.hours-row.is-closed>strong { opacity:.5; }
.hours-row input:disabled { cursor:not-allowed; opacity:.55; }
.hours-row .day-open span { color:#d9c9cc; font-size:11px; }

.user-management-panel { min-width:0; overflow:hidden; }
.user-management-summary { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-bottom:13px; }
.user-summary-card { display:grid; gap:5px; min-width:0; min-height:70px; margin:0; padding:10px 11px; text-align:right; border:1px solid #4c2d34; border-radius:11px; background:linear-gradient(145deg,#211416,#151011); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.user-summary-card span { color:#b7a3a7; font-size:10px; }
.user-summary-card strong { color:#fff; font-size:22px; font-variant-numeric:tabular-nums; }
.user-summary-card:hover,.user-summary-card:focus-visible { transform:translateY(-1px); border-color:#8f4654; box-shadow:0 7px 16px rgba(0,0,0,.18); }
.user-summary-card.is-active { border-color:#d4a94d; box-shadow:0 0 0 1px rgba(212,169,77,.18); }
.user-management-filters { display:grid; grid-template-columns:minmax(220px,1.5fr) minmax(130px,.75fr) minmax(130px,.75fr) auto; gap:8px; margin-bottom:13px; padding:11px; border:1px solid #43282f; border-radius:12px; background:#161112; }
.user-management-filters input,.user-management-filters select,.user-management-filters button { width:100%; min-width:0; min-height:39px; margin:0; }
.user-management-table { max-width:100%; overflow-x:hidden; }
.user-management-table table { width:100%; min-width:0; table-layout:fixed; }
.user-management-table th:nth-child(1) { width:17%; }.user-management-table th:nth-child(2) { width:19%; }.user-management-table th:nth-child(3) { width:10%; }.user-management-table th:nth-child(4) { width:10%; }.user-management-table th:nth-child(5) { width:15%; }.user-management-table th:nth-child(6) { width:29%; }
.user-management-table td { min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.user-created-at small { display:block; margin-top:3px; }
.user-management-actions { display:flex; flex-wrap:wrap; gap:5px; }
.user-management-actions button { min-height:29px; padding:4px 7px; font-size:9px; white-space:normal; }
.user-management-empty { padding:24px!important; color:#ad999d!important; text-align:center; }
.user-management-modal-card { width:min(620px,100%); }
.user-management-modal-card input[readonly] { color:#ae9da1; cursor:not-allowed; background:#151112; }
.worker-roster-modal-card { width:min(620px,100%); }
.worker-roster-management-card { width:min(760px,100%); max-height:calc(100vh - 40px); overflow:auto; }
.worker-roster-modal-card h2,.worker-roster-management-card h2 { margin:0; color:#fff; }
.worker-roster-schema-note { margin:12px 0 0; padding:9px 11px; border:1px solid #57442a; border-radius:9px; color:#d9bd7c; background:#261f14; font-size:11px; }
.worker-roster-management-list { display:grid; gap:8px; margin:16px 0; }
.worker-roster-management-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid #452a31; border-radius:10px; background:#171112; }
.worker-roster-management-row>div { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
.worker-roster-management-row strong { color:#fff; overflow-wrap:anywhere; }
.worker-roster-management-row button { min-height:32px; margin:0; padding:5px 10px; }
.worker-roster-status { display:inline-flex; align-items:center; min-height:24px; padding:3px 8px; border:1px solid #5c454b; border-radius:999px; font-size:10px; }
.worker-roster-status.is-active { color:#bce9ca; border-color:#3d7650; background:#173321; }
.worker-roster-status.is-inactive { color:#c7bec0; border-color:#5b5053; background:#272325; }
@media (max-width:600px) {
  .worker-roster-management-row { align-items:stretch; flex-direction:column; }
  .worker-roster-management-row>div:last-child { display:grid; grid-template-columns:1fr 1fr; }
  .worker-roster-management-row button { width:100%; }
}
.user-confirm-card { width:min(480px,100%); padding:27px; }
.user-confirm-card h2 { margin:5px 0; color:#fff; }
.user-confirm-card header>p:last-child { margin:8px 0 20px; color:#c6b4b7; line-height:1.7; }
@media (max-width:1100px) {
  .user-management-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .user-management-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .user-management-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .user-management-filters { grid-template-columns:1fr; }
  .user-management-table { overflow:visible; border:0; }
  .user-management-table table,.user-management-table tbody { display:block; min-width:0; }
  .user-management-table thead { display:none; }
  .user-management-table tr { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:9px; padding:10px; border:1px solid #43282f; border-radius:11px; background:#171112; }
  .user-management-table td { display:grid; gap:3px; padding:7px!important; border:0!important; border-radius:7px; background:#211519; }
  .user-management-table td::before { content:attr(data-label); color:#a99599; font-size:9px; }
  .user-management-table td:nth-child(1),.user-management-table td:nth-child(2),.user-management-table td:nth-child(6),.user-management-table .user-management-empty { grid-column:1/-1; }
  .user-management-actions { justify-content:flex-start; }
}
@media (max-width:900px) {
  .hours-row { grid-template-columns:80px minmax(0,1fr) minmax(0,1fr) 76px; }
}
@media (max-width:600px) {
  .hours-editor { min-width:0; padding:12px; overflow:hidden; }
  .hours-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .hours-row strong,.hours-row .day-open { grid-column:1/-1; }
  .hours-row label,.hours-row input { min-width:0; width:100%; }
}
@media (max-width:700px) {
  .notifications-heading { display:grid; }
  .notifications-bulk-actions { display:grid; grid-template-columns:1fr; width:100%; }
  .notification-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .notification-filters { grid-template-columns:1fr; }
  .notification-item { grid-template-columns:38px minmax(0,1fr); align-items:start; padding:11px; }
  .notification-badges,.notification-actions { grid-column:1/-1; justify-content:flex-start; }
  .notification-pagination { display:grid; justify-items:center; }
  .notification-pagination>div { width:100%; justify-content:center; }
}
.audit-details-card header { padding-bottom:14px; border-bottom:1px solid #482830; }
.audit-details-card header .eyebrow { margin:0 0 4px; }.audit-details-card h2 { margin:0; color:#fff; }
.audit-detail-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0; }
.audit-detail-summary article { padding:10px; border:1px solid #452a31; border-radius:9px; background:#191113; }
.audit-detail-summary article.wide { grid-column:1/-1; }
.audit-detail-summary span,.audit-detail-summary strong { display:block; }.audit-detail-summary span { color:#a99599; font-size:10px; }.audit-detail-summary strong { margin-top:4px; color:#fff; line-height:1.65; overflow-wrap:anywhere; }
.audit-values-section { margin-top:11px; padding:12px; border:1px solid #452a31; border-radius:11px; background:#171112; }.audit-values-section h3 { margin:0 0 9px; color:#efc46b; font-size:14px; }
.audit-detail-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:0; }.audit-detail-values>div { min-width:0; padding:9px; border-radius:8px; background:#211519; }.audit-detail-values dt { color:#a99599; font-size:10px; }.audit-detail-values dd { margin:4px 0 0; color:#fff; overflow-wrap:anywhere; }.audit-detail-values pre { max-width:100%; margin:0; overflow-wrap:anywhere; white-space:pre-wrap; word-break:break-word; direction:ltr; text-align:left; }
.audit-detail-empty,.audit-entity-id { margin:0; color:#b7a5a9; line-height:1.6; }.audit-entity-id { margin-top:12px; padding:10px; border-radius:8px; background:#211519; overflow-wrap:anywhere; }
@media (max-width:600px) { .audit-details-card { padding:18px; }.audit-detail-summary,.audit-detail-values { grid-template-columns:1fr; }.audit-detail-summary article.wide { grid-column:auto; } }
.system-settings-form { overflow:hidden; }
.system-settings-form .logo-setting-preview { padding:0; cursor:zoom-in; }
.system-settings-form .logo-setting-preview:hover,.system-settings-form .logo-setting-preview:focus-visible { border-color:#d34a64; box-shadow:0 0 0 3px rgba(207,23,54,.14); transform:none; }
.logo-setting-body { min-width:0; flex:1; }
.logo-setting-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.logo-setting-actions button { width:auto; min-height:32px; margin:0; padding:0 10px; font-size:12px; }
.system-settings-loading { margin:0 0 14px; padding:10px 12px; border:1px solid #594125; border-radius:10px; color:#efcf83; background:#2a2113; }
.system-settings-updated { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:center; margin-top:16px; padding:13px 15px; border:1px solid #462b32; border-radius:12px; background:#171112; }
.system-settings-updated span { grid-row:1/3; color:#edc76d; font-size:12px; }
.system-settings-updated strong { color:#fff; font-size:13px; }
.system-settings-updated small { color:#a9969a; font-size:11px; }
.system-settings-updated { display:flex; align-items:flex-start; flex-direction:column; gap:3px; }
.system-settings-updated span { grid-row:auto; color:#bda8ad; font-size:11px; }
.system-settings-updated strong { color:#fff; font-size:15px; }
.system-settings-updated time { color:#ead8dc; font-size:13px; }
.system-settings-updated small { display:flex; gap:5px; align-items:center; margin-top:5px; color:#fff; font-size:12px; }
.system-settings-updated small b { color:#a9969a; font-weight:500; }
.system-settings-form #saveSystemSettings.is-saved { color:#c9f4d5; border-color:#397a50; background:#17462b; box-shadow:0 8px 20px rgba(23,70,43,.2); }
.system-settings-form .logo-setting-preview { position:relative; }
.system-settings-form .logo-setting-preview::after { content:attr(data-tooltip); position:absolute; right:50%; bottom:calc(100% + 8px); z-index:4; width:max-content; max-width:180px; padding:6px 9px; border:1px solid #70404a; border-radius:7px; color:#f4e8ea; background:#171012; box-shadow:0 8px 20px rgba(0,0,0,.28); font-size:10px; opacity:0; visibility:hidden; transform:translate(50%,4px); transition:.18s; pointer-events:none; }
.system-settings-form .logo-setting-preview:hover::after,.system-settings-form .logo-setting-preview:focus-visible::after { opacity:1; visibility:visible; transform:translate(50%,0); }
.system-logo-modal-card { display:grid; place-items:center; width:min(620px,calc(100vw - 32px)); padding:52px 24px 24px; }
.system-logo-modal-card>img { display:block; width:auto; max-width:100%; max-height:min(65vh,560px); object-fit:contain; border-radius:18px; }
@media (max-width:600px) {
  .logo-setting-actions { display:grid; width:100%; grid-template-columns:1fr; }
  .logo-setting-actions .file-picker,.logo-setting-actions button { width:100%; justify-content:center; }
  .system-settings-updated { grid-template-columns:1fr; }
  .system-settings-updated span { grid-row:auto; }
}
/* Supabase overtime requests center */
.overtime-center { margin-top:18px; overflow:hidden; border-color:#57303a; background:linear-gradient(145deg,#1d1315,#100f10); }
.overtime-center-grid { display:grid; grid-template-columns:minmax(270px,340px) minmax(0,1fr); gap:16px; align-items:start; }
.overtime-entry-panel { display:grid; gap:14px; padding:18px; border:1px solid #4a2b32; border-radius:14px; background:#171112; }
.overtime-entry-panel h4 { margin:0 0 2px; color:#efc46b; font-size:17px; }
.overtime-entry-panel label { display:grid; gap:7px; color:#d8c7ca; font-size:12px; }
.overtime-entry-panel input,.overtime-entry-panel textarea { margin:0; transition:border-color .18s ease,box-shadow .18s ease,opacity .18s ease; }
.overtime-entry-panel input:focus,.overtime-entry-panel textarea:focus { border-color:#d6a64d; box-shadow:0 0 0 3px rgba(214,166,77,.14); outline:0; }
.overtime-entry-panel input:disabled,.overtime-entry-panel textarea:disabled { opacity:.55; cursor:not-allowed; }
.overtime-time-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.overtime-duration { margin:0; padding:10px 11px; border:1px solid transparent; border-radius:9px; color:#ad999d; background:#211719; font-size:12px; transition:.18s ease; }.overtime-duration.is-valid { color:#f0c96d; border-color:#74582a; background:#2b2112; font-weight:800; }.overtime-duration.is-invalid { color:#ffbec8; border-color:#843848; background:#36171d; }
.overtime-form-actions { display:flex; gap:8px; }
.overtime-form-actions button { flex:1; margin:0; }
.overtime-list-area { min-width:0; }
.overtime-center .overtime-summary { grid-template-columns:repeat(4,minmax(0,1fr)); }
.overtime-center .overtime-summary article { display:flex; align-items:center; gap:10px; min-width:0; }.overtime-center .overtime-summary i { display:grid; flex:none; width:34px; height:34px; place-items:center; border:1px solid currentColor; border-radius:10px; font-style:normal; }.overtime-center .overtime-summary i svg { width:18px; height:18px; }.overtime-center .overtime-summary article>div { min-width:0; }.overtime-center .overtime-summary strong { overflow-wrap:anywhere; }.overtime-center .summary-pending { color:#e7be58; }.overtime-center .summary-approved { color:#63c98b; }.overtime-center .summary-rejected { color:#ee7180; }.overtime-center .summary-hours { color:#be91e8; }
.overtime-filter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.overtime-filter-grid input,.overtime-filter-grid select,.overtime-filter-grid button { width:100%; min-width:0; min-height:40px; margin:0; }
.overtime-request-list { display:grid; gap:9px; }
.overtime-request-card { min-width:0; padding:16px; border:1px solid #482c32; border-right:4px solid #7d3544; border-radius:12px; background:#191113; }.overtime-request-card.status-card-pending { border-right-color:#c99a31; }.overtime-request-card.status-card-approved { border-right-color:#3f9b65; }.overtime-request-card.status-card-rejected { border-right-color:#c84c61; }.overtime-request-card.status-card-cancelled { border-right-color:#71666a; }
.overtime-request-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.overtime-request-card header strong,.overtime-request-card header span { display:block; }
.overtime-request-card header strong { color:#fff; font-size:15px; }
.overtime-request-card header div>span { margin-top:4px; color:#bba7ab; font-size:11px; }
.overtime-request-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin:13px 0; color:#bca8ac; font-size:11px; }.overtime-request-meta span:first-child b { display:block; margin-top:4px; color:#f2e8ea; font-size:13px; direction:ltr; text-align:right; }.overtime-card-duration { color:#f0c86c; font-size:15px; font-weight:900; }.overtime-reason { margin:11px 0; padding:11px; border:1px solid #3f292e; border-radius:9px; background:#141011; }.overtime-reason>span { color:#a89297; font-size:10px; }.overtime-request-card .overtime-reason p { margin:5px 0 0; color:#e2d5d8; line-height:1.65; overflow-wrap:anywhere; }.overtime-request-submeta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:7px 14px; color:#a9969a; font-size:10px; }
.overtime-request-card>small { display:block; margin-top:9px; padding:8px; border-radius:8px; color:#e6c982; background:#2a2113; overflow-wrap:anywhere; }
.overtime-request-card footer { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; padding-top:12px; border-top:1px solid #39252a; }.overtime-request-card footer button { display:inline-flex; align-items:center; justify-content:center; gap:6px; }.overtime-request-card footer svg { width:15px; height:15px; }.overtime-action-approve { color:#baf0ca !important; border-color:#397e52 !important; background:#163622 !important; }.overtime-action-approve:hover { background:#205230 !important; }.overtime-action-reject { color:#ffc2cb !important; border-color:#87394a !important; background:#36171d !important; }.overtime-action-reject:hover { background:#4c1b25 !important; }.overtime-action-details { color:#d9cdd0 !important; border-color:#5d4c50 !important; background:#241d1f !important; }
.overtime-status { display:inline-flex; flex:none; align-items:center; min-height:26px; padding:3px 9px; border:1px solid #60404a; border-radius:999px; font-size:10px; font-weight:800; }
.overtime-status.status-pending { color:#f0ce7b; border-color:#80622d; background:#342712; }
.overtime-status.status-approved { color:#aeeac2; border-color:#38744e; background:#153522; }
.overtime-status.status-rejected { color:#ffc1ca; border-color:#87394a; background:#3a171e; }
.overtime-status.status-cancelled { color:#c7bec0; border-color:#5b5053; background:#272325; }
.overtime-manager-note { display:block; margin-top:10px; padding:9px 10px; border-radius:8px; color:#e6c982; background:#2a2113; overflow-wrap:anywhere; }
.overtime-toast { position:fixed; z-index:2400; top:22px; left:50%; width:min(420px,calc(100vw - 28px)); max-width:none; text-align:center; transform:translate(-50%,-10px); }.overtime-toast.show { transform:translate(-50%,0); }
.overtime-state { margin:0; padding:25px; border:1px dashed #4b3036; border-radius:12px; color:#b19fa3; text-align:center; background:#171112; }
.overtime-modal-card header { margin-bottom:16px; padding-bottom:13px; border-bottom:1px solid #482b31; }
.overtime-modal-card h2 { margin:4px 0; color:#fff; }
.overtime-modal-card textarea { margin-top:6px; }
.overtime-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.overtime-details>div { min-width:0; padding:11px; border:1px solid #43292f; border-radius:10px; background:#171112; }
.overtime-details .wide { grid-column:1/-1; }
.overtime-details dt { color:#aa979b; font-size:10px; }
.overtime-details dd { margin:5px 0 0; color:#f0e5e7; overflow-wrap:anywhere; }
@media (max-width:1050px) { .overtime-center-grid { grid-template-columns:1fr; }.overtime-center .overtime-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .overtime-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.overtime-center { padding:16px; }.overtime-center-grid { min-width:0; }.overtime-request-card { overflow:hidden; } }
@media (max-width:520px) { .overtime-time-grid,.overtime-filter-grid,.overtime-center .overtime-summary,.overtime-details { grid-template-columns:1fr; }.overtime-details .wide { grid-column:auto; }.overtime-form-actions { flex-direction:column; }.overtime-request-card header { flex-direction:column; }.overtime-request-card footer { display:grid; grid-template-columns:1fr; }.overtime-request-card footer button { width:100%; }.overtime-request-meta,.overtime-request-submeta { align-items:flex-start; flex-direction:column; }.overtime-entry-panel { padding:14px; } }