/**
 * theme.css – Zentrale Design-Variablen für Clubhaus Benrath
 * Farben, Abstände und Designwerte hier anpassen.
 * Wird zusätzlich zu Tailwind genutzt.
 */

:root {
  /* Primärfarben */
  --color-primary:        #1a5276;   /* Dunkelblau – Hauptfarbe */
  --color-primary-dark:   #154360;
  --color-primary-light:  #2e86c1;
  --color-primary-text:   #ffffff;

  /* Akzentfarbe */
  --color-accent:         #28b463;   /* Grün */
  --color-accent-dark:    #1e8449;

  /* Status-Farben */
  --color-success:        #28b463;
  --color-warning:        #d4ac0d;
  --color-danger:         #cb4335;
  --color-info:           #2e86c1;

  /* Neutral */
  --color-bg:             #f4f6f8;
  --color-surface:        #ffffff;
  --color-border:         #d5d8dc;
  --color-text:           #1c2833;
  --color-text-muted:     #717d7e;

  /* Sidebar */
  --sidebar-width:        260px;
  --sidebar-bg:           #1a2e44;
  --sidebar-text:         #adb5bd;
  --sidebar-active-bg:    #1a5276;
  --sidebar-active-text:  #ffffff;

  /* Topbar */
  --topbar-height:        64px;
  --topbar-bg:            #ffffff;
  --topbar-shadow:        0 1px 4px rgba(0,0,0,0.08);

  /* Karten */
  --card-radius:          0.5rem;
  --card-shadow:          0 2px 8px rgba(0,0,0,0.07);
  --card-padding:         1.5rem;

  /* Tabelle */
  --table-header-bg:      #f0f3f6;

  /* Formulare */
  --input-radius:         0.375rem;
  --input-border:         #ced4da;
  --input-focus:          #2e86c1;

  /* Schrift */
  --font-family:          'Inter', system-ui, -apple-system, sans-serif;
  --font-size-base:       0.9375rem;
}

/* ============================================================
   Basis-Reset / Body
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family:     var(--font-family);
  font-size:       var(--font-size-base);
  background:      var(--color-bg);
  color:           var(--color-text);
  margin:          0;
  min-height:      100vh;
}

/* ============================================================
   Layout: Sidebar + Hauptbereich
   ============================================================ */
.layout-wrapper  { display: flex; min-height: 100vh; }
.sidebar         { width: var(--sidebar-width); background: var(--sidebar-bg);
                   flex-shrink: 0; position: fixed; top: 0; left: 0; height: 100vh;
                   overflow-y: auto; z-index: 100; transition: transform .25s ease; }
.main-content    { margin-left: var(--sidebar-width); flex: 1; display: flex;
                   flex-direction: column; min-height: 100vh; }
.topbar          { height: var(--topbar-height); background: var(--topbar-bg);
                   box-shadow: var(--topbar-shadow); display: flex; align-items: center;
                   padding: 0 1.5rem; position: sticky; top: 0; z-index: 50; }
.page-body       { padding: 1.5rem; flex: 1; }

/* ============================================================
   Karten
   ============================================================ */
.card {
  background:    var(--color-surface);
  border-radius: var(--card-radius);
  box-shadow:    var(--card-shadow);
  padding:       var(--card-padding);
  border:        1px solid var(--color-border);
}
.card-header {
  padding-bottom: 1rem;
  margin-bottom:  1rem;
  border-bottom:  1px solid var(--color-border);
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  flex-wrap:      wrap;
  gap:            .5rem;
}
.card-title { font-size: 1.1rem; font-weight: 600; color: var(--color-text); margin: 0; }

/* ============================================================
   Badges
   ============================================================ */
