/* Theme and layout controls adapted from the supplied Admiro customizer. */
:root { --teal-soft: color-mix(in srgb, var(--teal) 10%, white); --teal-welcome: color-mix(in srgb, var(--teal) 14%, white); --peach-soft: color-mix(in srgb, var(--peach) 12%, white); --surface: #fff; }
.menu-toggle { display: inline-grid; margin-inline-end: 12px; }
.topbar-tools { gap: 12px; }
.appearance-panel { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: 100dvh; width: min(370px, 100%); max-width: 100%; border-radius: 0; padding: 26px; overflow-y: auto; background: var(--surface); color: var(--ink); }
.appearance-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.appearance-heading h2 { font-size: 22px; margin-top: 8px; }
.appearance-intro { margin: 16px 0 24px; font-size: 11px; }
.appearance-fields > label { margin-top: 18px; font-size: 12px; font-weight: 600; }
.appearance-fields select { background: var(--surface); color: var(--ink); border-color: var(--line); font-size: 12px; }
.accent-options { border: 0; padding: 0; margin: 24px 0; }
.accent-options legend { font-size: 12px; font-weight: 600; margin-bottom: 13px; }
.accent-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.accent-swatches button { width: 32px; height: 32px; background: var(--swatch); border: 3px solid var(--surface); outline: 1px solid var(--line); border-radius: 50%; }
.accent-swatches button[aria-pressed="true"] { outline: 2px solid var(--ink); }
.appearance-footer { border-top: 1px solid var(--line); padding-top: 20px; display: grid; gap: 15px; }
.appearance-footer > span { font-size: 10px; color: var(--muted); }
[data-icons="colorful"] .navigation a svg { color: var(--peach); background: #ffffff12; border-radius: 4px; stroke-width: 2.2; }
[data-sidebar-tone="light"] .sidebar { background: var(--surface); color: var(--ink); border-inline-end: 1px solid var(--line); }
[data-sidebar-tone="light"] .company, [data-sidebar-tone="light"] .sidebar-profile { border-color: var(--line); }
[data-sidebar-tone="light"] .navigation a:not(.active), [data-sidebar-tone="light"] .company span:not(.company-mark), [data-sidebar-tone="light"] .nav-label, [data-sidebar-tone="light"] .sidebar-profile div span { color: var(--muted); }
[data-sidebar-tone="light"] .brand { background: #1d3838; padding: 6px; border-radius: 8px; }
[data-sidebar-tone="light"] .navigation a:hover:not(.active) { background: var(--teal-soft); }
[data-width="boxed"] body { background: color-mix(in srgb, var(--canvas) 90%, var(--ink)); }
[data-width="boxed"] .app { max-width: 1320px; margin-inline: auto; background: var(--canvas); box-shadow: 0 0 40px #0000000c; }
[data-density="compact"] .content { padding-top: 22px; }
[data-density="compact"] .dashboard { gap: 12px; }
[data-density="compact"] .card { padding: 17px; }
[data-density="compact"] .welcome { min-height: 190px; }
[data-density="compact"] .calendar-day { min-height: 44px; padding: 7px; }
[data-density="compact"] .navigation a { padding-block: 9px; }
[data-density="compact"] .left-stack { gap: 12px; }
[data-density="compact"] .topbar { height: 64px; }
[data-density="compact"] .page-heading { margin-bottom: 18px; }
[data-theme="dark"] { color-scheme: dark; --ink: #e0ece9; --muted: #a0b5b0; --line: #344c49; --canvas: #152724; --surface: #203532; --teal-soft: color-mix(in srgb, var(--teal) 22%, #203532); --teal-welcome: color-mix(in srgb, var(--teal) 23%, #203532); --peach-soft: #3b322c; }
[data-theme="dark"] .topbar, [data-theme="dark"] .card, [data-theme="dark"] .summary, [data-theme="dark"] dialog { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .welcome, [data-theme="dark"] .leave-card { background: var(--teal-soft); }
[data-theme="dark"] .clock-card { background: var(--peach-soft); border-top-color: var(--peach); }
[data-theme="dark"] .breadcrumb strong, [data-theme="dark"] .mobile-brand { color: var(--ink); }
[data-theme="dark"] .welcome p, [data-theme="dark"] .shift-meta, [data-theme="dark"] .eyebrow, [data-theme="dark"] .leave-balance span, [data-theme="dark"] .day-detail, [data-theme="dark"] .summary-label, [data-theme="dark"] .summary-value small, [data-theme="dark"] .summary-item p, [data-theme="dark"] .clock-card p, [data-theme="dark"] .clock-status, [data-theme="dark"] .clock-time small, [data-theme="dark"] .sample-time, [data-theme="dark"] .page-footer, [data-theme="dark"] .weekdays, [data-theme="dark"] .calendar-legend, [data-theme="dark"] .announcements time { color: var(--muted); }
[data-theme="dark"] .balance-value { color: #79c9bb; }
[data-theme="dark"] .welcome-art { background: #38665d; border-color: #30564e; }
[data-theme="dark"] .art-face { color: #9ccebf; border-color: #739b8f; }
[data-theme="dark"] .calendar-day { background: var(--surface); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .calendar-day.present { background: var(--teal-soft); color: #9cd2c4; }
[data-theme="dark"] .calendar-day.weekend { background: #1a2d29; color: #83988f; }
[data-theme="dark"] .calendar-day.leave { background: #453b2f; color: #e4bc8d; }
[data-theme="dark"] .calendar-day.today { background: var(--teal); color: white; }
[data-theme="dark"] .button-white, [data-theme="dark"] .button-quiet, [data-theme="dark"] .month-reset, [data-theme="dark"] .subtle-count { background: #2a4540; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .icon-button:hover { background: #ffffff10; }
[data-theme="dark"] dialog input, [data-theme="dark"] dialog textarea, [data-theme="dark"] dialog select { background: var(--canvas); border-color: var(--line); color: var(--ink); }
html[dir="rtl"] .count, html[dir="rtl"] .online-dot, html[dir="rtl"] .leave-balance svg { margin-left: 0; margin-inline-start: auto; }
html[dir="rtl"] .summary-item { border-right: 0; border-inline-end: 1px solid var(--line); }
html[dir="rtl"] .summary-item:last-child { border-inline-end: 0; }
html[dir="rtl"] .appearance-panel { inset: 0 auto 0 0; }
html[dir="rtl"] .calendar-day { text-align: right; }
@media (min-width: 721px) {
  [data-sidebar="compact"] .app { grid-template-columns: 78px minmax(0, 1fr); }
  [data-sidebar="compact"] .sidebar { padding: 28px 12px 20px; align-items: center; }
  [data-sidebar="compact"] .brand { width: 38px; height: 38px; margin: 0; padding: 0; background: transparent url('../images/pace-mark.svg') center/contain no-repeat; }
  [data-sidebar="compact"] .brand-logo, [data-sidebar="compact"] .company, [data-sidebar="compact"] .nav-label, [data-sidebar="compact"] .sidebar-profile div, [data-sidebar="compact"] .sidebar-profile .online-dot { display: none; }
  [data-sidebar="compact"] .navigation { margin-top: 38px; width: 100%; }
  [data-sidebar="compact"] .navigation a { font-size: 0; gap: 0; justify-content: center; padding: 13px; }
  [data-sidebar="compact"] .navigation .count { display: none; }
  [data-sidebar="compact"] .sidebar-profile { padding-top: 18px; }
  [data-sidebar="hidden"] .app { grid-template-columns: minmax(0, 1fr); }
  [data-sidebar="hidden"] .sidebar { display: none; }
  [data-sidebar="horizontal"] .app { display: flex; flex-direction: column; }
  [data-sidebar="horizontal"] .sidebar { position: static; width: auto; height: auto; flex-direction: row; align-items: center; padding: 14px 28px; gap: 25px; }
  [data-sidebar="horizontal"] .brand { margin: 0; flex-shrink: 0; }
  [data-sidebar="horizontal"] .brand-logo { width: 120px; }
  [data-sidebar="horizontal"] .company, [data-sidebar="horizontal"] .nav-label, [data-sidebar="horizontal"] .sidebar-profile { display: none; }
  [data-sidebar="horizontal"] .navigation { display: flex; gap: 6px; flex-wrap: wrap; }
  [data-sidebar="horizontal"] .navigation a { font-size: 11px; padding: 9px 12px; }
}
@media (max-width: 720px) {
  .topbar-tools { gap: 4px; }
  .topbar-tools .demo-label { display: none; }
  html[dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); }
  html[dir="rtl"] .menu-open .sidebar { transform: translateX(0); }
}