/* path: styles.css */

/* =================== TOKENS =================== */
:root {
  /* ===== Color tokens ===== */
  --clr-bg: #f7f9fc;
  --clr-base: #ffffff;
  --clr-line:  #dbe3ef;
  --clr-text: #00264d;
  --clr-text-muted: #5f6f86;
  --clr-accent: #2c80ee;
  --clr-accent-2: #6fb1ff;
  --clr-accent-soft: #f7faff;        /* very light background */
  --clr-accent-soft-border: #d6e3f3;
  --clr-accent-border: #bfd7ff;      /* soft border */
  --clr-blue-grey: #dbe3eb;
  --clr-danger: #e5484d;
  --clr-danger-active: #c24141;
  --clr-white-red: #fff3f3;
  --clr-red-border: #f2aaaa;
  --clr-dark-grey: #3d4b5c;
  --clr-muted-grey: #6f7f93;
  --clr-light-grey: #eef2f6;
  --clr-grey-btn-hover: #e3ebf3;
  --clr-darker-blue: #155fc4;
  --clr-soft-green: #34c759;
  --clr-success: #1f9d55;
  --clr-success-active: #166f3d;
  --clr-white-green: #eefcf6;
  --clr-green-border: #a8e0c2;
  --clr-white-red:#fff6f6;
  --clr-super-light: #f8fafc;
  --clr-dark: #0b1320;
  --clr-dark-blue: #1f5fbf;
  --accent-blue-links-clr:#007bff;
  --invoice-bg-clr:#e6f2ff;
  --avatar-bg: #f3f4f6;
  --avatar-fg:#111827;
  --avatar-brd: #e5e7eb;
  --clr-warning-border: #fde68a;
  --clr-warning-bg: #fffbeb;
  --clr-warning-text: #92400e;
  --clr-warning-sub-text: #a16207;
  --clr-warning-border-2: #fffdf6;
  --clr-orange-border: #fff7ed;
  --clr-orange-text: #ea580c;

  /* ===== Purple / Invoice Status ===== */
--clr-purple: #7C3AED;
--clr-purple-hover: #6D28D9;
--clr-purple-soft: #F5F3FF;
--clr-purple-border: #DDD6FE;
--clr-purple-subtle-text: #8B5CF6;
  /* Hover helpers */
  --clr-nav-hover-bg: #f5f8fc;
  --clr-nav-hover-border: var(--clr-line);
  --clr-nav-hover-fg: var(--clr-text);
  --clr-nav-active-bg: rgba(26,115,232,.12);
  --clr-nav-active-border: #d6e8ff;
  --clr-nav-active-fg: var(--clr-accent);
  --clr-menu-row-hover: #f7fbff;
  /* ===== Typography tokens ===== */
  --ff-sans: 'Inter', system-ui, Segoe UI, Roboto, Arial, sans-serif;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;

  /* Sizes */
  --fs-2xss: 0.65rem;   /* 12px small meta */
  --fs-2xs: .75rem;   /* 12px small meta */
  --fs-xs:  0.8125rem; /* 13px */
  --fs-sm:  0.875rem;  /* 14px labels/controls */
  --fs-md:  1rem;      /* 16px body/base */
  --fs-md-2: 1.05rem;
  --fs-lg:  1.2rem;  /* 18px h3 base */
  --fs-xl:  1.25rem;   /* 20px */
  --fs-2xl: 1.5rem;    /* 24px */

    /* Border radius */
  --br-standard: 10px;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  /* Headings */
  --fs-h1: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  --fs-h2: 1.125rem;
  --fs-h3: var(--fs-lg);

  /* Field font size */
  --fs-input: var(--fs-sm);

  /* ===== Layout/shadows ===== */
  --topbar-h: 70px;
  --side-w: 240px;
  --side-w-collapsed: 72px;

  --elev-shadow-soft: 0 0.0625em 0.1875em rgba(15, 23, 42, 0.04);
  --elev-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(23,43,77,.04);

  /* Controls */
  --ctl-h-sm: 36px;
  --ctl-h-md: 40px;
  --ctl-h-lg: 48px;
  --ctl-pad-x: 0.625rem;
  --ctl-pad-y: 0.375rem;
  --label-gap-y: 0.35rem;
  --field-gap-y: 0.75rem;

  /* Submenu geometry */
  --nav-gap: 6px;
  --sub-indent: 20px;
  --sub-pad-left: .65rem;
  --sub-top-gap: 8px;
}
/*=============================================*/
/*Utilities*/
/*=============================================*/
/* Column Width Utilities */
.col-5   { width: 5%; }       /* ~40px */
.col-10  { width: 10%; }
.col-12  { width: 12%; }      /* ~100px */
.col-13  { width: 13%; }      /* ~100px */
.col-14  { width: 14%; } 
.col-15  { width: 15%; }      /* ~120px */
.col-16  { width: 16%; }
.col-17  { width: 17%; }
.col-18  { width: 18%; }
.col-20  { width: 20%; }
.col-25  { width: 25%; }
.col-30  { width: 30%; }
.col-33  { width: 33.3333%; }
.col-33  { width: 35%; }
.col-40  { width: 40%; }
.col-50  { width: 50%; }
.col-60  { width: 60%; }
.col-70  { width: 70%; }
.col-80  { width: 80%; }
.col-100 { width: 100%; }
.col-auto { width: auto; }

/* Text Align Utilities */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* ========== BASE / RESET ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

:where(html,body,button,input,select,textarea) { font-family: var(--ff-sans); }
:where(button,input,select,textarea) { font: inherit; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-y: scroll;
}
/* Chrome / Edge / Safari */
::-webkit-scrollbar {
  width: 4px;
  transition: width 0.2s ease;
}

::-webkit-scrollbar:hover {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--clr-muted-grey) 70%, transparent);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--clr-muted-grey);
}

::-webkit-scrollbar-button {
  display: none;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--clr-muted-grey) transparent;
}
body { background: var(--clr-bg); color: var(--clr-text); font-size: var(--fs-sm); line-height: var(--lh-normal); }


/* ========== LAYOUT WRAPPER ========== */
.app{
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-columns: auto 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  min-height: 100dvh;
}

/* ========== MAIN ========== */
main{ grid-area: main; padding: 16px; }
.h1{
  font-weight: var(--fw-semibold);;
  letter-spacing: .2px; 
  color: var(--clr-text); 
  margin-bottom: 18px;
  font-size: var(--fs-xl);
}

/* ========== RESPONSIVE ========== */
@media (max-width:920px){
  .u-name, .u-mail{ max-width: 120px }
}
/*=============================================*/
/* Containers*/
/*=============================================*/
.form-container{
  padding: 20px; 
  border: 1px solid var(--clr-blue-grey);
  border-radius: var(--br-standard); 
  background-color: var(--clr-base);
  box-shadow: var(--elev-shadow-soft);
}
.tool-container{
  padding: 20px; 
  border: 1px solid var(--clr-blue-grey);
  border-radius: var(--br-standard); 
  background-color: var(--clr-base);
  box-shadow: var(--elev-shadow-soft);
  margin-bottom: 20px;
}
 .product-container {
    margin-top: 2em;
    padding: 1em;
     border: 1px solid var(--clr-blue-grey);
    border-radius: 8px;
    background-color: var(--clr-base);
    box-shadow: var(--elev-shadow-soft);
}

/*=============================================*/
/* Forms*/
/*=============================================*/
.form-group-row{
  display: flex; 
  justify-content: space-between; 
  gap: 1.25rem; 
  margin-bottom: 0.9375rem;
}
.form-group{ flex: 1; margin-top: 0.375rem; }

/* labels */
label{
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  color: var(--clr-dark-grey);
  margin: var(--label-gap-y) 0; 
  display: block;
}
/* Remove number input spinners (Chrome, Safari, Edge, Opera) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove number input spinners (Firefox) */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield; /* modern generic reset */
}

