:root{
  /* Brand */
  --red-500:#dc2626;
  --red-600:#b91c1c;
  --red-700:#991b1b;

  /* Dark surfaces */
  --bg:#0b0d12;
  --surface:#0f141c;
  --surface-2:#141b26;
  --surface-3:#182233;

  /* Text */
  --text:#f8fafc;
  --muted:#cbd5e1;
  --muted-2:#94a3b8;

  /* Lines */
  --border:rgba(255,255,255,.10);
  --border-2:rgba(255,255,255,.16);

  /* Radii + shadows */
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --shadow-sm:0 1px 0 rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.35);
  --shadow-md:0 1px 0 rgba(255,255,255,.06), 0 14px 40px rgba(0,0,0,.45);

  /* Focus */
  --focus:0 0 0 3px rgba(220,38,38,.35);

  /* Success (profit) */
  --green-500:#22c55e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 20% -10%, rgba(220,38,38,.18), transparent 55%),
    radial-gradient(900px 600px at 90% 0%, rgba(220,38,38,.10), transparent 50%),
    linear-gradient(180deg, var(--bg), #07080c);
  overflow-x: hidden;
}
a{color:inherit}

/* Layout helpers */
.page{
  display:flex;
  min-height:100vh;
}
.main{
  width:100%;
}

