/* Svetofor design system — Cloud Dancer (minimal, eco, mobile-first)
   - light airy backgrounds
   - natural greens for “wellness” feel
   - one bright accent (amber) for actions
   - liquid-glass buttons + small elements
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  color-scheme: light;

  /* Cloud Dancer base */
  --svetofor-bg-0: #F6FAF6;
  --svetofor-bg-1: #EEF6EF;
  --svetofor-bg-2: #E6F0E8;

  --svetofor-surface-0: rgba(255,255,255,0.72);
  --svetofor-surface-1: rgba(255,255,255,0.82);
  --svetofor-surface-2: rgba(255,255,255,0.92);

  --svetofor-border: rgba(15,23,42,0.10);
  --svetofor-border-strong: rgba(15,23,42,0.14);

  --svetofor-text: #0F172A;
  --svetofor-text-dim: #334155;
  --svetofor-text-faint: #64748B;

  /* Eco accents */
  --svetofor-green: #2F7A4D;
  --svetofor-green-soft: rgba(47,122,77,0.14);

  /* One bright accent for “important” UI (buttons / focus / highlights) */
  --svetofor-accent: #F59E0B; /* amber */
  --svetofor-accent-soft: rgba(245,158,11,0.18);
  --svetofor-accent-soft-2: rgba(245,158,11,0.28);

  --svetofor-danger: #EF4444;

  --svetofor-radius-xl: 18px;
  --svetofor-radius-lg: 14px;
  --svetofor-radius-md: 12px;

  --svetofor-shadow-soft: 0 18px 50px rgba(15,23,42,.10);
  --svetofor-shadow-card: 0 10px 26px rgba(15,23,42,.10);
  --svetofor-shadow-glass:
      inset 0 1px 0 rgba(255,255,255,.72),
      0 10px 24px rgba(15,23,42,.12);

  --svetofor-focus: 0 0 0 3px rgba(245,158,11,.22), 0 0 0 1px rgba(245,158,11,.28);

  --svetofor-maxw: 1600px;

  /* Derived tokens (keep light colors EXACT) */
  --svetofor-header-bg: rgba(246,250,246,0.72);
  --svetofor-input-bg: rgba(255,255,255,0.78);
  --svetofor-input-bg-focus: rgba(255,255,255,0.90);
  --svetofor-input-border: rgba(15,23,42,0.10);
  --svetofor-option-bg: #fff;
  --svetofor-table-bg: rgba(255,255,255,0.92);
  --svetofor-table-th-bg: rgba(47,122,77,0.06);
  --svetofor-hr: rgba(15,23,42,0.08);
  --svetofor-modal-bg: rgba(255,255,255,0.84);
  --svetofor-backdrop: rgba(15,23,42,0.42);
  --svetofor-ai-overlay-bg: rgba(255,255,255,0.55);
  --svetofor-date-scheme: light;

  --svetofor-table-th-text: rgba(15,23,42,0.58);
  --svetofor-table-row-hover: rgba(15,23,42,0.02);
  --svetofor-table-row-border: rgba(15,23,42,0.06);
  --svetofor-badge-text: rgba(15,23,42,0.78);
  --svetofor-btn-disabled-bg: rgba(15,23,42,0.04);
  --svetofor-btn-disabled-border: rgba(15,23,42,0.10);

  /* AdminMonth detail table (keep exact light colors) */
  --svetofor-detail-bg: #fff;
  --svetofor-detail-border: #ddd;
  --svetofor-detail-border-soft: #eee;

  /* Checkbox */
  --svetofor-checkbox-bg: rgba(255,255,255,0.70);
  --svetofor-checkbox-border: rgba(15,23,42,0.26);
  --svetofor-checkbox-dot: rgba(245,158,11,0.95);
}

/* Global base */
*{ box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--svetofor-text);
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(47,122,77,.14), transparent 60%),
    radial-gradient(760px 520px at 84% 10%, rgba(245,158,11,.10), transparent 58%),
    linear-gradient(180deg, var(--svetofor-bg-0), var(--svetofor-bg-1) 46%, var(--svetofor-bg-0));
  background-attachment: fixed; /* статично при скролле */
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@keyframes pageFadeIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

.svetofor-container{
  animation: pageFadeIn 320ms ease;
}

::selection{ background: rgba(245,158,11,0.22); }

/* Links */
a{
  color: inherit;
  text-decoration: none;
}
a:hover{ color: rgba(15,23,42,0.90); }

/* Headings outside cards */
h1, h2, h3, h4{
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  letter-spacing: 0.2px;
}
h2{
  margin: 6px 0 12px;
  font-size: 22px;
  line-height: 1.12;
}

/* Header */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 16px;
  border-bottom: 1px solid var(--svetofor-border);

  /* light glass */
  background: var(--svetofor-header-bg);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
}

