/**
 * Shared Atlas polish for nav partials (public header, portal/app/supplier navbars, sidebars, footer).
 * Loads after atlas-tokens.css; complements app.css.
 */

/* ----- Unified portal shells (driver, customer, logged-in app pages, supplier / brands) ----- */
body.portal-layout.atlas-portal-layout,
body.app-layout.atlas-app-layout,
body.supplier-layout.atlas-supplier-layout {
  background:
    radial-gradient(circle at 10% 10%, rgba(156, 63, 18, 0.08), transparent 35%),
    radial-gradient(circle at 90% 90%, rgba(38, 103, 71, 0.08), transparent 35%),
    linear-gradient(180deg, #fff8f2 0%, #fff2de 100%);
  color: var(--atlas-on-background);
  font-family: var(--font-atlas-body);
}

.portal-app {
  /* Was layered paper + zellij in app.css; keep shell transparent so body gradient matches app/supplier */
  background: transparent;
}

/* app layout: navbar + main column fills space above shared footer */
.portal-app > .atlas-app-shell {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.portal-app > nav {
  flex-shrink: 0;
}

.portal-app > .supplier-portal-container,
.portal-app > .supplier-container-standalone {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.atlas-portal-layout .portal-navbar-wrap,
.atlas-portal-layout .portal-footer-wrap,
.atlas-app-layout .portal-footer-wrap,
.atlas-supplier-layout .portal-footer-wrap {
  backdrop-filter: saturate(115%);
}

.footer {
  background: var(--atlas-surface-container-low);
  color: var(--atlas-on-surface);
  border-top: 1px solid var(--atlas-outline-variant);
}

.footer a {
  color: var(--atlas-primary);
}

.footer a:hover {
  color: var(--atlas-primary-container);
}

.footer-disclaimer {
  border-top: 1px solid var(--atlas-outline-variant);
  color: var(--atlas-on-surface-variant);
}

.footer-bottom {
  color: var(--atlas-on-surface-variant);
}

.atlas-footer {
  border-top: 1px solid rgba(190, 201, 190, 0.35);
}

.atlas-footer-grid {
  gap: 1.25rem;
}

.atlas-footer .footer-section h4 {
  font-family: var(--font-atlas-display);
  margin-bottom: 0.55rem;
  color: var(--atlas-on-surface);
}

.atlas-footer .footer-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.atlas-footer .footer-section li + li {
  margin-top: 0.32rem;
}

.sidebar {
  font-family: var(--font-atlas-body);
}

.atlas-sidebar-head {
  margin: 0 0 0.8rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--atlas-radius-xl);
  background: var(--atlas-surface-container-low);
  border: 1px solid rgba(190, 201, 190, 0.25);
}

.atlas-sidebar-kicker {
  margin: 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--atlas-tertiary);
}

.atlas-sidebar-plan {
  margin: 0.2rem 0 0;
  font-size: 0.86rem;
  color: var(--atlas-on-surface);
  font-weight: 600;
}

.sidebar-menu a {
  border-radius: var(--atlas-radius-xl);
  transition: background 0.15s ease, color 0.15s ease;
}

.atlas-sidebar-link {
  border-radius: var(--atlas-radius-xl);
}

.sidebar-menu a:hover {
  background: color-mix(in srgb, var(--atlas-primary) 8%, transparent);
}

.sidebar-menu a.active {
  background: color-mix(in srgb, var(--atlas-primary) 14%, transparent);
  color: var(--atlas-primary);
  font-weight: 600;
}

.sidebar-supplier .sidebar-menu a.active {
  color: var(--atlas-primary);
}

.dashboard-sidebar-section-label {
  color: var(--atlas-on-surface-variant);
  font-family: var(--font-atlas-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.navbar-app,
.navbar-portal,
.navbar-supplier {
  font-family: var(--font-atlas-display);
  border-bottom: 1px solid var(--atlas-outline-variant);
  background: var(--atlas-surface-container-lowest);
}

.atlas-navbar-row {
  min-height: 62px;
}

.atlas-navbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.atlas-icon-btn {
  border: 1px solid transparent;
}

.atlas-icon-btn:hover {
  border-color: rgba(156, 63, 18, 0.22);
}

.atlas-navbar-brand .logo-sub {
  color: var(--atlas-on-surface-variant);
}

.atlas-navbar-title {
  font-family: var(--font-atlas-display);
}

.atlas-navbar-app .atlas-user-email {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-navbar-toggler {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.atlas-navbar-toggler span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.navbar-lang-select {
  font-family: var(--font-atlas-body);
  border: 1px solid var(--atlas-outline-variant);
  border-radius: var(--atlas-radius-xl);
  background: var(--atlas-surface-container-lowest);
  color: var(--atlas-on-surface);
  padding: 0.35rem 0.5rem;
}

.header-public .header-nav-link.is-active,
.header-drawer-link.is-active {
  color: var(--atlas-primary);
  font-weight: 600;
}

/* layouts/404.php */
.layout-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  background: var(--atlas-background);
  font-family: var(--font-atlas-body);
  color: var(--atlas-on-background);
}

.layout-404-inner {
  text-align: center;
  max-width: 28rem;
}

.layout-404-code {
  font-family: var(--font-atlas-display);
  font-size: clamp(4rem, 14vw, 6.5rem);
  font-weight: 800;
  color: var(--atlas-primary);
  line-height: 1;
  margin: 0 0 0.35rem;
  letter-spacing: -0.04em;
}

.layout-404 h1 {
  font-family: var(--font-atlas-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--atlas-on-surface);
  margin: 0 0 0.75rem;
}

.layout-404 p {
  margin: 0 0 1.75rem;
  color: var(--atlas-on-surface-variant);
  line-height: 1.5;
  font-size: 1rem;
}

.layout-404 .btn.btn-primary {
  display: inline-block;
  font-family: var(--font-atlas-display);
  font-weight: 600;
  border-radius: var(--atlas-radius-xl);
}

/* ----- Dark clay footer (same as public .layout-public .modern-public-footer) ----- */
body.portal-atlas-shell .portal-footer-wrap,
body.atlas-app-layout .portal-footer-wrap,
body.atlas-supplier-layout .portal-footer-wrap {
  backdrop-filter: none;
}

body.portal-atlas-shell .portal-footer-wrap .footer,
body.atlas-app-layout .portal-footer-wrap .footer,
body.atlas-supplier-layout .portal-footer-wrap .footer {
  margin-top: 0 !important;
  background: var(--clay-dark) !important;
  background-color: var(--clay-dark) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  border-top: 2px solid rgba(199, 154, 43, 0.45) !important;
}

body.portal-atlas-shell .portal-footer-wrap .footer a,
body.atlas-app-layout .portal-footer-wrap .footer a,
body.atlas-supplier-layout .portal-footer-wrap .footer a {
  color: rgba(255, 255, 255, 0.65) !important;
}

body.portal-atlas-shell .portal-footer-wrap .footer a:hover,
body.atlas-app-layout .portal-footer-wrap .footer a:hover,
body.atlas-supplier-layout .portal-footer-wrap .footer a:hover {
  color: var(--white) !important;
}

body.portal-atlas-shell .portal-footer-wrap .footer-section h4,
body.atlas-app-layout .portal-footer-wrap .footer-section h4,
body.atlas-supplier-layout .portal-footer-wrap .footer-section h4 {
  color: var(--zellige-gold-light) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body.portal-atlas-shell .portal-footer-wrap .atlas-footer-tagline,
body.portal-atlas-shell .portal-footer-wrap .modern-footer-brand p,
body.atlas-app-layout .portal-footer-wrap .atlas-footer-tagline,
body.atlas-app-layout .portal-footer-wrap .modern-footer-brand p,
body.atlas-supplier-layout .portal-footer-wrap .atlas-footer-tagline,
body.atlas-supplier-layout .portal-footer-wrap .modern-footer-brand p {
  color: rgba(255, 255, 255, 0.65) !important;
}

body.portal-atlas-shell .portal-footer-wrap .modern-brand-footer,
body.atlas-app-layout .portal-footer-wrap .modern-brand-footer,
body.atlas-supplier-layout .portal-footer-wrap .modern-brand-footer {
  color: var(--cream) !important;
}

body.portal-atlas-shell .portal-footer-wrap .footer-disclaimer,
body.atlas-app-layout .portal-footer-wrap .footer-disclaimer,
body.atlas-supplier-layout .portal-footer-wrap .footer-disclaimer {
  color: rgba(255, 255, 255, 0.55) !important;
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}

body.portal-atlas-shell .portal-footer-wrap .footer-bottom,
body.atlas-app-layout .portal-footer-wrap .footer-bottom,
body.atlas-supplier-layout .portal-footer-wrap .footer-bottom {
  color: rgba(255, 255, 255, 0.45) !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ----- Global shell mobile corrections (all portal/app/supplier shells) ----- */
@media (max-width: 767px) {
  .atlas-navbar-row {
    min-height: 56px;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    gap: 0.35rem;
  }

  .atlas-navbar-actions {
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .atlas-icon-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .atlas-navbar-title {
    font-size: clamp(0.92rem, 4vw, 1.05rem);
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
  }

  .atlas-navbar-brand .logo-sub {
    font-size: 0.68rem;
  }

  .portal-drawer {
    width: min(90vw, 320px);
  }

  .sidebar-menu a,
  .atlas-sidebar-link {
    min-height: 42px;
    align-items: center;
  }
}

@media (max-width: 639px) {
  .atlas-footer-grid {
    gap: 0.9rem;
  }

  .atlas-footer .footer-section h4 {
    font-size: 0.76rem;
  }
}

/* ----- Global responsive safety net for all shared shells ----- */
@media (max-width: 767px) {
  .dashboard-workspace,
  .atlas-app-main,
  .supplier-container-standalone,
  .main-wrapper,
  .portal-content-wrap {
    min-width: 0;
    overflow-x: clip;
  }

  body.portal-layout.atlas-portal-layout .dashboard-workspace,
  body.app-layout.atlas-app-layout .atlas-app-main,
  body.supplier-layout.atlas-supplier-layout .dashboard-workspace,
  body.supplier-layout.atlas-supplier-layout .supplier-container-standalone {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  body.portal-layout.atlas-portal-layout .portal-content-wrap,
  body.app-layout.atlas-app-layout .atlas-app-shell,
  body.supplier-layout.atlas-supplier-layout .supplier-portal-container {
    padding: 0 !important;
  }

  body.portal-layout.atlas-portal-layout .portal-container,
  body.supplier-layout.atlas-supplier-layout .portal-container,
  body.app-layout.atlas-app-layout .app-container {
    padding: 0 !important;
    margin: 0 auto !important;
  }

  body.portal-layout.atlas-portal-layout .dashboard-workspace .card,
  body.app-layout.atlas-app-layout .atlas-app-main .card,
  body.supplier-layout.atlas-supplier-layout .dashboard-workspace .card,
  body.supplier-layout.atlas-supplier-layout .supplier-container-standalone .card,
  body.portal-layout.atlas-portal-layout .dashboard-workspace .dashboard-card {
    box-shadow: none !important;
    border-radius: 12px !important;
  }

  .dashboard-workspace h1,
  .atlas-app-main h1,
  .supplier-container-standalone h1,
  .main-wrapper h1 {
    font-size: clamp(1.35rem, 6.5vw, 1.9rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .dashboard-workspace h2,
  .atlas-app-main h2,
  .supplier-container-standalone h2,
  .main-wrapper h2 {
    font-size: clamp(1.1rem, 5.2vw, 1.5rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .dashboard-workspace h3,
  .atlas-app-main h3,
  .supplier-container-standalone h3,
  .main-wrapper h3 {
    font-size: clamp(1rem, 4.8vw, 1.25rem);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .dashboard-workspace [class*="min-w-["],
  .atlas-app-main [class*="min-w-["],
  .supplier-container-standalone [class*="min-w-["],
  .main-wrapper [class*="min-w-["] {
    min-width: 0 !important;
    max-width: 100%;
  }

  .dashboard-workspace [class*="max-w-["],
  .atlas-app-main [class*="max-w-["],
  .supplier-container-standalone [class*="max-w-["],
  .main-wrapper [class*="max-w-["] {
    max-width: 100% !important;
  }

  .dashboard-workspace *:not(th):not(td)[class*="whitespace-nowrap"],
  .atlas-app-main *:not(th):not(td)[class*="whitespace-nowrap"],
  .supplier-container-standalone *:not(th):not(td)[class*="whitespace-nowrap"],
  .main-wrapper *:not(th):not(td)[class*="whitespace-nowrap"] {
    white-space: normal !important;
  }

  .dashboard-workspace table,
  .atlas-app-main table,
  .supplier-container-standalone table,
  .main-wrapper table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-workspace button,
  .dashboard-workspace .btn,
  .dashboard-workspace a[class*="btn"],
  .atlas-app-main button,
  .atlas-app-main .btn,
  .supplier-container-standalone button,
  .main-wrapper button,
  .main-wrapper .btn {
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }

  .dashboard-workspace input[type="text"],
  .dashboard-workspace input[type="email"],
  .dashboard-workspace input[type="number"],
  .dashboard-workspace input[type="search"],
  .dashboard-workspace input[type="tel"],
  .dashboard-workspace input[type="url"],
  .dashboard-workspace input[type="password"],
  .dashboard-workspace input[type="date"],
  .dashboard-workspace select,
  .dashboard-workspace textarea,
  .atlas-app-main input[type="text"],
  .atlas-app-main input[type="email"],
  .atlas-app-main input[type="number"],
  .atlas-app-main input[type="search"],
  .atlas-app-main input[type="tel"],
  .atlas-app-main input[type="url"],
  .atlas-app-main input[type="password"],
  .atlas-app-main input[type="date"],
  .atlas-app-main select,
  .atlas-app-main textarea,
  .supplier-container-standalone input[type="text"],
  .supplier-container-standalone input[type="email"],
  .supplier-container-standalone input[type="number"],
  .supplier-container-standalone input[type="search"],
  .supplier-container-standalone input[type="tel"],
  .supplier-container-standalone input[type="url"],
  .supplier-container-standalone input[type="password"],
  .supplier-container-standalone input[type="date"],
  .supplier-container-standalone select,
  .supplier-container-standalone textarea,
  .main-wrapper input[type="text"],
  .main-wrapper input[type="email"],
  .main-wrapper input[type="number"],
  .main-wrapper input[type="search"],
  .main-wrapper input[type="tel"],
  .main-wrapper input[type="url"],
  .main-wrapper input[type="password"],
  .main-wrapper input[type="date"],
  .main-wrapper select,
  .main-wrapper textarea {
    font-size: 16px;
    max-width: 100%;
  }
}