/* =====================================================================
   1. FONT FACES  — woff2 only, font-display: swap
   ---------------------------------------------------------------------
   Every weight of Outfit shipped in /asset/fonts/ is registered so the
   whole family (Thin → Black) can be used anywhere in the theme.
   ===================================================================== */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Thin.woff2') format('woff2');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-ExtraLight.woff2') format('woff2');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}


/* =====================================================================
   2. THEME TOKENS — "Mono · Three Colors"
   Base palette: #000000 (black) · #676464 (gray) · #ffffff (white)
   ===================================================================== */
:root {
  --primary-darkest: #000000;
  --primary-dark:    #000000;
  --primary:         #000000;
  --primary-mid:     #000000;
  --primary-light:   #676464;

  --secondary:     #ffffff;
  --accent:        #676464;

  --gradient-primary:    #000000;
  --gradient-primary-v:  #000000;
  --gradient-sidebar:    #000000;
  --gradient-header:     #000000;
  --gradient-marquee:    #000000;
  --gradient-btn:        #000000;
  --gradient-btn-hover:  #676464;
  --gradient-btn-landing:#000000;
  --gradient-avatar:     #000000;
  --gradient-avatar-alt: #676464;
  --gradient-icon:       #000000;
  --gradient-icon-soft:  rgba(103, 100, 100, 0.10);
  --gradient-soft:       rgba(103, 100, 100, 0.06);
  --gradient-card:       #ffffff;

  --primary-05: rgba(0, 0, 0, 0.05);
  --primary-08: rgba(0, 0, 0, 0.08);
  --primary-10: rgba(0, 0, 0, 0.10);
  --primary-12: rgba(0, 0, 0, 0.12);
  --primary-15: rgba(0, 0, 0, 0.15);
  --primary-20: rgba(0, 0, 0, 0.20);
  --primary-25: rgba(0, 0, 0, 0.25);
  --primary-30: rgba(0, 0, 0, 0.30);
  --primary-50: rgba(0, 0, 0, 0.50);

  --accent-05: rgba(103, 100, 100, 0.05);
  --accent-08: rgba(103, 100, 100, 0.08);
  --accent-10: rgba(103, 100, 100, 0.10);
  --accent-12: rgba(103, 100, 100, 0.12);
  --accent-15: rgba(103, 100, 100, 0.15);
  --accent-20: rgba(103, 100, 100, 0.20);
  --accent-30: rgba(103, 100, 100, 0.30);
  --accent-50: rgba(103, 100, 100, 0.50);
  --accent-60: rgba(103, 100, 100, 0.60);
  --accent-70: rgba(103, 100, 100, 0.70);
  --accent-80: rgba(103, 100, 100, 0.80);

  --secondary-05: rgba(255, 255, 255, 0.05);
  --secondary-08: rgba(255, 255, 255, 0.08);
  --secondary-10: rgba(255, 255, 255, 0.10);
  --secondary-12: rgba(255, 255, 255, 0.12);
  --secondary-15: rgba(255, 255, 255, 0.15);
  --secondary-20: rgba(255, 255, 255, 0.20);
  --secondary-30: rgba(255, 255, 255, 0.30);
  --secondary-50: rgba(255, 255, 255, 0.50);
  --secondary-60: rgba(255, 255, 255, 0.60);
  --secondary-70: rgba(255, 255, 255, 0.70);
  --secondary-80: rgba(255, 255, 255, 0.80);

  --surface-tint: color-mix(in srgb, var(--primary) 4%,  var(--secondary));
  --surface-2:    color-mix(in srgb, var(--primary) 6%,  var(--secondary));

  --text:       var(--primary);
  --text-soft:  var(--accent);
  --text-muted: var(--accent);

  --bg:        var(--secondary);
  --surface:   var(--surface-tint);

  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  --ease: cubic-bezier(.2,.7,.3,1);

  --wrap: min(1240px, 92%);
  --pad-section: 120px;

  --sidebar-w: 264px;
  --sidebar-w-compact: 78px;
  --navbar-h: 64px;

  --success:      #000000;
  --success-soft: rgba(0, 0, 0, 0.10);
  --success-line: rgba(0, 0, 0, 0.28);

  --warning:      #676464;
  --warning-soft: rgba(103, 100, 100, 0.10);
  --warning-line: rgba(103, 100, 100, 0.28);

  --danger:       #000000;
  --danger-soft:  rgba(0, 0, 0, 0.10);
  --danger-line:  rgba(0, 0, 0, 0.25);

  --info:         #676464;
  --info-soft:    rgba(103, 100, 100, 0.10);
  --info-line:    rgba(103, 100, 100, 0.25);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .09), 0 1px 2px rgba(0, 0, 0, .05);
  --shadow:    0 4px 14px rgba(0, 0, 0, .09), 0 2px 4px rgba(0, 0, 0, .05);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, .14);
  --shadow-primary: 0 6px 20px rgba(0, 0, 0, .35);

  --sidebar-bg:       var(--primary);
  --sidebar-hover:    var(--secondary-08);
  --sidebar-active:   var(--secondary-12);
  --sidebar-border:   var(--secondary-12);
  --sidebar-text:     var(--secondary-70);
  --sidebar-text-hi:  var(--secondary);
  --sidebar-text-dim: var(--secondary-50);
  --sidebar-accent:   var(--primary-light);

  --bar-bg:           var(--accent);
  --bar-bg-2:         var(--accent);
  --bar-border:       var(--secondary-12);
  --bar-text:         var(--secondary);
  --bar-text-muted:   var(--secondary-60);
  --bar-input-bg:     var(--secondary-08);
  --bar-input-border: var(--secondary-20);

  --body-bg:      var(--surface-tint);
  --card-bg:      var(--secondary);
  --card-border:  var(--primary-12);
  --grid-line:    var(--primary-08);

  --text-primary:   var(--primary);
  --text-secondary: var(--accent);
  --text-muted-crm: var(--accent);

  --primary-soft: var(--primary-08);
}


