/* ═══════════════════════════════════════════════════════════════
   ADORA Finance — Stylesheet
   Matches ADORA brand: Cormorant Garamond + Cairo, mauve + charcoal
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Cormorant+Garamond:wght@400;500;600&display=swap');

:root {
  --charcoal:   #2f2f2f;
  --mauve:      #6f4a5c;
  --mauve-dark: #5a3a4a;
  --mauve-lite: #f0e8ec;
  --cream:      #f7f4f1;
  --white:      #ffffff;
  --line:       rgba(47,47,47,.10);
  --red:        #c0392b;
  --green:      #2f6454;
  --sidebar-w:  240px;
  --radius:     16px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Cairo', Arial, sans-serif;
  background: var(--cream);
  color: var(--charcoal);
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--charcoal);
  display: flex; flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 28px 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: center;
}

.sidebar-logo img {
  width: 110px;
  filter: brightness(0) invert(1);
  display: block;
  margin: 0 auto;
}

.sidebar-badge {
  display: inline-block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.40);
  font-family: 'Cairo', sans-serif;
}

.sidebar-nav {
  list-style: none;
  padding: 16px 0;
  flex: 1;
}

.sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 24px;
  color: rgba(255,255,255,.60);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  transition: .2s;
  border-left: 3px solid transparent;
}

.sidebar-nav li a:hover { color: #fff; background: rgba(255,255,255,.05); }

.sidebar-nav li a.active {
  color: #fff;
  background: rgba(111,74,92,.25);
  border-left-color: var(--mauve);
}

.sidebar-nav li a .nav-icon { font-size: 16px; width: 20px; text-align: center; }

.sidebar-footer {
  padding: 20px 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-user {
  font-size: 11px;
  color: rgba(255,255,255,.40);
  margin-bottom: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.logout-btn {
  display: block;
  text-align: center;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.70);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  transition: .2s;
}

.logout-btn:hover { background: var(--mauve); color: #fff; }

/* ── Main Content ────────────────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  padding: 36px 40px;
}

.page-header {
  margin-bottom: 28px;
}

.page-header h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--charcoal);
}

.page-header p { font-size: 14px; color: #8a8480; margin-top: 4px; }

/* ── Period Toggle ───────────────────────────────────────────── */
.period-toggle {
  display: flex;
  width: max-content;
  background: rgba(47,47,47,.07);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin: 0 auto 28px;
  border: 0.5px solid var(--line);
}

.period-toggle a {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: #6d6663;
  transition: .2s;
}

.period-toggle a.active, .period-toggle a:hover {
  background: var(--charcoal);
  color: #fff;
}

/* ── Cards ───────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 28px; }
.cards-2 { grid-template-columns: repeat(2,1fr); }
.cards-3 { grid-template-columns: repeat(3,1fr); }

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px 24px;
  border: 0.5px solid var(--line);
}

.card-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #a39d99;
  font-weight: 700;
  margin-bottom: 10px;
}

.card-value {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1;
}

.card-value.green { color: var(--green); }
.card-value.red   { color: var(--red); }
.card-value.mauve { color: var(--mauve); }

.card-sub { font-size: 12px; color: #a39d99; margin-top: 6px; }
.card-trend { margin-top: 10px; font-size: 12px; }
.trend { font-weight: 700; font-size: 12px; }
.trend.up   { color: var(--green); }
.trend.down { color: var(--red); }
.trend.neutral { color: #a39d99; }
.trend-label { font-size: 11px; color: #a39d99; }

/* ── Table ───────────────────────────────────────────────────── */
.table-wrap {
  background: var(--white);
  border-radius: var(--radius);
  border: 0.5px solid var(--line);
  overflow: hidden;
}

.table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 0.5px solid var(--line);
}

.table-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
}

