/* EZ360PM UI theme + responsive shell
   - Blue/Green brand tokens
   - Light/Dark toggle via [data-theme]
   - Sidebar collapses on mobile; scrolls when overflow
*/

:root{
  --ez-blue: #1f5fbf;
  --ez-blue-2: #184c9b;
  --ez-green: #38b26f;
  --ez-green-2: #2a8a55;

  --ez-bg: #ffffff;
  --ez-surface: #ffffffbb;
  --ez-muted-bg: #ffffff;
  --ez-border: #e5e7eb;

  --ez-text: #0f172a;
  --ez-text-muted: #64748b;

  --ez-link: var(--ez-blue);
  --ez-link-hover: var(--ez-blue-2);

  --topbar-h: 100px;
  --sidebar-w: 270px;

  /* Bootstrap token overrides (Phase 8H brand pass)
     Keep the project on Bootstrap while ensuring EZ360PM looks intentional.
  */
  --bs-primary: var(--ez-blue);
  --bs-success: var(--ez-green);
  --bs-link-color: var(--ez-link);
  --bs-link-hover-color: var(--ez-link-hover);
  --bs-border-color: var(--ez-border);
  --bs-body-color: var(--ez-text);
  --bs-body-bg: var(--ez-bg);

  /* Card baseline (Phase 9 UI consistency)
     Many templates already use `card shadow-sm`, but we want every card
     (even ones missing `shadow-sm`) to feel consistent and intentional.
  */
  --ez-card-shadow: 0 .125rem .25rem rgba(0,0,0,.075);

/* UI layer surfaces */
  --ez-nav-bg: #F3F6FB;
  --ez-sidebar-bg: #F8FAFC;
  --ez-card-bg: #F9FBFD;
  --ez-card-border: #E5EAF1;
  --ez-input-bg: #FFFFFF;
}

/* -------------------------
   Onboarding stepper
-------------------------- */

.ez-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: var(--bs-body-bg);
}

.ez-stepper__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ez-stepper__line {
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,.10);
}

.ez-stepper__dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  color: #111827;
  flex: 0 0 auto;
}

.ez-stepper__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.ez-stepper__item.is-current .ez-stepper__dot {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.ez-stepper__item.is-current .ez-stepper__label {
  color: #111827;
}

.ez-stepper__item.is-done .ez-stepper__dot {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.35);
}

.ez-stepper__item.is-todo .ez-stepper__dot {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
}

@media (max-width: 576px) {
  .ez-stepper {
    gap: 6px;
    padding: 10px;
  }
  .ez-stepper__label {
    display: none;
  }
}

/* Dark theme */
html[data-theme="dark"]{
  /* Dark theme readability pass (mobile-first):
     Increase contrast by lifting surface tones and brightening text.
     Avoid “near-black on near-black” which makes Safari mobile feel washed out.
  */
  --ez-bg: #0a1020;
  --ez-surface: #121c32;
  --ez-muted-bg: #0a1020;
  --ez-border: #2b3b55;

  --ez-text: #f1f5f9;
  --ez-text-muted: #cbd5e1;

  --ez-link: #7fb3ff;
  --ez-link-hover: #a6c9ff;

  --bs-primary: #7fb3ff;
  --bs-success: #38b26f;
  --bs-link-color: var(--ez-link);
  --bs-link-hover-color: var(--ez-link-hover);
  --bs-border-color: var(--ez-border);
  --bs-body-color: var(--ez-text);
  --bs-body-bg: var(--ez-bg);

  --ez-card-shadow: 0 .125rem .25rem rgba(0,0,0,.35);

/* UI layer surfaces (dark) */
  --ez-nav-bg: var(--ez-surface);
  --ez-sidebar-bg: var(--ez-muted-bg);
  --ez-card-bg: var(--ez-surface);
  --ez-card-border: var(--ez-border);
  --ez-input-bg: var(--ez-surface);
}

a{ color: var(--ez-link); }
a:hover{ color: var(--ez-link-hover); }

