/* ==========================================================================
   Flowmapp  ×  Glassmorphism  —  shared theme layer
   --------------------------------------------------------------------------
   "White blueprint desk with one blue pen" rendered as frosted glass:
   a soft blue gradient backdrop, translucent blurred panels, thin light
   edges, and Signal-Blue as the only saturated accent.
   Loaded LAST in every page so it wins over style.css and each dashboard's
   inline "Mission Control" (mc-theme) dark styling. The app reads all its
   colours from CSS variables, so remapping them re-skins every section; the
   component rules add the glass fill + backdrop-blur on top.
   (Filename kept as flowmapp-clay.css so existing <link>s keep working.)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ─────────────────────────────────────────────────────────────
   1. TOKENS — Flowmapp palette + glass recipe (light / default)
   ───────────────────────────────────────────────────────────── */
:root,
body.mc-theme{
  /* Flowmapp palette */
  --fm-ink:#000000;
  --fm-carbon:#222222;
  --fm-graphite:#3f5170;
  --fm-pencil:#7185a0;
  --fm-paper:#ffffff;
  --fm-signal:#0080ff;
  --fm-voltage:#0050ff;
  --fm-sky:#c5e0fb;

  /* Glass recipe */
  --glass-fill:rgba(255,255,255,.42);
  --glass-fill-2:rgba(255,255,255,.30);
  --glass-fill-strong:rgba(255,255,255,.58);
  --glass-brd:rgba(255,255,255,.60);
  --glass-blur:blur(16px);
  --glass-blur-lite:blur(10px);
  --glass-sh:0 10px 34px rgba(28,55,110,.16);
  --glass-sh-sm:0 5px 18px rgba(28,55,110,.13);

  /* ---- remap the app's existing variables ---- */
  --bg-page:transparent;
  --bg-deep:rgba(255,255,255,.42);
  --bg-card:rgba(255,255,255,.42);
  --bg-dark:rgba(255,255,255,.48);
  --bg-hover:rgba(255,255,255,.32);
  --bg-input:rgba(255,255,255,.48);

  /* brand / primary accent → Signal Blue (single saturated signal) */
  --teal:#0080ff;
  --teal-dark:#0050ff;
  --teal-light:rgba(0,128,255,.16);
  --teal-dim:rgba(0,128,255,.12);
  --teal-border:rgba(0,128,255,.32);
  --teal-header:rgba(255,255,255,.48);          /* topbar = frosted glass */

  /* status / accent colours */
  --orange:#e8590c;  --orange-d:#c2410c;  --orange-dim:rgba(232,89,12,.14); --orange-b:rgba(232,89,12,.30);
  --blue:#0080ff;    --blue-l:#3aa0ff;    --blue-dim:rgba(0,128,255,.14);   --blue-b:rgba(0,128,255,.30);
  --green:#0e9f6e;   --green-dim:rgba(14,159,110,.14); --green-light:rgba(14,159,110,.18);
  --yellow:#c77700;  --yellow-dim:rgba(199,119,0,.14);
  --red:#e11d48;     --red-dim:rgba(225,29,72,.14);    --red-light:rgba(225,29,72,.18);
  --purple:#0050ff;  --purple-dim:rgba(0,80,255,.14);  --purple-light:rgba(0,80,255,.18); --purple-dark:#0040cc;
  --amber-light:rgba(199,119,0,.14);

  /* text */
  --white:var(--fm-ink);
  --t1:var(--fm-ink);
  --t2:var(--fm-graphite);
  --t3:var(--fm-pencil);
  --text-primary:var(--fm-ink);
  --text-secondary:var(--fm-graphite);
  --text-dim:var(--fm-pencil);

  /* borders — subtle blue-gray dividers; glass edges come from --glass-brd */
  --border:rgba(60,85,130,.16);
  --border-md:rgba(60,85,130,.28);

  /* type + rounded geometry */
  --font:'Inter',sans-serif;
  --mono:'Inter',sans-serif;
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px;
  --radius-sm:12px; --radius-md:16px; --radius-lg:20px; --radius-xl:24px;

  /* muted role tints */
  --role-admin:#0080ff;
  --role-partner:#0050ff;
  --role-investor:#0e9f6e;
  --role-employee:#00a6c4;
}

