/* ================================
   1. GLOBAL BASE
================================ */

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

/* ---------- Layout + Form Vars ----------
   Dashboard max widths:
   - Tier 1/2: 1280px
   - Tier 3:   1600px

   Field sizing goal:
   - Responsive clamp so fields shrink on smaller dashboard widths
---------------------------------------- */
:root{
  --header-h: 48px;
  --footer-h: 0px;
  --ep-accent: #22c55e;
  --ep-accent-soft: #4ade80;
  --ep-bg: #0f172a;
  --ep-text: #e5e7eb;
  --ep-text-weak: #9ca3af;
  --ep-text-muted: #6b7280;
  --ep-surface: #020617;
  --ep-surface-soft: #0b1220;
  --ep-surface-quiet: #111827;
  --ep-header-bg: #122036;
  --ep-border: rgba(148,163,184,0.35);
  --ep-border-soft: rgba(148,163,184,0.18);
  --ep-border-strong: rgba(15,23,42,0.9);
  --ep-link: #a5b4fc;
  --ep-input: #191d2c;
  --ep-input-border: #37404d;
  --ep-overlay: rgba(15,23,42,0.86);
  --ep-shadow-tint: rgba(56,189,248,0.18);
  /* Compatibility aliases for older authenticated page-local styles. */
  --bg: var(--ep-bg);
  --text: var(--ep-text);
  --muted: var(--ep-text-muted);
  --border: var(--ep-border);
  --card: var(--ep-surface);
  --card-bg: var(--ep-surface);
  --input: var(--ep-input);
  --ep-status-draft: #1D4ED8;
  --ep-status-approved: #16A34A;
  --ep-status-pending-review: #F97316;
  --ep-status-ready: #22C55E;
  --ep-status-needs-adjustment: #B91C1C;
  --ep-card-radius: 12px;
  --page-max-standard: 1280px;
  --page-max-wide: 1480px;
  --page-max-data: 1720px;
  --page-max-open-standard: 1280px;
  --page-max-open-wide: 1640px;
  --page-max-open-data: 1880px;
  --page-max: var(--page-max-standard);
  --page-max-advanced: var(--page-max-data);
  --page-max-open: var(--page-max-open-standard);
  --page-max-open-advanced: var(--page-max-open-data);
  --ep-modal-max-standard: 640px;
  --ep-modal-max-wide: 780px;
  --ep-modal-max-data: 980px;
  --ep-modal-max: var(--ep-modal-max-standard);
  --sidebar-w-open: 240px;
  --sidebar-w-rail: 76px;
  --ep-z-shell-backdrop: 20000;
  --ep-z-shell-sidebar: 20010;
  --ep-z-shell-header: 20020;
  --ep-z-shell-modal: 20100;

  /* Responsive field sizing (scales with viewport, bounded) */
  --field-max: 350px;
  --field-min: 240px;              /* allow smaller than 280 so it won’t overlap */
  --field-fluid: clamp(var(--field-min), 26vw, var(--field-max));
  --ep-card-pad-y: 16px;
  --ep-card-pad-x: 14px;
  --ep-control-h: 38px;
  --ep-control-radius: 10px;
  --ep-btn-h: 38px;
  --ep-btn-pad-x: 16px;
  --ep-btn-secondary-h: 34px;
  --ep-btn-secondary-pad-x: 12px;

  /* Density defaults (normal) */
  --field-pad-y: 6px;
  --field-pad-x: 10px;
  --field-font: 13px;
  --field-radius: 8px;
  --row-gap: 10px;

  /* Grid lock */
  --grid-col: var(--field-fluid);  /* locked grids scale too */
  --grid-gap: 12px;
}

body.light-mode{
  --ep-accent: #16a34a;
  --ep-accent-soft: #22c55e;
  --ep-bg: #eef2ff;
  --ep-text: #111827;
  --ep-text-weak: #334155;
  --ep-text-muted: #475569;
  --ep-surface: #ffffff;
  --ep-surface-soft: #f8fafc;
  --ep-surface-quiet: #f1f5f9;
  --ep-header-bg: #e7eefc;
  --ep-border: rgba(148,163,184,0.45);
  --ep-border-soft: rgba(148,163,184,0.28);
  --ep-border-strong: rgba(15,23,42,0.15);
  --ep-link: #1d4ed8;
  --ep-input: #ffffff;
  --ep-input-border: #cbd5e1;
  --ep-overlay: rgba(15,23,42,0.45);
  --ep-shadow-tint: rgba(59,130,246,0.2);
  --ep-card-radius: 12px;
}

:root{
  --ep-fin-surface: var(--ep-surface);
  --ep-fin-surface-alt: var(--ep-surface-soft);
  --ep-fin-surface-elevated: var(--ep-surface-quiet);
  --ep-fin-border: var(--ep-border);
  --ep-fin-border-soft: var(--ep-border-soft);
  --ep-fin-text: var(--ep-text);
  --ep-fin-text-muted: var(--ep-text-muted);
  --ep-fin-text-subtle: var(--ep-text-weak);
  --ep-fin-overlay: var(--ep-overlay);
  --ep-fin-positive: #16a34a;
  --ep-fin-positive-soft: color-mix(in oklab, var(--ep-fin-positive) 10%, var(--ep-fin-surface));
  --ep-fin-positive-border: color-mix(in oklab, var(--ep-fin-positive) 28%, var(--ep-fin-border));
  --ep-fin-positive-text: color-mix(in oklab, var(--ep-fin-positive) 72%, var(--ep-fin-text));
  --ep-fin-negative: #dc2626;
  --ep-fin-negative-soft: color-mix(in oklab, var(--ep-fin-negative) 8%, var(--ep-fin-surface));
  --ep-fin-negative-border: color-mix(in oklab, var(--ep-fin-negative) 35%, var(--ep-fin-border));
  --ep-fin-negative-text: color-mix(in oklab, var(--ep-fin-negative) 72%, var(--ep-fin-text));
  --ep-fin-warning: #d97706;
  --ep-fin-warning-soft: color-mix(in oklab, var(--ep-fin-warning) 10%, var(--ep-fin-surface));
  --ep-fin-warning-border: color-mix(in oklab, var(--ep-fin-warning) 28%, var(--ep-fin-border));
  --ep-fin-warning-text: color-mix(in oklab, var(--ep-fin-warning) 72%, var(--ep-fin-text));
  --ep-fin-info: var(--ep-link);
  --ep-fin-info-soft: color-mix(in oklab, var(--ep-fin-info) 10%, var(--ep-fin-surface));
  --ep-fin-info-border: color-mix(in oklab, var(--ep-fin-info) 28%, var(--ep-fin-border));
  --ep-fin-info-text: color-mix(in oklab, var(--ep-fin-info) 72%, var(--ep-fin-text));
  --ep-fin-badge-bg: var(--ep-surface-soft);
  --ep-fin-badge-border: var(--ep-border-soft);
  --ep-fin-badge-text: var(--ep-text);
  --ep-fin-modal-surface: var(--ep-surface);
  --ep-fin-modal-header: var(--ep-surface-soft);
  --ep-fin-table-row-hover: color-mix(in oklab, var(--ep-fin-info) 8%, transparent);
}

body.light-mode .nav-toggle,
body.light-mode .logout-btn{
  border-color: rgba(148,163,184,0.5);
  background: var(--ep-surface-soft);
  color: var(--ep-text);
}

body.light-mode .nav-link.active{
  color:#f8fafc;
}

/* Tier 3 can exist, but doesn't automatically widen ALL pages */
body.tier-3,
body.tier-advanced {
  /* keep tier styling, but do NOT force wide */
}

body.layout-standard{
  --page-max: var(--page-max-standard);
  --page-max-advanced: var(--page-max-standard);
  --page-max-open: var(--page-max-open-standard);
  --page-max-open-advanced: var(--page-max-open-standard);
  --ep-modal-max: var(--ep-modal-max-standard);
}

/* ✅ Only pages that explicitly want more width should opt-in */
body.layout-wide,
body.wide-dashboard {
  --page-max: var(--page-max-wide);
  --page-max-advanced: var(--page-max-wide);
  --page-max-open: var(--page-max-open-wide);
  --page-max-open-advanced: var(--page-max-open-wide);
  --ep-modal-max: var(--ep-modal-max-wide);
}

body.layout-data{
  --page-max: var(--page-max-data);
  --page-max-advanced: var(--page-max-data);
  --page-max-open: var(--page-max-open-data);
  --page-max-open-advanced: var(--page-max-open-data);
  --ep-modal-max: var(--ep-modal-max-data);
}

/* Many pages set per-page .content-inner max-width (including inline styles).
   Force a clear desktop width difference between sidebar open vs collapsed. */
@media (min-width: 900px){
  header{
    position:sticky;
    top:0;
    z-index:90;
    padding:4px 14px;
    gap:8px;
  }
  .header-left{
    gap:7px;
  }
  .header-center{
    flex:1 1 440px;
    min-width:180px;
  }
  .header-search-input{
    height:30px;
    padding:0 34px 0 11px;
    border-radius:10px;
    font-size:12px;
  }
  .header-search-kbd{
    right:7px;
    min-width:18px;
    height:18px;
    padding:0 4px;
    font-size:10px;
  }
  .logo{
    font-size:15px;
  }
  .ep-brand-logo-image{
    max-width:148px;
    height:22px;
  }
  .header-right{
    gap:8px;
  }
  .header-actions{
    gap:5px;
  }
  .header-actions .primary-btn,
  .header-actions .secondary-btn,
  .logout-btn{
    min-height:30px;
    padding:0 9px;
    font-size:11px;
  }
  .user-info{
    font-size:11px;
  }
  .nav-toggle{
    padding:2px 6px;
    font-size:15px;
  }
  body{
    --shell-open-gutter: 276px;   /* sidebar + page padding */
    --shell-closed-gutter: 112px; /* rail + page padding */
    --shell-content-gutter: var(--shell-open-gutter);
  }
  body.sidebar-collapsed{
    --shell-content-gutter: var(--shell-closed-gutter);
  }
  .content{
    max-width: min(var(--page-max), calc(100vw - var(--shell-content-gutter) - 2px)) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.ep-shell-fixed-chrome #ep-shell-top-chrome{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:var(--ep-z-shell-header);
  }
  body.ep-shell-fixed-chrome #ep-shell-top-chrome > header{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:auto !important;
  }
}


/* Density modes */
body.density-compact{
  --field-pad-y: 5px;
  --field-pad-x: 9px;
  --field-font: 12.5px;
  --row-gap: 8px;
  --grid-gap: 10px;
}

body.density-relaxed{
  --field-pad-y: 9px;
  --field-pad-x: 12px;
  --field-font: 14px;
  --row-gap: 12px;
  --grid-gap: 14px;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--ep-bg);
  color:var(--ep-text);
  min-height:100vh;
  overflow-x:hidden;
}

body.ep-shell-fixed-chrome{
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
}

html{
  max-width:100%;
  overflow-x:hidden;
}

main,
.content,
.content-inner,
.card,
.modal-panel,
dialog,
.table-wrap{
  min-width:0;
}

.table-wrap{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}

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

a{ color:inherit; text-decoration:none; }


/* ================================
   2. TOP HEADER (DASHBOARD SHELL)
================================ */

header{
  background:var(--ep-header-bg);
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  box-shadow:0 1px 0 var(--ep-border-strong);
  position:relative;
  z-index:20;
}

#ep-shell-top-chrome{
  position:relative;
  z-index:90;
}

.header-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  min-width:0;
}

.header-center{
  flex:1 1 480px;
  min-width:0;
  display:flex;
  justify-content:center;
  /* Search results must escape the header; only the results list scrolls. */
  overflow:visible;
}

.header-search{
  position:relative;
  width:min(500px, 100%);
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

.header-search-toggle{
  display:none;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--ep-border-soft);
  background:var(--ep-surface-soft);
  color:var(--ep-text);
  font-size:11px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}

.header-search-input{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  text-overflow:ellipsis;
  height:36px;
  padding:0 40px 0 12px;
  border-radius:11px;
  border:1px solid var(--ep-border-soft);
  background:color-mix(in oklab, var(--ep-surface) 90%, var(--ep-bg));
  color:var(--ep-text);
  font-size:12px;
  outline:none;
}

.header-search-input::placeholder{
  color:var(--ep-text-muted);
}

.header-search-input:focus{
  border-color:color-mix(in oklab, var(--ep-link) 40%, var(--ep-border-soft));
  box-shadow:0 0 0 3px color-mix(in oklab, var(--ep-link) 14%, transparent);
}

.header-search-kbd{
  position:absolute;
  top:50%;
  right:9px;
  transform:translateY(-50%);
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:7px;
  border:1px solid var(--ep-border-soft);
  background:color-mix(in oklab, var(--ep-surface-soft) 92%, transparent);
  color:var(--ep-text-muted);
  font-size:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.header-search-results{
  max-height:min(60vh, 480px);
  overflow-y:auto;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  display:grid;
  gap:6px;
  padding:8px;
  border-radius:14px;
  border:1px solid var(--ep-border-soft);
  background:var(--ep-surface);
  box-shadow:0 20px 36px rgba(2,6,23,0.32);
  z-index:120;
}

.header-search-results[hidden]{
  display:none !important;
}

.header-search-item{
  box-sizing:border-box;
  text-decoration:none;
  appearance:none;
  width:100%;
  text-align:left;
  border:1px solid transparent;
  background:transparent;
  color:var(--ep-text);
  border-radius:12px;
  padding:10px 12px;
  display:grid;
  gap:3px;
  cursor:pointer;
}

.header-search-item:hover,
.header-search-item.is-active{
  background:color-mix(in oklab, var(--ep-link) 10%, transparent);
  border-color:color-mix(in oklab, var(--ep-link) 26%, transparent);
}

.header-search-item-title{
  font-size:13px;
  font-weight:600;
}

.header-search-item-meta,
.header-search-empty{
  font-size:12px;
  color:var(--ep-text-muted);
}

.logo{
  display:inline-flex;
  align-items:center;
  font-size:16px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ep-text);
  min-width:0;
  flex:0 0 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.logo span{ color:var(--ep-accent); }
.ep-brand-logo-image{
  display:block;
  width:auto;
  max-width:168px;
  height:28px;
  object-fit:contain;
  flex:0 0 auto;
}
.sidebar-header{
  display:flex;
  align-items:center;
  min-height:12px;
  margin-bottom:8px;
}
.sidebar-header--spacer{
  min-height:8px;
  margin-bottom:6px;
}
.sidebar-logo{
  display:inline-flex;
  align-items:center;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:18px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ep-text);
}
.sidebar-logo span{ color:var(--ep-accent); }
.sidebar-logo .ep-brand-logo-image{
  height:36px;
  max-width:184px;
}

.header-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 1 auto;
  min-width:0;
}
.header-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
}

.header-notification-link{
  position:relative;
  width:36px;
  height:36px;
  border:1px solid var(--ep-border-soft);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ep-surface-soft);
  color:var(--ep-text);
  text-decoration:none;
}

.header-notification-link:hover{
  border-color:color-mix(in oklab, var(--ep-link) 34%, var(--ep-border-soft));
  background:color-mix(in oklab, var(--ep-link) 10%, var(--ep-surface-soft));
}

.header-notification-link svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.header-notification-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border:2px solid var(--ep-surface);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ef4444;
  color:#fff;
  font-size:10px;
  font-weight:800;
  line-height:1;
}

.header-notification-badge.is-hidden{
  display:none;
}

.account-menu{
  position:relative;
  flex:0 0 auto;
}

.account-menu-toggle{
  min-height:36px;
  padding:3px 6px 3px 4px;
  border-radius:999px;
  border:1px solid var(--ep-border-soft);
  background:var(--ep-surface-soft);
  color:var(--ep-text);
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}

.account-menu-avatar{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in oklab, var(--ep-link) 18%, var(--ep-surface));
  color:var(--ep-text);
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  flex:0 0 auto;
}

.account-menu-labels{
  display:grid;
  gap:1px;
  min-width:0;
  text-align:left;
}

.account-menu-name{
  font-size:12px;
  font-weight:700;
  color:var(--ep-text);
  line-height:1.2;
  white-space:nowrap;
}

.account-menu-meta{
  font-size:11px;
  color:var(--ep-text-muted);
  line-height:1.2;
  white-space:nowrap;
}

.account-menu-chevron{
  color:var(--ep-text-muted);
  font-size:11px;
  line-height:1;
  transition:transform .14s ease;
}

.account-menu.is-open .account-menu-chevron{
  transform:rotate(180deg);
}

.account-menu-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:min(320px, calc(100vw - 24px));
  display:none;
  gap:6px;
  padding:8px;
  border-radius:16px;
  border:1px solid var(--ep-border-soft);
  background:var(--ep-surface);
  box-shadow:0 24px 42px rgba(2,6,23,0.34);
  z-index:140;
}

.account-menu.is-open .account-menu-panel{
  display:grid;
}

.account-menu-summary{
  display:grid;
  gap:4px;
  padding:10px 12px;
  border-radius:12px;
  background:var(--ep-surface-soft);
  border:1px solid var(--ep-border-soft);
}

.account-menu-summary-business{
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ep-text-muted);
}

.account-menu-summary-name{
  font-size:15px;
  font-weight:700;
  color:var(--ep-text);
}

.account-menu-summary-meta{
  font-size:12px;
  color:var(--ep-text-muted);
}

.account-menu-link,
.account-menu-item{
  appearance:none;
  width:100%;
  min-height:38px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--ep-border-soft);
  background:var(--ep-surface-soft);
  color:var(--ep-text);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  text-align:left;
}

.account-menu-link:hover,
.account-menu-item:hover{
  border-color:color-mix(in oklab, var(--ep-link) 26%, var(--ep-border-soft));
  background:color-mix(in oklab, var(--ep-link) 10%, var(--ep-surface-soft));
}

.account-menu-theme-picker{
  display:grid;
  gap:6px;
  padding:10px 12px;
  border:1px solid var(--ep-border-soft);
  border-radius:12px;
  background:var(--ep-surface-soft);
  color:var(--ep-text);
}

