/* Beheer — admin portaal styling */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --dark:#14283f;--orange:#c2410c;--paper:#f7f4ec;--paper-warm:#efebde;
  --ink:#1c1f26;--ink-soft:#2f343d;--ink-muted:#6b7280;--accent:#c2410c;
  --rule:rgba(28,31,38,0.14);--green:#3a9e6a;
  --serif:'Source Serif 4',Georgia,serif;--sans:'Inter',system-ui,sans-serif;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;}

#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink-muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase;z-index:1000;}

#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--dark);padding:2rem;}
.login-box{background:var(--paper);padding:3rem 2.5rem;max-width:400px;width:100%;border-radius:2px;}
.login-logo{font-family:var(--cond);font-size:30px;font-weight:800;text-transform:uppercase;color:var(--ink);letter-spacing:-.01em;}
.login-sub{font-family:var(--serif);font-style:italic;color:var(--ink-soft);font-size:14px;margin-bottom:2rem;}
.login-box label{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin:1rem 0 6px;}
.login-box input{width:100%;padding:.75rem;border:1px solid var(--rule);border-radius:2px;font-family:var(--sans);font-size:14px;background:var(--paper-warm);color:var(--ink);}
.login-box input:focus{outline:none;border-color:var(--accent);}
.btn-login{width:100%;background:#1e3a5f;color:var(--paper);border:none;padding:.85rem;font-family:var(--sans);font-size:14px;font-weight:500;border-radius:2px;cursor:pointer;margin-top:1.5rem;}
.btn-login:hover{background:#14283f;}
#login-error{color:var(--accent);font-size:13px;margin-top:1rem;min-height:18px;}

#app{display:none;min-height:100vh;}
.topbar{background:var(--dark);color:var(--paper);padding:.85rem 1.5rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);}
.topbar-logo{font-family:var(--cond);font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;}
.topbar-badge{margin-left:.75rem;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);border:1px solid rgba(194,65,12,.4);padding:3px 8px;border-radius:2px;}
.topbar-right{display:flex;gap:1rem;align-items:center;}
.btn-logout{background:transparent;color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.2);padding:6px 14px;border-radius:2px;font-size:12px;cursor:pointer;font-family:var(--sans);}
.btn-logout:hover{color:#fff;border-color:rgba(255,255,255,.5);}

.layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 56px);}
.sidebar{background:var(--paper-warm);border-right:1px solid var(--rule);padding:1.5rem 0;}
.sidebar-section{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);padding:1rem 1.5rem .5rem;}
.sidebar nav{display:flex;flex-direction:column;}
.sidebar nav a{padding:.7rem 1.5rem;color:var(--ink-soft);text-decoration:none;font-size:14px;border-left:2px solid transparent;cursor:pointer;}
.sidebar nav a:hover{background:var(--paper);color:var(--ink);}
.sidebar nav a.active{background:var(--paper);color:var(--ink);border-left-color:var(--accent);font-weight:500;}

.main{padding:2.5rem 3rem;max-width:1100px;}
.page{display:none;}
.page.active{display:block;}
h1{font-family:var(--serif);font-size:2rem;font-weight:400;line-height:1.2;margin-bottom:.4rem;}
h3{font-family:var(--serif);font-size:1.15rem;font-weight:400;margin-bottom:.85rem;color:var(--ink);}
.page-sub{color:var(--ink-soft);font-size:14px;margin-bottom:2rem;}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem;}
.stat-card{background:var(--paper-warm);padding:1.25rem;border-radius:2px;}
.stat-num{font-family:var(--serif);font-size:2.2rem;font-weight:300;line-height:1;color:var(--ink);}
.stat-label{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-top:.4rem;}

.table-wrap{background:#fff;border:1px solid var(--rule);border-radius:2px;overflow:hidden;}
table{width:100%;border-collapse:collapse;}
th,td{padding:.85rem 1rem;text-align:left;font-size:13px;border-bottom:1px solid var(--rule);}
th{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);background:var(--paper-warm);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--paper-warm);}

.badge{display:inline-block;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:2px;}
.badge-green{background:rgba(58,158,106,.12);color:var(--green);}
.badge-gray{background:var(--paper-warm);color:var(--ink-muted);}
.badge-orange{background:rgba(194,65,12,.12);color:var(--orange);}

.btn-sm{font-size:12px;padding:6px 12px;border:1px solid var(--rule);background:#fff;cursor:pointer;border-radius:2px;font-family:var(--sans);text-decoration:none;color:var(--ink);}
.btn-sm:hover{border-color:var(--ink);}
.btn-sm.btn-primary{background:#1e3a5f;color:#fff;border-color:#1e3a5f;}
.btn-sm.btn-primary:hover{background:#14283f;}

.dossier-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--rule);}
.dossier-back{font-size:12px;color:var(--ink-muted);cursor:pointer;}
.dossier-back:hover{color:var(--ink);}
.dossier-name{font-family:var(--serif);font-size:1.4rem;font-weight:400;}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--rule);margin-bottom:1.5rem;}
.tab-btn{background:none;border:none;padding:.8rem 1.2rem;font-family:var(--sans);font-size:13px;color:var(--ink-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.tab-btn.active{color:var(--ink);border-bottom-color:var(--accent);font-weight:500;}
.tab-content{display:none;}
.tab-content.active{display:block;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
.card{background:#fff;border:1px solid var(--rule);padding:1.5rem;border-radius:2px;}
.field-group{margin-bottom:1rem;}
.field-group label{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:5px;}
.field-group input,.field-group select,.field-group textarea{width:100%;padding:.65rem .8rem;border:1px solid var(--rule);border-radius:2px;font-family:var(--sans);font-size:14px;background:#fff;color:var(--ink);}
.field-group textarea{min-height:140px;resize:vertical;}
.field-group input:focus,.field-group select:focus,.field-group textarea:focus{outline:none;border-color:var(--ink);}

.code-box{font-family:monospace;font-size:1.4rem;letter-spacing:.12em;background:var(--dark);color:var(--orange);padding:.85rem 1.2rem;border-radius:2px;display:inline-block;margin:.5rem 0;}

@media(max-width:900px){
  .layout{grid-template-columns:1fr;}
  .sidebar{display:flex;flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--rule);padding:1rem;}
  .sidebar nav{flex-direction:row;flex-wrap:wrap;}
  .main{padding:1.5rem;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr;}
}