/* ══════════════════════════════════════════════════
   base.css  –  PillePlan structural styles
   Theme-specific overrides live in theme-*.css
   ══════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--font-body, 'Nunito', sans-serif);
  font-size: var(--font-size-base, 14px);
  color: var(--color-text, #1a2a3a);
  background: var(--color-bg, #eef3f8);
  user-select: none;
}

/* ─── SCREENS ─────────────────────────────────────── */
.screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
}

/* ─── LOGIN ───────────────────────────────────────── */
.screen-login {
  align-items: center; justify-content: center;
  background: var(--color-bg, #eef3f8);
}
.login-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 18px;
  padding: 48px 36px;
  border-radius: 20px;
  background: var(--color-surface, #fff);
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
  border: var(--border-card, 2px solid #ccdaeb);
  width: 90%; max-width: 340px;
}
.login-logo { font-size: 3rem; }
.app-title {
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: 2rem; font-weight: 900;
  color: var(--color-accent, #2b5f8b);
  letter-spacing: -1px;
}
.login-sub {
  font-size: 0.9rem; color: var(--color-text-muted, #6b8aa8);
  text-align: center;
}
.btn-login {
  margin-top: 8px;
  padding: 14px 52px;
  border-radius: 40px;
  font-size: 1.05rem; font-weight: 700;
  border: none; cursor: pointer;
  background: var(--color-accent, #2b5f8b);
  color: #fff;
  font-family: var(--font-body, 'Nunito', sans-serif);
  box-shadow: 0 4px 18px rgba(43,95,139,0.35);
  transition: background 0.15s;
}
.btn-login:active { background: var(--color-accent-dark, #1a3d5c); }

/* ─── MAIN SCREEN ─────────────────────────────────── */
.screen-main { background: var(--color-bg, #eef3f8); }

.main-area {
  flex: 1; display: flex; overflow: hidden;
  min-height: 0;
}

/* CAROUSEL WRAPPER */
.carousel-wrap {
  flex: 0 0 63%;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-right: var(--border-panel, 2px solid #b0c4d8);
  position: relative;
}

/* ─── TILBAKE TIL I DAG ───────────────────────────── */
.tilbake-btn {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: none;              /* shown via JS */
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 20px;
  border: none;
  background: rgba(43, 95, 139, 0.82);
  color: #fff;
  font-family: var(--font-body, 'Nunito', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 20;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 14px rgba(0,0,0,0.22);
  letter-spacing: 0.02em;
}
.tilbake-btn:active { opacity: 0.75; }
.carousel-vp {
  flex: 1;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: var(--color-carousel-bg, #fff);
  position: relative;
}
.carousel-inner {
  position: relative;
  width: 100%;
  /* height set dynamically by JS */
}

/* CAROUSEL ROWS */
.crow {
  position: absolute;
  width: 100%;
  display: flex;
  align-items: stretch;
}

.dcell {
  flex: 0 0 67%;
  display: flex; align-items: center;
  padding-left: 7px;
  font-size: var(--font-size-base, 14px);
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #1a2a3a);
  background: var(--color-carousel-bg, #fff);
  border-bottom: 1px solid var(--color-row-sep, #e8ecf1);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.dcell.dc-yellow {
  background: var(--color-date-yellow, #ffe600);
  color: #1a1a00;
}

.scell {
  flex: 0 0 33%;
  border-bottom: 1px solid transparent;
}
.scell.sc-green  { background: var(--color-sec-green, #9dcc6a); }
.scell.sc-red    { background: var(--color-sec-red, #d62828); }
.scell.sc-start  { border-top: 2px solid rgba(0,0,0,0.22); }
.scell.sc-end    { border-bottom: 2px solid rgba(0,0,0,0.22) !important; }

/* Preview overlays (during drag) */
.scell.prev-green { background: var(--color-sec-green, #9dcc6a); opacity: 0.55; }
.scell.prev-red   { background: var(--color-sec-red, #d62828);   opacity: 0.55; }

/* ─── RIGHT PANEL ─────────────────────────────────── */
.panel-right {
  flex: 0 0 37%;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 10px 6px 8px;
  gap: 8px;
  background: var(--color-panel-bg, #dce6f0);
  border-left: var(--border-panel, 2px solid #b0c4d8);
  overflow: hidden;
}

.btn-innstillinger {
  width: 100%;
  padding: 9px 4px;
  border-radius: 7px;
  font-size: 0.82rem; font-weight: 700;
  font-family: var(--font-body, 'Nunito', sans-serif);
  border: 2px solid var(--color-accent, #2b5f8b);
  background: var(--color-accent, #2b5f8b);
  color: #fff; cursor: pointer;
  letter-spacing: 0.03em;
}
.btn-innstillinger:active { opacity: 0.8; }

.color-btns {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 6px;
  width: 100%;
  justify-content: space-around;
  align-items: center;
}

.cbtn-wrap { width: 88%; flex: 1; max-height: 22%; }

.color-btn {
  width: 100%; height: 100%;
  border-radius: 7px;
  border: var(--border-btn, 3px solid #6a8aaa);
  cursor: pointer;
  padding: 0; overflow: hidden;
  background: transparent;
  touch-action: none;          /* critical – we handle touch manually */
  position: relative;
}
.color-btn.active {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--color-accent, #2b5f8b);
}
.cbtn-inner {
  display: block; width: 100%; height: 100%;
  position: relative;
}
/* Mid-line design element matching mockup */
.cbtn-inner::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(0,0,0,0.18);
}

.cbtn-purple .cbtn-inner { background: var(--color-btn-purple, #cc00cc); }
.cbtn-green  .cbtn-inner { background: var(--color-sec-green,   #9dcc6a); }
.cbtn-red    .cbtn-inner { background: var(--color-sec-red,     #d62828); }
.cbtn-yellow .cbtn-inner { background: var(--color-date-yellow, #ffe600); }
.cbtn-white  .cbtn-inner { background: #ffffff; }

/* ─── BOTTOM BAR ──────────────────────────────────── */
.bottom-bar {
  flex: 0 0 52px;
  display: flex; align-items: center;
  padding: 6px 10px; gap: 10px;
  background: var(--color-bottom-bg, #2b5f8b);
  border-top: var(--border-bottom, 2px solid #1a3d5c);
}
.btn-action {
  flex: 1; height: 38px;
  border-radius: 24px;
  font-size: 1rem; font-weight: 700;
  font-family: var(--font-body, 'Nunito', sans-serif);
  letter-spacing: 0.03em;
  border: 2px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.14);
  color: #fff; cursor: pointer;
  transition: background 0.1s;
}
.btn-action:active { background: rgba(255,255,255,0.28); }
.btn-action-primary {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.6);
}

/* ─── SETTINGS ────────────────────────────────────── */
.screen-settings {
  background: rgba(0,0,0,0.45);
  align-items: center; justify-content: center;
}
.settings-card {
  background: var(--color-surface, #fff);
  border-radius: 16px;
  border: var(--border-card, 2px solid #ccdaeb);
  padding: 28px 24px;
  width: 88%; max-width: 360px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.settings-title {
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: 1.3rem; font-weight: 900;
  color: var(--color-accent, #2b5f8b);
}
.setting-group { display: flex; flex-direction: column; gap: 6px; }
.setting-label { font-weight: 700; font-size: 0.9rem; color: var(--color-text, #1a2a3a); }
.setting-select {
  padding: 10px 12px;
  border-radius: 9px;
  border: 2px solid var(--color-border, #b0c4d8);
  font-size: 0.95rem;
  font-family: var(--font-body, 'Nunito', sans-serif);
  background: var(--color-carousel-bg, #fff);
  color: var(--color-text, #1a2a3a);
  appearance: none;
}
.settings-actions {
  display: flex; gap: 10px; margin-top: 4px;
}
.settings-actions .btn-action {
  background: var(--color-accent, #2b5f8b);
  border-color: var(--color-accent, #2b5f8b);
}

/* ─── SUNDAY→MONDAY SEPARATOR ────────────────────── */
.crow.week-sep .dcell {
  border-top: 2.5px solid var(--color-week-sep, rgba(0,0,0,0.38));
}
.crow.week-sep .scell {
  border-top: 2.5px solid var(--color-week-sep, rgba(0,0,0,0.38)) !important;
}

/* ─── HØYREMODUS (layout-right) ────────────────────
   Speil: karusell til høyre, panel til venstre,
   seksjon-kolonne innerst til venstre i karusellen  */
body.layout-right .main-area        { flex-direction: row-reverse; }
body.layout-right .carousel-wrap    {
  border-right: none;
  border-left: var(--border-panel, 2px solid #b0c4d8);
}
body.layout-right .panel-right      {
  border-left: none;
  border-right: var(--border-panel, 2px solid #b0c4d8);
}
body.layout-right .crow             { flex-direction: row-reverse; }
body.layout-right .dcell            {
  padding-left: 0;
  padding-right: 7px;
  text-align: right;
}
.paint-brush {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  display: none;
  border-radius: 5px;
  opacity: 0.82;
  will-change: transform;
  box-shadow: 0 3px 14px rgba(0,0,0,0.28);
}
.pb-green  { background: var(--color-sec-green,   #9dcc6a); border: 2px solid #4a8a1a; width:38px; height:38px; }
.pb-red    { background: var(--color-sec-red,     #d62828); border: 2px solid #8b0000; width:38px; height:38px; }
.pb-yellow { background: var(--color-date-yellow, #ffe600); border: 2px solid #c8a000; width:78px; height:28px; }
.pb-white  { background: #ffffff;                           border: 2px solid #999;    width:78px; height:28px; }