.account-menu-theme-picker > span{
  color:var(--ep-text-muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.account-menu-theme-picker select{
  width:100%;
  min-width:0;
  min-height:34px;
  padding:0 30px 0 9px;
  border:1px solid var(--ep-border-soft);
  border-radius:9px;
  background:var(--ep-input-bg, var(--ep-surface));
  color:var(--ep-text);
  font:inherit;
  font-size:12px;
}

.account-menu-theme-picker small{
  min-height:14px;
  color:var(--ep-text-muted);
  font-size:11px;
}

.account-menu-theme-picker.is-saving{
  opacity:.72;
}

.account-menu-theme-picker.is-error small{
  color:var(--ep-danger-text, #fca5a5);
}

.account-menu-form{
  margin:0;
}

.account-menu-item-danger{
  color:var(--ep-danger-text, #fca5a5);
}

.user-info{
  font-size:11px;
  text-align:right;
  color:var(--ep-text-weak);
}
.user-info strong{ color:var(--ep-text); }

.logout-form{ margin:0; }

.logout-btn{
  min-height:var(--ep-btn-secondary-h);
  padding:0 var(--ep-btn-secondary-pad-x);
  border-radius:999px;
  border:1px solid var(--ep-border-soft);
  background:var(--ep-surface-soft);
  color:var(--ep-text);
  font-size:11px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.theme-toggle-btn[aria-pressed="true"]{
  border-color:color-mix(in oklab, var(--ep-link) 38%, var(--ep-border-soft));
  background:color-mix(in oklab, var(--ep-link) 18%, var(--ep-surface-soft));
}

/* Hamburger button (always there) */
.nav-toggle{
  background:transparent;
  border:1px solid #4b5563;
  border-radius:6px;
  padding:3px 7px;
  font-size:16px;
  color:var(--ep-text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ================================
   3. APP SHELL / SIDEBAR / CONTENT
   (FINAL – unified behavior + keeps design)
================================ */

/* App shell */
.app-shell{
  display:flex;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100dvh - var(--header-h));
  width:100%;
  min-width:0;
}

body.ep-shell-fixed-chrome .app-shell,
body.ep-shell-fixed-chrome .ep-shell{
  /* Absolute positioning preserves the viewport shell without trapping the
     sidebar inside a fixed-position stacking context below page modals. */
  position:absolute;
  top:var(--header-h);
  right:0;
  bottom:0;
  left:0;
  min-height:0 !important;
  width:100%;
  overflow:hidden;
}

/* ================================
   SIDEBAR (DESKTOP DEFAULT)
================================ */

/* Docked sidebar (≥900px) */
.sidebar{
  width:var(--sidebar-w-open);
  flex:0 0 var(--sidebar-w-open);
  align-self:stretch;
  position:relative;
  z-index:var(--ep-z-shell-sidebar);
  top:auto;
  height:100%;
  background:var(--ep-surface);
  border-right:1px solid var(--ep-border-strong);
  padding:16px 14px;
  box-sizing:border-box;
  overflow-y:auto;
  overflow-x:visible;
  /* Keep vertical scroll contained while allowing a browser edge swipe to
     reach Back/Forward when it begins over the left navigation rail. */
  overscroll-behavior-y:contain;
  overscroll-behavior-x:auto;
  transition:flex-basis .16s ease, width .16s ease, padding .16s ease;
}

/* Sidebar content */
.sidebar-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ep-text-muted);
  margin-bottom:8px;
}

.nav-divider{
  height:1px;
  margin:12px 8px;
  background:var(--ep-border-soft);
}

.nav-divider--bottom{
  margin-top:14px;
}

.nav-item-main{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.nav-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
}

.nav-icon svg{
  width:18px;
  height:18px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.nav-link{
  display:block;
  padding:9px 10px;
  border-radius:10px;
  color:var(--ep-text);
  font-size:13px;
  text-decoration:none;
  margin-bottom:4px;
  transition:background-color 0.12s ease;
}
.nav-link:hover{
  background:color-mix(in oklab, var(--ep-surface-soft) 82%, transparent);
}

.nav-link.active{
  background:linear-gradient(135deg,var(--ep-accent),var(--ep-accent-soft));
  color:#022c22;
  font-weight:600;
}
.nav-group { margin-top: 6px; }

.nav-substack{
  display:flex;
  flex-direction:column;
  gap: 2px;
  margin: 6px 0 0 12px;            /* indent */
  padding-left: 10px;
  border-left: 1px solid var(--ep-border-soft);
}

.nav-sublink{
  display:block;
  padding: 8px 10px;
  border-radius: 10px;
  color: color-mix(in oklab, var(--ep-text) 92%, transparent);
  font-size: 12px;
  line-height: 1.2;
  transition: background 140ms ease, color 140ms ease;
}

.nav-sublink:hover{
  background: color-mix(in oklab, var(--ep-surface-soft) 90%, transparent);
  color: var(--ep-text);
}

.nav-sublink.active{
  background: color-mix(in oklab, var(--ep-link) 18%, transparent);
  color: var(--ep-text);
}
.nav-badge{
  margin-left: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 15px;
  background: color-mix(in oklab, var(--ep-text) 22%, transparent);
  color: var(--ep-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
}

.nav-badge.is-hidden{ display:none !important; }

/* keep badges from stretching links */
.nav-link, .nav-sublink{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* wrapper row so Orders can be a link + toggle area */
.orders-row{
  position: relative;
}

/* Row links that have a right-side accordion arrow should keep content on the left.
   This prevents row badges (Orders count) from colliding with the arrow when closed. */
.orders-row .nav-link{
  justify-content: flex-start;
  padding-right: 52px;
}

.orders-row .nav-link .nav-badge--row{
  margin-left: 8px;
  margin-right: 0;
}

/* small toggle click zone on the right side of Orders link */
.orders-toggle-hit{
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;         /* clickable area */
  height: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.orders-toggle-hit::before{
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ep-text);
  border-bottom: 2px solid var(--ep-text);
  transform: rotate(-45deg);
  transition: transform 160ms ease, border-color 160ms ease;
}

.orders-accordion.open .orders-toggle-hit::before{
  transform: rotate(45deg);
  border-color: var(--ep-text);
}

/* accordion hide/show */
.orders-accordion .nav-substack{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 220ms ease, opacity 160ms ease;

  display: flex;
  flex-direction: column;
  gap: 2px;

  margin: 6px 0 0 12px;
  padding-left: 10px;
  border-left: 1px solid var(--ep-border-soft);
}

.orders-accordion.open .nav-substack{
  max-height: 260px;
  opacity: 1;
}

@media (min-width: 900px){
  body.sidebar-collapsed .sidebar{
    width:var(--sidebar-w-rail);
    flex:0 0 var(--sidebar-w-rail);
    padding:16px 8px;
    overflow:visible;
    z-index:var(--ep-z-shell-sidebar);
  }

  body.sidebar-collapsed .sidebar-header{
    justify-content:center;
    min-height:8px;
  }

  body.sidebar-collapsed .sidebar-logo{
    width:100%;
    justify-content:center;
    text-align:center;
    font-size:0;
  }

  body.sidebar-collapsed .sidebar-logo::before{
    content:attr(data-brand-initial);
    font-size:18px;
    font-weight:800;
    letter-spacing:0.08em;
    color:var(--ep-text);
  }

  body.sidebar-collapsed .sidebar-logo.has-image::before{
    content:none;
  }

  body.sidebar-collapsed .sidebar-logo .ep-brand-logo-image{
    max-width:42px;
    height:28px;
  }

  body.sidebar-collapsed .sidebar-title{
    display:none;
  }

  body.sidebar-collapsed .nav-link{
    justify-content:center;
    padding:10px 0;
    margin-bottom:6px;
    border-radius:12px;
  }

  body.sidebar-collapsed .orders-row .nav-link{
    padding-right:0;
  }

  body.sidebar-collapsed .nav-item-main{
    width:100%;
    justify-content:center;
  }

  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .nav-badge,
  body.sidebar-collapsed .orders-toggle-hit{
    display:none !important;
  }

  body.sidebar-collapsed .nav-group{
    position:relative;
    z-index:93;
  }

  body.sidebar-collapsed .orders-accordion .nav-substack{
    position:absolute;
    top:0;
    left:calc(100% + 4px);
    width:220px;
    margin:0;
    padding:8px;
    border:1px solid var(--ep-border-soft);
    border-radius:14px;
    border-left:none;
    background:var(--ep-surface);
    box-shadow:0 18px 34px rgba(2,6,23,0.34);
    max-height:none;
    opacity:0;
    pointer-events:none;
    overflow:visible;
    z-index:95;
  }

  body.sidebar-collapsed .orders-accordion .nav-substack::before{
    content:"";
    position:absolute;
    top:-6px;
    bottom:-6px;
    left:-18px;
    width:24px;
  }

  body.sidebar-collapsed .orders-accordion.open .nav-substack{
    max-height:none;
    opacity:0;
  }

  body.sidebar-collapsed .nav-group:hover .nav-substack,
  body.sidebar-collapsed .nav-group:focus-within .nav-substack{
    opacity:1;
    pointer-events:auto;
  }

  body.sidebar-collapsed .nav-group:hover,
  body.sidebar-collapsed .nav-group:focus-within{
    z-index:96;
  }

  /* Keep the full desktop navigation visible on shorter laptop displays. */
  .sidebar{
    padding-top:clamp(10px, 1.5vh, 16px);
    padding-bottom:clamp(10px, 1.5vh, 16px);
  }

  .sidebar-title{
    margin-bottom:clamp(4px, .8vh, 8px);
  }

  .nav-link{
    padding-top:clamp(6px, 1vh, 9px);
    padding-bottom:clamp(6px, 1vh, 9px);
    margin-bottom:clamp(2px, .45vh, 4px);
  }

  .nav-group{
    margin-top:clamp(3px, .65vh, 6px);
  }

  .nav-divider{
    margin-top:clamp(7px, 1.25vh, 12px);
    margin-bottom:clamp(7px, 1.25vh, 12px);
  }

  .nav-divider--bottom{
    margin-top:clamp(8px, 1.45vh, 14px);
  }

  .orders-accordion .nav-substack{
    gap:clamp(1px, .25vh, 2px);
    margin-top:clamp(3px, .65vh, 6px);
  }

  .nav-sublink{
    padding-top:clamp(5px, .9vh, 8px);
    padding-bottom:clamp(5px, .9vh, 8px);
  }

  body.sidebar-collapsed .sidebar{
    padding-top:clamp(10px, 1.5vh, 16px);
    padding-bottom:clamp(10px, 1.5vh, 16px);
  }

  body.sidebar-collapsed .nav-link{
    padding-top:clamp(7px, 1vh, 10px);
    padding-bottom:clamp(7px, 1vh, 10px);
    margin-bottom:clamp(3px, .65vh, 6px);
  }
}

/* ================================
   SIDEBAR BACKDROP (TABLET/MOBILE)
================================ */

.sidebar-backdrop{
  position:fixed;
  inset:0;
  background:var(--ep-overlay);
  z-index:var(--ep-z-shell-backdrop);
  display:none;
}

/* ================================
   TABLET + MOBILE (<900px)
   Off-canvas drawer overlay
================================ */

@media (max-width: 899px){

  /* ✅ On overlay layouts, ignore desktop "collapsed" hiding rule */
  body.sidebar-collapsed .sidebar{
    display:block;
  }

  .sidebar{
    position:fixed;
    top:var(--header-h);
    left:0;
    bottom:0;
    height:auto;
    width:270px;
    max-width:85vw;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    z-index:var(--ep-z-shell-sidebar);

    transform:translateX(-105%);
    transition:transform 0.2s ease;
    box-shadow:0 20px 40px rgba(0,0,0,0.55);

    border-right:1px solid var(--ep-border-soft);
    padding-bottom:max(16px, env(safe-area-inset-bottom));
  }

  .sidebar.is-open{
    transform:translateX(0);
  }

  .sidebar-backdrop.is-open{
    display:block;
  }

  body.ep-shell-fixed-chrome .sidebar-backdrop{
    top:var(--header-h);
    right:0;
    bottom:0;
    left:0;
  }

  /* Content stays full-width behind overlay */
  .content{
    max-width:100%;
    margin:0;
  }
}

/* ================================
   MAIN CONTENT AREA
================================ */

.content{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  box-sizing:border-box;
  overflow-x:hidden;

  padding:16px 18px calc(24px + env(safe-area-inset-bottom));

  width:100%;
  max-width:var(--page-max);
  margin:0 auto;

  min-width:0; /* prevents overflow */
}
.ep-main{
  min-height:0;
}

body.ep-shell-fixed-chrome .content{
  height:100%;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  overscroll-behavior-x:auto;
  max-width:none !important;
  margin:0 !important;
  width:auto !important;
}

body.ep-shell-fixed-chrome .ep-main{
  flex:1 1 auto;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  overscroll-behavior-x:auto;
  min-width:0;
}

body.ep-shell-fixed-chrome .content > .content-inner{
  margin:0 auto;
  min-width:0;
}

body.ep-shell-fixed-chrome .ep-main > .ep-page{
  margin-left:auto;
  margin-right:auto;
  min-width:0;
}
.content-inner{
  min-width:0;
  max-width:100%;
}

.dropzone{
  border: 1px dashed var(--ep-border-soft);
  background: color-mix(in oklab, var(--ep-surface-soft) 88%, transparent);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  outline: none;
}
.dropzone:hover{
  border-color: var(--ep-accent);
}
.dropzone:focus{
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ep-accent) 25%, transparent);
}
.dropzone.is-dragover{
  border-color: var(--ep-accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ep-accent) 20%, transparent);
  background: color-mix(in oklab, var(--ep-accent) 9%, var(--ep-bg));
}
.dropzone-inner{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
}
.dropzone-title{
  font-size: 13px;
  font-weight: 650;
  color: var(--ep-text);
}
.dropzone-sub{
  font-size: 12px;
  color: var(--ep-text-weak);
}


/* ================================
   4. PAGE TITLES / BREADCRUMBS
================================ */

.page-title{
  font-size:20px;
  margin-bottom:4px;
  color:var(--ep-text);
}
.page-subtitle{
  font-size:13px;
  color:var(--ep-text-weak);
  margin-bottom:18px;
}
.breadcrumbs{
  font-size:12px;
  color:var(--ep-text-weak);
  margin-bottom:8px;
}
.breadcrumbs a{ color:var(--ep-link); text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }
.fin-back-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.fin-back-row .btn,
.fin-back-row .fin-btn{
  min-height:32px;
  padding:6px 10px;
  font-size:12px;
}

/* ================================
   5. CARDS & LAYOUT BLOCKS
================================ */

.card{
  background:var(--ep-surface);
  border-radius:var(--ep-card-radius);
  padding:var(--ep-card-pad-y) var(--ep-card-pad-x) var(--ep-card-pad-x);
  border:1px solid var(--ep-border);
  margin-bottom:18px;
}

.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  gap:12px;
  flex-wrap:wrap;
}

.card-title{
  font-size:15px;
  font-weight:600;
  color:var(--ep-text);
}

.card-subtitle,
.card-subtitle-text{
  font-size:12px;
  color:var(--ep-text-weak);
}

.card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* ================================
   6. BUTTONS
================================ */

.primary-btn{
  min-height:var(--ep-btn-h);
  padding:0 var(--ep-btn-pad-x);
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,var(--ep-accent),var(--ep-accent-soft));
  color:#022c22;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
}

.primary-btn[disabled]{ opacity:0.7; cursor:default; }

.secondary-btn{
  min-height:var(--ep-btn-secondary-h);
  padding:0 var(--ep-btn-secondary-pad-x);
  border-radius:999px;
  border:1px solid var(--ep-border-soft);
  background:var(--ep-surface-soft);
  color:var(--ep-text);
  font-size:12px;
  cursor:pointer;
  text-decoration:none;
}

.primary-btn,
.secondary-btn,
.danger-btn,
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
/* ================================
   DANGER BUTTON
================================ */

.danger-btn {
  background: #7f1d1d;
  border: 1px solid #b91c1c;
  color: #fee2e2;
  min-height: var(--ep-btn-h);
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.danger-btn:hover {
  background: #991b1b;
  border-color: #ef4444;
}

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

.danger-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.split-btn{
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.split-btn .primary-btn{
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

/* caret rotates when open */
.split-caret { transition: transform 140ms ease; }
.split-btn.is-open .split-caret { transform: rotate(180deg); } /* ▴ becomes ▾ when open (or flip if you prefer) */

/* drop-up position (keep this) */
.split-menu{
  position:absolute;
  right:0;
  bottom: calc(100% + 8px);
  min-width: 190px;
  background: var(--ep-surface-soft);
  border: 1px solid var(--ep-border-soft);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  padding: 6px;
  display:none;
  z-index: 9999;
}

/* show menu when open */
.split-btn.is-open .split-menu { display:block; }

.split-menu::after{
  content:'';
  position:absolute;
  bottom:-6px;
  right:14px;
  width:10px;
  height:10px;
  background:var(--ep-surface-soft);
  border-left:1px solid var(--ep-border-soft);
  border-bottom:1px solid var(--ep-border-soft);
  transform: rotate(45deg);
}
.split-item{
  width:100%;
  background: transparent;
  border: 0;
  color: var(--ep-text);
  padding: 10px 10px;
  border-radius: 10px;
  text-align:left;
  cursor:pointer;
}

.split-item:hover{
  background: color-mix(in oklab, var(--ep-surface) 88%, transparent);
}

/* ================================
   7. INPUTS / FILTER ROWS / FORMS
================================ */

.filters-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
  align-items:center;
}

.filters-row label{ font-size:12px; color:var(--ep-text-weak); }


.filters-row input[type="text"],
.filters-row select{
  min-height:var(--ep-control-h);
  padding:0 10px;
  border-radius:var(--ep-control-radius);
  border:1px solid var(--ep-input-border);
  background:var(--ep-input);
  color:var(--ep-text);
  font-size:13px;
  box-sizing:border-box;
  min-width:160px;
}

.filters-row input:focus,
.filters-row select:focus{
  border-color:var(--ep-accent);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--ep-accent) 35%, transparent);
  outline:none;
}

/* Light search input (customers page) */
.search-input{
  min-height:var(--ep-control-h);
  padding:0 10px;
  border-radius:var(--ep-control-radius);
  border:1px solid var(--ep-input-border);
  font-size:14px;
  min-width:220px;
}

/* Form groups */
.form-group{
  margin-bottom:var(--row-gap);
  max-width:var(--field-fluid);
  min-width:0; /* critical: prevents overflow in grids */
}

.form-group label{
  display:block;
  font-size:13px;
  margin-bottom:4px;
  color:var(--ep-text);
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  max-width:var(--field-fluid);
  min-width:0; /* critical: allow shrink */
  min-height:var(--ep-control-h);
  padding:var(--field-pad-y) var(--field-pad-x);
  border-radius:var(--ep-control-radius);
  border:1px solid var(--ep-input-border);
  font-size:var(--field-font);
  box-sizing:border-box;
  background:var(--ep-input);
  color:var(--ep-text);
  outline:none;
}

input[style*="width:"],
select[style*="width:"],
textarea[style*="width:"]{
  max-width:100% !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--ep-accent);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--ep-accent) 35%, transparent);
}

