/*
 * COMMUNITE MOBILE / PREMIUM SCARLET + DARK EXECUTIVE
 * Component-level, presentation-only theme contract.
 *
 * Last stylesheet on authenticated pages. Original functional layout rules,
 * navigation scripts, mobile drawers and accounting logic remain untouched.
 * Legacy theme declarations occasionally use !important; isolated exceptions
 * below bridge them, rather than globally recoloring every element.
 */

/* 1. Semantic tokens shared by authenticated views. */
:root {
  --cm-page: #f7f4f5;
  --cm-surface: #ffffff;
  --cm-elevated: #f9f0f3;
  --cm-guide: #fff8fa;
  --cm-text: #25232d;
  --cm-secondary: #62616e;
  --cm-label: #503749;
  --cm-accent: #b4233f;
  --cm-accent-strong: #78182f;
  --cm-border: #e5d8df;
  --cm-control: #ffffff;
  --cm-control-text: #25232d;
  --cm-control-outline: #897b87;
  --cm-placeholder: #70636f;
  --cm-focus: #b4233f;
  --cm-sidebar-bg: #53172d;
  --cm-sidebar-text: #fff1f5;
  --cm-sidebar-muted: #f4c9d7;
  --cm-sidebar-active: #a62b4a;
  --cm-highlight: #fceef1;
  --cm-shadow: 0 8px 28px rgba(56,29,42,.085),0 1px 3px rgba(56,29,42,.04);
  --cm-radius: 17px;
  /* Existing views and components still consume these public variables. */
  --red: #b4233f;
  --red-dark: #78182f;
  --red-light: #fceef1;
  --ink: #25232d;
  --muted: #62616e;
  --line: #e5d8df;
}
html.cm-dark {
  --cm-page: #11151d;
  --cm-surface: #1d2530;
  --cm-elevated: #27313f;
  --cm-guide: #242d39;
  --cm-text: #f2f4f8;
  --cm-secondary: #b9c2cf;
  --cm-label: #d9e0ec;
  --cm-accent: #e6627c;
  --cm-accent-strong: #ff94a9;
  --cm-border: #465367;
  --cm-control: #27313f;
  --cm-control-text: #f2f4f8;
  --cm-control-outline: #8291a4;
  --cm-placeholder: #b9c2cf;
  --cm-focus: #fa829d;
  --cm-sidebar-bg: #171d26;
  --cm-sidebar-text: #eef1f6;
  --cm-sidebar-muted: #c7d0dd;
  --cm-sidebar-active: #713049;
  --cm-highlight: #392d3b;
  --cm-shadow: 0 12px 32px rgba(0,0,0,.22),0 2px 7px rgba(0,0,0,.15);
  --red: #e45b75;
  --red-dark: #e45b75;
  --red-light: #452839;
  --ink: #f2f4f8;
  --muted: #b9c2cf;
  --line: #465367;
}

/* 2. The workspace is the only theme surface (not the login page). */
html .workspace { color: var(--cm-text); background: var(--cm-page) !important; }
html .workspace main#main { background: transparent !important; }
html.cm-dark .workspace { color-scheme: dark; }
html:not(.cm-dark) .workspace { color-scheme: light; }
html .workspace .page-heading h1,
html .workspace .panel-header h2,
html .workspace .help-panel h2 { color: var(--cm-text) !important; }
html .workspace .page-heading p,
html .workspace .panel-header small,
html .workspace .fine-print,
html .workspace .field-hint,
html .workspace .field > small { color: var(--cm-secondary) !important; }
html .workspace .page-heading .eyebrow { color: var(--cm-accent); }

/* 3. Sidebar retains its dark burgundy identity in BOTH modes. */
html .sidebar {
  background: var(--cm-sidebar-bg) !important;
  border-color: var(--cm-border) !important;
  color: var(--cm-sidebar-text) !important;
}
html .sidebar .brand-copy strong,
html .sidebar .brand-copy strong span,
html .sidebar .user-block,
html .sidebar .user-block span,
html .sidebar .settings-link { color: var(--cm-sidebar-text) !important; }
html .sidebar :is(
  .sidebar-label,.nav-secondary-label,.brand-official small,
  .cm4-menu-title,.cm4-menu-footer,.cm4-menu-footer small,
  .sidebar-foot,.sidebar-foot small,.account-links,.account-links a,
  .account-links .text-button,.user-block small
) { color: var(--cm-sidebar-muted) !important; opacity: 1; }
html .sidebar :is(
  .nav-link,.nav-link:visited,.cm4-nav-group-title,
  .cm4-nav-group-count,.cm4-fav-toggle,.cm4-shortcuts a
) { color: var(--cm-sidebar-text) !important; opacity: 1; }
html .sidebar .nav-link.active {
  background: var(--cm-sidebar-active) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 #f7b9cb !important;
}
html .sidebar .nav-link:not(.active):hover,
html .sidebar .cm4-nav-group-title:hover {
  background: rgba(255,255,255,.13) !important;
  color: #fff !important;
}
html .sidebar .nav-link .nav-icon { opacity: 1 !important; }
html .sidebar .cm4-menu-search {
  background: rgba(255,255,255,.13) !important;
  border-color: #bb9ca9 !important;
  color: #fff !important;
}
html .sidebar .cm4-menu-search::placeholder { color: #ffdfeb !important; }

/* 4. Header, date, search, notifications and team presence. */
html .workspace .topbar {
  background: var(--cm-surface) !important;
  color: var(--cm-text);
  border-color: var(--cm-border) !important;
  box-shadow: var(--cm-shadow);
}
html .workspace :is(
  .topbar-global-search,.cm-live-time,.date-picker,
  .cm-theme-toggle,.cm-search-open,.topbar-notifications summary,
  .team-presence-menu > summary,.working-date-summary
) {
  background: var(--cm-elevated) !important;
  color: var(--cm-text) !important;
  border-color: var(--cm-border) !important;
}
html .workspace :is(
  .working-date-summary span,.working-date-summary strong,
  .cm-live-time small,.cm-live-time strong,.notification-text,
  .team-presence-menu > summary
) { color: var(--cm-text) !important; opacity: 1; }
html .workspace .cm-live-time strong { color: var(--cm-accent-strong) !important; }
html .workspace :is(
  .notification-dropdown,.team-presence-popover,.cm-global-search-dialog,
  .cm4-record-drawer,.cm-quick-launch-menu
) {
  background: var(--cm-surface) !important;
  color: var(--cm-text) !important;
  border-color: var(--cm-border) !important;
}
html .workspace :is(
  .notification-preview,.notification-today-head,.cm-search-field
) { background: var(--cm-elevated); color: var(--cm-text); border-color: var(--cm-border); }
html .workspace :is(.notification-dropdown,.team-presence-popover)
  :is(p,small,label,strong,summary) { color: var(--cm-text); }
html.cm-dark .workspace .cm-global-search-dialog :is(.cm-search-head label,.cm-smart-hint,.cm-search-footer) {
  color: var(--cm-text);
}

/* 5. Standard cards only. Do not recolor intentionally dark hero summaries. */
html .workspace :is(
  .panel:not(.hero-summary),.metric-card,.cm-compare-card,.cm-trend-panel,
  .premium-work-card,.stock-valuation-panel,.cm-layout-heading,
  .cm-layout-tools,.cm-filter-panel,.cm-kanban-lane,.cm-kanban-card
) {
  background: var(--cm-surface) !important;
  color: var(--cm-text);
  border-color: var(--cm-border) !important;
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow);
}
html.cm-dark .workspace :is(
  .panel:not(.hero-summary),.metric-card,.cm-compare-card,.cm-kanban-card
) :is(h2,h3,strong) { color: var(--cm-text); }
html .workspace :is(.metric-label,.cm-compare-card small,.cm-trend-hint,.cm-kanban-card-meta) {
  color: var(--cm-secondary);
}
html .workspace :is(.metric-card,.cm-compare-card,.cm-kanban-card):hover {
  border-color: var(--cm-accent) !important;
  box-shadow: 0 12px 32px rgba(79,26,48,.12);
}

/* 6. Form labels, guidance and helpers must always match their surfaces. */
html .workspace :is(
  .field > label,.team-form label,.dealer-field label,.filter-field label,
  .form-grid label
) { color: var(--cm-label) !important; opacity: 1; }
html .workspace :is(.help-panel,.form-aside) {
  background: var(--cm-guide) !important;
  border: 1px solid var(--cm-border) !important;
  color: var(--cm-text);
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow);
}
html .workspace .help-panel :is(h2,strong) { color: var(--cm-text) !important; }
html .workspace .help-panel :is(p,.help-note p) {
  color: var(--cm-secondary) !important;
  opacity: 1;
}
html .workspace .help-panel .eyebrow,
html .workspace .quick-help-links a { color: var(--cm-accent-strong) !important; }
html .workspace .help-note { border-color: var(--cm-border) !important; }
html .workspace :is(.repair-input-explainer,.cm-form-tips,.cm-filter-advanced) {
  background: var(--cm-guide) !important;
  color: var(--cm-text) !important;
  border-color: var(--cm-border) !important;
}
html .workspace .repair-input-explainer :is(strong,p,small,b),
html .workspace .cm-form-tips > p { color: var(--cm-text) !important; }
html .workspace .cm-form-tips > summary { color: var(--cm-accent-strong) !important; }
html .workspace :is(.form-actions,.filter-bar) {
  background: var(--cm-surface) !important;
  border-color: var(--cm-border) !important;
}
html .workspace :is(
  input:not([type=checkbox]):not([type=radio]),
  select,textarea
) {
  background: var(--cm-control) !important;
  color: var(--cm-control-text) !important;
  border: 1px solid var(--cm-control-outline) !important;
  border-radius: 10px;
  opacity: 1;
}
html .workspace :is(input,textarea)::placeholder {
  color: var(--cm-placeholder) !important;
  opacity: 1;
}
html .workspace :is(input,select,textarea):disabled {
  opacity: .7;
  cursor: not-allowed;
}
html .workspace :is(.field-error,.notice.error) {
  background: var(--cm-highlight) !important;
  color: var(--cm-text) !important;
  border-color: var(--cm-accent) !important;
}
html .workspace .field-error { font-weight: 600; }
html .workspace input[readonly] {
  background: var(--cm-elevated) !important;
  color: var(--cm-text) !important;
  border-color: var(--cm-control-outline) !important;
}

