/* ===== CHIKITO BARBERSHOP - Mobile-First Stylesheet ===== */
*,*::before,*::after{box-sizing:border-box}
:root{
  --gold:#c9a24b;
  --gold-dark:#a8862f;
  --gold-light:#e0c179;
  --black:#0f0f10;
  --black-2:#1a1a1c;
  --black-3:#25252a;
  --gray:#6b7280;
  --gray-light:#f3f4f6;
  --gray-2:#e5e7eb;
  --gray-3:#d1d5db;
  --bg:#faf7f2;
  --white:#ffffff;
  --danger:#dc2626;
  --danger-bg:#fef2f2;
  --success:#059669;
  --success-bg:#d1fae5;
  --warning:#d97706;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.04);
  --shadow-lg:0 8px 24px rgba(0,0,0,.1);
  --sidebar-w:240px;
  --topbar-h:60px;
}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:#111;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--gold-dark);text-decoration:none}
a:hover{color:var(--gold)}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;font-weight:700;margin:0 0 .5em}
h1{font-size:1.6rem}
h2{font-size:1.3rem}
h3{font-size:1.1rem}

/* ===== LAYOUT ===== */
.layout{min-height:100vh;display:flex;flex-direction:column}

/* ===== MOBILE TOP BAR ===== */
.mobile-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--topbar-h);
  background:var(--black);
  color:#fff;
  padding:0 16px;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.mobile-topbar .brand{
  font-family:'Playfair Display',serif;
  font-size:1.1rem;
  font-weight:700;
  color:var(--gold);
  letter-spacing:.5px;
  display:flex;align-items:center;gap:8px;
}
.mobile-topbar .brand-icon{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;
}
.hamburger{
  background:transparent;border:0;color:#fff;
  width:44px;height:44px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.hamburger:active{background:rgba(255,255,255,.08)}
.hamburger svg{width:26px;height:26px}

/* ===== SIDEBAR (mobile drawer) ===== */
.sidebar{
  position:fixed;
  top:0;left:0;bottom:0;
  width:85%;max-width:300px;
  background:var(--black);
  color:#fff;
  z-index:100;
  transform:translateX(-105%);
  transition:transform .28s ease;
  display:flex;flex-direction:column;
  box-shadow:4px 0 20px rgba(0,0,0,.3);
  overflow-y:auto;
}
.sidebar.open{transform:translateX(0)}
.backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:99;
}
.backdrop.show{display:block}