/* =====================================================================
   3. GLOBAL RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }
iframe { display: block; border: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

::selection { background: var(--primary); color: var(--secondary); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
  border: 2px solid var(--secondary);
}
::-webkit-scrollbar-thumb:hover { background: var(--primary); }


/* =====================================================================
   PART A — LANDING PAGE (scoped to body.landing)
   ===================================================================== */

body.landing {
  font-size: 16px;
  line-height: 1.6;
  background: var(--secondary);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.landing.nav-open { overflow: hidden; }
body.landing h1,
body.landing h2,
body.landing h3,
body.landing h4,
body.landing h5 { line-height: 1.1; }

body.landing > main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.landing > .site-header,
body.landing > .site-footer { flex-shrink: 0; }


/* --- A1. Utilities ------------------------------------------------ */
.landing .wrap { width: var(--wrap); margin-inline: auto; }

.landing .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 28px;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background .35s var(--ease),
              color .35s var(--ease),
              border-color .35s var(--ease),
              transform .35s var(--ease),
              box-shadow .35s var(--ease);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
}
.landing .btn svg { width: 16px; height: 16px; }

.landing .btn-primary {
  background: #000000;
  color: #ffffff;
  transition: background .35s var(--ease),
              transform .35s var(--ease),
              box-shadow .35s var(--ease);
}
.landing .btn-primary:hover {
  background: #676464;
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

.landing .btn-light {
  background: transparent;
  border-color: var(--secondary-30);
  color: var(--secondary);
  height: 33px;
  padding: 0 22px;
  font-size: 0.88rem;
}
.landing .btn-light:hover {
  background: var(--secondary);
  color: var(--primary);
  border-color: var(--secondary);
}

.landing .btn-ghost {
  background: transparent;
  border-color: var(--primary-30);
  color: var(--text);
}
.landing .btn-ghost:hover {
  background: var(--primary-08);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.landing .btn-outline {
  background: transparent;
  border: 1px solid var(--secondary-50);
  color: var(--secondary);
  height: 44px;
  padding: 0 22px;
  font-size: 0.88rem;
}
.landing .btn-outline:hover {
  background: var(--secondary);
  color: var(--primary);
  border-color: var(--secondary);
}

.landing .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 6px 0;
  margin-bottom: 22px;
}
.landing .eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--accent);
}

.landing .lead {
  color: var(--text-soft);
  font-size: 1.04rem;
  max-width: 620px;
}

.landing section { position: relative; }


/* --- A2. Header (SOLID BLACK) ------------------------------------ */
.landing .site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #000000;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.landing .site-header.is-scrolled {
  border-bottom-color: var(--secondary-10);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .28);
}

.landing .nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
}

.landing .brand {
  display: inline-flex;
  align-items: center;
  color: var(--secondary);
  transition: opacity .3s var(--ease);
}
.landing .brand:hover { opacity: 0.85; }

.landing .brand-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 220px;
}

.landing .nav { display: flex; align-items: center; gap: 4px; }
.landing .nav a {
  position: relative;
  padding: 9px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--secondary-70);
  transition: color .3s var(--ease);
}
.landing .nav a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 1px;
  background: var(--secondary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease);
}
.landing .nav a:hover { color: var(--secondary); }
.landing .nav a:hover::after { transform: scaleX(1); }

.landing .nav-actions { display: flex; align-items: center; gap: 14px; }

.landing .menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--secondary-20);
  background: var(--secondary-05);
  padding: 0 11px;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.landing .menu-toggle span {
  display: block;
  width: 100%;
  height: 1.6px;
  border-radius: 2px;
  background: var(--secondary);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.landing .menu-toggle.is-active span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.landing .menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.landing .menu-toggle.is-active span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }


/* --- A3. Hero ---------------------------------------------------- */
.landing .hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
  background: #ffffff;
  min-height: 0;
}

.landing .hero-inner {
  display: block;
  max-width: 820px;
  width: var(--wrap);
  margin-inline: auto;
}

.landing .hero-copy h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 26px;
}
.landing .hero-copy h1 em {
  font-style: italic;
  font-weight: 400;
  color: #676464;
}

.landing .hero-copy .lead {
  margin-bottom: 38px;
  font-size: 1.08rem;
}

.landing .hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}


/* --- A4. Marquee (SOLID BLACK) ----------------------------------- */
.landing .marquee {
  flex-shrink: 0;
  background: #000000;
  border-top: 1px solid var(--secondary-10);
  border-bottom: 1px solid var(--secondary-10);
  padding: 16px 0;
  overflow: hidden;
}
.landing .marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: scrollX 38s linear infinite;
}
.landing .marquee:hover .marquee-track { animation-play-state: paused; }
.landing .marquee-track span {
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.94rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--secondary);
  display: inline-flex;
  align-items: center;
  gap: 48px;
  white-space: nowrap;
}
.landing .marquee-track span::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-light);
}
@keyframes scrollX { to { transform: translateX(-50%); } }


/* --- A5. Footer -------------------------------------------------- */
.landing .site-footer {
  flex-shrink: 0;
  background: #676464;
  color: #ffffff;
  padding: 44px 0 0;
}

.landing .footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1.3fr 1fr;
  gap: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--secondary-30);
}

.landing .footer-brand .brand { margin-bottom: 22px; }
.landing .footer-brand .brand-logo { height: 46px; max-width: 220px; }

.landing .footer-brand p {
  color: var(--secondary-80);
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 340px;
}

.landing .footer-col h5 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--secondary-50);
  margin-bottom: 22px;
}
.landing .footer-col ul { display: grid; gap: 12px; }
.landing .footer-col li,
.landing .footer-col a {
  font-size: 0.92rem;
  color: var(--secondary-80);
  line-height: 1.6;
  transition: color .3s var(--ease);
}
.landing .footer-col a:hover { color: var(--secondary); }

.landing .footer-bottom {
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--secondary-50);
}


/* --- A6. Reveal -------------------------------------------------- */
.landing .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.landing .reveal.is-in { opacity: 1; transform: none; }


