/* ── FiberTrack main.css — RouterOS/Winbox theme ─────────────────────────── */

/* Map legacy variable names used by child-template inline styles so they
   still resolve to semantically correct RouterOS colours in light + dark. */
:root {
  --surface:     #eef1f4;   /* = --panel  */
  --surface2:    #f6f7f9;   /* = --panel2 */
  --surface3:    #c9ced4;   /* = --chrome */
  --accent:      #2a67b1;   /* = --blue   */
  --accent2:     #1f4f88;   /* = --blue2  */
  --accent-glow: rgba(42,103,177,0.12);
  --yellow:      #d07a1f;   /* = --orange */
  --yellow-dim:  rgba(208,122,31,0.12);
  --red-dim:     rgba(184,52,46,0.12);
  --green-dim:   rgba(31,143,74,0.12);
  --orange-dim:  rgba(208,122,31,0.12);
  --purple:      #7c3aed;
  --purple-dim:  rgba(124,58,237,0.10);
  --text2:       #4e5a66;   /* = --muted  */
  --text3:       #4e5a66;
  --radius:      0px;
  --font:        system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --mono:        ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
body[data-theme="dark"] {
  --surface:     #2a2f36;
  --surface2:    #242a31;
  --surface3:    #313843;
  --accent:      #55a2ff;
  --accent2:     #2f6fc8;
  --accent-glow: rgba(85,162,255,0.12);
  --yellow:      #ffb15c;
  --yellow-dim:  rgba(255,177,92,0.12);
  --red-dim:     rgba(255,106,99,0.12);
  --green-dim:   rgba(67,196,123,0.12);
  --orange-dim:  rgba(255,177,92,0.12);
  --purple:      #a78bfa;
  --purple-dim:  rgba(167,139,250,0.12);
  --text2:       #aab3bf;
  --text3:       #aab3bf;
}

/* ── GLOBAL ── */
a { color:var(--blue); text-decoration:none; }
a:hover { color:var(--blue2); }
input, select, textarea, button { font-family:var(--font); }

select,
input[type="text"], input[type="search"], input[type="email"],
input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="url"], input[type="tel"], textarea {
  border:1px solid var(--border); background:#fff; color:var(--text);
  padding:5px 8px; font-size:12px; outline:none; border-radius:0;
}
select:focus, input:focus, textarea:focus { border-color:var(--blue); }

body[data-theme="dark"] select,
body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="search"],
body[data-theme="dark"] input[type="email"],
body[data-theme="dark"] input[type="number"],
body[data-theme="dark"] input[type="date"],
body[data-theme="dark"] input[type="datetime-local"],
body[data-theme="dark"] input[type="url"],
body[data-theme="dark"] input[type="tel"],
body[data-theme="dark"] textarea {
  background:#131820; color:var(--text); border-color:var(--border);
}

/* ── PAGE HEADER UTILITY ── */
.page-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px; gap:8px; flex-wrap:wrap;
}
.page-header h1, .page-header .ph-title{
  font-size:13px; font-weight:700; font-family:var(--mono);
}
.page-actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* ── CARDS → group boxes ── */
.card{
  border:1px solid var(--border); background:#fff; margin-bottom:10px;
  overflow-x:auto; /* tabellen breder dan de kaart scrollen horizontaal */
}
.card-header{
  padding:6px 8px; border-bottom:1px solid var(--border);
  background:var(--panel);
  font-weight:700; font-size:12px; display:flex; align-items:center; gap:8px;
}
.card-title{ font-weight:700; font-size:12px; flex:1; }
.card-action{
  font-size:11px; color:var(--blue); font-family:var(--mono);
  padding:1px 6px; border:1px solid var(--border); background:#fff;
}
.card-action:hover{ background:var(--panel2); color:var(--blue2); }

body[data-theme="dark"] .card        { background:var(--panel2); }
body[data-theme="dark"] .card-header { background:var(--panel); }
body[data-theme="dark"] .card-action { background:var(--panel2); }

