/* Kydo Buchhaltung — Theme
   CSS-Variablen und Komponentenklassen 1:1 übernommen aus
   Spez/kydo_buchhaltung_ui_design_2.html (Zeilen 10-280), damit die echten
   Django-Templates optisch mit dem UI-Mockup übereinstimmen. */

:root{
  --navy-900:#0f2042;
  --navy-800:#1d233e;
  --navy-700:#273655;
  --brand-blue:#1b84b9;
  --brand-blue-dark:#0f5484;
  --teal:#66b898;
  --coral:#e36a61;
  --lavender:#a6bbfb;
  --bg-app:#f5f7fb;
  --surface:#ffffff;
  --border:#dfe5eb;
  --text-primary:#1d233e;
  --text-secondary:#5b6b85;
  --radius:8px;

  --status-good:#0ca30c;
  --status-warning:#fab219;
  --status-serious:#ec835a;
  --status-critical:#d03b3b;
}
*{box-sizing:border-box;}
body{
  font-family:'Inter', Arial, sans-serif;
  background:var(--bg-app);
  color:var(--text-primary);
  margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6, .brand-font{
  font-family:'Poppins','Inter',sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
}
a{color:var(--brand-blue);}

.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:240px;
  flex-shrink:0;
  background:linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color:#fff;
  padding:22px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.sidebar .logo{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 8px 22px 8px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.sidebar .logo .mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif; font-weight:700; color:#fff; font-size:15px;
}
.sidebar .logo .name{font-family:'Poppins',sans-serif; font-weight:600; font-size:17px;}
.sidebar .logo .tagline{font-size:10px; letter-spacing:.06em; color:rgba(255,255,255,.5); text-transform:uppercase;}
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:var(--radius);
  color:rgba(255,255,255,.72);
  font-size:14px; font-weight:500;
  cursor:pointer; text-decoration:none;
}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{background:var(--brand-blue); color:#fff;}
.nav-item .material-icons{font-size:19px;}
.nav-section-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:rgba(255,255,255,.35); margin:16px 12px 6px;
}
.sidebar-footer{margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.1);}
.kydo-chip-sidebar{
  display:flex; align-items:center; gap:8px;
  background:rgba(102,184,152,.12);
  border:1px solid rgba(102,184,152,.35);
  color:var(--teal);
  padding:8px 10px; border-radius:var(--radius);
  font-size:12px; font-weight:600;
}
.kydo-chip-sidebar .material-icons{font-size:16px;}

.main{flex:1; min-width:0;}
.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.mandant-switcher{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-app); border:1px solid var(--border);
  padding:8px 14px; border-radius:var(--radius);
  font-size:14px; font-weight:600; cursor:pointer;
  text-decoration:none; color:var(--text-primary);
}
.mandant-switcher .avatar{
  width:26px;height:26px;border-radius:7px;background:var(--navy-700);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
}
.topbar-actions{display:flex; align-items:center; gap:14px;}
.user-chip{
  width:36px;height:36px;border-radius:50%;
  background:var(--lavender); color:var(--navy-800);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
}

.content{padding:26px 28px 60px;}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px;}
.page-head h4{margin:0 0 4px; font-size:22px;}
.page-head .sub{color:var(--text-secondary); font-size:13.5px;}

.btn-primary{
  background:var(--brand-blue) !important;
  border-radius:var(--radius) !important;
  text-transform:none !important;
  font-weight:600; font-family:'Inter',sans-serif;
  box-shadow:none !important;
  height:42px; line-height:42px; padding:0 20px;
  color:#fff !important;
}
.btn-primary:hover{background:var(--brand-blue-dark) !important;}
.btn-flat-outline{
  background:#fff !important;
  border:1.5px solid var(--border) !important;
  color:var(--text-primary) !important;
  border-radius:var(--radius) !important;
  text-transform:none !important;
  font-weight:600; box-shadow:none !important;
  height:42px; line-height:39px; padding:0 18px;
}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;}
@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat-tile{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:18px 20px;
}
.stat-tile .icon-badge{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.stat-tile .icon-badge .material-icons{font-size:19px; color:#fff;}
.stat-tile .value{font-family:'Poppins',sans-serif; font-size:26px; font-weight:700; line-height:1.1;}
.stat-tile .label{color:var(--text-secondary); font-size:12.5px; margin-top:4px;}
.stat-tile .delta{font-size:12px; font-weight:600; margin-top:8px; display:flex; align-items:center; gap:4px;}

.card-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:20px 22px; margin-bottom:20px;
}
.card-panel .card-title-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.card-panel .card-title-row h6{margin:0; font-size:15px; font-weight:600;}
table.kydo-table{width:100%; border-collapse:collapse;}
table.kydo-table th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-secondary); font-weight:600; padding:9px 10px; border-bottom:1px solid var(--border);
}
table.kydo-table td{padding:12px 10px; border-bottom:1px solid var(--border); font-size:13.5px; vertical-align:middle;}
table.kydo-table tr:last-child td{border-bottom:none;}
table.kydo-table tr:hover td{background:var(--bg-app);}

