/* ============================================================
   Beardcode CMS — GLOBAL STYLESHEET (Polished SaaS)
   - Global tokens + reset
   - Layout shell + sidebar
   - Typography
   - Buttons / forms
   - Panels / tables / badges / chips
   - Modal base + Toast
   - Command Palette + Bulk Bar
   ============================================================ */

/* =========================
   1) CSS Variables / Tokens
   ========================= */

:root{
  /* Core */
  --bg: #f6f8fc;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #667085;
  --muted-2: #98A2B3;
  --border: #e6eaf2;
  --border-2: #eef2f7;

  /* Brand */
  --primary: #0b8f63;
  --primary-700: #087652;

  /* Status */
  --danger: #b42318;
  --warning: #b45309;
  --info: #175cd3;
  --success: #067647;

  /* Shadows (refined) */
  --shadow-xs: 0 1px 0 rgba(15, 23, 42, 0.03), 0 8px 20px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 0 rgba(15, 23, 42, 0.04), 0 12px 28px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 1px 0 rgba(15, 23, 42, 0.05), 0 18px 48px rgba(15, 23, 42, 0.12);

  /* Radius */
  --radius-xl: 18px;
  --radius-lg: 16px;
  --radius-md: 14px;
  --radius-sm: 12px;
  --radius-xs: 10px;

  /* Focus */
  --focus: 0 0 0 4px rgba(11, 143, 99, 0.16);

  /* Typography weights */
  --w-text: 450;
  --w-ui: 600;
  --w-heading: 750;

  /* Sidebar */
  --sb-width: 244px;
  --sb-pad-x: 10px;
  --sb-pad-y: 12px;

  --sb-divider: #eef2f7;
  --sb-icon: #98A2B3;
  --sb-text: #344054;

  --sb-hover: #F7F9FC;
  --sb-active-bg: rgba(11, 143, 99, 0.10);
  --sb-active-border: rgba(11, 143, 99, 0.18);

  /* Chips */
  --chip-bg: #f2f4f7;
  --chip-border: #eaecf0;

  /* Layout */
  --page-max: 1200px;

  /* Compact table rhythm (global, all modules) */
  --table-head-pad-y: 8px;
  --table-head-pad-x: 12px;
  --table-cell-pad-y: 9px;
  --table-cell-pad-x: 12px;
  --table-cell-font: 12px;

  /* Motion */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-soft: cubic-bezier(.2,.7,.2,1);
}

/* =========================
   2) Base Reset
   ========================= */

*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(23, 92, 211, 0.06), transparent 55%),
    radial-gradient(900px 520px at 85% 0%, rgba(11, 143, 99, 0.07), transparent 55%),
    var(--bg);
  font-weight: var(--w-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas{
  max-width: 100%;
  height: auto;
}

button, input, select, textarea{
  font: inherit;
}

a{
  color: var(--primary);
  text-decoration: none;
  font-weight: var(--w-ui);
}
a:hover{ text-decoration: underline; }

:focus-visible{
  outline: none;
  box-shadow: var(--focus);
  border-radius: 12px;
}

.app-shell{
  min-height: 100%;
}

/* =========================
   3) Typography Scale
   ========================= */

.h1{
  font-size: 22px;
  font-weight: var(--w-heading);
  margin: 0;
  letter-spacing: -0.02em;
}

.h2{
  font-size: 16px;
  font-weight: var(--w-heading);
  margin: 0;
  letter-spacing: -0.01em;
}

.h3{
  font-size: 14px;
  font-weight: var(--w-heading);
  margin: 0;
}

.p{
  margin: 0;
  font-size: 14px;
  font-weight: var(--w-text);
}

.small{
  font-size: 12px;
  color: var(--muted);
  font-weight: var(--w-text);
}

.muted{
  color: var(--muted);
}

.help-text{
  font-size: 12px;
  color: var(--muted-2);
}

/* =========================
   Shared Module Headers
   ========================= */

:is(.leads-header, .clients-header, .quotes-header, .invoices-header, .productsservices-header, .expenses-header, .zusatzeinkommen-header, .pm-header){
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 2px 0 18px;
}

:is(.leads-h1, .clients-h1, .quotes-h1, .invoices-h1, .productsservices-h1, .expenses-h1, .zusatzeinkommen-h1, .pm-h1){
  margin: 0;
  font-size: 26px;
  font-weight: var(--w-heading);
  color: #111827;
  letter-spacing: -0.02em;
}

:is(.leads-sub, .clients-sub, .quotes-sub, .invoices-sub, .productsservices-sub, .expenses-sub, .zusatzeinkommen-sub, .pm-sub){
  margin: 6px 0 0;
  font-size: 13px;
  color: #7b879a;
  font-weight: var(--w-text);
}

:is(.leads-header__right, .clients-header__right, .quotes-header__right, .invoices-header__right, .productsservices-header__right, .expenses-header__right, .zusatzeinkommen-header__right, .pm-header__right){
  display: flex;
  align-items: center;
  gap: 14px;
}

/* =========================
   4) App Layout Shell
   ========================= */

.app-layout{
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sb-width) 1fr;
}

