/* De Administreerbeer — design systeem
   Alles is strak gescopet onder .admbeer-root / .admbeer-header / .admbeer-gate en met
   !important, omdat het thema van de site anders eigen knop-/inputstijlen en layout kan
   afdwingen die onze indeling breken. */

.admbeer-root, .admbeer-root *, .admbeer-header, .admbeer-gate, .admbeer-gate * {
  box-sizing: border-box !important;
}

:root{
  --ab-navy:#1f2a44;
  --ab-navy-light:#2c3a5c;
  --ab-honey:#e0a339;
  --ab-honey-dark:#c98d24;
  --ab-green:#2ecc71;
  --ab-green-dark:#1a9c53;
  --ab-red:#e74c3c;
  --ab-bg:#f6f7fa;
  --ab-border:#e6e8ee;
  --ab-text:#2b2f3a;
  --ab-muted:#8a90a0;
}

.admbeer-header{
  background:linear-gradient(135deg,var(--ab-navy),var(--ab-navy-light)) !important;color:#fff !important;
  padding:14px 20px !important;border-radius:12px !important;margin-bottom:18px !important;
  font-size:16px !important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
  box-shadow:0 4px 14px rgba(31,42,68,.18) !important;
}
.admbeer-header span{opacity:.75;font-weight:normal;font-size:12px;margin-left:8px}