/* ── TOOLBAR BUTTON (legacy class used in list templates) ── */
.topbar-btn{
  height:26px; padding:0 10px;
  border:1px solid var(--blue2);
  background:#cfe2ff;
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; cursor:pointer; color:var(--text);
  text-decoration:none; white-space:nowrap; border-radius:0;
}
.topbar-btn:hover{ background:#b8d4ff; color:var(--text); }

body[data-theme="dark"] .topbar-btn{
  background:#16304f;
  border-color:rgba(85,162,255,0.70); color:var(--text);
}

/* ── STAT CARDS ── */
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px;
}
.stat-card{ border:1px solid var(--border); background:var(--panel2); padding:8px; }
.stat-icon{ display:none; }
.stat-label{ font-size:11px; color:var(--muted); font-family:var(--mono); text-transform:uppercase; }
.stat-value{ font-size:22px; font-weight:800; margin-top:2px; line-height:1; }
.stat-meta { font-size:11px; color:var(--muted); margin-top:4px; }
.stat-up   { color:var(--green); font-weight:700; }
.stat-down { color:var(--red);   font-weight:700; }
.stat-card.red    .stat-value { color:var(--red); }
.stat-card.orange .stat-value { color:var(--orange); }
.stat-card.green  .stat-value { color:var(--green); }
.stat-card.blue   .stat-value { color:var(--blue); }
.text-red { color:var(--red) !important; }

/* ── LAYOUTS ── */
.two-col       { display:grid; grid-template-columns:1fr 340px; gap:10px; }
.right-col     { display:flex; flex-direction:column; gap:10px; }
.detail-layout { display:grid; grid-template-columns:1fr 320px; gap:10px; }
.detail-main   { min-width:0; }
.detail-sidebar{ display:flex; flex-direction:column; gap:10px; }

/* ── SIDEBAR TABS ── */
.sidebar-tabs { border:1px solid var(--border); background:var(--surface); margin-bottom:10px; }
.stab-header  { display:flex; border-bottom:1px solid var(--border); background:var(--surface2); }
.stab-btn     { flex:1; padding:7px 4px; border:none; background:none; cursor:pointer; font-size:11px;
                font-family:var(--mono); font-weight:600; color:var(--text3); border-bottom:2px solid transparent;
                transition:color .15s,border-color .15s; white-space:nowrap; }
.stab-btn:hover   { color:var(--text); }
.stab-btn.active  { color:var(--accent); border-bottom-color:var(--accent); }
.stab-badge   { display:inline-block; background:var(--border); color:var(--text3); font-size:9px;
                padding:0 4px; border-radius:8px; margin-left:3px; font-weight:700; }
