/* Base shell and legacy-compatible visual primitives. */

/* Source block 1. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }



.cal-day-deals::-webkit-scrollbar {

  width: 4px;

}

.cal-day-deals::-webkit-scrollbar-track {

  background: transparent;

}

.cal-day-deals::-webkit-scrollbar-thumb {

  background: var(--border, rgba(255, 255, 255, 0.1));

  border-radius: 4px;

}

.cal-day-deals::-webkit-scrollbar-thumb:hover {

  background: var(--text3, rgba(255, 255, 255, 0.2));

}

.cal-day-deals {

  scrollbar-width: thin;

  scrollbar-color: var(--border, rgba(255, 255, 255, 0.1)) transparent;

}



:root {

  --bg: #0a0a0a;

  --bg-soft: #111111;

  --ink: #fafafa;

  --ink-soft: #a1a1a1;

  --ink-dim: #525252;

  --line: rgba(250,250,250,.08);

  --line-strong: rgba(250,250,250,.18);

  --accent: #c8f24a;

  --accent-deep: #9ec03b;

  --accent-glow: rgba(200, 242, 74, .15);

  --display: 'Fraunces', 'Times New Roman', serif;

  --sans: 'Inter Tight', system-ui, sans-serif;

  --mono: 'JetBrains Mono', monospace;



  /* Legacy color mappings to preserve existing styles */

  --navy: var(--bg);

  --navy-light: var(--bg-soft);

  --blue: var(--accent);

  --bg2: #141414;

  --surface: var(--bg-soft);

  --border: var(--line);

  --text: var(--ink);

  --text2: var(--ink-soft);

  --text3: var(--ink-dim);

  --green: #22C55E;

  --amber: #F59E0B;

  --red: #EF4444;

  --purple: #8B5CF6;

  --radius: 12px;

  --radius-sm: 8px;

  --shadow: 0 4px 20px rgba(0,0,0,0.25);

}



body.light-theme {

  --bg: #f8f9fa;

  --bg-soft: #ffffff;

  --ink: #0a0a0a;

  --ink-soft: #4a4a48;

  --ink-dim: #8a8a86;

  --line: rgba(10,10,10,.08);

  --line-strong: rgba(10,10,10,.18);

  --accent: #65a30d;

  --accent-deep: #4d7c0f;

  --accent-glow: rgba(101, 163, 13, 0.15);



  /* Mapeamento legado */

  --navy: var(--bg);

  --navy-light: var(--bg-soft);

  --blue: var(--accent);

  --bg2: #f0f0ed;

  --surface: var(--bg-soft);

  --border: var(--line);

  --text: var(--ink);

  --text2: var(--ink-soft);

  --text3: var(--ink-dim);

  --radius: 12px;

  --radius-sm: 8px;

  --shadow: 0 4px 20px rgba(0,0,0,0.05);

}





*, body, input, select, textarea, button {

  font-family: var(--sans);

}



body {

  background: var(--bg);

  color: var(--text);

  min-height: 100vh;

  overflow: hidden;

  position: relative;

  -webkit-font-smoothing: antialiased;

}



/* noise grain overlay — identical to wrapper */

body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 300;

  opacity: .035;

  mix-blend-mode: overlay;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}



/* ════ DISPLAY FONTS ════ */

.logo, .sidebar-logo-text, .brand-name, .brand-headline, .lc-title, .modal-title, .hero-name, .win-title, .panel-title, .sec-label {

  font-family: var(--display) !important;

  font-style: italic;

}



/* ════ SHELL LAYOUT ════ */

.shell {

  display: flex;

  height: 100vh;

  width: 100vw;

  overflow: hidden;

}



.sidebar {

  width: 260px;

  background: var(--navy-light);

  border-right: 1px solid var(--border);

  display: flex;

  flex-direction: column;

  height: 100vh;

  flex-shrink: 0;

  overflow-y: auto;

  overflow-x: hidden;

}



.sidebar::-webkit-scrollbar {

  width: 5px;

}

.sidebar::-webkit-scrollbar-track {

  background: transparent;

}

.sidebar::-webkit-scrollbar-thumb {

  background: rgba(255, 255, 255, 0.12);

  border-radius: 4px;

}

.sidebar::-webkit-scrollbar-thumb:hover {

  background: rgba(255, 255, 255, 0.24);

}