.svetofor-headerInner{
  max-width: var(--svetofor-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.svetofor-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.svetofor-logo{
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  border-radius: 6px;
}

.svetofor-navDesktop{
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 8px 10px;
  align-items: center;
  justify-items: stretch;
  width: 100%;
  min-width: 0;
}

.svetofor-navDesktop a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

.svetofor-headerRight{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.svetofor-headerActions{
  display: none;
  align-items: center;
  gap: 10px;
}

.svetofor-burger{
  min-height: 40px;
  width: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.svetofor-iconBtn{
  min-height: 40px;
  width: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.svetofor-pill{
  min-height: 36px;
  padding: 8px 12px;
}

header > div{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

header strong{
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1;
  white-space: nowrap;
}

nav{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

nav a{
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--svetofor-text-dim);
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

nav a:hover{
  color: var(--svetofor-text);
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.08);
  transform: translateY(-1px);
}

.svetofor-navLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.svetofor-navIcon{
  display: inline-flex;
  width: 16px;
  height: 16px;
  opacity: 0.86;
  flex: 0 0 16px;
}

.svetofor-navIcon svg{
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Layout */
.svetofor-container{
  max-width: var(--svetofor-maxw);
  margin: 0 auto;
  padding: 18px 16px 28px;
}

.svetofor-grid{
  display: grid;
  gap: 14px;
}

/* 2-column split that collapses to 1 column on phones */
.svetofor-grid2{
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Cards */
.svetofor-card{
  border: 1px solid var(--svetofor-border);
  border-radius: var(--svetofor-radius-xl);
  padding: 18px;
  background: var(--svetofor-surface-1);
  box-shadow: var(--svetofor-shadow-card);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  margin-top: 12px;
}

/* Отступы между карточками (страница “Операционный день” и подобные) */
.svetofor-card + .svetofor-card{}

.svetofor-card h1,
.svetofor-card h2,
.svetofor-card h3,
.svetofor-card h4{
  margin: 0 0 12px 0;
}

.svetofor-card h3{ font-size: 18px; }
.svetofor-card h4{ font-size: 15px; }

/* Rows */
.svetofor-row{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Labels breathe + align */
label{
  color: var(--svetofor-text-dim);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Muted text */
.svetofor-muted,
small.svetofor-muted{
  color: var(--svetofor-text-faint);
}

/* Inputs */
input:not([type="checkbox"]):not([type="radio"]), select, textarea{
  width: auto;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--svetofor-input-border);
  background: var(--svetofor-input-bg);
  color: var(--svetofor-text);
  outline: none;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

textarea{ min-height: 96px; resize: vertical; }

input::placeholder, textarea::placeholder{
  color: rgba(100,116,139,0.80);
}

input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus{
  border-color: rgba(148, 163, 184, .34);
  box-shadow: none;
  background: rgba(148, 163, 184, .16);
}

input:not([type="checkbox"]):not([type="radio"]),
textarea{
  background: rgba(148, 163, 184, .16) !important;
  border-color: rgba(148, 163, 184, .34) !important;
  box-shadow: none !important;
}

input:not([type="checkbox"]):not([type="radio"]){
  height: 44px;
}

/* Native dropdown / options visibility (fix white-on-white) */
select, option{
  color: var(--svetofor-text);
}
option{ background: var(--svetofor-option-bg); }

/* Make date/month inputs feel consistent (popup itself is native) */
input[type="date"],
input[type="month"]{
  color-scheme: var(--svetofor-date-scheme);
}

/* Liquid Glass buttons (thin top highlight, no “fat” rim) */
button{
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,0.24);
  color: var(--svetofor-text);
  cursor: pointer;

  /* glass */
  background: var(--svetofor-accent-soft);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);

  box-shadow: var(--svetofor-shadow-glass);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  position: relative;
  overflow: hidden;
}

/* Subtle "sheen" animation on hover (does not change base colors) */
button::after{
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.26) 50%, transparent 100%);
  transform: translateX(-130%);
  transition: transform .55s ease;
  pointer-events: none;
  opacity: 0;
}
button:hover::after{ transform: translateX(130%); opacity: 1; }
button:disabled::after{ display: none; }

button:hover{
  transform: translateY(-1px);
  border-color: rgba(245,158,11,0.38);
  background: var(--svetofor-accent-soft-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 14px 30px rgba(15,23,42,.14);
}

button:active{
  transform: translateY(0px) scale(0.99);
}

button:focus-visible{
  outline: none;
  box-shadow: 0 14px 30px rgba(15,23,42,.14), var(--svetofor-focus);
}

button:disabled{
  cursor: not-allowed;
  opacity: 0.55;
  border-color: var(--svetofor-btn-disabled-border);
  background: var(--svetofor-btn-disabled-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}



/* Button variants */
button.btn-save{
  border-color: rgba(47,122,77,0.38);
  background: rgba(47,122,77,0.16);
}
button.btn-save:hover{
  border-color: rgba(47,122,77,0.55);
  background: rgba(47,122,77,0.26);
}

button.btn-copy{
  border-color: rgba(245,158,11,0.38);
  background: var(--svetofor-accent-soft);
}
button.btn-copy:hover{
  border-color: rgba(245,158,11,0.55);
  background: var(--svetofor-accent-soft-2);
}

button.btn-delete{
  border-color: rgba(239,68,68,0.45);
  background: rgba(239,68,68,0.14);
}
button.btn-delete:hover{
  border-color: rgba(239,68,68,0.62);
  background: rgba(239,68,68,0.22);
}

button.btn-secondary{
  border-color: rgba(148,163,184,0.45);
  background: rgba(148,163,184,0.16);
}
button.btn-secondary:hover{
  border-color: rgba(148,163,184,0.62);
  background: rgba(148,163,184,0.24);
}

button.btn-small{
  min-height: 34px;
  padding: 7px 12px;
}

/* Badges / chips */
.svetofor-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47,122,77,0.18);

  /* glass */
  background: var(--svetofor-green-soft);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);

  color: var(--svetofor-badge-text);
  font-size: 12px;
  line-height: 1.6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}

/* Tables */
.svetofor-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--svetofor-radius-lg);
  border: 1px solid var(--svetofor-border);
  background: var(--svetofor-table-bg);
}

.svetofor-table th, .svetofor-table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--svetofor-table-row-border);
  vertical-align: top;
}

.svetofor-table th{
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--svetofor-table-th-text);
  background: var(--svetofor-table-th-bg);
}

.svetofor-table tr:hover td{
  background: var(--svetofor-table-row-hover);
}

.svetofor-empRowFired td{
  background: rgba(239, 68, 68, 0.10);
}
.svetofor-empRowFired td:first-child{
  box-shadow: inset 3px 0 0 rgba(239, 68, 68, 0.55);
}

.svetofor-table tr:last-child td{
  border-bottom: none;
}

/* Make table inputs feel aligned */
.svetofor-table input,
.svetofor-table select{
  width: auto;
  min-width: 20px;
}


/* Modal */
.svetofor-modalBackdrop{
  position: fixed;
  inset: 0;
  background: var(--svetofor-backdrop);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
  overflow: auto;
  overscroll-behavior: contain;
}

.svetofor-modalCard{
  width: 100%;
  max-width: 760px;
  border-radius: calc(var(--svetofor-radius-xl) + 2px);
  padding: 16px;
  border: 1px solid var(--svetofor-border);
  background: var(--svetofor-modal-bg);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: var(--svetofor-shadow-soft);
}

/* Scrollable boxed area used inside modals (keep light border color as-is) */
.svetofor-scrollBox{
  display: grid;
  gap: 8px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* AdminMonth: sticky detail table (per-day grid) */
.svetofor-detailWrap{
  border: 1px solid var(--svetofor-detail-border-soft);
  border-radius: 14px;
}
.svetofor-detailTable{ width: 100%; }
.svetofor-detailHead{
  border: 1px solid var(--svetofor-detail-border);
  background: var(--svetofor-detail-bg);
  white-space: nowrap;
}
.svetofor-detailSticky{
  border: 1px solid var(--svetofor-detail-border);
  background: var(--svetofor-detail-bg);
  z-index: 2;
}
.svetofor-detailCell{
  border: 1px solid var(--svetofor-detail-border-soft);
}

hr{
  border: none;
  border-top: 1px solid var(--svetofor-hr);
  margin: 14px 0;
}

/* Table wrapper (prevents layout break on wide tables) */
.svetofor-tableWrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* When wrapped, allow the table to grow wider than the container so horizontal scroll works
   on desktop too (not only on small screens). */
.svetofor-tableWrap .svetofor-table{
  width: max-content;
  min-width: 100%;
}

.svetofor-tableWrap .svetofor-table th,
.svetofor-tableWrap .svetofor-table td{
  white-space: nowrap;
}

.svetofor-empActions{
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.svetofor-empActions button{
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12.5px;
  width: 100%;
}

/* Numeric inputs (fix overflow from inline widths) */
.svetofor-numInput{
  width: 100% !important;
  max-width: 9rem;
}
.svetofor-numInput.is-narrow{ max-width: 6.5rem; }

/* Custom round checkboxes */
input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid var(--svetofor-checkbox-border);
  background: var(--svetofor-checkbox-bg);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
input[type="checkbox"]::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--svetofor-checkbox-dot);
  transform: scale(0);
  transition: transform .14s ease;
}
input[type="checkbox"]:checked::before{ transform: scale(1); }
input[type="checkbox"]:active{ transform: scale(0.96); }
input[type="checkbox"]:focus-visible{ outline: none; box-shadow: var(--svetofor-focus); }
input[type="checkbox"][disabled]{ opacity: 0.55; cursor: not-allowed; }

