/* ShiftSync theme + language controls */
:root{
  --ss-control-bg:rgba(255,255,253,.94);
  --ss-control-border:#d9d8d3;
  --ss-control-text:#3f4844;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --ss-brand:#78b9a7;
  --ss-brand-dark:#a7d7c9;
  --ss-brand-soft:#223a33;
  --ss-bg:#111714;
  --ss-surface:#18211e;
  --ss-surface-alt:#141c19;
  --ss-text:#eef3f0;
  --ss-muted:#a8b3ae;
  --ss-border:#34423c;
  --ss-border-strong:#4a5c54;
  --ss-official:#1c2d42;
  --ss-official-accent:#75a2d9;
  --ss-manual:#1c3028;
  --ss-manual-accent:#70a98d;
  --ss-internal:#332f20;
  --ss-internal-accent:#c3a556;
  --ss-pay:#3a301d;
  --ss-pay-accent:#d0a95f;
  --ss-control-bg:rgba(24,33,30,.94);
  --ss-control-border:#415149;
  --ss-control-text:#e8efeb;
  --bg:#111714;
  --surface:#18211e;
  --surface-alt:#141c19;
  --text:#eef3f0;
  --muted:#a8b3ae;
  --border:#34423c;
  --brand:#78b9a7;
  --brand-dark:#3e7568;
  --brand-soft:#223a33;
  --blue:#75a2d9;
  --blue-soft:#1c2d42;
  --green-soft:#1c3028;
  --soft:#1c3028;
}