/* single scroll area (desktop) */
html, body{
  height: 100%;
  overflow: hidden;
}

.app-layout{
  height: 100vh;
  overflow: hidden;
}

.page{
  padding: 22px 24px 36px;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#page{
  max-width: var(--page-max);
}

/* =========================
   5) Sidebar (GLOBAL)
   ========================= */

.sidebar{
  background: #ffffff;
  border-right: 1px solid var(--sb-divider);
  padding: var(--sb-pad-y) var(--sb-pad-x) 10px;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 8px;

  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;
}

.sidebar__brand{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 4px;
}

.sidebar__logo{
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: transparent;
  display: grid;
  place-items: center;
  box-shadow: none;
}

.sidebar__logoImg{
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

.sidebar__brandText{
  display: grid;
  gap: 2px;
}

.sidebar__brandName{
  font-weight: var(--w-heading);
  font-size: 16px;
  letter-spacing: -0.02em;
  color: #111827;
}

.sidebar__brandSub{
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #98A2B3;
  font-weight: 700;
}

.sidebar__divider{
  height: 1px;
  background: var(--sb-divider);
  width: calc(100% + (var(--sb-pad-x) * 2));
  margin-left: calc(var(--sb-pad-x) * -1);
}

/* Nav list */
.sidebar__nav{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.sidebar__group{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar__groupTitle{
  padding: 2px 8px 3px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #98A2B3;
  font-weight: 700;
}

.sidebar__link{
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 6px;

  padding: 5px 7px;
  border-radius: 10px;
  color: var(--sb-text);
  font-weight: var(--w-ui);
  font-size: 11px;
  border: 1px solid transparent;
  text-decoration: none;
  background: transparent;
  user-select: none;

  transition: background 160ms var(--ease-soft),
              border-color 160ms var(--ease-soft),
              transform 160ms var(--ease-soft);
}

.sidebar__icon{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  display: grid;
  place-items: center;
  color: #475467;
}

.sidebar__icon svg{
  width: 14px;
  height: 14px;
}

.sidebar__link:hover{
  background: var(--sb-hover);
  text-decoration: none;
  transform: translateY(-1px);
}

.sidebar__link.is-active{
  background: var(--sb-active-bg);
  border-color: var(--sb-active-border);
}

.sidebar__link.is-active .sidebar__icon{
  background: rgba(11, 143, 99, 0.12);
  border-color: rgba(11, 143, 99, 0.18);
  color: var(--primary);
}

/* Push footer down */
.sidebar__spacer{ min-height: 1px; }

/* Footer */
.sidebar__footer{
  padding-top: 4px;
  display: grid;
  gap: 10px;
}

.sidebar__user{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}

.sidebar__avatar{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(11,143,99,0.16), rgba(11,143,99,0.06));
  border: 1px solid rgba(11,143,99,0.18);
  color: #0b5f46;
  font-weight: var(--w-heading);
  font-size: 12px;
  display: grid;
  place-items: center;
}

.sidebar__userMeta{
  display: grid;
  gap: 2px;
}

.sidebar__userName{
  font-weight: var(--w-ui);
  font-size: 12px;
  line-height: 1.1;
  color: #111827;
}

.sidebar__userEmail{
  font-size: 11px;
  color: var(--sb-icon);
  line-height: 1.1;
  font-weight: var(--w-text);
}

.sidebar__actions{
  display: grid;
  gap: 6px;
  padding: 0 1px 1px;
}

.sidebar__action{
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 8px;

  font-weight: var(--w-ui);
  font-size: 12px;
  color: #475467;
  background: rgba(251,252,255,0.92);
  border: 1px solid rgba(230,234,242,0.88);
  cursor: pointer;
  padding: 8px 8px;
  border-radius: 12px;
  text-decoration: none;

  transition: background 160ms var(--ease-soft),
              border-color 160ms var(--ease-soft),
              box-shadow 160ms var(--ease-soft),
              transform 160ms var(--ease-soft);
}

.sidebar__action:hover{
  background: #ffffff;
  border-color: rgba(230,234,242,0.95);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  transform: translateY(-1px);
}

.sidebar__action:active{
  transform: translateY(1px);
}

.sidebar__actionIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #667085;
}

.sidebar__logout{
  background: rgba(242,244,247,0.75);
  border-color: rgba(234,236,240,0.95);
}

/* =========================
   6) Buttons (GLOBAL)
   ========================= */

.btn{
  appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  font-weight: var(--w-ui);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  user-select: none;

  transition: transform 140ms var(--ease-soft),
              box-shadow 160ms var(--ease-soft),
              background 160ms var(--ease-soft),
              border-color 160ms var(--ease-soft),
              filter 160ms var(--ease-soft);
}

.btn:active{ transform: translateY(1px); }

.btn:disabled{
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-primary{
  background: linear-gradient(180deg, rgba(11,143,99,1), rgba(8,118,82,1));
  color: #fff;
  box-shadow: 0 14px 28px rgba(11, 143, 99, 0.22);
}
.btn-primary:hover{
  filter: brightness(1.02);
  box-shadow: 0 18px 38px rgba(11, 143, 99, 0.26);
}

.btn-ghost{
  background: rgba(255,255,255,0.90);
  border: 1px solid var(--border);
  color: #344054;
  box-shadow: 0 1px 0 rgba(15,23,42,0.03);
}
.btn-ghost:hover{
  background: #ffffff;
  box-shadow: var(--shadow-xs);
}

.btn-sm{
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 13px;
}

/* =========================
   7) Forms (GLOBAL)
   ========================= */

.field{
  display: grid;
  gap: 8px;
}

.label{
  font-size: 12px;
  font-weight: var(--w-ui);
  color: #344054;
  letter-spacing: 0.02em;
}

.input{
  width: 100%;
  height: 42px;
  border: 1px solid var(--border);
  background: rgba(251,252,255,0.92);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  outline: none;
  color: var(--text);
  font-weight: var(--w-text);

  transition: border-color 160ms var(--ease-soft),
              box-shadow 160ms var(--ease-soft),
              background 160ms var(--ease-soft);
}

.input::placeholder{
  color: var(--muted-2);
}

.input:focus{
  border-color: rgba(11, 143, 99, 0.45);
  box-shadow: var(--focus);
  background: #ffffff;
}

.help-text{
  font-size: 12px;
  color: var(--muted);
  font-weight: var(--w-text);
}

/* Input-with-icon helper */
.input-wrap{ position: relative; }
.input-icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--muted-2);
}
.input-with-icon{ padding-left: 40px; }