/* Mail list checkbox sizing lock (prevents oval distortion) */
.mail-rowCheck,
#mailSelectAll{
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: inline-grid;
  flex: 0 0 18px;
  vertical-align: middle;
}

.mail-syncAllWrap input[type="checkbox"]{
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: inline-grid;
  flex: 0 0 18px;
  vertical-align: middle;
}

/* Modal + menu animations */
@keyframes svFadeIn { from{ opacity:0 } to{ opacity:1 } }
@keyframes svPopIn { from{ opacity:0; transform: translateY(10px) scale(.985);} to{ opacity:1; transform: translateY(0) scale(1);} }

.svetofor-modalBackdrop{ animation: svFadeIn .18s ease; }
.svetofor-menuBackdrop{
  background: rgba(15,23,42,0.50);
}

.svetofor-modalCard{ animation: svPopIn .22s cubic-bezier(.2,.8,.2,1); }

/* Mobile menu panel */
.svetofor-mobileMenu{
  overflow: auto;
  min-height: 0;
  max-height: calc(100dvh - 24px);
  width: 100%;
  max-width: 520px;
  border-radius: calc(var(--svetofor-radius-xl) + 2px);
  border: 1px solid var(--svetofor-border);
  background: var(--svetofor-modal-bg);
  box-shadow: var(--svetofor-shadow-soft);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  overflow: hidden;
  animation: svPopIn .22s cubic-bezier(.2,.8,.2,1);
}
.svetofor-mobileMenuHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--svetofor-border);
}
.svetofor-mobileMenuBody{ padding: 10px 12px 12px; display: grid; gap: 10px; }
.svetofor-mobileLink{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(15,23,42,0.03);
  color: var(--svetofor-text);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.svetofor-mobileLink:hover{ transform: translateY(-1px); border-color: rgba(15,23,42,0.12); }
.svetofor-mobileMenuRow{ display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 2px 4px; }
.svetofor-mobileMenuFooter{ margin-top: 4px; }

/* Small screens */
@media (max-width: 720px){
  header{ padding: 12px 12px; }

  .svetofor-headerInner{ display: flex; justify-content: space-between; }
  .svetofor-headerRight{ display: none; }

  /* Hide desktop nav, show burger */
  .svetofor-navDesktop{ display: none; }
  .svetofor-headerActions{ display: inline-flex; }

  nav{ justify-content: flex-start; gap: 8px; }
  nav a{ padding: 7px 9px; font-size: 13px; }

  .svetofor-container{ padding: 14px 12px 22px; }
  .svetofor-card{ padding: 14px; border-radius: 16px; }

  /* Forms become comfortably stacked on phones */
  .svetofor-row{ flex-direction: column; align-items: stretch; }
  .svetofor-row > *{ width: 100%; }
  label{ justify-content: space-between; }

  /* Tables become scrollable (like AdminMonth) */
  .svetofor-tableWrap{
    border-radius: var(--svetofor-radius-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .svetofor-tableWrap .svetofor-table{
    width: max-content;
    min-width: 680px;
  }
  .svetofor-tableWrap .svetofor-table th,
  .svetofor-tableWrap .svetofor-table td{ white-space: nowrap; }

  .svetofor-numInput{ max-width: 7.5rem; }

  /* Modals on phones: start below sticky header and stay scrollable */
  .svetofor-modalBackdrop{
    align-items: flex-start;
    padding-top: 72px;
  }
  .svetofor-modalCard{
    max-height: calc(100dvh - 88px);
    overflow: auto;
  }

  /* Mobile menu: keep inside viewport */
  .svetofor-mobileMenu{
  overflow: auto;
  min-height: 0;
  max-height: calc(100dvh - 24px);
    margin-top: 0;
    max-height: calc(100dvh - 88px);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .svetofor-grid2{ grid-template-columns: 1fr; }
}


@media (max-height: 520px) and (orientation: landscape){
  header{ padding: 10px 12px; }
  .svetofor-headerInner{ display: flex; justify-content: space-between; }
  .svetofor-headerRight{ display: none; }
  .svetofor-navDesktop{ display: none; }
  .svetofor-headerActions{ display: inline-flex; }
  .svetofor-container{ padding: 12px 12px 18px; }
  .svetofor-modalBackdrop{ align-items: center; padding: 12px; overflow: auto; }
  .svetofor-mobileMenu{
  overflow: auto;
  min-height: 0; max-height: calc(100dvh - 24px); }
}

/* Dark theme (keeps light colors unchanged) */
html[data-theme="dark"]{
  color-scheme: dark;

  /* Light graphite base for dark theme background */
  --svetofor-bg-0: #0e0e0e;
  --svetofor-bg-1: #0e0e0e;
  --svetofor-bg-2: #252729;

  --svetofor-surface-0: rgba(15,23,42,0.56);
  --svetofor-surface-1: rgba(15,23,42,0.72);
  --svetofor-surface-2: rgba(15,23,42,0.84);

  --svetofor-border: rgba(226,232,240,0.12);
  --svetofor-border-strong: rgba(226,232,240,0.16);

  --svetofor-text: #E2E8F0;
  --svetofor-text-dim: #CBD5E1;
  --svetofor-text-faint: #94A3B8;

  /* Graphite palette for dark theme */
  --svetofor-graphite: #A7B0BA;
  --svetofor-graphite-bright: #E6E9ED;
  --svetofor-graphite-soft: rgba(167,176,186,0.24);
  --svetofor-graphite-soft-2: rgba(167,176,186,0.34);

  --svetofor-green: var(--svetofor-graphite);
  --svetofor-green-soft: var(--svetofor-graphite-soft);

  /* Bright accents like light theme, but richer for dark */
  --svetofor-accent: #FBBF24;
  --svetofor-accent-soft: rgba(251,191,36,0.22);
  --svetofor-accent-soft-2: rgba(251,191,36,0.34);

  /* Low-cost surfaces for dark theme (no blur/glass) */
  --svetofor-glass-bg: rgb(10 10 10 / 78%);
  --svetofor-glass-border: rgba(226,232,240,0.14);
  --svetofor-glass-shadow: 0 2px 10px rgba(0,0,0,.28);
  --svetofor-glass-filter: none;

  /* Graphite focus ring */
  --svetofor-focus: 0 0 0 3px rgba(251,191,36,.26), 0 0 0 1px rgba(251,191,36,.34);

  --svetofor-shadow-soft: 0 6px 16px rgba(0,0,0,.28);
  --svetofor-shadow-card: 0 4px 12px rgba(0,0,0,.26);
  --svetofor-shadow-glass:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 10px 24px rgba(0,0,0,.34);

  --svetofor-header-bg: rgb(0 0 0 / 45%);
  --svetofor-input-bg: rgba(2,6,23,0.42);
  --svetofor-input-bg-focus: rgba(2,6,23,0.56);
  --svetofor-input-border: rgba(226,232,240,0.14);
  --svetofor-option-bg: #0e0e0e;
  --svetofor-table-bg: rgba(2,6,23,0.40);
  --svetofor-table-th-bg: rgba(167,176,186,0.18);
  --svetofor-hr: rgba(226,232,240,0.12);
  --svetofor-modal-bg: var(--svetofor-glass-bg);
  --svetofor-backdrop: rgb(0 0 0 / 45%);
  --svetofor-ai-overlay-bg: rgba(0,0,0,0.38);
  --svetofor-date-scheme: dark;

  --svetofor-table-th-text: rgba(226,232,240,0.72);
  --svetofor-table-row-hover: rgba(226,232,240,0.05);
  --svetofor-table-row-border: rgba(226,232,240,0.08);
  --svetofor-badge-text: rgba(226,232,240,0.82);
  --svetofor-btn-disabled-bg: rgba(226,232,240,0.06);
  --svetofor-btn-disabled-border: rgba(226,232,240,0.12);

  --svetofor-detail-bg: var(--svetofor-option-bg);
  --svetofor-detail-border: rgba(226,232,240,0.16);
  --svetofor-detail-border-soft: rgba(226,232,240,0.10);

  --svetofor-checkbox-bg: rgba(2,6,23,0.35);
  --svetofor-checkbox-border: rgba(226,232,240,0.26);
  --svetofor-checkbox-dot: rgba(251,191,36,0.95);
}

html[data-theme="dark"] body{
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(167,176,186,.22), transparent 60%),
    radial-gradient(760px 520px at 84% 10%, rgba(251,191,36,.10), transparent 58%),
    linear-gradient(180deg, var(--svetofor-bg-0), var(--svetofor-bg-1) 46%, var(--svetofor-bg-0));
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

html[data-theme="dark"] a:hover{ color: rgba(226,232,240,0.92); }
html[data-theme="dark"] nav a:hover{ background: rgba(226,232,240,0.06); border-color: rgba(226,232,240,0.10); }

/* Strong liquid glass for dark theme surfaces */
html[data-theme="dark"] .svetofor-card,
html[data-theme="dark"] .svetofor-modalCard,
html[data-theme="dark"] .svetofor-mobileMenu,
html[data-theme="dark"] .svetofor-scrollBox,
html[data-theme="dark"] .svetofor-table,
html[data-theme="dark"] .svetofor-mobileLink,
html[data-theme="dark"] .svetofor-badge,
html[data-theme="dark"] .svetofor-detailWrap,
html[data-theme="dark"] .svetofor-detailHead,
html[data-theme="dark"] .svetofor-detailSticky,
html[data-theme="dark"] .svetofor-detailCell,
html[data-theme="dark"] .svetofor-table th,
html[data-theme="dark"] .svetofor-table td{
  background: var(--svetofor-glass-bg);
  border-color: var(--svetofor-glass-border);
  box-shadow: var(--svetofor-shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme="dark"] button{
  border-color: rgba(251,191,36,0.40);
  background: var(--svetofor-accent-soft);
  box-shadow: var(--svetofor-shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="dark"] button:hover{
  background: var(--svetofor-accent-soft-2);
  box-shadow: var(--svetofor-shadow-soft);
}

html[data-theme="dark"] .svetofor-mobileLink{
  box-shadow: none;
}

html[data-theme="dark"] .svetofor-menuBackdrop{
  background: #000000bf;
}

html[data-theme="dark"] .svetofor-empRowFired td{
  background: rgba(239, 68, 68, 0.22);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background: var(--svetofor-glass-bg);
  border-color: var(--svetofor-glass-border);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme="dark"] .svetofor-scrollBox{
  border-color: var(--svetofor-border);
  background: rgba(2,6,23,0.12);
}

html[data-theme="dark"] button::after{
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.16) 50%, transparent 100%);
}

html[data-theme="dark"] button::after{
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.14) 50%, transparent 100%);
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}


/* --- Timesheet coloring (weekends + overrides) --- */
.svetofor-dayHead{display:flex;flex-direction:column;align-items:center;line-height:1.05;}
.svetofor-dayHeadDow{font-size:11px;opacity:.85;}

.svetofor-detailHead.is-weekend{background: rgba(239, 68, 68, 0.12); color: var(--svetofor-danger);}
.svetofor-detailCell.is-weekend{box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35);}

.svetofor-detailCell.ovr-OFF{background: rgba(148, 163, 184, 0.28);}
.svetofor-detailCell.ovr-PAID_OFF{background: rgba(59, 130, 246, 0.18);}
.svetofor-detailCell.ovr-VACATION{background: rgba(34, 197, 94, 0.18);}
.svetofor-detailCell.ovr-SICK{background: rgba(245, 158, 11, 0.22);}
.svetofor-detailCell.ovr-PAID_SICK{background: rgba(20, 184, 166, 0.20);}
.svetofor-detailCell.ovr-TRIP{background: rgba(168, 85, 247, 0.18);}
.svetofor-detailCell.ovr-FIRED{background: rgba(100, 116, 139, 0.30);}
.svetofor-detailCell.ovr-FIRED_OFF{background: rgba(239, 68, 68, 0.22);}

.ovr-pill{min-height:auto;padding:2px 8px;border-radius:999px;border:1px solid rgba(15, 23, 42, 0.12);font-size:12px;line-height:1.3;display:inline-block;}
.ovr-pill.ovr-OFF{background: rgba(148, 163, 184, 0.28);}
.ovr-pill.ovr-PAID_OFF{background: rgba(59, 130, 246, 0.18);}
.ovr-pill.ovr-VACATION{background: rgba(34, 197, 94, 0.18);}
.ovr-pill.ovr-SICK{background: rgba(245, 158, 11, 0.22);}
.ovr-pill.ovr-PAID_SICK{background: rgba(20, 184, 166, 0.20);}
.ovr-pill.ovr-TRIP{background: rgba(168, 85, 247, 0.18);}
.ovr-pill.ovr-FIRED{background: rgba(100, 116, 139, 0.30);}
.ovr-pill.ovr-FIRED_OFF{background: rgba(239, 68, 68, 0.22);}

/* Dark theme: replace blue paid-off with graphite */
html[data-theme="dark"] .svetofor-detailCell.ovr-PAID_OFF{
  background: var(--svetofor-graphite-soft);
}
html[data-theme="dark"] .ovr-pill.ovr-PAID_OFF{
  background: var(--svetofor-graphite-soft);
  border-color: rgba(226,232,240,0.16);
}

/* Dark theme: bright button variants (juicier, like light theme) */
html[data-theme="dark"] button.btn-save{
  border-color: rgba(34,197,94,0.55);
  background: rgba(34,197,94,0.26);
}
html[data-theme="dark"] button.btn-save:hover{
  border-color: rgba(34,197,94,0.72);
  background: rgba(34,197,94,0.38);
}
html[data-theme="dark"] button.btn-copy{
  border-color: rgba(251,191,36,0.60);
  background: rgba(251,191,36,0.28);
}
html[data-theme="dark"] button.btn-copy:hover{
  border-color: rgba(251,191,36,0.78);
  background: rgba(251,191,36,0.40);
}
html[data-theme="dark"] button.btn-delete{
  border-color: rgba(239,68,68,0.62);
  background: rgba(239,68,68,0.28);
}
html[data-theme="dark"] button.btn-delete:hover{
  border-color: rgba(239,68,68,0.78);
  background: rgba(239,68,68,0.40);
}
html[data-theme="dark"] button.btn-secondary{
  border-color: rgba(167,176,186,0.55);
  background: rgba(167,176,186,0.24);
}
html[data-theme="dark"] button.btn-secondary:hover{
  border-color: rgba(167,176,186,0.72);
  background: rgba(167,176,186,0.36);
}

/* Dark theme: neutralize colorful status accents to graphite */
html[data-theme="dark"] .svetofor-detailHead.is-weekend{
  background: var(--svetofor-graphite-soft);
  color: var(--svetofor-text);
}
html[data-theme="dark"] .svetofor-detailCell.is-weekend{
  box-shadow: inset 0 0 0 1px rgba(226,232,240,0.18);
}
html[data-theme="dark"] .svetofor-detailCell.ovr-OFF,
html[data-theme="dark"] .svetofor-detailCell.ovr-VACATION,
html[data-theme="dark"] .svetofor-detailCell.ovr-SICK,
html[data-theme="dark"] .svetofor-detailCell.ovr-PAID_SICK,
html[data-theme="dark"] .svetofor-detailCell.ovr-TRIP,
html[data-theme="dark"] .svetofor-detailCell.ovr-FIRED,
html[data-theme="dark"] .svetofor-detailCell.ovr-FIRED_OFF{
  background: var(--svetofor-graphite-soft-2);
}
html[data-theme="dark"] .ovr-pill.ovr-OFF,
html[data-theme="dark"] .ovr-pill.ovr-VACATION,
html[data-theme="dark"] .ovr-pill.ovr-SICK,
html[data-theme="dark"] .ovr-pill.ovr-PAID_SICK,
html[data-theme="dark"] .ovr-pill.ovr-TRIP,
html[data-theme="dark"] .ovr-pill.ovr-FIRED,
html[data-theme="dark"] .ovr-pill.ovr-FIRED_OFF{
  background: var(--svetofor-graphite-soft);
  border-color: rgba(226,232,240,0.16);
}


/* Employee calendar */
.svetofor-calendar{
  margin-top: 12px;
  display: grid;
  gap: 8px;
  overflow-x: auto;
}

.svetofor-calendarHead,
.svetofor-calendarGrid{
  min-width: 720px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.svetofor-calendarCell{
  text-align: center;
  padding: 6px 0;
  font-weight: 600;
  font-size: 12px;
  color: var(--svetofor-table-th-text);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.svetofor-dayEmpty{
  min-height: 96px;
  border: 1px dashed var(--svetofor-table-row-border);
  border-radius: var(--svetofor-radius-md);
  background: rgba(255,255,255,0.22);
}

.svetofor-dayCard{
  min-height: 96px;
  padding: 10px 10px 12px;
  border-radius: var(--svetofor-radius-md);
  border: 1px solid var(--svetofor-table-row-border);
  background: var(--svetofor-table-bg);
  box-shadow: var(--svetofor-shadow-glass);
  display: grid;
  gap: 6px;
}

.svetofor-dayTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  color: var(--svetofor-text-faint);
}

.svetofor-dayDate{
  font-weight: 700;
  color: var(--svetofor-text);
}

.svetofor-dayStatus{
  text-align: right;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.svetofor-dayMeta{
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--svetofor-text-dim);
}

@media (max-width: 900px){
  .svetofor-calendarHead,
  .svetofor-calendarGrid{ min-width: 640px; }
}

@media (max-width: 700px){
  .svetofor-calendarHead,
  .svetofor-calendarGrid{ min-width: 560px; }
}


.svetofor-dayCard.is-paid{
  border-color: rgba(47,122,77,0.55);
  background: linear-gradient(180deg, rgba(47,122,77,0.10), rgba(47,122,77,0.04));
}

html[data-theme="dark"] .svetofor-dayCard.is-paid{
  border-color: rgba(34,197,94,0.55);
  background: linear-gradient(180deg, rgba(34,197,94,0.18), rgba(34,197,94,0.08));
}


/* AI chat */
.svetofor-chat{
  margin-top: 10px;
  padding: 10px;
  border-radius: var(--svetofor-radius-md);
  border: 1px solid var(--svetofor-table-row-border);
  background: var(--svetofor-glass-bg);
  display: grid;
  gap: 8px;
  min-height: 140px;
}

.svetofor-aiOverlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--svetofor-ai-overlay-bg);
  backdrop-filter: blur(1px);
  z-index: 2;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--svetofor-text);
  text-transform: uppercase;
}

