:root{--bg:#eef3f8;--nav:#071421;--accent:#1689ff;--card:#fff;--text:#122033;--muted:#718096;--line:#dfe7ef;--ok:#1f9d67;--warn:#d89b21;--danger:#d9534f}
*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{background:var(--nav);color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh}.brand{font-size:22px;font-weight:700;margin-bottom:4px}.brand span{color:var(--accent)}.subtitle{color:#9eb1c4;font-size:12px;margin-bottom:26px}.nav a{display:block;color:#d9e5ef;text-decoration:none;padding:11px 12px;border-radius:9px;margin:3px 0}.nav a:hover,.nav a.active{background:#0d2235;color:#fff}.main{padding:28px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.topbar h1{margin:0;font-size:28px}.user{font-size:14px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 4px 16px rgba(7,20,33,.04)}.kpi strong{display:block;font-size:28px;margin-top:6px}.kpi small{color:var(--muted)}.panel{margin-top:18px}.panel h2{margin-top:0;font-size:18px}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);font-size:14px}.table th{color:var(--muted);font-weight:600}.badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#e9f3ff;color:#0968bf;font-size:12px}.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;border:0;border-radius:9px;padding:10px 14px;font-weight:600}.btn.secondary{background:#eaf0f6;color:var(--text)}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{margin-bottom:14px}.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;padding:10px 11px;border:1px solid #cfd9e3;border-radius:8px;background:#fff;font:inherit}.field textarea{min-height:110px}.actions{display:flex;gap:10px;justify-content:flex-end}.muted{color:var(--muted)}
@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.grid{grid-template-columns:1fr 1fr}.row{grid-template-columns:1fr}}@media(max-width:560px){.grid{grid-template-columns:1fr}.main{padding:16px}}
.login-body{min-height:100vh;background:linear-gradient(135deg,#071421 0%,#0a1f32 52%,#0d2f4d 100%);display:grid;place-items:center;padding:24px}.login-shell{width:min(940px,100%);display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center}.login-brand{color:#fff;padding:24px}.brand.large{font-size:38px}.login-brand p{color:#9eb1c4;font-size:18px}.login-card{background:#fff;border-radius:18px;padding:32px;box-shadow:0 24px 70px rgba(0,0,0,.28)}.login-card h1{margin:0 0 6px}.wide{width:100%}.small{font-size:12px}.alert{padding:11px 13px;border-radius:9px;margin:12px 0}.alert.danger{background:#fff0ef;color:#a62a24;border:1px solid #f4c9c6}.nav-footer{position:absolute;left:16px;right:16px;bottom:20px;border-top:1px solid #173049;padding-top:14px;color:#9eb1c4;font-size:13px}.nav-footer span,.nav-footer a{display:block}.nav-footer a{color:#fff;text-decoration:none;margin-top:6px}.portal-wrap{min-height:100vh}.portal-header{background:var(--nav);color:#fff;padding:18px max(22px,calc((100vw - 1120px)/2));display:flex;align-items:center;justify-content:space-between}.portal-header a{color:#d9e5ef;text-decoration:none}.portal-user{text-align:right;display:grid;gap:2px}.portal-user span{color:#9eb1c4;font-size:12px}.portal-user a{font-size:12px;margin-top:5px}.portal-main{max-width:1120px;margin:0 auto;padding:34px 22px}.portal-main.narrow{max-width:820px}.portal-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;background:linear-gradient(135deg,#fff,#eef6ff);border:1px solid #d8e7f6;border-radius:18px;padding:28px;margin-bottom:22px}.portal-hero h1,.ticket-head h1{margin:3px 0 8px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;color:var(--accent)}.table-link{color:var(--text);text-decoration:none;font-weight:600}.badge.success{background:#e7f7ef;color:#16754f}.hidden{display:none}.portal-enable{background:#f6f9fc;border:1px solid var(--line);padding:14px;border-radius:10px;margin:8px 0 14px}.portal-enable>label{font-weight:600}.ticket-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}.meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.meta-grid>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px}.meta-grid small,.meta-grid strong{display:block}.meta-grid small{color:var(--muted);margin-bottom:5px}.conversation{display:grid;gap:12px;margin:18px 0}.message{max-width:78%;padding:14px 16px;border-radius:14px;border:1px solid var(--line)}.message p{margin:6px 0 0;line-height:1.5}.message small{color:var(--muted)}.customer-message{background:#fff;margin-left:0}.staff-message{background:#eaf4ff;margin-left:auto;border-color:#c9e2fb}.reply-box{margin-top:18px}.reply-box h2{margin-top:0}
@media(max-width:760px){.login-shell{grid-template-columns:1fr;gap:10px}.login-brand{text-align:center}.portal-hero{align-items:flex-start;flex-direction:column}.meta-grid{grid-template-columns:1fr}.message{max-width:94%}.portal-user span{display:none}}

/* Lookermans IT auth / maintenance-inspired house style - V1.2 */
.auth-body{margin:0;min-height:100vh;font-family:Inter,"Segoe UI",Arial,sans-serif;background:#050b13;color:#f4f7fb;overflow-x:hidden;background:radial-gradient(circle at 80% 25%,rgba(0,125,255,.16),transparent 28%),radial-gradient(circle at 15% 80%,rgba(0,174,255,.10),transparent 32%),linear-gradient(135deg,#040910 0%,#07111f 45%,#040910 100%)}
.auth-body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.32;background-image:linear-gradient(rgba(44,130,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(44,130,255,.06) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 90%)}
.auth-glow{position:fixed;width:420px;height:420px;border-radius:50%;filter:blur(90px);background:rgba(0,119,255,.17);top:-120px;right:-120px;pointer-events:none}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:34px 20px;position:relative;z-index:1}
.auth-card{width:min(1080px,100%);overflow:hidden;border:1px solid rgba(93,164,255,.18);background:linear-gradient(180deg,rgba(14,29,47,.92),rgba(7,16,28,.93));border-radius:28px;box-shadow:0 24px 80px rgba(0,0,0,.45);backdrop-filter:blur(16px);position:relative}
.auth-card:after{content:"";position:absolute;width:440px;height:440px;right:-180px;bottom:-220px;border:1px solid rgba(17,137,255,.18);border-radius:50%;box-shadow:0 0 0 65px rgba(17,137,255,.03),0 0 0 130px rgba(17,137,255,.02);pointer-events:none}
.auth-card-small{max-width:760px}
.auth-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 30px;border-bottom:1px solid rgba(55,145,255,.22);background:rgba(4,10,18,.42);position:relative;z-index:2}
.brand-lockup{display:flex;align-items:center;gap:14px;min-width:0}.li-logo{width:54px;height:54px;position:relative;flex:0 0 54px}.li-logo:before,.li-logo:after{content:"";position:absolute;border-radius:7px;transform:skewX(-18deg)}.li-logo:before{width:15px;height:44px;left:12px;top:4px;background:linear-gradient(180deg,#dbe3ec,#8e9aaa);box-shadow:0 6px 20px rgba(0,0,0,.25)}.li-logo:after{width:34px;height:15px;left:17px;top:31px;background:linear-gradient(90deg,#118fff,#0066d8);box-shadow:0 0 24px rgba(22,137,255,.35)}
.brand-copy strong{display:block;font-size:20px;letter-spacing:.03em;white-space:nowrap}.brand-copy strong span{color:#1689ff}.brand-copy small{color:#9eb0c5;letter-spacing:.28em;font-size:9px;text-transform:uppercase;white-space:nowrap}
.auth-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(22,137,255,.10);border:1px solid rgba(22,137,255,.30);color:#dcecff;font-size:13px;white-space:nowrap}.auth-dot{width:9px;height:9px;border-radius:50%;background:#32a1ff;box-shadow:0 0 0 6px rgba(50,161,255,.10),0 0 18px rgba(50,161,255,.75)}
.auth-content{display:grid;grid-template-columns:1.2fr .8fr;position:relative;z-index:2}.auth-main{padding:44px 48px 40px}.auth-side{padding:38px 30px;border-left:1px solid rgba(55,145,255,.22);background:linear-gradient(180deg,rgba(5,13,23,.35),rgba(5,12,21,.84)),repeating-linear-gradient(90deg,transparent 0 34px,rgba(0,120,255,.025) 34px 35px)}
.auth-eyebrow{color:#00b7ff;text-transform:uppercase;letter-spacing:.34em;font-size:12px;font-weight:700;margin-bottom:14px}.auth-main h1,.auth-setup-content h1{margin:0;color:#f4f7fb;font-size:clamp(40px,5vw,62px);line-height:.98;letter-spacing:-.04em}.auth-main h1 span,.auth-setup-content h1 span{color:#1689ff;text-shadow:0 0 32px rgba(22,137,255,.22)}.auth-lead{margin:17px 0 0;max-width:670px;color:#b7c4d4;font-size:16px;line-height:1.6}
.auth-form{margin-top:26px;max-width:540px}.auth-form .field{margin-bottom:16px}.auth-form label{display:block;margin:0 0 8px;color:#dce7f4;font-size:13px;font-weight:600}.auth-form input{width:100%;box-sizing:border-box;border:1px solid rgba(93,164,255,.24);border-radius:13px;padding:14px 15px;background:rgba(4,12,21,.72);color:#f4f7fb;outline:none;transition:.2s;font:inherit}.auth-form input:focus{border-color:#1689ff;box-shadow:0 0 0 4px rgba(22,137,255,.10),0 0 26px rgba(22,137,255,.08)}.auth-form input::placeholder{color:#6f8299}.auth-form small{display:block;color:#9eb0c5;margin-top:7px}
.auth-login-btn,.auth-setup-btn{border:0;background:linear-gradient(135deg,#1689ff,#0572df);box-shadow:0 12px 28px rgba(22,137,255,.22);color:#fff;border-radius:13px;padding:14px 18px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:18px}.auth-login-btn{width:100%;margin-top:4px}.auth-login-btn:hover,.auth-setup-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.auth-alert{margin-top:20px;padding:13px 15px;border-radius:14px;border:1px solid rgba(255,92,92,.28);background:rgba(164,34,34,.15);color:#ffd7d7}.auth-notice{margin-top:22px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:16px;background:rgba(15,31,50,.72);border:1px solid rgba(80,154,255,.16);border-radius:18px}.auth-notice-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,rgba(22,137,255,.22),rgba(0,183,255,.10));border:1px solid rgba(22,137,255,.25);font-size:20px}.auth-notice strong{display:block;margin-bottom:4px}.auth-notice p{margin:0 0 14px;color:#9eb0c5;line-height:1.5}
.server-visual{border:1px solid rgba(65,146,255,.18);border-radius:18px;padding:12px;background:rgba(3,10,17,.58);box-shadow:inset 0 0 35px rgba(0,123,255,.05);margin-bottom:18px}.rack-row{height:40px;border-radius:10px;border:1px solid rgba(126,170,220,.12);background:linear-gradient(180deg,#0e1b2b,#08111d);display:flex;align-items:center;gap:8px;padding:0 12px;margin:7px 0}.rack-row .led{width:7px;height:7px;border-radius:50%;background:#1b8fff;box-shadow:0 0 10px rgba(27,143,255,.9)}.rack-line{height:5px;border-radius:99px;background:#17283b;flex:1}.auth-side h3{margin:20px 0 12px;font-size:13px;letter-spacing:.22em;color:#dfeafa;text-transform:uppercase}.auth-services{display:grid;gap:8px}.auth-services>div{display:flex;align-items:center;justify-content:space-between;color:#b8c6d7;font-size:14px;padding-bottom:8px;border-bottom:1px solid rgba(91,153,230,.08)}.auth-services b{color:#2b9cff;font-weight:400}
.auth-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 24px;border-top:1px solid rgba(55,145,255,.22);color:#8294aa;font-size:12px;background:rgba(3,9,16,.45);position:relative;z-index:2}.auth-footer strong{color:#dce7f4}.auth-setup-content{padding:42px 48px 46px;position:relative;z-index:2}
@media(max-width:800px){.auth-wrap{padding:16px}.auth-topbar{padding:18px 20px}.auth-pill{display:none}.auth-content{grid-template-columns:1fr}.auth-main,.auth-setup-content{padding:30px 22px 28px}.auth-side{border-left:0;border-top:1px solid rgba(55,145,255,.22);padding:24px 22px}.auth-footer{align-items:flex-start;flex-direction:column;padding:14px 18px}.brand-copy small{letter-spacing:.18em}.auth-main h1,.auth-setup-content h1{font-size:42px}}
@media(max-width:480px){.li-logo{width:46px;height:46px;flex-basis:46px;transform:scale(.9)}.brand-copy strong{font-size:17px}.brand-copy small{font-size:8px}.auth-main h1,.auth-setup-content h1{font-size:36px}.auth-notice{grid-template-columns:1fr}}
.success-note{border-color:rgba(50,190,130,.25);background:rgba(30,120,85,.10)}

/* V1.3 - unified Lookermans IT dark service desk theme */
body:not(.auth-body){
  --bg:#050b13;--nav:#07111f;--accent:#1689ff;--card:rgba(10,20,34,.94);--text:#f4f7fb;--muted:#9eb0c5;--line:rgba(55,145,255,.20);
  background:
    radial-gradient(circle at 82% 16%,rgba(0,125,255,.14),transparent 27%),
    radial-gradient(circle at 14% 86%,rgba(0,174,255,.08),transparent 32%),
    linear-gradient(135deg,#040910 0%,#07111f 46%,#040910 100%);
  color:var(--text);min-height:100vh;
}
body:not(.auth-body)::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.24;background-image:linear-gradient(rgba(44,130,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(44,130,255,.05) 1px,transparent 1px);background-size:42px 42px;z-index:0}
.app,.portal-wrap{position:relative;z-index:1;background:transparent}
.app{grid-template-columns:250px 1fr}
.sidebar{background:rgba(5,14,24,.94);border-right:1px solid var(--line);box-shadow:18px 0 60px rgba(0,0,0,.16);padding:24px 16px}
.sidebar .brand{font-size:22px;letter-spacing:.02em;color:#f4f7fb}.sidebar .brand span{color:var(--accent)}
.subtitle{color:#7f94ab;letter-spacing:.12em;text-transform:uppercase;font-size:10px}
.nav a{color:#c7d5e4;border:1px solid transparent;transition:.18s ease}.nav a:hover,.nav a.active{background:linear-gradient(90deg,rgba(22,137,255,.16),rgba(22,137,255,.06));border-color:rgba(22,137,255,.20);color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.nav-footer{border-color:var(--line);color:#7f94ab}.nav-footer a{color:#dcecff}
.main{padding:30px 34px}.topbar{padding:0 0 8px;margin-bottom:22px}.topbar h1{color:#f4f7fb;font-size:30px;letter-spacing:-.03em}.user{color:#9eb0c5}
.grid{gap:14px}.card,.panel,.meta-grid>div,.portal-hero{background:linear-gradient(180deg,rgba(14,29,47,.92),rgba(7,16,28,.94));border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.18);color:var(--text)}
.card{border-radius:18px}.kpi{position:relative;overflow:hidden}.kpi:after{content:"";position:absolute;width:90px;height:90px;right:-28px;bottom:-36px;border:1px solid rgba(22,137,255,.14);border-radius:50%;box-shadow:0 0 0 20px rgba(22,137,255,.025)}.kpi strong{color:#fff}.kpi small{color:#8fa4bb;text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.panel{border-radius:18px}.panel h2{color:#f4f7fb}.table{color:#dbe5ef}.table th,.table td{border-color:rgba(55,145,255,.12)}.table th{color:#8fa4bb;text-transform:uppercase;letter-spacing:.06em;font-size:11px}.table tbody tr:hover{background:rgba(22,137,255,.055)}
.table-link{color:#dcecff}.table-link:hover{color:#59b2ff}.badge{background:rgba(22,137,255,.14);border:1px solid rgba(22,137,255,.24);color:#9fd0ff}.badge.success{background:rgba(40,175,120,.12);border-color:rgba(40,175,120,.24);color:#8fe0bc}
.btn{background:linear-gradient(135deg,#1689ff,#0572df);border:1px solid rgba(87,173,255,.25);border-radius:11px;box-shadow:0 10px 24px rgba(22,137,255,.18);transition:.18s ease}.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.btn.secondary{background:rgba(19,37,58,.82);color:#dce7f4;border:1px solid var(--line);box-shadow:none}
.field label{color:#cdd9e5}.field input,.field select,.field textarea{background:rgba(4,12,21,.78);border:1px solid rgba(93,164,255,.24);color:#f4f7fb;border-radius:11px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#1689ff;box-shadow:0 0 0 4px rgba(22,137,255,.09)}.field option{background:#081421;color:#fff}.muted{color:#8fa4bb}
.portal-header{background:rgba(5,14,24,.94);border-bottom:1px solid var(--line);box-shadow:0 12px 38px rgba(0,0,0,.18)}.portal-header a{color:#dcecff}.portal-main{position:relative;z-index:1}.portal-hero{background:linear-gradient(135deg,rgba(14,29,47,.94),rgba(8,24,41,.94))}.portal-hero h1,.ticket-head h1{color:#f4f7fb}.eyebrow{color:#00b7ff}.meta-grid small{color:#8fa4bb}.message{border-color:var(--line);color:#dce7f4}.customer-message{background:rgba(10,20,34,.94)}.staff-message{background:rgba(13,44,72,.86);border-color:rgba(22,137,255,.24)}.portal-enable{background:rgba(8,20,34,.78);border-color:var(--line)}
.alert.danger{background:rgba(164,34,34,.15);color:#ffd7d7;border-color:rgba(255,92,92,.28)}
@media(max-width:900px){.sidebar{border-right:0;border-bottom:1px solid var(--line);height:auto}.main{padding:22px 18px}.nav-footer{position:static;margin-top:18px}}
/* V1.4 ticket workflow */
.quick-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}.chip{display:inline-flex;padding:8px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(8,20,34,.72);color:#b9c9d9;text-decoration:none;font-size:12px}.chip:hover,.chip.active{background:rgba(22,137,255,.16);border-color:rgba(22,137,255,.38);color:#fff}.filter-card{margin-bottom:14px;padding:14px 16px}.filter-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr) auto;gap:10px;align-items:end}.filter-grid .field{margin:0}.filter-actions{display:flex;gap:8px;align-items:center;padding-bottom:1px}.table-wrap{overflow:auto}.ticket-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}.ticket-side{align-self:start}.ticket-side h2,.card h2{margin-top:0}.assign-form{margin-top:10px}.soft{border:0;border-top:1px solid var(--line);margin:20px 0}.meta-list{display:grid;gap:14px}.meta-list small{display:block;color:var(--muted);margin-bottom:3px}.meta-list strong{font-size:14px}.kpi-link{text-decoration:none}.grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1200px){.filter-grid{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.filter-grid{grid-template-columns:1fr}.ticket-layout{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}}

/* V1.5 - klanten/contactpersonen: aanmaken en opzoeken gescheiden */
.nav-group{margin:5px 0 8px;padding:5px 0;border-top:1px solid rgba(55,145,255,.08)}
.nav-label{padding:9px 11px 5px;color:#e7f1fb;font-size:13px;font-weight:700}
.nav-group .sub{margin:2px 0 2px 8px;padding:8px 10px;font-size:12px;color:#96abc0}
.nav-group .sub.active,.nav-group.active .sub:hover{color:#fff}
.form-card{max-width:980px}
.customer-search-grid{display:grid;grid-template-columns:minmax(280px,2fr) minmax(170px,.7fr) auto;gap:10px;align-items:end}.contact-search-grid{display:grid;grid-template-columns:minmax(260px,2fr) minmax(160px,.8fr) minmax(150px,.6fr) auto;gap:10px;align-items:end}
.row-actions{white-space:nowrap;text-align:right}.row-actions a{display:inline-block;color:#8fc9ff;text-decoration:none;margin-left:10px;font-size:12px}.row-actions a:hover{color:#fff;text-decoration:underline}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.compact-list{display:grid;gap:8px}.compact-list>a{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;padding:11px 12px;border:1px solid rgba(55,145,255,.13);border-radius:12px;background:rgba(5,15,26,.45);color:#e4edf6}.compact-list>a:hover{border-color:rgba(22,137,255,.35);background:rgba(22,137,255,.08)}.compact-list strong{display:block}.compact-list small{display:block;color:#8fa4bb;margin-top:3px}.success-alert{padding:12px 14px;margin-bottom:14px;border-radius:12px;border:1px solid rgba(40,175,120,.24);background:rgba(40,175,120,.10);color:#a7e8c9}
@media(max-width:900px){.customer-search-grid,.contact-search-grid{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.top-actions{justify-content:flex-start}.row-actions{white-space:normal}}

/* v1.6 mail/conversation */
.notice.success{border:1px solid rgba(34,197,94,.35);background:rgba(34,197,94,.10);color:#c8f7d6;padding:14px 16px;border-radius:14px;margin-bottom:16px}
.notice.error{border:1px solid rgba(239,68,68,.38);background:rgba(239,68,68,.10);color:#ffd4d4;padding:14px 16px;border-radius:14px;margin-bottom:16px}
.template-editor{padding:16px 0}.template-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.badge{display:inline-flex;padding:5px 9px;border:1px solid rgba(22,137,255,.28);border-radius:999px;background:rgba(22,137,255,.08);color:#b9d9ff;font-size:12px}.check{display:flex;gap:9px;align-items:center;color:#b7c4d4;margin:10px 0 14px}.conversation-item{padding:16px;margin:12px 0;border-radius:14px;border:1px solid rgba(80,154,255,.16);background:rgba(6,17,31,.62)}.conversation-item.inbound{border-left:3px solid #1689ff}.conversation-item.outbound{border-left:3px solid #22c55e}.conversation-item.internal{border-left:3px solid #f59e0b;background:rgba(75,49,4,.12)}.conversation-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}.conversation-head span{color:#8294aa;font-size:12px}.conversation-body{color:#d7e2ee;line-height:1.65;margin-top:8px}.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}@media(max-width:900px){.dashboard-grid{grid-template-columns:1fr}}

/* v1.6.5 - ticket compose tools + silent ticket creation */
.editor-toolbar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 7px}.editor-toolbar button,.mini-action{appearance:none;border:1px solid rgba(93,164,255,.24);background:rgba(8,25,42,.86);color:#cfe2f4;border-radius:8px;padding:6px 9px;font:600 12px/1 Segoe UI,Arial,sans-serif;cursor:pointer}.editor-toolbar button:hover,.mini-action:hover{border-color:rgba(22,137,255,.55);background:rgba(22,137,255,.14);color:#fff}.editor-help{display:block;margin:-7px 0 10px;line-height:1.5}.message-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid rgba(55,145,255,.08)}.message-compose .btn{margin-top:2px}.message-list{margin:7px 0 7px 20px;padding:0}.message-list li{margin:4px 0}.ticket-create-actions{flex-wrap:wrap}.form-hint{text-align:right;margin:9px 0 0;font-size:12px;line-height:1.55}.form-hint strong{color:#cfe2f4}@media(max-width:700px){.ticket-create-actions{justify-content:stretch}.ticket-create-actions .btn{width:100%;text-align:center}.form-hint{text-align:left}}


/* V1.6.6 categories + message editing */
.message-edit-form{margin-top:12px;padding:14px;border:1px solid rgba(22,137,255,.24);border-radius:12px;background:rgba(4,14,25,.68)}
.message-edit-form[hidden]{display:none!important}.message-edit-form textarea{min-height:120px}.edited-label{font-style:italic}.category-row{padding:12px 0}.category-main{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr);gap:14px}.category-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:8px}.category-row .field{margin-bottom:6px}@media(max-width:760px){.category-main{grid-template-columns:1fr}.category-actions{justify-content:stretch;flex-wrap:wrap}.category-actions .btn{width:100%}}


/* V1.6.7 beheer + accountknop rechtsboven */
.staff-user-menu{position:fixed;top:18px;right:24px;z-index:1000;display:flex;align-items:center;gap:12px;padding:8px 9px 8px 14px;background:rgba(7,20,33,.94);border:1px solid rgba(55,145,255,.28);border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.32);backdrop-filter:blur(10px)}
.staff-user-meta{display:flex;flex-direction:column;line-height:1.15;text-align:right}.staff-user-meta strong{font-size:13px;color:#f4f7fb}.staff-user-meta span{font-size:10px;color:#9eb0c5;text-transform:uppercase;letter-spacing:.08em}.logout-btn{display:inline-flex;align-items:center;padding:9px 12px;border-radius:10px;background:#0d1a2a;border:1px solid rgba(55,145,255,.25);color:#dcecff;text-decoration:none;font-weight:700;font-size:12px}.logout-btn:hover{background:#13263c;border-color:#1689ff;color:#fff}
.admin-shortcuts{margin-bottom:18px}.admin-tile{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;min-height:125px}.admin-tile strong{font-size:24px;color:#f4f7fb}.admin-tile span{color:#9eb0c5;font-size:13px}.admin-columns{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:18px}.inline-form{display:inline-flex;gap:6px;vertical-align:middle;margin:2px}.password-form input{width:145px;padding:8px 10px}.btn.small{padding:8px 10px;font-size:12px}.form-stack{display:grid;gap:13px}.form-stack label{display:grid;gap:6px;color:#c7d6e7;font-size:13px}.form-stack input,.form-stack select,.password-form input{background:#071421;color:#f4f7fb;border:1px solid rgba(55,145,255,.24);border-radius:10px}.form-stack input,.form-stack select{padding:11px 12px}.admin-links{display:grid;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(55,145,255,.16)}.admin-links a{color:#59b2ff;text-decoration:none}.notice{padding:12px 14px;border-radius:12px;margin:0 0 16px}.notice.success{background:rgba(29,185,120,.12);border:1px solid rgba(29,185,120,.28)}.notice.error{background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.28)}
@media(max-width:900px){.staff-user-menu{top:10px;right:10px}.staff-user-meta{display:none}.admin-columns{grid-template-columns:1fr}.main{padding-top:68px}}

/* V1.6.10 - top actions + contact management */
@media(min-width:901px){
  .main > .topbar{padding-right:285px;min-height:58px;align-items:flex-start}
  .main > .topbar .top-actions{max-width:calc(100% - 20px)}
}
.btn.danger{background:#7f1d1d;color:#fff;border:1px solid rgba(248,113,113,.4)}
.btn.danger:hover{background:#991b1b;border-color:#f87171}
.btn.warning{background:#8a5a08;color:#fff;border:1px solid rgba(245,158,11,.45)}
.btn.warning:hover{background:#a16207}
.badge.inactive{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.28)}
.badge.active{background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.28)}
.delete-warning{border:1px solid rgba(239,68,68,.35);background:rgba(127,29,29,.12);border-radius:14px;padding:16px;margin-bottom:18px}
.delete-warning strong{color:#fecaca}
.contact-status-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
@media(max-width:900px){.main > .topbar{padding-top:58px}.staff-user-menu{z-index:1200}}

/* V1.6.11 - vaste gebruikersrij boven de pagina-acties
   De account-/uitlogkaart behoudt zijn vaste positie rechtsboven.
   De hoofdcontent reserveert op desktop een eigen bovenste rij, zodat
   paginatitels en actieknoppen er nooit meer onder kunnen schuiven. */
@media(min-width:901px){
  .main{padding-top:94px}
  .main > .topbar{
    padding-right:0;
    padding-top:0;
    min-height:0;
    align-items:center;
  }
  .main > .topbar .top-actions{
    max-width:none;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
  }
  .staff-user-menu{
    top:18px;
    right:34px;
  }
}
@media(max-width:900px){
  .main{padding-top:82px}
  .main > .topbar{padding-top:0}
  .main > .topbar .top-actions{display:flex;gap:8px;flex-wrap:wrap}
}

.attachment-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.attachment-chip{display:inline-flex;gap:7px;align-items:center;padding:7px 10px;border:1px solid rgba(22,137,255,.28);border-radius:10px;background:rgba(22,137,255,.08);color:#b9dcff;text-decoration:none;font-size:13px}.attachment-chip:hover{border-color:#1689ff;background:rgba(22,137,255,.14)}.attachment-chip small{color:#8294aa}

/* V1.7.1 Kostenregistratie */
.cost-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.cost-summary>div{padding:10px;border:1px solid var(--line,#24384f);border-radius:10px;background:rgba(22,137,255,.06)}.cost-summary small,.cost-summary strong{display:block}.cost-summary strong{margin-top:3px}.cost-form{margin-top:10px}@media(max-width:900px){.cost-summary{grid-template-columns:1fr}}

/* V1.7.2 Self Service informatie */
.service-info{border:1px solid rgba(22,137,255,.28);background:linear-gradient(135deg,rgba(22,137,255,.10),rgba(0,183,255,.04));margin-bottom:18px}
.service-info h2{margin:4px 0 8px}.service-info p{margin:0;line-height:1.65}.service-info.compact{padding:16px;border-radius:12px;margin:14px 0}.service-info.compact p{margin-top:8px}

/* V1.7.4 - responsive mobiel/tablet */
html,body{max-width:100%;overflow-x:hidden}.main,.portal-main,.card,.panel{min-width:0}.table-wrap{-webkit-overflow-scrolling:touch}
@media(max-width:900px){
  .app{display:block;min-height:100vh}
  .sidebar{position:relative;top:auto;width:100%;height:auto;padding:14px 14px 10px;overflow:visible}
  .sidebar .brand{font-size:20px}.sidebar .subtitle{margin:2px 0 10px}
  .sidebar .nav{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .sidebar .nav>a,.sidebar .nav-group{flex:0 0 auto;margin:0}
  .sidebar .nav>a{white-space:nowrap;padding:9px 11px}
  .sidebar .nav-group{display:flex;align-items:center;gap:4px;border:1px solid rgba(55,145,255,.12);border-radius:10px;padding:3px}
  .sidebar .nav-group .nav-label{display:none}
  .sidebar .nav-group a.sub{white-space:nowrap;margin:0;padding:7px 9px}
  .sidebar .nav-footer{position:static;margin:6px 0 0;padding:8px 2px 0;display:flex;gap:12px;justify-content:space-between}
  .main{padding:18px 14px!important}
  .main>.topbar{padding:0!important;margin-bottom:16px;display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
  .topbar h1{font-size:24px;line-height:1.15}.top-actions{width:100%;justify-content:flex-start!important}
  .staff-user-menu{position:static;margin:0 14px 12px;display:flex;justify-content:space-between;border-radius:12px}.staff-user-meta{display:flex;text-align:left}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ticket-layout{grid-template-columns:1fr}.ticket-side{order:2}
  .filter-grid{grid-template-columns:1fr 1fr}.filter-actions{grid-column:1/-1}
  .actions{flex-wrap:wrap}.conversation-head{flex-wrap:wrap}.conversation-body{overflow-wrap:anywhere}.attachment-chip{max-width:100%;overflow-wrap:anywhere}
}
@media(max-width:600px){
  .main{padding:14px 10px!important}.card,.panel{padding:14px;border-radius:14px}.grid{grid-template-columns:1fr;gap:10px}
  .topbar{display:block!important}.topbar>.btn{margin-top:10px;width:100%;text-align:center}.top-actions{margin-top:10px;display:grid!important;grid-template-columns:1fr 1fr}.top-actions .btn{text-align:center;margin:0}
  .row,.detail-grid,.dashboard-grid,.meta-grid,.cost-summary{grid-template-columns:1fr!important}.filter-grid,.customer-search-grid,.contact-search-grid{grid-template-columns:1fr!important}.filter-actions{display:grid;grid-template-columns:1fr 1fr}.filter-actions .btn{text-align:center}
  .table{min-width:680px}.table th,.table td{padding:10px 8px}.row-actions a{margin:4px 10px 4px 0}
  .actions{display:grid;grid-template-columns:1fr;width:100%}.actions .btn{text-align:center;width:100%}.inline-form{max-width:100%;flex-wrap:wrap}.password-form input{width:100%}
  .message{max-width:100%}.conversation-item{padding:13px}.editor-toolbar button{min-height:36px}.field input,.field select,.field textarea,.form-stack input,.form-stack select{font-size:16px}
  .portal-header{padding:14px 12px;gap:10px}.portal-header .brand{font-size:18px}.portal-main{padding:18px 10px}.portal-hero{padding:18px}.portal-hero .btn{width:100%;text-align:center}.ticket-head{flex-direction:column;gap:10px}.ticket-head .btn{width:100%;text-align:center}
  .portal-user{max-width:45%;overflow-wrap:anywhere}.portal-main .table{min-width:620px}
  .login-body{padding:12px}.login-shell{width:100%}.login-card{padding:22px 16px}.login-brand{padding:10px}.brand.large{font-size:30px}
  .auth-wrap{padding:12px}.auth-card{border-radius:18px}.auth-topbar{padding:16px;align-items:flex-start}.auth-pill{display:none}.brand-copy strong{font-size:17px}.brand-copy small{letter-spacing:.16em}.li-logo{transform:scale(.85);transform-origin:left top}
  .auth-content{grid-template-columns:1fr}.auth-main{padding:28px 18px}.auth-main h1,.auth-setup-content h1{font-size:38px}.auth-side{display:none}.auth-footer{padding:14px 18px;gap:8px;flex-direction:column}.auth-form{max-width:none}
}
@media(max-width:380px){.top-actions{grid-template-columns:1fr}.filter-actions{grid-template-columns:1fr}.sidebar .nav>a{padding:8px 9px;font-size:13px}.staff-user-menu{margin-left:10px;margin-right:10px}}


/* V1.7.6 - mobiele navigatie en volledige ticketkaarten */
.mobile-menu-toggle{display:none}
@media(max-width:900px){
  .mobile-menu-toggle{display:flex;position:fixed;left:10px;top:10px;z-index:1500;height:44px;align-items:center;padding:0 13px;border:1px solid rgba(87,173,255,.5);border-radius:11px;background:#1689ff;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.28);font:inherit;font-weight:700;cursor:pointer}
  .mobile-menu-toggle span{display:block;width:17px;height:2px;background:#fff;border-radius:2px;position:absolute;left:12px}
  .mobile-menu-toggle span:nth-child(1){transform:translateY(-6px)}.mobile-menu-toggle span:nth-child(2){transform:none}.mobile-menu-toggle span:nth-child(3){transform:translateY(6px)}
  .mobile-menu-toggle b{margin-left:25px;font-size:13px}
  .sidebar{display:none!important;position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:min(88vw,330px)!important;height:100dvh!important;z-index:1450!important;padding:68px 14px 20px!important;overflow-y:auto!important;background:#0b1d30!important;border-right:1px solid rgba(87,173,255,.35)!important;box-shadow:22px 0 60px rgba(0,0,0,.5)!important}
  body.mobile-menu-open .sidebar{display:block!important}
  body.mobile-menu-open:after{content:"";position:fixed;inset:0;z-index:1400;background:rgba(0,0,0,.55);pointer-events:none}
  .sidebar .brand{color:#fff!important}.sidebar .subtitle{color:#a9bfd3!important}
  .sidebar .nav{display:block!important;overflow:visible!important;padding:0!important}
  .sidebar .nav>a,.sidebar .nav-group a.sub{display:block!important;color:#e7f2fc!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(122,184,238,.10)!important;border-radius:9px!important;margin:5px 0!important;padding:11px 12px!important;pointer-events:auto!important}
  .sidebar .nav>a:hover,.sidebar .nav>a.active,.sidebar .nav-group a.sub:hover{background:rgba(22,137,255,.20)!important;border-color:rgba(80,170,255,.35)!important;color:#fff!important}
  .sidebar .nav-group{display:block!important;border:0!important;padding:0!important;margin:10px 0!important}.sidebar .nav-group .nav-label{display:block!important;color:#8fa9c1!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.08em!important;padding:8px 12px 2px!important}
  .sidebar .nav-footer{display:block!important;position:static!important;margin-top:18px!important;color:#9fb4c8!important}.sidebar .nav-footer a{color:#fff!important}
  .staff-user-menu{position:fixed!important;top:10px!important;right:10px!important;margin:0!important;z-index:1500!important;height:44px!important;padding:5px 6px 5px 10px!important}.staff-user-meta{display:none!important}.logout-btn{padding:8px 10px!important}
  .main{padding-top:70px!important}.main>.topbar{padding-top:0!important}
  .table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
}
@media(max-width:600px){
  .ticket-list-wrap{overflow:visible!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
  .ticket-list-table{min-width:0!important;width:100%!important;display:block!important;color:#dbe5ef!important}.ticket-list-table thead{display:none!important}.ticket-list-table tbody{display:grid!important;gap:10px!important}.ticket-list-table tr{display:block!important;background:linear-gradient(180deg,rgba(14,29,47,.96),rgba(7,16,28,.97))!important;border:1px solid rgba(55,145,255,.22)!important;border-radius:14px!important;padding:13px 14px!important;color:#dbe5ef!important}.ticket-list-table td{display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;gap:8px!important;border:0!important;border-bottom:1px solid rgba(55,145,255,.08)!important;padding:7px 0!important;min-width:0!important;overflow-wrap:anywhere!important;color:#dbe5ef!important}.ticket-list-table td:last-child{border-bottom:0!important}.ticket-list-table td:before{color:#8299af!important;font-size:10px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.05em!important;align-self:center!important}.ticket-list-table td:nth-child(1):before{content:"Ticket"}.ticket-list-table td:nth-child(2):before{content:"Onderwerp"}.ticket-list-table td:nth-child(3):before{content:"Klant"}.ticket-list-table td:nth-child(4):before{content:"Status"}.ticket-list-table td:nth-child(5):before{content:"Prioriteit"}.ticket-list-full td:nth-child(6):before{content:"Behandelaar"}.ticket-list-full td:nth-child(7):before{content:"Bijgewerkt"}.ticket-list-mine td:nth-child(6):before{content:"Bijgewerkt"}.ticket-list-table td:nth-child(n+5){display:grid!important}.ticket-list-table td[colspan]{display:block!important}.ticket-list-table td[colspan]:before{content:none!important}.ticket-list-table .table-link{color:#dcecff!important}.ticket-list-table .badge{justify-self:start!important}
}

/* V1.7.7 - definitive mobile staff layout */
@media(max-width:900px){
  body{overflow-x:hidden!important}
  .app{display:block!important;width:100%!important;max-width:100vw!important;min-width:0!important}
  .main{width:100%!important;max-width:100vw!important;min-width:0!important;padding:76px 12px 20px!important;overflow:hidden!important}
  .main>*{max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
  .main>.topbar{padding:0!important;margin-bottom:14px!important;min-height:0!important}
  .main>.topbar h1{font-size:24px!important}

  .mobile-menu-toggle{display:flex!important;position:fixed!important;left:10px!important;top:10px!important;z-index:3100!important;height:48px!important;align-items:center!important;padding:0 14px!important;border:1px solid rgba(110,194,255,.65)!important;border-radius:12px!important;background:#1689ff!important;color:#fff!important;box-shadow:0 8px 24px rgba(0,0,0,.35)!important;cursor:pointer!important;pointer-events:auto!important}
  .staff-user-menu{position:fixed!important;top:10px!important;right:10px!important;z-index:3100!important;height:48px!important;margin:0!important;padding:6px!important;background:#0b1d30!important;pointer-events:auto!important}
  .logout-btn{pointer-events:auto!important}

  .sidebar{display:block!important;visibility:hidden!important;transform:translateX(-105%)!important;transition:transform .18s ease,visibility .18s!important;position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:min(86vw,320px)!important;height:100dvh!important;z-index:3000!important;padding:74px 14px 24px!important;overflow-y:auto!important;background:#10283e!important;border-right:1px solid rgba(87,173,255,.45)!important;box-shadow:24px 0 60px rgba(0,0,0,.55)!important;pointer-events:auto!important}
  body.mobile-menu-open .sidebar{visibility:visible!important;transform:translateX(0)!important}
  body.mobile-menu-open:after{display:none!important;content:none!important}
  .sidebar .brand{font-size:22px!important;color:#fff!important}.sidebar .subtitle{color:#b6cce0!important}
  .sidebar .nav,.sidebar .nav-group{display:block!important;pointer-events:auto!important}
  .sidebar .nav a,.sidebar .nav-group a.sub{display:block!important;position:relative!important;z-index:1!important;color:#fff!important;background:#16344f!important;border:1px solid rgba(122,184,238,.18)!important;border-radius:10px!important;margin:6px 0!important;padding:12px 13px!important;text-decoration:none!important;pointer-events:auto!important;touch-action:manipulation!important}
  .sidebar .nav a.active,.sidebar .nav a:hover,.sidebar .nav a:focus{background:#1689ff!important;border-color:#55b1ff!important;color:#fff!important}
  .sidebar .nav-label{color:#a9bfd3!important}

  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .card,.panel{width:100%!important;max-width:100%!important;min-width:0!important;padding:14px!important;overflow:hidden!important}
  .panel>.topbar{display:flex!important;align-items:flex-start!important;gap:10px!important;flex-wrap:wrap!important}
  .panel>.topbar .btn{width:100%!important;text-align:center!important}

  .main .table-wrap{overflow:visible!important;width:100%!important;max-width:100%!important}
  .main table.table.mobile-card-table{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;border:0!important}
  .main table.table.mobile-card-table thead{display:none!important}
  .main table.table.mobile-card-table tbody{display:grid!important;width:100%!important;gap:10px!important}
  .main table.table.mobile-card-table tr{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:12px 13px!important;border:1px solid rgba(55,145,255,.22)!important;border-radius:13px!important;background:rgba(7,20,33,.72)!important;box-sizing:border-box!important;overflow:hidden!important}
  .main table.table.mobile-card-table td{display:grid!important;grid-template-columns:minmax(82px,30%) minmax(0,1fr)!important;gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:7px 0!important;border:0!important;border-bottom:1px solid rgba(55,145,255,.09)!important;box-sizing:border-box!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  .main table.table.mobile-card-table td:last-child{border-bottom:0!important}
  .main table.table.mobile-card-table td:before{content:attr(data-label)!important;color:#8fa4bb!important;font-size:10px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.05em!important;min-width:0!important}
  .main table.table.mobile-card-table td[colspan]{display:block!important;text-align:left!important}.main table.table.mobile-card-table td[colspan]:before{display:none!important}
  .main table.table.mobile-card-table .row-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}.main table.table.mobile-card-table .row-actions:before{width:100%!important}
  .main table.table.mobile-card-table a,.main table.table.mobile-card-table span,.main table.table.mobile-card-table strong{max-width:100%!important;overflow-wrap:anywhere!important}
}
@media(max-width:520px){
  .grid{grid-template-columns:1fr!important}
  .main{padding-left:10px!important;padding-right:10px!important}
  .main table.table.mobile-card-table td{grid-template-columns:78px minmax(0,1fr)!important}
}

/* V1.8 servicebonnen */
.service-report-entry{padding:12px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}.service-report-entry .actions{display:flex;flex-wrap:wrap;gap:8px}.service-report-entry .actions form{margin:0}.service-report-entry .btn{white-space:normal}

/* V1.8.4: servicebon bronselectie */
.service-report-sources{margin:12px 0;padding:12px;border:1px solid rgba(55,145,255,.22);border-radius:10px}.service-report-sources summary{cursor:pointer;font-weight:600}.service-report-source{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(55,145,255,.12)}.service-report-source input{flex:none;margin-top:5px}.service-report-source span{display:block;min-width:0;overflow-wrap:anywhere}.service-report-source small{display:block;margin-bottom:3px}

/* V1.8.6 - staff logo and consistent ticket links */
.sidebar-logo{display:block;max-width:225px;margin:0 0 6px;text-decoration:none}
.sidebar-logo img{display:block;width:100%;height:auto;max-height:125px;object-fit:contain;object-position:left center}
.sidebar-subtitle{margin:0 0 22px!important}
.main a:not(.btn):not(.button):not(.badge){color:#56b1ff!important;text-decoration:none!important;text-underline-offset:3px}
.main a:not(.btn):not(.button):not(.badge):hover,.main a:not(.btn):not(.button):not(.badge):focus-visible{color:#b1dfff!important;text-decoration:underline!important}
.main a:visited:not(.btn):not(.button):not(.badge){color:#56b1ff!important}
@media(max-width:900px){.sidebar-logo{max-width:205px}.sidebar-logo img{max-height:112px}}

/* V1.8.7 Statistieken */
.stat-filter{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.stat-filter select{background:#0d1a2a;color:#f4f7fb;border:1px solid rgba(55,145,255,.35);border-radius:9px;padding:10px}.stat-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}.stat-layout h2{margin-top:0}.stat-row{display:grid;grid-template-columns:minmax(90px,1fr) minmax(70px,2fr) 38px;align-items:center;gap:10px;margin:14px 0;font-size:13px}.stat-row>span{overflow-wrap:anywhere}.stat-track{height:12px;background:#0a1422;border-radius:99px;overflow:hidden;border:1px solid rgba(55,145,255,.18)}.stat-fill{height:100%;background:linear-gradient(90deg,#1689ff,#00b7ff);border-radius:99px}.stat-row strong{text-align:right;font-variant-numeric:tabular-nums}@media(max-width:900px){.stat-layout{grid-template-columns:1fr}.stat-row{grid-template-columns:minmax(75px,1fr) minmax(60px,1.5fr) 30px}}

/* V1.9.1 */
.dashboard-settings{margin-bottom:16px}.dashboard-settings summary{cursor:pointer;list-style-position:inside}.dashboard-settings form{margin-top:16px}.dashboard-checks{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 16px}.dashboard-checks label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}

/* V2.0 */
.print-message{padding:12px 0;border-bottom:1px solid rgba(100,150,210,.25)}
.v2-preview{margin:10px 0;padding:14px;background:#0d1a2a}
@media print{.sidebar,.no-print,.topbar,.staff-top-user,button,.nav{display:none!important}.main{margin:0!important;padding:0!important;width:100%!important;color:#111!important}.card{background:white!important;color:#111!important;box-shadow:none!important;border:0!important}.print-ticket{color:#111!important}body{background:white!important;color:#111!important}}

/* V2.0.1: sidebar always scrolls independently when menu grows */
@media (min-width:901px){
  .sidebar{position:sticky;top:0;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#315777 #071421;}
  .sidebar .nav-footer{position:static;left:auto;right:auto;bottom:auto;margin-top:22px;padding-bottom:10px;}
}
.sidebar::-webkit-scrollbar{width:7px}
.sidebar::-webkit-scrollbar-thumb{background:#315777;border-radius:10px}
.sidebar::-webkit-scrollbar-track{background:transparent}

/* V2.3 */
.v23-board{display:flex;gap:14px;overflow-x:auto;align-items:stretch;padding-bottom:20px}.v23-column{background:#0d2035;border:1px solid #25445f;border-radius:12px;padding:12px;min-width:235px;max-width:290px;flex:1}.v23-column h2{font-size:17px}.v23-tile{background:#112b45;border:1px solid #315777;border-radius:9px;padding:12px;margin:10px 0;cursor:grab}.v23-tile p{font-size:13px}.v23-drop{border:2px dashed #315777;border-radius:9px;padding:15px;text-align:center;font-size:12px}.v23-tools-link{position:fixed;bottom:18px;right:18px;background:#1689ff;color:white!important;padding:12px 16px;border-radius:9px;z-index:10}
/* V2.3.1 - collapsible settings navigation */
.nav .settings-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;color:inherit;border:0;border-radius:9px;padding:11px 13px;font:inherit;font-weight:650;cursor:pointer;text-align:left}
.nav .settings-toggle:hover,.nav .settings-group.active>.settings-toggle{background:rgba(22,137,255,.16);color:#eaf5ff}
.nav .settings-toggle span{transition:transform .2s ease}
.nav .settings-group.expanded>.settings-toggle span{transform:rotate(180deg)}
.nav .settings-submenu{display:none;padding:3px 0 7px 7px}
.nav .settings-group.expanded>.settings-submenu{display:block}
.nav .settings-submenu .sub{display:block;padding:8px 12px 8px 18px;font-size:.92em}

/* V2.3.2: collapsible navigation groups on desktop and mobile */
.nav .menu-group{margin:4px 0!important;padding:0!important;border:0!important}
.nav .menu-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;text-align:left;font:inherit;font-weight:600;color:#e7f2fc;background:rgba(255,255,255,.035);border:1px solid rgba(122,184,238,.10);border-radius:9px;margin:5px 0;padding:11px 12px;cursor:pointer}
.nav .menu-toggle:hover,.nav .menu-group.expanded>.menu-toggle{background:rgba(22,137,255,.20);border-color:rgba(80,170,255,.35);color:#fff}
.nav .menu-submenu{display:none;padding:3px 0 7px 8px}
.nav .menu-group.expanded>.menu-submenu{display:block}
.nav .menu-submenu .sub{display:block;padding:9px 12px 9px 18px;margin:3px 0;border-radius:8px;color:#d4e4f4;text-decoration:none;font-size:.92em}
.nav .menu-submenu .sub:hover,.nav .menu-submenu .sub.active{background:rgba(22,137,255,.2);color:white}
@media(max-width:900px){.sidebar .nav .menu-toggle{width:100%!important;display:flex!important;background:#16344f!important;border:1px solid rgba(122,184,238,.18)!important;border-radius:10px!important;margin:6px 0!important;padding:12px 13px!important;color:white!important;min-height:44px}.sidebar .nav .menu-submenu .sub{display:block!important;margin:4px 0!important;padding:11px 12px 11px 20px!important}}