/* --- A7. Short-viewport compaction ------------------------------- */
@media (max-height: 780px) and (min-width: 641px) {
  .landing .hero { padding: 24px 0; }
  .landing .hero-copy h1 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    margin-bottom: 18px;
  }
  .landing .hero-copy .lead { font-size: 1rem; margin-bottom: 26px; }
  .landing .eyebrow { margin-bottom: 14px; padding: 2px 0; }
  .landing .btn { height: 48px; }
  .landing .site-footer { padding: 32px 0 0; }
  .landing .footer-top { padding-bottom: 24px; gap: 32px; }
  .landing .footer-brand .brand { margin-bottom: 14px; }
  .landing .footer-col h5 { margin-bottom: 14px; }
  .landing .footer-bottom { padding: 14px 0; }
}

@media (max-height: 640px) and (min-width: 641px) {
  .landing .hero { padding: 16px 0; }
  .landing .hero-copy h1 {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    margin-bottom: 12px;
  }
  .landing .hero-copy .lead { font-size: 0.92rem; margin-bottom: 18px; }
  .landing .eyebrow { font-size: 0.65rem; margin-bottom: 10px; }
  .landing .btn { height: 42px; font-size: 0.85rem; }
  .landing .site-footer { padding: 24px 0 0; }
  .landing .footer-top { padding-bottom: 18px; gap: 24px; }
  .landing .footer-brand p,
  .landing .footer-col li,
  .landing .footer-col a { font-size: 0.82rem; }
  .landing .footer-brand .brand-logo { height: 38px; }
}


/* =====================================================================
   PART B — CRM DASHBOARD
   ===================================================================== */

/* --- B2. App shell ----------------------------------------------- */
.crm-app {
  display: flex;
  min-height: 100vh;
  background: var(--body-bg);
}

.crm-main-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.crm-main {
  flex: 1 1 auto;
  padding: 26px 28px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}


/* --- B3. Sidebar (SOLID BLACK) ----------------------------------- */
.crm-sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  background: #000000;
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  border-right: 1px solid var(--sidebar-border);
  transition: width .25s cubic-bezier(.4,0,.2,1),
              flex-basis .25s cubic-bezier(.4,0,.2,1);
  z-index: 100;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.sidebar-brand .brand-mark {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  line-height: 0;
}

.sidebar-brand .brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sidebar-brand .brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  min-width: 0;
  overflow: hidden;
}

.sidebar-brand .brand-text strong {
  display: block;
  font-size: 18.75px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -.01em;
}

.sidebar-brand .brand-text em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffffff;
  margin-top: 3px;
}

.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--secondary-15);
  border-radius: 6px;
}

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

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 13.5px;
  font-weight: 500;
  width: 100%;
  text-align: left;
  transition: background .18s ease, color .18s ease;
  position: relative;
}
.nav-item:hover { background: var(--sidebar-hover); color: #ffffff; }
.nav-item.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: #ffffff;
  box-shadow: 0 0 12px rgba(255, 255, 255, .85);
}
.nav-icon {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: inherit;
  opacity: .9;
}
.nav-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-chevron {
  display: grid; place-items: center;
  flex-shrink: 0;
  opacity: .55;
  transition: transform .22s ease;
}
.nav-group.open .nav-chevron { transform: rotate(180deg); }

.nav-sub {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0 6px 12px;
  margin-left: 18px;
  border-left: 1px solid var(--sidebar-border);
  margin-top: 2px;
}
.nav-group.open .nav-sub { display: flex; }

.nav-sub-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12.8px;
  color: var(--sidebar-text-dim);
  transition: background .18s, color .18s;
}
.nav-sub-item:hover { background: var(--sidebar-hover); color: #ffffff; }
.nav-sub-item.is-active {
  color: #ffffff;
  background: var(--secondary-12);
}

.nav-sub-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  flex-shrink: 0;
}
.nav-sub-item.is-active .nav-sub-dot {
  opacity: 1;
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--secondary-15);
}

.sidebar-foot {
  flex-shrink: 0;
  padding: 14px 22px;
  border-top: 1px solid var(--sidebar-border);
}
.sidebar-foot-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--sidebar-text-dim);
  white-space: nowrap;
}
.foot-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25), 0 0 10px rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

@media (min-width: 1101px) {
  .crm-sidebar.collapsed {
    width: var(--sidebar-w-compact);
    flex-basis: var(--sidebar-w-compact);
  }
  .crm-sidebar.collapsed .brand-text,
  .crm-sidebar.collapsed .nav-label,
  .crm-sidebar.collapsed .nav-chevron,
  .crm-sidebar.collapsed .sidebar-foot-text,
  .crm-sidebar.collapsed .nav-sub { display: none; }
  .crm-sidebar.collapsed .sidebar-brand { justify-content: center; padding: 20px 0; }
  .crm-sidebar.collapsed .nav-item { justify-content: center; padding: 11px 0; }
  .crm-sidebar.collapsed .nav-item.is-active::before { left: -6px; }
}


/* --- B4. Navbar (SOLID GRAY) ------------------------------------- */
.crm-navbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: #676464;
  border-bottom: 1px solid var(--bar-border);
  color: #ffffff;
  flex-shrink: 0;
}

.nav-toggle {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 9px;
  color: #ffffff;
  transition: background .18s;
}
.nav-toggle:hover { background: var(--secondary-08); }

.navbar-title { flex-shrink: 0; min-width: 0; }
.navbar-title h1 {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap;
}
.navbar-title p {
  font-size: 11.5px;
  color: var(--bar-text-muted);
  margin-top: 1px;
  white-space: nowrap;
}

.navbar-search {
  flex: 1 1 auto;
  max-width: 420px;
  position: relative;
  margin-left: auto;
}
.navbar-search .search-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--bar-text-muted);
  pointer-events: none;
}
.navbar-search input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 38px;
  border-radius: 9px;
  background: var(--bar-input-bg);
  border: 1px solid var(--bar-input-border);
  color: #ffffff;
  font-size: 13px;
  outline: none;
  transition: border-color .18s, background .18s;
}
.navbar-search input::placeholder { color: var(--bar-text-muted); }
.navbar-search input:focus {
  border-color: var(--secondary-50);
  background: var(--secondary-12);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.icon-btn {
  position: relative;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 9px;
  color: #ffffff;
  transition: background .18s;
}
.icon-btn:hover { background: var(--secondary-08); }
.badge-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #000000;
  box-shadow: 0 0 0 2px #676464, 0 0 8px rgba(0, 0, 0, .6);
}