.svetofor-chatMsg{
  padding: 10px 12px;
  border-radius: 14px;
  max-width: 80%;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: var(--svetofor-shadow-glass);
}

.svetofor-chatMsg.is-user{
  justify-self: end;
  background: rgba(245,158,11,0.18);
  border: 1px solid rgba(245,158,11,0.3);
}

.svetofor-chatMsg.is-assistant{
  justify-self: start;
  background: rgba(47,122,77,0.10);
  border: 1px solid rgba(47,122,77,0.25);
}

html[data-theme="dark"] .svetofor-chatMsg.is-user{
  background: rgba(245,158,11,0.22);
  border-color: rgba(245,158,11,0.35);
}

html[data-theme="dark"] .svetofor-chatMsg.is-assistant{
  background: rgba(34,197,94,0.16);
  border-color: rgba(34,197,94,0.35);
}

.svetofor-newsImage{
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 6px 0 8px;
  display: block;
  transition: max-height 260ms ease;
}

.svetofor-newsGrid{
  display: grid;
  gap: 12px;
}

@media (min-width: 900px){
  .svetofor-newsGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.svetofor-newsCard{
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  transition: max-height 260ms ease;
}

.svetofor-newsBody{
  flex: 1 1 auto;
  overflow: hidden;
  transition: max-height 260ms ease, opacity 200ms ease;
}

.svetofor-newsFooter{
  margin-top: 6px;
}

@media (min-width: 900px){
  .svetofor-newsCard.is-collapsed{
    max-height: 520px;
  }
  .svetofor-newsCard.is-collapsed .svetofor-newsImage{
    max-height: 160px;
    height: auto;
    object-fit: cover;
  }
  .svetofor-newsCard.is-collapsed .svetofor-newsBody{
    max-height: 140px;
    opacity: 0.92;
  }
  .svetofor-newsCard.is-expanded{
    max-height: 2000px;
  }
  .svetofor-newsCard.is-expanded .svetofor-newsImage{
    max-height: 800px;
  }
  .svetofor-newsCard.is-expanded .svetofor-newsBody{
    max-height: 1400px;
    opacity: 1;
  }
}


.svetofor-knowledgeName{
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px){
  .svetofor-knowledgeName{
    max-width: 220px;
  }
}

@media (max-width: 900px){
  .svetofor-knowledgeName{
    max-width: 220px;
  }
}


.tg-report-actions{
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 720px){
  .tg-report-actions{
    width: 100%;
    justify-content: flex-start;
  }
  .tg-report-actions > button{
    flex: 1 1 110px;
  }
}


/* --- Mailbox Rules additions --- */
.svetofor-logo.is-letter{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--svetofor-accent), #16a34a);
  color: #fff;
  font-weight: 700;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
}
.svetofor-logo.logo-dark{ display: none; }
html[data-theme="dark"] .svetofor-logo.logo-light{ display: none; }
html[data-theme="dark"] .svetofor-logo.logo-dark{ display: inline-block; }