/* =========================
   8) Panels / Cards (GLOBAL)
   ========================= */

.panel{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(230,234,242,0.92);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

.card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(230,234,242,0.92);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* =========================
   9) Tables (GLOBAL)
   ========================= */

.table-wrap{
  overflow: auto;
}

.table-wrap--expand{
  overflow: visible;
}

.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.table th{
  text-align: left;
  font-size: 11px;
  color: #7b879a;
  font-weight: var(--w-ui);
  padding: var(--table-head-pad-y) var(--table-head-pad-x);
  border-bottom: 1px solid var(--border-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.90);
  position: sticky;
  top: 0;
  z-index: 1;
}

.table td{
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
  border-bottom: 1px solid rgba(245,246,251,0.95);
  color: #0f172a;
  font-weight: var(--w-text);
  font-size: var(--table-cell-font);
  vertical-align: middle;
}

.table tr{
  transition: background 140ms var(--ease-soft);
}

.table tbody tr:hover{
  background: rgba(247,249,252,0.7);
}

.table tr:last-child td{ border-bottom: 0; }

.table th.col-actions,
.table td.col-actions{
  text-align: right;
  white-space: nowrap;
}

.table th.col-check,
.table td.row-check{
  width: 26px;
  text-align: center;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.table td.row-check input{
  width: 14px;
  height: 14px;
  accent-color: var(--primary);
}

.table thead th[data-sort]{
  user-select: none;
  cursor: pointer;
}

.table .th-sort{
  display: inline-block;
  margin-left: 6px;
  opacity: 0.6;
  font-size: 10px;
  letter-spacing: 0;
}

.list-empty{
  text-align: center;
  color: var(--muted, #94a3b8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
}

.list-empty .empty__title{
  color: var(--muted, #94a3b8);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* =========================
   10) Badges / Pills (GLOBAL)
   ========================= */

.badge, .pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--w-ui);
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
}

.pill--neutral{
  background: #f1f5f9;
  color: #475467;
  border-color: #eef2f7;
}

.badge-info{
  background: rgba(23, 92, 211, 0.10);
  color: var(--info);
  border-color: rgba(23, 92, 211, 0.14);
}

.badge-warning{
  background: rgba(181, 71, 8, 0.10);
  color: var(--warning);
  border-color: rgba(181, 71, 8, 0.14);
}

.badge-success{
  background: rgba(6, 118, 71, 0.10);
  color: var(--success);
  border-color: rgba(6, 118, 71, 0.14);
}

.badge-neutral{
  background: #f2f4f7;
  color: #344054;
  border-color: #eaecf0;
}

/* =========================
   11) Chips / Inline Controls
   ========================= */

.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--chip-border);
  background: rgba(242,244,247,0.85);
  color: #344054;
  font-weight: var(--w-ui);
  font-size: 13px;
}