/* Buttons (brand-aligned without re-theming Bootstrap) */
.btn-ez{
  background: linear-gradient(180deg, var(--ez-blue), var(--ez-blue-2));
  border-color: rgba(0,0,0,.02);
}
.btn-ez:hover,
.btn-ez:focus{
  background: linear-gradient(180deg, var(--ez-blue-2), #123a78);
}
.btn-outline-primary{
  border-color: rgba(31,95,191,.35);
  color: var(--ez-text);
}
.btn-outline-primary:hover{
  background: rgba(31,95,191,.10);
  color: var(--ez-text);
}

/* Secondary defaults: keep all secondary variants on brand blue */
.btn-outline-secondary{
  border-color: rgba(31,95,191,.35) !important;
  color: var(--ez-text) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-check:checked + .btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary.show{
  border-color: rgba(31,95,191,.56) !important;
  background: rgba(31,95,191,.10) !important;
  color: var(--ez-text) !important;
}

/* Standardize legacy dark-outline buttons to brand blue secondary style */
.btn-outline-dark{
  border-color: rgba(31,95,191,.38) !important;
  color: var(--ez-text) !important;
}
.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-check:checked + .btn-outline-dark,
.btn-outline-dark.active,
.btn-outline-dark.show{
  border-color: rgba(31,95,191,.56) !important;
  background: rgba(31,95,191,.10) !important;
  color: var(--ez-text) !important;
}

/* Dark button class is used as active/secondary in many templates.
   Map it to brand blue so black no longer appears. */
.btn-dark,
.btn-dark:disabled,
.btn-dark.disabled{
  background-color: var(--ez-blue) !important;
  border-color: var(--ez-blue) !important;
  color: #fff !important;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-check:checked + .btn-dark,
.btn-dark.active,
.btn-dark.show{
  background-color: var(--ez-blue-2) !important;
  border-color: var(--ez-blue-2) !important;
  color: #fff !important;
}

/* Form controls: consistent radius + focus ring */
.form-control,
.form-select,
.input-group-text{
  border-radius: .75rem;
  border-color: var(--ez-border);
}

/* Selects: make dropdowns feel intentional across browsers */
.form-select{
  min-height: 2.5rem;
  padding-top: .55rem;
  padding-bottom: .55rem;
  padding-left: .95rem;
  padding-right: 2.35rem;
  background-color: #fff !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  background-position: right .85rem center;
  background-size: 14px 10px;
}
html[data-theme="dark"] .form-select{
  background-color: rgba(255,255,255,.03) !important;
}
.form-select:disabled{
  opacity: .75;
}
.form-control:focus,
.form-select:focus{
  border-color: rgba(31,95,191,.45) !important;
  box-shadow: 0 0 0 .2rem rgba(31,95,191,.15) !important;
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text{
  background: rgba(255,255,255,.03) !important;
  color: var(--ez-text) !important;
}

/* Subtle divider styling for headers/footers */
.card .card-footer{
  background: transparent;
  border-top-color: var(--ez-border);
}

.navbar{
  background: var(--ez-surface) !important;
  border-bottom-color: var(--ez-border) !important;
}

/* Topbar sizing + iOS safe-area support */
.ez-topbar{
  min-height: var(--topbar-h);
}
@supports (padding-top: env(safe-area-inset-top)){
  .ez-topbar{
    padding-top: max(.25rem, env(safe-area-inset-top));
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
  }
}

/* Brand logo must never exceed the topbar height (fixes iOS overlap) */
.ez-brand-logo{
  height: 80px;
  width: auto;
  max-height: 80px;
  display: block;
}
@media (max-width: 575.98px){
  .ez-brand-logo{ height: 34px; max-height: 34px; }
}

.app-shell {
    display: flex;
    min-height: calc(100vh - 64px); /* adjust if your navbar height differs */
}

.app-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
}

.app-body{ flex:1; display:flex; min-height:0; }

.app-sidebar{
  width: var(--sidebar-w);
  border-right: 1px solid var(--ez-border);
  background: var(--ez-surface);
  height: auto;
  max-height: none;
  overflow: visible;
}

/* Desktop: allow sidebar recents flyouts to render outside the sidebar
   instead of being clipped by overflow-x hidden. Keep scrolling on inner body. */
@media (min-width: 992px){
  .app-shell{
    overflow: visible;
  }
  .app-sidebar{
    position: relative;
    top: auto;
    align-self: flex-start;
    max-height: none;
    overflow: visible;
    z-index: 1030;
  }
  .app-sidebar > .p-3{
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

.app-main{
  flex:1;
  min-width:0;
  overflow: visible;
  background: var(--ez-muted-bg);
  padding: 24px 32px;
}

.sidebar-link{
  padding: .55rem .75rem;
  border-radius: .6rem;
  color: var(--ez-text);
  text-decoration:none;
  display:flex;
  gap:.6rem;
  align-items:center;
  position: relative;
}
.sidebar-link:hover{ background: rgba(148,163,184,.18); }
html[data-theme="dark"] .sidebar-link:hover{ background: rgba(148,163,184,.12); }

.sidebar-link.active{
  background: linear-gradient(90deg, rgba(31,95,191,.14), rgba(56,178,111,.12));
  border: 1px solid rgba(31,95,191,.18);
}

/* Active indicator bar (keeps layout stable) */
.sidebar-link.active::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--ez-blue), var(--ez-green));
}

.sidebar-pin-toggle{
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.sidebar-link:hover .sidebar-pin-toggle,
.sidebar-link:focus-within .sidebar-pin-toggle{
  pointer-events: auto;
  opacity: 1;
}

/* Keep document row flyout (+) controls aligned on the far outside-right edge */
.ez-sidebar-doc-link{
  position: relative;
  padding-right: 2rem;
}
.ez-sidebar-doc-link .sidebar-flyout-toggle{
  position: absolute;
  right: .45rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  flex: 0 0 auto;
}

.ez-sidebar-pinned{
  border: 1px dashed var(--ez-border);
  border-radius: .7rem;
  padding: .5rem;
}

.ez-sidebar-flyout{
  display: none;
  margin: .25rem 0 .5rem 1.8rem;
  padding: .5rem;
  border: 1px solid var(--ez-border);
  border-radius: .7rem;
  background: var(--ez-surface);
}
.ez-sidebar-flyout.is-open{ display: block; }
.ez-sidebar-flyout__title{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ez-text-muted);
  margin: 0 0 .4rem 0;
  font-weight: 700;
}

/* JS-driven floating mode for desktop flyouts.
   Uses viewport coordinates to avoid clipping by sidebar/main containers. */
.ez-sidebar-flyout.is-floating{
  position: fixed !important;
  width: min(320px, 42vw);
  z-index: 4000;
  overflow-y: auto;
}

.ez-sidebar-group{
  position: relative;
}

@media (min-width: 992px){
  .ez-sidebar-group .ez-sidebar-flyout{
    position: absolute;
    top: 0;
    left: calc(100% + .45rem);
    width: min(320px, 42vw);
    margin: 0;
    z-index: 1080;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
    background: var(--ez-bg);
  }
}

@media (max-width: 991.98px){
  .ez-sidebar-group .ez-sidebar-flyout{
    position: static;
    width: auto;
    margin: .25rem 0 .5rem 1.8rem;
    box-shadow: none;
  }
}

/* Card system (Phase 8/9): baseline card consistency across the app */
.card{
  border: 0 !important;
  border-radius: 1rem !important;
  box-shadow: var(--ez-card-shadow);
  background: var(--ez-surface);
}
.card .card-header{
  background: transparent;
  border-bottom-color: var(--ez-border);
}

/* Keep legacy `shadow-sm` markup harmless (many templates still include it) */
.card.shadow-sm{ box-shadow: var(--ez-card-shadow); }

/* Document Composer (Phase 9): "paper" editing surface */
.ez-paper-wrap{
  display: flex;
  justify-content: center;
}
.ez-paper{
  width: 100%;
  max-width: 940px;
  background: var(--ez-surface);
  border-radius: 1rem;
  box-shadow: var(--ez-card-shadow);
  padding: 1.5rem;
}
@media (min-width: 992px){
  .ez-paper{ padding: 2rem; }
}
/* Make inputs feel like editable text */
.ez-paper .form-control,
.ez-paper .form-select,
.ez-paper textarea{
  border-radius: .75rem;
}
.ez-paper .ez-inline-input{
  border: 1px solid transparent;
  background: transparent;
  padding-left: .35rem;
  padding-right: .35rem;
}
.ez-paper .ez-inline-input:focus{
  border-color: var(--ez-border);
  background: rgba(31,95,191,.04);
  box-shadow: none;
}
.ez-paper .ez-totals{
  border-top: 1px solid var(--ez-border);
  padding-top: 1rem;
}

/* Page headers */
.ez-page-title{
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: .25rem;
  color: var(--ez-green);
  font-weight: 700;
}
.ez-page-subtitle{
  font-size: .9rem;
}

/* Utility: EZ360PM brand green text */
.text-ez-green {
  color: var(--ez-green) !important;
}

.text-ez-blue {
  color: var(--ez-blue) !important;
}

/* Tables inside cards */
.ez-table{
  margin-bottom: 0;
}

/* CRM client actions dropdown should not be clipped by table wrapper */

/* Tables with dropdown actions: Bootstrap .table-responsive clips dropdown menus.
   We allow vertical overflow so action menus are not hidden (proposals/invoices/etc). */
.table-responsive{
  overflow-y: visible;
}
.table-responsive{
  overflow-x: auto;
}

.clients-table-responsive{
  overflow: visible;
}
.ez-table thead th{
  font-size: .85rem;
  font-weight: 600;
}

/* Sticky context columns for wide, horizontally scrollable tables */
.ez-table .ez-sticky-col{
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--ez-surface);
}
.ez-table .ez-sticky-col-2{
  position: sticky;
  left: 8rem;
  z-index: 2;
  background: var(--ez-surface);
}
.ez-table thead .ez-sticky-col{
  z-index: 3;
  background: var(--ez-nav-bg);
}
.ez-table thead .ez-sticky-col-2{
  z-index: 3;
  background: var(--ez-nav-bg);
}

/* Light status badges for list tables */
.ez-badge-status{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .2rem .5rem;
  border: 1px solid transparent;
}
.ez-status-draft{ background: rgba(100,116,139,.12); color: #475569; border-color: rgba(100,116,139,.25); }
.ez-status-active{ background: rgba(34,197,94,.12); color: #166534; border-color: rgba(34,197,94,.26); }
.ez-status-on_hold{ background: rgba(245,158,11,.15); color: #92400e; border-color: rgba(245,158,11,.28); }
.ez-status-completed{ background: rgba(59,130,246,.14); color: #1d4ed8; border-color: rgba(59,130,246,.28); }
.ez-status-canceled{ background: rgba(239,68,68,.14); color: #991b1b; border-color: rgba(239,68,68,.28); }

.ez-status-recurring{ background: rgba(31,95,191,.12); color: #1f4da0; border-color: rgba(31,95,191,.25); }
.ez-status-one_off{ background: rgba(56,178,111,.12); color: #1c6b43; border-color: rgba(56,178,111,.24); }
.ez-status-archived{ background: rgba(107,114,128,.14); color: #374151; border-color: rgba(107,114,128,.28); }

/* Topbar control consistency */
.ez-topbar-btn{
  min-height: 32px;
}

/* Icon buttons (action columns) */
.btn-icon{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Dropdown menus: consistent radius + shadow regardless of page */
.dropdown-menu{
  border-radius: .85rem;
  border-color: var(--ez-border);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}
html[data-theme="dark"] .dropdown-menu{
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.dropdown-item{
  padding: .55rem .9rem;
}
.dropdown-item:active{
  background: rgba(31,95,191,.12);
  color: var(--ez-text);
}

.badge-soft{
  background: rgba(31,95,191,.10);
  color: var(--ez-blue);
  border: 1px solid rgba(31,95,191,.18);
}
html[data-theme="dark"] .badge-soft{
  background: rgba(127,179,255,.10);
  color: #7fb3ff;
  border-color: rgba(127,179,255,.18);
}

/* Topbar action group collapsing (JS toggles .is-open) */
#topbarActions{
  display:flex;
  align-items:center;
  gap:.5rem;
}
@media (max-width: 991.98px){
  #topbarActions{
    display:none;
    position:absolute;
    right: .75rem;
    top: calc(var(--topbar-h) + .5rem);
    /* Mobile: force opaque background for readability */
    background: #ffffff;
    border: 1px solid var(--ez-border);
    border-radius: .75rem;
    padding: .5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    z-index: 1050;
    flex-direction: column;
    align-items: stretch;
    min-width: 240px;
  }
  #topbarActions.is-open{ display:flex; }
}

/* Sidebar collapse on mobile */
#sidebarOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1035;
}
body.sidebar-open #sidebarOverlay{
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 991.98px){
  .app-sidebar{
    position: fixed;
    left: calc(-1 * var(--sidebar-w));
    top: var(--topbar-h);
    z-index: 1040;
    transition: left .2s ease;
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
  }
  body.sidebar-open .app-sidebar{ left: 0; }
  /* main should not be blocked */
  .app-body{ position:relative; }

  /* Mobile sidebar: use solid background for readability (avoid translucent --ez-surface) */
  .app-sidebar{
    background: #ffffff;
  }
  html[data-theme="dark"] .app-sidebar{
    background: #0f172a;
  }
}

/* Buttons */
.btn-ez{
  background: linear-gradient(90deg, var(--ez-blue), var(--ez-green));
  border: none;
  color: #fff !important;
}
.btn-ez:hover{ filter: brightness(.95); }

.btn-outline-ez{
  border-color: rgba(31,95,191,.35);
  color: var(--ez-text);
}
.btn-outline-ez:hover{
  border-color: rgba(31,95,191,.55);
  background: rgba(31,95,191,.08);
}

/* Form polish */
.form-control, .form-select, .input-group-text{
  border-color: var(--ez-border);
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text{
  background: rgba(15,23,42,.9);
  color: var(--ez-text);
  border-color: var(--ez-border);
}


/* Prevent background scroll when mobile sidebar is open */
body.no-scroll{ overflow: hidden; }


/* Accessibility */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:9999;
}
.skip-link:focus{
  left:12px;
  top:12px;
  width:auto;
  height:auto;
  padding:8px 12px;
  border-radius:10px;
  background: var(--ez-surface);
  border:1px solid var(--ez-border);
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}

:focus-visible{
  outline: 3px solid rgba(0, 132, 255, .45);
  outline-offset: 2px;
}


/* Phase 8I: Mobile polish */
@media (max-width: 575.98px){
  .clients-table-responsive{
    overflow-x: auto;
    overflow-y: visible;
  }

  /* make action popover fit viewport */
  #topbarActions{
    left: .75rem;
    right: .75rem;
    min-width: unset;
  }
  /* timer dropdown menu should not overflow on small screens */
  #timerDropdownMenu{
    min-width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem);
  }
  /* tables: allow horizontal scroll with a sensible minimum width */
  .table-responsive > table{
    min-width: 720px;
  }
  /* sticky form footer safe-area padding */
  .ez-form-footer{
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
  }

  html[data-theme="dark"] #topbarActions{
    background: #121c32;
    border-color: rgba(255,255,255,.12);
  }

  /* Mobile actions panel: boost contrast in dark mode (iOS Safari) */
  html[data-theme="dark"] #topbarActions .btn,
  html[data-theme="dark"] #topbarActions .dropdown-toggle,
  html[data-theme="dark"] #topbarActions .form-control,
  html[data-theme="dark"] #topbarActions .form-select{
    background: rgba(255,255,255,.06);
    color: var(--ez-text);
    border-color: rgba(255,255,255,.14);
  }
  html[data-theme="dark"] #topbarActions .btn:hover,
  html[data-theme="dark"] #topbarActions .dropdown-toggle:hover{
    background: rgba(255,255,255,.10);
  }
  html[data-theme="dark"] #topbarActions .dropdown-menu{
    background: #121c32;
    border-color: rgba(255,255,255,.14);
  }
  html[data-theme="dark"] #topbarActions .dropdown-item{
    color: var(--ez-text);
  }
  html[data-theme="dark"] #topbarActions .dropdown-item:hover{
    background: rgba(255,255,255,.08);
  }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .offcanvas, .collapse{ transition: none !important; }
}

