:root{
  --card-radius: 18px;
  --shadow: 0 14px 34px rgba(16, 24, 40, .08);
  --shadow-hover: 0 18px 45px rgba(16, 24, 40, .12);
  --border: 1px solid rgba(16, 24, 40, .08);

  --accent-1: #6d5efc;
  --accent-2: #20c997;
  --accent-3: #ff7a59;
  --accent-4: #0dcaf0;
}

/* page */
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(109, 94, 252, .14), transparent 60%),
    radial-gradient(900px 420px at 80% 10%, rgba(32, 201, 151, .12), transparent 55%),
    linear-gradient(180deg, #f7f8ff 0%, #f6fbff 40%, #f7fffb 100%);
}

/* navbar */
.navbar.bg-dark{
  background: linear-gradient(135deg, rgba(109, 94, 252, 1), rgba(13, 110, 253, 1)) !important;
}
.navbar .nav-link{
  opacity: .95;
  transition: opacity .15s ease, transform .15s ease;
}
.navbar .nav-link:hover{
  opacity: 1;
  transform: translateY(-1px);
}
.navbar .navbar-brand{
  letter-spacing: .2px;
}

/* cards */
.card{
  border-radius: var(--card-radius);
  border: var(--border);
  box-shadow: var(--shadow);
}
.card.kpi{
  transition: transform .15s ease, box-shadow .15s ease;
}
.card.kpi:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.kpi{
  min-height: 112px;
}
.kpi .icon{
  width: 48px;
  height: 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 16px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
}