.chip-status{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700;
}
.chip-good{background:rgba(12,163,12,.1); color:var(--status-good);}
.chip-warning{background:rgba(250,178,25,.16); color:#8a5c00;}
.chip-critical{background:rgba(208,59,59,.1); color:var(--status-critical);}
.chip-neutral{background:var(--bg-app); color:var(--text-secondary); border:1px solid var(--border);}
.chip-brand{background:rgba(27,132,185,.1); color:var(--brand-blue-dark);}

.avatar-mini{
  width:30px;height:30px;border-radius:8px;background:var(--navy-700);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
}

.booking-layout{display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start;}
@media(max-width:1000px){.booking-layout{grid-template-columns:1fr;}}
.two-col-equal{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start;}
@media(max-width:900px){.two-col-equal{grid-template-columns:1fr;}}
.field-row{display:grid; grid-template-columns:160px 1fr 160px; gap:14px; margin-bottom:16px;}
.form-field label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); font-weight:700; margin-bottom:6px;}
.form-field input, .form-field select{width:100%; border:1px solid var(--border); border-radius:6px; padding:10px 11px; font-family:'Inter',sans-serif; font-size:13.5px; background:#fff; color:var(--text-primary);}
.form-field input:focus, .form-field select:focus{outline:none; border-color:var(--brand-blue);}

/* Materialize hides native <select> elements (display:none) unless they
   carry the .browser-default class and expects M.FormSelect.init() to
   replace them with custom markup. We render plain Django form widgets
   without that JS init, so force all selects to stay visible/native. */
select{display:inline-block !important; height:auto !important;}
/* Materialize also hides native checkboxes (opacity:0, absolute position)
   and expects a sibling <span> plus its own JS to draw a custom box. We
   render plain Django checkbox widgets without that markup, so reset the
   native checkbox back to visible/usable. */
input[type="checkbox"]{
  opacity:1 !important; position:static !important; pointer-events:auto !important;
  width:18px !important; height:18px !important; left:auto !important; top:auto !important;
  margin-right:8px; vertical-align:middle; cursor:pointer;
}
.lines-table th{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); text-align:left; padding:6px 8px;}
.lines-table td{padding:6px 8px;}
/* Das reale <select> (für die Formular-Übermittlung) bleibt im DOM, wird
   aber durch das durchsuchbare Textfeld (.konto-search) ersetzt/verdeckt -
   siehe buchung_form.js. */
select.konto-real-select{display:none !important;}
.konto-search{width:100%; border:1px solid var(--border); border-radius:6px; padding:8px 9px; font-family:'Inter',sans-serif; font-size:13px; background:#fff;}
.lines-table input, .lines-table select{
  width:100%; border:1px solid var(--border); border-radius:6px; padding:8px 9px;
  font-family:'Inter',sans-serif; font-size:13px; background:#fff;
}
.add-line-btn{
  display:flex; align-items:center; gap:6px; color:var(--brand-blue); font-weight:600;
  font-size:13px; cursor:pointer; padding:8px 0; background:none; border:none;
}
.balance-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-radius:10px; margin-top:8px; font-size:13.5px;
}
.balance-ok{background:rgba(12,163,12,.08); border:1px solid rgba(12,163,12,.25);}
.balance-ok .amounts{color:var(--status-good); font-weight:700;}
.balance-bad{background:rgba(208,59,59,.07); border:1px solid rgba(208,59,59,.25);}
.balance-bad .amounts{color:var(--status-critical); font-weight:700;}

.dropzone{
  border:2px dashed var(--border); border-radius:10px; padding:26px 16px; text-align:center;
  color:var(--text-secondary); font-size:13px; background:var(--bg-app);
}
.dropzone.dragover{border-color:var(--brand-blue); background:rgba(27,132,185,.06);}
.dropzone .material-icons{font-size:30px; color:var(--brand-blue); margin-bottom:6px;}

.kydo-link-card{
  background:linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color:#fff; border-radius:10px; padding:16px 18px; margin-top:14px;
}
.kydo-link-card .top{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--teal); margin-bottom:6px;}
.kydo-link-card a{color:#fff; text-decoration:underline; font-size:13px;}

.section-label{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); font-weight:700; margin:0 0 10px;}

.footer-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px;}

.auth-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
}
.auth-card{
  background:var(--surface); border-radius:12px; padding:36px 32px; width:360px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.auth-card .mark{
  width:44px;height:44px;border-radius:11px;
  background:linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif; font-weight:700; color:#fff; font-size:18px;
  margin-bottom:16px;
}
.auth-card h5{margin:0 0 4px;}
.auth-card .sub{color:var(--text-secondary); font-size:13px; margin-bottom:22px;}
.auth-card .errorlist{color:var(--status-critical); font-size:12.5px; padding-left:0; list-style:none; margin:0 0 12px;}