/* =========================
   12) Toast (GLOBAL)
   ========================= */

.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: rgba(17, 24, 39, 0.96);
  color: #fff;
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.22);
  font-size: 12px;
  font-weight: var(--w-ui);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  max-width: min(380px, calc(100vw - 36px));
  z-index: 90;
}

.toast.show{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   12b) App Alert (GLOBAL)
   ========================= */

.ui-alert{
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.ui-alert.hidden{
  display: none;
}

.ui-alert__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px);
}

.ui-alert__panel{
  position: relative;
  width: min(640px, calc(100vw - 32px));
  margin: 80px auto 0;
  background: var(--bg);
  border: 1px solid rgba(230,234,242,0.95);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.ui-alert__body{
  padding: 26px 28px;
  font-size: 16px;
  color: #0f172a;
  line-height: 1.4;
}

.ui-alert__footer{
  border-top: 1px solid var(--border-2);
  padding: 12px 18px;
  display: flex;
  justify-content: flex-end;
}

.ui-alert__ok{
  border: 0;
  background: #0b8f63;
  color: #ffffff;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(11, 143, 99, 0.2);
}

.ui-alert__ok:hover{
  box-shadow: 0 14px 32px rgba(11, 143, 99, 0.24);
}

/* =========================
   13) Layout Helpers / Utilities
   ========================= */

.container-center{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.row{
  display: flex;
  align-items: center;
  gap: 12px;
}

.row-between{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stack-4{ display: grid; gap: 4px; }
.stack-8{ display: grid; gap: 8px; }
.stack-12{ display: grid; gap: 12px; }
.stack-16{ display: grid; gap: 16px; }
.stack-20{ display: grid; gap: 20px; }

.mt-4{ margin-top: 4px; }
.mt-8{ margin-top: 8px; }
.mt-12{ margin-top: 12px; }
.mt-16{ margin-top: 16px; }

.mb-4{ margin-bottom: 4px; }
.mb-8{ margin-bottom: 8px; }
.mb-12{ margin-bottom: 12px; }
.mb-16{ margin-bottom: 16px; }

.text-right{ text-align: right; }
.text-center{ text-align: center; }

.hidden{ display: none !important; }

/* =========================
   15) Command Palette (Cmd/Ctrl+K)
   ========================= */

.cmdk{
  position: fixed;
  inset: 0;
  z-index: 80;
}
.cmdk.hidden{ display: none; }

.cmdk__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(6px);
}

.cmdk__panel{
  position: relative;
  width: min(760px, calc(100vw - 32px));
  margin: 88px auto 0;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(230,234,242,0.95);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.cmdk__head{
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--border-2);
  background: rgba(255,255,255,0.90);
}

.cmdk__icon{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  background: rgba(242,244,247,0.90);
  border: 1px solid rgba(234,236,240,0.95);
  display: grid;
  place-items: center;
  font-weight: var(--w-heading);
  color: #344054;
}

.cmdk__input{
  width: 100%;
  height: 40px;
  border: 1px solid var(--border);
  background: rgba(251,252,255,0.92);
  border-radius: 14px;
  padding: 0 12px;
  outline: none;
  color: var(--text);
  font-weight: var(--w-ui);
  transition: box-shadow 160ms var(--ease-soft), border-color 160ms var(--ease-soft), background 160ms var(--ease-soft);
}

.cmdk__input:focus{
  border-color: rgba(11, 143, 99, 0.45);
  box-shadow: var(--focus);
  background: #ffffff;
}

.cmdk__hint{
  font-size: 12px;
  color: var(--muted-2);
  font-weight: var(--w-ui);
  padding: 0 8px;
}

.cmdk__list{
  max-height: min(460px, calc(100vh - 240px));
  overflow: auto;
  padding: 10px;
}

.cmdk__item{
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  color: #344054;
  border: 1px solid transparent;
  transition: background 140ms var(--ease-soft), border-color 140ms var(--ease-soft), transform 140ms var(--ease-soft);
}

.cmdk__item:hover{
  background: rgba(247,249,252,0.9);
  transform: translateY(-1px);
}

.cmdk__item.is-active{
  background: var(--sb-active-bg);
  border-color: var(--sb-active-border);
}

.cmdk__itemIcon{
  width: 28px;
  height: 28px;
  border-radius: 12px;
  background: rgba(242,244,247,0.90);
  border: 1px solid rgba(234,236,240,0.95);
  display: grid;
  place-items: center;
  color: #475467;
}

.cmdk__itemTitle{
  font-weight: var(--w-ui);
  font-size: 13px;
}

.cmdk__itemMeta{
  font-size: 12px;
  color: var(--muted-2);
  font-weight: var(--w-text);
}

.cmdk__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-2);
  background: rgba(255,255,255,0.90);
  color: var(--muted-2);
  font-size: 12px;
}