.form-group textarea{
  resize:vertical;
  min-height:92px;
}

.customer-referral-field{
  position:relative;
}

.customer-referral-results{
  position:absolute;
  z-index:20520;
  top:100%;
  left:0;
  right:0;
  max-height:240px;
  overflow-y:auto;
  margin-top:4px;
  padding:4px;
  border:1px solid var(--ep-input-border, #334155);
  border-radius:var(--ep-control-radius, 8px);
  background:var(--ep-card, #0f172a);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}

.customer-referral-results[hidden]{
  display:none;
}

.customer-referral-result{
  display:block;
  width:100%;
  padding:9px 10px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--ep-text, #f8fafc);
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.customer-referral-result:hover,
.customer-referral-result:focus,
.customer-referral-result.is-active{
  background:color-mix(in oklab, var(--ep-accent, #22c55e) 16%, transparent);
  outline:none;
}

.muted-small{ font-size:11px; color:var(--ep-text-weak); }

/* Width utilities */
.field-wide{ max-width:700px; }
.field-full{ max-width:100%; }
.field-min-90{ min-width:90px; }
.field-min-70{ min-width:70px; }

/* Price / Qty utilities */
.field-num{ max-width:140px; min-width:90px; }
.field-qty{ max-width:110px; min-width:70px; }
.field-price{ max-width:160px; min-width:110px; }

/* =========================================
   CLICKABLE ROWS (GLOBAL)
   Opt-in per row using data-href.
========================================= */
tr[data-href]{
  cursor: pointer;
  transition: background-color .12s ease, transform .05s ease;
}

tr[data-href]:hover{
  background: color-mix(in oklab, var(--ep-link) 18%, transparent);
  transform: translateY(-1px);
}

/* --------------------------
   Custom +/- number control
-------------------------- */
.num-control{
  display:inline-flex;
  align-items:stretch;
  border:1px solid var(--ep-input-border);
  border-radius:var(--ep-control-radius);
  overflow:hidden;
  background:var(--ep-surface);
  max-width:100%;
  min-width:0; /* critical */
}

.num-control.field-qty{ max-width:110px; min-width:0; }
.num-control.field-price{ max-width:160px; min-width:0; }
.num-control.field-num{ max-width:140px; min-width:0; }

.num-control input[type="number"]{
  border:0;
  outline:0;
  padding:var(--field-pad-y) var(--field-pad-x);
  width:100%;
  min-width:0;
  color:var(--ep-text);
  background:transparent;
  font-size:var(--field-font);
}

.num-control button{
  width:var(--ep-control-h);
  border:0;
  background:var(--ep-surface-soft);
  color:var(--ep-text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}

.num-control button:hover{ background:color-mix(in oklab, var(--ep-accent) 20%, transparent); }
.num-control button:active{ transform:translateY(1px); }

.num-control .btn-plus{ color:var(--ep-accent); }
.num-control .btn-minus{ color:#b91c1c; }

.num-control input[type="number"]::-webkit-outer-spin-button,
.num-control input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.num-control input[type="number"]{ -moz-appearance:textfield; }

/* ================================
   8. GRID FORMS (LOCKED OPTION)
================================ */

.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--grid-gap);
  margin-bottom:12px;
}

/* LOCKED: responsive “fixed” columns */
.form-grid.locked{
  grid-template-columns:repeat(2, minmax(0, var(--grid-col)));
  justify-content:start;
  column-gap:var(--grid-gap);
  row-gap:var(--grid-gap);
}

.form-grid.locked.center{ justify-content:center; }


/* ================================
   TABLE FRAME (shared)
================================ */

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

th, td{
  padding:10px 12px;
  border-bottom:1px solid var(--ep-border-soft);
  text-align:left;
  white-space:nowrap;
}

th{
  font-weight:600;
  color:var(--ep-text-weak);
}

tbody > tr:hover > td:not(:has(table)){
  background:color-mix(in oklab, var(--ep-link) 10%, transparent);
}

.muted{ color:var(--ep-text-weak); }

/* Optional card wrapper */
.table-card{
  background:var(--ep-surface);
  border:1px solid var(--ep-border);
  border-radius:12px;
}

/* Header row above table */
.table-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--ep-border);
  background:color-mix(in oklab, var(--ep-surface) 92%, var(--ep-bg));
}

.table-card-title{
  font-size:14px;
  font-weight:650;
  color:var(--ep-text);
}

.table-card-subtitle{
  margin-top:2px;
  font-size:12px;
  color:var(--ep-text-weak);
}

.table-card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* ================================
   SCROLL + CLIPPING FRAME
================================ */

/* OUTER frame — clips rounded corners and row backgrounds */
.table-frame{
  position:relative;
  overflow:hidden;                 /* ✅ stops row bleed */
  border-radius:12px;
  border:1px solid var(--ep-border);
  background:var(--ep-surface);
}

/* INNER viewport — handles scrolling */
.table-scroll{
  position:relative;
  z-index:2;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter: stable both-edges; /* ✅ fixes macOS overlay scrollbar */

  /* inner visual edge */
  padding-right:12px;
}

.ep-mobile-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable both-edges;
}

/* Scrollable table */
.table-scroll table{
  min-width:760px;
  padding-right:12px;              /* stops table before fade */
}

/* Subtle right fade (purely visual) */
.table-frame::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:12px;
  height:100%;
  pointer-events:none;
  z-index:1;
  background:linear-gradient(
    to left,
    var(--ep-surface),
    color-mix(in oklab, var(--ep-surface) 20%, transparent)
  );
}

/* Your proven frame/scroll */
.table-frame{ overflow:hidden; position:relative; }
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-right:14px;
}
.table-scroll table{
  min-width:760px;
  padding-right:14px;
}
.table-frame::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width:18px; height:100%;
  pointer-events:none;
  background:linear-gradient(to left, var(--ep-surface), color-mix(in oklab, var(--ep-surface) 20%, transparent));
}

/* ================================
   10. BADGES / STATUS
================================ */

.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  border:1px solid var(--ep-border);
  background:var(--ep-surface-soft);
  color:var(--ep-text);
}

.badge.green{ border-color:#22c55e; color:#bbf7d0; }
.badge.red{ border-color:#b91c1c; color:#991b1b; }

.status-pill{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  line-height:1.2;
  font-weight:600;
  border:1px solid transparent;
}
.status-placed{ --ep-status-tone: var(--ep-status-draft); }
.status-accepted{ --ep-status-tone: var(--ep-status-approved); }
.status-in_transit{ --ep-status-tone: var(--ep-status-pending-review); }
.status-delivered{ --ep-status-tone: var(--ep-status-ready); }
.status-canceled{ --ep-status-tone: var(--ep-status-needs-adjustment); }
.status-placed,
.status-accepted,
.status-in_transit,
.status-delivered,
.status-canceled{
  background:color-mix(in oklab, var(--ep-status-tone) 18%, var(--ep-surface) 82%);
  color:color-mix(in oklab, var(--ep-status-tone) 80%, var(--ep-text) 20%);
  border-color:color-mix(in oklab, var(--ep-status-tone) 34%, var(--ep-border) 66%);
}

.tier-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  text-transform:capitalize;
}
.tier-retail{ background:color-mix(in oklab, var(--ep-surface) 92%, #fff); color:var(--ep-text-muted); }
.tier-friendly{ background:#dbeafe; color:#1d4ed8; }
.tier-employee{ background:#dcfce7; color:#166534; }

/* ================================
   11. MODALS (dark theme)
================================ */

.modal-backdrop{
  position:fixed;
  inset:0;
  background:var(--ep-overlay);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:18px;
  box-sizing:border-box;
}
.modal-backdrop.active{ display:flex; }

.modal-panel{
  background:var(--ep-surface);
  border-radius:12px;
  padding:16px 18px;
  width:100%;
  max-width:min(var(--ep-modal-max), calc(100vw - 36px));
  box-shadow:
    0 24px 60px rgba(2, 6, 23, 0.75),
    0 0 0 1px color-mix(in oklab, var(--ep-shadow-tint) 30%, transparent),
    0 0 28px color-mix(in oklab, var(--ep-shadow-tint) 16%, transparent);
  border:1px solid var(--ep-border);
  max-height:calc(100vh - 36px);
  overflow:auto;
}

/* Compatibility modal pattern support */
.modal{
  position:fixed;
  inset:0;
  background:var(--ep-overlay);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:18px;
  box-sizing:border-box;
}
.modal-content{
  background:var(--ep-surface);
  border-radius:12px;
  width:100%;
  max-width:min(var(--ep-modal-max), calc(100vw - 36px));
  box-shadow:
    0 24px 60px rgba(2, 6, 23, 0.75),
    0 0 0 1px color-mix(in oklab, var(--ep-shadow-tint) 30%, transparent),
    0 0 28px color-mix(in oklab, var(--ep-shadow-tint) 16%, transparent);
  border:1px solid var(--ep-border);
  max-height:calc(100vh - 36px);
  overflow:auto;
}

.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.modal-title{
  font-weight:600;
  font-size:15px;
  color:var(--ep-text);
}

.modal-close-btn{
  background:transparent;
  border:none;
  font-size:20px;
  cursor:pointer;
  color:var(--ep-text-weak);
}

.modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:8px;
}

/* Viewport-safe modal shell: keep the frame/actions on screen, scroll long bodies inside. */
.app-shell .content .modal-panel,
.app-shell .content .modal-content,
.app-shell .content .modal-card,
.app-shell .content .pr-modal,
.app-shell .content .ep-modal,
.app-shell .content .ep-modal-card,
.app-shell .content .co-modal-card,
.app-shell .content .ret-modal,
.app-shell .content .days-modal,
.app-shell .content .tp-modal-content,
.app-shell .content dialog[open]{
  box-sizing:border-box;
  max-height:calc(100vh - 36px) !important;
  max-height:calc(100dvh - 36px) !important;
  overscroll-behavior:contain;
}

.app-shell .content .modal-panel:has(> .modal-body),
.app-shell .content .modal-content:has(> .modal-body),
.app-shell .content .modal-card:has(> .modal-body),
.app-shell .content .pr-modal:has(> .pr-modal-body),
.app-shell .content .ep-modal:has(> .ep-modal-body),
.app-shell .content .ep-modal-card:has(> .ep-modal-body),
.app-shell .content .co-modal-card:has(> .co-modal-body),
.app-shell .content .ret-modal:has(> .modal-body),
.app-shell .content .days-modal:has(> .modal-body),
.app-shell .content .tp-modal-content:has(> .modal-body),
.app-shell .content dialog[open]:has(> .modal-body){
  display:flex;
  flex-direction:column;
  overflow:hidden !important;
}

.app-shell .content .modal-panel:has(> .modal-body) > .modal-body,
.app-shell .content .modal-content:has(> .modal-body) > .modal-body,
.app-shell .content .modal-card:has(> .modal-body) > .modal-body,
.app-shell .content .pr-modal:has(> .pr-modal-body) > .pr-modal-body,
.app-shell .content .ep-modal:has(> .ep-modal-body) > .ep-modal-body,
.app-shell .content .ep-modal-card:has(> .ep-modal-body) > .ep-modal-body,
.app-shell .content .co-modal-card:has(> .co-modal-body) > .co-modal-body,
.app-shell .content .ret-modal:has(> .modal-body) > .modal-body,
.app-shell .content .days-modal:has(> .modal-body) > .modal-body,
.app-shell .content .tp-modal-content:has(> .modal-body) > .modal-body,
.app-shell .content dialog[open]:has(> .modal-body) > .modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
}

#titles-modal .modal-panel{
  max-width:min(620px, calc(100vw - 36px));
  padding:12px 14px;
}
#titles-modal .form-grid{
  gap:10px !important;
}
#titles-modal #titles-list-wrap{
  max-height:140px !important;
}

/* ================================
   12. TEXT UTILITIES / FOOTER
================================ */

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

.error-text{
  color:#fecaca;
  font-size:12px;
  margin-top:6px;
}

.footer,
footer{
  text-align:center;
  font-size:11px;
  color:var(--ep-text-muted);
  padding:5px 0 7px;
  box-sizing:border-box;
}

.shell-footer-lane{
  width:100%;
  min-width:0;
  margin-top:auto;
  padding-top:10px;
}

.shell-footer-lane .footer{
  width:100%;
  margin:0 auto;
  border-top:1px solid var(--ep-border-soft);
  padding-top:6px;
}

body.ep-shell-fixed-chrome .shell-footer-lane{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  z-index:auto;
  height:auto;
  min-height:0;
  margin:0;
  padding:10px 0 max(4px, env(safe-area-inset-bottom));
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:transparent;
  border-top:0;
  flex:0 0 auto;
}

body.ep-shell-fixed-chrome .shell-footer-lane .footer{
  width:auto;
  max-width:100%;
  margin:0 auto;
  border-top:0;
  padding:0;
  background:transparent;
  color:color-mix(in srgb, var(--ep-text-muted) 88%, transparent);
}

/* ================================
   13. RESPONSIVE
================================ */

@media (max-width: 899px){
  /*
   * Wide tables and form controls must not set the intrinsic width of a
   * tablet/phone page. Tables keep their useful desktop column widths inside
   * a horizontal scroll frame; surrounding layout containers stay on-screen.
   */
  .content-inner :where(div, section, article, header, nav, form, fieldset){
    min-width:0;
    box-sizing:border-box;
  }

  header{
    padding:8px 10px;
    gap:6px;
    flex-wrap:nowrap;
  }
  .header-left .logo{
    display:none;
  }
  .header-left,
  .header-center,
  .header-right{
    min-width:0;
  }
  .header-left{
    flex:0 0 auto;
  }
  .header-center{
    order:0;
    flex:1 1 180px;
    min-width:0;
  }
  .header-search{
    width:100%;
    max-width:none;
  }
  .header-search-input{
    height:32px;
    padding:0 34px 0 10px;
    font-size:11px;
  }
  .header-right{
    flex:0 1 auto;
    justify-content:flex-end;
    gap:6px;
    overflow-x:auto;
    scrollbar-width:thin;
    padding-bottom:0;
  }
  .header-right > *{
    flex:0 0 auto;
  }
  .header-actions{
    gap:6px;
    flex-wrap:nowrap;
  }
  .header-actions .primary-btn,
  .header-actions .secondary-btn,
  .logout-btn,
  .account-menu-toggle{
    white-space:nowrap;
    font-size:11px;
    padding:5px 9px;
  }
  .user-info,
  .account-menu-labels,
  .account-menu-chevron{
    display:none;
  }
  .account-menu-toggle{
    min-height:34px;
    padding:3px;
  }
  .account-menu-avatar{
    width:26px;
    height:26px;
  }
  .account-menu-panel{
    position:fixed;
    top:calc(var(--header-h) + 8px);
    right:10px;
    width:min(320px, calc(100vw - 20px));
  }
  .header-search-kbd{
    display:none;
  }
}

@media (max-width: 1180px){
  .header-center{
    flex:1 1 220px;
  }
  .header-search{
    width:100%;
  }
  .header-search-input{
    height:34px;
    padding:0 34px 0 10px;
    font-size:11px;
  }
  .header-search-kbd{
    display:none;
  }
}

/* Equal-height shell controls; dropdown menu items keep their own sizing. */
#ep-shell-top-chrome :is(.nav-toggle, .header-search-toggle, .header-notification-link, .account-menu-toggle),
#ep-shell-top-chrome .header-actions > :is(.primary-btn, .secondary-btn),
#ep-shell-top-chrome .header-create-menu > button,
#ep-shell-top-chrome .footer-actions > a,
#ep-shell-top-chrome #btnSaveMain{
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  box-sizing:border-box;
  padding-top:0!important;
  padding-bottom:0!important;
  align-items:center;
  justify-content:center;
}
#ep-shell-top-chrome .footer-actions > a{display:inline-flex}
#ep-shell-top-chrome :is(.nav-toggle, .header-notification-link){width:40px;min-width:40px}
#ep-shell-top-chrome .header-search-input{height:40px!important;box-sizing:border-box}

/* Percentages refer to the header, not the leftover space between actions. */
@media (min-width: 641px){
  .header-center{
    flex:0 1 40%;
    max-width:40%;
    min-width:0;
    margin-inline:auto;
  }
  .header-search{
    width:100%;
    max-width:100%;
  }
}
@media (min-width: 641px) and (max-width: 1366px){
  .header-center{
    flex-basis:35%;
    max-width:35%;
  }
}