/* Phase 8D: forms UX upgrade */
.ez-form{
  padding-bottom: 96px; /* space for sticky footer inside scrolling main */
}
.ez-form-footer{
  position: sticky;
  bottom: 0;
  z-index: 1020;
  width: 100%;
  max-width: var(--ez-form-max-width, 1100px);
  margin-left: auto;
  margin-right: auto;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--ez-border);
  border-radius: .9rem;
  padding: .75rem .9rem;
  box-shadow: 0 -10px 30px rgba(0,0,0,.05);
  backdrop-filter: blur(6px);
}
html[data-theme="dark"] .ez-form-footer{
  background: rgba(15,23,42,.88);
}

/* Phase 8R: Ops Console toolbar overflow handling */
.ez-ops-toolbar{
  align-items: center;
}

@media (max-width: 992px){
  .ez-ops-toolbar{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: .25rem;
    -webkit-overflow-scrolling: touch;
  }
  .ez-ops-toolbar .btn{
    white-space: nowrap;
  }
}


/* ==========================================================
   PHASE: UI LAYER CONSISTENCY (Navbar/Sidebar/Cards/Inputs)
   - Adds subtle structural contrast for a premium SaaS feel.
   - IMPORTANT: Does NOT change active sidebar item styling.
   ========================================================== */