.table-actions { display: flex; gap: 8px; align-items: center; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead th {
  background: var(--cream);
  padding: 11px 16px;
  text-align: left;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #a39d99;
  font-weight: 700;
  border-bottom: 0.5px solid var(--line);
}

tbody td {
  padding: 13px 16px;
  border-bottom: 0.5px solid var(--line);
  color: var(--charcoal);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #faf8f6; }

.td-amount { font-weight: 700; color: var(--green); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; }
.td-expense { color: var(--red); }
.td-muted  { color: #a39d99; font-size: 12px; }

.table-total {
  padding: 14px 16px;
  text-align: right;
  font-weight: 700;
  font-size: 14px;
  border-top: 1px solid var(--line);
  background: var(--cream);
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}

.badge-nails    { background: #f0ebe8; color: #7a4a1a; }
.badge-hair     { background: #e8f0eb; color: var(--green); }
.badge-face     { background: var(--mauve-lite); color: var(--mauve); }
.badge-category { background: rgba(47,47,47,.08); color: var(--charcoal); }
.badge-present  { background: #e8f0eb; color: var(--green); }
.badge-absent   { background: #fdecea; color: var(--red); }
.badge-late     { background: #fef4e4; color: #b07a00; }

.artist-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.artist-tag {
  background: var(--mauve-lite);
  color: var(--mauve);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Forms ───────────────────────────────────────────────────── */
.form-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 32px;
  border: 0.5px solid var(--line);
  margin-bottom: 28px;
}

.form-card h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 22px;
  color: var(--charcoal);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-full { grid-column: 1 / -1; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-group label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #a39d99;
  font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 14px;
  border-radius: 10px;
  border: 0.5px solid rgba(47,47,47,.20);
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  color: var(--charcoal);
  background: var(--white);
  transition: .2s;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--mauve);
  box-shadow: 0 0 0 3px rgba(111,74,92,.10);
}

/* Artist checkboxes */
.artist-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.artist-check {
  display: none;
}

.artist-check + label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 0.5px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
  color: #6d6663;
  background: var(--white);
  letter-spacing: 0;
  text-transform: none;
}

.artist-check:checked + label {
  background: var(--mauve);
  color: #fff;
  border-color: var(--mauve);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: 'Cairo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: .2s;
  text-decoration: none;
  letter-spacing: .5px;
}

.btn-primary { background: var(--charcoal); color: #fff; }
.btn-primary:hover { background: var(--mauve); }

.btn-mauve { background: var(--mauve); color: #fff; }
.btn-mauve:hover { background: var(--mauve-dark); }

.btn-outline {
  background: transparent;
  border: 0.5px solid rgba(47,47,47,.20);
  color: var(--charcoal);
}
.btn-outline:hover { border-color: var(--mauve); color: var(--mauve); }

.btn-sm { padding: 6px 14px; font-size: 11px; }

.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #a93226; }

/* ── Alert ───────────────────────────────────────────────────── */
.alert {
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13px;
  margin-bottom: 20px;
  font-weight: 600;
}
.alert-error   { background: #fdecea; color: var(--red); }
.alert-success { background: #e8f0eb; color: var(--green); }

/* ── Login Page ──────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--charcoal);
  padding: 20px;
}

.login-card {
  background: var(--white);
  border-radius: 24px;
  padding: 48px 44px;
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.login-logo { width: 120px; margin: 0 auto 6px; display: block; }

.login-subtitle {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #a39d99;
  margin-bottom: 36px;
}

.login-card h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 28px;
  color: var(--charcoal);
}

.login-field {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 0.5px solid rgba(47,47,47,.20);
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  color: var(--charcoal);
  margin-bottom: 14px;
  outline: none;
  transition: .2s;
  text-align: center;
}

.login-field:focus { border-color: var(--mauve); box-shadow: 0 0 0 3px rgba(111,74,92,.10); }

.login-btn {
  width: 100%;
  padding: 13px;
  border-radius: 999px;
  background: var(--charcoal);
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: .2s;
  letter-spacing: 1px;
}

.login-btn:hover { background: var(--mauve); }

.login-hint {
  font-size: 11px;
  color: #a39d99;
  margin-top: 8px;
  margin-bottom: 0;
}

/* ── Setup Page ──────────────────────────────────────────────── */
.setup-wrap {
  max-width: 680px;
  margin: 48px auto;
  padding: 0 20px;
}

.setup-card {
  background: var(--white);
  border-radius: 20px;
  padding: 36px 40px;
  border: 0.5px solid var(--line);
  margin-bottom: 24px;
}

.setup-card h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
  color: var(--charcoal);
}

.qr-block {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px;
  background: var(--cream);
  border-radius: 14px;
  margin-bottom: 20px;
}

.qr-block img { width: 100px; height: 100px; border-radius: 10px; }

.qr-info h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
}

.qr-info p { font-size: 13px; color: #6d6663; line-height: 1.6; }

.secret-display {
  font-family: monospace;
  font-size: 13px;
  background: rgba(111,74,92,.08);
  color: var(--mauve);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 2px;
  margin-top: 6px;
  display: inline-block;
}

/* ── Top Performers ──────────────────────────────────────────── */
.rank-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 0.5px solid var(--line);
}

.rank-item:last-child { border-bottom: none; }

.rank-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #c8c2be;
  width: 28px;
  text-align: center;
}

.rank-num.gold   { color: #c9a227; }
.rank-num.silver { color: #a0a0a0; }
.rank-num.bronze { color: #b87333; }

.rank-info { flex: 1; }
.rank-name { font-weight: 700; font-size: 14px; }
.rank-sub  { font-size: 12px; color: #a39d99; margin-top: 2px; }

.rank-value {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--charcoal);
  text-align: right;
}

/* ── Attendance Table ────────────────────────────────────────── */
.att-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 0.5px solid var(--line); }
.att-row:last-child { border-bottom: none; }
.att-name { font-weight: 600; font-size: 14px; }

.att-options { display: flex; gap: 6px; }

.att-radio { display: none; }

.att-radio + label {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 0.5px solid var(--line);
  color: #a39d99;
  transition: .2s;
}

.att-radio.present:checked + label { background: #e8f0eb; color: var(--green); border-color: var(--green); }
.att-radio.absent:checked  + label { background: #fdecea; color: var(--red);   border-color: var(--red); }
.att-radio.late:checked    + label { background: #fef4e4; color: #b07a00;      border-color: #b07a00; }

/* ── Responsive ──────────────────────────────────────────────── */
.hamburger { display: none; }

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%); transition: .3s;
    z-index: 400;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; padding: 20px 16px; }
  .cards { grid-template-columns: repeat(2,1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid.cols-3 { grid-template-columns: 1fr; }

  .hamburger {
    display: flex;
    position: fixed;
    top: 14px; left: 14px;
    z-index: 200;
    background: var(--charcoal);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 18px;
    cursor: pointer;
  }

  .overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 350;
  }

  .overlay.show { display: block; }
}

@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .card-value { font-size: 22px; }
}

/* ── Mobile bottom tab bar ─────────────────────────────────────── */
.bottom-nav { display: none; }

@media (max-width: 900px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 300;
    background: #fff;
    border-top: 0.5px solid var(--line);
    box-shadow: 0 -4px 20px rgba(0,0,0,.06);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    font-family: 'Cairo', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #a39d99;
    padding: 6px 0;
    border-radius: 12px;
    min-height: 48px;
    justify-content: center;
  }
  .bottom-nav a span { font-size: 20px; line-height: 1; }
  .bottom-nav a svg { width: 22px; height: 22px; }
  .bottom-nav a.active { color: var(--mauve); background: var(--cream); }

  /* keep content clear of the bar */
  .main { padding-bottom: 90px; }

  /* bottom nav replaces the floating hamburger */
  .hamburger { display: none; }

  /* tables scroll sideways so the delete ✕ is always reachable */
  .table-wrap { overflow-x: auto; }
  .table-wrap table { min-width: 640px; }

  /* bigger tap target for the delete button */
  td .btn-sm { min-height: 40px; min-width: 40px; justify-content: center; }
}

/* ── Today strip ───────────────────────────────────────────────── */
.today-strip { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.today-item {
  flex: 1; min-width: 150px;
  background: var(--charcoal); color: #fff;
  border-radius: var(--radius); padding: 16px 20px;
}
.today-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 700; }
.today-value { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; margin-top: 6px; }
.today-value.green { color: #8fd1b3; }
.today-sub { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 2px; }
.today-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.today-tag { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.today-tag.absent { background: rgba(192,57,43,.25); color: #f1a79e; }
.today-tag.late   { background: rgba(176,122,0,.25); color: #e8c377; }

/* ── Money tab ─────────────────────────────────────────────────── */
.money-row { display: flex; align-items: center; gap: 14px; padding: 13px 18px; background: #fff; }
.money-icon {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
}
.money-icon.revenue { background: #e8f2ee; color: var(--green); }
.money-icon.expense { background: #f9e8e6; color: var(--red); }
.money-info { flex: 1; min-width: 0; }
.money-title { font-weight: 700; font-size: 14px; }
.money-sub { font-size: 11px; color: #a39d99; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.money-amount { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; font-weight: 600; white-space: nowrap; }
.money-amount.in  { color: var(--green); }
.money-amount.out { color: var(--red); }
.money-date { font-size: 10px; color: #a39d99; margin-top: 1px; }
.pay-chip { background: var(--mauve-lite); color: var(--mauve); border-radius: 999px; padding: 1px 8px; font-size: 10px; font-weight: 700; }

/* swipe to delete */
.swipe-wrap { position: relative; overflow: hidden; border-bottom: 0.5px solid var(--line); }
.swipe-wrap:last-child { border-bottom: none; }
.swipe-action {
  position: absolute; top: 0; right: 0; bottom: 0; width: 96px;
  background: var(--red); display: flex; align-items: stretch;
}
.swipe-action form { display: flex; width: 100%; }
.swipe-action button {
  width: 100%; border: none; background: transparent; color: #fff;
  font-family: 'Cairo', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer;
}
.swipe-row { position: relative; background: #fff; will-change: transform; }
.swipe-action-right {
  position: absolute; top: 0; left: 0; bottom: 0; width: 96px;
  background: var(--green); display: flex; align-items: stretch;
}
.swipe-action-right button {
  width: 100%; border: none; background: transparent; color: #fff;
  font-family: 'Cairo', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer;
}
.row-edit-btn {
  background: none; border: none; cursor: pointer; font-size: 15px;
  padding: 8px; color: #a39d99; flex-shrink: 0;
}
@media (max-width: 900px) {
  /* phones swipe instead — hide the pencil */
  .row-edit-btn { display: none; }
  /* swipe-card lists must never scroll sideways */
  .swipe-list { overflow-x: hidden !important; }

  /* headers stack in two lines: title on top, buttons below */
  .table-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .table-head .table-actions,
  .table-head > div:not(.table-title) { flex-wrap: wrap; }
  .table-head form { flex: 1 1 100%; }
  .table-head form input[type="text"] { flex: 1; width: auto !important; min-width: 0; }
  .page-header > div:last-child { flex-wrap: wrap; }
}

/* floating add button */
.fab {
  position: fixed; right: 18px; bottom: 92px; z-index: 350;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--mauve); color: #fff; border: none;
  font-size: 28px; line-height: 1; cursor: pointer;
  box-shadow: 0 8px 24px rgba(111,74,92,.4);
}
@media (min-width: 901px) { .fab { bottom: 28px; } }

/* quick-add bottom sheet */
.sheet-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 380;
}
.sheet-overlay.show { display: block; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  background: #fff; border-radius: 22px 22px 0 0;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .25s;
  max-height: 85vh; overflow-y: auto;
  max-width: 560px; margin: 0 auto;
  box-shadow: 0 -10px 40px rgba(0,0,0,.18);
}
.sheet.open { transform: translateY(0); }
.sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: #ddd6d0; margin: 6px auto 14px; }
.sheet-toggle {
  display: flex; background: var(--cream); border-radius: 999px; padding: 3px; margin-bottom: 16px;
}
.sheet-toggle button {
  flex: 1; border: none; background: transparent; border-radius: 999px;
  padding: 10px; font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 700;
  color: #6d6663; cursor: pointer;
}
.sheet-toggle button.on { background: var(--charcoal); color: #fff; }
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-grid select, .sheet-grid input, .sheet-input {
  padding: 12px 14px; border: 0.5px solid rgba(47,47,47,.20); border-radius: 12px;
  font-family: 'Cairo', sans-serif; font-size: 14px; width: 100%;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip-check { display: none; }
.chip {
  padding: 9px 16px; border-radius: 999px; border: 0.5px solid var(--line);
  font-size: 13px; font-weight: 600; color: #6d6663; cursor: pointer; background: #fff;
}
.chip-check:checked + .chip { background: var(--mauve); color: #fff; border-color: var(--mauve); }
.chip.pay { background: #f4f1ee; border-color: #ddd2c8; color: #6d6663; }
.chip-check:checked + .chip.pay { background: var(--green, #2f6454); color: #fff; border-color: var(--green, #2f6454); }
.sheet-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #a39d99; font-weight: 700; margin-top: 14px; }

/* ── Collapsible sections (Services & Prices) ──────────────────── */
.section-toggle {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--charcoal); color: #fff;
  border-radius: var(--radius); padding: 14px 20px;
  font-weight: 700; font-size: 14px; cursor: pointer;
  margin: 0 0 14px; user-select: none;
}
.section-toggle .chev { color: rgba(255,255,255,.6); }

/* ── Activity badge ────────────────────────────────────────────── */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; margin-left: 6px;
}
.nav-badge-tab {
  position: absolute; top: 2px; right: 50%; margin-right: -22px; margin-left: 0;
}

/* ═══════════════════════════════════════════════════════════════
   2026-07 polish pass — depth, accessibility, motion, print
   ═══════════════════════════════════════════════════════════════ */

/* Subtle depth on cards + smooth hover lift */
.card, .table-wrap, .form-card {
  box-shadow: 0 1px 2px rgba(47,47,47,.04);
  transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: 0 6px 18px rgba(47,47,47,.08); transform: translateY(-1px); }

/* Visible keyboard focus everywhere (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--mauve);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Buttons: press feedback */
.btn:active, .login-btn:active, .fab:active { transform: scale(.97); }

/* Alerts: accent bar for faster scanning */
.alert-error   { border-left: 4px solid var(--red); }
.alert-success { border-left: 4px solid var(--green); }

/* Table rows: smoother hover */
tbody tr { transition: background .15s; }

/* Empty-ish muted text consistency */
.muted { color: #a39d99; font-size: 12px; }

/* Larger touch targets for the period toggle on phones */
@media (max-width: 560px) {
  .period-toggle { width: 100%; justify-content: space-between; }
  .period-toggle a { flex: 1; text-align: center; padding: 9px 8px; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Print: clean reports straight from the browser */
@media print {
  .sidebar, .bottom-nav, .hamburger, .fab, .period-toggle,
  .btn, .table-actions, .overlay, .sheet, .sheet-overlay { display: none !important; }
  .main { margin-left: 0; padding: 0; }
  body { background: #fff; }
  .card, .table-wrap, .form-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ── RTL (Arabic) ─────────────────────────────────────────────── */
[dir="rtl"] body, [dir="rtl"] { direction: rtl; }
[dir="rtl"] .sidebar { left: auto; right: 0; }
[dir="rtl"] .main { margin-left: 0; margin-right: var(--sidebar-w); }
[dir="rtl"] .sidebar-nav li a { border-left: none; border-right: 3px solid transparent; }
[dir="rtl"] .sidebar-nav li a.active { border-right-color: var(--mauve); }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
[dir="rtl"] .td-amount, [dir="rtl"] .money-amount { direction: ltr; }
[dir="rtl"] .swipe-action { right: auto; left: 0; }
[dir="rtl"] .swipe-action-right { left: auto; right: 0; }
@media (max-width: 900px) {
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  [dir="rtl"] .sidebar.open { transform: translateX(0); }
  [dir="rtl"] .main { margin-right: 0; }
  [dir="rtl"] .hamburger { left: auto; right: 16px; }
}