/* inputs */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) {
  width: 100%; 
  padding: var(--ctl-pad-y) var(--ctl-pad-x);
  min-height: var(--ctl-h-sm);
  border: 1px solid var(--clr-blue-grey);
  border-radius: var(--br-standard); 
  background: var(--clr-super-light);
  color: var(--clr-dark); 
  font: inherit; 
  font-size: var(--fs-input);
  line-height: var(--lh-normal); 
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* Make native placeholder text use your muted tone globally */
input::placeholder,
textarea::placeholder {
  color: var(--clr-text-muted);
  opacity: 1; /* ensure consistent tone across browsers */
}
.qty-input{
  height: 2.1rem;
  padding: 0.35rem 0.65rem;
  border-radius: var(--br-standard);
  border: 1px solid var(--clr-blue-grey);
  background: var(--clr-super-light);
  color: var(--clr-text);
  font-size: var(--fs-sm);
  text-align: right;
  outline: none;
  box-sizing: border-box;
}

.qty-input:focus{
  border-color: var(--clr-accent, #2f6bff);
}

/* FULL WIDTH inside the cell */
.qty-full{
  width: 100%;
  margin-left: 0;     /* important: don’t push right */
  display: block;
}

/* Optional: remove spinners */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Utility: match the dropdown behavior for text fields */
.placeholder-match:placeholder-shown {
  color: var(--clr-text-muted);
  -webkit-text-fill-color: var(--clr-text-muted); /* WebKit quirk */
}

/* Once the user types, switch back to normal text color */
.placeholder-match:not(:placeholder-shown) {
  color: var(--clr-dark);
  -webkit-text-fill-color: var(--clr-dark);
}

/* Keep it muted while empty even on hover/focus */
.placeholder-match:focus:placeholder-shown,
.placeholder-match:hover:placeholder-shown {
  color: var(--clr-text-muted);
  -webkit-text-fill-color: var(--clr-text-muted);
}

select, textarea{
  width: 100%; 
  padding: var(--ctl-pad-y) var(--ctl-pad-x);
  min-height: var(--ctl-h-sm); 
  border: 1px solid var(--clr-blue-grey);
  border-radius: var(--br-standard); 
  background: var(--clr-super-light);
  color: var(--clr-dark); 
  font: inherit; 
  font-size: var(--fs-input);
  line-height: var(--lh-normal); 
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Closed select shows muted color when the placeholder (value="") is selected */
select:required:invalid {
  color: var(--clr-text-muted);
  -webkit-text-fill-color: var(--clr-text-muted); /* WebKit quirk */
}

/* Bonus: same effect where :has is supported */
@supports selector(:has(*)) {
  select:has(> option:checked[value=""]) {
    color: var(--clr-text-muted);
  }
}

/* In the open list: real options dark */
select option { color: var(--clr-dark); }

/* Placeholder row (value="") stays muted in all interaction states */
select option[value=""] { color: var(--clr-text-muted) !important; }
select:focus option[value=""],
select:hover option[value=""],
select:active option[value=""],
select:focus-within option[value=""] {
  color: var(--clr-text-muted) !important;
}

/* Prevent wrapper hover from leaking a different color into the select text */
.dropdown-option:hover select { color: inherit; }

textarea{ 
  min-height: calc(var(--ctl-h-sm) + 24px); 
  resize: vertical; 
}
:where(input,select,textarea):focus-visible{ 
  outline: 0; 
  border-color: var(--clr-accent);  
  box-shadow: 0 0 0 1px rgba(44, 128, 238, 0.2); 
  background: var(--clr-base); 
}

textarea#note{ 
  width: 100%; 
  resize: vertical; 
  box-sizing: border-box; 
}
/* Global utility: space blocks evenly */
.input-spacing{
  display:block;
  margin: 0 0 var(--field-gap-y);
}

/* Don’t add extra gap on the very last one in a stack */
.input-spacing:last-child{
  margin-bottom: 0;
}

/* Prevent stacked margins when a .form-group sits inside */
.input-spacing > .form-group{
  margin-bottom: 0;
}

select,textarea,input{ 
  margin-bottom: 0; 
  vertical-align: middle; 
}
/* Neutralize browser autofill colors (simple) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--clr-dark);
  box-shadow: 0 0 0 1000px var(--clr-super-light) inset;
  -webkit-box-shadow: 0 0 0 1000px var(--clr-super-light) inset;
}

/* (Optional) Firefox */
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
  box-shadow: 0 0 0 1000px var(--clr-super-light) inset;
  color: var(--clr-dark);
}
.optional {
  display: inline-block;
  color: var(--accent-blue-links-clr); /* white text for contrast */
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xs);
  margin-left: 6px;
}
.optional-grey {
  display: inline-block;
  color: var(--clr-text-muted); /* white text for contrast */
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xs);
  margin-left: 6px;
}
/*=============================================*/
/* Buttons (Premium Outline / No Solid Fills) */
/*=============================================*/
/*=============================================*/
/* Buttons */
/*=============================================*/
.btn-container{
    display:flex;
    gap:.5rem;
    justify-content:flex-end;
    margin-top:1rem;
}

/* Base button — outline-first */
.btn{
  padding: 0.46em 1.125em; /* ↓ slightly less top/bottom */
  border-radius: var(--br-standard);
  font-size: var(--fs-sm);
  cursor: pointer;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  text-align: center;
  background: var(--clr-base);
  border: 1px solid var(--clr-line);
  color: var(--clr-text);
  box-shadow: 0 1px 2px rgba(15,23,42,.06);

}

.btn:hover{
  background: var(--clr-nav-hover-bg);
  border-color: var(--clr-blue-grey);
}

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

.btn:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(44,128,238,.16), 0 1px 2px rgba(15,23,42,.06);
}

/* Secondary — neutral outline (kept for compatibility) */
.btn-secondary{
  background: var(--clr-base);
  border-color: var(--clr-line);
  color: var(--clr-text);
}

.btn-secondary:hover{
  background: var(--clr-nav-hover-bg);
  border-color: var(--clr-blue-grey);
}

/* Primary — blue outline + subtle tint (NOT solid) */
.btn-primary{
  background: rgba(44,128,238,.06);
  border-color: rgba(44,128,238,.35);
  color: var(--clr-accent);
}

.btn-primary:hover{
  background: rgba(44,128,238,.10);
  border-color: rgba(44,128,238,.48);
  box-shadow: 0 6px 18px rgba(44,128,238,.10);
}

/* Danger — red outline + subtle tint (NOT solid) */
.btn-danger{
  background: var(--clr-white-red);
  color:var(--clr-danger);
  border:1px solid var(--clr-red-border)
}

.btn-danger:hover{
  background: rgba(255,111,97,.12);
  border-color: rgba(255,111,97,.48);
  box-shadow: 0 6px 18px rgba(255,111,97,.12);
}

/* Ghost — pure outline, no tint */
.btn-ghost{
  background: var(--clr-base);
  border-color: var(--clr-line);
  color: var(--clr-text);
}

.btn-ghost:hover{
  background: var(--clr-nav-hover-bg);
  border-color: var(--clr-blue-grey);
}
/* Base button — outline-first */
.btn-more{
  padding: 0.40em 0.7em; /* ↓ slightly less top/bottom */
  border-radius: var(--br-standard);
  font-size: var(--fs-sm);
  cursor: pointer;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  text-align: center;
  background: var(--clr-base);
  border: 1px solid var(--clr-line);
  color: var(--clr-text);
  box-shadow: 0 1px 2px rgba(15,23,42,.06);

}

/* =========================
   Quote decision buttons
   ========================= */

/* ✅ ACCEPT (green outline + soft green background + green text) */
.btn-accept{
  background: var(--clr-white-green); 
  color:var(--clr-success); 
  border:1px solid var(--clr-green-border) 
}

.btn-accept:hover{
  background: rgba(22,163,74,.12);
  border-color: rgba(22,163,74,.40);
  box-shadow: 0 6px 18px rgba(22,163,74,.10);
}

/* ✅ REJECT (red outline + soft red background + red text) */
.btn-reject{
  border-color: rgba(255,111,97,.30); /* based on --clr-danger */
  background: rgba(255,111,97,.10);
  color: var(--clr-danger-active);
}

.btn-reject:hover{
  background: rgba(255,111,97,.14);
  border-color: rgba(255,111,97,.44);
  box-shadow: 0 6px 18px rgba(255,111,97,.12);
}

/* Disabled state that still looks premium */
.btn:disabled,
.btn[disabled],
.btn-accept:disabled,
.btn-reject:disabled,
.btn-ghost:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* =========================
   Archive buttons
   ========================= */
.archive-export-btn{
  padding: 0.45em 0.85em;
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--clr-accent);
  background: var(--clr_base);
  border: 0.0625em solid var(--clr-line);
  border-radius: var(--br-standard);
}

.archive-export-btn:hover{
  background: var(--clr-nav-hover-bg);
}

.archive-export-btn svg{
  flex-shrink: 0;
}
/* =========================
   Actions dropdown
   ========================= */