@media (max-width: 640px){
  .header-search-toggle{
    display:inline-flex;
    flex:0 0 auto;
  }
  .header-center{
    display:none;
  }
  body.mobile-search-open .header-center{
    display:flex;
    position:fixed;
    top:calc(var(--header-h) + 8px);
    left:10px;
    right:10px;
    z-index:96;
    overflow:visible;
  }
  body.mobile-search-open .header-search{
    width:100%;
    max-width:none;
    padding:12px;
    border-radius:16px;
    border:1px solid var(--ep-border);
    background:var(--ep-surface);
    box-shadow:0 22px 42px rgba(2,6,23,0.42);
  }
  body.mobile-search-open .header-search-input{
    height:36px;
    padding:0 36px 0 10px;
    font-size:12px;
  }
  body.mobile-search-open .header-search-kbd{
    display:inline-flex;
  }
  body.mobile-search-open .header-search-results{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    margin-top:8px;
  }
  .content{
    padding:12px 10px calc(20px + env(safe-area-inset-bottom));
  }
  .card{
    padding:12px 10px;
  }
  .page-wrapper{ margin:10px auto 30px; }
  .form-grid,
  .form-grid.locked{
    grid-template-columns:1fr;
  }
  .filters-row input[type="text"],
  .filters-row select,
  .search-input{
    min-width:0;
    width:100%;
  }
  .modal-backdrop,
  .modal{
    padding:10px;
  }
  .modal-panel,
  .modal-content{
    max-width:100%;
    border-radius:10px;
    max-height:calc(100vh - 20px);
    max-height:calc(100dvh - 20px);
  }
  .ep-mobile-table-wrap table{
    min-width:640px;
  }
  th, td{
    padding:8px 9px;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .split-menu{
    min-width:160px;
    max-width:88vw;
  }
}

@media (max-width: 520px){
  .content{
    padding:10px 8px calc(16px + env(safe-area-inset-bottom));
  }
  .card{
    padding:12px 9px;
  }
  .filters-row{
    gap:8px;
  }
  .filters-row input[type="text"],
  .filters-row select,
  .search-input,
  .form-group input,
  .form-group select,
  .form-group textarea{
    min-width:0;
    width:100%;
  }
  .modal-backdrop,
  .modal{
    padding:8px;
  }
  .table-scroll table,
  .ep-mobile-table-wrap table{
    min-width:620px;
  }
}

/* ================================
   14. (OPTIONAL) MARKETING / HERO
================================ */

.hero{
  background:linear-gradient(to right,var(--ep-surface),var(--ep-surface-quiet));
  color:var(--ep-text);
  padding:100px 20px;
  text-align:center;
}

.button{
  background:#6c5ce7;
  padding:12px 24px;
  border-radius:6px;
  color:white;
  font-size:16px;
  text-decoration:none;
  display:inline-block;
  margin-top:20px;
}

#how-it-works,
#features,
#tiers,
#store,
#audience{
  padding:60px 20px;
  max-width:1100px;
  margin:auto;
}

.steps,
.feature-grid,
.tiers-grid,
.product-grid,
.audience-grid{
  display:grid;
  gap:20px;
}
/* ================================
   ACCESS CONTROL MODAL (Roles + Permissions)
   Scoped to #roles-modal so other modals are unchanged.
================================ */

/* Make this modal wider than default .modal-panel */
#roles-modal .access-modal-panel{
  width: 1300px;
  max-width: 96vw;
  max-height: 90vh;
}

/* Two-column layout spacing (uses existing split-2/split-roles markup) */
#roles-modal .access-modal-body{
  margin-top: 8px;
}

/* Permissions header */
#roles-modal .access-perm-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#roles-modal .access-perm-title{ font-weight:650; }
#roles-modal .access-perm-sub{ margin-bottom:8px; }

/* Permissions scroll area (right side) */
#roles-modal .access-perm-scroll{
  max-height: 250px;
  overflow:auto;
}

/* Role list scroll area (bottom table) */
#roles-modal .access-roles-scroll{
  max-height: 160px;
  overflow-y:auto;
  overflow-x:hidden;
}

/* Compact role rows so the left table feels tighter */
#roles-modal #roles-tbody tr{ cursor:pointer; }
#roles-modal #roles-tbody td{
  padding: 8px 12px; /* smaller than global table */
}

/* Permission rows: show only the human label */
#roles-modal .perm-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 6px 8px;
  border-radius: 10px;
}
#roles-modal .perm-item:hover{ background: color-mix(in oklab, var(--ep-surface) 90%, transparent); }
#roles-modal .perm-label{ font-size: 13px; }

#roles-modal .access-perm-page{
  display:grid;
  gap:8px;
}

#roles-modal .access-catalog-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

#roles-modal .access-catalog-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:7px;
}

#roles-modal .access-catalog-tools input[type="search"]{
  width:210px;
  min-height:30px;
  padding:5px 9px;
  border:1px solid var(--ep-border-soft);
  border-radius:9px;
  background:var(--ep-surface);
  color:var(--ep-text);
  font-size:12px;
}

#roles-modal .access-catalog-help{
  margin:0 0 8px;
  font-size:12px;
}

#roles-modal .access-perm-page-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px;
  border:1px solid var(--ep-border-soft);
  border-radius:12px;
  background:var(--ep-surface-soft);
}

#roles-modal .access-perm-section{
  border:1px solid var(--ep-border-soft);
  border-radius:12px;
  background:var(--ep-surface);
  overflow:hidden;
}

#roles-modal .access-section-toggle,
#roles-modal .access-section-static{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:8px 9px;
  color:var(--ep-text);
  background:color-mix(in srgb, var(--ep-surface-soft) 82%, transparent);
  border:0;
  text-align:left;
}

#roles-modal .access-section-toggle{
  cursor:pointer;
}

#roles-modal .access-section-toggle:hover{
  background:color-mix(in srgb, var(--ep-link) 10%, var(--ep-surface-soft));
}

#roles-modal .access-section-toggle.is-open .access-group-caret{
  transform:rotate(90deg);
}

#roles-modal .access-section-body{
  padding:6px;
}

#roles-modal .access-section-body[hidden]{
  display:none !important;
}

#roles-modal .access-section-meta{
  display:block;
  margin-top:1px;
  font-size:11px;
}

#roles-modal .access-perm-table{
  width:100%;
  min-width:640px;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}

#roles-modal .access-perm-table th,
#roles-modal .access-perm-table td{
  padding:7px 8px;
  border-bottom:1px solid var(--ep-border-soft);
  vertical-align:middle;
}

#roles-modal .access-perm-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--ep-surface);
  color:var(--ep-text-muted);
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:0;
}

#roles-modal .access-perm-table th:not(:first-child),
#roles-modal .access-perm-cell{
  text-align:center;
}

#roles-modal .access-perm-table th:first-child{
  width:34%;
  text-align:left;
}

#roles-modal .access-perm-module-row:hover{
  background:color-mix(in srgb, var(--ep-link) 6%, transparent);
}

#roles-modal .access-perm-empty{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  color:var(--ep-text-muted);
  font-size:11px;
}

#roles-modal .access-perm-cell-stack{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px;
  min-width:0;
}

#roles-modal .access-perm-cell-stack.is-multi{
  align-items:stretch;
}

#roles-modal .access-group-caret{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:18px;
  height:18px;
  border-radius:999px;
  color:var(--ep-text-muted);
  background:color-mix(in srgb, var(--ep-surface-soft) 78%, transparent);
  border:1px solid var(--ep-border-soft);
  font-size:11px;
  transition:transform .16s ease;
}

#roles-modal .access-module-name{
  display:block;
  font-size:13px;
  font-weight:800;
}

#roles-modal .access-module-key{
  display:none;
}

#roles-modal .access-perm-check{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:0;
  min-height:26px;
  padding:4px 7px;
  border:1px solid color-mix(in srgb, var(--ep-border-soft) 88%, transparent);
  border-radius:8px;
  background:color-mix(in srgb, var(--ep-surface-soft) 54%, transparent);
  cursor:pointer;
}

#roles-modal .access-perm-check:hover{
  background:color-mix(in srgb, var(--ep-link) 11%, transparent);
}

#roles-modal .access-perm-check input,
#roles-modal .access-perm-detail-item input{
  width:14px;
  height:14px;
  margin:0;
  accent-color:var(--ep-link);
}

#roles-modal .access-perm-check span{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  line-height:1.2;
  font-weight:750;
  color:var(--ep-text);
}

#roles-modal .access-detail-section-title{
  margin-bottom:7px;
  font-size:10px;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ep-text-muted);
}

#roles-modal .access-perm-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 12px;
}

#roles-modal .access-perm-subsection{
  display:grid;
  gap:6px;
}

#roles-modal .access-perm-subsection + .access-perm-subsection{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--ep-border-soft);
}

#roles-modal .access-perm-list{
  display:grid;
  gap:6px;
}

#roles-modal .access-perm-list-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto;
  gap:10px;
  align-items:center;
  padding:8px;
  border:1px solid var(--ep-border-soft);
  border-radius:11px;
  background:color-mix(in srgb, var(--ep-surface-soft) 44%, transparent);
}

#roles-modal .access-perm-list-row.is-selected{
  border-color:color-mix(in srgb, var(--ep-link) 38%, var(--ep-border-soft));
  background:color-mix(in srgb, var(--ep-link) 8%, var(--ep-surface));
}

#roles-modal .access-perm-list-check{
  display:flex;
  align-items:flex-start;
  gap:9px;
  min-width:0;
  margin:0;
  cursor:pointer;
}

#roles-modal .access-perm-list-check input{
  width:15px;
  height:15px;
  margin-top:2px;
  accent-color:var(--ep-link);
}

#roles-modal .access-perm-list-text{
  display:grid;
  gap:2px;
  min-width:0;
}

#roles-modal .access-perm-list-text small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#roles-modal .access-perm-row-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
}

#roles-modal .access-perm-row-check{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:88px;
  margin:0;
  color:var(--ep-text-muted);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
}

#roles-modal .access-perm-row-check input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--ep-link);
}

#roles-modal .access-perm-chips{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:4px;
}

#roles-modal .access-perm-chip{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--ep-border-soft);
  color:var(--ep-text-muted);
  font-size:10px;
  font-weight:750;
  line-height:1;
  white-space:nowrap;
}

#roles-modal .access-perm-chip.is-sensitive{
  color:var(--ep-warning, #b7791f);
  border-color:color-mix(in srgb, var(--ep-warning, #b7791f) 42%, var(--ep-border-soft));
  background:color-mix(in srgb, var(--ep-warning, #b7791f) 9%, transparent);
}

#roles-modal .access-perm-chip.is-approval{
  color:var(--ep-link);
  border-color:color-mix(in srgb, var(--ep-link) 38%, var(--ep-border-soft));
  background:color-mix(in srgb, var(--ep-link) 9%, transparent);
}

#roles-modal .access-approval-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:24px;
  padding:3px 7px;
  border:1px solid color-mix(in srgb, var(--ep-link) 30%, var(--ep-border-soft));
  border-radius:999px;
  color:var(--ep-text);
  background:color-mix(in srgb, var(--ep-link) 8%, transparent);
  font-size:11px;
  font-weight:750;
  white-space:nowrap;
  cursor:pointer;
}

#roles-modal .access-approval-toggle.is-disabled{
  opacity:.55;
  cursor:not-allowed;
}

#roles-modal .access-approval-toggle input{
  width:14px;
  height:14px;
  margin:0;
  accent-color:var(--ep-link);
}

#roles-modal .access-perm-detail-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
  padding:7px;
  border-radius:10px;
  border:1px solid transparent;
  cursor:pointer;
}

#roles-modal .access-perm-detail-item:hover{
  background:color-mix(in srgb, var(--ep-link) 8%, transparent);
  border-color:color-mix(in srgb, var(--ep-link) 18%, transparent);
}

#roles-modal .access-perm-detail-item.is-advanced{
  background:color-mix(in srgb, var(--ep-accent) 8%, transparent);
  border-color:color-mix(in srgb, var(--ep-accent) 16%, transparent);
}

#roles-modal .access-detail-name{
  display:block;
  font-size:12px;
  font-weight:650;
}

@media (max-width:700px){
  #roles-modal .access-catalog-toolbar{
    display:grid;
  }

  #roles-modal .access-catalog-tools{
    justify-content:flex-start;
  }

  #roles-modal .access-catalog-tools input[type="search"]{
    width:100%;
  }

  #roles-modal .access-perm-list-row{
    grid-template-columns:minmax(0, 1fr);
  }

  #roles-modal .access-perm-row-meta,
  #roles-modal .access-perm-chips{
    justify-content:flex-start;
  }

  #roles-modal .access-perm-detail-grid{
    grid-template-columns:minmax(0, 1fr);
  }
}

/* 2026 access-profile modal refresh. Overrides the older scoped rules above. */
#roles-modal .access-modal-panel{
  width:min(1120px, 94vw);
  max-width:94vw;
  max-height:90vh;
  padding:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#roles-modal .access-modal-header{
  margin:0;
  padding:14px 16px;
  border-bottom:1px solid var(--ep-border-soft);
}

#roles-modal .access-modal-header .modal-title{
  font-size:17px;
  font-weight:800;
}

#roles-modal .access-modal-subtitle{
  margin-top:3px;
  color:var(--ep-text-muted);
  font-size:12px;
  line-height:1.35;
}

#roles-modal .access-modal-status{
  margin:10px 16px 0;
  padding:9px 11px;
  border:1px solid var(--ep-border-soft);
  border-radius:8px;
  background:color-mix(in srgb, var(--ep-link) 9%, var(--ep-surface-soft));
  color:var(--ep-text);
  font-size:12px;
  font-weight:650;
}

#roles-modal .access-modal-status[hidden]{
  display:none !important;
}

#roles-modal .access-modal-status.is-success{
  border-color:color-mix(in srgb, #16a34a 44%, var(--ep-border-soft));
  background:color-mix(in srgb, #16a34a 12%, var(--ep-surface-soft));
}

#roles-modal .access-modal-status.is-error{
  border-color:color-mix(in srgb, #dc2626 48%, var(--ep-border-soft));
  background:color-mix(in srgb, #dc2626 11%, var(--ep-surface-soft));
}

#roles-modal .access-modal-grid{
  display:grid;
  grid-template-columns:minmax(240px, 30%) minmax(0, 1fr);
  gap:12px;
  flex:1 1 auto;
  min-height:0;
  padding:12px 16px;
  overflow:hidden;
}

#roles-modal .access-profile-list-pane,
#roles-modal .access-permissions-pane,
#roles-modal .access-profile-detail-pane{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid var(--ep-border-soft);
  border-radius:8px;
  background:color-mix(in srgb, var(--ep-surface-soft) 78%, var(--ep-surface));
}

#roles-modal .access-pane-head,
#roles-modal .access-perm-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex:0 0 auto;
  padding:11px 12px;
  border-bottom:1px solid var(--ep-border-soft);
  background:color-mix(in srgb, var(--ep-surface) 72%, transparent);
}

#roles-modal .access-pane-title,
#roles-modal .access-perm-title{
  color:var(--ep-text);
  font-size:13px;
  font-weight:800;
  line-height:1.2;
}

#roles-modal .access-pane-subtitle{
  margin-top:2px;
  color:var(--ep-text-muted);
  font-size:11px;
  line-height:1.35;
}

#roles-modal .access-count-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 8px;
  border:1px solid color-mix(in srgb, var(--ep-link) 35%, var(--ep-border-soft));
  border-radius:999px;
  background:color-mix(in srgb, var(--ep-link) 10%, transparent);
  color:var(--ep-text);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

#roles-modal .access-roles-scroll,
#roles-modal .access-perm-scroll{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow:auto;
}

#roles-modal .access-roles-scroll{
  border:0;
}

#roles-modal .access-profile-bottom-editor{
  display:grid;
  gap:7px;
  flex:0 0 auto;
  padding:10px;
  border-top:1px solid var(--ep-border-soft);
  background:color-mix(in srgb, var(--ep-surface) 72%, transparent);
}

#roles-modal .access-profile-bottom-editor label{
  color:var(--ep-text-muted);
  font-size:10px;
  font-weight:850;
  letter-spacing:0;
  text-transform:uppercase;
}

#roles-modal .access-profile-bottom-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 34px 34px;
  gap:7px;
  align-items:center;
}

#roles-modal .access-profile-bottom-row input{
  width:100%;
  min-width:0;
}

#roles-modal .access-profile-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid var(--ep-border-soft);
  border-radius:8px;
  background:color-mix(in srgb, var(--ep-surface-soft) 84%, transparent);
  color:var(--ep-text);
  font-size:18px;
  font-weight:850;
  line-height:1;
  cursor:pointer;
}

#roles-modal .access-profile-icon-btn:hover{
  border-color:color-mix(in srgb, var(--ep-link) 36%, var(--ep-border-soft));
  background:color-mix(in srgb, var(--ep-link) 12%, var(--ep-surface-soft));
}

#roles-modal .access-profile-icon-btn.is-danger{
  color:#fecaca;
}

#roles-modal .access-roles-table{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}

#roles-modal .access-roles-table th{
  padding:8px 10px;
  color:var(--ep-text-muted);
  font-size:10px;
  font-weight:850;
  letter-spacing:0;
  text-transform:uppercase;
  border-bottom:1px solid var(--ep-border-soft);
}

#roles-modal .access-roles-table th:last-child,
#roles-modal .access-roles-table td:last-child{
  width:108px;
}

#roles-modal #roles-tbody tr{
  cursor:pointer;
  outline:none;
}

#roles-modal #roles-tbody tr:hover,
#roles-modal #roles-tbody tr:focus{
  background:color-mix(in srgb, var(--ep-link) 7%, transparent);
}

#roles-modal #roles-tbody tr.row-active{
  background:color-mix(in srgb, var(--ep-link) 12%, var(--ep-surface));
  box-shadow:inset 3px 0 0 var(--ep-link);
}

#roles-modal #roles-tbody td{
  padding:10px;
  border-bottom:1px solid var(--ep-border-soft);
  vertical-align:top;
}

#roles-modal .access-role-name{
  overflow:hidden;
  color:var(--ep-text);
  font-size:13px;
  font-weight:800;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#roles-modal .access-role-key,
#roles-modal .access-role-desc,
#roles-modal .access-role-count{
  overflow:hidden;
  color:var(--ep-text-muted);
  font-size:11px;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#roles-modal .access-role-desc{
  margin-top:3px;
}

#roles-modal .access-role-pill{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:20px;
  padding:2px 7px;
  border:1px solid var(--ep-border-soft);
  border-radius:999px;
  color:var(--ep-text-muted);
  font-size:10px;
  font-weight:850;
  line-height:1;
  white-space:nowrap;
}

#roles-modal .access-role-pill.is-active{
  color:#86efac;
  border-color:color-mix(in srgb, #16a34a 45%, var(--ep-border-soft));
  background:color-mix(in srgb, #16a34a 12%, transparent);
}

#roles-modal .access-role-pill.is-template{
  color:var(--ep-link);
  border-color:color-mix(in srgb, var(--ep-link) 38%, var(--ep-border-soft));
  background:color-mix(in srgb, var(--ep-link) 10%, transparent);
}

#roles-modal .access-role-count{
  display:block;
  margin-top:5px;
}

#roles-modal .access-perm-scroll{
  padding:10px;
}

#roles-modal .access-catalog-toolbar{
  align-items:flex-start;
  margin:0 0 10px;
  padding:9px;
  border:1px solid var(--ep-border-soft);
  border-radius:8px;
  background:color-mix(in srgb, var(--ep-surface) 68%, transparent);
}