.admbeer-gate{max-width:320px;margin:40px auto;text-align:center;font-family:sans-serif}
.admbeer-gate-form{display:flex !important;flex-direction:column !important;gap:8px !important}
.admbeer-gate-form input{padding:10px !important;font-size:15px !important;text-align:center !important;border:1px solid var(--ab-border) !important;border-radius:8px !important;width:100% !important;height:auto !important;letter-spacing:2px !important;}
.admbeer-gate-form button{padding:10px !important;background:var(--ab-navy) !important;color:#fff !important;border:none !important;border-radius:8px !important;cursor:pointer !important;font-size:13px !important;width:100% !important;height:auto !important;font-weight:600 !important;}
.admbeer-error{color:var(--ab-red)}

.admbeer-root{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
  font-size:13px !important;line-height:1.45 !important;color:var(--ab-text) !important;
}
.admbeer-root button{
  padding:6px 14px !important;font-size:12px !important;border-radius:7px !important;
  border:1px solid var(--ab-border) !important;background:#fff !important;color:var(--ab-text) !important;
  cursor:pointer !important;line-height:1.4 !important;height:auto !important;width:auto !important;
  min-width:0 !important;margin:0 !important;font-weight:500 !important;text-transform:none !important;
  box-shadow:none !important;transition:filter .15s ease, transform .05s ease !important;
}
.admbeer-root button:hover{filter:brightness(0.96) !important;}
.admbeer-root button:active{transform:translateY(1px) !important;}
.admbeer-root button.admbeer-primary{background:var(--ab-navy) !important;color:#fff !important;border-color:var(--ab-navy) !important;font-weight:600 !important;}
.admbeer-root button.admbeer-danger{background:#fdecea !important;color:var(--ab-red) !important;border-color:#f6cfc9 !important;}
.admbeer-root button:disabled{cursor:not-allowed !important;opacity:.55 !important;}
.admbeer-root input, .admbeer-root select, .admbeer-root textarea{
  padding:7px 9px !important;font-size:12px !important;border:1px solid var(--ab-border) !important;border-radius:7px !important;
  height:auto !important;width:auto !important;line-height:1.4 !important;background:#fff !important;color:var(--ab-text) !important;
}
.admbeer-root input:focus, .admbeer-root select:focus, .admbeer-root textarea:focus{
  outline:none !important;border-color:var(--ab-honey) !important;box-shadow:0 0 0 3px rgba(224,163,57,.18) !important;
}

.admbeer-hint{color:var(--ab-muted);font-size:11px;margin:0 0 10px}
.admbeer-alerts{background:#fdecea;border:1px solid #f6cfc9;border-radius:10px;padding:12px 16px;margin:0 0 14px}
.admbeer-alerts.admbeer-vat{background:#fff8e9;border-color:#f3ddac}
.admbeer-vat-table{width:100%;border-collapse:collapse;margin-top:6px}
.admbeer-vat-table td{padding:3px 12px 3px 0;font-size:12px}

.admbeer-table-wrap{overflow-x:auto}
.admbeer-table{border-collapse:collapse !important;width:100% !important;background:#fff}
.admbeer-table th,.admbeer-table td{border:1px solid var(--ab-border) !important;padding:7px 9px !important;text-align:left !important}
.admbeer-table th{background:var(--ab-navy) !important;color:#fff !important;font-weight:600 !important;}
.admbeer-cell{cursor:pointer;text-align:center !important;font-weight:bold;user-select:none}
.admbeer-green{background:#d9f4e5 !important;color:var(--ab-green-dark) !important}
.admbeer-red{background:#fbdedb !important;color:#b8362a !important}
.admbeer-name{white-space:nowrap}
.admbeer-x{color:var(--ab-muted) !important;cursor:pointer !important;margin-left:6px !important;font-weight:bold;background:none !important;border:none !important;padding:0 4px !important;font-size:15px !important;}
.admbeer-x:hover{color:var(--ab-red) !important}
.admbeer-notes-cell textarea{width:100% !important;min-height:32px !important;font-family:inherit}

.admbeer-toolbar{display:flex !important;gap:8px !important;align-items:center !important;margin:0 0 14px !important;flex-wrap:wrap !important}
.admbeer-toolbar label{font-size:12px !important;color:var(--ab-muted) !important;display:flex !important;align-items:center !important;gap:6px !important;}

/* ============ Financieel dashboard ============ */
.admbeer-addbar{
  display:flex !important;gap:8px !important;align-items:center !important;flex-wrap:wrap !important;
  margin:0 0 16px !important;padding:14px !important;background:#fff !important;border:1px solid var(--ab-border) !important;
  border-radius:12px !important;box-shadow:0 1px 3px rgba(20,25,40,.05) !important;
}
.admbeer-addbar input[type=text]{min-width:170px !important;flex:1 1 170px !important;}
.admbeer-addbar input[type=date]{flex:0 0 auto !important;}
.admbeer-addbar input[type=number]{width:130px !important;}

.admbeer-fin-table{
  border:1px solid var(--ab-border) !important;border-radius:12px !important;overflow:hidden !important;
  display:block !important;width:100% !important;background:#fff !important;
  box-shadow:0 1px 3px rgba(20,25,40,.05) !important;
}
.admbeer-fin-head{display:grid !important;grid-template-columns:130px 1fr 1fr !important;background:var(--ab-navy) !important;color:#fff !important;font-weight:600 !important;}
.admbeer-fin-head>div{padding:10px 14px !important;font-size:12px !important;letter-spacing:.02em !important;}

.admbeer-quarter{border-top:1px solid var(--ab-border) !important;}
.admbeer-quarter-head{
  background:var(--ab-bg) !important;font-weight:700 !important;padding:8px 14px !important;
  color:var(--ab-navy) !important;font-size:12px !important;letter-spacing:.06em !important;text-transform:uppercase !important;
  display:block !important;
}
.admbeer-month-row{
  display:grid !important;grid-template-columns:130px 1fr 1fr !important;border-top:1px solid var(--ab-border) !important;
  width:100% !important;transition:background .1s ease !important;
}
.admbeer-month-row:hover{background:#fafbfd !important;}
.admbeer-month-row.admbeer-quarter-total{background:var(--ab-bg) !important;font-weight:700 !important;border-top:1px solid #dde1ea !important}
.admbeer-month-name{padding:12px 14px !important;color:var(--ab-navy) !important;display:flex !important;align-items:center !important;font-weight:500 !important;text-transform:capitalize !important;}
.admbeer-month-col{padding:12px 14px !important;border-left:1px solid var(--ab-border) !important;display:block !important;}
.admbeer-cell-empty{color:#c7cbd6 !important;font-size:12px !important;}
.admbeer-amount{font-weight:700;font-size:14px;color:var(--ab-text)}
.admbeer-sub{color:var(--ab-muted);font-size:10.5px;margin-top:3px}
.admbeer-details{
  margin-left:0 !important;margin-top:6px !important;padding:3px 10px !important;border-radius:20px !important;
  border:none !important;background:#eceef3 !important;color:#9aa0ae !important;font-size:10.5px !important;
  cursor:not-allowed !important;font-weight:600 !important;display:inline-block !important;
}
.admbeer-details.admbeer-details-on{background:var(--ab-green) !important;color:#fff !important;cursor:pointer !important;}
.admbeer-details.admbeer-details-on:hover{background:var(--ab-green-dark) !important;}
.admbeer-details-panel{
  display:grid !important;grid-template-columns:130px 1fr 1fr !important;border-top:1px dashed var(--ab-border) !important;
  width:100% !important;background:#fbfbfd !important;
}
.admbeer-details-panel .admbeer-details-col{padding:10px 14px !important;border-left:1px solid var(--ab-border) !important;display:block !important;}
.admbeer-details-panel .admbeer-details-col:first-child{grid-column:2 !important;border-left:none !important}
.admbeer-entry{background:#fff !important;border:1px solid var(--ab-border) !important;border-radius:9px !important;padding:9px 10px !important;margin-bottom:7px !important}
.admbeer-entry-top{display:flex !important;align-items:center !important;gap:6px !important;flex-wrap:wrap !important}
.admbeer-date-badge{background:var(--ab-bg) !important;border-radius:10px !important;padding:2px 8px !important;font-size:10px !important;color:#666 !important;font-weight:600 !important;}
.admbeer-vat-badge{color:#3a6fd8;font-size:11px;font-weight:600}
.admbeer-entry-incl{font-weight:700;margin-top:4px;font-size:12.5px}
.admbeer-entry .admbeer-x{margin-left:auto !important}

/* ============ Jaarlijkse facturen (front-end) ============ */
.admbeer-inv-toolbar{display:flex !important;align-items:center !important;gap:10px !important;margin:0 0 14px !important;flex-wrap:wrap !important;}
.admbeer-inv-list{display:flex !important;flex-direction:column !important;gap:8px !important;}

.admbeer-inv-card{
  border:1px solid var(--ab-border) !important;border-radius:12px !important;background:#fff !important;
  box-shadow:0 1px 3px rgba(20,25,40,.05) !important;overflow:hidden !important;
}
.admbeer-inv-summary{
  display:flex !important;align-items:center !important;gap:12px !important;padding:12px 14px !important;
  cursor:pointer !important;user-select:none !important;
}
.admbeer-inv-summary:hover{background:#fafbfd !important;}
.admbeer-inv-chevron{
  width:18px !important;height:18px !important;flex:0 0 18px !important;display:flex !important;align-items:center !important;
  justify-content:center !important;color:var(--ab-muted) !important;transition:transform .15s ease !important;font-size:11px !important;
}
.admbeer-inv-card.admbeer-open .admbeer-inv-chevron{transform:rotate(90deg) !important;}
.admbeer-inv-datebadge{
  flex:0 0 auto !important;background:var(--ab-honey) !important;color:#fff !important;border-radius:9px !important;
  padding:6px 10px !important;text-align:center !important;font-weight:700 !important;font-size:12px !important;
  min-width:52px !important;line-height:1.15 !important;
}
.admbeer-inv-datebadge small{display:block !important;font-weight:500 !important;font-size:9px !important;opacity:.9 !important;text-transform:uppercase !important;}
.admbeer-inv-main{flex:1 1 auto !important;min-width:0 !important;}
.admbeer-inv-name{font-weight:700 !important;font-size:13.5px !important;color:var(--ab-navy) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.admbeer-inv-meta{color:var(--ab-muted) !important;font-size:11.5px !important;margin-top:2px !important;}
.admbeer-inv-badges{display:flex !important;gap:6px !important;align-items:center !important;flex:0 0 auto !important;}
.admbeer-inv-pill{
  background:var(--ab-bg) !important;color:var(--ab-navy) !important;border-radius:20px !important;padding:3px 10px !important;
  font-size:10.5px !important;font-weight:600 !important;white-space:nowrap !important;
}
.admbeer-inv-pill.admbeer-inv-pill-warn{background:#fff2da !important;color:var(--ab-honey-dark) !important;}
.admbeer-inv-pill.admbeer-inv-pill-ok{background:#d9f4e5 !important;color:var(--ab-green-dark) !important;}

.admbeer-inv-body{padding:0 14px 14px !important;border-top:1px solid var(--ab-border) !important;}
.admbeer-inv-grid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important;gap:10px !important;margin-top:12px !important;}
.admbeer-inv-field{display:flex !important;flex-direction:column !important;font-size:11px !important;color:var(--ab-muted) !important;gap:4px !important;font-weight:600 !important;}
.admbeer-inv-field input,.admbeer-inv-field select{width:100% !important;}
.admbeer-inv-actions{display:flex !important;align-items:center !important;gap:8px !important;margin-top:12px !important;flex-wrap:wrap !important}
.admbeer-inv-sentrow{display:flex !important;align-items:center !important;gap:8px !important;margin-top:12px !important;padding-top:12px !important;border-top:1px dashed var(--ab-border) !important;font-size:11.5px !important;color:var(--ab-muted) !important;flex-wrap:wrap !important;}
.admbeer-inv-status{color:var(--ab-muted);font-size:11px;margin-left:auto}

/* ============ Mobiel (telefoon) ============ */
@media (max-width: 640px) {
  .admbeer-header{padding:12px 14px !important;border-radius:10px !important;}
  .admbeer-header strong{font-size:15px !important;}
  .admbeer-header span{display:block !important;margin-left:0 !important;margin-top:2px !important;}

  .admbeer-toolbar, .admbeer-addbar{flex-direction:column !important;align-items:stretch !important;}
  .admbeer-toolbar label, .admbeer-toolbar select, .admbeer-toolbar button,
  .admbeer-addbar input, .admbeer-addbar select, .admbeer-addbar button{width:100% !important;}
  .admbeer-addbar input[type=text]{min-width:0 !important;}
  .admbeer-toolbar label{justify-content:space-between !important;}

  /* Financieel bord: van 3-koloms grid naar gestapelde kaart per maand */
  .admbeer-fin-head{display:none !important;}
  .admbeer-quarter-head{border-radius:0 !important;}
  .admbeer-month-row{display:flex !important;flex-direction:column !important;}
  .admbeer-month-row.admbeer-quarter-total{border-top:2px solid var(--ab-navy) !important;}
  .admbeer-month-name{
    background:var(--ab-bg) !important;font-weight:700 !important;padding:8px 12px !important;
    border-bottom:1px solid var(--ab-border) !important;
  }
  .admbeer-month-col{border-left:none !important;border-top:1px solid var(--ab-border) !important;padding:10px 12px !important;position:relative !important;padding-left:46px !important;}
  .admbeer-month-col:nth-of-type(1)::before{content:"In";}
  .admbeer-month-col:nth-of-type(2)::before{content:"Uit";}
  .admbeer-month-col::before{
    position:absolute !important;left:12px !important;top:11px !important;
    font-size:9.5px !important;font-weight:700 !important;text-transform:uppercase !important;
    color:var(--ab-muted) !important;letter-spacing:.04em !important;
  }
  .admbeer-details-panel{display:flex !important;flex-direction:column !important;}
  .admbeer-details-panel .admbeer-details-col{grid-column:auto !important;border-left:none !important;border-top:1px solid var(--ab-border) !important;padding:10px 12px !important;position:relative !important;padding-left:46px !important;}
  .admbeer-details-panel .admbeer-details-col:first-child{grid-column:auto !important;}
  .admbeer-details-panel .admbeer-details-col:nth-of-type(1)::before{content:"Inkomsten";}
  .admbeer-details-panel .admbeer-details-col:nth-of-type(2)::before{content:"Uitgaven";}
  .admbeer-details-panel .admbeer-details-col::before{
    position:absolute !important;left:12px !important;top:11px !important;
    font-size:9.5px !important;font-weight:700 !important;text-transform:uppercase !important;
    color:var(--ab-muted) !important;letter-spacing:.04em !important;
  }
  .admbeer-entry{margin-top:4px !important;}

  /* Klantenbord: tabel horizontaal scrollbaar houden, wel iets compacter */
  .admbeer-table th, .admbeer-table td{padding:6px 7px !important;font-size:12px !important;}
  .admbeer-notes-cell textarea{min-width:110px !important;}

  /* Jaarlijkse facturen: compactere samenvatting */
  .admbeer-inv-summary{padding:10px 12px !important;gap:8px !important;flex-wrap:wrap !important;}
  .admbeer-inv-datebadge{min-width:44px !important;padding:5px 7px !important;font-size:11px !important;}
  .admbeer-inv-main{flex-basis:100% !important;order:1 !important;}
  .admbeer-inv-name{white-space:normal !important;font-size:13px !important;}
  .admbeer-inv-badges{order:2 !important;margin-left:30px !important;}
  .admbeer-inv-chevron{order:0 !important;}
  .admbeer-inv-grid{grid-template-columns:1fr !important;}
  .admbeer-inv-actions{flex-direction:column !important;align-items:stretch !important;}
  .admbeer-inv-actions button{width:100% !important;}
  .admbeer-inv-status{margin-left:0 !important;text-align:center !important;}
  .admbeer-inv-sentrow{flex-wrap:wrap !important;}
  .admbeer-inv-sentrow input{flex:1 1 auto !important;}

  .admbeer-root button{padding:9px 14px !important;font-size:13px !important;}
  .admbeer-root input, .admbeer-root select, .admbeer-root textarea{padding:9px 10px !important;font-size:14px !important;}
}