/* ─────────────────────────────────────────────────────────────
   2. BASE — soft blue gradient backdrop for the frosting to read;
      kills the dark Mission-Control background
   ───────────────────────────────────────────────────────────── */
body,
body.mc-theme,
body.login-page{
  background:
    radial-gradient(620px 520px at 12% -6%, rgba(0,128,255,.26), transparent 60%),
    radial-gradient(560px 520px at 108% 8%, rgba(0,80,255,.20), transparent 60%),
    radial-gradient(560px 540px at 50% 112%, rgba(0,194,255,.20), transparent 62%),
    linear-gradient(135deg,#e3edfb 0%,#eef3fb 100%) !important;
  background-attachment:fixed !important;
  color:var(--fm-ink);
  font-family:'Inter',sans-serif;
}
body.mc-theme ::-webkit-scrollbar-thumb{background:rgba(0,128,255,.32) !important}
.page-body, body.mc-theme .page-body{background:transparent !important}

/* ─────────────────────────────────────────────────────────────
   3. GLASS SURFACES — panels, cards, modals
      (doubled with body.mc-theme so they beat inline dashboard rules)
   ───────────────────────────────────────────────────────────── */
.panel, body.mc-theme .panel,
.store-card, body.mc-theme .store-card,
.account-selector, body.mc-theme .account-selector,
.note-card, body.mc-theme .note-card,
.metric-card, body.mc-theme .metric-card{
  background:var(--glass-fill) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  border:1px solid var(--glass-brd) !important;
  border-radius:22px !important;
  box-shadow:var(--glass-sh) !important;
}
.metric-card::before, body.mc-theme .metric-card::before,
.metric-card::after,  body.mc-theme .metric-card::after,
.store-card::before,  body.mc-theme .store-card::before{display:none !important}
.metric-card:hover, body.mc-theme .metric-card:hover,
.panel:hover, body.mc-theme .panel:hover,
.store-card:hover, body.mc-theme .store-card:hover{
  transform:translateY(-3px) !important;
  background:var(--glass-fill-strong) !important;
  box-shadow:0 16px 40px rgba(28,55,110,.20) !important;
  border-color:rgba(255,255,255,.75) !important;
}
.modal-card, body.mc-theme .modal-card{
  background:rgba(255,255,255,.62) !important;
  backdrop-filter:blur(24px) !important;
  -webkit-backdrop-filter:blur(24px) !important;
  border:1px solid var(--glass-brd) !important;
  border-radius:26px !important;
  box-shadow:0 24px 60px rgba(20,45,95,.30) !important;
}
.modal-card::before, body.mc-theme .modal-card::before{display:none !important}
.modal-bg, body.mc-theme .modal-bg{background:rgba(20,40,80,.35) !important;backdrop-filter:blur(3px)}

/* ── Add / Edit Product modal (the .pm-* form) ── */
.pm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.pm-head-title{font-size:19px;font-weight:800;color:var(--fm-ink);letter-spacing:-.02em}
.pm-head-sub{font-size:12.5px;color:var(--fm-pencil);margin-top:3px;line-height:1.35}
.pm-body{display:flex;flex-direction:column;gap:16px}
.pm-image-row{display:flex;gap:14px;align-items:flex-start}
.pm-thumb{width:82px;height:82px;flex-shrink:0;border-radius:16px;border:1px solid var(--glass-brd);
  background:rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;color:var(--fm-pencil);overflow:hidden}
.pm-thumb img{width:100%;height:100%;object-fit:cover}
.pm-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pm-field{display:flex;flex-direction:column;gap:6px}
.pm-field label{font-size:12px;font-weight:700;color:var(--fm-graphite);letter-spacing:.01em}
.pm-field .req{color:#e5484d;font-weight:800;margin-left:1px}
.pm-input{width:100%;box-sizing:border-box;font-family:'Inter',sans-serif;font-size:13.5px;color:var(--fm-ink);
  background:rgba(255,255,255,.55);border:1px solid var(--glass-brd);border-radius:12px;padding:10px 14px;
  outline:none;transition:.15s ease;backdrop-filter:var(--glass-blur-lite);-webkit-backdrop-filter:var(--glass-blur-lite)}
.pm-input::placeholder{color:var(--fm-pencil);opacity:.75}
.pm-input:focus{border-color:var(--fm-signal);box-shadow:0 0 0 3px rgba(0,128,255,.14);background:rgba(255,255,255,.82)}
.pm-input.invalid{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.15)}
textarea.pm-input{resize:vertical;min-height:72px;line-height:1.5;font-family:'Inter',sans-serif}
.pm-input-prefix{display:flex;align-items:center;background:rgba(255,255,255,.55);border:1px solid var(--glass-brd);
  border-radius:12px;overflow:hidden;backdrop-filter:var(--glass-blur-lite);-webkit-backdrop-filter:var(--glass-blur-lite);transition:.15s ease}
.pm-input-prefix:focus-within{border-color:var(--fm-signal);box-shadow:0 0 0 3px rgba(0,128,255,.14)}
.pm-input-prefix .prefix{padding:0 2px 0 14px;color:var(--fm-pencil);font-weight:800;font-size:14px}
.pm-input-prefix .pm-input{border:none;box-shadow:none;background:transparent;border-radius:0;padding-left:6px;backdrop-filter:none}
.pm-hint{font-size:11px;color:var(--fm-pencil);line-height:1.35}
.pm-err{font-size:11.5px;color:#e5484d;font-weight:600}
.pm-err:empty{display:none}
.pm-foot{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:24px;padding-top:18px;border-top:1px solid var(--glass-brd)}
.metric-value, body.mc-theme .metric-value{font-family:'Inter',sans-serif !important;color:var(--fm-ink) !important;font-weight:700}

/* ─────────────────────────────────────────────────────────────
   4. SIDEBAR + TOPBAR — frosted chrome
   ───────────────────────────────────────────────────────────── */
.sidebar, body.mc-theme .sidebar{
  background:rgba(255,255,255,.45) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  border-right:1px solid var(--glass-brd) !important;
  box-shadow:0 0 30px rgba(28,55,110,.10) !important;
}
.topbar, body.mc-theme .topbar{
  background:rgba(255,255,255,.42) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  color:var(--fm-ink) !important;
  border-bottom:1px solid var(--glass-brd) !important;
  box-shadow:0 4px 20px rgba(28,55,110,.10) !important;
}
.topbar-title, body.mc-theme .topbar-title{color:var(--fm-ink) !important}
.topbar .time-select, body.mc-theme .topbar .time-select{
  background:rgba(255,255,255,.5) !important;color:var(--fm-carbon) !important;
  border:1px solid var(--glass-brd) !important;border-radius:999px !important;backdrop-filter:var(--glass-blur-lite);
}
.topbar .time-select option{color:var(--fm-carbon)}

.nav-item, body.mc-theme .nav-item{
  border:1px solid transparent !important;border-radius:14px !important;color:var(--fm-graphite) !important;transition:.18s ease;
}
.nav-item::before, body.mc-theme .nav-item::before{display:none !important}
.nav-item:hover, body.mc-theme .nav-item:hover{
  background:rgba(255,255,255,.55) !important;color:var(--fm-signal) !important;
  border-color:var(--glass-brd) !important;transform:none !important;
}
.nav-item.active, body.mc-theme .nav-item.active{
  background:rgba(0,128,255,.16) !important;color:var(--fm-signal) !important;
  border-color:rgba(0,128,255,.30) !important;
}
.nav-item.active svg, .nav-item:hover svg{opacity:1}
.brand-icon-sm, body.mc-theme .brand-icon-sm{background:var(--fm-signal) !important;border-radius:14px !important}

/* ─────────────────────────────────────────────────────────────
   5. BUTTONS — full pills; frosted Signal-Blue primary, glass secondary
   ───────────────────────────────────────────────────────────── */
.btn-primary, body.mc-theme .btn-primary{
  background:rgba(0,128,255,.90) !important;color:#fff !important;
  backdrop-filter:var(--glass-blur-lite) !important;-webkit-backdrop-filter:var(--glass-blur-lite) !important;
  border:1px solid rgba(255,255,255,.35) !important;border-radius:999px !important;font-weight:600 !important;
  box-shadow:0 8px 22px rgba(0,128,255,.34) !important;transition:.18s ease;
}
.btn-primary:hover, body.mc-theme .btn-primary:hover{
  background:rgba(0,110,235,.96) !important;transform:translateY(-2px) !important;
  box-shadow:0 12px 30px rgba(0,128,255,.42) !important;
}
.btn-primary:active, body.mc-theme .btn-primary:active{transform:translateY(0) !important}
.btn-primary.btn-green, body.mc-theme .btn-primary.btn-green{background:rgba(14,159,110,.92) !important;box-shadow:0 8px 22px rgba(14,159,110,.32) !important}

.btn-ghost, body.mc-theme .btn-ghost{
  background:rgba(255,255,255,.42) !important;color:var(--fm-carbon) !important;
  backdrop-filter:var(--glass-blur-lite) !important;-webkit-backdrop-filter:var(--glass-blur-lite) !important;
  border:1px solid var(--glass-brd) !important;border-radius:999px !important;
  box-shadow:var(--glass-sh-sm) !important;transition:.18s ease;
}
.btn-ghost:hover, body.mc-theme .btn-ghost:hover{color:var(--fm-signal) !important;background:rgba(255,255,255,.6) !important}
.btn-icon, body.mc-theme .btn-icon{
  background:rgba(255,255,255,.42) !important;border:1px solid var(--glass-brd) !important;border-radius:13px !important;
  backdrop-filter:var(--glass-blur-lite) !important;color:var(--fm-graphite) !important;
}
.btn-icon:hover, body.mc-theme .btn-icon:hover{color:var(--fm-signal) !important;background:rgba(255,255,255,.6) !important;transform:none !important}
.theme-toggle, body.mc-theme .theme-toggle{
  background:rgba(255,255,255,.42) !important;border:1px solid var(--glass-brd) !important;
  backdrop-filter:var(--glass-blur-lite) !important;color:var(--fm-graphite) !important;box-shadow:var(--glass-sh-sm) !important;
}
.theme-toggle:hover{color:var(--fm-signal) !important;background:rgba(255,255,255,.6) !important}

/* ─────────────────────────────────────────────────────────────
   6. PILLS, TABS, FILTERS — glass raised / accent-filled active
   ───────────────────────────────────────────────────────────── */
.filter-pill, body.mc-theme .filter-pill,
.acc-tab, body.mc-theme .acc-tab{
  background:rgba(255,255,255,.42) !important;border:1px solid var(--glass-brd) !important;border-radius:999px !important;
  color:var(--fm-graphite) !important;backdrop-filter:var(--glass-blur-lite) !important;transition:.16s ease;
}
.filter-pill:hover, .acc-tab:hover{color:var(--fm-signal) !important;background:rgba(255,255,255,.6) !important;transform:none !important}
.filter-pill.active-admin, .acc-tab.active, body.mc-theme .acc-tab.active{background:rgba(0,128,255,.90) !important;color:#fff !important;border-color:rgba(255,255,255,.4) !important}
.filter-pill.active-investor{background:rgba(14,159,110,.90) !important;color:#fff !important;border-color:rgba(255,255,255,.4) !important}
.filter-pill.active-partner{background:rgba(0,80,255,.90) !important;color:#fff !important;border-color:rgba(255,255,255,.4) !important}
.filter-pill.active-employee{background:rgba(0,166,196,.90) !important;color:#fff !important;border-color:rgba(255,255,255,.4) !important}

/* ─────────────────────────────────────────────────────────────
   7. INPUTS — frosted wells, 12px radius
   ───────────────────────────────────────────────────────────── */
.field-input, body.mc-theme .field-input,
.search-bar, body.mc-theme .search-bar{
  background:rgba(255,255,255,.5) !important;border:1px solid var(--glass-brd) !important;border-radius:12px !important;
  backdrop-filter:var(--glass-blur-lite) !important;color:var(--fm-ink) !important;
}
.field-input:focus, body.mc-theme .field-input:focus{border-color:var(--fm-signal) !important;box-shadow:0 0 0 3px var(--teal-dim) !important}
.search-bar:focus-within{border-color:var(--fm-signal) !important;box-shadow:0 0 0 3px var(--teal-dim) !important}

/* ─────────────────────────────────────────────────────────────
   8. TABLES + BADGES
   ───────────────────────────────────────────────────────────── */
th, body.mc-theme th{background:transparent !important;color:var(--fm-pencil) !important}
td, body.mc-theme td{border-bottom:1px solid var(--border) !important;color:var(--fm-carbon) !important}
tr:hover td, body.mc-theme table tbody tr:hover td{background:rgba(0,128,255,.06) !important}
.status-badge, body.mc-theme .status-badge{border-radius:999px !important;font-family:'Inter',sans-serif !important}
.badge{border-radius:999px !important}
.role-banner, body.mc-theme .role-banner{border-radius:999px !important;border:1px solid var(--glass-brd) !important;background:rgba(255,255,255,.4) !important;backdrop-filter:var(--glass-blur-lite)}

/* ─────────────────────────────────────────────────────────────
   9. NEUTRALISE the dark-tuned visualisations for the light canvas
   ───────────────────────────────────────────────────────────── */
.mc-line-svg .grid line{stroke:rgba(60,85,130,.20) !important}
.mc-line-svg .linepath{stroke:var(--fm-signal) !important}
.mc-line-svg .fillpath{fill:rgba(0,128,255,.12) !important}
.mc-line-svg .pt{fill:var(--fm-signal) !important}
.mc-line-tooltip{background:rgba(255,255,255,.9) !important;color:var(--fm-ink) !important;border-color:var(--teal-border) !important}
.mc-radar-svg .web,.mc-radar-svg .axis{stroke:rgba(60,85,130,.24) !important}
.mc-radar-svg .lbl{fill:var(--fm-graphite) !important}
.mc-heat-cell{background:rgba(60,85,130,.12)}
.bar-track, body.mc-theme .bar-track{background:rgba(255,255,255,.4) !important;border:1px solid var(--glass-brd) !important}
.bar-fill{background:var(--fm-signal) !important}

/* ─────────────────────────────────────────────────────────────
   10. LOGIN page — frosted card floating on the blue gradient
   ───────────────────────────────────────────────────────────── */
.login-page{background:transparent}
.login-card{
  background:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(22px) !important;-webkit-backdrop-filter:blur(22px) !important;
  border:1px solid var(--glass-brd) !important;border-radius:28px !important;
  box-shadow:0 24px 60px rgba(20,45,95,.28) !important;
}
.login-card::before{display:none !important}
.brand-icon{background:var(--fm-signal) !important;border-radius:16px !important}
.btn-full{border-radius:999px !important}

/* ─────────────────────────────────────────────────────────────
   11. DARK-MODE glass variant — keep the toggle meaningful
       (deep navy gradient, same blue pen, dark frosted panels)
   ───────────────────────────────────────────────────────────── */
body.dark-mode,
body.mc-theme.dark-mode{
  --glass-fill:rgba(30,44,70,.46);
  --glass-fill-2:rgba(30,44,70,.36);
  --glass-fill-strong:rgba(40,58,92,.60);
  --glass-brd:rgba(140,170,220,.22);
  --bg-card:rgba(30,44,70,.46);
  --bg-dark:rgba(30,44,70,.52);
  --bg-hover:rgba(50,70,110,.4);
  --bg-input:rgba(20,32,54,.5);
  --bg-deep:rgba(255,255,255,.05);
  --teal-header:rgba(30,44,70,.5);
  --white:#eaf1fb; --t1:#eaf1fb; --t2:#a7b7d0; --t3:#6f83a4;
  --text-primary:#eaf1fb; --text-secondary:#a7b7d0; --text-dim:#6f83a4;
  --border:rgba(160,185,225,.16); --border-md:rgba(160,185,225,.26);
}
body.dark-mode, body.mc-theme.dark-mode, body.dark-mode.login-page{
  background:
    radial-gradient(620px 520px at 12% -6%, rgba(0,110,235,.28), transparent 60%),
    radial-gradient(560px 520px at 108% 8%, rgba(0,60,190,.24), transparent 60%),
    linear-gradient(135deg,#0c1424 0%,#111d33 100%) !important;
}
body.dark-mode .topbar-title, body.dark-mode.mc-theme .topbar-title{color:#eaf1fb !important}
body.dark-mode td{color:#cdd8e8 !important}
body.dark-mode .btn-ghost{color:#cdd8e8 !important}

/* ─────────────────────────────────────────────────────────────
   12. FIXES for elements that assumed the old dark/coloured topbar
   ───────────────────────────────────────────────────────────── */
.mobile-menu-btn, body.mc-theme .mobile-menu-btn{color:var(--fm-carbon) !important}
.topbar .btn-icon svg, .topbar-right svg{color:var(--fm-graphite)}
.av-admin{background:var(--role-admin) !important;color:#fff !important}
.av-investor{background:var(--role-investor) !important;color:#fff !important}
.av-partner{background:var(--role-partner) !important;color:#fff !important}
.av-employee{background:var(--role-employee) !important;color:#fff !important}
body.dark-mode .mobile-menu-btn, body.dark-mode .topbar .btn-icon svg{color:#a7b7d0 !important}

/* ─────────────────────────────────────────────────────────────
   13. Brand wordmark → animated BLUE (replaces the rainbow)
   ───────────────────────────────────────────────────────────── */
.ebw-brand{
  padding:0 !important;border-radius:0 !important;
  background:linear-gradient(90deg,#0080ff,#00c2ff,#0050ff,#4f9bff,#0080ff) !important;
  background-size:200% auto !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  filter:none !important;
}
/* remove the rectangle box + glow ring around the wordmark */
.ebw-brand::before{display:none !important}
.ebw-brand::after{display:none !important}
/* per-letter hover bounce (letters are split into spans by config.js) */
.ebw-letter{
  display:inline-block;
  background:linear-gradient(90deg,#0080ff,#00c2ff,#0050ff,#4f9bff,#0080ff);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:ebwText 3s linear infinite;
  transition:transform .25s cubic-bezier(.34,1.7,.5,1);
  will-change:transform;
}
.ebw-brand:hover .ebw-letter{opacity:.55}
.ebw-letter:hover{transform:translateY(-7px) scale(1.4);opacity:1 !important}

/* ─────────────────────────────────────────────────────────────
   14. Native <select> → themed glass pill with custom arrow
   ───────────────────────────────────────────────────────────── */
select, select.field-input{
  -webkit-appearance:none;appearance:none;
  background-color:rgba(255,255,255,.42) !important;
  border:1px solid var(--glass-brd) !important;border-radius:999px !important;
  color:var(--fm-graphite) !important;padding-left:15px !important;padding-right:34px !important;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230080ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 14px center !important;
  backdrop-filter:var(--glass-blur-lite) !important;cursor:pointer;transition:.16s ease;
}
select:hover{background-color:rgba(255,255,255,.6) !important;color:var(--fm-signal) !important;border-color:var(--fm-signal) !important}
select:focus{border-color:var(--fm-signal) !important;box-shadow:0 0 0 3px var(--teal-dim) !important;outline:none}
select option{background:#ffffff !important;color:#0a1a2f !important;font-weight:500}
body.dark-mode select option{background:#182437 !important;color:#eaf1fb !important}

/* ─────────────────────────────────────────────────────────────
   15. Animated column chart (replaces the broken order heatmap)
   ───────────────────────────────────────────────────────────── */
.mc-bars-wrap{padding:8px 2px 0}
.mc-bars-svg{width:100%;height:210px;display:block;overflow:visible}
.mc-bar-col{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);
  animation:mcBarGrow .75s cubic-bezier(.2,.85,.25,1) forwards;transition:opacity .15s}
.mc-bar-col:hover{opacity:.82}
@keyframes mcBarGrow{to{transform:scaleY(1)}}
.mc-bar-val{fill:var(--fm-ink);font-size:11px;font-weight:700;font-family:'Inter',sans-serif}
.mc-bar-lbl{fill:var(--fm-pencil);font-size:9.5px;font-family:'Inter',sans-serif}

/* ═════════════════════════════════════════════════════════════════
   HOVER — kaam karne wali screens par cheezein HILNI nahi chahiye.

   Pehle buttons/cards hover par upar uth jate the (translateY/scale).
   Chhote buttons par ye takleef deta hai: cursor le jao to cheez khisak
   jati hai, aur click miss ho jata hai — khaas kar table ki rows me.

   Ab hover sirf RANG se batata hai ke cheez clickable hai — koi harkat
   nahi. Ye aakhir me hai taake har page ke apne styles par bhaari rahe.
   ═════════════════════════════════════════════════════════════════ */
.btn-primary:hover, .btn-ghost:hover, .btn-icon:hover,
.filter-pill:hover, .acc-tab:hover, .nav-item:hover,
.metric-card:hover, .store-card:hover, .panel:hover,
.of-row:hover, .of-tab:hover, .of-person:hover,
tr:hover, td:hover, .mc-heat-cell:hover, .ebw-letter:hover,
body.mc-theme .btn-primary:hover, body.mc-theme .btn-ghost:hover,
body.mc-theme .btn-icon:hover, body.mc-theme .filter-pill:hover,
body.mc-theme .acc-tab:hover, body.mc-theme .nav-item:hover,
body.mc-theme .metric-card:hover, body.mc-theme .store-card:hover,
body.mc-theme .panel:hover {
  transform: none !important;
}

/* Panel ek container hai — clickable nahi. Is par hover ka koi kaam nahi. */
.panel:hover, body.mc-theme .panel:hover {
  background: var(--glass-fill) !important;
  box-shadow: var(--glass-sh) !important;
  border-color: var(--glass-brd) !important;
}

/* Cards ki hover shadow bhi halki — bara shadow "uthne" ka dhoka deta hai */
.metric-card:hover, .store-card:hover,
body.mc-theme .metric-card:hover, body.mc-theme .store-card:hover {
  box-shadow: 0 4px 14px rgba(20,45,95,.10) !important;
}
.btn-primary:hover, body.mc-theme .btn-primary:hover {
  box-shadow: 0 3px 12px rgba(0,128,255,.26) !important;
}

/* Sidebar ke brand letters — kaam ke waqt uchalne ki koi zaroorat nahi */
.ebw-letter:hover { opacity: 1 !important; }

/* ═════════════════════════════════════════════════════════════════
   UNIFIED — Office Management wali design zubaan, har page par.

   Office section ka look pasand aaya, to us ke usool yahan shared
   classes par laga diye — is tarah har dashboard ko wohi shakl mil
   jati hai bina har section ka JS dobara likhe.

   Usool:
     • Number instrument ki tarah parhe jayein — tabular, aligned
     • Label chhota, uppercase, shaant
     • Rang sirf HAALAT bataye (achha/bura/late) — sajawat ke liye nahi
     • Sajawati gradient bars aur bhaari shadows nahi
   ═════════════════════════════════════════════════════════════════ */
:root, body.mc-theme {
  --u-ink:   #0d1b2a;
  --u-quiet: #6b7d95;
  --u-line:  rgba(13,27,42,.11);
  --u-pane:  rgba(255,255,255,.58);
  --u-edge:  rgba(255,255,255,.66);
}

/* ── Har data number tabular — columns me theek align hote hain ── */
.metric-value, .stat-value, td, th,
.of-t, .card-price, .mini-amount {
  font-variant-numeric: tabular-nums;
}

/* ── KPI cards — Office ke of-kpi jaisa ───────────────────────── */
.metric-card, body.mc-theme .metric-card {
  border-radius: 16px !important;
  padding: 15px 17px !important;
  box-shadow: 0 3px 12px rgba(20,45,95,.07) !important;
}
/* Sajawati gradient patti hata di — koi maloomat nahi deti thi */
.metric-card::before, body.mc-theme .metric-card::before { display: none !important; }

.metric-label, body.mc-theme .metric-label {
  font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: .09em !important; text-transform: uppercase !important;
  color: var(--u-quiet) !important; margin-bottom: 7px !important;
}
.metric-value, body.mc-theme .metric-value {
  font-size: 22px !important; font-weight: 800 !important;
  color: var(--u-ink) !important; line-height: 1 !important;
  letter-spacing: -.015em !important;
}
.metric-sub, body.mc-theme .metric-sub {
  font-size: 11.5px !important; font-weight: 600 !important; margin-top: 6px !important;
}

/* ── Pills / tabs — shaant, active saaf nazar aaye ────────────── */
.filter-pill, .acc-tab,
body.mc-theme .filter-pill, body.mc-theme .acc-tab {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  color: var(--u-quiet) !important;
  font-weight: 650 !important;
  backdrop-filter: none !important;
}
.filter-pill:hover, .acc-tab:hover,
body.mc-theme .filter-pill:hover, body.mc-theme .acc-tab:hover {
  background: rgba(255,255,255,.52) !important;
  color: var(--u-ink) !important;
  border-color: transparent !important;
}
/* Active = uthi hui safed tile (bhari rang wali fill ki jagah) */
.filter-pill.active-admin, .filter-pill.active-partner,
.filter-pill.active-investor, .filter-pill.active-employee,
.acc-tab.active, body.mc-theme .acc-tab.active,
body.mc-theme .filter-pill.active-admin, body.mc-theme .filter-pill.active-partner,
body.mc-theme .filter-pill.active-investor, body.mc-theme .filter-pill.active-employee {
  background: var(--u-pane) !important;
  border-color: var(--u-edge) !important;
  color: var(--u-ink) !important;
  box-shadow: 0 3px 12px rgba(20,45,95,.07) !important;
}

/* ── Panels — halka, saaf ─────────────────────────────────────── */
.panel, body.mc-theme .panel {
  border-radius: 18px !important;
  box-shadow: 0 4px 16px rgba(20,45,95,.07) !important;
}
.panel-header, body.mc-theme .panel-header {
  border-bottom: 1px solid var(--u-line) !important;
  padding-bottom: 12px !important; margin-bottom: 14px !important;
}
.panel-title, body.mc-theme .panel-title {
  font-size: 14.5px !important; font-weight: 800 !important;
  color: var(--u-ink) !important; letter-spacing: -.01em !important;
}
.panel-sub, body.mc-theme .panel-sub {
  font-size: 11.5px !important; color: var(--u-quiet) !important;
}

/* ── Tables — hairline rows, chhote uppercase headers ──────────
   Yahan !important jaan bujh kar NAHI lagaya (sirf background/border par).
   Bohot si cells me inline color/padding hai (jaise style="color:var(--t2)")
   — !important un ko daba deta aur maddham text kaala ho jata. Ye rules
   baad me aate hain, is liye bina !important ke bhi style.css par bhaari hain. */
th, body.mc-theme th {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--u-quiet);
  background: transparent !important;
  border-bottom: 1px solid var(--u-line) !important;
  padding: 9px 10px;
}
td, body.mc-theme td {
  border-bottom: 1px solid var(--u-line) !important;
  padding: 11px 10px;
}
tr:hover td, body.mc-theme tr:hover td {
  background: rgba(255,255,255,.42) !important;
}

/* ── Status badges — shaant, sirf haalat batayein ─────────────── */
.status-badge, body.mc-theme .status-badge {
  font-size: 11px !important; font-weight: 700 !important;
  padding: 3px 10px !important; border-radius: 8px !important;
  letter-spacing: .01em !important;
}

/* ── Buttons — Office jaisa napa tula ─────────────────────────── */
.btn-primary, body.mc-theme .btn-primary {
  border-radius: 11px !important; font-weight: 700 !important;
  box-shadow: 0 3px 12px rgba(0,128,255,.24) !important;
}
.btn-ghost, body.mc-theme .btn-ghost {
  border-radius: 11px !important; font-weight: 650 !important;
  border-color: var(--u-edge) !important;
  color: var(--u-quiet) !important;
}
.btn-ghost:hover, body.mc-theme .btn-ghost:hover {
  background: rgba(255,255,255,.52) !important;
  color: var(--u-ink) !important;
}

/* ── Inputs — wahi glass pill ─────────────────────────────────── */
.field-input, body.mc-theme .field-input,
.search-bar input, body.mc-theme .search-bar input {
  border-radius: 11px !important;
  border-color: var(--u-edge) !important;
}
.search-bar, body.mc-theme .search-bar {
  border-radius: 11px !important;
  border: 1px solid var(--u-edge) !important;
  background: var(--u-pane) !important;
}