body{
  background-color: var(--ez-bg);
  color: var(--ez-text);
}

/* Navbar: subtle tint + divider + soft shadow */
.navbar{
  background: var(--ez-nav-bg) !important;
  border-bottom: 1px solid var(--ez-border) !important;
  box-shadow: 0 2px 6px rgba(31, 95, 191, 0.04);
}

/* Sidebar surface (active item styles remain controlled by existing rules) */
.sidebar,
#sidebar{
  background: var(--ez-sidebar-bg);
  border-right: 1px solid var(--ez-border);
}

/* Cards: light surface + border for hierarchy */
.card{
  background: var(--ez-nav-bg) !important;
  border: 1px solid var(--ez-card-border) !important;
  border-radius: 1rem !important;
}

/* Card headers remain clean but separated */
.card .card-header{
  background: transparent;
  border-bottom: 1px solid var(--ez-card-border);
  font-weight: 600;
}

/* Inputs: white on cards + branded focus ring */
.form-control,
.form-select{
  background-color: var(--ez-input-bg);
  border: 1px solid #D6DEE8;
  border-radius: .75rem;
}

.form-control:focus,
.form-select:focus{
  border-color: var(--ez-blue);
  box-shadow: 0 0 0 .2rem rgba(31, 95, 191, 0.12);
}