.folder-group {

  display: flex;

  flex-direction: column;

  align-items: stretch;

  width: 100%;

}



.folder-content {

  display: none;

  flex-direction: column;

  padding-left: 12px;

  margin-left: 20px;

  margin-top: 4px;

  margin-bottom: 4px;

}

.folder-content .folder-content {

  margin-left: 8px;

}



.sidebar-logo {

  padding: 24px 20px 18px;

  display: flex;

  align-items: center;

  gap: 10px;

}

.sidebar-logo-mark {

  width: 60px;

  height: 36px;

  background: transparent;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 2px;

}

.sidebar-logo-mark img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  filter: none;

}

.sidebar-logo-text {

  letter-spacing: -0.5px;

}

.sidebar-logo-text img {

  width: 85%;

  height: 85%;

  object-fit: contain;

  filter: none;

}

.light-theme .sidebar-logo-text img {

  width: 85%;

  height: 85%;

  object-fit: contain;

  filter: none;

}



.sidebar-nav {

  flex: 1;

  padding: 0 12px 24px;

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.nav-sec {

  font-size: 9px;

  font-weight: 700;

  color: var(--text3);

  text-transform: uppercase;

  letter-spacing: 0.8px;

  margin: 14px 10px 6px;

}



.nav-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  padding: 10px 12px;

  border-radius: 8px;

  color: var(--text2);

  font-size: 13px;

  font-weight: 600;

  text-decoration: none;

  cursor: pointer;

  transition: all 0.15s ease;

  border: none;

  background: transparent;

  text-align: left;

  font-family: 'Sora', sans-serif;

}

.nav-item:hover {

  background: rgba(255,255,255,0.03);

  color: var(--text);

}

.nav-item.active {

  background: var(--accent-glow);

  color: var(--accent);

}

.nav-item-left {

  display: flex;

  align-items: center;

  gap: 10px;

}

.nav-item-icon {

  width: 16px;

  height: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.nav-item-icon svg {

  width: 100%;

  height: 100%;

  stroke: currentColor;

}

.nav-item-info {

  display: flex;

  flex-direction: column;

}

.nav-item-subtext {

  font-size: 9.5px;

  color: var(--text3);

  margin-top: 1px;

}



.nav-badge {

  font-size: 9px;

  font-weight: 700;

  padding: 2px 7px;

  border-radius: 20px;

  line-height: 1.1;

}



.nav-submenu {

  display: none;

  flex-direction: column;

  padding-left: 12px;

  margin-top: 2px;

  margin-bottom: 4px;

  gap: 2px;

  border-left: 1px dashed #222222;

  margin-left: 20px;

}

.nav-submenu.open {

  display: flex;

}

.submenu-item {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 8px 10px;

  border-radius: 6px;

  color: var(--text2);

  font-size: 12px;

  text-decoration: none;

  cursor: pointer;

  background: transparent;

  border: none;

  width: 100%;

  text-align: left;

  transition: all 0.15s ease;

  font-family: 'Sora', sans-serif;

  font-weight: 500;

}

.submenu-item:hover {

  color: var(--text);

  background: rgba(255,255,255,0.02);

}

.submenu-item.active {

  color: var(--accent);

  font-weight: 600;

}

.submenu-item-icon {

  width: 12px;

  height: 12px;

  color: var(--text3);

  stroke: currentColor;

}

.submenu-item-icon.folder {

  color: #D97706; /* folder gold */

}



.sidebar-footer {

  padding: 14px 18px;

  border-top: 1px solid var(--border);

}

.status-pill {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 11px;

  color: var(--text2);

}

.status-pill .dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--green);

  box-shadow: 0 0 6px var(--green);

}



.main-content {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  height: 100vh;

  overflow: hidden;

  background: var(--bg);

}



.topbar {

  background: var(--bg-soft);

  border-bottom: 1px solid var(--border);

  padding: 0 24px;

  height: 58px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-shrink: 0;

}

.topbar-date {

  font-size: 12px;

  color: var(--text2);

}

.topbar-right {

  display: flex;

  align-items: center;

  gap: 16px;

}