/* Sidebar — opaque theme gradient (readable over main content on mobile drawer) */
.sidebar{
  width:240px;
  background-color:var(--surface);
  background-image:
    radial-gradient(120% 85% at 0% 0%, rgba(220,38,38,.22), transparent 52%),
    radial-gradient(90% 60% at 100% 20%, rgba(220,38,38,.08), transparent 45%),
    linear-gradient(180deg, #171e2c 0%, var(--surface) 38%, var(--surface-2) 72%, var(--bg) 100%);
  border-right:1px solid var(--border);
  color:var(--text);
  min-height:100vh;
  position:fixed;
  top:0;
  left:0;
  padding:22px;
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 18px 45px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
}
.sidebar-brand{
  display:block;
  margin:0 0 18px 0;
  line-height:0;
  text-decoration:none;
  border-radius:10px;
  outline-offset:4px;
}
.sidebar-brand:focus-visible{
  box-shadow:var(--focus);
}
/* Setting up and switching companies. Deliberately a link rather than another
   nav button: it sits with the logo because it answers "who am I invoicing
   as", not "where in the app am I". */
.sidebar a.sidebar-switch-link{
  display:inline-block;
  padding:0;
  margin:-10px 0 16px 2px;
  border:none;
  border-radius:4px;
  background:none;
  font-size:13px;
  font-weight:600;
  color:#60a5fa;
  text-decoration:none;
}
.sidebar a.sidebar-switch-link:hover{
  background:none;
  border:none;
  color:#93c5fd;
  text-decoration:underline;
}
.sidebar a.sidebar-switch-link.is-here{
  background:none;
  border:none;
  color:#93c5fd;
  text-decoration:underline;
}
.sidebar a.sidebar-switch-link:focus-visible{
  box-shadow:var(--focus);
  outline:none;
}

/* Which company you are invoicing as. Directly under the logo because the two
   answer the same question, and the logo alone can be ambiguous. */
.company-switch{
  margin:-8px 0 18px 0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.company-switch-label{
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.65;
}
.company-switch-select{
  height:34px;
  padding:4px 8px;
  font-size:13px;
  font-weight:600;
}
.sidebar-brand img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:200px;
  object-fit:contain;
  object-position:left center;
}
.sidebar a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  margin:6px 0;
  text-decoration:none;
  color:var(--muted);
  border-radius:12px;
  border:1px solid transparent;
  transition:transform 120ms ease, background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sidebar a:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
  border-color:var(--border);
}
.sidebar a.active{
  color:var(--text);
  background:linear-gradient(180deg, rgba(220,38,38,.18), rgba(220,38,38,.08));
  border-color:rgba(220,38,38,.35);
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.sidebar-links{
  display:flex;
  flex-direction:column;
}
.sidebar a.btn{
  height:38px;
  padding:8px 14px;
  border-radius:12px;
  font-weight:700;
  letter-spacing:.2px;
}
.sidebar a.btn:not(.btn-primary){
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
}
.sidebar a.btn:not(.btn-primary):hover{
  background:rgba(255,255,255,.07);
  border-color:var(--border-2);
  transform:translateY(-1px);
}
.sidebar a.btn-primary{
  border-color:rgba(220,38,38,.55);
  background:linear-gradient(180deg, var(--red-500), var(--red-700));
  color:var(--text);
}
.sidebar a.btn-primary:hover{
  background:linear-gradient(180deg, #ef4444, var(--red-700));
  border-color:rgba(239,68,68,.65);
  transform:translateY(-1px);
}
.sidebar a.sidebar-create-btn{
  margin-top:auto;
  width:100%;
  justify-content:center;
  margin-bottom:0;
  /* A two-word label wraps, and the fixed 38px above would let the second line
     spill outside the button. Grow instead, keeping the single-line ones at 38. */
  height:auto;
  min-height:38px;
  line-height:1.25;
  text-align:center;
}

/* Content spacing (paired with fixed sidebar) */
.content-wrap{
  margin-left:260px;
  /* Top padding clears the fixed header (48px) as well as the page's own
     breathing room, or the first heading sits behind it. */
  padding:80px 32px 32px;
  max-width: calc(100vw - 260px);
}

/* Persistent top bar (markup in partials/app_header.html)

   Starts where the content does rather than spanning the window, so the
   sidebar's own gradient is not cut across by a second bar. Sits under the
   mobile drawer and its toggle in z-order: the drawer covers the page, and
   this is part of the page. */
.app-header{
  position:fixed;
  top:0;
  left:260px;
  right:0;
  z-index:1200;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  padding:0 32px;
  background:rgba(13,17,26,.86);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.app-header-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 12px;
  border-radius:9px;
  border:1px solid var(--border-2);
  background:linear-gradient(180deg, var(--surface-2), var(--surface-3));
  color:var(--text);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.app-header-btn:hover{
  border-color:var(--border);
  color:var(--text);
}
.app-header-btn.is-here{
  border-color:rgba(220,38,38,.55);
}
.app-header-gear{flex:none}
.app-header-user{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  line-height:1.25;
  max-width:34vw;
  overflow:hidden;
}
.app-header-name{
  font-size:13px;
  font-weight:600;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
/* The job, under the name. Smaller and quieter: it is context, not the point. */
.app-header-title{
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--muted-2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}

/* Mobile drawer nav (toggle + backdrop; markup in partials/mobile_nav.html) */
.mobile-nav-toggle,
.mobile-nav-backdrop{
  display:none;
}
.mobile-nav-toggle{
  align-items:center;
  justify-content:center;
  position:fixed;
  top:max(10px, env(safe-area-inset-top, 0px));
  left:max(10px, env(safe-area-inset-left, 0px));
  z-index:2500;
  width:46px;
  height:46px;
  padding:0;
  border-radius:12px;
  border:1px solid var(--border-2);
  background:linear-gradient(180deg, var(--surface-2), var(--surface-3));
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
}
.mobile-nav-toggle:focus{
  outline:none;
  box-shadow:var(--focus);
}
.mobile-nav-icon{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:20px;
  height:14px;
}
.mobile-nav-icon span{
  display:block;
  height:2px;
  border-radius:1px;
  background:var(--text);
}
.mobile-nav-backdrop{
  position:fixed;
  inset:0;
  z-index:2300;
  margin:0;
  padding:0;
  border:none;
  background:rgba(0,0,0,.52);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
html.sidebar-drawer-open{
  overflow:hidden;
}

/* Typography */
h1{
  margin:0 0 18px 0;
  font-size:28px;
  letter-spacing:-.2px;
}
h2{
  margin:26px 0 12px;
  font-size:18px;
  color:var(--muted);
}
h3{
  margin:0 0 10px 0;
  font-size:14px;
  letter-spacing:.2px;
  text-transform:uppercase;
  color:var(--muted);
}

/* Panels / Cards */
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border-2);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(10px);
  position: relative;
}

.panel.panel-raised{
  z-index: 2000;
}

/* Flash / validation notices (use class="panel success" or "panel error") */
.panel.success,
.message.panel.success{
  background:linear-gradient(180deg, rgba(34,197,94,.32), rgba(34,197,94,.16));
  border:1px solid rgba(34,197,94,.55);
  color:var(--text);
}
.panel.error,
.message.panel.error{
  background:linear-gradient(180deg, rgba(220,38,38,.32), rgba(220,38,38,.16));
  border:1px solid rgba(220,38,38,.55);
  color:var(--text);
}
.status-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  font-size:12px;
}
.cards{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin:10px 0 18px;
}
.card{
  flex:1;
  min-width:210px;
}
.metric{
  font-size:22px;
  font-weight:800;
  letter-spacing:.2px;
}
.muted{
  color:var(--muted-2);
}

/* Form controls */
form{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px 0;
}
.input, select.input{
  height:38px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(15,20,28,.70);
  color:var(--text);
  outline:none;
}
/* textareas share .input's colors/border but need their own sizing — the
   fixed 38px height above is for single-line inputs and made every <textarea>
   render at the browser's tiny intrinsic default size (~20 characters wide,
   one line tall), overlapping its label. */
textarea.input{
  height:auto;
  min-height:90px;
  width:100%;
  resize:vertical;
  font-family:inherit;
  font-size:14px;
  line-height:1.5;
}
.filters .input, .filters select.input{
  background:linear-gradient(180deg, rgba(220,38,38,.62), rgba(153,27,27,.62));
  border-color:rgba(220,38,38,.55);
}
.filters input[type="date"].input{
  color-scheme: dark;
}
.filters input[type="date"].input::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: 0.9;
}
.filters input[type="date"].input::-webkit-datetime-edit-text,
.filters input[type="date"].input::-webkit-datetime-edit-month-field,
.filters input[type="date"].input::-webkit-datetime-edit-day-field,
.filters input[type="date"].input::-webkit-datetime-edit-year-field{
  color: rgba(255,255,255,.92);
}
.input[type="date"]{
  color-scheme: dark;
}
.input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: 0.9;
}
.input[type="date"]::-webkit-datetime-edit-text,
.input[type="date"]::-webkit-datetime-edit-month-field,
.input[type="date"]::-webkit-datetime-edit-day-field,
.input[type="date"]::-webkit-datetime-edit-year-field{
  color: rgba(248,250,252,.92);
}
.filters .input:focus, .filters select.input:focus{
  border-color:rgba(255,255,255,.38);
  box-shadow:0 0 0 3px rgba(255,255,255,.14), 0 0 0 6px rgba(220,38,38,.22);
}
.input:focus, select.input:focus{
  box-shadow:var(--focus);
  border-color:rgba(220,38,38,.45);
}
.input::placeholder{color:rgba(203,213,225,.55)}