.action-menu{
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.action-menu-inline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

.btn-more{
  position: relative;
  z-index: 2;
}

.btn-more svg{
  pointer-events: none;
}

.floating-action-dropdown{
  position: fixed;
  z-index: 99999;
  min-width: 8.75rem;
  padding: 0.35rem;
  border: 1px solid var(--clr-line);
  border-radius: var(--br-standard);
  background: var(--clr-base);
  box-shadow: var(--elev-shadow);
}
[hidden]{
  display: none !important;
}
.action-item{
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.4rem 0.70rem;
  border-radius: var(--br-standard);
  color: var(--clr-text);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: background 0.16s ease, color 0.16s ease;
}

.action-item:hover{
  background: var(--clr-super-light);
}

.action-item.danger{
  color: var(--clr-danger);
}

.action-item.danger:hover{
  background: var(--clr-white-red);
}

.dropdown-divider{
  height: 1px;
  margin: 0.25em 0;
  background: var(--clr-line);
  opacity: 0.6;
}

.ai-label{
  flex: 1;
}
/* ================= NOTIFICATIONS (refined) ================= */
/* ===== NOTIFICATIONS — OPTION C (Outline) ===== */

/* stack container */
.notifications {
  position: fixed;
  top: 16px;
  right: 16px;
  display: grid;
  gap: 10px;
  z-index: 1000;
}

/* card (outline style) */
.notification{
  /* layout */
  display: grid;
  grid-template-columns: auto 1fr auto; /* icon | text | close */
  align-items: center;
  gap: 12px;

  /* sizing */
  min-width: 300px;
  max-width: 380px;
  padding: 12px 14px;
  border-radius: var(--br-standard);

  /* visuals (outline) */
  background: var(--clr-base);
  border: 1px solid var(--clr-line);       /* default; variants override */
  box-shadow: var(--elev-shadow);

  /* motion + placement */
  transition: opacity .18s ease, transform .18s ease;
  will-change: opacity, transform;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;

  color: var(--clr-text);
  line-height: 1.4;
}

/* status variables */
.notification.success{ --_status: var(--clr-soft-green); }
.notification.error  { --_status: var(--clr-danger);  }
/* (optional) add more:
.notification.warning{ --_status: #f59e0b; }
.notification.info   { --_status: #06b6d4; }
*/

/* outline treatment = colored border + icon; text remains neutral */
.notification.success,
.notification.error{
  border-color: var(--_status);
}

/* icon */
.notification-icon{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--_status, var(--clr-text-muted)); /* colored by variant */
  margin: 0;
}
.notification-icon svg,
.notification-icon svg *{
  width: 22px;
  height: 22px;
  fill: currentColor !important; /* ensure SVG matches variant color */
}

/* text block */
.notification-text{ min-width: 0; }
.notification h2{
  all: unset;
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  margin: 0 0 2px;
  color: var(--clr-text);          /* keep neutral for outline style */
}
.notification p{
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--clr-dark-grey);
}
.notification .close{
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--br-standard);
  border: 1px solid var(--clr-line);
  display: grid;
  place-items: center;
  background: var(--clr-base);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}



.notification .close:hover {
  background: var(--clr-menu-row-hover);
  border-color: var(--clr-blue-grey);
}

.notification .close svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}
.notification-icon svg,
.notification-icon svg *{
  width: 28px;   /* was 22 */
  height: 28px;
}

/* show/hide */
.notification.is-hidden{
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/*=============================================*/
/* Highlight inputs if not filled*/
/*=============================================*/
input.input-error,
select.input-error,
textarea.input-error{
  border: 1px solid var(--clr-danger) !important;
  background-color: var(--clr-white-red) !important;
  animation: shake .3s ease-in-out;
}
@keyframes shake{
  0%{ transform:translateX(0) }
  25%{ transform:translateX(-4px) }
  50%{ transform:translateX(4px) }
  75%{ transform:translateX(-4px) }
  100%{ transform:translateX(0) }
}

/* ==== HEADINGS ==== */
h1{ 
  font-size: var(--fs-h1); 
  line-height: var(--lh-snug); 
  font-weight: var(--fw-bold); 
  color: var(--clr-text); }
h2{
  font-size: var(--fs-h2); 
  line-height: var(--lh-snug); 
  font-weight: var(--fw-semibold);
  color: var(--clr-text); 
  margin-bottom: 1rem; 


}
h3{ 
  font-size: var(--fs-h3); 
  line-height: var(--lh-snug); 
  font-weight: var(--fw-semibold); 
  color: var(--clr-text); }

/* Two-column row just for Category + Measurement */
.row-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: var(--field-gap-y);
  align-items: start;
}

.row-2 > .form-group{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* keep the 1-col stack on small screens if you want */
@media (max-width: 640px) {
  .row-2{ grid-template-columns: 1fr; }
}
.divider {
  height: 1px;
  border-top: 1px solid var(--clr-line);
  margin-bottom: 16px;
}
/* ==== Toolbar ==== */
/* make it behave as a single-row toolbar */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;    /* search left, filters right */
  gap: 8px;
  flex-wrap: nowrap;                 /* <- stops accidental wrapping */
  margin-top: 8px;
}
.dashboard-toolbar{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-top:8px;
    margin-bottom:8px;
}
.search-box{
  flex:1; min-width:240px; max-width:520px;
}

/* Right side filters row */
.filters{ display:flex; gap:12px; align-items:center; }
.filter-group{ display:flex; align-items:center; gap:8px; }

/* Label tone */
.filter-label{
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  white-space:nowrap;
}

/* Dropdown (matches your inputs) */
.filter-dropdown{
  min-width: 190px; /* tweak per need */
  padding: var(--ctl-pad-y) calc(var(--ctl-pad-x) + 22px) var(--ctl-pad-y) var(--ctl-pad-x);
  min-height: var(--ctl-h-sm);
  border: 1px solid var(--clr-blue-grey);
  border-radius: var(--br-standard);
  background: var(--clr-super-light);
  color: var(--clr-dark);
  font: inherit;
  font-size: var(--fs-input);
  line-height: var(--lh-normal);
  transition: border-color .2s ease, box-shadow .2s ease;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
.filter-dropdown:focus{
  outline:0;
  border-color: var(--clr-accent);
}

/* Grey text when showing the default value */
.filter-dropdown.is-default{
  color: var(--clr-text-muted);
}

/* Options inside the popup stay dark */
.filter-dropdown option{ color: var(--clr-dark); }

/* Responsive nudge */
@media (max-width: 880px){
  .filter-dropdown{ min-width:160px; }
}
.filter-meta-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.7em 0.5em 0.8em 0.5em;
  margin-top: 0.2em;

}

.filter-meta-text{
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  font-weight: var(--fw-semibold); 
  margin: 0;
    line-height: 1.25;
  
}

.filter-meta-text span{
  color: var(--clr-text);
  font-weight: var(--fw-semibold); 
   font-size: var(--fs-sm);
}
/*=============================================*/
/* table */
/*=============================================*/
/* ===== Clean Table (no inner grid lines) ===== */


/* Table */
table {
  width: 100%;
  background-color: var(--clr-base);
  table-layout: fixed;
}

/* Header cells (keep full height) */
th {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-text-muted);
  background-color: var(--clr-nav-hover-bg);
  border-bottom: 0.125rem solid var(--clr-base);
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  padding: 12px 20px; /* Keep original padding */
  line-height: 1.4;
}

/* Data cells (make thinner) */
tbody td {
  padding: 6px 12px;  /* thinner padding */
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
  border-bottom: 1px solid var(--clr-base);
  text-align: left;
  vertical-align: middle;
  line-height: 1.1;  /* compact line height */
}
/* Minimum row height (applies to header + body rows) */
th,
tbody td{
  min-height: 44px;           /* adjust: 40–52px usually feels right */
  height: 44px;               /* enforces consistent row height */
  padding-top: 0;
  padding-bottom: 0;
}

/* Hover effect */
tbody tr:hover td {
  background-color: var(--clr-super-light);
}



/* Row hover */
tbody tr:hover {
  background: var(--row-hover-ligh-grey);
}

.quantity-input {
    width: 5rem; /* 80px */
    text-align: center;
    padding: 0.375rem; /* 6px */
}

/* Highlights */
.highlight-blue {
    color: var(--accent-blue-links-clr);
}

.light-grey {
    color: var(--clr-text-muted);
}
/* =========================
   TABLE WRAPPER (GLOBAL)
   ========================= */
.table-wrap {
  width: 100%;
  border: 1px solid var(--clr-line);
  border-radius: var(--br-standard);
  overflow: hidden;
  background: var(--clr-base);
}

/* =========================
   TABLE BASE
   ========================= */
.table-wrap table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