.language-switcher { display:inline-flex;align-items:center;padding:3px;border:1px solid var(--border);border-radius:9px;background:var(--bg);gap:2px; }
.language-switcher button { min-width:34px;height:26px;padding:0 7px;border:0;border-radius:6px;background:transparent;color:var(--text3);font:700 9px var(--sans);letter-spacing:.04em;cursor:pointer; }
.language-switcher button.active { background:var(--accent);color:#102018; }

.topbar-theme {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 11px;

  color: var(--text2);

  font-weight: 600;

}

/* Toggle Switch */

.switch {

  position: relative;

  display: inline-block;

  width: 34px;

  height: 20px;

}

.switch input { 

  opacity: 0;

  width: 0;

  height: 0;

}

.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #222;

  transition: .4s;

  border-radius: 20px;

  border: 1px solid var(--border);

}

.slider:before {

  position: absolute;

  content: "";

  height: 12px;

  width: 12px;

  left: 3px;

  bottom: 3px;

  background-color: var(--text2);

  transition: .4s;

  border-radius: 50%;

}

input:checked + .slider {

  background-color: var(--accent-glow);

}

input:checked + .slider:before {

  transform: translateX(14px);

  background-color: var(--accent);

}



.topbar-bell {

  position: relative;

  width: 32px;

  height: 32px;

  border-radius: 8px;

  border: 1px solid var(--border);

  background: rgba(255,255,255,0.02);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  color: var(--text2);

  transition: all 0.15s;

}

.topbar-bell:hover {

  background: rgba(255,255,255,0.05);

  color: var(--text);

}

.topbar-bell .badge {

  position: absolute;

  top: -4px;

  right: -4px;

  min-width: 14px;

  height: 14px;

  padding: 0 4px;

  background: var(--red);

  border-radius: 8px;

  font-size: 8px;

  font-weight: 700;

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  white-space: nowrap;

  box-sizing: border-box;

}



.topbar-avatar {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: var(--accent);

  color: #0a0a0a;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

}



.topbar-logout {

  font-size: 11px;

  font-weight: 600;

  color: var(--text2);

  background: rgba(255,255,255,0.02);

  border: 1px solid var(--border);

  border-radius: 6px;

  padding: 4px 10px;

  cursor: pointer;

  font-family: 'Sora', sans-serif;

  transition: all 0.15s;

}

.topbar-logout:hover {

  background: rgba(239,68,68,0.1);

  color: var(--red);

  border-color: rgba(239,68,68,0.2);

}



.content-viewport {

  flex: 1;

  min-width: 0;

  overflow-y: auto;

  padding: 24px 32px 48px;

}



.viewport-view {

  display: none;

  animation: fadeUp 0.3s ease both;

}

#view-backlog-depto {
  padding: 24px;
}


.viewport-view.active {

  display: block;

}

.viewport-view.active#view-mailops,

.viewport-view.active#view-quality {

  display: flex !important;

  flex-direction: column;

}



/* ════ LOGIN ════ */

#login-screen {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--bg);

  position: relative;

  overflow-y: auto;

  padding: 40px 20px;

}

#login-screen::before {

  content: '';

  position: absolute;

  width: 700px; height: 700px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(200,242,74,0.03) 0%, transparent 70%);

  top: -250px; right: -250px;

  pointer-events: none;

}

#login-screen::after {

  content: '';

  position: absolute;

  width: 500px; height: 500px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(200,242,74,0.02) 0%, transparent 70%);

  bottom: -150px; left: -150px;

  pointer-events: none;

}



.login-grid {

  display: grid;

  grid-template-columns: 1fr 420px;

  width: 100%;

  max-width: 1100px;

  margin: 0 auto;

  position: relative;

  z-index: 1;

}



.login-brand {

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 60px 40px 60px 60px;

}

.brand-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 52px; }

.brand-mark {

  width: 52px; height: 52px;

  background: transparent;

  border-radius: 14px;

  display: flex; align-items: center; justify-content: center;

  padding: 2px;

}

.brand-mark img { width: 100%; height: 100%; object-fit: contain; filter: none; }

.brand-name { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; }

.brand-name span { color: var(--accent); }



.brand-headline {

  font-size: clamp(26px, 3.5vw, 40px);

  font-weight: 700; color: var(--text);

  line-height: 1.15; letter-spacing: -1px; margin-bottom: 16px;

}

.brand-headline em { color: var(--accent); font-style: normal; }

.brand-sub { font-size: 14px; color: var(--text2); line-height: 1.7; max-width: 380px; }