/* Tables: subtle header tint + row hover */
.table thead{
  background-color: var(--ez-nav-bg);
}

.table-hover tbody tr:hover{
  background-color: rgba(15, 23, 42, 0.03);
}

/* Dropdowns: consistent elevation */
.dropdown-menu{
  border-radius: .9rem;
  border: 1px solid var(--ez-card-border);
  box-shadow: 0 8px 24px rgba(31, 95, 191, 0.08);
}

/* Modals: match dropdown elevation */
.modal-content{
  border-radius: 1rem;
  border: 1px solid var(--ez-card-border);
  box-shadow: 0 16px 40px rgba(31, 95, 191, 0.10);
}

/* ==========================================================
   DASHBOARD CHARTS
   ========================================================== */

.ez-chart-wrap{
  position: relative;
  width: 100%;
  height: 260px;
}

.ez-chart{
  width: 100% !important;
  height: 100% !important;
}


/* ===== MOBILE DROPDOWN FIX ===== */
@media (max-width: 992px) {
  .dropdown-menu {
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    border: 1px solid #e5e7eb;
    z-index: 1050;
  }

  .dropdown-item {
    color: #111827 !important;
  }

  .dropdown-item:hover,
  .dropdown-item:focus {
    background-color: #f1f5f9 !important;
  }

  /* Keep mobile dropdowns readable in dark theme */
  html[data-theme="dark"] .dropdown-menu {
    background-color: #121c32 !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
  }

  html[data-theme="dark"] .dropdown-item {
    color: var(--ez-text) !important;
  }

  html[data-theme="dark"] .dropdown-item:hover,
  html[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(255,255,255,.08) !important;
  }
}