/* =========================
   16) Bulk Bar
   ========================= */

.bulkbar{
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  /* thinner */
  padding: 6px 12px;

  border-radius: 16px;
  border: 1px solid rgba(230,234,242,0.95);
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow-xs);
  margin: 0 0 12px;
}

.bulkbar.show{
  display: flex;
}

.bulkbar__left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #344054;
  font-size: 13px;
  font-weight: var(--w-ui);
}

.bulkbar__right{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}


/* =========================
   Buttons inside bulkbar
   ========================= */

.bulkbar__right .btn,
.bulkbar__right .btn-sm{
  white-space: nowrap;
}

/* Export width */
.bulkbar__right button[id$="BulkExport"]{
  min-width: 120px;
}

/* Delete width */
.bulkbar__right button[id$="BulkDelete"]{
  min-width: 92px;
}


/* =========================
   Dropdown (Change Status)
   ========================= */

.bulkbar select{

  /* Kill ALL native styling */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  height: 36px;
  padding: 0 42px 0 14px;

  border-radius: 12px;
  border: 1px solid var(--border);

  background-color: rgba(251,252,255,0.92);

  font-size: 13px;
  font-weight: var(--w-ui);
  color: #344054;

  cursor: pointer;
  white-space: nowrap;

  /* Custom arrow */
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23667085' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 7.5L10 12l4.5-4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;

  /* Prevent arrow jump / repaint */
  transition: none;
  background-origin: padding-box;
  background-clip: padding-box;
}


/* 🔥 CRITICAL FIX:
   Some global inputs use `background:` on focus,
   which deletes background-image.
   We force the arrow back.
*/