.svetofor-pageHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.svetofor-btnLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,0.24);
  color: var(--svetofor-text);
  text-decoration: none;
  background: var(--svetofor-accent-soft);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: var(--svetofor-shadow-glass);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.svetofor-btnLink:hover{
  transform: translateY(-1px);
  border-color: rgba(245,158,11,0.38);
  background: var(--svetofor-accent-soft-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 14px 30px rgba(15,23,42,.14);
}
.svetofor-btnLink.btn-secondary{
  border-color: rgba(148,163,184,0.45);
  background: rgba(148,163,184,0.16);
}
.svetofor-btnLink.btn-secondary:hover{
  border-color: rgba(148,163,184,0.62);
  background: rgba(148,163,184,0.24);
}

.svetofor-cardLink{
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svetofor-cardLink:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(15,23,42,.16);
}

.svetofor-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.svetofor-inline{ display: inline; }

.svetofor-link{
  background: none;
  border: none;
  padding: 0;
  color: var(--svetofor-text-dim);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
}
.svetofor-link:hover{ color: var(--svetofor-text); text-decoration: underline; }
.svetofor-link.danger{ color: var(--svetofor-danger); }
button.svetofor-link{
  min-height: auto;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
button.svetofor-link::after{ display: none; }

.svetofor-actionBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,0.28);
  background: var(--svetofor-accent-soft);
  color: var(--svetofor-text);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  box-shadow: var(--svetofor-shadow-glass);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.svetofor-actionBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(245,158,11,0.42);
  background: var(--svetofor-accent-soft-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 12px 24px rgba(15,23,42,.14);
}
.svetofor-actionBtn.btn-secondary{
  border-color: rgba(148,163,184,0.45);
  background: rgba(148,163,184,0.16);
}
.svetofor-actionBtn.btn-secondary:hover{
  border-color: rgba(148,163,184,0.62);
  background: rgba(148,163,184,0.24);
}
.svetofor-actionBtn.danger{
  border-color: rgba(239,68,68,0.45);
  background: rgba(239,68,68,0.14);
  color: var(--svetofor-text);
}
.svetofor-actionBtn.danger:hover{
  border-color: rgba(239,68,68,0.62);
  background: rgba(239,68,68,0.22);
}
button.svetofor-actionBtn::after{ display: none; }

html[data-theme="dark"] .svetofor-actionBtn{
  border-color: rgba(251,191,36,0.40);
  background: var(--svetofor-accent-soft);
  box-shadow: var(--svetofor-shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="dark"] .svetofor-actionBtn:hover{
  background: var(--svetofor-accent-soft-2);
  box-shadow: var(--svetofor-shadow-soft);
}
html[data-theme="dark"] .svetofor-actionBtn.btn-secondary{
  border-color: rgba(167,176,186,0.55);
  background: rgba(167,176,186,0.24);
}
html[data-theme="dark"] .svetofor-actionBtn.btn-secondary:hover{
  border-color: rgba(167,176,186,0.72);
  background: rgba(167,176,186,0.36);
}
html[data-theme="dark"] .svetofor-actionBtn.danger{
  border-color: rgba(239,68,68,0.62);
  background: rgba(239,68,68,0.28);
}
html[data-theme="dark"] .svetofor-actionBtn.danger:hover{
  border-color: rgba(239,68,68,0.78);
  background: rgba(239,68,68,0.40);
}

.svetofor-badge.ok{
  border-color: rgba(47,122,77,0.35);
  background: rgba(47,122,77,0.18);
}
.svetofor-badge.error{
  border-color: rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.18);
}

.svetofor-notice{
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--svetofor-border);
  background: var(--svetofor-surface-1);
}
.svetofor-notice.ok{
  border-color: rgba(47,122,77,0.35);
  background: rgba(47,122,77,0.12);
}
.svetofor-notice.error{
  border-color: rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.12);
}