/* Dark-mode topbar readability pass (theme toggle + nav controls) */
html[data-theme="dark"] .navbar .navbar-brand,
html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .navbar .navbar-text,
html[data-theme="dark"] .navbar .btn-outline-dark,
html[data-theme="dark"] .navbar .btn-outline-secondary,
html[data-theme="dark"] .navbar .btn-outline-ez {
  color: #f8fafc !important;
}

html[data-theme="dark"] .navbar .btn-outline-dark,
html[data-theme="dark"] .navbar .btn-outline-secondary,
html[data-theme="dark"] .navbar .btn-outline-ez {
  border-color: rgba(255,255,255,.35);
}

html[data-theme="dark"] .navbar .btn-outline-dark:hover,
html[data-theme="dark"] .navbar .btn-outline-secondary:hover,
html[data-theme="dark"] .navbar .btn-outline-ez:hover {
  background: rgba(255,255,255,.10);
  color: #ffffff !important;
}

html[data-theme="dark"] #themeToggleBtn {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.45);
}

/* Global dark-mode contrast pass for template text/readability */
html[data-theme="dark"] {
  --bs-emphasis-color: #f8fafc;
  --bs-secondary-color: #cbd5e1;
  --bs-secondary-color-rgb: 203, 213, 225;
  --bs-tertiary-color: #94a3b8;
  --bs-tertiary-color-rgb: 148, 163, 184;
}