.bulkbar select:focus,
.bulkbar select:active{

  outline: none;
  border-color: rgba(11,143,99,0.45);
  box-shadow: var(--focus);
  background-color: #ffffff;

  background-image: url("data:image/svg+xml;utf8,<svg fill='%23667085' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 7.5L10 12l4.5-4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;

  /* Safari repaint guard */
  -webkit-text-size-adjust: 100%;
}


/* Remove old IE / Edge arrow */
.bulkbar select::-ms-expand{
  display:none;
}

/* =========================
   18) Responsive
   ========================= */

@media (max-width: 1100px){
  .page{ padding: 20px 20px 28px; }
}

@media (max-width: 980px){
  html, body{
    overflow: hidden;
    height: 100dvh;
  }

  .app-layout{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 100dvh;
    overflow: hidden;
    position: relative;
  }

  .mobile-topbar{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    z-index: 25;
  }

  .mobile-topbar__menu{
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(230,234,242,0.95);
    background: #fff;
    color: #475467;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .mobile-topbar__brand{
    min-width: 0;
    font-weight: var(--w-heading);
    letter-spacing: -0.01em;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-nav-backdrop{
    display: block;
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.36);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms var(--ease-soft);
    z-index: 29;
  }

  .sidebar{
    position: fixed;
    left: 0;
    top: 0;
    width: min(320px, 86vw);
    height: 100vh;
    transform: translateX(-104%);
    transition: transform 220ms var(--ease-soft);
    z-index: 30;
    border-right: 1px solid var(--sb-divider);
    box-shadow: var(--shadow-md);
  }

  .sidebar__mobileClose{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(230,234,242,0.95);
    background: #fff;
    color: #667085;
    cursor: pointer;
    margin: 2px 2px 0 auto;
  }

  .app-layout.is-mobile-nav-open .sidebar{
    transform: translateX(0);
  }

  .app-layout.is-mobile-nav-open .mobile-nav-backdrop{
    opacity: 1;
    pointer-events: auto;
  }

  .page{
    height: calc(100dvh - 56px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
  }

  #page{
    max-width: 100%;
  }

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

  .table{
    min-width: 720px;
  }

  .modal__card{
    width: calc(100vw - 10px);
    margin: 6px auto 0;
    max-height: calc(100dvh - 12px);
    border-radius: 16px;
  }

  .modal__body{
    max-height: calc(100dvh - 170px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal__actions{
    flex-wrap: wrap;
  }

  .modal__actions .btn{
    width: 100%;
  }

  .bulkbar{
    flex-wrap: wrap;
    align-items: stretch;
  }

  .bulkbar__left,
  .bulkbar__right{
    width: 100%;
  }

  .bulkbar select,
  .bulkbar input,
  .bulkbar .btn{
    width: 100%;
  }
}

@media (max-width: 520px){
  .modal-grid{ grid-template-columns: 1fr; }
  .h1{ font-size: 20px; }
  .h2{ font-size: 15px; }
  :is(.leads-h1, .clients-h1, .quotes-h1, .invoices-h1, .productsservices-h1, .expenses-h1, .zusatzeinkommen-h1, .pm-h1){
    font-size: 22px;
  }
  :is(.leads-header, .clients-header, .quotes-header, .invoices-header, .productsservices-header, .expenses-header, .zusatzeinkommen-header, .pm-header){
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  :is(.leads-header__right, .clients-header__right, .quotes-header__right, .invoices-header__right, .productsservices-header__right, .expenses-header__right, .zusatzeinkommen-header__right, .pm-header__right){
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  :is(.leads-search, .clients-search, .quotes-search, .invoices-search, .productsservices-search, .expenses-search, .zusatzeinkommen-search, .pm-search){
    width: 100%;
  }
}

@media (max-width: 760px){
  .table-wrap{
    overflow: visible !important;
  }

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

  .table thead{
    display: none;
  }

  .table tbody{
    display: grid;
    gap: 8px;
  }

  .table tbody tr{
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    border: 1px solid #e6eaf2;
    border-radius: 12px;
    background: #fff;
    padding: 10px 12px;
  }

  .table tbody td{
    display: grid;
    grid-template-columns: minmax(84px, 38%) 1fr;
    gap: 8px;
    align-items: start;
    padding: 0;
    border: 0;
    font-size: 12px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left !important;
  }

  .table tbody td::before{
    content: attr(data-label);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7b879a;
    font-weight: var(--w-ui);
  }

  .table tbody td.row-check,
  .table tbody td.col-actions{
    grid-template-columns: 1fr;
  }

  .table tbody td.row-check::before,
  .table tbody td.col-actions::before{
    content: "";
  }
}

@media (min-width: 981px){
  .mobile-topbar,
  .mobile-nav-backdrop,
  .sidebar__mobileClose{
    display: none;
  }
}

/* Keep status header visually centered over chips in Leads table */
.leads-table thead th[data-sort="status"]{
  text-align: center;
}