/* ---- Fullscreen toggle (navbar) ---------------------------------
   White stroke icon (inherits .icon-btn color). The enter/exit icons
   swap via the .is-fullscreen class — only ONE icon is ever rendered,
   so the grid stays perfectly centered. Visible on every screen size. */
.icon-btn.fs-toggle svg { width: 20px; height: 20px; }

.icon-btn.fs-toggle .fs-icon {
  display: grid;
  place-items: center;
  line-height: 0;
}
.icon-btn.fs-toggle .fs-icon-exit { display: none; }
.icon-btn.fs-toggle.is-fullscreen .fs-icon-enter { display: none; }
.icon-btn.fs-toggle.is-fullscreen .fs-icon-exit  { display: grid; }

.user-menu { position: relative; }
.user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 5px;
  border-radius: 100px;
  transition: background .18s;
}
.user-btn:hover { background: var(--secondary-08); }

.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #000000;
  color: #ffffff;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .40);
}
.user-meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.user-meta strong {
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}
.user-meta em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--bar-text-muted);
  white-space: nowrap;
}
.user-chevron { color: var(--bar-text-muted); display: grid; place-items: center; }

.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 120;
}
.user-menu.open .user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.user-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  transition: background .16s;
}
.user-dropdown a:hover { background: var(--primary-05); }
.user-dropdown a.danger { color: #000000; }
.user-dropdown a.danger:hover { background: var(--primary-12); }
.user-dropdown hr {
  border: 0;
  height: 1px;
  background: var(--card-border);
  margin: 5px 8px;
}


/* --- B5. CRM footer (SOLID GRAY) --------------------------------- */
.crm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 26px;
  background: #676464;
  border-top: 1px solid var(--bar-border);
  color: var(--bar-text-muted);
  font-size: 12.5px;
  flex-shrink: 0;
}
.footer-meta { color: var(--bar-text-muted); opacity: .75; }


/* --- B6. Quick actions ------------------------------------------- */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.qa-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: border-color .2s, transform .2s, box-shadow .2s;
  min-width: 0;
}
.qa-tile:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.qa-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: #ffffff;
}
/* Quick Action icon tiles: dark background → keep icon strokes WHITE
   (specificity bumped to beat the later generic .tone-* rules) */