/* =========================
   HEADER
   ========================= */
.table-wrap th {
  padding: 12px 20px;
  background: var(--clr-nav-hover-bg);
  color: var(--clr-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  border-bottom: 1px solid var(--clr-line);
}

/* =========================
   BODY
   ========================= */
.table-wrap td {
  padding: 8px 12px;
  font-size: var(--fs-sm);
  color: var(--clr-text);
  border-bottom: 1px solid var(--clr-line);
}

/* Vertical borders */
.table-wrap th,
.table-wrap td {
  border-right: 1px solid var(--clr-line);
}

/* Remove last column border */
.table-wrap th:last-child,
.table-wrap td:last-child {
  border-right: none;
}

/* Remove last row border */
.table-wrap tbody tr:last-child td {
  border-bottom: none;
}

/* Hover */
.table-wrap tbody tr:hover td {
  background: var(--clr-super-light);
}

/* Subtotal row */
.category-subtotal-row {
  background: var(--clr-nav-active-bg);
  border-color: var(--clr-nav-active-border);
  color: var(--clr-accent);
  font-weight: var(--fw-semibold);
}

/* Make subtotal row cells same size as other rows */
.category-subtotal-row td {
  padding: 10px 16px;   /* <- match your regular table td padding */
  vertical-align: middle;
}

.category-subtotal-row .subtotal-label {
  float: left;
  font-weight: var(--fw-semibold);
  color: var(--clr-accent);
}

.category-subtotal-row .subtotal-value {
  font-weight: var(--fw-semibold);
  color: var(--clr-accent);
  font-size: var(--fs-sm);
}

/* Materials Total box */
/* ===== Totals Strip (Tasks) ===== */
.totals-strip{
  margin-top: 12px;
  background: var(--clr-base);
  border: 1px solid var(--clr-line);
  border-radius: var(--br-standard);
  overflow: hidden;
  box-shadow: none;
}

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

.totals-row .label{
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-text-muted);
  line-height: var(--lh-normal);
}

.totals-value{
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-text); /* grey when 0 */
  min-width: 90px;
  text-align: right;
  letter-spacing: .01em;
  transition: color .2s ease;
}

.totals-row + .totals-row{
  border-top: 1px dashed var(--clr-line);
}


.footer-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--clr-base);
  border: 1px solid var(--clr-line);
  border-radius: var(--br-standard);
  padding: 14px 20px;
  margin-top: 2rem;
  max-width: 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.footer-card .label {
  font-weight: var(--fw-semibold);
  color: var(--clr-accent);
  margin-right: 10px;
  font-size: var(--fs-md);
}

.footer-card .value {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--clr-accent);
}
/* ---------------------- */
/* 🔹 Pill (Base + Variants) */
/* ---------------------- */
/* Base pill */
.pill,
.pd-pill{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  padding:.25rem .6rem;
  border-radius:8px;
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  line-height:1.2;
  border:1px solid transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  white-space:nowrap;
  vertical-align:middle;
  width:auto;
  min-width:unset;
}

/* Small pill modifier */
.pill-sm,
.pd-pill-sm{
  justify-content:center;
  gap:.35rem;
  padding:.25rem .65rem;
  border-radius:.55rem;
  font-size:var(--fs-2xs);
  line-height:1.15;
  box-shadow:none;
}

/* Icons */
.pill svg,
.pd-pill svg{
  flex-shrink:0;
  margin-top:2px;
  display:block;
}