.brand-stats {

  display: flex; gap: 20px; flex-wrap: wrap;

  margin-top: 52px; padding-top: 32px;

  border-top: 1px solid var(--border);

}

.bstat-val { font-size: 24px; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono', monospace; }

.bstat-label { font-size: 10px; color: var(--text3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.6px; }



.login-panel {

  display: flex; align-items: center; justify-content: center;

  padding: 40px 32px;

  background: rgba(255,255,255,0.01);

  border-left: 1px solid var(--border);

}



.login-card {

  background: var(--bg-soft);

  border: 1px solid var(--border);

  border-radius: 24px;

  padding: 40px 36px;

  width: 100%;

  box-shadow: 0 24px 64px rgba(0,0,0,0.6);

}



.lc-eyebrow {

  display: inline-flex; align-items: center; gap: 6px;

  font-size: 11px; font-weight: 600; color: var(--accent);

  text-transform: uppercase; letter-spacing: 0.8px;

  background: var(--accent-glow); padding: 4px 10px; border-radius: 20px;

  margin-bottom: 16px;

}

.lc-title { font-size: 21px; font-weight: 700; color: var(--text); margin-bottom: 4px; letter-spacing: -0.4px; }

.lc-sub { font-size: 13px; color: var(--text2); margin-bottom: 28px; }



.field { margin-bottom: 16px; }

.field label {

  display: block; font-size: 11px; font-weight: 600;

  color: var(--text2); margin-bottom: 6px;

  text-transform: uppercase; letter-spacing: 0.5px;

}

.field input {

  width: 100%; padding: 12px 14px;

  border: 1.5px solid var(--border);

  border-radius: var(--radius-sm);

  font-family: 'Sora', sans-serif; font-size: 14px;

  color: var(--text); background: var(--bg);

  transition: border-color 0.2s, box-shadow 0.2s; outline: none;

}

.field input:focus {

  border-color: var(--accent);

  box-shadow: 0 0 0 3px var(--accent-glow);

  background: var(--bg-soft);

}

.field-pw { position: relative; }

.field-pw input { padding-right: 42px; }

.pw-toggle {

  position: absolute; right: 12px; top: 50%;

  transform: translateY(-50%);

  cursor: pointer; color: var(--text3);

  background: none; border: none; padding: 4px; display: flex;

}

.pw-toggle:hover { color: var(--accent); }



.login-btn {

  width: 100%; padding: 13px;

  background: var(--accent); color: #0a0a0a;

  font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700;

  border: none; border-radius: var(--radius-sm);

  cursor: pointer; transition: opacity 0.2s, transform 0.15s;

  margin-top: 8px;

  display: flex; align-items: center; justify-content: center; gap: 8px;

}

.login-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.login-btn:active { transform: translateY(0); }



.login-error {

  display: none;

  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2);

  border-radius: var(--radius-sm);

  padding: 10px 14px;

  font-size: 12px; color: var(--red);

  margin-top: 12px; text-align: center;

}

.password-link {
  display: block;
  margin: 14px auto 0;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: 600 11px 'Sora', sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.password-link:hover { opacity: 0.82; }

.login-footer { text-align: center; margin-top: 24px; font-size: 11px; color: var(--text3); line-height: 1.8; }





/* ════ MAIN DASHBOARD PANELS ════ */

.main { max-width: 1200px; margin: 0 auto; }



/* Hero */

.hero {

  background: radial-gradient(circle at top right, rgba(200, 242, 74, 0.08) 0%, var(--bg-soft) 75%);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  padding: 28px 28px 24px;

  margin-bottom: 18px;

  position: relative; overflow: hidden;

}

.hero::before {

  content: ''; position: absolute;

  right: -60px; top: -60px; width: 280px; height: 280px;

  border-radius: 50%; background: var(--accent-glow);

  pointer-events: none;

}

.hero::after {

  content: ''; position: absolute;

  right: 80px; bottom: -90px; width: 200px; height: 200px;

  border-radius: 50%; background: rgba(255,255,255,0.01);

  pointer-events: none;

}

.hero-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; gap: 16px; }

.hero-greeting { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }

.hero-name { font-size: clamp(20px, 4vw, 26px); font-weight: 700; color: var(--text); letter-spacing: -0.5px; }

.hero-role { font-size: 13px; color: var(--text2); margin-top: 2px; }



.hero-email-btn {

  display: flex; align-items: center; gap: 8px;

  background: var(--accent); color: #0a0a0a;

  font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700;

  border: none; border-radius: 12px; padding: 10px 18px;

  cursor: pointer; text-decoration: none;

  transition: opacity 0.2s, transform 0.15s;

  white-space: nowrap; position: relative; z-index: 1; flex-shrink: 0;

}

.hero-email-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.hero-email-btn svg { width: 15px; height: 15px; }



.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; position: relative; z-index: 1; }

