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

/* ==========================
   1. BASIS & RESET
   ========================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }

body {
  background: #f6f6f6;
  font-family: 'Inter', sans-serif;
  color: #686868;
}

/* ==========================
   2. CONTAINER & LAYOUT
   ========================== */
.central-panel {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

@media (min-width: 940px) {
  .central-panel { max-width: 700px; }
}

.wrapper {
  position: relative;
  background: #f6f6f6;
  border-radius: 1.2rem;
  padding: 36px;
  overflow: visible;
}

.icon-bar { display: flex; gap: 0.6rem; align-items: center; }

@media (max-width: 600px) {
  .topbar {
    /* compact, maar NIET stacken */
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    padding: .6rem 14px .6rem 14px;
    flex-wrap: nowrap;
  }
  .topbar-title {
    order: 0;
    margin: 0;
    font-size: 1.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    text-align: left;
  }
  .topbar-buttons { order: 0; justify-content: flex-end; }
  .icon-bar { justify-content: flex-end; width: auto; margin-bottom: 0; }
  .settings-modal-header.is-main-header { padding-bottom: 1.4rem!important; }
}

/* ==========================
   4. ICON BUTTONS
   ========================== */
.icon-btn {
  width: 40px; height: 40px;
  background: #fff;
  border: 1px solid #eceef4;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #686868; font-size: 1rem; cursor: pointer;
  box-shadow: 0 2px 10px rgba(24,34,69,.06);
  transition: background .15s, color .15s, transform .15s, box-shadow .15s;
  outline: none; padding: 0; -webkit-tap-highlight-color: transparent;
}

.icon-btn svg{
  display:block; width:18px; height:18px;
  stroke:#444; stroke-width:1.8; pointer-events:none; transition: stroke .15s;
}

.icon-btn:hover{
  background:#fff; color:#243145;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(24,34,69,.12);
}

.icon-btn:hover svg{ stroke:#243145; }

.icon-btn:active{ transform: translateY(0); box-shadow: 0 2px 10px rgba(24,34,69,.06); }

.icon-btn:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(200,219,247,.55), 0 6px 18px rgba(24,34,69,.12);
  background:#fff; color:#243145;
}

.icon-btn:visited{ color:#686868; background:#fff; }

/* ==========================
   5. FILTERS BAR
   ========================== */
.filters-bar {
  display: flex; width: 100%;
  margin-bottom: 2.2rem; box-sizing: border-box;
  gap: 1.5rem; align-items: flex-end;
}

.filter-col { display: flex; flex-direction: column; align-items: flex-start; }

.filters-label {
  font-family: 'Rubik', sans-serif; font-weight: 700;
  font-size: 0.9rem; color: #686868; margin-bottom: 0.23em; text-align: left;
}

.filters-select {
  min-width: 8rem; max-width: 250px; font-size: .95rem;
  font-family: 'Inter', 'Rubik', sans-serif; font-weight: 400;
  padding: 10px 20px; border-radius: 999px; background: #fff; color: #868686;
  border: 2px solid #f0f2f8; box-shadow: none; appearance: none; cursor: pointer;
  transition: border-color 0.17s; margin-bottom: 0;
}

.filters-select:focus { outline: none; border: 2px solid #c9c7e9; }

@media (max-width: 700px) {
  .filters-bar { flex-direction: column; padding-left: 0; padding-right: 0; margin-bottom: 3rem; }
  .filter-col, .filters-label, .filters-select { width: 100%; max-width: 100%; }
  .filters-label { font-size: 1.04rem; }
  .filters-select { min-width: 100%; max-width: 100%; font-size: .95rem; }
  /* Geen extra .topbar overrides hier → header blijft overal gelijk */
}

/* ==========================
   8. RANGE TITEL & FILTER GRID (algemene layout)
   ========================== */
.filters-bar { padding: 8px 0; }

.filters-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
  justify-items: start;
}

@media (max-width: 1200px){ .filters-grid{ gap:14px; } }

@media (max-width: 960px){  .filters-grid{ grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 560px){  .filters-grid{ grid-template-columns: 1fr; } }

@media (max-width: 700px){
  .filters-bar{ display:block !important; text-align:left !important; }
  .filters-bar-outer{ text-align:left !important; }
  .filters-grid{
    justify-items:start !important; justify-content:start !important;
    margin-left:0 !important; margin-right:0 !important;
  }
  .filters-grid .filter-col{ justify-self:start !important; }
}

.filter-col{ min-width:0; width:100%; }

.filters-select{ width:100%; min-width:0; text-align:left; text-align-last:left; }

.filters-label{
  display:block; margin-bottom:6px; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left;
}

.range-dependent.hidden{ display:none !important; }

.range-title {
  display: block;
  font-family: 'Rubik','Inter',sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0 0 1.1rem 0;
  color: #243145;
}

@media (max-width: 700px){
  .range-title{ font-size: 1.15rem; margin-top: .4rem; margin-bottom: 1.0rem; }
}

/* ==========================
   9. MODAL: SETTINGS & ACCOUNT
   ========================== */
.settings-overlay {
  position: fixed; inset: 0; z-index: 9999; background: #f6f6f6 !important;
  display: none; align-items: center; justify-content: center; transition: none;
}

.settings-overlay.open { display: flex; animation: none; }

.settings-input,
.time-field,
.hours-field {
  background: #f8f8fa;
  border: 1.5px solid #f1f1f2;
  border-radius: 999px;
  padding: .74em 1.06em;
  font-size: 1rem;
  color: #686868;            /* gebruik bestaand grijs */
  transition: border 0.17s, box-shadow 0.2s;
  outline: none;
  font-weight: 500;          /* minder vet */
}

.settings-input:focus,
.time-field:focus,
.hours-field:focus {
  border-color: #c9c6e9;
  box-shadow: 0 0 0 1.5px #6c63ff44;
  font-weight: 700;          /* geen 900; subtieler */
}

/* optioneel: placeholder net wat lichter dan tekst */
.settings-input::placeholder,
.time-field::placeholder,
.hours-field::placeholder {
  color: #b4b4b4;
}

.settings-btn-primary {
  margin-top: .7em;
  background: linear-gradient(90deg, #2b2b2b 0%, #2b2b2b 100%);
  color: #fff; border: none; border-radius: 999px;
  font-weight: 700; padding: .8em 1.6em; font-size: 1.1rem;
  cursor: pointer; box-shadow: 0 3px 14px rgba(108,99,255,0.09);
  transition: background 0.13s, box-shadow 0.13s; width: 100%;
}

.settings-btn-primary:hover {
  background: linear-gradient(90deg, #000 0%, #000 100%);
  box-shadow: 0 5px 20px rgba(108,99,255,0.15);
}

.settings-modal {
  background: #fff; border-radius: 1.25rem;
  box-shadow: 0 8px 36px rgba(30,44,78,0.12);
  padding: 2.3rem; max-width: 390px; width: 95vw;
  position: relative; display: flex; flex-direction: column;
  align-items: stretch; min-height: 180px; gap: 0.4rem;
}

.settings-title {
  font-size: 1.43rem; font-family: 'Rubik','Inter',sans-serif;
  font-weight: 700; color: #222; margin: 0; padding: 0;
  flex: 1; line-height: 1.1;
}

.settings-close.icon-btn {
  margin-left: 1.2rem; margin-right: -0.4rem;
  position: static; width: 38px; height: 38px;
  background: #fff; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px #2221; transition: background .14s, box-shadow .15s;
  color: #b2b2b2; font-size: 2.2rem;
}

.settings-link {
  display: flex; align-items: center; gap: 1em;
  padding: .7em 1em .7em .8em; border-radius: 999px;
  background: none; color: #222; text-decoration: none;
  font-size: 1.09rem; font-family: 'Rubik','Inter',sans-serif; font-weight: 500;
  transition: background .12s, color .14s; box-shadow: none; border: none; cursor: pointer;
}

.settings-link svg { color: #7b7b7b; stroke: #7b7b7b; transition: color .14s, stroke .14s; }

.settings-link:hover, .settings-link:focus { background:#f7f7f7; color:#686868 !important; }

.settings-link:hover svg, .settings-link:focus svg { color:#686868 !important; stroke:#686868 !important; }

@media (max-width: 600px) {
  .settings-modal-header { margin-bottom: 1.1rem; }
  .settings-title { font-size: 1.15rem; }
  .settings-close.icon-btn { width: 34px; height: 34px; font-size: 1.6rem; }
}

.settings-modal::after { content:''; display:block; min-height:40px; width:100%; }

/* ==========================
   12. TOASTS & OVERIGE (niet-card)
   ========================== */
.toast-root{
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 12px; z-index: 99999; pointer-events: none;
}

.toast{
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  background: #fff; color: var(--ink, #222); border: 1px solid var(--line, #eceef4);
  border-radius: 14px; box-shadow: 0 12px 30px rgba(24,34,69,.12);
  padding: 12px 16px; min-width: 260px; max-width: min(90vw, 480px);
  transform: translateY(-8px); opacity: 0; transition: opacity .2s ease, transform .2s ease;
  pointer-events: auto;
}

.toast.show{ opacity: 1; transform: translateY(0); }

.toast-ico{ display: grid; place-items:center; }

.toast-ok .toast-ico{ color: var(--notif-new, #44d693); }

.toast-error .toast-ico{ color: var(--notif-cancel, #ff4b5c); }

.toast-text{ font-weight: 700; font-size: 15px; line-height: 1.2; }

.toast-close{
  appearance: none; border: 0; background: transparent;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted, #6b7280); cursor: pointer; padding: 0;
}

.toast-close:hover{ background: rgba(0,0,0,.05); }

@media (max-width: 520px){ .toast{ width: calc(100vw - 32px); } }

@media (prefers-color-scheme: dark){
  .toast{ background:#1b1b1b; color:#fff; border-color:#2a2a2a; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
  .toast-close:hover{ background: rgba(255,255,255,.08); }
}

/* ==========================
   13. SETTINGS OVERLAY LAYOUT AANPASSINGEN
   ========================== */
#settings-overlay.settings-overlay{
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  align-items: flex-start; justify-content: center;
  padding: clamp(16px, 8vh, 96px) 14px clamp(16px, 6vh, 80px);
}

#settings-overlay .settings-modal { max-height: none !important; overflow: visible !important; margin: 0 auto; }

#settings-overlay.settings-overlay.centered { align-items: center; padding: 24px 14px; }

#settings-overlay .settings-modal.no-modal-padding-bottom form { margin-bottom: 0 !important; padding-bottom: 0 !important; }

#settings-overlay .settings-modal.no-modal-padding-bottom .form-row:last-of-type { margin-bottom: 10px !important; }

#settings-overlay .settings-modal.no-modal-padding-bottom .settings-btn-primary { margin-bottom: 0 !important; }

/* ==========================
   14. NOTIFICATIONS FORM
   ========================== */
.notify-form .form-stack { display:flex; flex-direction:column; gap:18px; }

.nf-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }

.nf-col { min-width:0; }

.nf-label-lg { font-weight:800; font-size:1.05rem; color:var(--ink,#222); line-height:1.2; }

.nf-label   { font-weight:800; font-size:1.05rem; line-height:1.2; color:var(--ink,#222); }

.nf-intro   { font-size:.95rem; color:var(--muted,#6b7280); margin:0 0 14px; line-height:1.5; }

.notify-form .nf-switch { position:relative; width:48px; height:28px; flex:0 0 auto; cursor:pointer; }

.notify-form .nf-switch input { position:absolute; inset:0; opacity:0; }

.notify-form .nf-track {
  display:block; width:100%; height:100%; background:#e6e8ee; border-radius:999px;
  box-shadow: inset 0 0 0 2px #d8dbe2; transition: background .2s ease, box-shadow .2s ease;
}

.notify-form .nf-track::after {
  content:""; position:absolute; top:50%; left:4px; width:20px; height:20px; border-radius:50%;
  transform: translateY(-50%); background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:left .2s ease;
}

.notify-form .nf-switch input:checked + .nf-track { background:#111; box-shadow: inset 0 0 0 2px #111; }

.notify-form .nf-switch input:checked + .nf-track::after { left:24px; }

.notify-form.two-toggles .form-stack { gap:14px; }

.notify-form.two-toggles .nf-row { margin-bottom:6px; }

.notify-form.two-toggles .form-stack { padding-inline: .2rem; }

.notify-form.two-toggles .nf-row,
.notify-form.two-toggles .nf-intro { padding-inline: .1rem; }

/* Globale scroll-lock voor overlays */
body.modal-open { overflow: hidden; }

body.modal-open.is-ios-fix { position: fixed; width: 100%; }

.overlay{ position:fixed; inset:0; z-index:10050; display:none; }

.overlay[aria-hidden="false"], .overlay.open{ display:flex; }

/* --- MOBILE WIDTH CONTROL (paste at end of style.css) --- */
   :root{
     --mobile-page-pad: 8px;     /* outer gutter (central-panel) */
     --mobile-wrapper-pad: 16px; /* inner gutter (wrapper) */
   }

@media (max-width: 700px){
     .central-panel{
       /* shrink left/right padding so cards get wider */
       padding-left: var(--mobile-page-pad);
       padding-right: var(--mobile-page-pad);
     }
     .wrapper{
       /* shrink the big 36px pad on phones */
       padding: var(--mobile-wrapper-pad);
     }
   }