/* Number variants */
.pd-pill-1  { background:#eef6ff; color:#2563eb; border:1px solid rgba(37,99,235,.3); }
.pd-pill-2  { background:#dff6e5; color:#129c55; border:1px solid #93e2b7; }
.pd-pill-3  { background:#ffefd6; color:#a15c00; border:1px solid #ffd59e; }
.pd-pill-4  { background:#fff6db; color:#9c7a15; border:1px solid #f7da7a; }
.pd-pill-5  { background:#f0e6ff; color:#6b21a8; border:1px solid #d3b8ff; }
.pd-pill-6  { background:#e0f7fa; color:#006d77; border:1px solid #90e0ef; }
.pd-pill-7  { background:#e3f2fd; color:#0d47a1; border:1px solid #bbdefb; }
.pd-pill-8  { background:#eaf2ff; color:#1e3a8a; border:1px solid #bcd2ff; }
.pd-pill-9  { background:#f3f4f6; color:#374151; border:1px solid #d1d5db; }
.pd-pill-10 { background:#fde2e2; color:#d1453b; border:1px solid #f2aaaa; }

/* Semantic variants */
.pd-pill.invoice{
  background:var(--clr-accent-soft);
  color:var(--clr-accent);
  border:1px solid var(--clr-accent-border);
}

.pd-pill.outstanding{
  background:var(--clr-white-red);
  color:var(--clr-danger);
  border:1px solid var(--clr-red-border);
}

.pd-pill.warning{
  background:var(--clr-warning-bg);
  color:var(--clr-warning-text);
  border:1px solid var(--clr-warning-border);
}

.pd-pill.neutral{
  background:var(--clr-super-light);
  color:var(--clr-text-muted);
  border:1px solid var(--clr-line);
}

.pd-pill.success{
  background:var(--clr-white-green);
  color:var(--clr-success);
  border:1px solid var(--clr-green-border);
}

.pd-pill.purple{
  background:var(--clr-purple-soft);
  color:var(--clr-purple);
  border:1px solid var(--clr-purple-border);
}

.pd-pill__icon{
  width:14px;
  height:14px;
  flex:0 0 14px;
  display:inline-block;
  line-height:0;
}

.pd-pill__icon path{
  fill:currentColor !important;
}
.item-cell {
  display: flex;
  align-items: center;     /* vertically center the icon with the text */
  gap: 10px;               /* space between icon and text */
}

/* Center the icon itself (this will center within its 28x28 box) */
.item-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;     /* vertical center */
  justify-content: center; /* horizontal center */
  border-radius: var(--br-standard);
  background:var(--invoice-bg-clr); 
  color:var(--accent-blue-links-clr);
  border: 1px solid var(--invoice-bg-clr);    /* cleaner than inset shadow */

}
/* Text stays left-aligned */
.item-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.item-name {
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
  font-size: var(--fs-sm);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-desc {
  color: var(--clr-text-muted);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/*=============================================*/
/* Product Tabs*/
/*=============================================*/
.filter-tabs {
  display: flex;
  align-items: center;
  gap: 0.65em;
  margin: 0.85em 0 1em;
  flex-wrap: wrap;
}

.filter-tabs .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.46em 1.125em;
  border-radius: var(--br-standard);
  border: 1px solid var(--clr-line);
  background: var(--clr-base);
  color: var(--clr-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  box-shadow: var(--elev-shadow-soft);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  min-height:36px;
}

.filter-tabs .tab-label {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.filter-tabs .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75em;
  height: 1.75em;
  padding: 0 0.45em;
  border-radius: var(--br-standard);
  background: transparent;
  color: var(--clr-text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  opacity: 0.85;
}
.filter-tabs .tab.active .tab-count,
.filter-tabs .tab.success.active .tab-count,
.filter-tabs .tab.danger.active .tab-count {
  color: inherit;        /* 🔥 matches tab text */
  opacity: 1;            /* 🔥 remove fade */
}


.filter-tabs .tab.active {
  background: var(--clr-accent-soft);
  border-color: var(--clr-accent-border);
  color: var(--clr-accent);
}

/* Success */
.filter-tabs .tab.pd-pill.success.active {
  background: var(--clr-white-green);
  border-color: var(--clr-green-border);
  color: var(--clr-success);
}

/* Outstanding / Overdue */
.filter-tabs .tab.pd-pill.outstanding.active {
  background: var(--clr-white-red);
  border-color: var(--clr-red-border);
  color: var(--clr-danger);
}

/* Partial */
.filter-tabs .tab.pd-pill.warning.active {
  background: var(--clr-warning-bg);
  border-color: var(--clr-warning-border);
  color: var(--clr-warning-text);
}

/* Deposit Paid */
.filter-tabs .tab.pd-pill.invoice.active {
  background: var(--clr-accent-soft);
  border-color: var(--clr-accent-border);
  color: var(--clr-accent);
}

/* Neutral */
.filter-tabs .tab.pd-pill.neutral.active {
  background: var(--clr-super-light);
  border-color: var(--clr-line);
  color: var(--clr-text);
}

/* purple*/
.filter-tabs .tab.pd-pill.purple.active {
  background: var(--clr-purple-soft);
  border-color: var(--clr-purple-border);
  color: var(--clr-purple);
}
/* empty table styling when there is no results it gives a message*/
/* ===== Table Empty State ===== */
.table-empty td {
  text-align: center;
  padding: 1.8em 1em; /* ↓ reduced from 2.5em */
  border-bottom: none;
  vertical-align: middle;
}

/* Container */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em; /* slightly increased for better rhythm */
}

/* Title */
.empty-title {
  font-weight: var(--fw-semibold);
  font-size: 1em; /* ↑ slightly stronger than before */
  color: var(--clr-text);
}

/* Subtext */
.empty-subtext {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  max-width: 420px; /* prevents long line stretching */
  text-align: center;
  line-height: 1.4;
}

/* Actions */
.empty-actions {
  margin-top: 14px; /* ↓ tighter */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}


/* Base pill button */
.filter-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--ctl-pad-x);
  min-height: var(--ctl-h-sm);
  border-radius: var(--br-standard);
  border: 1px solid var(--clr-border-subtle, #e5e7eb);
  background: var(--clr-base);
  color: var(--clr-text-muted, #6b7280);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-input);
  box-sizing: border-box;
  cursor: pointer;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease;
}

/* Active / "pressed" state – matches your active tab styling */
.filter-toggle-pill[aria-pressed="true"] {
  background: var(--clr-nav-active-bg);
  border-color: var(--clr-nav-active-border);
  color: var(--clr-accent);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
}

/* Optional: focus style */
.filter-toggle-pill:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}
/* Base margin text */
.margin-cell .margin-value {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* States – applied on the cell */
.margin-cell.positive .margin-value {
  color: var(--clr-soft-green);
}

.margin-cell.warning .margin-value {
  color: #f59e0b; /* amber */
}

.margin-cell.negative .margin-value {
  color: var(--clr-danger);
}

/* =========================
   Semantic money colors
   ========================= */
.money {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table-wrap td.money--pos {
  color: var(--clr-success);
  font-weight: var(--fw-semibold);
}

.table-wrap td.money--neg {
  color: var(--clr-danger);
  font-weight: var(--fw-semibold);
}

.table-wrap td.money--zero {
  color: var(--clr-text-muted);
  font-weight: var(--fw-semibold);
}

/* Phase wrapper card (optional, matches your existing cards) */
.phase-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Phase header (Phase 1 – Customer information) */
.phase-header {
    margin-bottom: 0.5rem;
}


.phase-title {
    font-size: var(--fs-lg); /* or var(--fs-lg) if you have it */
    font-weight: var(--fw-semibold,);
    color: var(--clr-text-strong);
    margin-bottom: 0.25rem;
}

.phase-subtitle {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--clr-text-muted, #94a3b8);
}

/* Section headers */
.form-section {
    padding-top: 0.75rem;
    border-top: 1px solid var(--clr-line-soft, #e2e8f0);
}

/* Your existing pills are fine — just ensure spacing looks good inside the card */
.product-suggestions{
  padding: 10px 12px;
  display:flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 0; /* card handles spacing */
}

.empty-hint {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted, #8b90a0);
  padding: 0.75rem 0.9rem 0.9rem;
}
/* ============================= */
/* SUGGESTIONS CARD (wrapper)    */
/* ============================= */
/* Suggestions card (same visual system as your other cards, but lighter) */
.suggestions-card{
  margin-top: .4rem;
  border: 1px solid var(--clr-line);
  background: var(--clr-base);
  border-radius: var(--br-standard);
  box-shadow: var(--elev-shadow);
  overflow: hidden;
}

/* Header row (de-emphasised: looks like a helper, not a full section) */
.suggestions-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75rem;
  padding: .4rem .75rem;
  background: var(--clr-nav-hover-bg);
  border-bottom: 1px solid var(--clr-line);
}

.sh-left{
  display:flex;
  flex-direction:column;
  gap: .1rem;
  min-width: 0;
}


/* Subtitle: smaller + calmer */
.sh-sub{
  font-size: var(--fs-xs); /* fallback if you don’t have fs-2xs */
  color: var(--clr-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.sh-right{
  display:flex;
  align-items:center;
  gap: .5rem;
}

/* Count pill: more “status badge” than “button” */
.sh-count{
  font-size: var(--fs-2xs, 0.75em); /* smaller */
  color: var(--clr-text-muted);

  padding: .2rem .5rem;
  border-radius: 999px;

  border: 1px solid var(--clr-line);
  background: transparent;          /* lighter than base */
}


/* Empty state inside card */
.suggestion-empty{
  font-size: var(--fs-xs);
  color: var(--clr-text-muted, #8b90a0);
  padding: 10px 12px;
}

/* ============================= */
/* PILL STYLES                    */
/* ============================= */
.suggestion-pill{
  display: inline-flex;          /* stays horizontal */
  align-items: center;
  gap: .45rem;

  border: 1px solid var(--clr-line, #d6d9e0);
  background: #fff;
  border-radius: var(--br-standard);
  padding: .45rem .85rem;        /* ✅ bigger than before */
  font-size: var(--fs-sm);
  line-height: 1.1;
  min-height: 2.1rem;            /* ✅ prevents tiny pills */
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  white-space: nowrap;
}

.suggestion-pill:hover{
  background: var(--clr-soft-blue-tint, #eef4ff);
  border-color: var(--clr-accent, #2f6bff);
}

.suggestion-pill:active{
  transform: translateY(1px);
}

/* Icon */
.suggestion-pill .pill-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 1.05em;
  color: var(--clr-accent);
}

.suggestion-pill .pill-svg{
  display: block;
  width: 100%;
  height: 100%;
}

.suggestion-pill .pill-text{
  line-height: 1.1;
}
.search-wrap{
  position: relative;
}

.search-wrap .suggestions-card{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;

}

.suggestions-card.is-hidden{
  display: none;
}
/*=============================================*/
/* Kpi*/
/*=============================================*/
  /* Simplified KPI cards */
  .kpi-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:.95rem;
  }

  .kpi-card,
  .kpi{
    border:1px solid var(--clr-accent-soft-border);
    border-radius:.65rem;
    background:#fff;
    box-shadow:none;
  }

  .kpi-card{
    padding:1rem;
    min-width:0;
  }

  .kpi{
    min-height:6rem;
    padding:.85rem .9rem;
    display:grid;
    grid-template-columns:1fr;
    gap:.35rem;
    align-content:start;
    position:relative;
    overflow:hidden;
    transition:border-color .18s ease, background .18s ease;
  }

  .kpi:hover,
  .kpi-card:hover{
    border-color:var(--clr-accent-border);
    box-shadow:none;
  }

  .kpi-label{
    color:var(--clr-text-muted);
    font-size:.76rem;
    font-weight:500;
    line-height:1.2;
  }

  .kpi strong{
    color:#08111f;
    font-size:1.05rem;
    font-weight:700;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .kpi small{
    color:var(--clr-text-muted);
    font-size:.75rem;
    font-weight:500;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .kpi-compare{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    max-width:100%;
    margin-top:.45rem;
    padding:.35rem .65rem;
    border-radius:.55rem;
    font-size:.72rem;
    font-weight:600;
    border:0;
    background:var(--clr-accent-soft);
    color:var(--clr-text-muted);
    line-height:1.15;
    box-shadow:none;
    white-space:nowrap;
  }

  .kpi-compare.trend-up::before{
    content:"↑";
    margin-right:.25rem;
    font-weight:700;
  }

  .kpi-compare.trend-down::before{
    content:"↓";
    margin-right:.25rem;
    font-weight:700;
  }

  .kpi-compare.trend-flat::before{
    content:"—";
    margin-right:.25rem;
    font-weight:700;
  }

  .kpi-compare.positive{
    background:var(--clr-white-green);
    color:var(--clr-success);
  }

  .kpi-compare.warning{
    background:VAR(--clr-orange-border);
    color:VAR(--clr-orange-text);
  }

  .kpi-compare.negative{
    background:var(--clr-white-red);
    color:var(--clr-danger);
  }

  .kpi-compare.neutral{
    background:var(--clr-accent-soft);
    color:var(--clr-text-muted);
  }
 .kpi-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:.8rem;
    padding-bottom:.85rem;
    margin-bottom:.95rem;
    border-bottom:1px solid var(--clr-accent-soft-border);
  }

  .kpi-card-header h3{
    color:var(--clr-text);
    font-size:1rem;
    font-weight:700;
    line-height:1.25;
  }

  .kpi-card-header p{
    margin-top:.25rem;
    color:var(--clr-text-muted);
    font-size:.78rem;
    font-weight:500;
    line-height:1.35;
  }

/*/////////////////////////////
/*table variables and icon colouring*/
/*/////////////////////////////
/* Quotes,orders styling */
.invoice-number a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0.25rem 0.6rem; 
  border-radius: var(--br-standard); 
  font-size:0.85rem; 
  font-weight:var(--fw-semibold); 
  line-height:1.2;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  vertical-align:middle; 
  text-align:left;
  width:auto; 
  min-width:unset; 
  text-decoration:none; 
   background: var(--clr-accent-soft);
  color:var(--clr-accent);
  border: 1px solid var(--clr-accent-border);  
  transition:background-color .2s ease;
}
.invoice-number a svg{ flex-shrink:0; display:block; }

/* 👤 Customer block (with avatar) */
.customer-cell{
  display: grid;
  grid-template-columns: 28px 1fr; /* avatar + text */
  gap: 8px;
  align-items: center;
  min-width: 220px;
}

.customer-lines { display: grid; gap: 2px; min-width: 0; }
.customer-name { font-weight: var(--fw-semibold); color: var(--light-dark-grey); line-height: 1.2; }
.customer-email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  min-width: 0;
}
.customer-email a {
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-email a:hover { text-decoration: underline; color: #2563eb; }
.mail-ic { opacity: .7; }

/* Wrapper card around chips + customer */
.accept-info-card{
  border: 1px solid var(--clr-blue-grey);
  border-radius: var(--br-standard);
  background: var(--clr-base);
  padding: 12px;
  margin: 8px 0 14px;
  box-shadow: var(--box-shadow-soft);
}
/* Summary rows */
.summary-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 6px;
}
.summary-row + .summary-row{ border-top:1px dashed var(--clr-blue-grey); }

.k{ color:var(--clr-text); font-weight:var(--fw-semibold);font-size: var(--fs-sm); }
.v{ margin-left:auto;    font-weight: var(--fw-semibold);font-size: var(--fs-sm);white-space:nowrap; }
/* Right-aligned tabular numerals for amounts */
.num{
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings:"lnum" 1, "tnum" 1;
padding: 0.25rem 0.5rem;
}
/* Right-aligned tabular numerals for amounts */
.num-td{
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings:"lnum" 1, "tnum" 1;
}
/* customer block reuses your avatar + sets a neat container */
.customer-inline{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--br-standard);
  border: 1px solid var(--clr-blue-grey);
}

/* Wrapper card around chips + customer */
.accept-info-card{
  border: 1px solid var(--clr-blue-grey);
  border-radius: var(--br-standard);
  background: var(--clr-base);
  padding: 12px;
  margin: 8px 0 14px;
  box-shadow: var(--box-shadow-soft);
}
/*/////////////////////////////
/*Simular items bar*/
/*/////////////////////////////*/
.similar-item-hint {
      display: none;
      margin-top: 0.65rem;
      padding: 0.85rem 1rem;
      border: 1px solid var(--clr-warning-border);
      border-radius: var(--br-standard);
      background: var(--clr-warning-bg);
    }

    .similar-item-hint p {
      margin: 0;
      font-size: var(--fs-sm);
      font-weight:var(--fw-semibold);
      color: var(--clr-warning-text);
    }

    .similar-item-subtext {
      display: block;
      margin-top: 0.35rem;
      font-size: var(--fs-xs);
      line-height: 1.4;
      color: var(--clr-warning-sub-text);
    }

    .similar-item-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 0.75rem;
    }

    .similar-item-chip {
      display: inline-flex;
      align-items: center;
      padding: 0.3rem 0.7rem;
      border: 1px solid var(--clr-warning-border);
      border-radius: var(--br-standard);
      background: var(--clr-warning-border-2);
      font-size: var(--fs-sm);
      color: var(--clr-text);
      line-height: 1.2;
      cursor: pointer;
    }
/*/////////////////////////////
/*DashboARD*/
/*/////////////////////////////*/


  .dashboard{
    display:flex;
    flex-direction:column;
    gap:1rem;
    background:var(--clr-base);
    border:1px solid var(--clr-accent-soft-border);
    border-radius:.7rem;
    box-shadow:none;
    color:var(--clr-text);
  }

  .dashboard :where(h3,p){
    margin:0;
  }

  .dashboard *{
    letter-spacing:.01em;
  }

  /* Layout grids */
  .insight-grid,
  .two-col-layout{
    display:grid;
    grid-template-columns:minmax(0, .78fr) minmax(0, 1.17fr);
    gap:1rem;
    align-items:stretch;
  }

  .two-col-layout{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .link-button{
    display:inline-flex;
    align-items:center;
    color:var(--clr-accent);
    text-decoration:none;
    font-size:var(--fs-2xs);
    font-weight:var(--fw-semibold);
    white-space:nowrap;
  }

  .link-button:hover{
    text-decoration:underline;
  }


  /* Cash line chart */
  .chart-card.wide{
      min-height: 18.5rem;
      display: flex;
      flex-direction: column;
  }


  .cash-line-chart{
      position: relative;
      flex: 1;                 /* Fill remaining card height */
      width: 100%;
      min-height: 300px;
      display: flex;
      overflow: hidden;
  }

  .cash-line-chart script{
    display:none;
  }

  .cash-line-svg{
      width: 100%;
      height: 100%;
      flex: 1;
      display: block;
      overflow: visible;
  }

  .cash-axis-label{
    fill:var(--clr-text-muted);
    font-size:var(--fs-2xss);
    font-weight:var(--fw-medium);
  }

  .cash-grid-line{
    stroke:#edf2f8;
    stroke-width:1;
    shape-rendering:crispEdges;
  }

  .cash-hover-line{
    stroke:#9ca3af;
    stroke-width:1;
    stroke-dasharray:3 5;
    opacity:.9;
    pointer-events:none;
    shape-rendering:crispEdges;
  }

  .cash-line-path{
    fill:none;
    stroke:#2563eb;
    stroke-width:2.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .cash-area-path{
    fill:url(#cashLineGradient);
  }

  .cash-point{
    fill:#fff;
    stroke:#2563eb;
    stroke-width:2;
    transition:r .15s ease, stroke-width .15s ease;
  }

  .cash-point.is-active{
    r:5.5;
    stroke-width:2.6;
  }

  .cash-hit-area{
    fill:transparent;
    cursor:pointer;
  }

  .cash-line-tooltip{
    position:absolute;
    z-index:30;
    min-width:9rem;
    max-width:13rem;
    padding:.7rem .85rem;
    border:1px solid var(--clr-accent-soft-border);
    border-radius:.85rem;
    background:#fff;
    box-shadow:0 .65rem 1.5rem rgba(15,23,42,.13);
    pointer-events:none;
    opacity:0;
    transform:translate(-50%, calc(-100% - .85rem));
    transition:opacity .12s ease;
    text-align:left;
  }

  .cash-line-tooltip.is-visible{
    opacity:1;
  }

  .cash-line-tooltip strong{
    display:block;
    color:var(--clr-text);
    font-size:var(--fs-2xs);
    font-weight:var(--fw-bold);
    margin-bottom:.2rem;
  }

  .cash-line-tooltip span{
    display:block;
    color:#1e4fd1;
    font-size:var(--fs-sm);
    font-weight:var(--fw-bold);
  }



  .action-row strong::first-letter{
    text-transform:uppercase;
  }


  .success-empty .empty-title{
    color:var(--clr-success);
  }

  /* Lists */
  .list{
    display:flex;
    flex-direction:column;
    border:1px solid var(--clr-accent-soft-border);
    border-radius:.6rem;
    overflow:hidden;
    background:var(--clr-base);
  }

  .form-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.78rem .85rem;
    border-bottom:1px solid var(--clr-accent-soft-border);
    min-width:0;
    background:var(--clr-base);
  }

  .form-row:last-child{
    border-bottom:none;
  }

  .form-row:hover{
    background:var(--clr-accent-soft);
  }

  .form-row > div:first-child{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:.18rem;
  }

  .form-row strong{
    color:var(--clr-text);
    font-size:var(--fs-xs);
    font-weight:var(--fw-bold);
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .form-row span{
    color:var(--clr-text-muted);
    font-size:var(--fs-2xs);
    font-weight:var(--fw-medium);
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .row-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:.25rem;
    flex:0 0 auto;
    text-align:right;
  }

  .row-right small{
    color:var(--clr-text);
    font-size:var(--fs-2xs);
     font-weight:var(--fw-bold);
    white-space:nowrap;
  }

  .dashboard-empty{
    padding:1.4rem 1rem;
    background:var(--clr-accent-soft);
    border:none;
  }

  .dashboard-empty .empty-title{
    color:var(--clr-text);
    font-size:var(--fs-md);
    font-weight:var(--fw-bold);
  }

  .dashboard-empty .empty-subtext{
    color:var(--clr-text-muted);
    font-size:var(--fs-2xs);
  }

  /* Responsive */
  @media (max-width:1180px){
    .kpi-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width:1040px){
    .insight-grid,
    .two-col-layout{
      grid-template-columns:1fr;
    }

    .hero{
      flex-direction:column;
    }


  }

  @media (max-width:760px){
    .form-container.dashboard{
      padding:.85rem;
    }


    .filter-group{
      width:100%;
      align-items:stretch;
    }

   .filter-group{
      flex-direction:column;
      gap:.35rem;
    }

   .filter-dropdown{
      width:100%;
    }

    .form-row{
      align-items:flex-start;
    }
  }
/*/////////////////////////////
/*profile page styling*/
/*/////////////////////////////*/



.settings-alert{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.65rem .8rem;
  margin-bottom:.85rem;
  border:1px solid var(--clr-line);
  border-radius:var(--br-standard);
  background:var(--clr-super-light);
  color:var(--clr-text);
  font-size:var(--fs-sm);
}

.settings-alert-icon{
  width:1.75rem;
  height:1.75rem;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--clr-accent-soft);
  color:var(--clr-accent);
  border:1px solid var(--clr-accent-soft-border);
}

.settings-alert-icon svg{
  width:1rem;
  height:1rem;
  fill:currentColor;
}

.settings-alert.success{
  background:var(--clr-white-green);
  border-color:var(--clr-green-border);
  color:var(--clr-success);
}

.settings-alert.error{
  background:var(--clr-white-red);
  border-color:var(--clr-red-border);
  color:var(--clr-danger);
}






.settings-panel{
  border:1px solid var(--clr-line);
  border-radius:var(--br-standard);
  background:var(--clr-base);
  box-shadow:var(--elev-shadow-soft);
  overflow:hidden;
}

.settings-section{ display:none; }
.settings-section.is-active{ display:block; }

.settings-section-head{
  padding:1rem 1.1rem .65rem;
}

.settings-section-title{
  margin:0;
  color:var(--clr-text);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  line-height:var(--lh-snug);
}

.settings-section-copy{
  margin:.25rem 0 0;
  color:var(--clr-text-muted);
  font-size:var(--fs-sm);
  line-height:1.4;
}

.settings-row-block{
  border-top:1px solid var(--clr-line);
}

.settings-row{
  display:grid;
      grid-template-columns: minmax(220px, 1fr) minmax(400px, 2fr) auto;
  gap:1rem;
  align-items:center;
  padding:1rem 1.1rem;
}

.settings-row-main{
  display:flex;
  align-items:flex-start;
  gap:0;
  min-width:0;
}


.settings-row-title{
  margin:0;
  color:var(--clr-text);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  line-height:1.25;
}

.settings-row-copy{
  margin:.25rem 0 0;
  color:var(--clr-text-muted);
  font-size:var(--fs-xs);
  line-height:1.4;
}

.settings-row-value{
  min-width:0;
  color:var(--clr-dark);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  line-height:1.35;
  text-align:right;
  overflow-wrap:anywhere;
}

.settings-row-value.muted{
  color:var(--clr-text-muted);
  font-weight:var(--fw-medium);
}

.settings-row-action{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.45rem;
}

.settings-inline-edit{
  display:none;
  padding:0 1.1rem 1rem 1.1rem;
}

.settings-row-block.is-editing .settings-inline-edit{
  display:block;
}

.settings-inline-card{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:.75rem;
  align-items:end;
  padding:.85rem;
  border:1px solid var(--clr-line);
  border-radius:var(--br-standard);
  background:var(--clr-super-light);
}

.settings-inline-card.settings-inline-card-wide{
  grid-template-columns:1fr;
}

.settings-inline-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.75rem;
}

.settings-field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  min-width:0;
}

.settings-field label{
  color:var(--clr-text-muted);
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
}

.settings-field input,
.settings-field textarea{
  background:var(--clr-base);
  color:var(--clr-text);

}

.settings-field textarea{
  min-height:5rem;
  resize:vertical;
}

.settings-inline-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.5rem;
}

.settings-logo-mini{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:.65rem;
}

.settings-logo-thumb{
  width:3.25rem;
  height:3.25rem;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--clr-line);
  border-radius:var(--br-standard);
  background:var(--clr-super-light);
}

.settings-logo-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.settings-logo-thumb span{
  color:var(--clr-accent);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
}


.settings-logo-uploader{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:1rem;
  align-items:center;
  padding:1rem;
  border:1px dashed var(--clr-blue-grey);
  border-radius:var(--br-standard);
  background:linear-gradient(180deg, var(--clr-base), var(--clr-super-light));
}

.settings-logo-uploader-preview{
  width:4.25rem;
  height:4.25rem;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--clr-line);
  border-radius:1rem;
  background:var(--clr-base);
  color:var(--clr-accent);
  font-size:var(--fs-xl);
  font-weight:var(--fw-bold);
  box-shadow:var(--elev-shadow-soft);
}

.settings-logo-uploader-preview img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.settings-logo-uploader-body{
  min-width:0;
}

.settings-logo-uploader-title{
  margin:0;
  color:var(--clr-text);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
}

.settings-logo-uploader-copy{
  margin:.25rem 0 .75rem;
  color:var(--clr-text-muted);
  font-size:var(--fs-xs);
  line-height:1.45;
}

.settings-logo-upload-control{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}

.settings-file-input{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.settings-file-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.15rem;
  padding:.45rem .8rem;
  border:1px solid var(--clr-accent-soft-border);
  border-radius:var(--br-standard);
  background:var(--clr-accent-soft);
  color:var(--clr-accent);
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  cursor:pointer;
}

.settings-file-button:hover{
  border-color:var(--clr-accent);
  background:var(--clr-base);
}

.settings-file-name{
  color:var(--clr-text-muted);
  font-size:var(--fs-xs);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:18rem;
}

.settings-company-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.1rem;
  border-top:1px solid var(--clr-line);
  background:linear-gradient(180deg, var(--clr-base), var(--clr-super-light));
}

.settings-company-identity{
  display:flex;
  align-items:center;
  gap:.9rem;
  min-width:0;
}

.settings-company-logo{
  width:4.5rem;
  height:4.5rem;
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 auto;
  border:1px solid var(--clr-line);
  border-radius:var(--br-standard);
  background:var(--clr-base);
  color:var(--clr-accent);
  font-size:var(--fs-xl);
  font-weight:var(--fw-bold);
}

.settings-company-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.settings-company-meta{
  min-width:0;
}

.settings-company-name{
  margin:0;
  color:var(--clr-text);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  line-height:1.25;
  overflow-wrap:anywhere;
}

.settings-company-sub{
  margin:.3rem 0 0;
  color:var(--clr-text-muted);
  font-size:var(--fs-xs);
  line-height:1.45;
}

.settings-company-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.5rem;
  flex:0 0 auto;
}

.settings-company-actions input[type="file"]{
  max-width:12rem;
  font-size:var(--fs-xs);
}



.settings-code-box{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  max-width:100%;
  padding:.45rem .6rem;
  border:1px solid var(--clr-line);
  border-radius:var(--br-standard);
  background:var(--clr-super-light);
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.profile-copy-feedback{
  display:none;
  color:var(--clr-success);
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  white-space:nowrap;
}

.profile-copy-feedback.is-visible{ display:inline-flex; }

.settings-readonly-pill{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:.25rem .65rem;
  border:1px solid var(--clr-line);
  border-radius:var(--br-standard);
  background:var(--clr-super-light);
  color:var(--clr-text-muted);
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
}


.settings-file-input-visible{
  width:100%;
  max-width:24rem;
  min-height:2.5rem;
  padding:.55rem .65rem;
  border:1px solid var(--clr-line);
  border-radius:var(--br-standard);
  background:var(--clr-base);
  color:var(--clr-text);
  font-size:var(--fs-xs);
  cursor:pointer;
}

.settings-file-input-visible::file-selector-button{
  min-height:1.9rem;
  margin-right:.75rem;
  padding:.35rem .7rem;
  border:1px solid var(--clr-accent-soft-border);
  border-radius:var(--br-standard);
  background:var(--clr-accent-soft);
  color:var(--clr-accent);
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  cursor:pointer;
}

.settings-file-input-visible::file-selector-button:hover{
  border-color:var(--clr-accent);
  background:var(--clr-base);
}


.settings-password-control{
  position:relative;
  width:100%;
}

.settings-password-control input{
  min-width:0;
  width:100%;
  padding-right:4.5rem;
}

.settings-show-password{
  position:absolute;
  right:.8rem;
  top:50%;
  transform:translateY(-50%);
  min-height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--clr-accent);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  cursor:pointer;
  white-space:nowrap;
  line-height:1;
}

.settings-show-password:hover{
  background:transparent;
  border-color:transparent;
  color:var(--clr-accent);
}

.settings-password-error{
  display:none;
  align-items:center;
  gap:.45rem;
  padding:.65rem .75rem;
  border:1px solid var(--clr-red-border);
  border-radius:var(--br-standard);
  background:var(--clr-white-red);
  color:var(--clr-danger);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
}

.settings-password-error.is-visible{
  display:flex;
}

.settings-row-block.has-password-error .settings-password-control input{
  border-color:var(--clr-danger);
  box-shadow:0 0 0 4px rgba(225, 61, 61, .10);
}

.settings-row-block.has-password-error .settings-inline-card{
  border-color:var(--clr-red-border);
}


.settings-field select{
  width:100%;
  min-height:2.35rem;
  padding:.6rem .7rem;
  border:1px solid var(--clr-line);
  border-radius:var(--br-standard);
  background:var(--clr-base);
  color:var(--clr-text);
  font-size:var(--fs-sm);
  outline:none;
}

.settings-field select:focus{
  border-color:var(--clr-accent);
  box-shadow:0 0 0 4px rgba(44,128,238,.08);
}

@media (max-width:900px){
  .settings-row{
    grid-template-columns:minmax(0, 1fr) auto;
  }

  .settings-row-value{
    grid-column:1 / -1;
    text-align:left;
    padding-left:2.6rem;
  }

  .settings-inline-edit{
    padding-left:1.1rem;
  }
}

@media (max-width:640px){
  .settings-page{ margin:.75rem auto 1.5rem; }
  .settings-row{
    grid-template-columns:1fr;
    gap:.65rem;
    padding:.95rem;
  }
  .settings-row-main{ gap:.55rem; }
  .settings-row-value{ padding-left:0; text-align:left; }
  .settings-row-action{ justify-content:flex-start; }
  .settings-logo-mini{ justify-content:flex-start; }
  .settings-inline-edit{ padding:0 .95rem .95rem; }
  .settings-inline-card{ grid-template-columns:1fr; }
  .settings-inline-grid{ grid-template-columns:1fr; }
  .settings-inline-actions{ justify-content:flex-start; flex-wrap:wrap; }
  .settings-logo-uploader{ grid-template-columns:1fr; }
  .settings-company-card{ align-items:flex-start; flex-direction:column; }
  .settings-company-actions{ justify-content:flex-start; flex-wrap:wrap; }
}
/*/////////////////////////////
/*login and signup*/
/*/////////////////////////////*/
        .auth-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background: var(--clr-bg);
        }
        .auth-card {
            width: 100%;
            max-width: 25rem;
            padding: 1.5rem 1.75rem;
            border: 1px solid var(--clr-line);
            border-radius: var(--br-standard);
            background: var(--clr-base);
            box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .06);
        }
        
        .auth-brand {
            text-align: center;
            margin-bottom: 1rem;
        }

        .auth-logo {
            display: block;
            width: 2.5rem;
            height: 2.5rem;
            object-fit: contain;
            margin: 0 auto .55rem;
        }

        .auth-title {
            margin: 0;
            color: var(--clr-text);
            font-size: var(--fs-xl);
            font-weight: var(--fw-bold);
            line-height: var(--lh-snug);
        }

        .auth-subtitle {
            margin: .2rem 0 0;
            color: var(--clr-text-muted);
            font-size: var(--fs-xs);
        }

        .auth-error {
            margin-bottom: .65rem;
            padding: .55rem .7rem;
            border: 1px solid var(--clr-red-border);
            border-radius: var(--br-standard);
            background: var(--clr-white-red);
            color: var(--clr-danger);
            font-size: var(--fs-xs);
            font-weight: var(--fw-semibold);
            text-align: center;
        }
        .auth-form,
        .form-step {
            display: flex;
            flex-direction: column;
            gap: .6rem;
        }
        .auth-form .form-group {
            margin: 0;
        }

        .auth-form .form-group label {
            display: block;
            margin: 0 0 .25rem;
            font-size: var(--fs-xs);
        }

        .auth-form .form-group input {
            width: 100%;
            min-height: var(--ctl-h-sm);
        }

        .password-field {
            position: relative;
        }

        .password-field input {
            padding-right: 4rem;
        }

        .password-toggle {
            position: absolute;
            top: 50%;
            right: .75rem;
            transform: translateY(-50%);
            width: auto;
            min-width: 0;
            min-height: 0;
            margin: 0;
            padding: .2rem;
            border: 0;
            background: transparent;
            box-shadow: none;
            color: var(--clr-accent);
            font: inherit;
            font-size: var(--fs-xs);
            font-weight: var(--fw-semibold);
            line-height: 1;
            cursor: pointer;
            text-decoration: none;
        }
        .password-toggle:hover,
        .password-toggle:focus {
            background: transparent;
            box-shadow: none;
            transform: translateY(-50%);
            outline: none;
        }
        .auth-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .3rem;
            margin-top: .85rem;
            padding-top: .75rem;
            border-top: 1px solid var(--clr-line);
            color: var(--clr-text-muted);
            font-size: var(--fs-xs);
        }

        @media (max-width: 520px) {
            .auth-card {
                padding: 1.25rem;
            }

            .auth-footer {
                flex-wrap: wrap;
            }
        }
        .auth-link {
            color: var(--clr-accent);
            font-size: var(--fs-xs);
            font-weight: var(--fw-semibold);
            text-decoration: none;
        }
        .auth-row {
            display: flex;
            justify-content: flex-end;
            margin-top: -.1rem;
        }
        
        .auth-submit {
            width: 100%;
            min-height: var(--ctl-h-sm);
        }
        .signup-choice-actions {
            display: flex;
            flex-direction: column;
            gap: .5rem;
            margin-top: .1rem;
        }
         .signup-choice-actions .btn {
            width: 100%;
            min-height: var(--ctl-h-sm);
        }
/*/////////////////////////////
/*setup page*/
/*/////////////////////////////*/
        .setup-page {
            min-height: 100vh;
            padding: 1rem;
            background: var(--clr-bg);
        }

        .setup-shell {
            width: 100%;
            max-width: 46rem;
            margin: 0 auto;
            padding: 1.5rem 0;
        }

        .setup-card {
            width: 100%;
            padding: 1.5rem 1.75rem;
            border: 1px solid var(--clr-line);
            border-radius: var(--br-standard);
            background: var(--clr-base);
            box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .06);
        }


        .setup-form {
            display: flex;
            flex-direction: column;
            gap: .85rem;
        }

        .setup-section {
            padding-top: .2rem;
        }

        .setup-section-title {
            margin: 0 0 .55rem;
            padding-bottom: .45rem;
            border-bottom: 1px solid var(--clr-line);
            color: var(--clr-text);
            font-size: var(--fs-sm);
            font-weight: var(--fw-bold);
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: .6rem;
        }

        .form-group {
            margin: 0;
        }

        .form-group.full {
            grid-column: 1 / -1;
        }

        .form-group label {
            display: block;
            margin: 0 0 .25rem;
            color: var(--clr-text-muted);
            font-size: var(--fs-xs);
            font-weight: var(--fw-semibold);
        }

        .form-group input {
            width: 100%;
            min-height: var(--ctl-h-sm);
        }

        .setup-help {
            margin: .45rem 0 0;
            color: var(--clr-text-muted);
            font-size: var(--fs-xs);
        }

        .setup-actions {
            display: flex;
            flex-direction: column;
            gap: .5rem;
            width: 100%;
            margin-top: .25rem;
        }

        .setup-actions .btn {
            width: 100%;
            min-height: var(--ctl-h-sm);
            margin: 0;
            padding: .55rem .5rem;
            text-decoration: none;
        }

        .setup-page button,
        .setup-page button:hover,
        .setup-page button:focus {
            text-decoration: none;
        }

        @media (max-width: 650px) {
            .setup-card {
                padding: 1.25rem;
            }

            .form-grid {
                grid-template-columns: 1fr;
            }

            .form-group.full {
                grid-column: auto;
            }
        }