#roles-modal .access-catalog-kpis{
  display:grid;
  gap:2px;
  min-width:0;
}

#roles-modal .access-catalog-title{
  overflow:hidden;
  color:var(--ep-text);
  font-size:13px;
  font-weight:850;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#roles-modal .access-catalog-tools input[type="search"]{
  width:220px;
  border-radius:8px;
}

#roles-modal .access-catalog-help{
  margin:0 0 10px;
  color:var(--ep-text-muted);
  font-size:11px;
  line-height:1.35;
}

#roles-modal .access-empty-state{
  display:grid;
  place-items:center;
  align-content:center;
  gap:6px;
  min-height:180px;
  padding:22px;
  text-align:center;
  color:var(--ep-text-muted);
}

#roles-modal .access-empty-state strong{
  color:var(--ep-text);
  font-size:14px;
}

#roles-modal .access-empty-state span{
  max-width:360px;
  font-size:12px;
  line-height:1.4;
}

#roles-modal .access-perm-section,
#roles-modal .access-perm-list-row{
  border-radius:8px;
}

#roles-modal .access-section-toggle{
  padding:9px 10px;
}

#roles-modal .access-perm-list-row{
  padding:9px;
}

#roles-modal .access-profile-summary{
  display:grid;
  gap:3px;
  margin:12px;
  padding:10px;
  border:1px solid var(--ep-border-soft);
  border-radius:8px;
  background:color-mix(in srgb, var(--ep-link) 8%, transparent);
  color:var(--ep-text-muted);
  font-size:12px;
  line-height:1.35;
}

#roles-modal .access-profile-summary strong{
  color:var(--ep-text);
  font-size:13px;
}

#roles-modal .access-profile-summary small{
  color:var(--ep-text-muted);
  font-size:11px;
}

#roles-modal .access-profile-detail-pane .form-group{
  margin:0 12px 12px;
}

#roles-modal .access-profile-detail-pane input,
#roles-modal .access-profile-detail-pane textarea,
#roles-modal .access-profile-detail-pane select{
  width:100%;
}

#roles-modal .access-modal-footer{
  align-items:center;
  flex:0 0 auto;
  margin:0;
  padding:12px 16px;
  border-top:1px solid var(--ep-border-soft);
}

#roles-modal .access-footer-spacer{
  flex:1 1 auto;
}

#roles-modal .access-modal-footer .btn{
  white-space:nowrap;
}

@media (max-width:1180px){
  #roles-modal .access-modal-grid{
    grid-template-columns:minmax(230px, 30%) minmax(0, 1fr);
    overflow:auto;
    align-content:start;
  }

  #roles-modal .access-profile-detail-pane{
    grid-column:1 / -1;
    min-height:280px;
  }
}

@media (max-width:780px){
  #roles-modal .access-modal-panel{
    width:96vw;
    max-height:94vh;
  }

  #roles-modal .access-modal-grid{
    display:block;
    overflow:auto;
  }

  #roles-modal .access-profile-list-pane,
  #roles-modal .access-permissions-pane,
  #roles-modal .access-profile-detail-pane{
    min-height:260px;
    margin-bottom:12px;
  }

  #roles-modal .access-perm-scroll{
    max-height:62vh;
  }

  #roles-modal .access-catalog-toolbar{
    display:grid;
  }

  #roles-modal .access-catalog-tools{
    justify-content:flex-start;
  }

  #roles-modal .access-catalog-tools input[type="search"]{
    width:100%;
  }

  #roles-modal .access-modal-footer{
    flex-wrap:wrap;
  }

  #roles-modal .access-footer-spacer{
    display:none;
  }
}
/* Reduced access-profile assignment experience. */
#roles-modal{
  z-index:3000;
}

#roles-modal [hidden]{
  display:none !important;
}

#roles-modal .access-modal-panel{
  width:min(1080px, 94vw);
  height:min(820px, 90vh);
}

#roles-modal .access-modal-heading{
  min-width:0;
}

#roles-modal .access-modal-grid{
  grid-template-columns:minmax(270px, 32%) minmax(0, 1fr);
  gap:10px;
  padding:10px 14px;
}

#roles-modal .access-profile-list-pane,
#roles-modal .access-permissions-pane{
  background:var(--ep-surface);
}

#roles-modal .access-profile-cards{
  display:grid;
  align-content:start;
  gap:6px;
  flex:1 1 auto;
  min-height:0;
  padding:8px;
  overflow:auto;
}

#roles-modal .access-profile-card{
  display:grid;
  grid-template-columns:34px minmax(0, 1fr) auto;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:7px;
  border:1px solid transparent;
  border-radius:8px;
  background:color-mix(in srgb, var(--ep-surface-soft) 72%, transparent);
}

#roles-modal .access-profile-card.is-inspected{
  border-color:color-mix(in srgb, var(--ep-link) 48%, var(--ep-border-soft));
  background:color-mix(in srgb, var(--ep-link) 9%, var(--ep-surface-soft));
}

#roles-modal .access-profile-card.is-assigned{
  box-shadow:inset 3px 0 0 var(--ep-accent);
}

#roles-modal .access-assignment-toggle{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  border:1px solid var(--ep-border);
  border-radius:7px;
  background:transparent;
  color:#03110a;
  cursor:pointer;
}

#roles-modal .access-assignment-toggle[aria-pressed="true"]{
  border-color:var(--ep-accent);
  background:var(--ep-accent);
}

#roles-modal .access-assignment-toggle span{
  font-size:14px;
  font-weight:900;
  line-height:1;
}

#roles-modal .access-profile-inspect{
  display:grid;
  grid-template-columns:38px minmax(0, 1fr);
  align-items:center;
  gap:9px;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

#roles-modal .access-profile-initials{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid color-mix(in srgb, var(--ep-link) 28%, var(--ep-border-soft));
  border-radius:9px;
  background:color-mix(in srgb, var(--ep-link) 12%, var(--ep-surface-soft));
  color:var(--ep-text);
  font-size:11px;
  font-weight:900;
}

#roles-modal .access-profile-copy{
  display:grid;
  gap:2px;
  min-width:0;
}

#roles-modal .access-profile-copy strong{
  overflow:hidden;
  color:var(--ep-text);
  font-size:12px;
  font-weight:800;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#roles-modal .access-profile-copy small{
  display:-webkit-box;
  overflow:hidden;
  color:var(--ep-text-muted);
  font-size:10px;
  line-height:1.3;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

#roles-modal .access-protected-pill{
  padding:3px 6px;
  border:1px solid color-mix(in srgb, #f59e0b 38%, var(--ep-border-soft));
  border-radius:999px;
  color:#fbbf24;
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
}

#roles-modal .access-profile-create-wrap{
  flex:0 0 auto;
  padding:8px;
  border-top:1px solid var(--ep-border-soft);
}

#roles-modal .access-create-profile-btn{
  width:100%;
  min-height:34px;
  font-size:11px;
}

#roles-modal .access-permissions-pane{
  position:relative;
}

#roles-modal .access-profile-draft{
  flex:0 0 auto;
  padding:10px 12px;
  border-bottom:1px solid var(--ep-border-soft);
  background:color-mix(in srgb, var(--ep-link) 7%, var(--ep-surface-soft));
}

#roles-modal .access-profile-draft[hidden]{
  display:none !important;
}

#roles-modal .access-profile-draft > div:first-child{
  display:grid;
  gap:2px;
}

#roles-modal .access-profile-draft strong{
  color:var(--ep-text);
  font-size:12px;
  font-weight:850;
}

#roles-modal .access-profile-draft span{
  color:var(--ep-text-muted);
  font-size:10px;
}

#roles-modal .access-draft-fields{
  display:grid;
  grid-template-columns:90px minmax(0, 1fr) 104px minmax(0, 1fr);
  align-items:center;
  gap:7px;
  margin-top:8px;
}

#roles-modal .access-draft-fields label{
  margin:0;
  color:var(--ep-text-muted);
  font-size:10px;
  font-weight:750;
}

#roles-modal .access-draft-fields input{
  min-width:0;
  height:32px;
  padding:6px 8px;
  font-size:11px;
}

#roles-modal .access-perm-scroll{
  padding:8px;
}

#roles-modal .access-section-list{
  display:grid;
  align-content:start;
  gap:6px;
}

#roles-modal .access-section-card{
  overflow:hidden;
  border:1px solid var(--ep-border-soft);
  border-radius:8px;
  background:color-mix(in srgb, var(--ep-surface-soft) 64%, transparent);
}

#roles-modal .access-section-card.is-open{
  border-color:color-mix(in srgb, var(--ep-link) 34%, var(--ep-border-soft));
}

#roles-modal .access-section-row{
  display:grid;
  grid-template-columns:34px minmax(0, 1fr) auto 18px;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:48px;
  padding:7px 10px;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

#roles-modal .access-section-row:hover{
  background:color-mix(in srgb, var(--ep-link) 6%, transparent);
}

#roles-modal .access-section-code{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:8px;
  background:color-mix(in srgb, var(--ep-link) 13%, var(--ep-surface-soft));
  color:var(--ep-link);
  font-size:10px;
  font-weight:900;
}

#roles-modal .access-section-name{
  color:var(--ep-text);
  font-size:12px;
  font-weight:800;
}

#roles-modal .access-section-state{
  min-width:42px;
  color:var(--ep-text-muted);
  font-size:10px;
  font-weight:800;
  text-align:right;
}

#roles-modal .access-section-state.is-on{
  color:#86efac;
}

#roles-modal .access-section-state.is-mixed{
  color:#fbbf24;
}

#roles-modal .access-section-caret{
  color:var(--ep-text-muted);
  font-size:13px;
  transition:transform .16s ease;
}

#roles-modal .access-section-card.is-open .access-section-caret{
  transform:rotate(180deg);
}

#roles-modal .access-section-permissions{
  border-top:1px solid var(--ep-border-soft);
}

#roles-modal .access-permission-row{
  display:grid;
  grid-template-columns:26px minmax(0, 1fr) auto;
  align-items:center;
  gap:9px;
  width:100%;
  padding:9px 10px;
  border:0;
  border-bottom:1px solid var(--ep-border-soft);
  background:var(--ep-surface);
  color:inherit;
  text-align:left;
  cursor:pointer;
}

#roles-modal .access-permission-row:last-child{
  border-bottom:0;
}

#roles-modal .access-permission-approval{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px 12px 48px;
  font-size:13px;
}
#roles-modal .access-permission-approval input{width:18px;height:18px;}

#roles-modal .access-permission-row:hover:not(:disabled){
  background:color-mix(in srgb, var(--ep-link) 6%, var(--ep-surface));
}

#roles-modal .access-permission-row:disabled{
  cursor:default;
}

#roles-modal .access-permission-check{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:1px solid var(--ep-border-soft);
  border-radius:7px;
  color:var(--ep-text-muted);
  font-size:11px;
  font-weight:900;
}

#roles-modal .access-permission-row.is-enabled .access-permission-check{
  border-color:color-mix(in srgb, var(--ep-accent) 70%, var(--ep-border-soft));
  background:color-mix(in srgb, var(--ep-accent) 18%, transparent);
  color:#86efac;
}

#roles-modal .access-permission-copy{
  display:grid;
  gap:2px;
  min-width:0;
}

#roles-modal .access-permission-copy strong{
  color:var(--ep-text);
  font-size:11px;
  font-weight:800;
  line-height:1.3;
}

#roles-modal .access-permission-copy small{
  color:var(--ep-text-muted);
  font-size:10px;
  line-height:1.35;
}

#roles-modal .access-permission-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  max-width:180px;
}

#roles-modal .access-permission-meta b,
#roles-modal .access-perm-badge{
  padding:3px 6px;
  border:1px solid var(--ep-border-soft);
  border-radius:999px;
  color:var(--ep-text-muted);
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
}

#roles-modal .access-permission-row.is-enabled .access-permission-meta b{
  color:#86efac;
  border-color:color-mix(in srgb, var(--ep-accent) 38%, var(--ep-border-soft));
}

#roles-modal .access-perm-badge.is-sensitive{
  color:#fbbf24;
}

#roles-modal .access-perm-badge.is-audit{
  color:#c4b5fd;
}

#roles-modal .access-modal-footer{
  display:flex;
  justify-content:space-between;
  gap:12px;
}

#roles-modal .access-footer-note{
  align-self:center;
  color:var(--ep-text-muted);
  font-size:10px;
}

#roles-modal .access-footer-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-left:auto;
}

.employee-access-field{
  min-width:0;
}

.employee-access-summary{
  display:grid;
  gap:6px;
  min-height:42px;
  padding:7px;
  border:1px solid var(--ep-border-soft);
  border-radius:8px;
  background:color-mix(in srgb, var(--ep-surface-soft) 72%, transparent);
}

.employee-access-summary.is-empty{
  align-content:center;
  color:var(--ep-text-muted);
  font-size:11px;
}

.employee-access-summary-row{
  display:grid;
  grid-template-columns:30px minmax(0, 1fr);
  align-items:center;
  gap:8px;
  padding:5px;
  border-radius:7px;
  background:color-mix(in srgb, var(--ep-surface) 70%, transparent);
}

.employee-access-summary-row > span:first-child{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:7px;
  background:color-mix(in srgb, var(--ep-link) 12%, var(--ep-surface-soft));
  color:var(--ep-link);
  font-size:9px;
  font-weight:900;
}

.employee-access-summary-row > span:last-child{
  display:grid;
  gap:1px;
  min-width:0;
}

.employee-access-summary-row strong{
  color:var(--ep-text);
  font-size:11px;
  font-weight:800;
}

.employee-access-summary-row small{
  overflow:hidden;
  color:var(--ep-text-muted);
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.employee-access-hidden-selects{
  display:none !important;
}

@media (max-width:780px){
  #roles-modal .access-modal-panel{
    height:94vh;
  }

  #roles-modal .access-modal-grid{
    display:grid;
    grid-template-columns:1fr;
    overflow:auto;
  }

  #roles-modal .access-profile-list-pane{
    min-height:260px;
    max-height:42vh;
  }

  #roles-modal .access-permissions-pane{
    min-height:420px;
  }

  #roles-modal .access-draft-fields{
    grid-template-columns:1fr;
  }

  #roles-modal .access-permission-meta{
    align-items:flex-end;
    flex-direction:column;
  }

  #roles-modal .access-perm-badge{
    display:none;
  }
}

/* Make footer span full tier width and push content to the right */
.rp-tier-footer{
  width: 100%;
  display: flex;
  justify-content: flex-end;

  /* If a parent uses CSS grid, this makes it span all columns */
  grid-column: 1 / -1;
  justify-self: end;

  margin-top: 12px;
}

/* IMPORTANT: override any "button is 100% width" styling */
.rp-tier-footer .btn,
.rp-tier-footer button{
  width: auto !important;
  min-width: 120px;   /* optional: keeps it looking like a real button */
}

/* ================================
   NAV ACCORDIONS (Step 1)
   ================================ */
.nav-accordion{ margin-top: 6px; }
.nav-accordion-header{ position: relative; }
.nav-accordion-toggle{
  position:absolute;
  top:0;
  right:0;
  width:52px;
  height:100%;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:3; /* ensure it sits above the link */
}
.nav-accordion-toggle::before{
  content:'›';
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  color:var(--ep-text-weak);
  font-size:18px;
  line-height:1;
  transition:transform 160ms ease, color 160ms ease;
}
.nav-accordion.open .nav-accordion-toggle::before{
  transform:translateY(-50%) rotate(90deg);
  color:var(--ep-text);
}

.nav-accordion .nav-substack{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height 220ms ease, opacity 160ms ease;
}
.nav-accordion.open .nav-substack{
  max-height:360px;
  opacity:1;
}

/* badges used in accordions */
.ep-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 7px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.2px;
  background:color-mix(in oklab, var(--ep-link) 18%, transparent);
  border:1px solid color-mix(in oklab, var(--ep-link) 35%, transparent);
  color:color-mix(in oklab, var(--ep-link) 78%, #fff);
}

/* ================================
   THEME COVERAGE COMPATIBILITY
   Bridges older page-level styles that still hardcode dark shell colors.
   These rules are intentionally scoped to the authenticated app shell.
   ================================ */
.app-shell .content{
  background:transparent !important;
  color:var(--ep-text) !important;
}

.app-shell .content .panel,
.app-shell .content .ep-card,
.app-shell .content .section-card,
.app-shell .content .feed-card,
.app-shell .content .comment-card,
.app-shell .content .module-card,
.app-shell .content .calendar-shell,
.app-shell .content .kpi-card,
.app-shell .content .stat,
.app-shell .content .pr-card,
.app-shell .content .pr-modal,
.app-shell .content .notes-card,
.app-shell .content .head-stat,
.app-shell .content .kv,
.app-shell .content .mock-card,
.app-shell .content .ta-perm-wrap,
.app-shell .content .ep-kpi-card,
.app-shell .content .ep-kpi,
.app-shell .content .supplier-name + .head-grid .head-stat,
.app-shell .content .draft-note.compact{
  background:var(--ep-surface-soft) !important;
  border-color:var(--ep-border-soft) !important;
  color:var(--ep-text) !important;
}

.app-shell .content .modal-card,
.app-shell .content .pr-modal,
.app-shell .content .modal-content,
.app-shell .content #residualAssignModal .panel,
.app-shell .content .mock-modal-card{
  background:var(--ep-surface) !important;
  border-color:var(--ep-border) !important;
  color:var(--ep-text) !important;
}

.app-shell .content .modal-backdrop,
.app-shell .content .pr-modal-backdrop,
.app-shell .content #residualAssignModal,
.app-shell .content .mock-modal,
.app-shell .content .modal{
  background:var(--ep-overlay) !important;
}

.app-shell .content .input,
.app-shell .content .select,
.app-shell .content .scope-select,
.app-shell .content .modal-text,
.app-shell .content .supplier-credit-box,
.app-shell .content input[type="text"],
.app-shell .content input[type="email"],
.app-shell .content input[type="password"],
.app-shell .content input[type="number"],
.app-shell .content input[type="date"],
.app-shell .content input[type="time"],
.app-shell .content input[type="search"],
.app-shell .content input:not([type]),
.app-shell .content select,
.app-shell .content textarea{
  background:var(--ep-input) !important;
  border-color:var(--ep-input-border) !important;
  color:var(--ep-text) !important;
}