.stab-btn.active .stab-badge { background:var(--accent); color:#fff; }
.stab-panel   { display:none; }
.stab-panel.active { display:block; }

/* ── TABLE ── */
.ticket-table{ width:100%; border-collapse:collapse; font-size:12px; }
.ticket-table thead th{
  text-align:left; padding:6px 8px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  border-right:1px solid rgba(0,0,0,0.08);
  font-family:var(--mono); color:var(--muted); font-weight:700;
}
.ticket-table thead th:last-child{ border-right:none; }
.ticket-table thead th a{ color:var(--muted); }
.ticket-table thead th a:hover{ color:var(--blue); }
.ticket-table tbody tr{ border-top:none; }
.ticket-table tbody tr:hover{ background:#f3f7ff; }
.ticket-table tbody td{ padding:6px 8px; border-bottom:1px solid rgba(0,0,0,0.08); }
.row-urgent{ border-left:3px solid var(--red); }
.ticket-id  { font-family:var(--mono); color:var(--muted); font-size:11px; }
.ticket-title{ font-size:12px; }
.ticket-title a{ color:var(--text); }
.ticket-title a:hover{ color:var(--blue); }
.ticket-sub { font-size:11px; color:var(--muted); margin-top:2px; }
.btn-row{
  font-size:11px; padding:2px 8px;
  border:1px solid var(--border); background:#fff;
  color:var(--text); font-family:var(--mono); border-radius:0;
}
.btn-row:hover{ background:var(--panel2); color:var(--blue); border-color:var(--blue); }

/* Table horizontal scroll on small screens */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

body[data-theme="dark"] .ticket-table thead th{ background:var(--panel); }
body[data-theme="dark"] .ticket-table tbody td{ border-bottom:1px solid rgba(255,255,255,0.07); }
body[data-theme="dark"] .ticket-table tbody tr:hover{ background:#232a33; }
body[data-theme="dark"] .btn-row{ background:#1b2027; }

/* ── TYPE BADGES ── */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:1px 8px; border:1px solid var(--border); background:#fff;
  font-size:11px; font-family:var(--mono); border-radius:0; white-space:nowrap;
}
.badge::before{
  content:''; width:6px; height:6px; border-radius:50%;
  border:1px solid rgba(0,0,0,0.25); flex-shrink:0;
}
.badge.storing::before      { background:var(--red); }
.badge.werkorder::before    { background:var(--blue); }
.badge.onderhoud::before    { background:var(--orange); }
/* current ticket types */
.badge.incident::before     { background:var(--red); }
.badge.change::before       { background:var(--blue); }
.badge.install::before      { background:var(--orange); }
.badge.inspection::before   { background:var(--purple); }
.badge.upgrade::before      { background:var(--green); }
.badge.fusion::before       { background:var(--orange); }
.badge.request::before      { background:var(--blue); }
.badge.test::before         { background:var(--green); }
.badge.klant::before        { background:var(--purple); }
/* role badges */
.badge.beheerder::before    { background:var(--red); }
.badge.projectmanager::before{ background:var(--blue); }
.badge.monteur::before      { background:var(--green); }
.badge.kwaliteitscontrole::before{ background:var(--orange); }
.badge.event::before        { background:var(--purple); } 

body[data-theme="dark"] .badge{ background:#1b2027; }

/* ── STATUS BADGES ── */
.status-badge{
  font-family:var(--mono); font-size:11px; font-weight:700;
  background:none; border:none; padding:0; border-radius:0;
}
.status-badge.nieuw,
.status-badge.open          { color:var(--orange); }
.status-badge.in_behandeling,
.status-badge.in_uitvoering { color:var(--blue); }
.status-badge.opgelost,
.status-badge.gesloten,
.status-badge.afgerond,
.status-badge.fase_8        { color:var(--green); }
.status-badge.geannuleerd   { color:var(--muted); }
.status-badge.actief        { color:var(--green); }
.status-badge.planning      { color:var(--orange); }
.status-badge.on_hold       { color:var(--orange); }

/* ── PRIORITY DOT ── */
.prio-dot{
  display:inline-block; width:8px; height:8px;
  border-radius:50%; border:1px solid rgba(0,0,0,0.25);
}
.prio-dot.prio-kritiek{ background:var(--red); }
.prio-dot.prio-hoog   { background:var(--orange); }
.prio-dot.prio-normaal{ background:var(--muted); }
.prio-dot.prio-laag   { background:var(--green); }

/* ── BUTTONS ── */
.btn-primary{
  height:26px; padding:0 10px;
  border:1px solid var(--blue2);
  background:#cfe2ff;
  cursor:pointer; font-size:12px;
  display:inline-flex; align-items:center; gap:6px;
  border-radius:0; color:var(--text);
}
.btn-primary:hover{ background:#b8d4ff; }

.btn-secondary{
  height:26px; padding:0 10px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text); cursor:pointer; font-size:12px;
  display:inline-flex; align-items:center; gap:6px; border-radius:0;
}
.btn-secondary:hover{ background:var(--panel2); }

.btn-link{
  background:none; border:none;
  color:var(--blue); cursor:pointer; font-size:12px; padding:0;
}

.btn-status{
  height:24px; padding:0 8px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text); font-size:11px; cursor:pointer;
  font-family:var(--mono); border-radius:0;
}
.btn-status:hover{ background:var(--panel2); }
.btn-status-opgelost:hover    { border-color:var(--green); color:var(--green); }
.btn-status-gesloten:hover    { border-color:var(--muted); }
.btn-status-in_uitvoering:hover,
.btn-status-in_behandeling:hover{ border-color:var(--blue); color:var(--blue); }

body[data-theme="dark"] .btn-primary  { background:#16304f; border-color:rgba(85,162,255,0.70); color:var(--text); }
body[data-theme="dark"] .btn-secondary{ color:var(--text); }
body[data-theme="dark"] .btn-status   { color:var(--text); }

/* ── FORMS ── */
.form-group{ display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.form-row  { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.form-label{ font-size:11px; font-weight:700; color:var(--muted); font-family:var(--mono); }
.form-control, select.form-select{
  border:1px solid var(--border); background:#fff; padding:5px 8px;
  color:var(--text); font-size:12px; outline:none; width:100%;
  border-radius:0; box-shadow:none;
}
.form-control:focus, select.form-select:focus{ border-color:var(--blue); }
textarea.form-control{ resize:vertical; min-height:80px; }
.field-error{ font-size:11px; color:var(--red); margin-top:3px; font-family:var(--mono); }

body[data-theme="dark"] .form-control,
body[data-theme="dark"] select.form-select{ background:#131820; color:var(--text); border-color:var(--border); }

/* ── FILTER BAR ── */
.filter-bar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.filter-form{ display:flex; gap:6px; flex-wrap:wrap; flex:1; align-items:center; }
.filter-group select,
.filter-group input{
  height:26px; font-size:12px; min-width:120px;
  border:1px solid var(--border); background:#fff;
  padding:0 8px; border-radius:0; color:var(--text);
}
.btn-filter{
  height:26px; padding:0 10px;
  border:1px solid var(--blue2);
  background:#cfe2ff;
  cursor:pointer; font-size:12px; border-radius:0; white-space:nowrap;
}
.btn-reset{
  height:26px; padding:0 10px;
  border:1px solid var(--border);
  background:var(--panel);
  cursor:pointer; font-size:12px; color:var(--muted); border-radius:0;
  text-decoration:none; display:inline-flex; align-items:center;
}

body[data-theme="dark"] .filter-group select,
body[data-theme="dark"] .filter-group input{ background:#131820; color:var(--text); }
body[data-theme="dark"] .btn-filter{ background:#16304f; border-color:rgba(85,162,255,0.70); color:var(--text); }
body[data-theme="dark"] .btn-reset { color:var(--muted); }

/* ── META LIST ── */
.meta-list{}
.meta-item{
  padding:6px 8px; border-bottom:1px solid var(--border);
  display:flex; align-items:flex-start; gap:8px; font-size:12px;
}
.meta-item:last-child{ border-bottom:none; }
.meta-label{ font-size:11px; color:var(--muted); font-family:var(--mono); min-width:110px; flex-shrink:0; }
.meta-value{ color:var(--text); word-break:break-word; }
.meta-value.mono{ font-family:var(--mono); }

/* ── TIMELINE ── */
.timeline{ padding:8px; display:flex; flex-direction:column; }
.timeline-item{
  display:flex; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--border);
}
.timeline-item:last-child{ border-bottom:none; }
.timeline-item.intern{ background:rgba(208,122,31,0.05); }
.tl-dot    { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px; border:1px solid rgba(0,0,0,0.25); }
.tl-content{ flex:1; min-width:0; }
.tl-header { font-size:11px; color:var(--muted); margin-bottom:3px; font-family:var(--mono); }
.tl-header strong{ color:var(--text); font-weight:600; }
.tl-tekst  { font-size:12px; line-height:1.5; word-break:break-word; }
.tl-reden  { font-size:11px; color:var(--muted); margin-top:3px; }
.tl-time   { font-size:11px; color:var(--muted); font-family:var(--mono); margin-top:4px; }
.intern-badge{
  display:inline-block; background:rgba(208,122,31,0.12);
  color:var(--orange); font-size:10px; padding:0 5px;
  border:1px solid rgba(208,122,31,0.3); font-family:var(--mono); margin-left:5px;
}

/* ── PROJECT ITEMS ── */
.project-item{ padding:8px; border-bottom:1px solid var(--border); cursor:pointer; }
.project-item:last-child{ border-bottom:none; }
.project-item:hover{ background:var(--panel2); }
.proj-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.proj-name  { font-size:12px; font-weight:600; }
.proj-pct   { font-size:12px; font-family:var(--mono); color:var(--blue); font-weight:700; }
.progress-bar { height:3px; background:var(--panel2); border:1px solid var(--border); overflow:hidden; border-radius:0; }
.progress-fill{ height:100%; border-radius:0; }
.proj-meta  { margin-top:4px; display:flex; gap:10px; flex-wrap:wrap; }
.proj-tag   { font-size:11px; color:var(--muted); font-family:var(--mono); }
.proj-tag span{ color:var(--text); }

.project-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; }
.project-card{ border:1px solid var(--border); background:#fff; padding:10px; cursor:pointer; border-radius:0; }
.project-card:hover{ background:var(--panel2); }
.project-card-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.project-code{ font-size:11px; font-family:var(--mono); color:var(--muted); margin-bottom:3px; }
.project-naam{ font-size:13px; font-weight:600; }
.project-meta-row{ display:flex; flex-wrap:wrap; gap:6px; }

body[data-theme="dark"] .project-card      { background:#1b2027; }
body[data-theme="dark"] .project-card:hover{ background:var(--panel2); }

/* ── ASSIGNEE CHIP ── */
.assignee-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border:1px solid var(--border);
  background:var(--panel2); font-size:10px; font-weight:700;
  font-family:var(--mono); border-radius:0;
}

/* ── AVATAR ── */
.avatar{
  width:24px; height:24px; border:1px solid var(--border);
  background:var(--panel); display:flex; align-items:center;
  justify-content:center; font-size:10px; font-weight:700;
  font-family:var(--mono); border-radius:0; flex-shrink:0;
}

/* ── ACTIVITY LIST ── */
.activity-list{}
.activity-item{
  padding:7px 8px; border-bottom:1px solid rgba(0,0,0,0.08);
  display:flex; gap:8px; align-items:flex-start;
  font-size:12px; color:inherit; text-decoration:none;
}
.activity-item:last-child{ border-bottom:none; }
.activity-item:hover{ background:var(--panel2); }
.act-dot  { width:8px; height:8px; border-radius:50%; margin-top:4px; flex-shrink:0; border:1px solid rgba(0,0,0,0.25); }
.act-text { font-size:12px; color:var(--muted); line-height:1.4; }
.act-text strong{ color:var(--text); font-weight:600; }
.act-time { font-size:11px; color:var(--muted); margin-top:2px; font-family:var(--mono); }

body[data-theme="dark"] .activity-item{ border-bottom-color:rgba(255,255,255,0.07); }

/* ── LIVE DOT ── */
@keyframes live-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }
.live-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--green); display:inline-block; flex-shrink:0;
  border:1px solid rgba(0,0,0,0.25);
  animation:live-pulse 1.4s ease-in-out infinite;
}

/* ── CHECKBOX ── */
.ft-checkbox-group{ display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.ft-checkbox{ display:flex; align-items:center; gap:7px; cursor:pointer; font-size:12px; padding:3px 6px; }
.ft-checkbox:hover{ background:var(--panel2); }
.ft-checkbox input{ display:none; }
.ft-checkbox .checkmark{
  width:14px; height:14px; border:1px solid var(--border);
  background:#fff; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; border-radius:0; position:relative;
}
.ft-checkbox .checkmark::after{ content:''; width:8px; height:8px; background:var(--blue); opacity:0; transition:opacity 0.1s; }
.ft-checkbox input:checked + .checkmark{ border-color:var(--blue); }
.ft-checkbox input:checked + .checkmark::after{ opacity:1; }
.ft-checkbox-label{ color:var(--text); font-size:12px; }
body[data-theme="dark"] .ft-checkbox .checkmark{ background:#131820; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.20); border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-track{ background:transparent; }
body[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.12); border:2px solid transparent; background-clip:padding-box; }

/* ── TABLE SCROLL WRAPPER (altijd actief) ── */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   Small Mobile:          320 – 360 px  →  max-width: 360px
   Large Mobile:          390 – 430 px  →  max-width: 430px
   Tablet Portrait:       768 – 800 px  →  max-width: 800px
   Tablet Landscape:     1024 – 1280 px →  max-width: 1280px
   Desktop:              1280 – 1440 px →  (default)
   Large Desktop:        1920 px+       →  min-width: 1920px
═══════════════════════════════════════════════════════════════════════ */

/* ── TABLET LANDSCAPE / SMALL LAPTOP (≤1280px) ── */
@media(max-width:1280px){
  /* Sidebar layouts: narrower right panel */
  .detail-layout            { grid-template-columns:1fr 280px; }
  .two-col                  { grid-template-columns:1fr 300px; }
  /* Inline fixed sidebars: narrow them */
  [style*="grid-template-columns:1fr 480px"] { grid-template-columns:1fr 340px !important; }
  [style*="grid-template-columns:1fr 440px"] { grid-template-columns:1fr 320px !important; }
  [style*="grid-template-columns:1fr 400px"] { grid-template-columns:1fr 300px !important; }
}

/* ── TABLET (≤1024px) ── */
@media(max-width:1024px){
  .stats-grid               { grid-template-columns:repeat(2,1fr); }
  .two-col                  { grid-template-columns:1fr; }
  .detail-layout            { grid-template-columns:1fr; }
  .right-col                { flex-direction:row; flex-wrap:wrap; }
  .right-col > *            { flex:1; min-width:260px; }
  /* Inline min-width → 0 ook op tablet */
  [style*="min-width"]      { min-width:0 !important; }
  /* Builder / wiki tabs scroll */
  .builder-wrap             { grid-template-columns:1fr !important; }
  .rh-panel                 { overflow-x:auto; }
  .rh-tabs, .wiki-tabs      { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .rh-tab,  .wiki-tab       { flex-shrink:0; }
}

/* ── TABLET PORTRAIT (≤800px) ── */
@media(max-width:800px){
  /* ── GEEN horizontale scroll — voelt als een app ─────────────────────── */
  html  { overflow-x:hidden; }
  .frame{ overflow-x:hidden; max-width:100vw; }

  /* Inline min-width overrides → 0 op mobiel */
  [style*="min-width"] { min-width:0 !important; }

  /* Media altijd binnen viewport */
  img, video, iframe { max-width:100% !important; height:auto; }

  /* ── NUCLEAR: alle inline-style display:grid elementen → 1 kolom ────── */
  /* Vangt ELKE inline grid zonder per-patroon selector nodig te hebben.   */
  [style*="display:grid"]       { grid-template-columns:1fr !important; }
  [style*="display:grid"] > *   { min-width:0; grid-column:auto !important; }

  /* ── Klasse-gebaseerde grids (template <style> blokken) ──────────────── */
  .info-grid, .form-grid, .builder-grid, .builder-wrap,
  .inv-grid, .artikel-editor, .ticket-create-grid,
  .parser-grid, .cat-grid, .featured-grid, .klant-stats,
  .perm-row, .pos-grid, .actie-grid, .st-grid, .fs-grid,
  .beheer-layout, .p-detail-layout, .stats-grid,
  .two-col, .detail-layout, .form-row
  { grid-template-columns:1fr !important; }

  .info-grid > *, .form-grid > * { min-width:0; }

  /* Span-2 klassen: volle breedte op 1-kolom grid */
  .info-cel.breed, .inv-cel.breed, .span2 { grid-column:1/-1 !important; }

  /* ── Kaarten: clip overflow; tabel-containers scrollen zelf ──────────── */
  .card            { overflow-x:hidden !important; max-width:100%; }
  .table-scroll    { overflow-x:auto !important; -webkit-overflow-scrolling:touch; max-width:100%; }
  .card > table,
  .card > .table-scroll > table { min-width:0; }

  /* ── Layout ──────────────────────────────────────────────────────────── */
  .right-col    { flex-direction:column; }
  .filter-bar   { flex-direction:column; align-items:stretch; }
  .filter-form  { flex-direction:column; }
  .filter-group select,
  .filter-group input { min-width:0; width:100%; }
  .filter-bar .form-control { min-width:0 !important; flex:1 1 100%; width:100%; }
  .filter-bar .form-select  { min-width:0 !important; width:100%; }
  .btn-filter, .btn-reset   { width:100%; justify-content:center; }
  .project-grid             { grid-template-columns:1fr; }

  /* ── Tables ──────────────────────────────────────────────────────────── */
  .ticket-table              { font-size:11px; }
  .ticket-table thead th,
  .ticket-table tbody td     { padding:4px 6px; }
  .table-scroll              { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* ── Meta / labels ───────────────────────────────────────────────────── */
  .meta-item    { flex-direction:column; gap:2px; }
  .meta-label   { min-width:0; }
  .meta-value, .tl-tekst, .ticket-title { overflow-wrap:break-word; word-break:break-word; }

  /* ── Page header ─────────────────────────────────────────────────────── */
  .page-header  { flex-direction:column; align-items:flex-start; }
  .page-actions { flex-wrap:wrap; width:100%; }
  .page-actions .topbar-btn,
  .page-actions .btn-primary,
  .page-actions .btn-secondary { flex:1; min-width:120px; justify-content:center; }

  /* ── Formulieren ──────────────────────────────────────────────────────── */
  .form-control,
  select.form-select,
  input[type="text"], input[type="search"], input[type="email"],
  input[type="number"], input[type="date"], input[type="datetime-local"],
  input[type="url"], input[type="tel"], textarea { max-width:100%; }

  /* ── Kaart container ──────────────────────────────────────────────────── */
  .kaart-container, #kaart, #map { max-width:100%; }
  #dash-kaart     { height:200px !important; }
  #ticket-kaart   { height:calc(100vh - 260px) !important; min-height:260px !important; }
  #planning-kaart { height:220px !important; }
  #insp-kaart     { height:220px !important; }

  /* ── Tabs scrollen ────────────────────────────────────────────────────── */
  .stab-header   { overflow-x:auto; }
  .stab-btn      { flex-shrink:0; }
  .rh-tabs, .wiki-tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .rh-tab, .wiki-tab   { flex-shrink:0; }
  .kaart-toolbar, .dash-kaart-toolbar {
    overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:6px;
  }
  .kaart-filter-btn { flex-shrink:0; }

  /* ── Ticket detail ────────────────────────────────────────────────────── */
  .vf-rij           { padding:8px 12px; gap:8px; }
  .vf-notes-preview { max-width:100% !important; white-space:normal; overflow:visible; text-overflow:clip; }
  .tab-bar          { border-radius:6px; padding:4px; }
  .tab-btn          { padding:5px 10px; }

  /* ── Formulier bouwer ─────────────────────────────────────────────────── */
  .builder-topbar { flex-direction:column; align-items:stretch; }

  /* ── Wiki ─────────────────────────────────────────────────────────────── */
  .art-header-top  { flex-direction:column; gap:8px; }
  .wiki-code-block { overflow-x:auto; white-space:pre; max-width:100%; }

  /* ── Overig ───────────────────────────────────────────────────────────── */
  .badge         { font-size:10px; padding:1px 5px; }
  .timeline-item { gap:7px; padding:6px 0; }
  .tl-header     { font-size:10.5px; }
}

/* ── MOBIEL (≤768px) ── */
@media(max-width:768px){
  /* alles al gedekt door ≤800px blok hierboven */
  .stats-grid { grid-template-columns:1fr 1fr; gap:6px; }
}

/* ── GROTE MOBIEL (≤430px) ── */
@media(max-width:430px){
  /* Lettergroottes schalen */
  .frame         { font-size:11px; }
  .card-title    { font-size:10.5px; }
  .ticket-table  { font-size:10.5px; }
  .ticket-title  { font-size:10.5px; }
  .ticket-sub, .ticket-id { font-size:9.5px; }
  .meta-label    { font-size:9.5px; }
  .meta-value    { font-size:10.5px; }
  .form-label    { font-size:9.5px; }
  .stat-value    { font-size:16px; }
  .stat-label    { font-size:9.5px; }
  .badge         { font-size:8.5px; }
  .tl-header     { font-size:9.5px; }
  .btn-primary, .btn-secondary, .btn-status { font-size:11.5px; }

  /* Layout */
  .stats-grid    { grid-template-columns:1fr; gap:5px; }
  .frame         { padding:6px; }
  .card-header   { padding:5px 6px; }
  .topbar-btn span:not(.toolicon):not(:first-child) { display:none; }
  .tree-item     { padding:8px 6px; }
  .ticket-table .col-hide-xs { display:none; }
  .bell-dropdown { width:calc(100vw - 20px); right:-10px; }
  .tab-btn       { font-size:11px; padding:4px 8px; }
  .pillbar       { flex-wrap:wrap; }
  .wiki-stat-bar { flex-direction:column; }
  .wiki-stat-bar-item { border-right:none; border-bottom:1px solid var(--border); }
  .wiki-stat-bar-item:last-child { border-bottom:none; }
  #kaart-teller, #dash-kaart-teller { display:none; }
  #dash-kaart     { height:180px !important; }
  #planning-kaart { height:190px !important; }
  #insp-kaart     { height:190px !important; }
  .cat-grid       { grid-template-columns:1fr !important; }
}

/* ── Logo verbergen ≤600px ── */
@media(max-width:600px){
  .brand-badge  { display:none; }
  .brand-title  { display:none; }
}

/* ── KLEINE MOBIEL (≤360px) ── */
@media(max-width:360px){

  /* Nog compacter lettertype */
  .frame         { font-size:10px; padding:4px; }
  .card-title    { font-size:10px; }
  .ticket-table  { font-size:9.5px; }
  .ticket-title  { font-size:10px; }
  .ticket-sub, .ticket-id { font-size:9px; }
  .meta-label    { font-size:9px; }
  .meta-value    { font-size:10px; }
  .form-label    { font-size:9px; }
  .stat-value    { font-size:14px; }
  .stat-label    { font-size:9px; }
  .btn-primary, .btn-secondary { font-size:11px; padding:0 10px; }
  .tab-btn       { font-size:9.5px; padding:3px 6px; }
  .badge         { font-size:8px; padding:1px 4px; }

  /* Layout */
  .card          { padding:6px; }
  .card-header   { padding:4px 6px; }
  .ticket-table thead th,
  .ticket-table tbody td { padding:3px 4px; }
}