/* Dropdown (custom select) */
.dropdown{
  position:relative;
  min-width:220px;
}
.dropdownNative{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.dropdownTrigger{
  height:38px;
  width:100%;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(15,20,28,.85), rgba(15,20,28,.65));
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.filters .dropdownTrigger{
  background:linear-gradient(180deg, rgba(220,38,38,.62), rgba(153,27,27,.62));
  border-color:rgba(220,38,38,.55);
}
.dropdownTrigger:focus{
  outline:none;
  box-shadow:var(--focus);
}
.dropdownTriggerText{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dropdownChevron{
  opacity:.9;
}
.dropdownMenu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  max-height:240px;
  overflow:auto;
  padding:6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(10,12,18,.98), rgba(10,12,18,.92));
  box-shadow:var(--shadow-md);
  z-index:1000;
}
.dropdownItem{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:rgba(248,250,252,.92);
  cursor:pointer;
}
.dropdownItem:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}
.dropdownItem[aria-selected="true"]{
  background:linear-gradient(180deg, rgba(220,38,38,.22), rgba(220,38,38,.10));
  border-color:rgba(220,38,38,.35);
}

/* Invoice page: keep row action dropdowns compact + vertically stacked. */
.invoiceRowActionsMenu{
  min-width:0;
  width:180px; /* prevent table cell overflow */
}
.invoiceRowActionsMenu .dropdownTrigger{
  width:100%;
  min-width:0;
}
.invoiceRowActionsMenu .dropdownMenu{
  left:0;
  right:0;
  width:100%;
}
.invoiceRowActionsMenu .dropdownMenu[hidden]{
  display:none !important;
}
.invoiceRowActionsMenu .dropdownMenu:not([hidden]){
  display:flex;
  flex-direction:column;
  gap:6px;
}
.invoiceRowActionsMenu .dropdownItem{
  display:block;
  width:100%;
}

/* Buttons */
.btn{
  height:38px;
  padding:8px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
  letter-spacing:.2px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform 120ms ease, background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.btn:hover{background:rgba(255,255,255,.07); border-color:var(--border-2); transform:translateY(-1px)}
.btn:active{transform:translateY(0); opacity:.92}
.btn:focus{outline:none; box-shadow:var(--focus)}
.btn-primary{
  background:linear-gradient(180deg, var(--red-500), var(--red-700));
  border-color:rgba(220,38,38,.55);
}
.btn-primary:hover{
  background:linear-gradient(180deg, #ef4444, var(--red-700));
  border-color:rgba(239,68,68,.65);
}
.btn-ghost{
  background:transparent;
}

/* Modals */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:3000;
}
.modal[hidden]{ display:none; }
.modal-card{ width:100%; max-width:520px; }

/* Tables */
table.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:rgba(15,20,28,.55);
  table-layout: fixed;
}
table.table th{
  text-align:left;
  font-size:12px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--muted);
  padding:10px 14px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid var(--border);
}
table.table td{
  padding:9px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--text);
  overflow-wrap:anywhere;
}
table.table tr:hover td{
  background:rgba(255,255,255,.03);
}
table.table tr:last-child td{border-bottom:none}
.cell-center{text-align:center}