.app-shell .content input::placeholder,
.app-shell .content textarea::placeholder{
  color:var(--ep-text-muted) !important;
}

body:not(.light-mode) :is(.app-shell .content,.ep-shell,dialog,.modal,.modal-backdrop) :is(input,textarea)::placeholder{
  color:var(--ep-text-weak) !important;
}
body:not(.light-mode) :is(.header-search-input,.account-menu-theme-picker select){
  background:var(--ep-input) !important;
}

/* Keep the shared search in the header palette, separate from form fields. */
body:not(.light-mode) #ep-global-search{
  background:color-mix(in srgb, var(--ep-header-bg) 93%, var(--ep-text)) !important;
}
body:not(.light-mode) #ep-global-search:not(:focus){
  border-color:color-mix(in srgb, var(--ep-header-bg) 82%, var(--ep-text)) !important;
}
body:not(.light-mode) #ep-global-search::placeholder{
  color:var(--ep-text-weak) !important;
}

.ep-input-affix-host{
  position:relative;
}

.ep-input-affix{
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:12px;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  font-size:12px;
  font-weight:700;
  line-height:1;
  color:var(--ep-text-muted);
  opacity:.92;
}

.ep-input-affix[data-affix-type="money"]{
  letter-spacing:.01em;
}

.ep-input-affix[data-affix-type="percent"]{
  font-size:11px;
}

.ep-affix-input{
  --ep-affix-base-pad-left: 0px;
  --ep-affix-base-pad-right: 0px;
  --ep-affix-pad-left: 0px;
  --ep-affix-pad-right: 0px;
  padding-left:calc(var(--ep-affix-base-pad-left) + var(--ep-affix-pad-left)) !important;
  padding-right:calc(var(--ep-affix-base-pad-right) + var(--ep-affix-pad-right)) !important;
}

/* ================================
   EMPLOYEE TITLE + ACCESS MODAL
   Shared theme-safe styling for add/edit/onboarding consumers.
   ================================ */
#titleAccessModal{
  background:var(--ep-overlay) !important;
  z-index:160 !important;
  align-items:flex-start;
  justify-content:center;
  padding:72px 14px 16px;
  overflow-y:auto;
}

#titleAccessModal .ta-modal-panel{
  width:min(840px, calc(100vw - 28px));
  max-width:min(840px, calc(100vw - 28px));
  max-height:calc(100vh - 88px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:12px 14px 14px;
  border-radius:16px;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--ep-link) 10%, transparent), transparent 34%),
    var(--ep-surface) !important;
  border:1px solid var(--ep-border) !important;
  box-shadow:0 26px 70px rgba(0,0,0,.30);
  color:var(--ep-text) !important;
}

#titleAccessModal .ta-modal-chrome{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:28px;
  margin-bottom:6px;
}

#titleAccessModal .modal-close-btn{
  width:30px;
  height:30px;
  border-radius:999px;
  color:var(--ep-text-muted) !important;
  background:color-mix(in srgb, var(--ep-surface-soft) 80%, transparent);
  border:1px solid var(--ep-border-soft);
}

#titleAccessModal .modal-close-btn:hover{
  color:var(--ep-text) !important;
  background:color-mix(in srgb, var(--ep-link) 12%, var(--ep-surface-soft));
}

#titleAccessModal .ta-editor{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding-right:2px;
}

#titleAccessModal .ta-fields-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(0, 1fr) minmax(160px, .72fr);
  gap:10px 12px;
  align-items:start;
  min-width:0;
  padding:12px;
  border-radius:14px;
  background:color-mix(in srgb, var(--ep-surface-soft) 92%, var(--ep-surface)) !important;
  border:1px solid var(--ep-border-soft) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

#titleAccessModal .ta-fields-grid .form-group{
  margin-bottom:0;
}

#titleAccessModal .ta-desc-field{
  grid-column:span 2;
}

#titleAccessModal .ta-wallet-field{
  align-self:stretch;
}

#titleAccessModal label{
  color:var(--ep-text) !important;
}

#titleAccessModal .form-group > label{
  display:block;
  margin-bottom:5px;
  font-size:12px;
  font-weight:750;
}

#titleAccessModal .ta-combo{
  position:relative;
  width:100%;
}

#titleAccessModal .ta-combo > input,
#titleAccessModal .ta-combo > select,
#titleAccessModal .ta-fields-grid textarea{
  width:100%;
  max-width:100%;
  min-height:38px;
  padding:8px 38px 8px 11px;
  border-radius:12px;
  background:var(--ep-input) !important;
  border:1px solid var(--ep-input-border) !important;
  color:var(--ep-text) !important;
  box-sizing:border-box;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

#titleAccessModal .ta-fields-grid textarea{
  min-height:72px;
  resize:vertical;
  padding-right:11px;
}

#titleAccessModal .ta-combo > select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:none;
}

#titleAccessModal .ta-combo > input::placeholder,
#titleAccessModal .ta-fields-grid textarea::placeholder{
  color:var(--ep-text-muted) !important;
}

#titleAccessModal .ta-combo > input:focus,
#titleAccessModal .ta-combo > select:focus,
#titleAccessModal .ta-fields-grid textarea:focus{
  outline:none;
  border-color:color-mix(in srgb, var(--ep-link) 48%, var(--ep-input-border)) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ep-link) 22%, transparent);
}

#titleAccessModal .ta-caret{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ep-text-muted) !important;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

#titleAccessModal .ta-caret:hover{
  background:color-mix(in srgb, var(--ep-link) 12%, transparent);
}

#titleAccessModal .ta-field-help{
  margin-top:4px;
  font-size:11px;
  line-height:1.35;
  color:var(--ep-text-muted) !important;
}

#titleAccessModal .ta-checkbox-row{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  height:100%;
  min-height:72px;
  padding:10px;
  border:1px solid var(--ep-border-soft);
  border-radius:14px;
  background:color-mix(in srgb, var(--ep-surface) 72%, transparent);
  cursor:pointer;
}

#titleAccessModal .ta-checkbox-row > span:last-child{
  min-width:0;
  overflow-wrap:break-word;
}

#titleAccessModal .ta-checkbox-row input{
  flex:0 0 auto;
  width:16px;
  height:16px;
  margin:2px 0 0;
  accent-color:var(--ep-link);
}

#titleAccessModal .ta-checkbox-row:focus-within{
  border-color:color-mix(in srgb, var(--ep-link) 38%, var(--ep-border-soft));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ep-link) 16%, transparent);
}

#titleAccessModal .ta-inline-help{
  display:block;
  margin-top:2px;
}

#titleAccessModal .ta-permissions-panel{
  margin-top:10px;
  padding:10px;
  border:1px solid var(--ep-border-soft) !important;
  border-radius:14px;
  background:color-mix(in srgb, var(--ep-surface-soft) 88%, var(--ep-surface)) !important;
  min-width:0;
}

#titleAccessModal .ta-access-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:8px;
  flex-wrap:wrap;
}

#titleAccessModal .ta-perm-title{
  margin:0;
  font-size:14px;
  font-weight:800;
  color:var(--ep-text) !important;
}

#titleAccessModal .ta-access-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

#titleAccessModal .mini-btn,
#titleAccessModal .ta-access-actions .btn{
  min-height:28px;
  padding:5px 9px;
  border-radius:999px;
  color:var(--ep-text) !important;
  background:color-mix(in srgb, var(--ep-surface) 72%, transparent) !important;
  border:1px solid var(--ep-border-soft) !important;
  box-shadow:none !important;
}

#titleAccessModal .mini-btn:hover,
#titleAccessModal .ta-access-actions .btn:hover{
  background:color-mix(in srgb, var(--ep-link) 14%, var(--ep-surface)) !important;
  border-color:color-mix(in srgb, var(--ep-link) 32%, var(--ep-border-soft)) !important;
}

#titleAccessModal .ta-profile-note{
  margin-top:5px;
  padding:7px 9px;
  border-radius:10px;
  font-size:11px;
  line-height:1.35;
  border:1px solid var(--ep-border-soft);
  background:color-mix(in srgb, var(--ep-surface-soft) 88%, transparent);
  color:var(--ep-text-muted) !important;
}

#titleAccessModal .ta-profile-note.is-existing{
  border-color:color-mix(in srgb, var(--ep-link) 28%, var(--ep-border-soft));
  background:color-mix(in srgb, var(--ep-link) 12%, var(--ep-surface-soft));
  color:var(--ep-text) !important;
}

#titleAccessModal .ta-profile-note.is-new{
  border-color:color-mix(in srgb, var(--ep-accent) 30%, var(--ep-border-soft));
  background:color-mix(in srgb, var(--ep-accent) 12%, var(--ep-surface-soft));
  color:var(--ep-text) !important;
}

#titleAccessModal .ta-perm-wrap{
  border:1px solid var(--ep-border-soft) !important;
  border-radius:12px;
  padding:6px;
  background:var(--ep-surface) !important;
  max-height:clamp(260px, 36vh, 390px);
  overflow:auto;
  min-width:0;
}

@media (max-width:900px){
  #titleAccessModal{
    padding-top:62px;
  }

  #titleAccessModal .ta-fields-grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  }

  #titleAccessModal .ta-desc-field,
  #titleAccessModal .ta-wallet-field{
    grid-column:span 2;
  }
}

@media (max-width:640px){
  #titleAccessModal .ta-modal-panel{
    padding:10px;
  }

  #titleAccessModal .ta-fields-grid{
    grid-template-columns:minmax(0, 1fr);
  }

  #titleAccessModal .ta-desc-field,
  #titleAccessModal .ta-wallet-field{
    grid-column:auto;
  }
}

#titleAccessModal .ta-perm-page{
  display:grid;
  gap:8px;
}

#titleAccessModal .ta-perm-page-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px;
  border:1px solid var(--ep-border-soft);
  border-radius:12px;
  background:var(--ep-surface-soft);
}

#titleAccessModal .ta-perm-section{
  border:1px solid var(--ep-border-soft);
  border-radius:12px;
  background:var(--ep-surface);
  overflow:hidden;
}

#titleAccessModal .ta-section-toggle,
#titleAccessModal .ta-section-static{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:8px 9px;
  color:var(--ep-text) !important;
  background:color-mix(in srgb, var(--ep-surface-soft) 82%, transparent);
  border:0;
  text-align:left;
}

#titleAccessModal .ta-section-toggle{
  cursor:pointer;
}

#titleAccessModal .ta-section-toggle:hover{
  background:color-mix(in srgb, var(--ep-link) 10%, var(--ep-surface-soft));
}

#titleAccessModal .ta-section-toggle.is-open .ta-group-caret{
  transform:rotate(90deg);
}

#titleAccessModal .ta-section-body{
  padding:6px;
}

#titleAccessModal .ta-section-body[hidden]{
  display:none !important;
}

#titleAccessModal .ta-section-meta{
  display:block;
  margin-top:1px;
  font-size:11px;
}

#titleAccessModal .ta-perm-table{
  width:100%;
  min-width:640px;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}

#titleAccessModal .ta-perm-table th,
#titleAccessModal .ta-perm-table td{
  padding:7px 8px;
  border-bottom:1px solid var(--ep-border-soft);
  vertical-align:middle;
  color:var(--ep-text) !important;
}

#titleAccessModal .ta-perm-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--ep-surface) !important;
  color:var(--ep-text-muted) !important;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:0;
}

#titleAccessModal .ta-perm-table th:not(:first-child),
#titleAccessModal .ta-perm-cell{
  text-align:center;
}

#titleAccessModal .ta-perm-table th:first-child{
  width:34%;
  text-align:left;
}

#titleAccessModal .ta-perm-module-row:hover{
  background:color-mix(in srgb, var(--ep-link) 6%, transparent);
}

#titleAccessModal .ta-perm-empty{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  color:var(--ep-text-muted) !important;
  font-size:11px;
}

#titleAccessModal .ta-perm-cell-stack{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px;
  min-width:0;
}

#titleAccessModal .ta-perm-cell-stack.is-multi{
  align-items:stretch;
}

#titleAccessModal .ta-module-name{
  font-size:13px;
  font-weight:800;
}

#titleAccessModal .ta-module-key{
  display:none;
}

#titleAccessModal .ta-group-caret{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:18px;
  height:18px;
  border-radius:999px;
  color:var(--ep-text-muted);
  background:color-mix(in srgb, var(--ep-surface-soft) 78%, transparent);
  border:1px solid var(--ep-border-soft);
  font-size:11px;
  line-height:1;
  transition:transform .16s ease, color .16s ease, border-color .16s ease;
}

#titleAccessModal .ta-perm-check{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:0;
  min-height:26px;
  padding:4px 7px;
  border:1px solid color-mix(in srgb, var(--ep-border-soft) 88%, transparent);
  border-radius:8px;
  background:color-mix(in srgb, var(--ep-surface-soft) 54%, transparent);
  cursor:pointer;
}

#titleAccessModal .ta-perm-check:hover{
  background:color-mix(in srgb, var(--ep-link) 11%, transparent);
}

#titleAccessModal .ta-perm-check input,
#titleAccessModal .ta-perm-detail-item input{
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  min-height:14px !important;
  margin:0;
  accent-color:var(--ep-link);
}

#titleAccessModal .ta-perm-check span{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  line-height:1.2;
  font-weight:750;
  color:var(--ep-text) !important;
}

#titleAccessModal .ta-detail-section-title{
  margin-bottom:7px;
  font-size:10px;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ep-text-muted) !important;
}

#titleAccessModal .ta-perm-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 12px;
}

#titleAccessModal .ta-perm-detail-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
  padding:7px;
  border-radius:10px;
  border:1px solid transparent;
  cursor:pointer;
}

#titleAccessModal .ta-perm-detail-item:hover{
  background:color-mix(in srgb, var(--ep-link) 8%, transparent);
  border-color:color-mix(in srgb, var(--ep-link) 18%, transparent);
}

#titleAccessModal .ta-perm-detail-item.is-advanced{
  background:color-mix(in srgb, var(--ep-accent) 8%, transparent);
  border-color:color-mix(in srgb, var(--ep-accent) 16%, transparent);
}

#titleAccessModal .ta-detail-name{
  display:block;
  font-size:12px;
  font-weight:650;
  color:var(--ep-text) !important;
}

#titleAccessModal #taModalMsg{
  min-height:16px;
  margin-top:7px !important;
  color:var(--ep-text-muted) !important;
}

#titleAccessModal .modal-footer{
  flex:0 0 auto;
  margin-top:7px;
  padding-top:10px;
  border-top:1px solid var(--ep-border-soft);
}

#titleAccessModal .modal-footer .btn{
  min-height:31px;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid var(--ep-border-soft) !important;
  box-shadow:none !important;
}

#titleAccessModal #taCancelBtn{
  color:var(--ep-text) !important;
  background:color-mix(in srgb, var(--ep-surface-soft) 92%, transparent) !important;
}

#titleAccessModal #taSaveBtn{
  color:var(--ep-surface) !important;
  background:var(--ep-text) !important;
  border-color:var(--ep-text) !important;
}

#titleAccessModal #taSaveBtn:hover{
  filter:brightness(1.05);
}

@media (max-width:700px){
  #titleAccessModal{
    padding:14px 10px;
  }
  #titleAccessModal .ta-modal-panel{
    width:calc(100vw - 20px);
    max-height:calc(100vh - 28px);
    padding:14px;
  }
  #titleAccessModal .ta-perm-detail-grid{
    grid-template-columns:minmax(0, 1fr);
  }
  #titleAccessModal .ta-access-actions{
    width:100%;
  }
}

/* Current compact job-title manager. Earlier title/access selectors above remain
   for cached pages; these scoped rules define the live manager. */
#titleAccessModal{
  z-index:3000 !important;
  align-items:center;
  padding:16px 12px;
}

#titleAccessModal [hidden]{
  display:none !important;
}

#titleAccessModal .ta-modal-panel{
  width:min(760px, calc(100vw - 24px));
  max-width:min(760px, calc(100vw - 24px));
  max-height:min(690px, calc(100vh - 32px));
  padding:0;
  border-radius:12px;
  background:var(--ep-surface) !important;
  box-shadow:0 20px 52px rgba(0,0,0,.34);
}

#titleAccessModal .ta-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:15px 18px;
  border-bottom:1px solid var(--ep-border-soft);
}

#titleAccessModal .ta-modal-header .modal-title{
  font-size:17px;
  font-weight:800;
}

#titleAccessModal .ta-modal-subtitle{
  margin-top:3px;
  color:var(--ep-text-muted);
  font-size:12px;
  line-height:1.35;
}

#titleAccessModal .ta-manager-body{
  display:grid;
  grid-template-columns:minmax(220px, 260px) minmax(0, 1fr);
  min-height:340px;
  overflow:hidden;
}

#titleAccessModal .ta-title-list-pane{
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:14px;
  border-right:1px solid var(--ep-border-soft);
  background:color-mix(in srgb, var(--ep-surface-soft) 70%, transparent);
}

#titleAccessModal .ta-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 2px 10px;
}

#titleAccessModal .ta-list-head strong{
  font-size:13px;
}

#titleAccessModal .ta-list-head .mini-btn{
  min-height:28px;
  padding:4px 9px;
  font-size:11px;
}

#titleAccessModal .ta-title-list{
  display:flex;
  min-height:0;
  flex:1;
  flex-direction:column;
  gap:6px;
  overflow-y:auto;
  overscroll-behavior:contain;
}

#titleAccessModal .ta-title-row{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border:1px solid var(--ep-border-soft);
  border-radius:8px;
  background:var(--ep-surface);
  color:var(--ep-text);
  text-align:left;
  cursor:pointer;
}

#titleAccessModal .ta-title-row:hover{
  border-color:color-mix(in srgb, var(--ep-link) 48%, var(--ep-border));
}

#titleAccessModal .ta-title-row.is-selected{
  border-color:var(--ep-link);
  background:color-mix(in srgb, var(--ep-link) 9%, var(--ep-surface));
  box-shadow:inset 3px 0 0 var(--ep-link);
}

#titleAccessModal .ta-title-row > span:first-child{
  display:grid;
  min-width:0;
  gap:2px;
}

#titleAccessModal .ta-title-row strong,
#titleAccessModal .ta-title-row small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#titleAccessModal .ta-title-row strong{
  font-size:12px;
}