.hero-stats > div {

  padding-right: 28px;

  border-right: 1px solid var(--border);

}

.hero-stats > div:last-child {

  border-right: none;

}

.hstat-val { font-size: 22px; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono', monospace; }

.hstat-label { font-size: 11px; color: var(--text2); margin-top: 1px; }



.hero-search {

  display: flex; align-items: center; gap: 8px;

  background: rgba(0,0,0,0.2);

  border: 1px solid var(--border);

  border-radius: 12px; padding: 10px 14px;

  margin-top: 18px; position: relative; z-index: 1;

}

.hero-search svg { width: 14px; height: 14px; color: var(--text3); flex-shrink: 0; }

.hero-search input {

  background: none; border: none; outline: none;

  color: #fff; font-family: 'Sora', sans-serif; font-size: 13px; flex: 1;

}

.hero-search input::placeholder { color: var(--text3); }



.sec-label {

  font-size: 11px; font-weight: 600; color: var(--text3);

  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px;

}



/* Email highlight panel */

.email-panel {

  background: var(--bg-soft);

  border-radius: var(--radius);

  padding: 20px 24px; margin-bottom: 18px;

  display: flex; align-items: center; justify-content: space-between; gap: 20px;

  flex-wrap: wrap;

  border: 1px solid var(--border);

}

.ep-info { flex: 1; min-width: 200px; }

.ep-eyebrow {

  font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px;

  display: flex; align-items: center; gap: 4px;

}

.ep-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }

.ep-desc { font-size: 12px; color: var(--text2); }

.ep-btn {

  display: flex; align-items: center; gap: 8px;

  background: var(--accent); color: #0a0a0a;

  font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700;

  border: none; border-radius: 12px; padding: 12px 22px;

  cursor: pointer; transition: opacity 0.2s, transform 0.15s; white-space: nowrap;

}

.ep-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.ep-btn svg { width: 15px; height: 15px; }



/* Modules */

.modules-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));

  gap: 10px; margin-bottom: 18px;

}

.module-card {

  background: var(--bg-soft); border: 1px solid var(--border);

  border-radius: var(--radius); padding: 16px 14px;

  cursor: pointer;

  transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;

  display: flex; flex-direction: column; gap: 10px;

  text-decoration: none;

}

.module-card:hover {

  box-shadow: var(--shadow); transform: translateY(-2px);

  border-color: var(--accent-glow);

}

.mod-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }

.mod-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

.mod-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }

.mod-desc { font-size: 11px; color: var(--text2); line-height: 1.4; }

.mod-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; width: fit-content; }



.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; margin-bottom: 18px; }



.panel { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }

.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.panel-title { font-size: 13px; font-weight: 600; color: var(--text); }

.panel-link { font-size: 11px; color: var(--accent); cursor: pointer; text-decoration: none; }

.panel-link:hover { text-decoration: underline; }



.kpi-list { display: flex; flex-direction: column; gap: 10px; }

.kpi-item { display: flex; align-items: center; gap: 10px; }

.kpi-name { font-size: 12px; color: var(--text2); width: 74px; flex-shrink: 0; }

.kpi-track { flex: 1; height: 5px; background: rgba(255,255,255,0.05); border-radius: 3px; }

.kpi-fill { height: 100%; border-radius: 3px; transition: width 1s ease; }

.kpi-val { font-size: 12px; font-weight: 600; font-family: 'JetBrains Mono', monospace; min-width: 30px; text-align: right; }



.activity-list { display: flex; flex-direction: column; gap: 11px; }

.activity-item { display: flex; align-items: flex-start; gap: 10px; }

.activity-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }

.activity-body { flex: 1; }

.activity-text { font-size: 12px; color: var(--text2); line-height: 1.5; }

.activity-text strong { color: var(--text); font-weight: 600; }

.activity-time { font-size: 11px; color: var(--text3); white-space: nowrap; padding-top: 2px; }



