/* assets/css/brand_overrides.css
   Globale Overrides, die Branding-Variablen nutzen.
   Wird nach style.css und form_material.css geladen.

   Wichtig:
   - :root enthält Default-Werte (Fallback-Theme)
   - brandCssVars() (Inline-Block in header.php / Public Pages) überschreibt diese Werte, falls in masterdata gesetzt
*/

:root{
  /* Basis-Theme (Fallback) */
  --brand-primary: #0d2a52;
  --brand-secondary: #0a2a66;
  --brand-font: Inter, Arial, sans-serif;

  --app-bg: #f5f5f5;
  --surface-bg: #ffffff;
  --text-color: #111111;
  --heading-color: #111111;
  --muted-text: #555555;
  --border-color: #dce3ea;
  --link-color: #0d2a52;

  /* Navigation / Dropdown */
  --nav-bg: #0d2a52;
  --nav-text: #ffffff;
  --nav-hover-bg: rgba(255,255,255,0.15);

  --dropdown-bg: #ffffff;
  --dropdown-text: #0d2a52;
  --dropdown-hover-bg: #e8f0ff;
  --dropdown-border: #dbe3f3;

  /* Public Header (Join/Legal) */
  --public-header-bg: #0d2a52;
  --public-header-text: #ffffff;

  /* Badges */
  --badge-bg: #0a2a66;
  --badge-text: #ffffff;

  /* Buttons */
  --btn-primary-bg: #0055a5;
  --btn-primary-text: #ffffff;
  --btn-primary-hover-bg: #003f7c;

  --btn-secondary-bg: #e8f0ff;
  --btn-secondary-text: #0d2a52;
  --btn-secondary-hover-bg: #d9e8ff;

  --btn-danger-bg: #d40000;
  --btn-danger-text: #ffffff;
  --btn-danger-hover-bg: #b00000;

  /* Alerts / Status */
  --alert-success-bg: #e8f7ee;
  --alert-success-border: #b9e5c9;
  --alert-success-text: #126b2a;

  --alert-warning-bg: #fff2cc;
  --alert-warning-border: #ffe08a;
  --alert-warning-text: #4a3b00;

  --alert-error-bg: #ffecec;
  --alert-error-border: #ffb3b3;
  --alert-error-text: #8a0000;

  --alert-info-bg: #e8f0ff;
  --alert-info-border: #cfe0ff;
  --alert-info-text: #0d2a52;

  /* Tabellen / Header */
  --table-header-bg: #f7f8fb;
  --table-header-text: #111111;
  --table-header-border: #e6e6e6;
  --table-row-alt-bg: #fafafa;

  /* Card Header (optional) */
  --card-header-bg: var(--surface-bg);
  --card-header-text: var(--heading-color);
}

/* ------------------------------------------------------------
   Base
------------------------------------------------------------ */
body{
  background: var(--app-bg);
  color: var(--text-color);
  font-family: var(--brand-font);
}

a{ color: var(--link-color); }

h1,h2,h3,h4,h5,h6{ color: var(--heading-color); }

.hint, .small, small{ color: var(--muted-text); }

/* ------------------------------------------------------------
   Cards / Surfaces
------------------------------------------------------------ */
.material-card,
.card{
  background: var(--surface-bg);
  border-color: var(--border-color);
}

/* ------------------------------------------------------------
   Buttons
------------------------------------------------------------ */
.btn{
  border-color: var(--border-color);
  background: var(--surface-bg);
  color: var(--link-color);
}

.btn:hover{
  background: var(--dropdown-hover-bg);
}

.btn.primary{
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.btn.primary:hover{
  background: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-bg);
}

.btn.secondary{
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}

.btn.secondary:hover{
  background: var(--btn-secondary-hover-bg);
  border-color: var(--btn-secondary-hover-bg);
}

.btn.warn{
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--alert-warning-text);
}

.btn.danger{
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-bg);
  color: var(--btn-danger-text);
}

.btn.danger:hover{
  background: var(--btn-danger-hover-bg);
  border-color: var(--btn-danger-hover-bg);
}

a.danger-link{ color: var(--btn-danger-bg) !important; }

/* Material Submit Button */
.submit-btn{
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
}

.submit-btn:hover{
  background: var(--btn-primary-hover-bg) !important;
}

/* ------------------------------------------------------------
   Alerts (global + material helpers)
------------------------------------------------------------ */
.alert{
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
}

.alert-success{
  background: var(--alert-success-bg);
  border-color: var(--alert-success-border);
  color: var(--alert-success-text);
}

.alert-danger{
  background: var(--alert-error-bg);
  border-color: var(--alert-error-border);
  color: var(--alert-error-text);
}

.alert-info{
  background: var(--alert-info-bg);
  border-color: var(--alert-info-border);
  color: var(--alert-info-text);
}

.material-success{
  background: var(--alert-success-bg) !important;
  border: 1px solid var(--alert-success-border) !important;
  color: var(--alert-success-text);
}

.material-error{
  background: var(--alert-error-bg) !important;
  border: 1px solid var(--alert-error-border) !important;
  color: var(--alert-error-text);
}

/* ------------------------------------------------------------
   Tabs
------------------------------------------------------------ */
.tab{
  border-color: var(--border-color);
  background: var(--surface-bg);
  color: var(--link-color);
}

.tab.active{
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

/* ------------------------------------------------------------
   Tables (global + material-table)
------------------------------------------------------------ */
thead{
  background: var(--table-header-bg);
}

th, td{
  border-color: var(--border-color);
}

tbody tr:nth-child(odd){
  background: var(--table-row-alt-bg);
}

.material-table th,
.material-table td{
  border-bottom-color: var(--table-header-border);
}

.material-table th{
  background: var(--table-header-bg);
  color: var(--table-header-text);
}

/* ------------------------------------------------------------
   Forms
------------------------------------------------------------ */
.material-form label{
  color: var(--text-color);
}

.material-form input:not([type="checkbox"]):not([type="radio"]),
.material-form select,
.material-form textarea{
  border-color: var(--border-color);
  background: var(--surface-bg);
  color: var(--text-color);
}

.material-form input:not([type="checkbox"]):not([type="radio"]):focus,
.material-form select:focus,
.material-form textarea:focus{
  border-color: var(--btn-primary-bg);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

/* Form accent color */
input[type="checkbox"],
input[type="radio"],
.material-form input[type="checkbox"],
.material-form input[type="radio"]{
  accent-color: var(--brand-primary);
}