#titleAccessModal .ta-title-row small{
  color:var(--ep-text-muted);
  font-size:10px;
}

#titleAccessModal .ta-title-row > span:last-child{
  color:var(--ep-text-muted);
  font-size:18px;
}

#titleAccessModal .ta-empty-state{
  display:grid;
  gap:4px;
  padding:18px 10px;
  color:var(--ep-text-muted);
  font-size:12px;
  text-align:center;
}

#titleAccessModal .ta-empty-state strong{
  color:var(--ep-text);
}

#titleAccessModal .ta-title-editor{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:14px;
  padding:20px;
  overflow-y:auto;
}

#titleAccessModal .ta-editor-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

#titleAccessModal .ta-editor-head > div{
  display:grid;
  gap:4px;
}

#titleAccessModal .ta-editor-head strong{
  font-size:15px;
}

#titleAccessModal .ta-editor-head span{
  color:var(--ep-text-muted);
  font-size:11px;
}

#titleAccessModal .ta-title-field{
  max-width:420px;
  margin:0;
}

#titleAccessModal .ta-title-field input{
  width:100%;
}

#titleAccessModal .ta-impact-note,
#titleAccessModal .ta-delete-note{
  max-width:420px;
  padding:9px 10px;
  border:1px solid var(--ep-border-soft);
  border-radius:8px;
  background:color-mix(in srgb, var(--ep-link) 8%, var(--ep-surface-soft));
  color:var(--ep-text-muted);
  font-size:11px;
  line-height:1.4;
}

#titleAccessModal .ta-delete-note{
  border-color:color-mix(in srgb, #ef4444 38%, var(--ep-border-soft));
  background:color-mix(in srgb, #ef4444 8%, var(--ep-surface-soft));
}

#titleAccessModal #taModalMsg{
  min-height:18px;
  margin:0 !important;
  padding:7px 18px 0;
  font-size:12px;
}

#titleAccessModal #taModalMsg.is-error{
  color:#fecaca !important;
}

#titleAccessModal #taModalMsg.is-success{
  color:#bbf7d0 !important;
}

#titleAccessModal .ta-manager-footer{
  display:flex;
  align-items:center;
  gap:8px;
  margin:7px 0 0;
  padding:12px 18px 14px;
  border-top:1px solid var(--ep-border-soft);
}

#titleAccessModal .ta-footer-spacer{
  flex:1;
}

@media (max-width:680px){
  #titleAccessModal .ta-modal-panel{
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
    max-height:calc(100vh - 24px);
  }

  #titleAccessModal .ta-manager-body{
    grid-template-columns:minmax(0, 1fr);
    overflow-y:auto;
  }

  #titleAccessModal .ta-title-list-pane{
    min-height:190px;
    max-height:230px;
    border-right:0;
    border-bottom:1px solid var(--ep-border-soft);
  }

  #titleAccessModal .ta-title-editor{
    min-height:230px;
    overflow:visible;
  }

  #titleAccessModal .ta-manager-footer{
    flex-wrap:wrap;
  }
}

.app-shell .content label,
.app-shell .content .label,
.app-shell .content .muted,
.app-shell .content .help,
.app-shell .content .k,
.app-shell .content .mini-title,
.app-shell .content .month-day,
.app-shell .content .chip,
.app-shell .content .pill,
.app-shell .content .badge,
.app-shell .content .v,
.app-shell .content th,
.app-shell .content td,
.app-shell .content .card-title,
.app-shell .content .modal-title,
.app-shell .content .pr-bogo-title,
.app-shell .content .mock-btn,
.app-shell .content .mock-btn--primary,
.app-shell .content .perm-adv-item,
.app-shell .content .perm-adv-title{
  color:var(--ep-text) !important;
}

.app-shell .content .help,
.app-shell .content .muted,
.app-shell .content .k,
.app-shell .content .month-day,
.app-shell .content .mini-title,
.app-shell .content th{
  color:var(--ep-text-muted) !important;
}

.app-shell .content thead,
.app-shell .content thead th,
.app-shell .content .week-cal thead th,
.app-shell .content .month-cal thead th,
.app-shell .content .time-col{
  background:var(--ep-surface) !important;
  color:var(--ep-text-muted) !important;
  border-color:var(--ep-border-soft) !important;
}

.app-shell .content .btn-secondary,
.app-shell .content .filter-btn,
.app-shell .content .seg-btn,
.app-shell .content .view-btn,
.app-shell .content .icon-btn,
.app-shell .content .scope-select,
.app-shell .content .mock-btn{
  background:var(--ep-surface) !important;
  border-color:var(--ep-border) !important;
  color:var(--ep-text) !important;
}

.app-shell .content .btn-secondary:hover,
.app-shell .content .filter-btn:hover,
.app-shell .content .seg-btn:hover,
.app-shell .content .view-btn:hover,
.app-shell .content .icon-btn:hover,
.app-shell .content .mock-btn:hover{
  background:var(--ep-surface-quiet) !important;
}

.app-shell .content .btn-danger{
  background:color-mix(in oklab, #991b1b 42%, var(--ep-surface)) !important;
  border-color:color-mix(in oklab, #ef4444 36%, var(--ep-border)) !important;
  color:#fecaca !important;
}

/* Light-mode compatibility for older page-local dark styles.
   Keep this scoped to authenticated app content so dark mode and public pages
   retain their intentional palettes. */
body.light-mode .app-shell .content .card,
body.light-mode .app-shell .content .panel,
body.light-mode .app-shell .content .box,
body.light-mode .app-shell .content .table-wrap,
body.light-mode .app-shell .content .table-card,
body.light-mode .app-shell .content .table-frame,
body.light-mode .app-shell .content .modal-panel,
body.light-mode .app-shell .content .modal-card,
body.light-mode .app-shell .content .modal-content,
body.light-mode .app-shell .content .ep-modal,
body.light-mode .app-shell .content .ep-modal-card,
body.light-mode .app-shell .content dialog,
body.light-mode .app-shell .content dialog[open]{
  background:var(--ep-surface) !important;
  border-color:var(--ep-border) !important;
  color:var(--ep-text) !important;
}

body.light-mode .app-shell .content .section-card,
body.light-mode .app-shell .content .feed-card,
body.light-mode .app-shell .content .comment-card,
body.light-mode .app-shell .content .module-card,
body.light-mode .app-shell .content .mini-stat,
body.light-mode .app-shell .content .head-stat,
body.light-mode .app-shell .content .stat,
body.light-mode .app-shell .content .kv,
body.light-mode .app-shell .content .supplier-credit-box,
body.light-mode .app-shell .content .access-pane,
body.light-mode .app-shell .content .access-permissions-pane,
body.light-mode .app-shell .content .access-profile-detail-pane{
  background:var(--ep-surface-soft) !important;
  border-color:var(--ep-border-soft) !important;
  color:var(--ep-text) !important;
}

body.light-mode .app-shell .content .card-header,
body.light-mode .app-shell .content .card-head,
body.light-mode .app-shell .content .table-card-head,
body.light-mode .app-shell .content .modal-header,
body.light-mode .app-shell .content .modal-head,
body.light-mode .app-shell .content .modal-footer,
body.light-mode .app-shell .content .modal-foot{
  background:color-mix(in srgb, var(--ep-surface) 78%, transparent) !important;
  border-color:var(--ep-border-soft) !important;
  color:var(--ep-text) !important;
}

body.light-mode .app-shell .content table,
body.light-mode .app-shell .content tbody,
body.light-mode .app-shell .content tr,
body.light-mode .app-shell .content th,
body.light-mode .app-shell .content td{
  border-color:var(--ep-border-soft) !important;
}

body.light-mode .app-shell .content td.cal-cell.past{
  background:var(--ep-surface-soft) !important;
  color:var(--ep-text-muted) !important;
}

body.light-mode .app-shell .content thead,
body.light-mode .app-shell .content thead tr,
body.light-mode .app-shell .content thead th,
body.light-mode .app-shell .content th{
  background:var(--ep-surface-soft) !important;
  color:var(--ep-text-muted) !important;
}

body.light-mode .app-shell .content tbody > tr:hover > td:not(:has(table)){
  background:color-mix(in srgb, var(--ep-link) 7%, transparent) !important;
}

body.light-mode .app-shell .content .secondary-btn,
body.light-mode .app-shell .content .btn-secondary,
body.light-mode .app-shell .content .filter-btn,
body.light-mode .app-shell .content .seg-btn,
body.light-mode .app-shell .content .view-btn,
body.light-mode .app-shell .content .icon-btn,
body.light-mode .app-shell .content .mock-btn,
body.light-mode .app-shell .content .remove-btn,
body.light-mode .app-shell .content .select-trigger-btn,
body.light-mode .app-shell .content .linkBtn,
body.light-mode .app-shell .content button.secondary,
body.light-mode .app-shell .content a.secondary{
  background:var(--ep-surface-soft) !important;
  border-color:var(--ep-border) !important;
  color:var(--ep-text) !important;
}

body.light-mode .app-shell .content .secondary-btn:hover,
body.light-mode .app-shell .content .btn-secondary:hover,
body.light-mode .app-shell .content .filter-btn:hover,
body.light-mode .app-shell .content .seg-btn:hover,
body.light-mode .app-shell .content .view-btn:hover,
body.light-mode .app-shell .content .icon-btn:hover,
body.light-mode .app-shell .content .mock-btn:hover,
body.light-mode .app-shell .content .remove-btn:hover,
body.light-mode .app-shell .content .select-trigger-btn:hover,
body.light-mode .app-shell .content .linkBtn:hover{
  background:var(--ep-surface-quiet) !important;
  border-color:color-mix(in srgb, var(--ep-link) 28%, var(--ep-border)) !important;
  color:var(--ep-text) !important;
}

body.light-mode .app-shell .content .danger-btn,
body.light-mode .app-shell .content .btn-danger,
body.light-mode .app-shell .content .remove-btn.is-danger,
body.light-mode .app-shell .content .linkBtn.danger{
  background:color-mix(in srgb, #dc2626 10%, var(--ep-surface)) !important;
  border-color:color-mix(in srgb, #dc2626 34%, var(--ep-border)) !important;
  color:#991b1b !important;
}

body.light-mode .app-shell .content .danger-btn:hover,
body.light-mode .app-shell .content .btn-danger:hover,
body.light-mode .app-shell .content .remove-btn.is-danger:hover{
  background:color-mix(in srgb, #dc2626 16%, var(--ep-surface)) !important;
  border-color:color-mix(in srgb, #dc2626 44%, var(--ep-border)) !important;
  color:#7f1d1d !important;
}

body.light-mode .app-shell .content .pill,
body.light-mode .app-shell .content .chip,
body.light-mode .app-shell .content .badge,
body.light-mode .app-shell .content .status-pill,
body.light-mode .app-shell .content .access-role-pill{
  background:var(--ep-surface-soft) !important;
  border-color:var(--ep-border-soft) !important;
  color:var(--ep-text-muted) !important;
}

body.light-mode .app-shell .content .badge.green,
body.light-mode .app-shell .content .badge.completed,
body.light-mode .app-shell .content .badge.ok,
body.light-mode .app-shell .content .pill-ok,
body.light-mode .app-shell .content .pill-green,
body.light-mode .app-shell .content .ok-badge{
  background:color-mix(in srgb, #16a34a 10%, var(--ep-surface)) !important;
  border-color:color-mix(in srgb, #16a34a 34%, var(--ep-border)) !important;
  color:#15803d !important;
}

body.light-mode .app-shell .content .badge.red,
body.light-mode .app-shell .content .badge.off,
body.light-mode .app-shell .content .pill-red,
body.light-mode .app-shell .content .err-badge{
  background:color-mix(in srgb, #dc2626 10%, var(--ep-surface)) !important;
  border-color:color-mix(in srgb, #dc2626 34%, var(--ep-border)) !important;
  color:#b42318 !important;
}

body.light-mode .app-shell .content .badge.warn,
body.light-mode .app-shell .content .badge.pending,
body.light-mode .app-shell .content .pill-warn,
body.light-mode .app-shell .content .pill-yellow{
  background:color-mix(in srgb, #d97706 11%, var(--ep-surface)) !important;
  border-color:color-mix(in srgb, #d97706 34%, var(--ep-border)) !important;
  color:#b45309 !important;
}

body.light-mode .app-shell .content .badge.info,
body.light-mode .app-shell .content .badge.in_progress,
body.light-mode .app-shell .content .pill-info{
  background:color-mix(in srgb, var(--ep-link) 10%, var(--ep-surface)) !important;
  border-color:color-mix(in srgb, var(--ep-link) 32%, var(--ep-border)) !important;
  color:var(--ep-link) !important;
}

body.light-mode .app-shell .content .muted,
body.light-mode .app-shell .content .text-muted,
body.light-mode .app-shell .content .help,
body.light-mode .app-shell .content .card-subtitle,
body.light-mode .app-shell .content .card-subtitle-text,
body.light-mode .app-shell .content .table-card-subtitle,
body.light-mode .app-shell .content .feed-meta,
body.light-mode .app-shell .content .status-note,
body.light-mode .app-shell .content .perm-desc,
body.light-mode .app-shell .content .modal-subtitle,
body.light-mode .app-shell .content .modal-close-btn,
body.light-mode .app-shell .content small{
  color:var(--ep-text-muted) !important;
}

body.light-mode .app-shell .content .modal-panel,
body.light-mode .app-shell .content .modal-card,
body.light-mode .app-shell .content .modal-content,
body.light-mode .app-shell .content .ep-modal,
body.light-mode .app-shell .content .ep-modal-card,
body.light-mode .app-shell .content dialog[open]{
  box-shadow:0 18px 42px rgba(15,23,42,0.16) !important;
}

body.light-mode.ep-shell-fixed-chrome > .modal,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop{
  color:var(--ep-text) !important;
}

body.light-mode.ep-shell-fixed-chrome > .modal .modal-panel,
body.light-mode.ep-shell-fixed-chrome > .modal .modal-card,
body.light-mode.ep-shell-fixed-chrome > .modal .modal-content,
body.light-mode.ep-shell-fixed-chrome > .modal .ep-modal-card,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .modal-panel,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .modal-card,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .modal-content,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .ep-modal-card{
  background:var(--ep-surface) !important;
  border-color:var(--ep-border) !important;
  color:var(--ep-text) !important;
  box-shadow:0 18px 42px rgba(15,23,42,0.16) !important;
}

body.light-mode.ep-shell-fixed-chrome > .modal .section-card,
body.light-mode.ep-shell-fixed-chrome > .modal .feed-card,
body.light-mode.ep-shell-fixed-chrome > .modal .comment-card,
body.light-mode.ep-shell-fixed-chrome > .modal .module-card,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .section-card,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .feed-card,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .comment-card,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .module-card{
  background:var(--ep-surface-soft) !important;
  border-color:var(--ep-border-soft) !important;
  color:var(--ep-text) !important;
}

body.light-mode.ep-shell-fixed-chrome > .modal .modal-header,
body.light-mode.ep-shell-fixed-chrome > .modal .modal-head,
body.light-mode.ep-shell-fixed-chrome > .modal .modal-footer,
body.light-mode.ep-shell-fixed-chrome > .modal .modal-foot,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .modal-header,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .modal-head,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .modal-footer,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .modal-foot{
  background:color-mix(in srgb, var(--ep-surface) 78%, transparent) !important;
  border-color:var(--ep-border-soft) !important;
  color:var(--ep-text) !important;
}

body.light-mode.ep-shell-fixed-chrome > .modal .input,
body.light-mode.ep-shell-fixed-chrome > .modal .select,
body.light-mode.ep-shell-fixed-chrome > .modal input:not([type]),
body.light-mode.ep-shell-fixed-chrome > .modal input[type="text"],
body.light-mode.ep-shell-fixed-chrome > .modal input[type="email"],
body.light-mode.ep-shell-fixed-chrome > .modal input[type="password"],
body.light-mode.ep-shell-fixed-chrome > .modal input[type="number"],
body.light-mode.ep-shell-fixed-chrome > .modal input[type="date"],
body.light-mode.ep-shell-fixed-chrome > .modal input[type="time"],
body.light-mode.ep-shell-fixed-chrome > .modal input[type="search"],
body.light-mode.ep-shell-fixed-chrome > .modal select,
body.light-mode.ep-shell-fixed-chrome > .modal textarea,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .input,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .select,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop input:not([type]),
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop input[type="text"],
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop input[type="email"],
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop input[type="password"],
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop input[type="number"],
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop input[type="date"],
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop input[type="time"],
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop input[type="search"],
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop select,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop textarea{
  background:var(--ep-input) !important;
  border-color:var(--ep-input-border) !important;
  color:var(--ep-text) !important;
}

body.light-mode.ep-shell-fixed-chrome > .modal input::placeholder,
body.light-mode.ep-shell-fixed-chrome > .modal textarea::placeholder,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop input::placeholder,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop textarea::placeholder{
  color:var(--ep-text-muted) !important;
}

body.light-mode.ep-shell-fixed-chrome > .modal .secondary-btn,
body.light-mode.ep-shell-fixed-chrome > .modal .btn-secondary,
body.light-mode.ep-shell-fixed-chrome > .modal .filter-btn,
body.light-mode.ep-shell-fixed-chrome > .modal .seg-btn,
body.light-mode.ep-shell-fixed-chrome > .modal .view-btn,
body.light-mode.ep-shell-fixed-chrome > .modal .icon-btn,
body.light-mode.ep-shell-fixed-chrome > .modal .remove-btn,
body.light-mode.ep-shell-fixed-chrome > .modal .linkBtn,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .secondary-btn,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .btn-secondary,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .filter-btn,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .seg-btn,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .view-btn,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .icon-btn,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .remove-btn,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .linkBtn{
  background:var(--ep-surface-soft) !important;
  border-color:var(--ep-border) !important;
  color:var(--ep-text) !important;
}

body.light-mode.ep-shell-fixed-chrome > .modal .muted,
body.light-mode.ep-shell-fixed-chrome > .modal .text-muted,
body.light-mode.ep-shell-fixed-chrome > .modal .help,
body.light-mode.ep-shell-fixed-chrome > .modal .modal-subtitle,
body.light-mode.ep-shell-fixed-chrome > .modal small,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .muted,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .text-muted,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .help,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop .modal-subtitle,
body.light-mode.ep-shell-fixed-chrome > .modal-backdrop small{
  color:var(--ep-text-muted) !important;
}

/* Shared compact address editor. */
.customer-form-section{
  grid-column:1 / -1;
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid var(--ep-border-soft);
  border-radius:8px;
  background:color-mix(in oklab, var(--ep-surface-soft) 58%, transparent);
}
.customer-form-section-title{
  color:var(--ep-text);
  font-size:12px;
  font-weight:800;
  line-height:1.2;
}
.customer-form-section--address{
  align-items:start;
}
.address-compact-row{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(180px, .42fr);
  gap:10px;
  align-items:start;
}
.address-compact-row > *{
  min-width:0;
}
.address-details{
  grid-column:1 / -1;
  border:1px solid var(--ep-border-soft);
  border-radius:8px;
  background:color-mix(in oklab, var(--ep-surface-soft) 70%, transparent);
  overflow:hidden;
}
.address-details > summary{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 10px;
  cursor:pointer;
  color:var(--ep-text);
  font-size:12px;
  font-weight:800;
  list-style:none;
}
.address-details > summary::-webkit-details-marker{
  display:none;
}
.address-details > summary::after{
  content:"Edit";
  flex:0 0 auto;
  color:var(--ep-text-muted);
  font-size:11px;
  font-weight:800;
}
.address-details[open] > summary{
  border-bottom:1px solid var(--ep-border-soft);
}
.address-details[open] > summary::after{
  content:"Done";
}
.address-details-summary{
  min-width:0;
  flex:1 1 auto;
  color:var(--ep-text-muted);
  font-weight:700;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.address-details-body{
  display:grid;
  grid-template-columns:1fr .7fr .75fr;
  gap:10px;
  padding:10px;
}
.address-visible-row{
  grid-column:1 / -1;
  padding:0;
}
.address-details-body--four{
  grid-template-columns:1fr .65fr .75fr .65fr;
}
@media (max-width:720px){
  .address-compact-row,
  .address-details-body,
  .address-details-body--four{
    grid-template-columns:1fr;
  }
  .address-details > summary{
    align-items:flex-start;
    flex-direction:column;
  }
  .address-details-summary{
    width:100%;
    text-align:left;
    white-space:normal;
  }
}

/* Polished controls for the newer pricing and catalog-finalization workspaces. */
body.ep-polished-workspace{
  --ep-workspace-control-h:40px;
  --ep-workspace-control-radius:12px;
  color-scheme:dark;
}
body.light-mode.ep-polished-workspace{
  color-scheme:light;
}
body.ep-polished-workspace .content .card{
  border-color:var(--ep-border);
  border-radius:16px;
  background:var(--ep-surface);
}
body.ep-polished-workspace .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
body.ep-polished-workspace .content select,
body.ep-polished-workspace .content textarea{
  min-height:var(--ep-workspace-control-h);
  padding:0 13px;
  border:1px solid color-mix(in oklab, var(--ep-input-border) 78%, var(--ep-text-weak));
  border-radius:var(--ep-workspace-control-radius);
  background:var(--ep-input);
  color:var(--ep-text);
  font:inherit;
  line-height:1.35;
  outline:none;
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--ep-text) 4%, transparent);
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
body.ep-polished-workspace .content textarea{
  min-height:96px;
  padding:11px 13px;
  resize:vertical;
}
body.ep-polished-workspace .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):hover:not(:disabled):not([readonly]),
body.ep-polished-workspace .content select:hover:not(:disabled),
body.ep-polished-workspace .content textarea:hover:not(:disabled):not([readonly]){
  border-color:color-mix(in oklab, var(--ep-input-border) 56%, var(--ep-text));
}
body.ep-polished-workspace .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):focus,
body.ep-polished-workspace .content select:focus,
body.ep-polished-workspace .content textarea:focus{
  border-color:var(--ep-accent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--ep-accent) 16%, transparent);
}
body.ep-polished-workspace .content input::placeholder,
body.ep-polished-workspace .content textarea::placeholder{
  color:var(--ep-text-muted);
  opacity:1;
}
body.ep-polished-workspace .content input:not([type="checkbox"]):not([type="radio"]):disabled,
body.ep-polished-workspace .content select:disabled,
body.ep-polished-workspace .content textarea:disabled,
body.ep-polished-workspace .content input:not([type="checkbox"]):not([type="radio"])[readonly],
body.ep-polished-workspace .content textarea[readonly]{
  border-color:var(--ep-border-soft);
  background:color-mix(in oklab, var(--ep-surface-soft) 84%, transparent);
  color:var(--ep-text-muted);
  cursor:not-allowed;
  box-shadow:none;
  opacity:.9;
}
body.ep-polished-workspace .content input:-webkit-autofill,
body.ep-polished-workspace .content input:-webkit-autofill:hover,
body.ep-polished-workspace .content input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ep-text);
  box-shadow:0 0 0 1000px var(--ep-input) inset;
}
body.ep-polished-workspace .content .pg-table input:not([type="checkbox"]),
body.ep-polished-workspace .content .pg-table select,
body.ep-polished-workspace .content .pg-breaks-table input:not([type="checkbox"]),
body.ep-polished-workspace .content .pg-breaks-table select,
body.ep-polished-workspace .content .apr-builder input:not([type="checkbox"]),
body.ep-polished-workspace .content .apr-builder select,
body.ep-polished-workspace .content .apr-groups-table input:not([type="checkbox"]),
body.ep-polished-workspace .content .apr-groups-table select{
  min-height:38px;
  padding-right:10px;
  padding-left:10px;
  border-radius:9px;
  font-size:12px;
}

/* =========================================================
   SITE-WIDE NEW INVOICE VISUAL SYSTEM
   Authenticated workspaces inherit the calm, high-contrast
   hierarchy used by New Invoice. Public pages remain untouched.
========================================================= */
.app-shell main,
.ep-shell main{
  --ep-workspace-control-h:40px;
  --ep-workspace-control-radius:12px;
  color-scheme:dark;
}
body.light-mode .app-shell main,
body.light-mode .ep-shell main{
  color-scheme:light;
}

.app-shell main > .content-inner,
.app-shell main > .ep-page,
.ep-shell main > .content-inner,
.ep-shell main > .ep-page{
  width:100%;
  min-width:0;
  margin-right:auto;
  margin-left:auto;
  background:transparent;
}

.app-shell main .breadcrumbs,
.ep-shell main .breadcrumbs{
  margin:0 0 10px;
  color:var(--ep-text-muted);
  font-size:12px;
  line-height:1.45;
}
.app-shell main .breadcrumbs a,
.ep-shell main .breadcrumbs a{
  color:var(--ep-link);
}

.app-shell main h1,
.app-shell main .page-title,
.ep-shell main h1,
.ep-shell main .page-title{
  margin-top:0;
  color:var(--ep-text);
  font-size:clamp(26px,2.15vw,34px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.025em;
}
.app-shell main .page-title,
.ep-shell main .page-title{
  margin-bottom:5px;
}
.app-shell main .page-subtitle,
.app-shell main .subtle,
.app-shell main .ep-muted,
.ep-shell main .page-subtitle,
.ep-shell main .subtle,
.ep-shell main .ep-muted{
  color:var(--ep-text-muted);
  line-height:1.45;
}
.app-shell main .page-subtitle,
.ep-shell main .page-subtitle{
  margin-top:0;
  margin-bottom:16px;
  font-size:13px;
}

.app-shell main :where(.header-row,.page-header,.page-head,.ep-row,.toolbar),
.ep-shell main :where(.header-row,.page-header,.page-head,.ep-row,.toolbar){
  min-width:0;
}
.app-shell main :where(.header-row,.page-header,.page-head,.ep-row),
.ep-shell main :where(.header-row,.page-header,.page-head,.ep-row){
  gap:12px;
}

.app-shell main .card,
.app-shell main .panel,
.app-shell main .box,
.app-shell main .table-card,
.app-shell main .ep-card,
.ep-shell main .card,
.ep-shell main .panel,
.ep-shell main .box,
.ep-shell main .table-card,
.ep-shell main .ep-card{
  min-width:0;
  border:1px solid var(--ep-border);
  border-radius:16px;
  background:var(--ep-surface);
  color:var(--ep-text);
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--ep-text) 3%, transparent);
}
.app-shell main .card,
.app-shell main .panel,
.app-shell main .box,
.ep-shell main .card,
.ep-shell main .panel,
.ep-shell main .box{
  padding:16px;
}
.app-shell main :where(.section-card,.module-card,.summary-card,.mini-stat,.stat,.kv),
.ep-shell main :where(.section-card,.module-card,.summary-card,.mini-stat,.stat,.kv){
  min-width:0;
  border:1px solid var(--ep-border-soft);
  border-radius:12px;
  background:var(--ep-surface-soft);
  color:var(--ep-text);
}
.app-shell main :where(.card-header,.card-head,.table-card-head,.ep-card-head),
.ep-shell main :where(.card-header,.card-head,.table-card-head,.ep-card-head){
  gap:12px;
  border-color:var(--ep-border-soft);
}
.app-shell main :where(.card-title,.table-card-title,.ep-card-title),
.ep-shell main :where(.card-title,.table-card-title,.ep-card-title){
  color:var(--ep-text);
  font-size:15px;
  font-weight:800;
  line-height:1.25;
}
.app-shell main :where(.card-subtitle,.card-subtitle-text,.table-card-subtitle),
.ep-shell main :where(.card-subtitle,.card-subtitle-text,.table-card-subtitle){
  margin-top:3px;
  color:var(--ep-text-muted);
  font-size:12px;
  line-height:1.45;
}

.app-shell main label,
.app-shell main .label,
.ep-shell main label,
.ep-shell main .label{
  color:var(--ep-text-weak) !important;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}
.app-shell main label:not(:has(input[type="checkbox"],input[type="radio"])),
.app-shell main .label,
.ep-shell main label:not(:has(input[type="checkbox"],input[type="radio"])),
.ep-shell main .label{
  display:block;
  margin-bottom:6px;
}
.app-shell main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
.app-shell main select,
.app-shell main textarea,
.ep-shell main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
.ep-shell main select,
.ep-shell main textarea{
  min-width:0;
  min-height:40px;
  padding:0 12px;
  border:1px solid var(--ep-input-border);
  border-radius:12px;
  background:var(--ep-input);
  color:var(--ep-text);
  font:inherit;
  line-height:1.35;
  outline:none;
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--ep-text) 4%, transparent);
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.app-shell main textarea,
.ep-shell main textarea{
  min-height:96px;
  padding:10px 12px;
  resize:vertical;
}
.app-shell main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="color"]):hover:not(:disabled):not([readonly]),
.app-shell main select:hover:not(:disabled),
.app-shell main textarea:hover:not(:disabled):not([readonly]),
.ep-shell main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="color"]):hover:not(:disabled):not([readonly]),
.ep-shell main select:hover:not(:disabled),
.ep-shell main textarea:hover:not(:disabled):not([readonly]){
  border-color:color-mix(in oklab, var(--ep-input-border) 55%, var(--ep-text));
}
.app-shell main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="color"]):focus,
.app-shell main select:focus,
.app-shell main textarea:focus,
.ep-shell main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="color"]):focus,
.ep-shell main select:focus,
.ep-shell main textarea:focus{
  border-color:var(--ep-accent);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--ep-accent) 35%, transparent);
}
.app-shell main input::placeholder,
.app-shell main textarea::placeholder,
.ep-shell main input::placeholder,
.ep-shell main textarea::placeholder{
  color:var(--ep-text-muted);
  opacity:1;
}
.app-shell main input:not([type="checkbox"]):not([type="radio"]):disabled,
.app-shell main select:disabled,
.app-shell main textarea:disabled,
.app-shell main input[readonly],
.app-shell main textarea[readonly],
.ep-shell main input:not([type="checkbox"]):not([type="radio"]):disabled,
.ep-shell main select:disabled,
.ep-shell main textarea:disabled,
.ep-shell main input[readonly],
.ep-shell main textarea[readonly]{
  border-color:var(--ep-border-soft);
  background:var(--ep-surface-soft);
  color:var(--ep-text-muted);
  box-shadow:none;
  opacity:.9;
}
.app-shell main input[type="checkbox"],
.app-shell main input[type="radio"],
.ep-shell main input[type="checkbox"],
.ep-shell main input[type="radio"]{
  accent-color:var(--ep-accent);
}