.status-list { display: flex; flex-direction: column; gap: 7px; }

.status-item {

  display: flex; align-items: center; justify-content: space-between;

  padding: 8px 12px; background: rgba(0,0,0,0.15); border-radius: var(--radius-sm);

  border: 1px solid var(--border);

}

.status-left { display: flex; align-items: center; gap: 9px; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; }

.sd-green { background: #22C55E; box-shadow: 0 0 6px rgba(34,197,94,0.45); }

.sd-amber { background: #F59E0B; box-shadow: 0 0 6px rgba(245,158,11,0.45); }

.sd-red { background: #EF4444; }

.status-name { font-size: 12px; color: var(--text); font-weight: 500; }

.status-val { font-size: 11px; color: var(--text2); }



.quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

.quick-link {

  display: flex; align-items: center; gap: 9px;

  padding: 9px 11px; border: 1px solid var(--border);

  border-radius: var(--radius-sm); cursor: pointer;

  text-decoration: none; background: rgba(0,0,0,0.1);

  transition: background 0.15s, border-color 0.15s;

}

.quick-link:hover { background: rgba(255,255,255,0.02); border-color: var(--accent-glow); }

.ql-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.ql-icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

.ql-text { font-size: 12px; color: var(--text); font-weight: 500; }



.pending-list { display: flex; flex-direction: column; gap: 8px; }

.pending-item {

  display: flex; align-items: center; gap: 12px;

  padding: 12px 14px; border: 1px solid var(--border);

  border-radius: var(--radius-sm); cursor: pointer;

  background: rgba(0,0,0,0.1); transition: background 0.15s, border-color 0.15s;

}

.pending-item:hover { background: rgba(255,255,255,0.02); border-color: var(--accent-glow); }

.pend-num { font-size: 18px; font-weight: 700; min-width: 28px; font-family: 'JetBrains Mono', monospace; }

.pend-info { flex: 1; }

.pend-title { font-size: 13px; font-weight: 600; color: var(--text); }

.pend-area { font-size: 11px; color: var(--text2); margin-top: 2px; }

.pend-arrow { color: var(--text3); font-size: 18px; }





/* Color chips */

.ic-blue { background: rgba(26,134,217,0.1); } .ic-blue svg { stroke: #1A86D9; }

.ic-teal { background: rgba(13,148,136,0.1); } .ic-teal svg { stroke: #0D9488; }

.ic-amber { background: rgba(217,119,6,0.1); } .ic-amber svg { stroke: #D97706; }

.ic-purple { background: rgba(124,58,237,0.1); } .ic-purple svg { stroke: #7C3AED; }

.ic-coral { background: rgba(220,38,38,0.1); } .ic-coral svg { stroke: #DC2626; }

.ic-green { background: rgba(22,163,74,0.1); } .ic-green svg { stroke: #16A34A; }

.ic-pink { background: rgba(190,24,93,0.1); } .ic-pink svg { stroke: #BE185D; }

.ic-navy { background: rgba(26,58,92,0.1); } .ic-navy svg { stroke: #1A3A5C; }

.b-blue { background: rgba(26,134,217,0.1); color: #1A86D9; }

.b-amber { background: rgba(217,119,6,0.1); color: #D97706; }

.b-red { background: rgba(220,38,38,0.1); color: #DC2626; }

.b-green { background: rgba(22,163,74,0.1); color: #16A34A; }

.b-purple { background: rgba(124,58,237,0.1); color: #7C3AED; }

.b-teal { background: rgba(13,148,136,0.1); color: #0D9488; }



/* Animations */

@keyframes fadeUp {

  from { opacity: 0; transform: translateY(14px); }

  to   { opacity: 1; transform: translateY(0); }

}

@keyframes shake {

  0%,100%{ transform:translateX(0); }

  25%{ transform:translateX(-6px); }

  75%{ transform:translateX(6px); }

}

@keyframes spin {

  to { transform: rotate(360deg); }

}

.anim   { animation: fadeUp 0.38s ease both; }

.d1 { animation-delay: 0.05s; }

.d2 { animation-delay: 0.10s; }

.d3 { animation-delay: 0.15s; }

.d4 { animation-delay: 0.20s; }

.d5 { animation-delay: 0.25s; }



/* Modal */

.modal-overlay {

  display: none; position: fixed; inset: 0; z-index: 9999;

  background: rgba(0,0,0,0.85);

  backdrop-filter: blur(8px);

  align-items: center; justify-content: center;

}

.modal-overlay.open { display: flex; }

.modal-box {

  background: var(--bg-soft); border-radius: 20px;

  border: 1px solid var(--border);

  padding: 36px 32px; width: 100%; max-width: 360px; margin: 20px;

  box-shadow: 0 24px 60px rgba(0,0,0,0.5);

  position: relative;

  animation: fadeUp 0.26s ease both;

}

.modal-close {

  position: absolute; top: 16px; right: 18px;

  background: none; border: none; font-size: 22px;

  cursor: pointer; color: var(--text3); line-height: 1;

}

.modal-close:hover { color: var(--text); }

.modal-icon {

  width: 48px; height: 48px;

  background: var(--accent-glow);

  border-radius: 14px; margin-bottom: 14px;

  display: flex; align-items: center; justify-content: center;

}

.modal-icon svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 2; }

.modal-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 4px; }

.modal-sub { font-size: 12px; color: var(--text2); margin-bottom: 22px; }

.modal-field { margin-bottom: 14px; }

.modal-field label {

  display: block; font-size: 11px; font-weight: 600;

  color: var(--text2); margin-bottom: 5px;

  text-transform: uppercase; letter-spacing: 0.5px;

}

.modal-field input, .modal-field select, .modal-field textarea {

  width: 100%; padding: 10px 12px;

  border: 1.5px solid var(--border); border-radius: 9px;

  font-family: 'Sora', sans-serif; font-size: 13px;

  color: var(--text); background: var(--bg);

  outline: none; transition: border-color 0.2s, box-shadow 0.2s;

}

.modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus {

  border-color: var(--accent);

  box-shadow: 0 0 0 3px var(--accent-glow);

  background: var(--bg-soft);

}

.modal-field-pw { position: relative; }

.modal-field-pw input { padding-right: 40px; }

.modal-pw-toggle {

  position: absolute; right: 10px; top: 50%;

  transform: translateY(-50%);

  background: none; border: none; cursor: pointer;

  color: var(--text3); padding: 4px; display: flex;

}

.modal-pw-toggle:hover { color: var(--accent); }

.modal-btn {

  width: 100%; padding: 12px;

  background: var(--accent); color: #0a0a0a;

  font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700;

  border: none; border-radius: 9px; cursor: pointer;

  display: flex; align-items: center; justify-content: center; gap: 7px;

  transition: opacity 0.2s, transform 0.15s; margin-top: 4px;

}

.modal-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.modal-error {

  display: none; font-size: 11px; color: var(--red);

  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2);

  border-radius: 8px; padding: 8px 12px; text-align: center;

  margin-top: 10px;

}



/* Responsive */

@media (max-width: 740px) {

  .login-grid { grid-template-columns: 1fr; }

  .login-brand { display: none; }

  .login-panel {

    min-height: 100vh; padding: 32px 20px;

    background: #0a0a0a;

    border-left: none;

  }

  .modules-grid { grid-template-columns: repeat(2, 1fr); }

  .two-col { grid-template-columns: 1fr; }

  .hero-email-btn span { display: none; }

  .tb-date { display: none; }

  .sidebar { display: none; } /* hamburger toggled later */

}

@media (max-width: 400px) {

  .quick-links { grid-template-columns: 1fr; }

  .hero-stats { gap: 18px; }

}



/* ══ ADM TABS ══ */

.admin-tab-btn {

  background: none;

  border: none;

  font-family: 'Sora', sans-serif;

  font-size: 12px;

  font-weight: 600;

  color: var(--text2);

  padding: 8px 16px;

  cursor: pointer;

  border-radius: 8px;

  transition: all 0.25s;

}

.admin-tab-btn:hover {

  background: rgba(255,255,255,0.03);

  color: var(--text);

}

.admin-tab-btn.active {

  background: var(--accent);

  color: #0a0a0a;

  box-shadow: 0 4px 12px var(--accent-glow);

}



/* ══ WORKSPACE OVERLAY ══ */

.workspace-overlay {

  display: flex;

  flex-direction: column;

  animation: fadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;

  font-family: 'Sora', sans-serif;

  background: var(--bg);

  height: 100%;

}

.workspace-header {

  height: 58px;

  background: var(--bg-soft);

  border-bottom: 1px solid var(--border);

  padding: 0 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-shrink: 0;

}

.workspace-title-area {

  display: flex;

  align-items: center;

  gap: 12px;

}

.workspace-back-btn {

  background: rgba(255,255,255,0.02);

  border: 1px solid var(--border);

  border-radius: 8px;

  padding: 6px 14px;

  font-size: 11px;

  font-weight: 600;

  color: var(--text);

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 6px;

  transition: all 0.2s;

}

.workspace-back-btn:hover {

  background: rgba(255,255,255,0.05);

  transform: translateX(-2px);

}

.workspace-select-filter {

  background: var(--bg-soft);

  border: 1px solid var(--border);

  border-radius: 8px;

  padding: 5px 10px;

  font-size: 11px;

  color: var(--text);

  outline: none;

  cursor: pointer;

  font-family: 'Sora', sans-serif;

  transition: all 0.2s;

}

.workspace-select-filter:hover {

  background: rgba(255,255,255,0.05);

}

.workspace-title {

  font-size: 14px;

  font-weight: 700;

  color: #fff;

  display: flex;

  align-items: center;

  gap: 8px;

}

.workspace-title span {

  color: var(--accent);

}

.workspace-body {

  flex: 1;

  display: grid;

  grid-template-columns: 240px 1fr;

  background: var(--bg);

  overflow: hidden;

}

.workspace-sidebar {

  background: var(--bg-soft);

  border-right: 1px solid var(--border);

  padding: 20px 14px;

  display: flex;

  flex-direction: column;

  gap: 6px;

  overflow-y: auto;

}

.workspace-menu-title {

  font-size: 9px;

  font-weight: 700;

  color: var(--text3);

  text-transform: uppercase;

  letter-spacing: 1px;

  margin: 14px 6px 6px;

}

.workspace-menu-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 14px;

  border-radius: 10px;

  color: var(--text2);

  font-size: 12px;

  font-weight: 500;

  text-decoration: none;

  cursor: pointer;

  transition: all 0.2s;

  border: none;

  background: none;

  width: 100%;

  text-align: left;

}

.workspace-menu-item:hover {

  background: rgba(255,255,255,0.03);

  color: var(--text);

}

.workspace-menu-item.active {

  background: var(--accent-glow);

  color: var(--accent);

  font-weight: 600;

}

.workspace-menu-item svg {

  width: 14px;

  height: 14px;

  flex-shrink: 0;

}

.workspace-viewport {

  flex: 1;

  padding: 24px 28px;

  overflow-y: auto;

  position: relative;

  display: flex;

  flex-direction: column;

  gap: 20px;

  animation: fadeUp 0.3s ease both;

  background: var(--bg);

}



/* INTERACTIVE COMPONENTS STYLING */

.ws-card {

  background: var(--bg-soft);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  padding: 20px 24px;

  box-shadow: 0 4px 18px rgba(0,0,0,0.3);

}

.ws-card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 16px;

  border-bottom: 1.5px solid var(--border);

  padding-bottom: 10px;

}

.ws-card-title {

  font-size: 14px;

  font-weight: 700;

  color: var(--text);

}



/* EMAIL LIST STYLES */

.ws-email-row {

  display: grid;

  grid-template-columns: 100px 220px 1fr 130px;

  gap: 12px;

  padding: 12px 14px;

  border-bottom: 1px solid var(--border);

  font-size: 12px;

  align-items: center;

  cursor: pointer;

  transition: all 0.2s;

  color: var(--text2);

  min-height: 50px;

  box-sizing: border-box;

}

.ws-email-row > div {

  min-width: 0;

}

.ws-email-row:hover {

  background: rgba(255,255,255,0.02);

  transform: scale(1.005);

  color: var(--text);

}

.ws-email-row.unread {

  font-weight: 700;

  background: rgba(200,242,74,0.02);

  color: var(--text);

}



/* SOUND ALERT CONTROLLER */

.sound-alert-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: var(--bg-soft);

  color: var(--text);

  padding: 12px 20px;

  border-radius: 12px;

  font-size: 12px;

  margin-bottom: 14px;

  border: 1px solid var(--border);

}



/* MEETING BOARD DEMANDS */

.demand-badge {

  display: inline-block;

  padding: 2px 8px;

  border-radius: 20px;

  font-size: 10px;

  font-weight: 600;

}