/* KPI variants */
.kpi.bg-dark{
  background: linear-gradient(135deg, var(--accent-1), #0d6efd) !important;
}
.kpi .icon.bg-success{ background: linear-gradient(135deg, #20c997, #198754) !important; }
.kpi .icon.bg-primary{ background: linear-gradient(135deg, #6d5efc, #0d6efd) !important; }
.kpi .icon.bg-info{ background: linear-gradient(135deg, #0dcaf0, #0d6efd) !important; }
.kpi .icon.bg-warning{ background: linear-gradient(135deg, #ffc107, #ff7a59) !important; }
.kpi .icon.bg-danger{ background: linear-gradient(135deg, #ff4d6d, #dc3545) !important; }

/* badges */
.badge-soft{
  background: rgba(109, 94, 252, .14);
  color: #3b2ff8;
  border: 1px solid rgba(109, 94, 252, .18);
}
.navbar .badge-soft{
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
}

/* normal tables only */
.table:not(.sheet-table) thead th{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  z-index: 2;
  border-bottom: 1px solid rgba(16, 24, 40, .08);
}

/* buttons */
.btn-dark{
  border: none;
  background: linear-gradient(135deg, var(--accent-1), #0d6efd);
  box-shadow: 0 10px 24px rgba(13, 110, 253, .18);
}
.btn-dark:hover{
  filter: brightness(1.02);
}
.btn-outline-dark{
  border-color: rgba(16, 24, 40, .18);
}
.btn-outline-dark:hover{
  background: rgba(109, 94, 252, .10);
  border-color: rgba(109, 94, 252, .28);
  color: #1c1c1c;
}

/* inputs */
.form-control:focus,
.form-select:focus{
  border-color: rgba(109, 94, 252, .45);
  box-shadow: 0 0 0 .25rem rgba(109, 94, 252, .16);
}

/* brand dot */
.brand-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
  display:inline-block;
  box-shadow: 0 0 0 4px rgba(255, 122, 89, .14);
}




/* v2.7.2 compact tenant navigation */
.tenant-mega-menu{
  width:min(920px,calc(100vw - 2rem));
  max-height:calc(100vh - 90px);
  overflow-y:auto;
  border:0;
  box-shadow:0 18px 45px rgba(16,24,40,.18);
}
.tenant-operations-menu{width:min(860px,calc(100vw - 2rem));}
.tenant-menu-heading{
  font-size:.76rem;
  font-weight:700;
  color:#667085;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:.35rem .75rem .45rem;
  border-bottom:1px solid rgba(16,24,40,.08);
  margin-bottom:.35rem;
}
.tenant-mega-menu .dropdown-item{
  border-radius:.45rem;
  padding:.42rem .75rem;
  white-space:normal;
}
.tenant-mega-menu .dropdown-item:hover{background:rgba(109,94,252,.09);}
.workflow-choice{cursor:pointer;transition:.15s ease;}
.workflow-choice:hover{background:rgba(109,94,252,.05);}
@media (max-width:991.98px){
  .tenant-mega-menu,.tenant-operations-menu{width:100%;max-height:none;box-shadow:none;border:1px solid rgba(255,255,255,.12);}
  .tenant-menu-heading{color:#344054;background:#f8f9fa;border-radius:.4rem;}
}

/* v2.7.2.1 responsive tenant menu hotfix
   Bootstrap column breakpoints are viewport-based, not dropdown-width-based.
   The menu therefore uses its own container-responsive grid to prevent overlap. */
@media (min-width: 992px){
  .tenant-mega-menu{
    width:min(920px,calc(100vw - 2rem));
    min-width:min(920px,calc(100vw - 2rem));
    max-width:calc(100vw - 2rem);
    padding:1rem !important;
  }
  .tenant-operations-menu{
    width:min(860px,calc(100vw - 2rem));
    min-width:min(860px,calc(100vw - 2rem));
  }
}

/* Replace Bootstrap's fixed responsive columns inside mega menus. */
.tenant-mega-menu > .row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(195px,1fr));
  gap:1rem;
  margin:0;
}
.tenant-mega-menu > .row > [class*="col-"]{
  width:auto;
  max-width:none;
  min-width:0;
  padding:0;
}
.tenant-mega-menu .tenant-menu-heading{
  display:flex;
  align-items:center;
  gap:.45rem;
  white-space:normal;
  line-height:1.25;
}
.tenant-mega-menu .dropdown-item{
  display:block;
  width:100%;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.3;
}

/* Operations has two main sections; nested item columns stay responsive. */
.tenant-operations-menu > .row{
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
}
.tenant-operations-menu > .row > [class*="col-"] > .row{
  margin-left:0;
  margin-right:0;
}
.tenant-operations-menu > .row > [class*="col-"] > .row > [class*="col-"]{
  min-width:0;
}

@media (max-width: 991.98px){
  .tenant-mega-menu > .row,
  .tenant-operations-menu > .row{
    grid-template-columns:1fr;
    gap:.5rem;
  }
  .tenant-mega-menu{
    overflow:visible;
  }
}

@media (max-width: 575.98px){
  .tenant-operations-menu > .row > [class*="col-"] > .row{
    display:grid;
    grid-template-columns:1fr;
  }
  .tenant-operations-menu > .row > [class*="col-"] > .row > [class*="col-"]{
    width:auto;
    max-width:none;
  }
}

/* v2.7.3 server-side searchable purchasing selectors */
.erp-remote-native{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.erp-remote-select{min-width:0;}
.erp-remote-select .input-group{flex-wrap:nowrap;}
.erp-remote-input{padding-right:2.6rem;}
.erp-remote-clear{min-width:2.45rem;}
.erp-remote-loading{
  position:absolute;
  right:3rem;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  display:flex;
  align-items:center;
  color:var(--bs-secondary-color);
  pointer-events:none;
}
.erp-remote-menu{
  position:absolute;
  z-index:1080;
  left:0;
  right:0;
  top:calc(100% + .25rem);
  max-height:320px;
  overflow:auto;
  background:#fff;
  border:1px solid var(--bs-border-color);
  border-radius:.5rem;
  padding:.35rem;
}
.erp-remote-option{
  display:flex;
  flex-direction:column;
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  border-radius:.35rem;
  padding:.55rem .65rem;
  color:var(--bs-body-color);
}
.erp-remote-option:hover,.erp-remote-option.active{
  background:var(--bs-tertiary-bg);
}
.erp-remote-option-label{font-weight:600;line-height:1.25;}
.erp-remote-option-description{font-size:.78rem;color:var(--bs-secondary-color);margin-top:.15rem;line-height:1.25;}
.erp-remote-message{padding:.75rem;font-size:.875rem;}
.erp-remote-select.loading .erp-remote-input{padding-right:4.7rem;}
.purchase-line-lookup{min-width:290px;}
@media (max-width:767.98px){
  .erp-remote-menu{position:fixed;left:.75rem;right:.75rem;top:50%;bottom:auto;transform:translateY(-50%);max-height:55vh;}
}

/* v3.0.2 searchable/live-refresh sales selectors */
.erp-remote-refresh{min-width:2.45rem;}
.erp-remote-select.has-refresh .erp-remote-loading{right:5.5rem;}
.erp-lookup-actions{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;}

/* v3.1.0 Help Center and guided tutorials */
.erp-context-help{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:1045;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.5rem;
}
.erp-context-help .btn{display:flex;align-items:center;gap:.5rem;border-radius:999px;}
.help-guide-card{transition:transform .15s ease,box-shadow .15s ease;}
.help-guide-card:hover{transform:translateY(-2px);box-shadow:0 .75rem 1.5rem rgba(15,23,42,.12)!important;}
.help-checklist-card{display:block;border:1px solid var(--bs-border-color);border-radius:.75rem;padding:1rem;color:var(--bs-body-color);background:var(--bs-body-bg);}
.help-checklist-card:hover{border-color:var(--bs-primary);}
.help-article-section{margin-top:2.25rem;}
.help-article-section h2{font-size:1.25rem;margin-bottom:1rem;}
.help-steps{list-style:none;padding:0;margin:0;display:grid;gap:1rem;}
.help-steps li{display:flex;gap:1rem;align-items:flex-start;padding:1rem;border:1px solid var(--bs-border-color);border-radius:.75rem;background:var(--bs-tertiary-bg);}
.help-step-number{flex:0 0 2rem;width:2rem;height:2rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bs-primary);color:#fff;font-weight:700;}
.erp-help-overlay{position:fixed;inset:0;background:rgba(15,23,42,.56);z-index:2000;}
.erp-help-highlight{position:relative!important;z-index:2002!important;outline:4px solid rgba(var(--bs-primary-rgb),.9)!important;outline-offset:5px!important;border-radius:.35rem;box-shadow:0 0 0 9999px rgba(15,23,42,0)!important;}
.erp-help-tour-panel{position:fixed;z-index:2003;width:min(390px,calc(100vw - 2rem));background:#fff;color:#212529;border-radius:1rem;padding:1.25rem;}
.erp-help-tour-open{overflow:hidden;}
.manual-category{margin-top:3rem;padding-bottom:.5rem;border-bottom:2px solid var(--bs-primary);page-break-after:avoid;}
.manual-guide{padding:1.5rem 0;border-bottom:1px solid var(--bs-border-color);page-break-inside:avoid;}
.manual-guide h3{font-size:1.25rem;}
.manual-guide h4{font-size:1rem;margin-top:1rem;}
@media (max-width:575.98px){
  .erp-context-help .btn span{display:none;}
  .erp-context-help .btn{width:3rem;height:3rem;justify-content:center;padding:0;}
}
@media print{
  body{background:#fff!important;}
  nav.navbar,footer,.erp-context-help,.toast-container{display:none!important;}
  main{padding:0!important;}
  .help-manual .card{box-shadow:none!important;border:0!important;}
  .manual-guide{font-size:10.5pt;}
}

/* v3.3.0 viewport-safe tenant navigation
   Desktop mega menus use the navbar container as their positioning boundary.
   They always start from the left side of the navigation area and never extend
   beyond the viewport, regardless of which menu toggle was clicked. */
@media (min-width: 992px){
  .navbar > .container-fluid{
    position:relative;
  }
  .tenant-primary-nav .tenant-mega-dropdown{
    position:static;
  }
  .tenant-primary-nav .tenant-mega-dropdown > .tenant-mega-menu{
    position:absolute!important;
    top:calc(100% + .35rem)!important;
    left:1rem!important;
    right:1rem!important;
    bottom:auto!important;
    inset-inline-start:1rem!important;
    inset-inline-end:1rem!important;
    transform:none!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    max-height:calc(100vh - 5.5rem);
    overflow-x:hidden;
    overflow-y:auto;
  }
}

@media (max-width: 991.98px){
  .tenant-primary-nav .tenant-mega-dropdown > .tenant-mega-menu{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:.25rem 0 .5rem!important;
  }
}


/* v3.4.0 central notifications */
.notification-nav .nav-link{min-width:2.6rem;text-align:center;}
.notification-count{font-size:.62rem;line-height:1;padding:.3rem .38rem;margin-top:.28rem;margin-left:-.2rem;}
.notification-dropdown{width:min(390px,calc(100vw - 1.5rem));max-height:70vh;overflow:auto;}
.notification-preview-item{white-space:normal;padding:.75rem 1rem;border-bottom:1px solid var(--bs-border-color-translucent);}
.notification-preview-item small{line-height:1.3;margin-top:.2rem;}
.notification-card{transition:border-color .15s ease,box-shadow .15s ease;}
.notification-card.notification-unread{border-left:4px solid var(--bs-primary);box-shadow:0 .25rem .75rem rgba(15,23,42,.06);}
.notification-icon{flex:0 0 2.6rem;width:2.6rem;height:2.6rem;border-radius:.7rem;display:flex;align-items:center;justify-content:center;}
.min-w-0{min-width:0;}
@media(max-width:575.98px){.notification-dropdown{position:fixed!important;left:.75rem!important;right:.75rem!important;top:4.25rem!important;width:auto!important;max-height:75vh;transform:none!important;}}