.badge {
  display:       inline-flex;
  align-items:   center;
  padding:       .25em .65em;
  font-size:     .78em;
  font-weight:   600;
  border-radius: 9999px;
  white-space:   nowrap;
}
.badge-success { background: #d5f5e3; color: #1e8449; }
.badge-warning { background: #fef9e7; color: #9a7d0a; border: 1px solid #f9e79f; }
.badge-danger  { background: #fdedec; color: #cb4335; }
.badge-info    { background: #d6eaf8; color: #1a5276; }
.badge-muted   { background: #eaecee; color: #717d7e; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            .4rem;
  padding:        .45rem 1rem;
  font-size:      .9rem;
  font-weight:    500;
  border-radius:  var(--input-radius);
  border:         1px solid transparent;
  cursor:         pointer;
  text-decoration: none;
  transition:     background .15s, box-shadow .15s;
  white-space:    nowrap;
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary  { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-accent   { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn-accent:hover { background: var(--color-accent-dark); }
.btn-danger   { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #a93226; }
.btn-outline  { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover { background: var(--color-bg); }
.btn-sm       { padding: .3rem .7rem; font-size: .8rem; }
.btn-xs       { padding: .2rem .5rem; font-size: .75rem; }
.btn-icon     { padding: .4rem; }
.btn-block    { width: 100%; justify-content: center; }

/* ============================================================
   Formulare
   ============================================================ */
.form-group   { margin-bottom: 1rem; }
.form-label   { display: block; font-size: .875rem; font-weight: 500;
                margin-bottom: .35rem; color: var(--color-text); }
.form-control {
  display:       block;
  width:         100%;
  padding:       .45rem .75rem;
  font-size:     .9rem;
  border:        1px solid var(--input-border);
  border-radius: var(--input-radius);
  background:    #fff;
  transition:    border-color .15s, box-shadow .15s;
  color:         var(--color-text);
}
.form-control:focus {
  outline:      none;
  border-color: var(--input-focus);
  box-shadow:   0 0 0 3px rgba(46,134,193,.15);
}
.form-hint { font-size: .8rem; color: var(--color-text-muted); margin-top: .25rem; }
.form-error { font-size: .8rem; color: var(--color-danger); margin-top: .25rem; }

/* ============================================================
   Tabellen
   ============================================================ */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .875rem;
}
.data-table th {
  background:    var(--table-header-bg);
  padding:       .65rem 1rem;
  text-align:    left;
  font-weight:   600;
  font-size:     .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color:         var(--color-text-muted);
  white-space:   nowrap;
}
.data-table td {
  padding:     .65rem 1rem;
  border-top:  1px solid var(--color-border);
  vertical-align: middle;
}
.data-table tbody tr:hover { background: #f8fafc; }

/* ============================================================
   Alerts / Flash Messages
   ============================================================ */
.alert {
  padding:       .85rem 1.1rem;
  border-radius: var(--card-radius);
  margin-bottom: 1rem;
  font-size:     .9rem;
  display:       flex;
  align-items:   flex-start;
  gap:           .6rem;
}
.alert-success { background: #d5f5e3; color: #1a6e38; border-left: 4px solid #28b463; }
.alert-danger  { background: #fdedec; color: #922b21; border-left: 4px solid #cb4335; }
.alert-warning { background: #fef9e7; color: #7d6608; border-left: 4px solid #d4ac0d; }
.alert-info    { background: #d6eaf8; color: #154360; border-left: 4px solid #2e86c1; }

/* ============================================================
   Sidebar-Navigation
   ============================================================ */
.sidebar-brand {
  padding:     1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand-name {
  color:       #fff;
  font-size:   .95rem;
  font-weight: 700;
  line-height: 1.3;
}
.sidebar-brand-sub {
  color:    var(--sidebar-text);
  font-size: .75rem;
}
.nav-section-title {
  padding:       .75rem 1.25rem .35rem;
  font-size:     .7rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:         rgba(255,255,255,.3);
}
.nav-item {
  display:        flex;
  align-items:    center;
  gap:            .65rem;
  padding:        .6rem 1.25rem;
  color:          var(--sidebar-text);
  text-decoration: none;
  font-size:      .875rem;
  border-radius:  .25rem;
  margin:         .1rem .5rem;
  transition:     background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); }
.nav-item svg, .nav-item .nav-icon { flex-shrink: 0; width: 18px; height: 18px; }

/* ============================================================
   Dashboard Stat-Karten
   ============================================================ */
.stat-card {
  background:    var(--color-surface);
  border-radius: var(--card-radius);
  box-shadow:    var(--card-shadow);
  padding:       1.25rem;
  border:        1px solid var(--color-border);
  display:       flex;
  align-items:   center;
  gap:           1rem;
}
.stat-icon {
  width:           3rem;
  height:          3rem;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-size:       1.3rem;
}
.stat-label { font-size: .78rem; color: var(--color-text-muted); font-weight: 600;
              text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }

/* ============================================================
   Modals
   ============================================================ */
.modal-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.5);
  z-index:    200;
  display:    flex;
  align-items: center;
  justify-content: center;
  padding:    1rem;
}
.modal {
  background:    var(--color-surface);
  border-radius: var(--card-radius);
  box-shadow:    0 8px 32px rgba(0,0,0,.18);
  width:         100%;
  max-width:     480px;
  max-height:    90vh;
  overflow-y:    auto;
}
.modal-header {
  padding:       1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}
.modal-title  { font-size: 1rem; font-weight: 600; }
.modal-body   { padding: 1.25rem 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--color-border);
                display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }

/* Schnellbeträge */
.quick-amount-grid { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.quick-amount-btn  { padding: .3rem .65rem; font-size: .82rem; background: var(--color-bg);
                     border: 1px solid var(--color-border); border-radius: .3rem;
                     cursor: pointer; transition: background .12s; font-weight: 500; }
.quick-amount-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ============================================================
   Guthaben-Anzeige
   ============================================================ */
.credit-ok      { color: var(--color-success); font-weight: 600; }
.credit-low     { color: var(--color-warning); font-weight: 600; }
.credit-expired { color: var(--color-danger);  font-weight: 600; }

/* ============================================================
   Suchfeld
   ============================================================ */
.search-container { position: relative; }
.search-results   {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  right:         0;
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--card-radius);
  box-shadow:    var(--card-shadow);
  z-index:       150;
  max-height:    420px;
  overflow-y:    auto;
}
.search-result-item {
  padding:       .75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  cursor:        pointer;
  transition:    background .1s;
  display:       flex;
  align-items:   center;
  gap:           .75rem;
}
.search-result-item:hover { background: var(--color-bg); }
.search-result-item:last-child { border-bottom: none; }

/* ============================================================
   Pagination
   ============================================================ */
.pagination { display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
.page-link  {
  padding:       .35rem .7rem;
  border:        1px solid var(--color-border);
  border-radius: .3rem;
  font-size:     .85rem;
  text-decoration: none;
  color:         var(--color-text);
  transition:    background .12s;
}
.page-link:hover   { background: var(--color-bg); }
.page-link.active  { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.page-link.disabled{ opacity: .4; pointer-events: none; }

/* ============================================================
   Responsive – mobile
   ============================================================ */
@media (max-width: 768px) {
  .sidebar       { transform: translateX(-100%); }
  .sidebar.open  { transform: translateX(0); }
  .main-content  { margin-left: 0; }
  .sidebar-overlay { display: block; }
  .page-body     { padding: 1rem; }
  .topbar        { padding: 0 1rem; }
}
@media (min-width: 769px) {
  .sidebar-toggle { display: none; }
}

/* ============================================================
   Mobile-Optimierungen (touch-freundlich)
   ============================================================ */
@media (max-width: 768px) {
  /* Mindest-Touch-Target 44px */
  .btn { min-height: 44px; padding: .55rem 1rem; }
  .btn-xs { min-height: 36px; padding: .35rem .65rem; }
  .btn-sm { min-height: 40px; }
  .form-control { min-height: 44px; font-size: 1rem; }
  select.form-control { min-height: 44px; }

  /* Tabellen auf Mobile ausblenden → Karten-Layout übernimmt */
  .data-table th, .data-table td { padding: .5rem .65rem; }

  /* Modal auf Mobile: volle Breite, Aufwärts-Sheet-Stil */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { max-width: 100%; border-radius: var(--card-radius) var(--card-radius) 0 0; }

  /* Quick-Betrags-Buttons größer auf Mobile */
  .quick-amount-btn { min-height: 40px; font-size: .9rem; }

  /* Stat-Karten: 2-Spalten-Grid */
  .stat-card { padding: 1rem; }
  .stat-value { font-size: 1.3rem; }
}

/* Drucker-Ansicht */
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .page-body { padding: 0 !important; }
}