/* Shared Emerald Glass theme for all application routes and the login page. */
body.app-glass {
  --text: #f2f7f2;
  --muted: #d0ded5;
  --muted2: #b6c9bd;
  --accent: #d0ed9f;
  --accent2: #85dbb0;
  --stroke: rgba(227,245,231,.22);
  --card: rgba(22,50,39,.89);
  --card2: rgba(84,132,104,.42);
  --bg2: #244b3b;
  --shadow: 0 12px 32px rgba(3,22,15,.12), inset 0 1px 0 rgba(255,255,255,.09);
  --focus: 0 0 0 3px rgba(201,239,161,.45);
  --icon: invert(1);
  background: #15372a;
  isolation: isolate;
}
/* Blur the photograph only; keep text, charts, and the eye-protection overlay sharp. */
body.app-glass::after {
  content: '';
  position: fixed;
  inset: -10px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg,rgba(3,20,16,.81),rgba(5,25,21,.73)), url('./media/main-glass/afaa-background.jpg') center / cover;
  filter: blur(3px);
}
.app-glass .wrap { padding: 0; gap: 0; }
.app-glass .main { border: 0; border-radius: 0; background: rgba(13,37,29,.42); overflow: hidden; }
.app-glass .topbar { min-height: 70px; padding: 14px 24px; background: rgba(17,45,35,.9); backdrop-filter: none; }
.app-glass .pageTitle { font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.app-glass .topLeft::after { content: 'G-SOFT OFFICE'; font-size: 11px; letter-spacing: .15em; margin-left: 12px; opacity: .65; border-left: 1px solid var(--stroke); padding-left: 20px; }
.app-glass .sidebar { align-self: stretch; position: relative; top: auto; width: 62px; flex-shrink: 0; height: 100dvh; max-height: 100dvh; overflow-y: auto; overflow-x: hidden; padding: 12px 5px; border: 0; border-right: 1px solid var(--stroke); border-radius: 0; background: rgba(25,48,38,.65); backdrop-filter: none; scrollbar-width: thin; }
.app-glass .sidebar:not(.open) .brand { display: none; }
.app-glass .sidebar.open { width: 260px; }
.app-glass .nav { padding: 0; gap: 5px; }
.app-glass .nav a { border-radius: 15px; padding: 10px 13px; min-height: 44px; }
.app-glass .nav a .ico { width: 20px; height: 20px; }
.app-glass .nav a.active { background: #e1efd4; color: #1a392c; box-shadow: 0 3px 14px #d3eeb12b; }
.app-glass .nav a.active .ico { filter: none; }
.app-glass .content { padding: 16px 16px 32px; scrollbar-width: thin; scrollbar-color: #a6c6b36b transparent; }
.app-glass .glassWelcome { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.app-glass .glassEyebrow { color: #c9dfc6; font-size: 10px; letter-spacing: .22em; font-weight: 600; }
.app-glass .glassWelcome h1 { font-size: clamp(24px,2.6vw,38px); font-weight: 500; letter-spacing: -.045em; line-height: 1.2; margin: 10px 0 8px; }
.app-glass .glassWelcome p { font-size: 13px; color: var(--muted); margin: 0; }
.app-glass .glassDate { font-size: 12px; white-space: nowrap; padding: 10px 16px; border: 1px solid var(--stroke); border-radius: 24px; backdrop-filter: none; background: var(--card); }
.app-glass .glassQuickNav { display: inline-flex; flex-wrap: wrap; gap: 5px; border: 1px solid var(--stroke); padding: 5px; margin: 22px 0; border-radius: 24px; background: rgba(14,36,26,.4); backdrop-filter: none; }
.app-glass .glassQuickNav a { text-decoration: none; color: var(--muted); padding: 8px 19px; border-radius: 20px; font-size: 12px; transition: background .18s; }
.app-glass .glassQuickNav a:hover { background: var(--card2); }
.app-glass .glassQuickNav a.active { color: #233a2c; background: #e0edcf; }
.app-glass .card { border-radius: 22px; background: linear-gradient(135deg,rgba(184,208,174,.12),rgba(13,39,29,.16)),var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; }
.app-glass .cardPad { padding: 14px; }
.app-glass .mainDashCard.cardPad { padding: 22px; }
.app-glass .glassOverview { display: grid; grid-template-columns: repeat(auto-fit,minmax(185px,1fr)); gap: 16px; margin-bottom: 28px; }
.app-glass .glassMetric { min-width: 0; padding: 20px 22px; position: relative; transition: transform .2s, border-color .2s; }
.app-glass .glassMetric:hover { transform: translateY(-3px); border-color: #cce8b282; }
.app-glass .glassMetricTop { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.app-glass .glassMetricIcon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #c2e59f25; border: 1px solid #d5ebbe24; }
.app-glass .glassMetricIcon .ico { width: 17px; height: 17px; }
.app-glass .glassMetricLabel { font-size: 12px; color: var(--muted); }
.app-glass .glassMetric strong { display: block; font-size: 36px; font-weight: 500; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.app-glass .glassMetricCaption { color: var(--muted2); font-size: 10px; margin-top: 12px; }
.app-glass .glassMetric:first-child { background: linear-gradient(125deg,rgba(111,159,109,.5),rgba(42,88,58,.6)); }
.app-glass .mainDashWrap { gap: 28px; }
.app-glass .mainDashSection { gap: 14px; }
.app-glass .mainDashSectionGrid { gap: 16px; }
.app-glass .mainDashSectionGrid.projects { grid-template-columns: 1.55fr 1fr; align-items: stretch; }
.app-glass .mainDashTitle { font-weight: 550; font-size: 14px; letter-spacing: -.01em; }
.app-glass .mainDashSectionHead > .mainDashTitle { font-size: 18px; }
.app-glass .mainDashSub { color: var(--muted2); line-height: 1.5; }
.app-glass .mainDashCard::before { display: none; }
.app-glass .glassStageChart { display: flex; flex-direction: row; align-items: stretch; gap: 12px; padding: 25px 4px 0; overflow-x: auto; }
.app-glass .glassStageColumn { flex: 1; min-width: 49px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.app-glass .glassStageTrack { height: 160px; width: 100%; max-width: 48px; display: flex; align-items: flex-end; border-bottom: 1px solid #d7e4cf45; }
.app-glass .glassStageFill { width: 100%; min-height: 25px; position: relative; border-radius: 9px 9px 3px 3px; background: linear-gradient(180deg,#cbdcb59c,#84b7942e); border: 1px solid #d0e6be30; box-shadow: inset 0 1px 0 #e3f3d859; }
.app-glass .glassStageColumn:first-child .glassStageFill { background: linear-gradient(180deg,#d2eca2,#85c294); box-shadow: 0 0 24px #b4e69430; }
.app-glass .glassStageFill span { position: absolute; top: -24px; left: 0; right: 0; font-size: 12px; font-weight: 600; }
.app-glass .glassStageLabel { font-size: 10px; color: var(--muted); min-height: 28px; }
.app-glass .glassStagePercent { font-size: 10px; color: var(--muted2); }
.app-glass .liquidTrack { height: 8px; border: none; background: #cfdfcb17; }
.app-glass .liquidFill { box-shadow: none; }
.app-glass .liquidFill::before,.app-glass .liquidFill::after { display: none; }
.app-glass .mainDashSectionGrid.projects > .card:last-child > .vcol { gap: 18px; margin-top: 12px; }
.app-glass .mainDashPie { width: 140px; height: 140px; box-shadow: 0 8px 30px #091e1420; }
.app-glass .mainDashPieWrap { min-height: 160px; }
.app-glass .mainDashPieTip { background: var(--bg2); }
.app-glass .mainDashLegendItem { font-size: 11px; }
.app-glass .mainDashChk { font-size: 11px; background: #183e2d5e; }
.app-glass input,.app-glass select,.app-glass textarea { font-size: 13px; border-radius: 14px; background: rgba(20,50,39,.91); color: var(--text); }
.app-glass select option { color: var(--text); background: var(--bg2); }
.app-glass .seg,.app-glass .iconBtn,.app-glass .pill { font-size: 11px; border-radius: 20px; }
.app-glass .iconBtn .ico { width: 17px; height: 17px; }
.app-glass button:focus-visible,.app-glass a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.app-glass .khead { padding: 12px 14px; }
.app-glass .kcard { background: rgba(20,49,37,.86); }
.app-glass .mainDashTrendSvg { color: var(--text); }
/* The photograph is blurred once on body::after. Scrolling cards use translucent
   fills instead of a separate live backdrop filter for every card/day/table. */
.app-glass .calBottom { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Shared work surfaces; keep scroll containers, table widths and drag targets intact. */
.app-glass .modalCard { background: rgba(26,57,42,.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.app-glass .calDay,
.app-glass .attTableWrap,
.app-glass .attDetailTableWrap,
.app-glass .cpTableWrap,
.app-glass .cashTableWrap,
.app-glass .statsBoardWrap,
.app-glass .statsSummaryCard,
.app-glass .botchatLeft,.app-glass .botchatRight { background: var(--card); backdrop-filter: none; }
.app-glass .uCard,.app-glass .cliRow,.app-glass .rowLine,.app-glass .projectMetaCard { background: var(--card); border-color: var(--stroke); }
.app-glass .chatFeed,.app-glass .courseFeed,.app-glass .ccFeed,.app-glass .botchatFeed { background: rgba(17,45,32,.65); }
.app-glass .botchatMsg.in .botchatBubble { background: #274b3b; color: #edf4ee; }
.app-glass .botchatMsg.out .botchatBubble { background: #346449; color: #edf4ee; }
.app-glass .statsBoard thead th,.app-glass .statsBoard th:first-child,.app-glass .statsBoard td:first-child,
.app-glass .cashSearchMenu,.app-glass .statsHelp:hover::after,.app-glass .statsHelp:focus-visible::after { background: var(--bg2); }
.app-glass .chatBubble,.app-glass .courseBubble,.app-glass .ccBubble { background: #274b3b; }
.app-glass .chatMsg.me .chatBubble,.app-glass .courseMsg.me .courseBubble,.app-glass .ccMsg.me .ccBubble { background: #346449; }
.app-glass .courseActions,.app-glass .ccActions { background: linear-gradient(180deg,transparent,var(--bg2) 35%); }
.app-glass .leadNotice,.app-glass .taskNotice { background: var(--bg2); }
.app-glass .btn.primary { background: rgba(140,193,123,.19); border-color: rgba(205,233,173,.5); }
/* Workspace is a working surface, not a glass window: backgrounds must not compete with text. */
.app-glass .pwWrap .pwPanel,
.app-glass .pwWrap .pwTabs,
.app-glass .pwWrap .pwStat { background: rgba(11,34,27,.94); border-color: rgba(224,246,232,.3); }
.app-glass .pwWrap .pwCard { background: rgba(28,59,45,.96); border-color: rgba(220,241,225,.28); }
.app-glass .pwWrap .pwTab { color: #d9e9df; font-size: 13px; }
.app-glass .pwWrap .pwTab.sel { color: #153d2e; background: #d5ecd7; }
.app-glass .pwWrap .pwMuted,
.app-glass .pwWrap .pwLine small,
.app-glass .pwWrap .pwField { color: #d2e2d8; font-size: 13px; }
.app-glass .pwWrap .pwSectionTitle { color: #f3fff5; }
.app-glass .pwWrap .pwCardHead b { font-size: 15px; }
.app-glass .pwWrap .pwTimeRow { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.app-glass .pwWrap .pwStatus { font-weight: 800; font-size: 12px; padding: 5px 10px; border-width: 1px; background: #263d35; color: #e7f2ec; }
.app-glass .pwWrap .pwStatus.pw-new,
.app-glass .pwWrap .pwStatus.pw-planned { background: #394943; color: #f3f5f3; border-color: #a1b2a9; }
.app-glass .pwWrap .pwStatus.pw-in_progress { background: #123f57; color: #b8e9ff; border-color: #4ab5e7; }
.app-glass .pwWrap .pwStatus.pw-done,
.app-glass .pwWrap .pwStatus.pw-held { background: #164835; color: #bcf9d4; border-color: #60d89c; }
.app-glass .pwWrap .pwStatus.pw-paused { background: #564018; color: #ffe7ac; border-color: #f8b94b; }
.app-glass .pwWrap .pwStatus.pw-revision { background: #4c3268; color: #eacfff; border-color: #c09af4; }
.app-glass .pwWrap .pwStatus.pw-canceled,
.app-glass .pwWrap .pwStatus.pw-missed { background: #602e32; color: #ffe0dc; border-color: #f3918d; }

.app-glass .btn:disabled { opacity: .5; cursor: not-allowed; }
.app-glass textarea:focus-visible,.app-glass input:focus-visible,.app-glass select:focus-visible { outline: 2px solid var(--accent2); outline-offset: 1px; }
[data-theme="light"] body.app-glass { --text: #173829; --muted: #294e3c; --muted2: #345d46; --card: rgba(232,241,218,.72); --card2: rgba(226,241,214,.8); --stroke: rgba(240,255,225,.5); --bg2: #e0ebd4; --icon: none; }
[data-theme="light"] body.app-glass { --accent: #325a36; --accent2: #35735b; --focus: 0 0 0 3px rgba(50,90,54,.25); }
[data-theme="light"] body.app-glass::after { background-image: linear-gradient(100deg,rgba(221,235,208,.78),rgba(216,232,204,.65)),url('./media/main-glass/afaa-background.jpg'); }
[data-theme="light"] .app-glass .modalCard { background: rgba(226,239,215,.96); }
[data-theme="light"] .app-glass .chatFeed,[data-theme="light"] .app-glass .courseFeed,[data-theme="light"] .app-glass .ccFeed,[data-theme="light"] .app-glass .botchatFeed { background: rgba(199,219,188,.6); }
[data-theme="light"] .app-glass .statsCornerTitle,[data-theme="light"] .app-glass .statsSectionRow td,[data-theme="light"] .app-glass .statsHelp { color: #4c6126; }
[data-theme="light"] .app-glass .topbar,[data-theme="light"] .app-glass .sidebar { background: rgba(218,233,201,.8); }
[data-theme="light"] .app-glass .glassMetric:first-child { background: rgba(202,227,175,.83); }
[data-theme="light"] .app-glass .glassQuickNav { background: #c5d7b5b3; }
[data-theme="light"] .app-glass .glassEyebrow { color: var(--muted); }
[data-theme="light"] .app-glass .mainDashChk,[data-theme="light"] .app-glass input,[data-theme="light"] .app-glass select,[data-theme="light"] .app-glass textarea { background: #e9f2dc80; }
[data-theme="light"] .app-glass .kcard { background: #e6eedc66; }
[data-theme="light"] .app-glass .pwWrap .pwPanel,
[data-theme="light"] .app-glass .pwWrap .pwTabs,
[data-theme="light"] .app-glass .pwWrap .pwStat { background: rgba(242,248,237,.96); border-color: #9db6a2; }
[data-theme="light"] .app-glass .pwWrap .pwCard { background: rgba(224,237,221,.97); border-color: #9bb3a0; }
[data-theme="light"] .app-glass .pwWrap .pwTab { color: #31513f; }
[data-theme="light"] .app-glass .pwWrap .pwTab.sel { color: #f2fff5; background: #215840; }
[data-theme="light"] .app-glass .pwWrap .pwMuted,
[data-theme="light"] .app-glass .pwWrap .pwLine small,
[data-theme="light"] .app-glass .pwWrap .pwField { color: #3a5947; }
[data-theme="light"] .app-glass .pwWrap .pwSectionTitle { color: #193929; }
[data-theme="light"] .app-glass .pwWrap .pwStatus.pw-new,
[data-theme="light"] .app-glass .pwWrap .pwStatus.pw-planned { background: #dfe8e2; color: #344b3d; border-color: #9faea5; }
[data-theme="light"] .app-glass .pwWrap .pwStatus.pw-in_progress { background: #d3eafa; color: #154f70; border-color: #4c92c2; }
[data-theme="light"] .app-glass .pwWrap .pwStatus.pw-done,
[data-theme="light"] .app-glass .pwWrap .pwStatus.pw-held { background: #d3f2de; color: #1b633a; border-color: #42a46d; }
[data-theme="light"] .app-glass .pwWrap .pwStatus.pw-paused { background: #ffebbc; color: #795009; border-color: #ca922e; }
[data-theme="light"] .app-glass .pwWrap .pwStatus.pw-revision { background: #eadbf8; color: #623985; border-color: #a477c6; }
[data-theme="light"] .app-glass .pwWrap .pwStatus.pw-canceled,
[data-theme="light"] .app-glass .pwWrap .pwStatus.pw-missed { background: #ffe1dc; color: #8b292a; border-color: #d87072; }

.glassPreviewBanner { position: fixed; z-index: 10020; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 8px 17px; border: 1px solid #d5e9c956; border-radius: 20px; background: #112b23ed; color: #deebd5; font: 11px system-ui,sans-serif; white-space: nowrap; box-shadow: 0 5px 20px #0002; }
@media (max-width: 1100px) { .app-glass .topLeft::after { display: none; } .app-glass .glassOverview { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) {
  .app-glass .wrap { padding: 0; gap: 0; }
  .app-glass .main { border-radius: 0; }
  .app-glass .sidebar { position: fixed; top: 0; bottom: 0; left: 0; height: 100dvh; max-height: none; transform: translateX(-120%); background: rgba(23,48,35,.96); }
  .app-glass .sidebar.open { transform: translateX(0); width: min(280px,calc(100vw - 30px)); }
  .app-glass .mainDashSectionGrid.projects { grid-template-columns: 1fr; }
  .app-glass .glassWelcome { align-items: flex-start; }
  .app-glass .glassDate { font-size: 10px; padding: 8px 10px; }
}
@media (max-width: 600px) {
  .app-glass .content { padding: 16px 12px 55px; }
  .app-glass .topbar { min-height: 58px; padding: 10px 14px; }
  .app-glass .glassWelcome { flex-direction: column; gap: 14px; }
  .app-glass .glassWelcome h1 { font-size: 28px; }
  .app-glass .glassWelcome p { font-size: 12px; }
  .app-glass .glassQuickNav { display: flex; margin: 18px 0; border-radius: 17px; }
  .app-glass .glassQuickNav a { padding: 8px 10px; font-size: 11px; }
  .app-glass .glassOverview { gap: 10px; margin-bottom: 22px; }
  .app-glass .glassMetric { padding: 15px 12px; border-radius: 18px; }
  .app-glass .glassMetricTop { gap: 6px; }
  .app-glass .glassMetricLabel { font-size: 11px; }
  .app-glass .glassMetricIcon { width: 26px; height: 26px; flex-shrink: 0; }
  .app-glass .glassMetric strong { font-size: 30px; }
  .app-glass .mainDashCard.cardPad { padding: 18px 14px; }
  .app-glass .glassStageChart { gap: 10px; }
  .app-glass .mainDashSectionGrid.callCenter { grid-template-columns: minmax(0,1fr); }
  .glassPreviewBanner { max-width: calc(100vw - 24px); white-space: normal; text-align: center; width: max-content; }
}
@media (prefers-reduced-motion: reduce) { .app-glass *, .app-glass *::before, .app-glass *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }