:root {
    /* Brand colors */
  --brand-primary:#2563eb;
  --brand-secondary:#7c3aed;
  --brand-accent:#22c55e;
  --surface:#020617;
  --surface-alt:#0b1120;
  --section-alt:rgba(15,23,42,.6);

  /* Status colors */
  --status-resolved:#16a34a;
  --status-underdev:#2563eb;
  --status-rejected:#dc2626;
  --status-onhold:#d97706;
  --status-notstarted:#6b7280;
  --status-sent:#7c3aed;
  --status-onstage:#0284c7;

  /* Priority colors */
  --priority-high:#dc2626;
  --priority-medium:#d97706;
  --priority-low:#16a34a;

  /* Theme – dark (default) */
  --bg:#020617;
  --card:#020617;
  --muted:#9ca3af;
  --text:#e5e7eb;
  --accent:var(--brand-primary);
  --danger:#dc2626;
  --ok:#16a34a;
  --warn:#d97706;
  --info:#2563eb;
  --purple:#7c3aed;
  --neutral:#6b7280;
  --border:#1f2933;
  --shadow:0 14px 30px rgba(15,23,42,.45);
  --focus:0 0 0 2px rgba(37,99,235,.55);

  /* Extra */
  --chip:#020617;
  --skeleton:#0b1120;
  --shimmer:linear-gradient(90deg, transparent, rgba(148,163,184,.18), transparent);
   --risk-bar-track:rgba(55,65,81,.55);
  --ai-table-header-border:rgba(31,41,55,.9);
  --ai-table-row-odd:#020617;
  --ai-table-row-even:#030712;
  --ai-table-row-hover:#111827;
  --ai-table-cell-border:rgba(15,23,42,.9);
  
}
:root[data-theme="light"] {
  --brand-primary:#1d4ed8;
  --brand-secondary:#6d28d9;
  --brand-accent:#16a34a;
  --surface:#ffffff;
  --surface-alt:#f9fafb;
  --section-alt:#eef2ff;
  
  --bg:#f3f4f6;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#111827;
  --accent:var(--brand-primary);
  --danger:#b91c1c;
  --ok:#15803d;
  --warn:#c2410c;
  --info:#1d4ed8;
  --purple:#7c3aed;
  --neutral:#4b5563;
  --border:#e5e7eb;
  --shadow:0 10px 24px rgba(148,163,184,.35);
  --focus:0 0 0 2px rgba(37,99,235,.45);
  --chip:#f9fafb;
  --skeleton:#e5e7eb;
  --shimmer:linear-gradient(90deg, transparent, rgba(156,163,175,.25), transparent);
    --risk-bar-track:rgba(148,163,184,.5);
  --ai-table-header-border:rgba(209,213,219,.9);
  --ai-table-row-odd:#ffffff;
  --ai-table-row-even:#f9fafb;
  --ai-table-row-hover:#f3f4f6;
  --ai-table-cell-border:rgba(229,231,235,.9);
  
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background .2s ease,color .2s ease;
  line-height:1.5;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body.drawer-open{
  overflow:hidden;
}

body.auth-locked #appHeader,
body.auth-locked #features,
body.auth-locked #app,
body.auth-locked #appFooter{
  display:none;
}

body:not(.auth-locked) #loginSection{
  display:none;
}

body.auth-locked #loginSection{
  min-height:100vh;
  display:flex;
  align-items:center;
  background:#202994;
}

body.auth-locked #loginSection .hero-grid{
  grid-template-columns:minmax(320px, 420px);
  justify-content:center;
}

body.auth-locked #loginSection .hero-grid > div{
  display:none;
}

body.auth-locked #loginSection .container{
  max-width:560px;
}

.login-product-name{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin:2px 0 14px;
  text-align:center;
}
.login-product-name strong{
  font-size:1.05rem;
  letter-spacing:.01em;
}
.login-product-name span{
  font-size:.78rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
}

h1,h2,h3,h4{
  font-weight:700;
  letter-spacing:-.02em;
  margin:0;
}
h1{
  font-size:clamp(2.2rem, 3.2vw, 3.4rem);
  line-height:1.05;
}
h2{
  font-size:clamp(1.6rem, 2.2vw, 2.2rem);
  line-height:1.2;
}
p{
  margin:0;
  font-size:1rem;
  line-height:1.6;
}
small{
  font-size:.85rem;
}
:focus-visible{
  outline:none;
  box-shadow:var(--focus);
  border-radius:6px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Header */
header{
  position:sticky;top:0;z-index:20;
  background:rgba(15,23,42,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:10px 18px;
  justify-content:center;
}
:root[data-theme="light"] header{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
}
.brand{
  display:flex;align-items:center;gap:10px;
}
.brand-logo{height:38px;width:auto;display:block;object-fit:contain;}
.brand-text{display:flex;flex-direction:column}
.brand-text span:first-child{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}
.brand-text span:last-child{
  font-size:15px;
  font-weight:600;
}

/* Toolbar */
.toolbar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-size:13px;
  justify-content:center;
}
.saved-views{
  display:flex;
  align-items:center;
  gap:6px;
}

.pwa-install-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1200;
  padding:0 12px calc(12px + env(safe-area-inset-bottom));
  transform:translateY(120%);
  opacity:0;
  pointer-events:none;
  transition:transform .25s ease, opacity .25s ease;
}
.pwa-install-banner.show{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.pwa-install-banner__surface{
  margin:0 auto;
  width:min(680px,100%);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:16px 16px 10px 10px;
  box-shadow:0 -10px 26px rgba(2,6,23,.25);
  padding:12px;
}
.pwa-install-banner__icon{
  border-radius:9px;
  border:1px solid var(--border);
  background:rgba(15,23,42,.06);
}
.pwa-install-banner__content{min-width:0;}
.pwa-install-banner__title{margin:0;font-size:15px;}
.pwa-install-banner__body{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}
.pwa-install-banner__actions{
  grid-column:1 / -1;
  display:flex;
  gap:8px;
}
.pwa-install-banner__actions .btn{
  flex:1 1 0;
  min-height:40px;
}

/* Inputs / buttons */
.btn,.select,.input{
  padding:7px 11px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#020617;
  color:inherit;
  font:inherit;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .08s ease,color .15s ease;
}
:root[data-theme="light"] .btn,
:root[data-theme="light"] .select,
:root[data-theme="light"] .input{
  background:#ffffff;
}

.btn{
  cursor:pointer;
  font-weight:500;
  display:inline-flex;align-items:center;gap:6px;
  box-shadow:none;
}
.btn.cta{
  padding:12px 20px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
}
.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
   text-shadow:0 1px 0 rgba(0,0,0,.16);
}
:root[data-theme="light"] .btn.primary{
  color:#000;
  text-shadow:none;
}
.btn.ghost{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}
.btn.sm{
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(15,23,42,.25);
}
.btn.primary:hover{
  background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));
  border-color:transparent;
}
.btn.ghost:hover{
  background:rgba(148,163,184,.12);
}
.btn:active{
  transform:translateY(0);
  box-shadow:0 2px 6px rgba(15,23,42,.35) inset;
}
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}
.btn:focus-visible{
  box-shadow:0 0 0 2px rgba(37,99,235,.7);
  border-color:var(--accent);
}
.theme-toggle-btn{
  width:34px;
  height:34px;
  min-width:34px;
  padding:0;
  border-radius:999px;
  justify-content:center;
  font-size:16px;
  line-height:1;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.theme-toggle-btn:hover{
  transform:translateY(-1px) scale(1.02);
}
.theme-toggle-btn:focus-visible{
  box-shadow:0 0 0 2px rgba(79,140,255,.75);
}

.input,.select{
  background:#020617;
  box-shadow:none;
}
.input::placeholder{color:var(--muted)}

/* Keep proposal/agreement dropdown menu options visually aligned with status filters */
#statusFilter option,
#proposalsStatusFilter option,
#agreementsStatusFilter option,
#proposalFormStatus option,
#agreementFormStatus option{
  background:#020617;
  color:var(--text);
}
:root[data-theme="light"] #statusFilter option,
:root[data-theme="light"] #proposalsStatusFilter option,
:root[data-theme="light"] #agreementsStatusFilter option,
:root[data-theme="light"] #proposalFormStatus option,
:root[data-theme="light"] #agreementFormStatus option{
  background:#ffffff;
  color:#0f172a;
}

/* Marketing layout */
.section{
  padding:64px 0;
}
.section.alt{
  background:var(--section-alt);
}
.container{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}
.hero{
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(59,130,246,.25), transparent 55%),
    radial-gradient(circle at 90% 10%, rgba(124,58,237,.25), transparent 45%);
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:36px;
  align-items:center;
  position:relative;
  z-index:1;
}
.hero p{
  color:var(--muted);
  font-size:1.05rem;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(37,99,235,.12);
  color:var(--accent);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}
.hero-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:22px;
  box-shadow:var(--shadow);
  display:grid;
  gap:16px;
}
.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.metric{
  padding:12px;
  border-radius:14px;
  background:var(--surface-alt);
  border:1px solid var(--border);
}
.metric h3{
  font-size:1.15rem;
}
.metric span{
  color:var(--muted);
  font-size:.85rem;
}

.login-card h2{
  font-size:1.45rem;
}
.login-form{
  display:grid;
  gap:14px;
}
.login-form .input,
.login-form .select,
.login-form .btn{
  width:100%;
  border-radius:8px;
}
.login-form .btn{
  justify-content:center;
  margin-top:8px;
  letter-spacing:.02em;
  font-weight:700;
}

body.auth-locked .login-card{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  gap:22px;
}

body.auth-locked .login-logo,
.login-brand-logo,
.auth-brand-logo{
  display:block;
  width:min(220px,70vw);
  max-width:220px;
  height:auto;
  max-height:90px;
  object-fit:contain;
  object-position:center;
  margin:0 auto 1rem;
  background:transparent;
  border:0;
  box-shadow:none;
}

body.auth-locked .login-logo{
  filter:brightness(0) invert(1);
}

body.auth-locked .login-form .input,
body.auth-locked .login-form .select{
  border:none;
  background:#f3f4f6;
  color:#374151;
  min-height:50px;
  padding:0 20px;
  font-size:1.05rem;
}

body.auth-locked .login-form .input::placeholder{
  color:#4b5563;
}

body.auth-locked .login-form .btn.primary{
  border:none;
  background:#18256e;
  color:#fff;
  min-height:50px;
}

body.auth-locked .login-form .btn.primary:hover{
  background:#121d58;
  transform:none;
  box-shadow:none;
}

body.auth-locked .login-hint{
  color:#dbe3ff;
  text-align:center;
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.feature-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px;
  display:grid;
  gap:10px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.feature-card:hover{
  transform:translateY(-4px);
  border-color:rgba(37,99,235,.6);
  box-shadow:0 18px 34px rgba(15,23,42,.35);
}
.feature-card img{
  width:40px;
  height:40px;
}
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.testimonial{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
  display:grid;
  gap:12px;
}
.testimonial strong{
  font-size:.95rem;
}
.footer{
  padding:40px 0 60px;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:24px;
  align-items:start;
}
.footer a{
  color:var(--muted);
  text-decoration:none;
}
.footer a:hover{
  color:var(--text);
}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .testimonial-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hero-metrics{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
}
.input:focus-visible,
.select:focus-visible{
  box-shadow:var(--focus);
  border-color:var(--accent);
  outline:none;
}
:root[data-theme="light"] .input,
:root[data-theme="light"] .select{
  background:#ffffff;
}
.icon{font-size:18px;line-height:1}

#accentColor{
  padding:2px;
  width:38px;
  min-width:38px;
  border-radius:999px;
}

/* Status line */
.statusline{
  display:flex;gap:10px;align-items:center;margin-left:8px;
  font-size:12px;
}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.ok{background:var(--ok)} .warn{background:var(--warn)} .err{background:var(--danger)}
.chip{
  padding:3px 8px;border-radius:999px;background:var(--chip);
  border:1px solid var(--border);font-size:12px;color:var(--muted);
  display:inline-flex;align-items:center;gap:6px;
}
.chip.online{border-color:var(--ok);color:var(--ok)}
.chip.offline{border-color:var(--warn);color:var(--warn)}

/* Layout */
.wrap{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:18px;padding:18px;max-width:1440px;margin:0 auto;
}
.wrap.csm-filters-only{
  grid-template-columns:minmax(0,1fr);
}
.wrap.csm-filters-only .sidebar{
  display:none;
}
.wrap.is-locked{
  display:none;
}
@media(max-width:980px){.wrap{grid-template-columns:1fr}}

/* Sidebar */
.sidebar{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 14px 16px;
  box-shadow:var(--shadow);
}
.sidebar h3{
  margin:0 0 8px;font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.12em;
}
.filter-group{display:grid;gap:9px;margin-bottom:14px}
.filter-row{display:grid;gap:5px}
.muted{color:var(--muted);font-size:12px}
.divider{
  height:1px;background:var(--border);
  margin:10px 0 14px;opacity:.85;
}

/* Scrollbars (sidebar, table, modals) */
.sidebar::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.modal-content::-webkit-scrollbar{
  width:8px;
}
.sidebar::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track{
  background:transparent;
}
.sidebar::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb{
  background:rgba(107,114,128,.6);
  border-radius:999px;
}
.sidebar,
.table-wrap,
.modal-content{
  scrollbar-width:thin;
  scrollbar-color:rgba(107,114,128,.7) transparent;
}

/* Content & tabs */
.content{min-width:0}
.sidebar{order:1}
.content{order:2}
.content-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.view-menu{
  position:sticky;
  top:82px;
  padding:12px;
}
.view-menu-title{
  margin:0 0 10px;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.view-tabs{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.view-tab{
  border:1px solid transparent;background:transparent;color:var(--muted);
  padding:8px 10px;border-radius:10px;font-size:13px;cursor:pointer;
  display:flex;align-items:center;gap:8px;width:100%;
  text-align:left;
}
.view-tab .icon{font-size:15px}
.view-tab.active{
  background:var(--accent);
  color:#fff;
  border-color:transparent;
}
.view-tab:not(.active):hover{
  border-color:var(--border);
  color:var(--text);
}
.content-panels{
  min-width:0;
}

.view{display:none}
.view.active{display:block}
.view>*+*{margin-top:14px}
.user-form-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
#usersTable th,#usersTable td{
  white-space:nowrap;
}
#rolePermissionsTable th,#rolePermissionsTable td{
  white-space:nowrap;
}
@media(max-width:980px){
  .user-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:640px){
  .user-form-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:980px){
  .wrap{
    padding-top:8px;
  }
  .content-layout{
    grid-template-columns:220px minmax(0,1fr);
  }
  .view-menu{
    position:sticky;
    top:82px;
    padding:10px;
  }
  .view-tabs{
    flex-direction:column;
    flex-wrap:nowrap;
  }
  .view-tab{
    width:100%;
  }
}


.grid{display:grid;gap:14px}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){.grid.cols-2{grid-template-columns:1fr}}
@media(max-width:980px){.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid.cols-4{grid-template-columns:1fr}}

.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid.cols-3{grid-template-columns:1fr}}

.rp-chip{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
  margin:2px 4px 2px 0;
  background:rgba(125,211,252,.08);
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 14px 15px;
  box-shadow:var(--shadow);
  transition:border-color .15s ease,box-shadow .15s ease,transform .08s ease,background .15s ease;
}
.card:hover{
  border-color:rgba(37,99,235,.7);
    box-shadow:0 14px 30px rgba(15,23,42,.45);
  transform:translateY(-2px);
  background:rgba(15,23,42,.96);
}
:root[data-theme="light"] .card:hover{
  background:#f9fafb;
}

.summary-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  flex-wrap:wrap;
}
.summary-meta{
  font-size:12px;
  color:var(--muted);
}
.summary-meta.stale{
  color:var(--warn);
}

/* KPIs */
.kpi{
  cursor:pointer;
  text-align:left;
}
.kpi .label{
  font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.12em;
}
.kpi .value{font-size:24px;font-weight:700;margin-top:4px}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:2px}

.leads-analytics{
  display:grid;
  gap:12px;
  margin-bottom:12px;
}
.deals-analytics{
  display:grid;
  gap:12px;
  margin-bottom:12px;
}
.leads-analytics-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.deals-analytics-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.leads-kpi-card{
  cursor:pointer;
  min-height:94px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.deals-kpi-card{
  cursor:pointer;
  min-height:94px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.kpi-filter-active{
  border-color:rgba(37,99,235,.75);
  box-shadow:0 0 0 2px rgba(37,99,235,.2);
}
.leads-kpi-card .value{
  font-size:22px;
  line-height:1.2;
  word-break:break-word;
}
.deals-kpi-card .value{
  font-size:20px;
  line-height:1.2;
  word-break:break-word;
}
.leads-status-card{
  padding:12px;
}
.deals-breakdown-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.deals-breakdown-card{
  padding:12px;
}
.deals-breakdown-title{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:10px;
}
.leads-status-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.leads-status-bars{
  display:grid;
  gap:8px;
}
.deals-status-bars{
  display:grid;
  gap:8px;
}
.leads-status-row{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) 74px;
  gap:10px;
  align-items:center;
}
.deals-status-row{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) 74px;
  gap:10px;
  align-items:center;
}
.leads-status-label{
  font-size:12px;
  color:var(--muted);
}
.deals-status-label{
  font-size:12px;
  color:var(--muted);
}
.leads-status-track{
  height:8px;
  border-radius:999px;
  background:rgba(148,163,184,.25);
  overflow:hidden;
}
.leads-status-fill{
  height:100%;
  display:block;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary));
}
.deals-status-fill{
  height:100%;
  display:block;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary));
}
.leads-status-meta{
  font-size:12px;
  color:var(--muted);
  text-align:right;
  white-space:nowrap;
}
.deals-status-meta{
  font-size:12px;
  color:var(--muted);
  text-align:right;
  white-space:nowrap;
}
@media(max-width:1280px){
  .leads-analytics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .deals-analytics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .deals-breakdown-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
  .leads-analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deals-analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .leads-analytics-grid{grid-template-columns:1fr}
  .deals-analytics-grid{grid-template-columns:1fr}
  .deals-breakdown-grid{grid-template-columns:1fr}
  .leads-status-row{grid-template-columns:1fr}
  .deals-status-row{grid-template-columns:1fr}
  .leads-status-meta{text-align:left}
  .deals-status-meta{text-align:left}
}

/* Charts */
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:980px){.charts{grid-template-columns:1fr}}

.csm-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.csm-panel,.csm-main{min-width:0}
.csm-panel{position:static}
.csm-filters-title{
  margin:0 0 10px;
  font-size:18px;
  color:var(--text);
}
.csm-panel-brand{display:flex;gap:10px;align-items:center}
.csm-avatar{height:34px;width:34px;border-radius:11px;background:linear-gradient(145deg,#0ea5e9,#2563eb);display:grid;place-items:center;font-weight:700;color:#fff;font-size:11px}
.csm-panel-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.csm-panel h4{font-size:13px;margin:0 0 8px}
.csm-main{display:grid;gap:14px}
.csm-header-card h2{font-size:34px;line-height:1.1;margin:0 0 4px}
.csm-kpi{cursor:default;border-top:3px solid #22d3ee}
.csm-kpi .label{font-weight:700}
.csm-kpi .sub{font-size:12px;color:var(--muted);margin-top:4px}
.csm-split-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
.csm-insight-list{
  display:grid;
  gap:10px;
  margin-top:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.csm-insight-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(148,163,184,.08);
}
.csm-insight-item strong{
  display:block;
  line-height:1.2;
  margin-bottom:4px;
}
.csm-insight-item p{
  font-size:12px;
  margin:0;
  line-height:1.35;
}
.csm-insight-value{
  font-size:22px;
  font-weight:700;
  color:#2563eb;
  line-height:1;
  text-align:right;
  white-space:nowrap;
}
@media(max-width:900px){
  .csm-insight-list{grid-template-columns:1fr}
}
.csm-filters-grid{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
.csm-panel .filter-row{min-width:0}
.csm-panel .filter-row .input,
.csm-panel .filter-row .select{
  width:100%;
  max-width:100%;
  min-width:0;
}
.csm-panel .filter-row label{
  display:block;
  margin-bottom:6px;
  font-size:11px;
}
@media(max-width:1400px){.csm-split-grid{grid-template-columns:1fr}.csm-header-card h2{font-size:30px}}
@media(max-width:1200px){.csm-filters-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.csm-filters-grid{grid-template-columns:1fr}}
.csm-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){.csm-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.csm-kpi-grid{grid-template-columns:1fr}}
.csm-kpi-grid-six{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1280px){.csm-kpi-grid-six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.csm-kpi-grid-six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.csm-kpi-grid-six{grid-template-columns:1fr}}

.csm-widget-card{display:grid;gap:10px}
.csm-widget-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.csm-widget-head strong{font-size:21px;line-height:1.2;display:block;min-height:2.5em;font-weight:700}
.csm-widget-head .chip{font-size:11px}

/* Table & skeleton */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
thead th{
  position:sticky;top:0;z-index:5;
  background:var(--card);
  text-align:left;padding:8px 9px;
  border-bottom:1px solid var(--border);
  user-select:none;cursor:pointer;
  font-size:11px;color:var(--muted);
  font-weight:500;
}
tbody td{
  padding:8px 9px;
  border-bottom:1px solid rgba(31,41,55,.65);
}
tr:hover{
  background:rgba(31,41,55,.8);
}
:root[data-theme="light"] tr:hover{
  background:#f3f4ff;
}
.table-wrap{
  max-height:440px;
  overflow:auto;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  position:relative;
}
.table-wrap::after{
  content:"";
  position:sticky;
  top:0;
  left:0;
  right:0;
  height:0;
  box-shadow:0 6px 12px rgba(15,23,42,.6);
  pointer-events:none;
}

th.sortable::after{
  content:"";margin-left:6px;border:4px solid transparent;
  border-top-color:var(--muted);display:inline-block;transform:translateY(1px);
}
th.sorted-asc::after{
  border-bottom-color:var(--accent);
  border-top-color:transparent;
  transform:translateY(-1px);
}
th.sorted-desc::after{
  border-top-color:var(--accent);
  border-bottom-color:transparent;
  transform:translateY(1px);
}

/* Loading skeleton */
.skeleton{
  position:relative;overflow:hidden;background:var(--skeleton);
  border-radius:8px;
}
.skeleton::after{
  content:"";position:absolute;inset:0;
  animation:shimmer 1.1s infinite;
  background:var(--shimmer);
}
@keyframes shimmer{
  0%{transform:translateX(-100%)}100%{transform:translateX(100%)}
}

/* Pills / status / priority */
.pill{
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:600;
  display:inline-block;
  letter-spacing:.03em;
  text-transform:uppercase;
}

/* updated to dash-format class names (matches JS badgeStatus) */
.status-Resolved{background:var(--status-resolved);color:#fff}
.status-Under-Development{background:var(--status-underdev);color:#fff}
.status-Rejected{background:var(--status-rejected);color:#fff}
.status-On-Hold{background:var(--status-onhold);color:#fff}
.status-Not-Started-Yet{background:var(--status-notstarted);color:#fff}
.status-Sent{background:var(--status-sent);color:#fff}
.status-On-Stage{background:var(--status-onstage);color:#fff}

.priority-High{background:var(--priority-high);color:#fff}
.priority-Medium{background:var(--priority-medium);color:#fff}
.priority-Low{background:var(--priority-low);color:#fff}

.pill[class*="dev-team-"],
.pill[class*="issue-related-"]{
  background:var(--neutral);
  color:#fff;
}

/* Dev Team Status color coding */
.pill.dev-team-local{background:#0ea5e9}
.pill.dev-team-staging{background:#7c3aed}
.pill.dev-team-tested-on-stage{background:#2563eb}
.pill.dev-team-production{background:#16a34a}
.pill.dev-team-tested-on-production{background:#15803d}
.pill.dev-team-disregard{background:#6b7280}

/* Issue Related color coding */
.pill.issue-related-backend{background:#b91c1c}
.pill.issue-related-frontend{background:#047857}
.pill.issue-related-mobile-app{background:#1d4ed8}
.pill.issue-related-hosting-and-infrastructure{background:#6d28d9}

/* Filter chips */
.filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:4px;
}
.filter-chip{
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--chip);
  font-size:11px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  color:var(--muted);
}
.filter-chip:hover{
  border-color:var(--accent);
  color:var(--text);
}

/* Risk bar */
.risk-bar-wrap{
  width:100%;
  height:5px;
  border-radius:999px;
  background:var(--risk-bar-track);
  overflow:hidden;
  margin-top:3px;
}
.risk-bar{
  height:100%;
  transform-origin:left center;
  background:linear-gradient(90deg,#22c55e,#facc15,#ef4444);
}

/* Modal */
.modal{
  display:none;position:fixed;inset:0;
  background:rgba(15,23,42,.75);align-items:center;justify-content:center;z-index:100;
}
.modal.open{
  display:flex;
}
.modal-content{
  background:var(--card);color:var(--text);
  border:1px solid var(--border);
  padding:16px 16px 18px;border-radius:18px;
  max-width:1120px;width:min(96vw,1120px);max-height:90%;overflow:auto;
  box-shadow:var(--shadow);
}
.modal .header{
  display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:8px;
}
.modal .actions{display:flex;gap:8px;flex-wrap:wrap}
.modal-close{cursor:pointer;border:none;background:transparent;color:var(--muted);font-size:20px}
.ticket-detail{
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  background:color-mix(in oklab, var(--card) 95%, #ffffff 5%);
}
.ticket-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  border-bottom:1px solid var(--border);
}
.ticket-person{display:flex;align-items:center;gap:12px}
.ticket-avatar{
  width:64px;height:64px;border-radius:14px;
  display:grid;place-items:center;
  font-weight:700;font-size:22px;
  background:linear-gradient(135deg, rgba(148,163,184,.35), rgba(148,163,184,.15));
  border:1px solid var(--border);
}
.ticket-id{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.ticket-person h3{margin:0;font-size:36px;line-height:1}
.ticket-status-pill{
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(59,130,246,.16);
}
.ticket-title-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:18px 20px;
  border-bottom:1px solid var(--border);
}
.ticket-title-row h4{
  margin:0;
  font-size:clamp(2rem, 2.8vw, 2.5rem);
  line-height:1.15;
}
.ticket-priority-pill{
  color:#ef4444;
  font-weight:700;
  font-size:clamp(1rem, 1.4vw, 1.2rem);
  white-space:nowrap;
}
.ticket-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  border-bottom:1px solid var(--border);
}
.ticket-col{
  padding:18px 20px;
  display:grid;
  gap:10px;
}
.ticket-col + .ticket-col{border-left:1px solid var(--border)}
.ticket-col p{margin:0}
.ticket-meta-item{
  display:grid;
  grid-template-columns:minmax(180px, 42%) minmax(0, 1fr);
  align-items:start;
  gap:8px;
  font-size:1.02rem;
  line-height:1.35;
}
.ticket-label{
  font-weight:600;
  color:color-mix(in oklab, var(--text) 85%, var(--muted) 15%);
}
.ticket-description,.ticket-log{padding:16px;border-bottom:1px solid var(--border)}
.ticket-description p{
  margin:8px 0 0;
  padding:14px 16px;
  border-radius:10px;
  background:rgba(245, 158, 11, .1);
  font-size:1.1rem;
  line-height:1.5;
}
.ticket-log{border-bottom:none}
.ticket-description h5,
.ticket-log h5{
  margin:0;
  font-size:clamp(1.8rem, 2.4vw, 2.2rem);
  line-height:1.2;
}
.ticket-log p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:1.1rem;
  line-height:1.5;
}

@media (max-width:840px){
  .ticket-title-row{flex-direction:column;align-items:flex-start}
  .ticket-title-row h4{font-size:30px}
  .ticket-description h5,
  .ticket-log h5{font-size:28px}
  .ticket-description p,
  .ticket-log p{font-size:1rem}
  .ticket-meta-item{
    grid-template-columns:1fr;
    gap:4px;
    font-size:.98rem;
  }
  .ticket-priority-pill{font-size:20px}
  .ticket-person h3{font-size:24px}
  .ticket-grid{grid-template-columns:1fr}
  .ticket-col + .ticket-col{border-left:none;border-top:1px solid var(--border)}
}

/* Pagination */
.table-actions{
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  margin-top:10px;flex-wrap:wrap;
  font-size:12px;
}
.table-tools{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
  flex-wrap:wrap;
}
.column-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:220px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:10px;
  display:none;
  z-index:40;
}
.column-panel.open{
  display:block;
}
.column-panel-header{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  margin-bottom:8px;
}
.column-list{
  display:grid;
  gap:6px;
  max-height:220px;
  overflow:auto;
  padding-right:2px;
}
.column-list label{
  display:flex;
  gap:6px;
  align-items:center;
  font-size:12px;
}
.col-hidden{
  display:none;
}
.pagination{display:flex;gap:6px;align-items:center}
.chip-btn{
  padding:5px 9px;border-radius:999px;background:var(--card);
  border:1px solid var(--border);cursor:pointer;font-size:12px;
}
.chip-btn[disabled]{opacity:.45;cursor:not-allowed}
.chip-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.event-issue-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.event-issue-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--bg);
  font-size:12px;
}
.event-issue-chip button{
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:12px;
  padding:0;
  line-height:1;
}
.select.sm,.input.sm{padding:5px 8px;border-radius:999px;font-size:12px}

/* Drawer */
.drawer-toggle{display:none}
@media(max-width:980px){
  .drawer-toggle{display:inline-flex}
  .sidebar{
    position:fixed;inset:82px 0 0 auto;width:88%;max-width:360px;
    height:fit-content;
    max-height:calc(100vh - 96px);
    overflow:auto;
    transform:translateX(110%);transition:transform .22s ease;
  }
  .sidebar.open{transform:translateX(0)}
}

@media(min-width:981px){
  .sidebar{
    position:static;
  }
  .sidebar h3{
    margin-bottom:12px;
  }
  .sidebar .filter-group{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:10px;
  }
  .sidebar .filter-row{
    min-width:150px;
    flex:1 1 150px;
  }
  .sidebar #resetBtn{
    align-self:flex-end;
  }
  .sidebar .filter-group .muted{
    flex:1 1 260px;
  }
}

/* Spinner & Toast */
.spinner{
  display:none;position:fixed;inset:0;
  background:rgba(15,23,42,.7);z-index:120;
  align-items:center;justify-content:center;
}
.spinner .ring{
  width:46px;height:46px;border:4px solid var(--border);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin 1s linear infinite;background:transparent;
}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{
  position:fixed;right:16px;bottom:16px;
  background:var(--card);border:1px solid var(--border);color:var(--text);
  padding:9px 11px;border-radius:10px;z-index:130;
  box-shadow:var(--shadow);display:none;font-size:12px;
}

/* Calendar */
#calendar{margin-top:6px;min-height:500px}
.fc{font-size:13px}
.fc .fc-toolbar-title{font-size:15px;font-weight:600}
.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th{border-color:var(--border)}
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number{color:var(--muted)}
.fc .fc-daygrid-day.fc-day-today{
  background:rgba(37,99,235,.07);
}
.fc .fc-button{
  background:var(--card);border-color:var(--border);
  color:var(--text);border-radius:999px;padding:3px 9px;font-size:12px;
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled):focus,
.fc .fc-button-primary:not(:disabled):hover{
  background:var(--accent);border-color:var(--accent);
}
.fc .fc-toolbar.fc-header-toolbar{margin-bottom:10px}
.fc-event.event-type-deployment{background-color:var(--info);border-color:var(--info)}
.fc-event.event-type-maintenance{background-color:var(--warn);border-color:var(--warn)}
.fc-event.event-type-release{background-color:var(--ok);border-color:var(--ok)}
.fc-event.event-type-other{background-color:var(--purple);border-color:var(--purple)}

/* Calendar env & risk signals */
.fc-event.event-env-prod .fc-event-main{border-left:3px solid var(--ok);}
.fc-event.event-env-staging .fc-event-main{border-left:3px solid var(--info);}
.fc-event.event-env-dev .fc-event-main{border-left:3px solid var(--neutral);}
.fc-event.event-env-other .fc-event-main{border-left:3px solid var(--purple);}
.fc-event.event-collision .fc-event-main{box-shadow:0 0 0 1px var(--danger) inset;}
.fc-event.event-freeze .fc-event-main{box-shadow:0 0 0 1px var(--warn) inset;}
.fc-event.event-hot .fc-event-main{box-shadow:0 0 0 2px var(--danger) inset;}

.event-risk-badge{
  margin-left:6px;padding:0 6px;border-radius:5px;font-size:10px;
  border:1px solid rgba(15,23,42,.4);
}
.risk-low{background:rgba(34,197,94,.18)}
.risk-med{background:rgba(234,179,8,.22)}
.risk-high{background:rgba(248,113,113,.24)}
.risk-crit{background:rgba(220,38,38,.35)}

/* Hide log col on small screens */
@media(max-width:768px){
 #issuesTable th:nth-child(14),
  #issuesTable td:nth-child(14){display:none}
}

/* Extra compact mode: hide module + priority on very small screens */
@media(max-width:480px){
  #issuesTable th:nth-child(8),
  #issuesTable td:nth-child(8),
  #issuesTable th:nth-child(7),
  #issuesTable td:nth-child(7){
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}

/* =========================================================
   AI – Per-module risk insights card
   ========================================================= */

.card:has(#aiModulesTableBody){
  grid-column:1 / -1;
  max-height:none;
}
.card:has(#aiModulesTableBody) > .table-wrap{
  max-height:360px;
  overflow:auto;
}
.card:has(#aiModulesTableBody) table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
}
.card:has(#aiModulesTableBody) thead th{
  position:static;
  background:transparent;
border-bottom:1px solid var(--ai-table-header-border);
  padding:6px 9px;
  font-size:11px;
  cursor:default;
}
.card:has(#aiModulesTableBody) tbody td{
  padding:7px 9px;
    border-bottom:1px solid var(--ai-table-cell-border);
  font-size:13px;
}
.card:has(#aiModulesTableBody) tbody tr:nth-child(odd){
  background:var(--ai-table-row-odd);
}
.card:has(#aiModulesTableBody) tbody tr:nth-child(even){
background:var(--ai-table-row-even);
}
.card:has(#aiModulesTableBody) tbody tr:hover{
   background:var(--ai-table-row-hover);
}
.card:has(#aiModulesTableBody) td:nth-child(2),
.card:has(#aiModulesTableBody) td:nth-child(3),
.card:has(#aiModulesTableBody) td:nth-child(4){
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.card:has(#aiModulesTableBody) .risk-bar-wrap{
  margin-top:2px;
  height:4px;
}
.card:has(#aiModulesTableBody) .risk-bar{
  height:4px;
  border-radius:999px;
}

/* =========================================================
   AI – Cluster dashboard
   ========================================================= */

.cluster-dashboard{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);
  gap:12px;
  margin-top:10px;
}
@media(max-width:900px){
  .cluster-dashboard{
    grid-template-columns:1fr;
  }
}
.cluster-list{
  display:grid;
  gap:8px;
}
.cluster-item{
  border:1px solid var(--border);
  background:var(--card);
  padding:8px 10px;
  border-radius:10px;
  text-align:left;
  cursor:pointer;
  transition:transform .08s ease,border-color .15s ease,box-shadow .15s ease;
}
.cluster-item.active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset;
}
.cluster-title{
  font-size:13px;
  font-weight:600;
}
.cluster-meta{
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
}
.cluster-detail{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  min-height:120px;
  background:var(--card);
}
.cluster-detail-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
.ai-label-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}


.decision-filters{display:flex;gap:8px;flex-wrap:wrap}
.decision-queue{display:grid;gap:10px;margin-top:10px}
.decision-card{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--card)}
.chip.decision-sev-critical{background:rgba(220,38,38,.2);color:#b91c1c;border-color:rgba(220,38,38,.35)}
.chip.decision-sev-high{background:rgba(245,158,11,.2);color:#b45309;border-color:rgba(245,158,11,.35)}
.chip.decision-sev-medium{background:rgba(59,130,246,.2);color:#1d4ed8;border-color:rgba(59,130,246,.35)}
.chip.decision-sev-low{background:rgba(16,185,129,.2);color:#047857;border-color:rgba(16,185,129,.35)}

/* =========================================================
   Freeze windows UI
   ========================================================= */

.freeze-window-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
  font-size:12px;
}
.freeze-window-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 8px;
  background:var(--card);
}
.freeze-window-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  color:var(--muted);
}
.freeze-day-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  font-size:12px;
  color:var(--muted);
}

/* =========================================================
   Event readiness checklist
   ========================================================= */

.readiness-list{
  display:grid;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}
.readiness-item{
  display:flex;
  align-items:center;
  gap:6px;
}



/* =========================================================
   Release Planner – F&B Middle East
   ========================================================= */

#releasePlannerCard .planner-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
@media(max-width:980px){
  #releasePlannerCard .planner-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:640px){
  #releasePlannerCard .planner-grid{
    grid-template-columns:1fr;
  }
}

/* Planner controls */
#releasePlannerCard label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  display:block;
  margin-bottom:3px;
}
#releasePlannerCard .input,
#releasePlannerCard .select,
#releasePlannerCard textarea{
  width:100%;
}
#releasePlannerCard textarea{
  min-height:70px;
  resize:vertical;
  border-radius:8px;
}

/* Suggested slot styling */
.planner-slot{
  border-radius:8px;
  border:1px solid var(--border);
  padding:7px 9px;
  margin-top:6px;
  background:var(--card);
}
.planner-slot-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  font-weight:500;
}
.planner-slot-meta{
  font-size:11px;
  color:var(--muted);
  margin-top:3px;
}
.planner-slot-score{
  font-size:11px;
  font-weight:600;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.5);
}
.planner-score-low{background:rgba(34,197,94,.18);}
.planner-score-med{background:rgba(234,179,8,.22);}
.planner-score-high{background:rgba(248,113,113,.24);}

/* Small screen tweaks */
@media(max-width:520px){
  header{
    flex-wrap:wrap;
    row-gap:6px;
    padding:8px 12px;
  }
  .wrap{
    padding:12px;
  }
  .card{
    padding:12px;
  }
}

/* Lifecycle Analytics */
.lifecycle-skeleton-grid .skeleton-block,
.skeleton-block {
  min-height: 96px;
  background: var(--skeleton);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.skeleton-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--shimmer);
  transform: translateX(-100%);
  animation: shimmer 1.2s infinite;
}

/* =========================================================
   Mobile & tablet responsiveness hardening
   ========================================================= */

#app,
.content,
.content-panels,
.card,
.table-wrap{
  min-width:0;
  max-width:100%;
}

/* Prevent page-level horizontal overflow while preserving local table scroll. */
body{
  overflow-x:hidden;
}

.table-wrap{
  width:100%;
}

.table-wrap > table{
  width:100%;
}

/* Keep action bars and controls touch-friendly and wrappable. */
.table-actions,
.table-tools,
.pagination,
.modal .actions{
  flex-wrap:wrap;
  row-gap:8px;
}

.pagination{
  align-items:center;
}

.btn,
.chip-btn{
  min-height:34px;
}

/* Constrain long inline controls used in analytics/search bars. */
input[style*="min-width"]{
  max-width:100%;
}

/* Tablet: keep layout usable while preserving desktop density. */
@media (max-width:1024px){
  .table-wrap > table{
    width:max(100%, 680px);
  }
  .content-layout{
    grid-template-columns:1fr;
    gap:12px;
  }
  .view-menu{
    position:static;
    top:auto;
    padding:10px 0;
  }
  .view-tabs{
    flex-direction:row;
    overflow:auto;
    padding-bottom:2px;
    scrollbar-width:thin;
  }
  .view-tab{
    width:auto;
    flex:0 0 auto;
    min-height:38px;
    white-space:nowrap;
  }
  .grid.cols-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Mobile large/small */
@media (max-width:767px){
  header{
    justify-content:flex-start;
  }
  .brand{
    width:100%;
    justify-content:center;
  }
  .toolbar{
    width:100%;
    justify-content:flex-start;
    gap:8px;
  }
  .toolbar .input,
  .toolbar .select{
    width:100%;
  }
  .toolbar .btn{
    min-height:38px;
  }
  .wrap{
    padding:10px;
    gap:12px;
  }
  .card{
    padding:12px;
  }
  .sidebar{
    width:min(92vw,360px);
    max-height:calc(100vh - 90px);
    border-radius:12px 0 0 12px;
    z-index:95;
  }
  .filter-row .input,
  .filter-row .select,
  .filter-row textarea,
  .filter-row .btn{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .grid.cols-3,
  .grid.cols-4{
    grid-template-columns:1fr;
  }
  .table-wrap{
    max-width:100%;
  }
  .table-wrap > table{
    width:max(100%, 740px);
  }
  .pagination{
    width:100%;
    justify-content:flex-start;
  }
  .table-actions{
    align-items:stretch;
  }
  .table-actions > *{
    width:100%;
  }
  .modal{
    align-items:flex-start;
    padding:8px;
  }
  .modal-content{
    width:100%;
    max-width:100%;
    max-height:calc(100vh - 16px);
    margin:0;
    border-radius:14px;
    padding:12px;
  }
  .modal .header{
    position:sticky;
    top:0;
    z-index:2;
    background:var(--card);
    padding-bottom:6px;
  }
  .modal iframe{
    min-height:58vh !important;
  }
  .modal-content .grid[style*="repeat(2"],
  .modal-content .grid[style*="repeat(3"]{
    grid-template-columns:1fr !important;
  }
  .modal-content .actions[style*="justify-content:space-between"]{
    justify-content:flex-start !important;
  }
  .modal-content .actions[style*="justify-content:space-between"] > div{
    width:100%;
    display:flex;
    flex-wrap:wrap;
  }
  .hero-grid{
    grid-template-columns:1fr;
  }
  .login-card{
    width:100%;
  }
  body.auth-locked #loginSection .hero-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

@media (max-width:430px){
  .btn,
  .input,
  .select{
    font-size:14px;
  }
  .view-tab{
    padding:9px 11px;
  }
  .ticket-hero,
  .ticket-title-row,
  .ticket-col{
    padding:14px 12px;
  }
}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}
.lifecycle-timeline {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.lifecycle-timeline-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
}
.lifecycle-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 8px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}
.lifecycle-timeline-content {
  border-left: 1px dashed var(--border);
  padding-left: 12px;
  padding-bottom: 10px;
}
.lifecycle-timeline-title-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.lifecycle-records-grid {
  margin-top: 10px;
}
.lifecycle-record-card {
  display: grid;
  gap: 4px;
}
#lifecycleSummaryCards,
#lifecycleMetricsGrid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
#lifecycleSummaryCards .card,
#lifecycleMetricsGrid .card {
  min-height: 108px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
#lifecycleSummaryCards .value,
#lifecycleMetricsGrid .value {
  margin-top: 8px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
@media (max-width: 920px) {
  #lifecycleAnalyticsView .grid.cols-4,
  #lifecycleAnalyticsView .grid.cols-3 {
    grid-template-columns: 1fr;
  }
  #lifecycleSearchInput {
    min-width: 0 !important;
    width: 100%;
  }
}

.notification-shell { position: relative; }
.notification-bell { position: relative; }
.notification-unread-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-weight: 700;
}
.notification-preview-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(420px, 92vw);
  max-height: 70vh;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 80;
  display: none;
}
.notification-preview-panel.open { display: block; }
.notification-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.notification-preview-list { display: grid; gap: 8px; }
.notification-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 10px;
  cursor: pointer;
}
.notification-item.unread { border-left: 4px solid var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent); }
.notification-item-head { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; margin-bottom: 6px; }
.notification-item-body { font-size: 13px; }
.notification-target-highlight {
  outline: 2px solid var(--accent-color, #2563eb);
  background: rgba(37, 99, 235, 0.08);
  transition: background 0.3s ease;
}
.notification-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.notification-filter-row .chip-btn.active { border-color: var(--accent); color: var(--accent); }
.notification-row-unread td { font-weight: 600; }
.notification-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.chip.high-priority { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.row-highlight-pulse {
  animation: row-highlight-pulse 2.2s ease-out 1;
}

/* =========================================================
   Advanced responsive utilities (layout-only)
   ========================================================= */

.responsive-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.responsive-form-grid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.responsive-table-wrap,
.mobile-scroll{
  width:100%;
  max-width:100%;
  overflow:auto;
}
.mobile-stack{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.mobile-action-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.modal-responsive{
  width:min(100%,1120px);
  max-height:90vh;
  overflow:auto;
}

/* Baseline hardening */
#appHeader,
#app,
.wrap,
.content-layout,
.content,
.content-panels,
.view,
.card{
  max-width:100%;
}

/* Keep row actions/critical controls touch-friendly across modules. */
.btn,
.chip-btn,
.view-tab,
.table-actions .btn,
.modal .actions .btn{
  min-height:40px;
}

/* Generic table hygiene; keep horizontal scroll local to table wrappers. */
.table-wrap{
  overflow:auto;
  overscroll-behavior:contain;
}
.table-wrap > table{
  min-width:100%;
}

/* Preserve readability for matrix + dense admin tables. */
#rolePermissionsTable,
#workflowMatrixContainer table,
#workflowRulesTbody,
#workflowApprovalsTbody{
  font-size:12.5px;
}

/* Tablet layout (desktop-like, denser spacing). */
@media (max-width:1024px){
  .wrap{
    width:100%;
    padding:12px;
  }

  .toolbar{
    justify-content:flex-start;
    flex-wrap:wrap;
    align-items:stretch;
  }
  #searchInput{
    min-width:min(420px,100%);
    flex:1 1 280px;
  }
  .toolbar .input,
  .toolbar .select{
    flex:1 1 220px;
    min-width:min(220px,100%);
  }
  .toolbar .btn{
    flex:0 1 auto;
  }

  .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .responsive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .responsive-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .table-wrap > table{
    width:max(100%,760px);
  }

  .pagination{
    flex-wrap:wrap;
    gap:8px;
  }
}

/* Mobile layout (stack while preserving modules/actions). */
@media (max-width:768px){
  .toolbar{
    width:100%;
    gap:8px;
    flex-wrap:wrap;
    align-items:stretch;
  }
  #searchInput,
  .toolbar .input,
  .toolbar .select{
    width:100%;
    min-width:0;
    flex:1 1 100%;
  }
  .toolbar .btn{
    flex:1 1 auto;
  }

  .responsive-grid,
  .responsive-form-grid,
  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4{
    grid-template-columns:1fr;
  }

  .table-wrap{
    max-width:100%;
    overflow-x:auto;
    overflow-y:auto;
  }
  .table-wrap > table{
    width:max(100%,820px);
  }
  th, td{
    white-space:nowrap;
    padding:7px 8px;
  }
  td .pill,
  td .chip{
    white-space:nowrap;
  }

  .table-actions,
  .table-tools,
  td .actions,
  .pagination,
  .notification-filter-row,
  .notification-actions{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
  }
  .table-actions > *,
  .table-tools > *,
  td .actions > *,
  .pagination > *,
  .notification-filter-row > *,
  .notification-actions > *{
    flex:1 1 auto;
  }
  td .actions .btn,
  .notification-actions .btn{
    white-space:normal;
    min-height:36px;
  }

  .sidebar{
    inset:72px 0 0 auto;
    width:min(94vw,360px);
    max-height:calc(100vh - 80px);
  }

  .modal{
    padding:6px;
  }
  .modal-content{
    width:100%;
    max-width:100%;
    max-height:calc(100vh - 12px);
    border-radius:12px;
    overflow:auto;
    overscroll-behavior:contain;
  }
  .modal .header{
    position:sticky;
    top:0;
    z-index:3;
    background:var(--card);
  }
  .modal-content iframe{
    width:100%;
    min-height:62vh !important;
  }
  .modal-content .actions{
    position:sticky;
    bottom:0;
    z-index:2;
    background:var(--card);
    padding-top:8px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }

  form .input,
  form .select,
  form textarea{
    width:100%;
    min-width:0;
    max-width:100%;
  }
}

/* Small mobile density tuning (360-430 baseline). */
@media (max-width:480px){
  .wrap{padding:8px}
  .card{padding:10px}
  .toolbar .btn,
  .table-actions .btn,
  .modal .actions .btn{
    width:100%;
  }
  .notification-preview-panel{
    right:auto;
    left:0;
    width:min(96vw,420px);
  }
  .pwa-install-banner{
    padding:0 8px calc(8px + env(safe-area-inset-bottom));
  }
  .pwa-install-banner__surface{
    border-radius:14px 14px 10px 10px;
    padding:10px;
  }
  .pwa-install-banner__actions{
    flex-direction:column;
  }
}

@keyframes row-highlight-pulse {
  0% {
    background-color: rgba(72, 187, 120, 0.42);
  }
  100% {
    background-color: transparent;
  }
}