html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-body-secondary,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] small,
html[data-theme="dark"] .small {
  color: #dbe4ef !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .table,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .offcanvas-body,
html[data-theme="dark"] .offcanvas-header {
  color: #f1f5f9;
}


/* --------------------------------------------------------------------------
   Public marketing promo banner (Ops SiteConfig controlled)
   -------------------------------------------------------------------------- */
.ez-promo-banner{
  padding: 10px 0;
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.ez-promo-banner .ez-promo-text{
  line-height: 1.25;
}

.ez-promo-banner .ez-promo-cta{
  font-weight: 700;
  border-radius: 8px;
}

.ez-promo-green{
  background: var(--ez-green);
  color: #ffffff;
}

.ez-promo-blue{
  background: var(--ez-blue);
  color: #ffffff;
}

.ez-promo-orange{
  background: #e57a1f;
  color: #ffffff;
}

.ez-promo-dark{
  background: #111827;
  color: #ffffff;
}



/* Ensure table action menus appear above sticky headers/footers */
.table-responsive .dropdown-menu{ z-index: 2000; }

/* --------------------------------------------------------------------------
   LIST PAGES: make table screens feel full-width (less boxed) and prevent
   action buttons/menus from being clipped.
   -------------------------------------------------------------------------- */
.app-main .table-responsive,
.app-main .ez-table,
.app-main .ez-table td,
.app-main .ez-table th,
.app-main .btn-group,
.app-main .dropdown-menu{
  overflow: visible;
}

.app-main .table-responsive{
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.app-main .ez-table .dropdown-menu{
  z-index: 5000;
}

@supports selector(.card:has(.ez-table)){
  /* Flatten list/table cards so they render as line-item sections */
  .app-main .card:has(.ez-table),
  .app-main .card:has(> .table-responsive),
  .app-main .card:has(form.row.g-2),
  .app-main .card:has(form.row.g-2.align-items-center),
  .app-main .card:has(form.row.g-2.align-items-end){
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
  }
}