/* Scroll container for data tables (mirrors the .lines-wrap pattern already
   used on the invoice/quote entry forms) — lets a table keep readable column
   widths and scroll horizontally on narrow screens instead of being squeezed
   into unreadable, character-wrapped columns. */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Profit/Loss coloring (still within brand palette) */
.profit{
  color:var(--green-500);
  font-weight:800;
}
.loss{
  color:var(--red-500);
  font-weight:800;
}

/* Ensure table cells always show the profit/loss colors */
table.table td.profit{ color:var(--green-500) !important; }
table.table td.loss{ color:var(--red-500) !important; }

/* The compact button used in table rows and beside headings. It has been in
   four templates for a long time without ever being defined, so every one of
   them was rendering the browser's default button - dark text on pale grey,
   which on this theme reads as an empty box. */
.mark-btn{
  height:30px;
  padding:4px 11px;
  border-radius:9px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.2px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.mark-btn:hover:not([disabled]){
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.18);
}
.mark-btn:focus-visible{
  box-shadow:var(--focus);
  outline:none;
}
.mark-btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
}

/* Small utilities */
.row{
  display:flex;
  gap:18px;
}
.col-left{flex:3; min-width:0}
.col-right{flex:1; min-width:0}
.stack{display:flex; flex-direction:column; gap:18px}

/* Mobile responsiveness */
@media (max-width: 900px){
  .mobile-nav-toggle,
  .mobile-nav-backdrop{display:block}
  .mobile-nav-toggle{display:flex}
  .mobile-nav-backdrop[hidden]{display:none !important}

  .content-wrap{
    margin-left:0;
    max-width:100%;
    padding:max(72px, calc(env(safe-area-inset-top, 0px) + 68px)) 16px 24px 16px;
    min-width:0;
  }

  /* Full width now, and left-padded past the drawer toggle that shares this
     corner. */
  .app-header{
    left:0;
    padding:0 16px 0 62px;
  }

  .sidebar{
    position:fixed;
    top:0;
    left:0;
    width:min(288px, 88vw);
    height:100vh;
    height:100dvh;
    min-height:0;
    padding:18px 16px 24px;
    transform:translate3d(-100%, 0, 0);
    transition:transform 0.22s ease;
    z-index:2400;
    border-right:1px solid var(--border);
    border-bottom:none;
    box-shadow:0 0 0 1px rgba(255,255,255,.04), 12px 0 40px rgba(0,0,0,.55);
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  html.sidebar-drawer-open .sidebar{
    transform:translate3d(0, 0, 0);
  }

  .sidebar a{
    display:flex;
    margin:6px 0;
  }
  .sidebar-brand{
    margin-bottom:14px;
  }
  .sidebar-brand img{
    max-height:120px;
  }

  .row{flex-direction:column}
  .cards{gap:12px}
  .card{min-width:0; flex:1 1 100%}
  .dropdown{min-width:0; width:100%}

  h1{font-size:22px; line-height:1.2; word-wrap:break-word}

  form.filters{
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }
  form.filters .dropdown,
  form.filters > .btn,
  form.filters > .input,
  form.filters > input.input{
    width:100%;
    max-width:100%;
  }

  .panel{padding:14px; min-width:0}

  table.table{
    font-size:13px;
    table-layout:auto;
  }
  table.table th,
  table.table td{
    padding:8px 10px;
    white-space:nowrap;
  }

  .stack{gap:14px}

  .guest-wrap{
    max-width:100%;
    padding:24px 16px !important;
    margin:0 auto;
  }

  .chart-container{
    min-width:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  form.stack{
    flex-direction:column;
    align-items:stretch;
    flex-wrap:nowrap;
  }
  form.stack > .btn,
  form.stack > .input,
  form.stack > input,
  form.stack > textarea,
  form.stack > select,
  form.stack > label{
    width:100%;
    max-width:100%;
  }

  .page-head{
    flex-direction:column;
    align-items:stretch;
  }
  .page-head .btn,
  .page-head a.btn{
    width:100%;
    justify-content:center;
  }

}