/* bg-bernau-design/css/base.css
 * Grundlayout, Karten, Buttons, Formulare, Tabellen.
 * Setzt design-tokens.css voraus (muss davor eingebunden werden).
 * Entstanden aus dem bisherigen app/static/style.css der einwahl-* Projekte,
 * mit Apple-Blau (--blue) ersetzt durch die Schulfarbe (--color-accent).
 */

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Layout wrappers --- */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.container.container--wide{
  width: min(1600px, calc(100% - 32px));
}
.container.container--wide .card{ max-width: none; }
.container.container--wide .tablewrap{ max-width: none; }

.card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 24px;
}

h1,h2,h3{
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}
h1{ font-size: 40px; line-height: 1.1; }
h2{ font-size: 24px; line-height: 1.2; }
p{ color: var(--color-muted); margin: 8px 0 0 0; }

/* --- Top header / brand area --- */
.header{
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.header__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display:flex;
  gap: 16px;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.brand__title{
  font-weight: 700;
  font-size: 20px;
}
.brand__sub,
.brand__subtitle{
  font-weight: 600;
  color: var(--color-muted);
  font-size: 14px;
}

/* --- Brand mit Logo (sitebrand) --- */
.sitebrand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: inherit;
}
.sitebrand__logo{
  height: 36px;
  width: auto;
}
.sitebrand__text{
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.sitebrand__title{
  font-weight: 700;
  font-size: 20px;
}
.sitebrand__sub{
  font-weight: 600;
  color: var(--color-muted);
  font-size: 14px;
}

/* --- Horizontal admin nav (instead of sidebar) --- */
.nav{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 14px 24px;
  display:flex;
  gap: 10px;
  align-items:center;
}

.nav a{
  color: var(--color-muted);
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav a:hover{
  background: rgba(0,0,0,.04);
  color: var(--color-text);
}
.nav a.active{
  background: rgba(var(--color-accent-rgb), .12);
  border-color: rgba(var(--color-accent-rgb), .25);
  color: var(--color-accent);
  font-weight: 600;
}

/* --- Buttons --- */
.actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  margin: 16px 0 18px 0;
}

.btn{
  appearance:none;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  cursor:pointer;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.btn:hover{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.22);
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--color-accent);
  border-color: rgba(0,0,0,.0);
  color: #fff;
  box-shadow: 0 10px 18px rgba(var(--color-accent-rgb), .18);
}
/* Eigene color-Regel im Hover nötig: das generische a:hover (Zeile ~286,
   Spezifität 0,1,1) schlägt sonst die Grundfarbe color:#fff (Spezifität
   0,1,0) und färbt nur die Schrift dunkelblau, während der Hintergrund
   kaum sichtbar wechselt (Blau -> minimal dunkleres Blau) - schlechter
   Kontrast. Stattdessen bewusst umgekehrt: heller Hintergrund, dunkle Schrift. */
.btn-primary:hover{
  background: rgba(var(--color-accent-rgb), .1);
  border-color: rgba(var(--color-accent-rgb), .2);
  color: var(--color-accent);
  box-shadow: none;
}

.btn-danger{
  background: var(--color-danger);
  border-color: rgba(0,0,0,.0);
  color: #fff;
  box-shadow: 0 10px 18px rgba(215,0,21,.14);
}
/* gleicher Grund wie bei .btn-primary:hover oben */
.btn-danger:hover{
  background: rgba(215,0,21,.1);
  border-color: rgba(215,0,21,.2);
  color: var(--color-danger);
  box-shadow: none;
}

.btn:disabled,
.btn[disabled]{
  cursor:not-allowed;
  opacity: 1;                 /* wichtig: nicht ausgrauen bis unlesbar */
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.35);
  border-color: rgba(0,0,0,.10);
  box-shadow: none;
}

/* --- Inputs / selects --- */
input[type="text"],
input[type="number"],
input[type="datetime-local"],
input[type="file"],
select{
  width: auto;
  max-width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

select{ padding-right: 34px; }
input:focus, select:focus{
  border-color: rgba(var(--color-accent-rgb), .55);
  box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), .15);
}

/* checkboxes */
input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

/* --- Tables --- */
.tablewrap{
  overflow:auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 900px;
}

.table thead th{
  text-align:left;
  font-size: 13px;
  color: var(--color-muted);
  font-weight: 700;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 14px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  vertical-align: middle;
}

.table tbody tr:hover{
  background: rgba(0,0,0,.02);
}

/* --- Small helper text --- */
.help{
  color: var(--color-muted);
  font-size: 14px;
}

.footer{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px 30px 24px;
  color: var(--color-muted);
}

/* --- Pills / tags (optional) --- */
.pill{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-muted);
  font-weight: 600;
  font-size: 12px;
}

/* --- Links --- */
a{ color: var(--color-accent); }
a:hover{ color: var(--color-accent-hover); }

/* --- Responsive --- */
@media (max-width: 720px){
  .container{ padding: 16px; }
  h1{ font-size: 32px; }
  .header__inner{ padding: 14px 16px; }
  .nav{ padding: 0 16px 12px 16px; overflow:auto; }
}