.sidebar-header{
  padding:24px 20px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;
}
.sidebar .brand{
  font-family:'Playfair Display',serif;
  font-size:1.15rem;font-weight:700;
  color:var(--gold);
  display:flex;align-items:center;gap:10px;
}
.sidebar .brand-tag{font-size:.62rem;color:#aaa;letter-spacing:2px;font-family:'Inter',sans-serif;font-weight:500;display:block;margin-top:2px}
.sidebar .brand-icon{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:inline-flex;align-items:center;justify-content:center;font-size:22px;
}
.sidebar-close{
  background:transparent;border:0;color:#fff;
  width:40px;height:40px;border-radius:8px;
  font-size:20px;cursor:pointer;
}
.sidebar-close:active{background:rgba(255,255,255,.08)}

.nav{padding:12px 10px;flex:1}
.nav a{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;
  border-radius:10px;
  color:#cfcfd3;
  font-weight:500;
  font-size:.95rem;
  margin-bottom:4px;
  transition:all .15s;
  min-height:48px;
}
.nav a:hover,.nav a:active{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:linear-gradient(135deg,rgba(201,162,75,.18),rgba(201,162,75,.05));color:var(--gold)}
.nav a .ico{font-size:18px;width:22px;text-align:center}

.user-card{
  margin:auto 14px 14px;
  padding:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  display:flex;align-items:center;gap:10px;
}
.avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#111;display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;flex-shrink:0;
}
.user-card .u-name{font-weight:600;color:#fff;font-size:.9rem;line-height:1.2}
.user-card .u-role{font-size:.7rem;color:#999;text-transform:uppercase;letter-spacing:1px}
.user-card .flex-1{flex:1;min-width:0;overflow:hidden}
.user-card .u-name,.user-card .u-role{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signout{
  display:block;padding:10px;margin:0 14px 14px;
  text-align:center;color:#999;
  font-size:.85rem;border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  transition:all .15s;
}
.signout:hover,.signout:active{color:#fff;border-color:rgba(255,255,255,.2)}

/* ===== MAIN CONTENT ===== */
.main{
  flex:1;
  padding:16px;
  max-width:100%;
}
.page-header{
  display:flex;align-items:center;gap:12px;
  margin-bottom:20px;flex-wrap:wrap;
}
.page-header-icon{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.page-header h1{margin:0;font-size:1.4rem;flex:1;min-width:0}
.page-header .actions{display:flex;gap:8px;flex-wrap:wrap;width:100%;margin-top:8px}

.back-link{display:inline-block;margin-bottom:14px;color:var(--gold-dark);font-weight:500;font-size:.9rem}

/* ===== CARDS ===== */
.card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  margin-bottom:16px;
  overflow:hidden;
}
.card-title{font-size:1rem;font-weight:600;margin:0 0 12px;font-family:'Inter',sans-serif}

/* ===== STAT CARDS ===== */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
.stat{
  background:var(--white);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.stat::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-dark));
}
.stat .label{font-size:.7rem;color:var(--gray);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.stat .value{font-size:1.3rem;font-weight:700;margin-top:4px;color:var(--black);font-family:'Playfair Display',serif}
.stat .sub{font-size:.75rem;color:var(--gray);margin-top:2px}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 18px;
  border-radius:10px;
  font-weight:600;font-size:.92rem;
  border:1px solid var(--gray-3);
  background:var(--white);color:#111;
  cursor:pointer;
  text-decoration:none;
  min-height:44px;
  transition:all .15s;
  font-family:inherit;
  -webkit-appearance:none;
}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff;border-color:transparent;
  box-shadow:0 2px 8px rgba(201,162,75,.3);
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-dark{background:var(--black);color:#fff;border-color:var(--black)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger-outline{background:var(--white);color:var(--danger);border-color:var(--danger)}
.btn-sm{padding:8px 12px;min-height:36px;font-size:.82rem}
.btn-block{width:100%}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}

/* ===== FORMS ===== */
.form-group{margin-bottom:14px}
.form-group label{
  display:block;margin-bottom:6px;
  font-weight:600;font-size:.85rem;color:#333;
}
.form-group label .hint{color:var(--gray);font-weight:400;font-size:.78rem;margin-left:4px}
.form-control,input[type=text],input[type=password],input[type=number],input[type=tel],input[type=date],input[type=email],select,textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--gray-2);
  border-radius:10px;
  font-size:16px; /* prevents iOS zoom */
  font-family:inherit;
  background:var(--white);
  color:#111;
  min-height:48px;
  -webkit-appearance:none;appearance:none;
  transition:border-color .15s,box-shadow .15s;
}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23666' d='M6 8L0 0h12z'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,75,.15);
}
input[readonly]{background:var(--gray-light);color:#666}
.form-row{display:grid;grid-template-columns:1fr;gap:12px}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.form-actions .btn{flex:1;min-width:0}

/* hide number spinners on price/amount inputs */
.no-spin::-webkit-outer-spin-button,.no-spin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.no-spin{-moz-appearance:textfield}

/* ===== TABLES (cards on mobile, table on desktop) ===== */
.table-wrap{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.table{width:100%;border-collapse:collapse}
.table thead{display:none}
.table tbody tr{
  display:block;
  padding:14px 16px;
  border-bottom:1px solid var(--gray-2);
}
.table tbody tr:last-child{border-bottom:0}
.table td{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:4px 0;
  border:0;
  font-size:.92rem;
}
.table td::before{
  content:attr(data-label);
  font-size:.72rem;color:var(--gray);font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;
}
.table td:first-child{font-weight:600;font-size:1rem;padding-bottom:6px}
.table td:first-child::before{display:none}
.table td.actions{justify-content:flex-end;padding-top:8px;gap:6px}
.table td.actions::before{display:none}

/* ===== BADGES ===== */
.badge{
  display:inline-block;padding:3px 10px;
  border-radius:999px;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
}
.badge-active{background:var(--success-bg);color:var(--success)}
.badge-inactive{background:#fee2e2;color:var(--danger)}
.badge-cash{background:#dbeafe;color:#1d4ed8}
.badge-zelle{background:#ede9fe;color:#6d28d9}
.badge-gold{background:#fef3c7;color:var(--gold-dark)}
.mono{font-family:'JetBrains Mono','Courier New',monospace;font-size:.85rem;background:var(--gray-light);padding:2px 8px;border-radius:6px;display:inline-block}

/* ===== ALERTS ===== */
.alert{
  padding:12px 14px;border-radius:10px;
  margin-bottom:14px;font-size:.9rem;font-weight:500;
  display:flex;align-items:center;gap:10px;
}
.alert-danger{background:var(--danger-bg);color:var(--danger);border:1px solid #fecaca}
.alert-success{background:var(--success-bg);color:var(--success);border:1px solid #a7f3d0}
.alert-info{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}

/* ===== LOGIN PAGE ===== */
.login-wrap{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:linear-gradient(135deg,var(--black) 0%,#2a2220 100%);
}
.login-card{
  width:100%;max-width:400px;
  background:var(--white);
  border-radius:18px;
  padding:28px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-logo{
  text-align:center;margin-bottom:20px;
}
.login-logo .brand-icon{
  width:64px;height:64px;border-radius:16px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:inline-flex;align-items:center;justify-content:center;
  font-size:34px;margin-bottom:10px;
}
.login-logo h1{font-size:1.4rem;margin:0;color:var(--black)}
.login-logo .tag{font-size:.72rem;color:var(--gray);letter-spacing:3px;text-transform:uppercase;margin-top:4px}

/* ===== INVOICE SPECIFIC ===== */
.invoice-items{border:1px solid var(--gray-2);border-radius:12px;overflow:hidden;margin-bottom:14px}
.invoice-item-row{
  padding:14px;
  border-bottom:1px solid var(--gray-2);
  background:var(--white);
}
.invoice-item-row:last-child{border-bottom:0}
.item-row-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.item-row-head .item-num{font-size:.78rem;color:var(--gray);font-weight:600;text-transform:uppercase;letter-spacing:1px}
.item-row-head .btn-remove{
  background:transparent;border:0;color:var(--danger);
  cursor:pointer;font-size:.85rem;font-weight:600;
  padding:4px 8px;border-radius:6px;
}
.item-row-head .btn-remove:active{background:var(--danger-bg)}
.invoice-total-bar{
  background:var(--black);color:#fff;
  padding:18px;border-radius:12px;
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;
}
.invoice-total-bar .label{font-size:.82rem;color:#aaa;text-transform:uppercase;letter-spacing:1px}
.invoice-total-bar .amount{font-family:'Playfair Display',serif;font-size:2rem;color:var(--gold);font-weight:700}

/* payment toggle */
.payment-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.payment-opt{
  padding:14px;
  border:2px solid var(--gray-2);
  border-radius:12px;
  text-align:center;
  cursor:pointer;
  background:var(--white);
  transition:all .15s;
  min-height:72px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.payment-opt input{position:absolute;opacity:0;pointer-events:none}
.payment-opt .pay-icon{font-size:22px}
.payment-opt .pay-name{font-weight:700;font-size:.9rem}
.payment-opt:has(input:checked),.payment-opt.selected{
  border-color:var(--gold);background:#fff8ec;
  box-shadow:0 0 0 3px rgba(201,162,75,.15);
}

/* ===== FILTERS ===== */
.filters{
  background:var(--white);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
  margin-bottom:16px;
  display:grid;grid-template-columns:1fr;gap:10px;
}
.filters .form-group{margin:0}

/* search bar */
.search-bar{
  background:var(--white);border-radius:12px;padding:8px;
  box-shadow:var(--shadow);display:flex;gap:8px;align-items:center;
  margin-bottom:16px;
}
.search-bar input{border:0;flex:1;min-height:40px;padding:8px 12px;font-size:15px}
.search-bar input:focus{box-shadow:none}
.search-bar .btn{min-height:40px;padding:8px 14px;font-size:.85rem}

/* empty state */
.empty{
  text-align:center;padding:40px 20px;color:var(--gray);
}
.empty .icon{font-size:48px;margin-bottom:10px;opacity:.4}
.empty p{margin:4px 0}

/* utilities */
.text-muted{color:var(--gray)}
.text-gold{color:var(--gold-dark)}
.text-danger{color:var(--danger)}
.text-success{color:var(--success)}
.text-center{text-align:center}
.text-right{text-align:right}
.flex{display:flex}
.gap{gap:10px}
.between{justify-content:space-between}
.mt-0{margin-top:0}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:8px}
.mb-2{margin-bottom:16px}
.w-100{width:100%}
.hide-mobile{display:none}

/* ===== TABLET ===== */
@media (min-width:640px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .form-row-2{grid-template-columns:1fr 1fr}
  .form-actions .btn{flex:0 0 auto}
  .filters{grid-template-columns:repeat(2,1fr)}
}

/* ===== DESKTOP ===== */
@media (min-width:900px){
  body{font-size:15px}
  .mobile-topbar{display:none}
  .layout{flex-direction:row}
  .sidebar{
    position:sticky;top:0;height:100vh;
    transform:none;width:var(--sidebar-w);max-width:none;
    box-shadow:none;border-right:1px solid rgba(255,255,255,.06);
    flex-shrink:0;
  }
  .sidebar-close{display:none}
  .backdrop{display:none!important}
  .main{
    padding:28px 32px;
    flex:1;min-width:0;
    max-width:calc(100% - var(--sidebar-w));
  }
  .page-header h1{font-size:1.8rem}
  h1{font-size:1.8rem}
  .page-header .actions{width:auto;margin-top:0;margin-left:auto}
  .hide-mobile{display:revert}
  .show-mobile{display:none}

  /* tables become real tables */
  .table thead{display:table-header-group;background:var(--gray-light)}
  .table thead th{
    padding:12px 16px;text-align:left;
    font-size:.72rem;color:var(--gray);font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;
    border-bottom:1px solid var(--gray-2);
  }
  .table tbody tr{
    display:table-row;padding:0;
    border-bottom:1px solid var(--gray-2);
  }
  .table tbody tr:hover{background:#fafafa}
  .table td{
    display:table-cell;padding:14px 16px;
    justify-content:flex-start;
    border-bottom:0;
    vertical-align:middle;
  }
  .table td::before{display:none}
  .table td:first-child{padding-bottom:14px;font-size:.95rem}
  .table td.actions{justify-content:flex-end;text-align:right;padding-top:14px}

  /* filters horizontal */
  .filters{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:end}

  /* invoice layout */
  .payment-toggle{max-width:400px}
}

@media (min-width:1200px){
  .main{padding:32px 40px}
}

/* print */
@media print{
  .sidebar,.mobile-topbar,.hamburger,.backdrop,.no-print{display:none!important}
  .main{padding:0;max-width:100%}
  .card{box-shadow:none;border:1px solid #ddd}
}

/* ===== BARBER GRID (select barber page) ===== */
.barber-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:8px;
}
.barber-tile{
  background:var(--white);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  border:2px solid transparent;
  transition:all .2s;
  position:relative;
  overflow:hidden;
}
.barber-tile::before{
  content:"";
  position:absolute;
  top:0;left:0;bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--gold),var(--gold-dark));
  opacity:0;
  transition:opacity .2s;
}
.barber-tile:hover,.barber-tile:active{
  border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  color:inherit;
}
.barber-tile:hover::before,.barber-tile:active::before{opacity:1}
.barber-tile .avatar{
  width:56px;height:56px;font-size:22px;flex-shrink:0;
}
.barber-tile .tile-body{
  flex:1;min-width:0;
}
.barber-tile .tile-name{
  font-weight:700;font-size:1.05rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.barber-tile .tile-user{
  color:var(--gray);font-size:.82rem;margin-top:2px;
}
.barber-tile .tile-stats{
  display:flex;gap:14px;margin-top:8px;flex-wrap:wrap;
}
.barber-tile .tile-stat{
  font-size:.78rem;
}
.barber-tile .tile-stat strong{
  display:block;font-size:.95rem;color:var(--black);font-weight:700;
}
.barber-tile .tile-stat .st-lbl{
  color:var(--gray);font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;font-weight:600;
}
.barber-tile .tile-arrow{
  font-size:22px;color:var(--gold);flex-shrink:0;
}
.barber-tile.inactive{opacity:.6}

@media (min-width:640px){
  .barber-grid{grid-template-columns:1fr 1fr;}
}
@media (min-width:1100px){
  .barber-grid{grid-template-columns:repeat(3,1fr);}
}

/* ===== Nav sections (sidebar dividers) ===== */
.nav-section{
  font-size:.62rem;
  color:rgba(255,255,255,.35);
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-weight:700;
  padding:14px 14px 6px;
  margin-top:4px;
}
.nav-section:first-child{margin-top:0;padding-top:6px}

/* ===== Owner badge ===== */
.badge-owner{
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff;
  padding:3px 10px;
  border-radius:999px;
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  display:inline-block;
}

/* ═══════════════════════════════════════════
   REPORTS PAGE
═══════════════════════════════════════════ */

/* Period bar */
.report-period-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.period-btn {
  padding: .45rem 1rem;
  border-radius: 2rem;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .18s;
  white-space: nowrap;
}
.period-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.period-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #000;
}

/* Custom range form */
.custom-range-form {
  margin-bottom: 1.5rem;
}
.custom-range-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-end;
}
.custom-range-inputs .form-group {
  flex: 1;
  min-width: 140px;
  margin: 0;
}
.custom-range-inputs .btn {
  height: 44px;
  white-space: nowrap;
}

/* Section wrapper */
.report-section {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.report-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 1.25rem 0;
  padding-bottom: .75rem;
  border-bottom: 1.5px solid var(--border);
}

/* Stats grid */
.report-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px) {
  .report-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .report-stats-grid { grid-template-columns: repeat(6, 1fr); }
}
.rstat-card {
  background: var(--bg);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}
.rstat-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: .35rem;
}
.rstat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.rstat-value.gold  { color: var(--gold); }
.rstat-value.cash  { color: #16a34a; }
.rstat-value.zelle { color: #7c3aed; }

/* Payment split bar */
.payment-split-bar {
  display: flex;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--border);
  margin-top: .5rem;
}
.split-cash {
  background: #16a34a;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width .4s;
  min-width: 0;
  overflow: hidden;
}
.split-zelle {
  background: #7c3aed;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width .4s;
  min-width: 0;
  overflow: hidden;
}

/* Ranking list */
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.ranking-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--bg);
  border-radius: 10px;
  border: 1.5px solid var(--border);
  transition: border-color .18s;
}
.ranking-card:first-child {
  border-color: var(--gold);
  background: #fffbf0;
}
.ranking-card.muted { opacity: .55; }
.ranking-medal {
  font-size: 1.75rem;
  flex-shrink: 0;
  width: 2.5rem;
  text-align: center;
}
.ranking-info {
  flex: 1;
  min-width: 0;
}
.ranking-name {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking-bar-wrap {
  background: var(--border);
  border-radius: 4px;
  height: 8px;
  margin-bottom: .35rem;
  overflow: hidden;
}
.ranking-bar {
  height: 100%;
  background: var(--gold);
  border-radius: 4px;
  transition: width .5s ease;
  min-width: 2px;
}
.ranking-meta {
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking-revenue {
  text-align: right;
  flex-shrink: 0;
}
.ranking-total {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--gold);
}
.ranking-pct {
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Bar chart */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: .35rem;
  height: 200px;
  padding-bottom: 2rem;
  overflow-x: auto;
  overflow-y: visible;
  padding-top: 1rem;
  position: relative;
}
.bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 28px;
  max-width: 60px;
  height: 100%;
  position: relative;
  justify-content: flex-end;
}
.bar-col:hover .bar-tooltip { opacity: 1; pointer-events: auto; }
.bar-tooltip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  font-size: .72rem;
  padding: .4rem .6rem;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 10;
}
.bar-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  min-height: 4px;
  transition: height .4s ease;
}
.bar-cash {
  background: #16a34a;
  width: 100%;
}
.bar-zelle {
  background: #7c3aed;
  width: 100%;
}
.bar-label {
  font-size: .65rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: .3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  position: absolute;
  bottom: 0;
}
.chart-legend {
  display: flex;
  gap: 1.5rem;
  margin-top: .75rem;
  font-size: .82rem;
  font-weight: 600;
}
.legend-cash  { color: #16a34a; }
.legend-zelle { color: #7c3aed; }

/* Data table */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.data-table th {
  padding: .65rem 1rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.data-table tfoot td {
  border-top: 2px solid var(--border);
  border-bottom: none;
  background: var(--bg);
  font-weight: 700;
  color: var(--gold);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #fafafa; }

/* Mobile: card-style table */
@media (max-width: 640px) {
  .data-table thead { display: none; }
  .data-table tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: .5rem;
    padding: .5rem;
  }
  .data-table td {
    display: flex;
    justify-content: space-between;
    border: none;
    padding: .35rem .5rem;
    font-size: .88rem;
  }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: .78rem;
  }
  .data-table tfoot { display: none; }
  .ranking-meta { white-space: normal; }
}

/* ═══════════════════════════════════════════
   TICKET EDIT / DANGER ZONE
═══════════════════════════════════════════ */

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text);
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.danger-zone {
  border: 1.5px solid #fca5a5 !important;
  background: #fff5f5 !important;
}
.danger-title {
  color: #dc2626 !important;
}

.page-header-meta {
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: .15rem;
}

/* Remove item button in invoice rows */
.btn-remove-item {
  background: none;
  border: none;
  color: #dc2626;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  padding: .2rem .5rem;
  border-radius: 4px;
  transition: background .15s;
}
.btn-remove-item:hover { background: #fee2e2; }

.item-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
}
.item-row-header strong {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
}

/* alert-error */
.alert-error {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  border-radius: 8px;
  padding: .85rem 1.1rem;
  margin-bottom: 1rem;
  font-size: .9rem;
}

/* ═══════════════════════════════════════════
   TICKET NUMBER BADGE
═══════════════════════════════════════════ */
.ticket-num {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: .88rem;
  color: var(--gold);
  letter-spacing: .5px;
  white-space: nowrap;
}

/* ===== TRASH & AUDIT STYLES ===== */
.trash-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--danger, #e74c3c);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.alert {
  padding: .75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: .95rem;
}
.alert-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.alert-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.invoice-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.invoice-meta > div {
  min-width: 120px;
}

.filter-bar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  align-items: center;
}
.filter-bar .form-control {
  flex: 1;
  min-width: 140px;
}

.stats-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.stats-row.mb-2 { margin-bottom: 1rem; }

.stat-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: .75rem 1.25rem;
  min-width: 120px;
  text-align: center;
}
.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent, #b8860b);
}
.stat-card .stat-label {
  font-size: .8rem;
  color: var(--text-muted, #888);
  margin-top: .15rem;
}

.total-display {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent, #b8860b);
  margin: .75rem 0;
}

.badge {
  background: var(--accent-bg, #fef9e7);
  color: var(--accent, #b8860b);
  border: 1px solid var(--accent-border, #f5d76e);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

.ml-1 { margin-left: .5rem; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mb-2 { margin-bottom: 1rem; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted, #888); }

.btn-sm {
  padding: .25rem .6rem;
  font-size: .8rem;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
  .invoice-meta { flex-direction: column; gap: .5rem; }
  .filter-bar { flex-direction: column; }
  .filter-bar .form-control { min-width: 100%; }
}