.qa-icon.tone-primary { background: #000000; color: #ffffff; }
.qa-icon.tone-success { background: #000000; color: #ffffff; }
.qa-icon.tone-warning { background: #676464; color: #ffffff; }
.qa-icon.tone-danger  { background: #000000; color: #ffffff; }
.qa-icon.tone-info    { background: #676464; color: #ffffff; }

.qa-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.qa-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qa-text em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tone-primary { background: var(--primary-08); color: #000000; }
.tone-success { background: var(--success-soft); color: #000000; }
.tone-warning { background: var(--warning-soft); color: #676464; }
.tone-danger  { background: var(--danger-soft);  color: #000000; }
.tone-info    { background: var(--info-soft);    color: #676464; }


/* --- B7. Stat grid ----------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.stat-card {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  min-width: 0;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--primary-15);
}
.stat-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: #ffffff;
}
.stat-icon.tone-primary { background: #000000; }
.stat-icon.tone-success { background: #000000; }
.stat-icon.tone-warning { background: #676464; }
.stat-icon.tone-danger  { background: #000000; }
.stat-icon.tone-info    { background: #676464; }

.stat-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  margin-top: 2px;
  letter-spacing: -.02em;
}
.stat-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--accent);
  min-width: 0;
}
.stat-foot span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trend {
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.trend-up   { background: var(--success-soft); color: #000000; }
.trend-down { background: var(--danger-soft);  color: #000000; }
.trend-warn { background: var(--warning-soft); color: #676464; }


/* --- B8. Grid + cards -------------------------------------------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1.4fr 1fr; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 12px;
  flex-wrap: wrap;
}
.card-head h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
}
.card-head p { font-size: 12px; color: var(--accent); margin-top: 2px; }
.link-more {
  font-size: 12.5px;
  font-weight: 500;
  color: #676464;
  transition: opacity .18s, color .18s;
}
.link-more:hover { color: #000000; }

.card-body { padding: 8px 20px 20px; flex: 1 1 auto; min-width: 0; }
.card-body.no-pad { padding: 0; }

.legend { display: flex; gap: 14px; align-items: center; }
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.legend-item i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
}
.legend-item i.swatch-primary { background: #000000; }
.legend-item i.swatch-info    { background: #676464; }


/* --- B9. Charts -------------------------------------------------- */
.chart-wrap { padding: 4px 10px 6px 4px; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg .bar {
  transform-origin: center bottom;
  animation: barGrow .7s cubic-bezier(.2,.8,.2,1) both;
}
.chart-svg .bar-b { animation-delay: .08s; }
@keyframes barGrow {
  from { transform: scaleY(.05); opacity: .25; }
  to   { transform: scaleY(1);   opacity: 1; }
}

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 4px 20px 18px;
}
.donut-chart { flex: 0 0 200px; max-width: 200px; }
.donut-svg { width: 100%; height: auto; animation: donutIn .8s ease both; }
@keyframes donutIn {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

.donut-legend {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.donut-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}
.donut-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-legend .label { flex: 1 1 auto; }
.donut-legend strong { font-weight: 600; color: var(--text); font-size: 13.5px; }

.donut-legend .dot.dot-primary { background: #000000; }
.donut-legend .dot.dot-info    { background: #676464; }
.donut-legend .dot.dot-warning { background: #676464; }
.donut-legend .dot.dot-success { background: #000000; }


/* --- B10. Stock overview ----------------------------------------- */
.stock-wrap {
  padding: 4px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stock-row { display: flex; flex-direction: column; gap: 7px; }
.stock-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}
.stock-label { color: var(--text-secondary); }
.stock-value { font-weight: 600; color: var(--text); }
.stock-bar {
  height: 8px;
  border-radius: 100px;
  background: var(--primary-08);
  overflow: hidden;
}
.stock-fill {
  display: block;
  height: 100%;
  border-radius: 100px;
  transition: width .9s cubic-bezier(.2,.8,.2,1);
}
.stock-fill.tone-success { background: #000000; }
.stock-fill.tone-warning { background: #676464; }
.stock-fill.tone-danger  { background: #000000; }

.stock-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--grid-line);
  margin-top: 6px;
}
.stock-summary div { display: flex; flex-direction: column; align-items: center; }
.stock-summary strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
}
.stock-summary span { font-size: 11.5px; color: var(--accent); margin-top: 2px; }


/* --- B11. Alerts ------------------------------------------------- */
.alerts-card .card-body { padding: 4px 20px 20px; }
.alerts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.alert-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid;
  background: #ffffff;
  align-items: flex-start;
}
.alert-item .alert-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.alert-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alert-text strong { font-size: 13px; font-weight: 600; color: var(--text); }
.alert-text span { font-size: 12px; color: var(--accent); line-height: 1.4; }

.alert-item.tone-danger  { border-color: var(--danger-line);  background: var(--danger-soft); }
.alert-item.tone-warning { border-color: var(--warning-line); background: var(--warning-soft); }
.alert-item.tone-info    { border-color: var(--info-line);    background: var(--info-soft); }
.alert-item.tone-success { border-color: var(--success-line); background: var(--success-soft); }

.alert-item.tone-danger  .alert-icon { background: #000000; color: #ffffff; }
.alert-item.tone-warning .alert-icon { background: #676464; color: #ffffff; }
.alert-item.tone-info    .alert-icon { background: #676464; color: #ffffff; }
.alert-item.tone-success .alert-icon { background: #000000; color: #ffffff; }


/* --- B12. Tables ------------------------------------------------- */
.table-wrap { width: 100%; overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--card-border);
  background: var(--primary-05);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--grid-line);
  color: var(--text);
  white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--primary-05); }
.data-table td.muted { color: var(--accent); }
.data-table td.num { text-align: right; }
.data-table th.num { text-align: right; }

.ref {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #000000;
  background: var(--primary-soft);
  padding: 3px 8px;
  border-radius: 5px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.pill.tone-primary { background: var(--primary-08);   color: #000000; }
.pill.tone-success { background: var(--success-soft); color: #000000; }
.pill.tone-warning { background: var(--warning-soft); color: #676464; }
.pill.tone-danger  { background: var(--danger-soft);  color: #000000; }
.pill.tone-info    { background: var(--info-soft);    color: #676464; }


/* --- B13. Sidebar backdrop (mobile) ------------------------------ */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
  z-index: 150;
}
.sidebar-backdrop.show { opacity: 1; visibility: visible; }


/* --- B14. Shared buttons (CRM base) ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .18s, border-color .18s, color .18s,
              transform .12s, box-shadow .18s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: #000000;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transition: background .18s, transform .12s, box-shadow .18s;
}
.btn-primary:hover {
  background: #676464;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}

.btn-ghost {
  background: #ffffff;
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}
.btn-ghost:hover { border-color: var(--primary-30); color: var(--text); background: var(--primary-05); }

.btn-danger {
  background: #000000;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.btn-danger:hover {
  background: #676464;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}


/* --- B15. Select wrapper ----------------------------------------- */
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 40px;
  padding: 0 36px 0 14px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
}
.select-wrap select:focus {
  border-color: #000000;
  box-shadow: 0 0 0 3px var(--primary-12);
}
.select-wrap::after {
  content: "";
  position: absolute;
  right: 12px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  background: no-repeat center / 14px 14px
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676464' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.select-wrap.sm select {
  height: 34px;
  padding: 0 30px 0 10px;
  border-radius: 8px;
  font-size: 12.5px;
}
.select-wrap.sm::after {
  right: 10px;
  width: 13px; height: 13px;
  background-size: 13px 13px;
}


/* --- B16. Page toolbar ------------------------------------------- */
.page-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.toolbar-search {
  position: relative;
  flex: 1 1 280px;
  max-width: 380px;
}
.toolbar-search .search-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  pointer-events: none;
}
.toolbar-search input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.toolbar-search input::placeholder { color: var(--accent); }
.toolbar-search input:focus {
  border-color: #000000;
  box-shadow: 0 0 0 3px var(--primary-12);
}
.toolbar-spacer { flex: 1 1 auto; }


/* --- B17. Customer cells / row actions --------------------------- */
.cust-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cust-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
  background: #000000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .30);
}
.cust-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cust-meta strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-meta em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.act-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--accent);
  background: transparent;
  border: 1px solid transparent;
  transition: background .16s, color .16s, border-color .16s;
  cursor: pointer;
}
.act-btn:hover { background: var(--primary-05); color: var(--text); }
.act-btn.act-view:hover { color: #676464; background: var(--info-soft); }
.act-btn.act-edit:hover { color: #000000; background: var(--primary-soft); }
.act-btn.act-del:hover  { color: #000000; background: var(--danger-soft); }


/* --- B18. Table footer / pagination ------------------------------ */
.table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--card-border);
  background: var(--primary-05);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.table-foot .foot-left,
.table-foot .foot-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}
.table-foot .foot-right { justify-content: flex-end; }
.table-foot .foot-center {
  flex: 0 0 auto;
  text-align: center;
  color: var(--text-secondary);
  white-space: nowrap;
}
.table-foot .foot-center strong { color: var(--text); font-weight: 600; }
.per-page-label { color: var(--text-secondary); white-space: nowrap; }

.pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: #ffffff;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .16s, border-color .16s, color .16s;
}
.page-btn:hover:not(:disabled):not(.is-active) {
  border-color: var(--primary-30);
  color: #000000;
  background: var(--primary-05);
}
.page-btn.is-active {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .40);
}
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
.page-ellipsis {
  min-width: 22px;
  text-align: center;
  color: var(--accent);
  font-weight: 600;
  user-select: none;
}


/* --- B19. Table empty state -------------------------------------- */
.table-empty {
  display: none;
  padding: 56px 20px;
  text-align: center;
  color: var(--accent);
}
.table-empty .empty-icon {
  width: 52px; height: 52px;
  margin: 0 auto 12px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--gradient-icon-soft);
  color: #676464;
}
.table-empty strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.table-empty span { font-size: 12.5px; }


/* --- B20. Modal -------------------------------------------------- */
.crm-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.crm-modal.open { opacity: 1; visibility: visible; }

.crm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.crm-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 40px);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(10px) scale(.98);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.crm-modal.open .crm-modal-dialog { transform: translateY(0) scale(1); }
.crm-modal-dialog.modal-sm { max-width: 460px; }
.crm-modal-dialog.modal-lg { max-width: 780px; }

.crm-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}
.crm-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.crm-modal-title .modal-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: #ffffff;
}
.crm-modal-title .modal-icon.tone-primary { background: #000000; }
.crm-modal-title .modal-icon.tone-info    { background: #676464; }
.crm-modal-title .modal-icon.tone-danger  { background: #000000; }
.crm-modal-title .modal-icon.tone-success { background: #000000; }
.crm-modal-title .modal-icon.tone-warning { background: #676464; }

.crm-modal-title h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.crm-modal-title p { font-size: 12px; color: var(--accent); margin-top: 2px; }

.crm-modal-close {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  color: var(--accent);
  transition: background .16s, color .16s;
  flex-shrink: 0;
  cursor: pointer;
}
.crm-modal-close:hover { background: var(--primary-05); color: var(--text); }

.crm-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.crm-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--card-border);
  background: var(--primary-05);
  flex-shrink: 0;
}


/* --- B21. Modal form --------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.form-field.full { grid-column: 1 / -1; }
.form-field > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .01em;
}
.form-field > label .req { color: #000000; margin-left: 2px; }
.form-field > label .muted { font-weight: 400; color: var(--accent); }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  font-family: inherit;
}
.form-field textarea { min-height: 78px; resize: vertical; line-height: 1.5; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--accent); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: #000000;
  box-shadow: 0 0 0 3px var(--primary-12);
}

.form-field .select-wrap { width: 100%; }
.form-field .select-wrap select { width: 100%; }


/* --- B22. View / confirm bodies ---------------------------------- */
.view-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 12px;
  background: var(--gradient-soft);
  margin-bottom: 18px;
}
.view-avatar {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: .02em;
  background: #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.view-header-text { min-width: 0; }
.view-header-text h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.view-header-text p {
  font-size: 12.5px;
  color: var(--accent);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.view-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}
.view-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.view-item.full { grid-column: 1 / -1; }
.view-item .view-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.view-item .view-value {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
  word-break: break-word;
  white-space: normal;
}
.view-item .view-value.muted { color: var(--accent); font-weight: 400; }

.confirm-body { display: flex; gap: 14px; align-items: flex-start; }
.confirm-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: #000000;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.confirm-text { min-width: 0; }
.confirm-text strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.confirm-text span {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}


/* --- B23. Form helpers + toast ----------------------------------- */
.form-alert {
  grid-column: 1 / -1;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--danger-soft);
  color: #000000;
  border: 1px solid var(--danger-line);
  font-size: 12.5px;
  font-weight: 500;
}

.field-error {
  font-size: 11.5px;
  color: #000000;
  font-weight: 500;
  margin-top: 2px;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: #000000;
}

.form-field.has-error input:focus,
.form-field.has-error select:focus,
.form-field.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

.table-error {
  padding: 14px 20px;
  color: #000000;
  background: var(--danger-soft);
  border-bottom: 1px solid var(--danger-line);
  font-size: 12.5px;
}

#toastHost {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- Toast: SOLID WHITE surface, BLACK border, BLACK text --------
   No transparency, no glass/blur, no tinted translucent backgrounds. */
.crm-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #000000;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 500;
  color: #000000;
  max-width: 360px;
  animation: toastIn .22s ease;
}

.crm-toast .toast-close {
  margin-left: auto;
  opacity: .55;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  background: none;
  border: 0;
  color: inherit;
  padding: 0 4px;
}
.crm-toast .toast-close:hover { opacity: 1; }

/* Tone variants keep the EXACT same solid white surface, black border
   and black text — only the inner icon carries the tone colour. */
.crm-toast.tone-success,
.crm-toast.tone-danger,
.crm-toast.tone-warning,
.crm-toast.tone-info {
  background: #ffffff;
  border-color: #000000;
  color: #000000;
}

.crm-toast.tone-success .toast-icon { color: #000000; }
.crm-toast.tone-danger  .toast-icon { color: #000000; }
.crm-toast.tone-warning .toast-icon { color: #676464; }
.crm-toast.tone-info    .toast-icon { color: #676464; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}


/* --- B24. Flash messages ----------------------------------------- */
.flash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
.flash::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.flash-success { background: var(--success-soft); border-color: var(--success-line); color: #000000; }
.flash-danger  { background: var(--danger-soft);  border-color: var(--danger-line);  color: #000000; }
.flash-warning { background: var(--warning-soft); border-color: var(--warning-line); color: #676464; }
.flash-info    { background: var(--info-soft);    border-color: var(--info-line);    color: #676464; }


/* =====================================================================
   B25. INVOICE CASH PAGE  —  items grid, add-row dropdown, totals, view
   ---------------------------------------------------------------------
   The line-items grid is tuned to fit entirely inside the invoice modal
   WITHOUT any horizontal scrollbar (modal is 775px wide, minus 20px
   modal-body padding on each side = 735px of usable width).
   ===================================================================== */

/* Modal size for invoice forms (25% wider than default) */
.crm-modal-dialog.modal-invoice { max-width: 775px; }

/* ---- Line items grid ---- */
.items-wrap {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
}
.items-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
.items-table thead th {
  background: var(--surface-2);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 9px 6px;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.items-table tbody td {
  padding: 4px 3px;
  border-bottom: 1px solid var(--grid-line);
  vertical-align: middle;
}
.items-table tbody tr:last-child td { border-bottom: none; }
.items-table .sr-cell {
  text-align: center;
  color: var(--accent);
  font-weight: 600;
}

/* Column widths — tuned so the whole grid fits inside the 775px modal */
.items-table .col-sr          { width: 32px; text-align: center; }
.items-table .col-date        { width: 116px; }
.items-table .col-particular  { width: auto; }
.items-table .col-qty         { width: 64px; }
.items-table .col-rate        { width: 82px; }
.items-table .col-amount      { width: 96px; text-align: right; }
.items-table .items-actions-th{ width: 60px; }

.items-table input[type="text"],
.items-table input[type="number"],
.items-table input[type="date"] {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 6px 6px;
  border-radius: 6px;
  font: inherit;
  color: inherit;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.items-table input:hover { border-color: var(--card-border); }
.items-table input:focus {
  border-color: #000000;
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--primary-12);
}
.items-table .it-amount {
  text-align: right;
  padding-right: 8px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* ---- Row action cell: [+] before [trash], compact ---- */
.items-table .row-actions-cell {
  white-space: nowrap;
  text-align: right;
  padding-right: 4px;
}
.items-table .row-add,
.items-table .row-del {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
  vertical-align: middle;
}
.items-table .row-add { margin-right: 2px; }
.items-table .row-add:hover {
  background: var(--primary-05);
  color: #000000;
  border-color: var(--primary-15);
}
.items-table .row-del:hover {
  background: var(--primary-08);
  color: #000000;
  border-color: var(--primary-20);
}

/* ---- Add-row split button + dropdown ---- */
.items-foot {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}
.add-row-group {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.add-row-group #addItemBtn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.add-row-group .add-row-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
  padding: 0 8px;
  min-width: 30px;
}
.add-row-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 150px;
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 6;
}
.add-row-menu[hidden] { display: none; }
.add-row-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.add-row-menu button:hover { background: var(--primary-05); color: #000000; }

.btn-sm {
  padding: 7px 12px;
  font-size: 12.5px;
  border-radius: 8px;
}

/* ---- Totals ---- */
.totals-wrap { margin-top: 16px; display: flex; justify-content: flex-end; }
.totals-box {
  width: 100%;
  max-width: 380px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
}
.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.totals-row + .totals-row { border-top: 1px dashed var(--grid-line); }
.totals-row .val {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
}
.totals-row.grand {
  border-top: 2px solid var(--card-border);
  margin-top: 4px;
  padding-top: 12px;
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
}
.totals-row.grand .val { font-size: 16px; color: #000000; }

/* ---- Amount in words box (used by the View modal only) ---- */
.words-box {
  margin-top: 14px;
  padding: 11px 14px;
  background: var(--primary-05);
  border: 1px dashed var(--primary-20);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.words-box strong {
  display: block;
  font-size: 10.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

/* ---- Form section title ---- */
.form-section-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 4px 0 0;
}
.form-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--grid-line);
}

/* ---- View modal ---- */
.view-invoice-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--grid-line);
}
.view-invoice-head h4 { margin: 0 0 4px; font-size: 17px; color: var(--text); }
.view-invoice-head p  { margin: 0; font-size: 12.5px; color: var(--accent); }
.view-invoice-head .no { text-align: right; }
.view-invoice-head .no strong { display: block; font-size: 18px; letter-spacing: .4px; color: var(--text); }
.view-invoice-head .no span   { font-size: 12px; color: var(--accent); }

.view-items {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
}
.view-items th {
  text-align: left;
  padding: 8px 10px;
  font-size: 10.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--surface-2);
  border-bottom: 1px solid var(--card-border);
}
.view-items td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--grid-line);
  vertical-align: top;
}
.view-items td.num,
.view-items th.num { text-align: right; font-variant-numeric: tabular-nums; }
.view-items tr:last-child td { border-bottom: none; }


/* =====================================================================
   PART C — LOGIN PAGE (scoped to .login-page)
   ===================================================================== */

.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--surface);
}

.login-shell {
  width: 100%;
  max-width: 440px;
}

.login-card {
  background: #ffffff;
  border: 1px solid var(--primary-10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px 36px 26px;
  animation: loginIn .5s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes loginIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- Brand ---------------------------------------------------------- */
.login-brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: 26px;
  transition: opacity .25s var(--ease);
}
.login-brand:hover { opacity: .8; }
.login-logo {
  display: block;
  height: 46px;
  width: auto;
  max-width: 220px;
}

/* --- Head ----------------------------------------------------------- */
.login-head { margin-bottom: 24px; }
.login-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 10px;
}
.login-head .eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.login-head h1 {
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 6px;
}
.login-head p {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 340px;
}

/* --- Flash ---------------------------------------------------------- */
.login-flash { margin-bottom: 18px; }

/* --- Form ----------------------------------------------------------- */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.login-form .form-field > label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.login-form .form-field > label .req {
  color: #000000;
  margin-left: 2px;
}
.login-form .form-field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--primary-15);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .18s var(--ease),
              box-shadow   .18s var(--ease),
              background   .18s var(--ease);
}
.login-form .form-field input::placeholder { color: var(--accent); }
.login-form .form-field input:hover { border-color: var(--primary-25); }
.login-form .form-field input:focus {
  border-color: #000000;
  box-shadow: 0 0 0 3px var(--primary-12);
}

/* Password show/hide ------------------------------------------------ */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 46px !important; }

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.pw-toggle:hover {
  background: var(--primary-05);
  color: var(--text);
}
.pw-toggle svg { width: 18px; height: 18px; }

.pw-toggle .pw-icon-off { display: none; }
.password-wrap.is-visible .pw-icon-eye { display: none; }
.password-wrap.is-visible .pw-icon-off { display: block; }

/* Submit ------------------------------------------------------------ */
.login-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  margin-top: 4px;
  border: 0;
  border-radius: 10px;
  background: #000000;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .18s var(--ease),
              transform  .15s var(--ease),
              box-shadow .25s var(--ease);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.login-submit:hover {
  background: #676464;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.login-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.login-submit svg {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--ease);
}
.login-submit:hover svg { transform: translateX(3px); }

/* Foot -------------------------------------------------------------- */
.login-foot {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--primary-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-soft);
  flex-wrap: wrap;
}
.login-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  transition: color .18s var(--ease);
}
.login-foot a:hover { color: #000000; }
.login-foot svg { width: 14px; height: 14px; }

.login-meta {
  margin-top: 16px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
}

@media (max-width: 480px) {
  .login-page { padding: 24px 16px; }
  .login-card { padding: 32px 22px 22px; border-radius: var(--radius); }
  .login-head h1 { font-size: 1.55rem; }
  .login-logo { height: 40px; }
  .login-foot { justify-content: center; }
  .login-foot .foot-sep { display: none; }
}


/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (min-width: 769px) and (max-width: 1100px) {
  .crm-sidebar {
    width: var(--sidebar-w-compact);
    flex-basis: var(--sidebar-w-compact);
    position: sticky;
  }
  .crm-sidebar .brand-text,
  .crm-sidebar .nav-label,
  .crm-sidebar .nav-chevron,
  .crm-sidebar .sidebar-foot-text,
  .crm-sidebar .nav-sub { display: none; }
  .crm-sidebar .sidebar-brand { justify-content: center; padding: 20px 0; }
  .crm-sidebar .nav-item { justify-content: center; padding: 11px 0; }
  .crm-sidebar .nav-item.is-active::before { left: -6px; }

  .crm-sidebar.expanded {
    width: var(--sidebar-w);
    flex-basis: var(--sidebar-w);
  }
  .crm-sidebar.expanded .brand-text,
  .crm-sidebar.expanded .nav-label,
  .crm-sidebar.expanded .nav-chevron,
  .crm-sidebar.expanded .sidebar-foot-text { display: block; }
  .crm-sidebar.expanded .nav-group.open .nav-sub { display: flex; }
  .crm-sidebar.expanded .sidebar-brand {
    justify-content: flex-start;
    padding: 20px 22px;
  }
  .crm-sidebar.expanded .nav-item {
    justify-content: flex-start;
    padding: 10px 12px;
  }
}

@media (max-width: 900px) {
  .landing .menu-toggle { display: flex; }
  .landing .nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 84vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 100px 26px 40px;
    background: #000000;
    border-left: 1px solid var(--secondary-12);
    transform: translateX(105%);
    transition: transform .45s var(--ease);
    z-index: 950;
    box-shadow: -20px 0 60px -30px rgba(0, 0, 0, 0.60);
  }
  .landing .nav.is-open { transform: translateX(0); }
  .landing .nav a {
    padding: 16px 18px;
    font-size: 1.02rem;
    border-radius: 10px;
    color: var(--secondary);
    border-bottom: 1px solid var(--secondary-08);
  }
  .landing .nav a::after { display: none; }
  .landing .nav a:hover { background: var(--secondary-08); color: var(--secondary); }

  .table-foot { justify-content: center; }
  .table-foot .foot-left,
  .table-foot .foot-right { flex: 0 0 auto; justify-content: center; }
  .table-foot .foot-center { order: -1; flex: 1 1 100%; }
}

@media (max-width: 768px) {
  :root { --navbar-h: 58px; }

  .landing .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }

  .crm-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 272px;
    flex-basis: 272px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 200;
    box-shadow: 6px 0 30px rgba(0, 0, 0, .45);
  }
  .crm-sidebar.open { transform: translateX(0); }

  .crm-main { padding: 18px 16px 26px; gap: 16px; }

  .crm-navbar { padding: 0 14px; gap: 10px; }
  .navbar-search { display: none; }
  .navbar-title h1 { font-size: 15px; }
  .navbar-title p { display: none; }
  .user-meta { display: none; }
  .user-chevron { display: none; }

  .crm-footer {
    padding: 14px 16px;
    font-size: 11.5px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2        { grid-template-columns: 1fr; }
  .alerts-grid   { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .landing .hero { padding: 40px 0 56px; }
  .landing .hero-copy h1 { font-size: clamp(2.1rem, 9vw, 3rem); }
  .landing .hero-actions .btn { flex: 1 1 auto; justify-content: center; }

  .landing .footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 28px;
  }
  .landing .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .landing .brand-logo { height: 38px; }

  .page-toolbar { padding: 14px 16px; }
  .toolbar-search { max-width: none; flex: 1 1 100%; }
  .toolbar-spacer { display: none; }
  .page-toolbar .btn { flex: 1 1 auto; justify-content: center; }
  .table-foot { padding: 14px 16px; gap: 12px; }
  .page-btn { min-width: 32px; height: 32px; }
}

@media (max-width: 560px) {
  .form-grid,
  .view-grid { grid-template-columns: 1fr; }

  .crm-modal { padding: 12px; }
  .crm-modal-dialog { max-height: calc(100vh - 24px); }
  .crm-modal-head,
  .crm-modal-body,
  .crm-modal-foot { padding-left: 16px; padding-right: 16px; }

  .crm-modal-foot { flex-direction: column-reverse; }
  .crm-modal-foot .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid     { grid-template-columns: 1fr; }
  .stat-value    { font-size: 20px; }
  .donut-wrap    { justify-content: center; }
  .donut-chart   { flex-basis: 170px; max-width: 170px; }
  .card-head     { padding: 16px 16px 10px; }
  .card-body     { padding: 6px 16px 16px; }
  .card-body.no-pad { padding: 0; }
  .data-table thead th,
  .data-table tbody td { padding-left: 16px; padding-right: 16px; }
}


/* =====================================================================
   4. REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  .landing .reveal { opacity: 1; transform: none; }
  .login-card { animation: none; }
}