/* 7. Tables, selectable controls and mobile quick actions. */
html .workspace :is(.table-scroll,table,thead,tbody,tr,td,th) {
  border-color: var(--cm-border);
}
html .workspace :is(.table-scroll thead th,thead th) {
  background: var(--cm-elevated) !important;
  color: var(--cm-text) !important;
}
html.cm-dark .workspace tbody tr:nth-child(even) { background: #222c38; }
html.cm-dark .workspace tbody tr:hover { background: #303b49; }
html.cm-dark .workspace :is(tbody td,.table-scroll tbody td) {
  color: var(--cm-text);
}
html.cm-dark .workspace :is(.tabs a.selected,.cm-date-presets button[aria-pressed=true]) {
  background: #713049 !important;
  color: #fff !important;
}
html:not(.cm-dark) .workspace .tabs a.selected {
  background: var(--cm-highlight) !important;
  color: var(--cm-accent-strong) !important;
}
html .workspace .cm-quick-launch-menu a {
  color: var(--cm-text);
  min-height: 44px;
}
html.cm-dark .cm-mobile-nav { background: var(--cm-sidebar-bg) !important; }
html.cm-dark .cm-mobile-nav :is(a,button) { color: var(--cm-sidebar-text); }

/* 8. Keyboard, responsiveness, performance. */
html .workspace :is(a,button,summary,input,select,textarea):focus-visible,
html .sidebar :is(a,button,summary,input):focus-visible {
  outline: 3px solid var(--cm-focus) !important;
  outline-offset: 2px;
}
html .workspace :is(.panel,.metric-card,.cm-kanban-card) {
  transition: border-color .18s ease,box-shadow .18s ease;
}
@media(max-width: 768px) {
  html .workspace :is(.form-layout,.form-grid,.help-panel,.main-form) {
    max-width: 100%;
    min-width: 0;
  }
  html .workspace .repair-input-explainer { margin: 12px 14px; }
  html .workspace :is(.cm-quick-launch-menu,.notification-dropdown) {
    max-width: calc(100vw - 24px);
  }
}
@media(max-width: 390px) {
  html .workspace .topbar { gap: 7px; }
  html .workspace .form-grid > .field { min-width: 0; }
}
@media(prefers-reduced-motion: reduce) {
  html .workspace *,html .sidebar * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* 9. Premium Scarlet dashboard polish and Dark Executive parity.
   Decorative filigree never covers controls; accounting data is unchanged. */
html:not(.cm-dark) .workspace {
  background: radial-gradient(ellipse at 90% 12%,rgba(180,35,63,.055),transparent 42%),
    linear-gradient(135deg,#fbf8f8 0%,#f7f4f5 52%,#f9f3f5 100%) !important;
}
html .workspace main#main { position: relative; isolation: isolate; }
html .workspace main#main::before {
  content: ""; position: absolute; z-index:-1; pointer-events:none;
  top:0;right:0;width:min(610px,75%);height:410px;opacity:.24;
  background: repeating-radial-gradient(ellipse at 100% 0%,transparent 0 46px,rgba(180,35,63,.10) 47px 48px,transparent 49px 95px);
  mask-image:linear-gradient(to left,#000,transparent 90%);
}
html.cm-dark .workspace main#main::before { opacity:.10; }
html:not(.cm-dark) .sidebar {
  background:linear-gradient(165deg,#53172d 0%,#76213a 48%,#461629 100%) !important;
}
html .sidebar .brand-official {
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.13);
  border-radius:15px;
}
html:not(.cm-dark) .sidebar .nav-link.active {
  background:linear-gradient(105deg,#c63d60,#a52b4b) !important;
}
html .workspace .dashboard-topline-mark {color:var(--cm-accent-strong);}
html .workspace .page-heading h1 {letter-spacing:-.035em;}
html .workspace .cm-layout-heading {
  background:linear-gradient(130deg,var(--cm-surface),var(--cm-guide)) !important;
}
html:not(.cm-dark) .workspace .hero-summary {
  background:linear-gradient(125deg,#66162f 0%,#a82347 64%,#bf3454 100%) !important;
  box-shadow:0 20px 46px rgba(112,26,54,.23);
  border:1px solid rgba(255,255,255,.18);
}
html.cm-dark .workspace .hero-summary {
  background:linear-gradient(125deg,#4b1a33,#782b4b 70%,#642741) !important;
  border:1px solid #91506c;
}
html .workspace :is(.metric-card,.cm-compare-card) {
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  html .workspace :is(.metric-card,.cm-compare-card):hover {transform:translateY(-2px);}
}
html:not(.cm-dark) .workspace :is(.metric-card,.cm-compare-card) {
  background:linear-gradient(160deg,#fff 0%,#fffcfd 100%) !important;
}
html .workspace :is(.metric-card,.cm-layout-heading,.cm-compare-card,.panel) { border-radius:var(--cm-radius); }
html .workspace .cm-fin-help {
  display:inline-flex;position:relative;vertical-align:middle;
  align-items:center;justify-content:center;cursor:help;
  margin-left:4px;white-space:normal;outline-offset:3px;
}
html .workspace .cm-fin-help-icon {
  display:inline-grid;place-items:center;width:18px;height:18px;
  border-radius:50%;font-size:11px;line-height:1;font-weight:800;
  color:var(--cm-accent-strong);background:var(--cm-highlight);
  border:1px solid var(--cm-border);
}
html .workspace .hero-summary .cm-fin-help-icon {
  color:#fff;background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.50);
}
html .workspace .cm-fin-help-popover {
  position:absolute;z-index:40;left:0;top:calc(100% + 9px);
  width:min(285px,calc(100vw - 48px));padding:12px 14px;
  display:block;visibility:hidden;opacity:0;transform:translateY(-3px);
  background:var(--cm-surface);border:1px solid var(--cm-border);
  color:var(--cm-text);box-shadow:var(--cm-shadow);border-radius:12px;
  font:500 12px/1.6 Manrope,system-ui,sans-serif;text-align:left;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
html .workspace .cm-fin-help-popover strong {
  display:block;color:var(--cm-text);font-size:12px;margin-bottom:3px;
}
html .workspace .cm-fin-help-popover span {display:block;color:var(--cm-secondary);}
html .workspace .cm-fin-help:hover .cm-fin-help-popover,
html .workspace .cm-fin-help:focus .cm-fin-help-popover,
html .workspace .cm-fin-help:focus-within .cm-fin-help-popover {
  visibility:visible;opacity:1;transform:translateY(0);
}
html .workspace .cm-fin-help:focus-visible {outline:3px solid var(--cm-focus);}
@media(max-width:650px){
  html .workspace .cm-fin-help-popover {left:auto;right:-15px;}
  html .workspace main#main::before {height:220px;}
}
@media(prefers-reduced-motion:reduce){
  html .workspace .cm-fin-help-popover,
  html .workspace :is(.metric-card,.cm-compare-card) {
    transition:none !important;transform:none !important;
  }
}


/* Communite identity: login logo clarity and restrained brand reveal. */
.login-layout .login-brand-logo {
  width:clamp(255px,25vw,360px) !important;
  height:auto;
  aspect-ratio:1 / 1 !important;
  object-fit:contain !important;
  object-position:center;
  border-radius:22px;
  box-shadow:0 18px 44px rgba(34,4,17,.22);
}
@media(max-width:720px){.login-layout .login-brand-logo{width:min(275px,80vw) !important;margin-inline:auto;}}
@keyframes cm-brand-reveal {from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(4px)}to{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(0)}}
@keyframes cm-brand-accent {from{background-size:0 100%}to{background-size:100% 100%}}
@media(prefers-reduced-motion:no-preference){
 .login-layout .login-brand-logo{animation:cm-brand-reveal .78s cubic-bezier(.22,1,.36,1) both;}
 .sidebar .brand-official .brand-logo{animation:cm-brand-reveal .65s ease-out both;}
 .dashboard-topline-mark{animation:cm-brand-reveal .65s ease-out both;}
}
@media(prefers-reduced-motion:reduce){
 .login-layout .login-brand-logo,.sidebar .brand-official .brand-logo,.dashboard-topline-mark{animation:none !important;clip-path:none !important;}
}


/* 11. Ambient branded light sweep: intentionally selective, never on form inputs. */
@keyframes cm-light-sweep {
  0%,14% {transform:translateX(-180%) skewX(-22deg);opacity:0;}
  19% {opacity:.30;}
  38% {transform:translateX(280%) skewX(-22deg);opacity:0;}
  100% {transform:translateX(280%) skewX(-22deg);opacity:0;}
}
@keyframes cm-soft-arrival {
  from {opacity:.70;transform:translateY(8px);}
  to {opacity:1;transform:translateY(0);}
}
@media(prefers-reduced-motion:no-preference){
  /* Logotype and major summary card receive an occasional cinematic sweep. */
  html .workspace .hero-summary,
  html .sidebar .brand-official,
  html .workspace .cm-layout-heading,
  html .workspace .metric-card {position:relative;isolation:isolate;overflow:hidden;}
  html .workspace .hero-summary::after,
  html .sidebar .brand-official::after,
  html .workspace .cm-layout-heading::after,
  html .workspace .metric-card::after {
    content:"";position:absolute;inset:-35% auto -35% 0;width:38%;
    z-index:1;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 28%,rgba(255,255,255,.24) 50%,transparent);
    animation:cm-light-sweep 7s ease-in-out infinite;
  }
  html .workspace .metric-card::after,
  html .workspace .cm-layout-heading::after {
    background:linear-gradient(90deg,transparent,rgba(180,35,63,.025) 25%,rgba(180,35,63,.07) 50%,transparent);
    animation-duration:10s;
  }
  html.cm-dark .workspace .metric-card::after,
  html.cm-dark .workspace .cm-layout-heading::after{
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.035) 25%,rgba(245,166,190,.09) 50%,transparent);
  }
  html .workspace .metric-card:nth-child(2n)::after{animation-delay:-3s;}
  html .workspace .metric-card:nth-child(3n)::after{animation-delay:-6s;}
  html .workspace .page-heading{animation:cm-soft-arrival .35s ease-out both;}
  html .workspace .button-row .button,
  html .workspace .quick-action {
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  html .workspace .button-row .button:hover,
  html .workspace .quick-action:hover {transform:translateY(-2px);}
}
@media(prefers-reduced-motion:reduce){
  html .workspace :is(.hero-summary,.metric-card,.cm-layout-heading)::after,
  html .sidebar .brand-official::after{content:none;}
  html .workspace .page-heading{animation:none;}
}