.svetofor-folderPicker{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.svetofor-truncate{
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svetofor-details{ max-width: 280px; }

.svetofor-sectionTitle{
  margin: 14px 0 8px;
  font-weight: 600;
  color: var(--svetofor-text);
}

.svetofor-mailBody{
  white-space: pre-wrap;
  line-height: 1.45;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--svetofor-border);
  background: var(--svetofor-surface-2);
}

.svetofor-mailHtml{
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--svetofor-border);
  background: var(--svetofor-surface-2);
  overflow-wrap: anywhere;
}
.svetofor-mailHtml img{ max-width: 100%; height: auto; }
.svetofor-mailHtml table{ max-width: 100%; }

.mail-controls .mail-controlsRow{
  align-items: flex-end;
  gap: 10px;
}
.mail-toolbar{
  margin-bottom: 10px;
}
.mail-toolbarRow{
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.mail-toolbarField{
  min-width: 180px;
  font-size: 13px;
  font-weight: 600;
  color: var(--svetofor-text-dim);
}
.mail-toolbarFieldWide{
  flex: 0 1 280px;
}
.mail-toolbarField select{
  width: 100%;
  min-height: 44px;
  font-size: 15px;
}
.mail-folderRailWrap{
  margin: 0 0 10px;
}
.mail-folderSpoiler{
  border: 1px solid var(--svetofor-border);
  border-radius: 16px;
  background: rgba(255,255,255,0.62);
  padding: 4px 10px 8px;
}
.mail-folderSummary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  min-height: 40px;
  font-weight: 700;
}
.mail-folderSummary::-webkit-details-marker{
  display: none;
}
.mail-folderSummaryValue{
  font-weight: 600;
  color: var(--svetofor-text-faint);
  text-align: right;
}
.mail-folderRail{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 0 8px;
}
.mail-folderChip{
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(255,255,255,0.66);
  color: var(--svetofor-text-dim);
  white-space: nowrap;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.mail-folderChip:hover{
  transform: translateY(-1px);
  color: var(--svetofor-text);
  border-color: rgba(245,158,11,0.36);
  background: rgba(245,158,11,0.12);
}
.mail-folderChip.is-active{
  color: var(--svetofor-text);
  border-color: rgba(245,158,11,0.42);
  background: rgba(245,158,11,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.mail-searchCard{
  margin-top: 0;
}
.mail-searchRow{
  align-items: flex-end;
  gap: 12px;
}
.mail-searchField{
  display: grid;
  gap: 6px;
  flex: 1 1 420px;
  font-size: 13px;
  font-weight: 600;
}
.mail-searchField input{
  width: 100%;
}
.mail-controls label{
  min-width: 210px;
  font-size: 13px;
  font-weight: 600;
  color: var(--svetofor-text-dim);
}
.mail-controls select,
.mail-controls input{
  min-height: 42px;
  font-size: 15px;
}
.mail-controls .svetofor-actionBtn{
  min-height: 42px;
  padding: 9px 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.mail-syncCard{
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.mail-syncRow{
  align-items: center;
  gap: 12px;
}
.mail-syncAllWrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: auto !important;
  font-size: 14px !important;
}
.mailList{
  display: grid;
  gap: 10px;
}
.mailItem{
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--svetofor-border);
  border-radius: 18px;
  background: rgba(51,65,85,0.34);
  box-shadow: var(--svetofor-shadow-card);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.mailItem.mail-unread{
  border-color: rgba(47,122,77,0.42);
  background: rgba(47,122,77,0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 10px 24px rgba(21,128,61,.14);
}
.mailItem.mail-unread .mailItem-from,
.mailItem.mail-unread .mailItem-subject{
  font-weight: 700;
}
.mailItem:hover{
  transform: translateY(-1px);
  border-color: rgba(71,85,105,0.22);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
}
.mailItem.mail-unread:hover{
  border-color: rgba(47,122,77,0.50);
  background: rgba(47,122,77,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 14px 30px rgba(21,128,61,.16);
}
.mailItem-select{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 9px;
}
.mailItem-main{
  display: grid;
  gap: 6px;
  min-width: 0;
}
.mailItem-topline{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.mailItem-from,
.mailItem-subject{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mailItem-from{
  font-weight: 700;
  color: rgba(30,41,59,0.88);
}
.mailItem-date{
  flex: 0 0 auto;
  font-size: 12px;
  color: rgba(51,65,85,0.72);
}
.mailItem-subject{
  font-size: 15px;
  color: rgba(51,65,85,0.82);
}
.mailItem-meta{
  font-size: 12px;
  color: rgba(51,65,85,0.66);
}
.mail-emptyState{
  margin-top: 0;
  text-align: center;
}

.mail-infiniteStatus{
  margin-top: 10px;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  color: var(--svetofor-text-dim);
  pointer-events: none;
}
.mail-infiniteStatus.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.mail-loaderDot{
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--svetofor-accent);
  box-shadow: 0 0 0 0 rgba(245,158,11,0.42);
  opacity: 0.35;
}
.mail-infiniteStatus.is-loading .mail-loaderDot{
  opacity: 1;
  animation: mailPulse 1s ease-in-out infinite;
}

/* Mail view: tighter CRM block + guaranteed bottom breathing room */
.mailViewPage{
  padding-bottom: 34px;
}
.mailViewPage .svetofor-pageHead{
  margin-bottom: 8px;
}
.mailView-head{
  align-items: flex-start;
  gap: 14px;
}
.mailView-actions{
  justify-content: flex-end;
  gap: 8px;
}
.mailView-crmCard{
  padding: 14px 16px;
  margin-bottom: 10px !important;
}
.mailView-cardHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.mailView-collapseBtn{
  min-height: 34px !important;
  height: 34px !important;
  padding: 6px 12px !important;
}
.mailView-crmCard h4{
  margin-bottom: 0;
  font-size: 14px;
}
.mailView-crmCard.is-collapsed .mailView-cardBody{
  display: none;
}
.mailView-crmCard.is-collapsed .mailView-cardHead{
  margin-bottom: 0;
}
.mailView-crmCard .svetofor-grid{
  gap: 10px;
}
.mailView-crmCard label{
  display: grid;
  gap: 6px;
  align-items: start;
}
.mailView-crmCard select,
.mailView-crmCard input{
  min-height: 40px;
  height: 40px;
}
.mailView-commentArea{
  min-height: 72px !important;
  max-height: 180px;
}
.mailView-crmCard .svetofor-row{
  margin-top: 6px !important;
}
.mailView-messageCard{
  padding: 14px 16px;
}
.mailView-metaGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.mailView-metaBlock{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--svetofor-border);
  background: rgba(148,163,184,0.12);
}
html[data-theme="dark"] .mail-folderChip{
  background: rgba(32,41,53,0.72);
  border-color: rgba(148,163,184,0.26);
}
html[data-theme="dark"] .mail-folderSpoiler{
  background: rgba(24,31,42,0.54);
}
html[data-theme="dark"] .mail-folderChip.is-active{
  border-color: rgba(251,191,36,0.44);
  background: rgba(245,158,11,0.20);
}
html[data-theme="dark"] .mailItem{
  background: rgb(37 37 37 / 0%);
}
html[data-theme="dark"] .mailItem.mail-unread{
  border-color: rgba(74,222,128,0.46);
  background: rgba(21,128,61,0.34);
}
html[data-theme="dark"] .mailItem-from{
  color: rgba(226,232,240,0.92);
}
html[data-theme="dark"] .mailItem-subject{
  color: rgba(203,213,225,0.84);
}
html[data-theme="dark"] .mailItem.mail-unread .mailItem-from,
html[data-theme="dark"] .mailItem.mail-unread .mailItem-subject{
  color: rgba(236,253,245,0.98);
}
html[data-theme="dark"] .mailItem-date,
html[data-theme="dark"] .mailItem-meta{
  color: rgba(148,163,184,0.78);
}
html[data-theme="dark"] .mailView-metaBlock{
  background: rgba(51,65,85,0.36);
}

@media (max-width: 720px){
  .svetofor-pageHead{
    gap: 10px;
  }
  .mailView-cardHead{
    flex-wrap: wrap;
    align-items: stretch;
  }
  .mailView-collapseBtn{
    width: 100%;
  }
  .mail-controls label{
    min-width: 0;
  }
  #mailBulkAction,
  #mailMoveFolder{
    min-width: 0 !important;
  }
  .svetofor-navDesktop{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mail-toolbarRow,
  .mail-searchRow,
  .mail-syncRow{
    align-items: stretch;
  }
  .mail-toolbarRow{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .mail-searchRow{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .mail-toolbarField,
  .mail-searchField{
    min-width: 0;
    width: auto;
  }
  .mail-toolbar{
    padding: 10px 12px;
  }
  .mail-toolbarField{
    font-size: 11px;
  }
  .mail-toolbarField select,
  .mail-searchField input{
    min-height: 36px;
    height: 36px;
    font-size: 13px;
    padding: 7px 10px;
  }
  .mail-toolbar .svetofor-actionBtn,
  .mail-searchCard .svetofor-actionBtn{
    width: auto;
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    justify-content: center;
  }
  .mail-searchCard{
    padding: 10px 12px;
  }
  .mail-syncCard{
    padding: 10px 12px;
  }
  .mail-syncRow{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mail-syncCard .svetofor-actionBtn{
    width: auto;
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
  }
  .mail-folderRail{
    gap: 6px;
    padding-bottom: 6px;
    overflow-x: visible;
  }
  .mail-folderSpoiler{
    padding: 2px 10px 6px;
  }
  .mail-folderSummary{
    min-height: 36px;
    font-size: 13px;
  }
  .mail-folderChip{
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
  }
  .mailItem{
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding: 9px 10px;
    border-radius: 16px;
  }
  .mailItem-topline{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .mailItem-from,
  .mailItem-subject{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .mailItem-subject{
    font-size: 14px;
  }
  .mailViewPage{
    padding-bottom: 22px;
  }
  .mailView-head{
    align-items: stretch;
  }
  .mailView-head h2{
    margin-bottom: 6px;
    font-size: 20px;
    line-height: 1.18;
    word-break: break-word;
  }
  .mailView-actions{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .mailView-actions .svetofor-actionBtn,
  .mailView-actions .svetofor-inline,
  .mailView-actions .svetofor-inline button{
    width: 100%;
  }
  .mailView-actions .svetofor-inline{
    display: block;
  }
  .mailView-crmCard,
  .mailView-messageCard{
    padding: 12px;
  }
  .mailView-metaGrid{
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }
  .mailView-crmCard select,
  .mailView-crmCard input,
  .mailView-commentArea{
    width: 100%;
  }
}

@keyframes mailPulse{
  0%{ transform: scale(0.75); box-shadow: 0 0 0 0 rgba(245,158,11,0.48); }
  70%{ transform: scale(1); box-shadow: 0 0 0 12px rgba(245,158,11,0); }
  100%{ transform: scale(0.75); box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

.composePro{
  align-items: start;
}
.compose-head{
  align-items: flex-start;
  gap: 14px;
}
.composePro label{
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15px;
  margin: 0;
}
.compose-fieldTitle{
  font-size: 13px;
  font-weight: 700;
  color: var(--svetofor-text);
}
.composePro textarea{
  min-height: 200px;
  font-size: 15px;
  line-height: 1.45;
  border-radius: 14px;
  padding: 13px 14px;
  border-width: 1.5px;
  background: rgba(148, 163, 184, .16) !important;
  border-color: rgba(148, 163, 184, .34) !important;
  box-shadow: none !important;
}
.composePro input,
.composePro select{
  min-height: 44px;
  height: 44px;
  font-size: 15px;
  border-radius: 12px;
  padding: 11px 13px;
  border-width: 1.5px;
  box-shadow: none;
  background: rgba(148, 163, 184, .16);
  width: 100%;
  box-sizing: border-box;
}
.composePro input:focus,
.composePro select:focus,
.composePro textarea:focus{
  border-color: rgba(148, 163, 184, .34);
  box-shadow: none;
  background: rgba(148, 163, 184, .16);
}
.composePro input[type="file"]{
  padding: 8px 10px;
  min-height: 46px;
}
.compose-helpText{
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--svetofor-text-dim);
  line-height: 1.35;
  margin-top: -2px;
}
.compose-metaGrid,
.compose-mainFields{
  gap: 12px;
}
.compose-mainFields{
  margin-top: 10px;
}
.composeProActions{
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.composeProActions .svetofor-actionBtn{
  min-height: 42px;
  padding: 8px 14px;
  font-weight: 700;
}

.compose-editorWrap{
  border: 1.5px solid var(--svetofor-input-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.compose-toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 9px;
  border-bottom: 1px solid var(--svetofor-input-border);
  background: linear-gradient(180deg, rgba(148,163,184,0.18), rgba(148,163,184,0.08));
}
.compose-toolbar .svetofor-actionBtn{
  min-height: 32px;
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 10px;
}
.compose-richEditor{
  min-height: 280px;
  max-height: 520px;
  overflow: auto;
  padding: 14px;
  line-height: 1.52;
  font-size: 15px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.compose-richEditor:focus{
  box-shadow: inset 0 0 0 2px rgba(148,163,184,.32);
}
.compose-richEditor p{ margin: 0 0 10px; }
.compose-richEditor ul{ margin: 0 0 10px 20px; }
.compose-richEditor h3{ margin: 8px 0 10px; font-size: 18px; }
.compose-richEditor a{ color: rgba(107,114,128,.95); text-decoration: underline; }
.compose-smallArea{
  min-height: 120px !important;
}
.composePro .svetofor-mailBody{
  background: rgba(148,163,184,.14);
  border-color: rgba(148,163,184,.28);
}

@media (max-width: 1100px){
  .composePro{
    grid-template-columns: 1fr !important;
  }
  .compose-side{
    order: -1;
  }
}

@media (max-width: 720px){
  .compose-head{
    align-items: stretch;
  }
  .compose-head .svetofor-btnLink{
    width: 100%;
    justify-content: center;
  }
  .compose-mainCard,
  .compose-previewCard,
  .compose-historyCard{
    padding: 12px;
  }
  .compose-metaGrid{
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .compose-mainFields{
    gap: 10px;
  }
  .compose-helpText{
    font-size: 11px;
  }
  .compose-toolbar{
    position: sticky;
    top: 0;
    z-index: 2;
    gap: 5px;
    padding: 7px;
  }
  .compose-toolbar .svetofor-actionBtn{
    flex: 1 1 calc(50% - 5px);
    min-height: 34px;
    padding: 5px 8px;
    font-size: 12px;
  }
  .compose-richEditor{
    min-height: 220px;
    max-height: none;
    padding: 12px;
    font-size: 14px;
  }
  .composeProActions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .composeProActions .svetofor-actionBtn{
    width: 100%;
    justify-content: center;
  }
  .composePro .svetofor-table{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  #composePreviewText{
    min-height: 120px;
  }
}

html[data-theme="dark"] .composePro input,
html[data-theme="dark"] .composePro select,
html[data-theme="dark"] .composePro textarea{
  background: rgba(55,65,81,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="dark"] .compose-editorWrap{
  background: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .compose-toolbar{
  background: rgba(75,85,99,.32);
}
html[data-theme="dark"] .compose-richEditor:focus{
  box-shadow: inset 0 0 0 2px rgba(148,163,184,.42);
}
html[data-theme="dark"] .composePro input:focus,
html[data-theme="dark"] .composePro select:focus,
html[data-theme="dark"] .composePro textarea:focus{
  border-color: rgba(148,163,184,.62);
  box-shadow: 0 0 0 3px rgba(148,163,184,.2);
  background: rgba(55,65,81,.46);
}
html[data-theme="dark"] .composePro .svetofor-mailBody{
  background: rgba(148,163,184,.16);
  border-color: rgba(148,163,184,.34);
}

/* Hard override for compose: remove any residual blue focus/autofill accents */
#composeForm input,
#composeForm select,
#composeForm textarea{
  border-color: rgba(148,163,184,.35) !important;
  background: rgba(148, 163, 184, .16) !important;
  box-shadow: none !important;
}
#composeForm input:focus,
#composeForm select:focus,
#composeForm textarea:focus{
  border-color: rgba(148, 163, 184, .34) !important;
  background: rgba(148, 163, 184, .16) !important;
  box-shadow: none !important;
  outline: none !important;
}
#composeRichEditor:focus{
  box-shadow: inset 0 0 0 2px rgba(148,163,184,.38) !important;
}
#composePreviewText{
  background: rgba(148,163,184,.14) !important;
  border-color: rgba(148,163,184,.28) !important;
}
html[data-theme="dark"] #composePreviewText{
  background: rgba(148,163,184,.16) !important;
  border-color: rgba(148,163,184,.34) !important;
}
#composeForm input:-webkit-autofill,
#composeForm input:-webkit-autofill:hover,
#composeForm input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 1000px rgba(148,163,184,.12) inset !important;
  -webkit-text-fill-color: var(--svetofor-text) !important;
}

html[data-theme="dark"] .svetofor-btnLink{
  border-color: rgba(251,191,36,0.40);
  background: var(--svetofor-accent-soft);
  box-shadow: var(--svetofor-shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="dark"] .svetofor-btnLink:hover{
  background: var(--svetofor-accent-soft-2);
  box-shadow: var(--svetofor-shadow-soft);
}

label.toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Prevent layout shift when scrollbar appears/disappears */
html{ scrollbar-gutter: stable; }
body{ overflow-y: scroll; }