.ss-pref-controls{
  position:fixed;
  top:76px;
  right:14px;
  z-index:1400;
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px;
  border:1px solid var(--ss-control-border);
  border-radius:7px;
  background:var(--ss-control-bg);
  color:var(--ss-control-text);
  box-shadow:none;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
body.ss-has-primary-nav .ss-pref-controls{top:14px}
.ss-pref-button{
  display:inline-flex;
  min-width:34px;
  height:30px;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 8px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:11px;
  font-weight:650;
  line-height:1;
  cursor:pointer;
}
.ss-pref-button:hover{background:rgba(127,127,127,.12)}
.ss-pref-button:focus-visible{outline:2px solid var(--ss-brand);outline-offset:1px}
.ss-pref-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ss-pref-separator{width:1px;height:17px;background:var(--ss-control-border)}

html[data-theme="dark"] body{background:var(--ss-bg)!important;color:var(--ss-text)!important}
html[data-theme="dark"] .shiftsync-primary-nav{border-color:var(--ss-border)!important;background:#131b18!important}
html[data-theme="dark"] .shiftsync-primary-nav .nav-item{color:#b4beb9!important}
html[data-theme="dark"] .shiftsync-primary-nav .nav-item:hover{background:#1b2722!important;color:var(--ss-text)!important}
html[data-theme="dark"] .shiftsync-primary-nav .nav-item.active{background:var(--ss-brand-soft)!important;color:var(--ss-brand-dark)!important}

html[data-theme="dark"] :where(.card,.calendar,.agenda,.provider-card,.item,.check-card,.product,.features,.empty,.login-card,.register-card,.panel,.sheet,.modal-content){
  border-color:var(--ss-border)!important;
  background:var(--ss-surface)!important;
  color:var(--ss-text)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] :where(.section,.container,.page,.content,.main){color:var(--ss-text)}
html[data-theme="dark"] :where(h1,h2,h3,h4,strong,label,.name,.provider-name,.stat-value,.item-name,.item-pay,.workplace,.period-title){color:var(--ss-text)!important}
html[data-theme="dark"] :where(.lead,.subtitle,.sub,.description,.section-help,.hint,.note,.reference,.caption,.count,.examples,.provider-description,.sync-info,.service-name,.location,.agenda-caption,.hero-label,.stat-label,.item-date,.item-time,.check-help){color:var(--ss-muted)!important}

html[data-theme="dark"] :where(input,select,textarea){
  border-color:var(--ss-border)!important;
  background:#101815!important;
  color:var(--ss-text)!important;
  caret-color:var(--ss-text);
}
html[data-theme="dark"] :where(input,textarea)::placeholder{color:#7f8d86!important}
html[data-theme="dark"] :where(input[readonly]){background:#1b2420!important}
html[data-theme="dark"] :where(option){background:#101815;color:var(--ss-text)}

html[data-theme="dark"] :where(.action:not(.primary),.secondary-button,.invite-button,.agenda-add,.navbtn,.period-nav a,.button:not(.primary):not(.danger-button),a.button:not(.primary)){
  border-color:var(--ss-border)!important;
  background:var(--ss-surface)!important;
  color:var(--ss-text)!important;
}
html[data-theme="dark"] :where(.action:not(.primary),.secondary-button,.invite-button,.agenda-add,.navbtn,.period-nav a,.button:not(.primary):not(.danger-button)):hover{
  border-color:var(--ss-border-strong)!important;
  background:#202b26!important;
}

html[data-theme="dark"] .ss-calendar-page .cal-head{background:var(--ss-surface)!important;border-color:var(--ss-border)!important}
html[data-theme="dark"] .ss-calendar-page .weekdays{background:var(--ss-surface-alt)!important;border-color:var(--ss-border)!important}
html[data-theme="dark"] .ss-calendar-page .day{background:var(--ss-surface)!important;border-color:var(--ss-border)!important}
html[data-theme="dark"] .ss-calendar-page .day.other{background:#121916!important;color:#69766f!important}
html[data-theme="dark"] .ss-calendar-page .day:hover{background:#1d2823!important}
html[data-theme="dark"] .ss-calendar-page .agenda-shift{border-color:#2b4159!important;background:#172332!important}
html[data-theme="dark"] .ss-calendar-page .agenda-shift.manual{border-color:#2b473b!important;background:#17251f!important}
html[data-theme="dark"] .ss-calendar-page .agenda-shift.internal{border-color:#51472b!important;background:#29261b!important}
html[data-theme="dark"] .ss-calendar-page .empty{background:var(--ss-surface-alt)!important}

html[data-theme="dark"] .ss-payroll-page .tabs{border-color:var(--ss-border)!important;background:var(--ss-surface)!important}
html[data-theme="dark"] .ss-payroll-page .stat,
html[data-theme="dark"] .ss-payroll-page .question{border-color:var(--ss-border)!important;background:var(--ss-surface-alt)!important}
html[data-theme="dark"] .ss-payroll-page .progress{background:#2a3530!important}
html[data-theme="dark"] .ss-payroll-page .item.planned-item{border-color:#315346!important;background:#17251f!important}
html[data-theme="dark"] .ss-payroll-page .warning,
html[data-theme="dark"] .ss-settings-page .warning{border-color:#66552e!important;background:#2c2618!important;color:#e5d2a1!important}
html[data-theme="dark"] .ss-payroll-page .check-result,
html[data-theme="dark"] .ss-settings-page .notice,
html[data-theme="dark"] .ss-connections-page .safety{border-color:#345648!important;background:#182a23!important;color:#b9ddcf!important}
html[data-theme="dark"] .ss-settings-page .error{border-color:#653f3b!important;background:#2b1d1b!important;color:#e6aaa4!important}
html[data-theme="dark"] .ss-settings-page .danger-card{border-color:#60413d!important}
html[data-theme="dark"] .ss-settings-page .danger-title{color:#e6aaa4!important}
html[data-theme="dark"] .ss-settings-page label{color:#d0d8d4!important}
html[data-theme="dark"] .ss-connections-page .provider-card:hover{background:#1d2823!important}

/* Standalone/public pages */
html[data-theme="dark"] .nav{border-color:var(--border)!important;background:rgba(17,23,20,.96)!important}
html[data-theme="dark"] .nav-links a{color:var(--muted)!important}
html[data-theme="dark"] .features{border-color:var(--border)!important;background:var(--surface)!important}
html[data-theme="dark"] .feature+.feature{border-color:var(--border)!important}
html[data-theme="dark"] .weekday{border-color:var(--border)!important;background:var(--surface-alt)!important}
html[data-theme="dark"] .day{border-color:var(--border)!important;background:var(--surface)!important}
html[data-theme="dark"] .button:not(.primary){border-color:var(--border)!important;background:var(--surface)!important;color:var(--text)!important}
html[data-theme="dark"] .legal{border-color:var(--border)!important;color:var(--muted)!important}
html[data-theme="dark"] .success{border-color:#345648!important;background:#182a23!important;color:#b9ddcf!important}
html[data-theme="dark"] .error{color:#e6aaa4!important}
html[data-theme="dark"] table :where(th,td){border-color:var(--border)!important}
html[data-theme="dark"] table th{background:var(--surface-alt)!important;color:var(--text)!important}

/* Legacy public pages that predate the shared design system */
html[data-theme="dark"] .top,
html[data-theme="dark"] body > header:not(.nav):not(.shiftsync-primary-nav){
  border-color:var(--ss-border)!important;
  background:var(--ss-bg)!important;
  color:var(--ss-text)!important;
}
html[data-theme="dark"] .top .brand,
html[data-theme="dark"] body > header .brand{color:var(--ss-brand)!important}
html[data-theme="dark"] .top a:not(.brand),
html[data-theme="dark"] body > header a:not(.brand){color:var(--ss-muted)!important}
html[data-theme="dark"] .main .toc,
html[data-theme="dark"] .main > .section,
html[data-theme="dark"] .main article.card,
html[data-theme="dark"] .main article section,
html[data-theme="dark"] .main .cta{
  border-color:var(--ss-border)!important;
  background:var(--ss-surface)!important;
  color:var(--ss-text)!important;
}
html[data-theme="dark"] .main article section{background:transparent!important}
html[data-theme="dark"] .main :where(p,li,.date){color:var(--ss-muted)!important}
html[data-theme="dark"] .main :where(.toc a,.back,.more){color:var(--ss-brand)!important}
html[data-theme="dark"] .main .note{
  border-color:#315346!important;
  background:#182a23!important;
  color:#b9ddcf!important;
}
html[data-theme="dark"] .main .warning{
  border-color:#66552e!important;
  background:#2c2618!important;
  color:#e5d2a1!important;
}
html[data-theme="dark"] .main ul{
  border-color:var(--ss-border)!important;
  background:var(--ss-surface-alt)!important;
}
html[data-theme="dark"] .main li{border-color:var(--ss-border)!important}
html[data-theme="dark"] .grid{border-color:var(--ss-border)!important}
html[data-theme="dark"] .grid .card{border-color:var(--ss-border)!important;background:var(--ss-surface)!important}
html[data-theme="dark"] .grid .card:hover{background:#1d2823!important}
html[data-theme="dark"] .footer,
html[data-theme="dark"] body > footer{border-color:var(--ss-border)!important;color:var(--ss-muted)!important}
html[data-theme="dark"] body > footer a{color:var(--ss-muted)!important}

html[lang="en"] .ss-calendar-page .top .brand h1::after{content:"Calendar"}
html[lang="en"] .ss-calendar-page .action[href="/payroll"]::after{content:"Pay"}
html[lang="en"] .ss-calendar-page .action[href="/calendar.ics"]::after{content:"Export calendar"}

@media(max-width:820px){
  .ss-pref-controls{top:10px;right:10px}
  body.ss-has-primary-nav .ss-pref-controls{top:10px}
  html[data-theme="dark"] .shiftsync-primary-nav{background:rgba(19,27,24,.98)!important}
}