.app-shell main .primary-btn,
.app-shell main .btn-primary,
.app-shell main .btn.primary,
.app-shell main .button.primary,
.ep-shell main .primary-btn,
.ep-shell main .btn-primary,
.ep-shell main .btn.primary{
  min-height:38px;
  padding:0 16px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--ep-accent),var(--ep-accent-soft));
  color:#022c22;
  font-size:13px;
  font-weight:700;
  line-height:1;
  box-shadow:none;
}
.app-shell main :where(.secondary-btn,.btn-secondary,.btn:not(.primary),.button:not(.primary),.filter-btn,.seg-btn,.view-btn,.mock-btn,.linkBtn),
.ep-shell main :where(.secondary-btn,.btn-secondary,.btn:not(.primary),.button:not(.primary),.filter-btn,.seg-btn,.view-btn,.mock-btn,.linkBtn){
  min-height:34px;
  padding:0 12px;
  border:1px solid var(--ep-border-soft);
  border-radius:999px;
  background:var(--ep-surface-soft);
  color:var(--ep-text);
  font-size:12px;
  font-weight:650;
  line-height:1;
  text-decoration:none;
  box-shadow:none;
}
.app-shell main :where(.secondary-btn,.btn-secondary,.btn:not(.primary),.button:not(.primary),.filter-btn,.seg-btn,.view-btn,.mock-btn,.linkBtn):hover,
.ep-shell main :where(.secondary-btn,.btn-secondary,.btn:not(.primary),.button:not(.primary),.filter-btn,.seg-btn,.view-btn,.mock-btn,.linkBtn):hover{
  border-color:var(--ep-border);
  background:var(--ep-surface-quiet);
}
.app-shell main :where(.primary-btn,.btn-primary,.btn.primary,.button.primary):focus-visible,
.app-shell main :where(.secondary-btn,.btn-secondary,.btn,.button,.filter-btn,.seg-btn,.view-btn,.mock-btn,.linkBtn):focus-visible,
.ep-shell main :where(.primary-btn,.btn-primary,.btn.primary):focus-visible,
.ep-shell main :where(.secondary-btn,.btn-secondary,.btn,.filter-btn,.seg-btn,.view-btn,.mock-btn,.linkBtn):focus-visible{
  outline:2px solid color-mix(in oklab, var(--ep-accent) 55%, transparent);
  outline-offset:2px;
}

.app-shell main table,
.ep-shell main table{
  width:100%;
  border-collapse:collapse;
  color:var(--ep-text);
  font-size:13px;
}
.app-shell main th,
.app-shell main td,
.ep-shell main th,
.ep-shell main td{
  padding:10px 12px;
  border-color:var(--ep-border-soft);
  vertical-align:middle;
}
.app-shell main th,
.ep-shell main th{
  color:var(--ep-text-muted) !important;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
}
.app-shell main thead,
.app-shell main thead th,
.ep-shell main thead,
.ep-shell main thead th{
  background:var(--ep-surface-soft) !important;
}
.app-shell main tbody tr,
.ep-shell main tbody tr{
  transition:background-color .12s ease;
}
.app-shell main tbody > tr:hover > td:not(:has(table)),
.ep-shell main tbody > tr:hover > td:not(:has(table)){
  background:color-mix(in oklab, var(--ep-link) 7%, transparent);
}
.app-shell main :where(.table-wrap,.table-frame,.table-scroll,.ep-table-wrap),
.ep-shell main :where(.table-wrap,.table-frame,.table-scroll,.ep-table-wrap){
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:auto;
  overscroll-behavior-inline:contain;
}

.app-shell main :where(.pill,.badge,.chip,.status-pill),
.ep-shell main :where(.pill,.badge,.chip,.status-pill){
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:3px 10px;
  border:1px solid var(--ep-border-soft);
  border-radius:999px;
  background:var(--ep-surface-soft);
  color:var(--ep-text-muted);
  font-size:11px;
  font-weight:700;
  line-height:1.2;
}
.app-shell main :where(.error,.alert,.notice,.pricing-callout),
.ep-shell main :where(.error,.alert,.notice,.pricing-callout){
  border-radius:12px;
  line-height:1.45;
}

.modal-panel,
.modal-content,
.modal-card,
.ep-modal,
.ep-modal-card{
  border:1px solid var(--ep-border);
  border-radius:16px;
  background:var(--ep-surface);
  color:var(--ep-text);
}
.modal-header,
.modal-head,
.ep-modal-head{
  gap:12px;
  border-color:var(--ep-border-soft);
}
.modal-footer,
.modal-foot,
.ep-modal-foot{
  gap:10px;
  border-color:var(--ep-border-soft);
}

@media (max-width:760px){
  .app-shell main,
  .ep-shell main{
    padding-right:12px;
    padding-left:12px;
  }
  .app-shell main h1,
  .app-shell main .page-title,
  .ep-shell main h1,
  .ep-shell main .page-title{
    font-size:26px;
  }
  .app-shell main .card,
  .app-shell main .panel,
  .app-shell main .box,
  .ep-shell main .card,
  .ep-shell main .panel,
  .ep-shell main .box{
    padding:14px;
  }
  .app-shell main .form-grid,
  .app-shell main .form-grid.locked,
  .app-shell main :where(.grid2,.grid3,.ep-grid,.ep-grid-3),
  .ep-shell main .form-grid,
  .ep-shell main .form-grid.locked,
  .ep-shell main :where(.grid2,.grid3,.ep-grid,.ep-grid-3){
    grid-template-columns:1fr;
  }
  .app-shell main :where(.header-row,.page-header,.page-head,.ep-row),
  .ep-shell main :where(.header-row,.page-header,.page-head,.ep-row){
    align-items:flex-start;
  }
  .app-shell main :where(.card-actions,.ep-actions,.footer-actions,.toolbar),
  .ep-shell main :where(.card-actions,.ep-actions,.footer-actions,.toolbar){
    max-width:100%;
    flex-wrap:wrap;
  }
  .modal-backdrop,
  .modal{
    padding:10px;
  }
  .modal-panel,
  .modal-content,
  .modal-card,
  .ep-modal,
  .ep-modal-card{
    max-width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
  }
}