/* Detail Center Styles (initial scaffold)
   Purpose: Unified modal for Hexagon / Reading / Feature detail exploration.
   Keep styles scoped with #detail-center-root to avoid leakage.
*/
/* ========================= Green System Parity Pass (2025-09-28)
   Align Detail Center with Upload/Profile/Notification visual language.
   Core Tokens (implicit):
   --rm-bg-shell: #101018
   --rm-bg-panel: #0b0b11
   --rm-bg-panel-alt: #14141d
   --rm-accent-border: #00ff88
   --rm-accent-border-alt: #35ffc9
   Blues/teals from initial scaffold replaced by green gradient + dark neutrals.
*/
#detail-center-root { position:fixed; inset:0; z-index:20000; font-family:var(--font-mono,'VT323',monospace); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 380ms cubic-bezier(.16,1,.3,1), visibility 0s linear 380ms; }
#detail-center-root.is-open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity 380ms cubic-bezier(.16,1,.3,1), visibility 0s linear 0s; }
#detail-center-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.70); backdrop-filter:blur(2px); opacity:0; transition:opacity 380ms cubic-bezier(.16,1,.3,1); }
#detail-center-root.is-open #detail-center-backdrop { opacity:1; }
#detail-center-shell { position:absolute; left:50%; top:12vh; transform:translateX(-50%) translateY(-10px) scale(.985); width:min(1180px,94vw); max-height:calc(100vh - 24vh); background:#101018; color:#e5e5e5; border:1px solid #00ff88; border-radius:20px; padding:22px 26px 18px; display:flex; flex-direction:column; box-shadow:0 0 20px -6px rgba(0,255,136,0.42),0 0 2px 1px rgba(0,255,136,0.32) inset; box-sizing:border-box; opacity:0; overflow:hidden; transition: opacity 380ms cubic-bezier(.16,1,.3,1) 120ms, transform 380ms cubic-bezier(.16,1,.3,1) 120ms; --dc-tabs-offset:56px; }

/* Safety: force visibility if open state present (debug) */
#detail-center-root.is-open #detail-center-shell { opacity:1 !important; transform:translateX(-50%) translateY(0) scale(1); }
#detail-center-shell::before { content:""; position:absolute; inset:0; padding:1px; border-radius:20px; background:linear-gradient(90deg,#00ff88,#35ffc9); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
@media (max-width:880px){ #detail-center-shell { top:8vh; max-height:calc(100vh - 16vh); width:96vw; padding:20px 20px 18px; } }
@media (max-width:560px){ #detail-center-shell { top:6vh; max-height:calc(100vh - 14vh); padding:18px 16px 18px; } }
@media (max-width:380px){ #detail-center-shell { padding:16px 12px 16px; } }

/* Header */
.dc-header { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:4px 0 10px; border-bottom:1px solid rgba(255,255,255,0.05); position:sticky; top:0; z-index:100; background:#101018; }
.dc-header-left { display:flex; flex-direction:column; gap:4px; min-width:0; }
.dc-title-line { display:flex; align-items:center; gap:10px; font-size:15px; letter-spacing:1px; font-weight:600; color:#00ff88; text-shadow:0 0 6px rgba(0,255,136,0.35); }
.dc-title-line .mdi { font-size:20px; color:#00ff88; text-shadow:0 0 4px rgba(0,255,136,0.65); }
.dc-primary-title { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#d6d6d6; }
.dc-secondary { font-size:11px; opacity:.65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#9fd; }
.dc-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.dc-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; background: rgba(var(--dark-color-rgb), 0.6); border:1px solid var(--secondary-color); color: var(--primary-color); cursor:pointer; position:relative; font-size:16px; transition: background .15s ease, border-color .15s ease, transform .15s ease; opacity:.9; }
.dc-icon-btn:hover, .dc-icon-btn:focus-visible { background: rgba(var(--dark-color-rgb), 0.8); border-color: var(--primary-color); opacity:1; transform: translateY(-1px); }
.dc-icon-btn:active { transform: translateY(0) scale(1); }
.dc-icon-btn .mdi { font-size:19px; }

/* Tabs */
.dc-tabs { display:flex; gap:8px; padding:8px 2px 4px; overflow-x:auto; overflow-y:hidden; position:sticky; top:0; z-index:90; background:linear-gradient(180deg,#101018 70%, rgba(16,16,24,0.85)); backdrop-filter:blur(2px); -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; margin-bottom:6px; border-bottom:1px solid rgba(0,255,136,0.25); flex-shrink:0; min-height:fit-content; }
.dc-tabs::-webkit-scrollbar { display:none; }
.dc-tab { background:#0b0b11; border:1px solid rgba(0,255,136,0.35); color:#cfd; padding:8px 14px; border-radius:999px; font-size:.78rem; cursor:pointer; display:inline-flex; align-items:center; gap:8px; letter-spacing:.4px; flex-shrink:0; white-space:nowrap; }
.dc-tab[aria-selected="true"], .dc-tab.active { background:#112a21; border-color:#35ffc9; color:#fff; box-shadow:0 0 10px -3px rgba(0,255,136,0.4); }
.dc-tab:focus-visible { outline:2px solid #35ffc9; outline-offset:2px; }
.dc-tab { scroll-snap-align:start; }

/* Tab scroll fade indicators */
.dc-tabs .dc-fade { position:absolute; top:0; bottom:0; width:34px; pointer-events:none; z-index:95; opacity:0; transition:opacity .25s; }
.dc-tabs .dc-fade.left { left:0; background:linear-gradient(90deg,#101018,rgba(16,16,24,0)); }
.dc-tabs .dc-fade.right { right:0; background:linear-gradient(270deg,#101018,rgba(16,16,24,0)); }
.dc-tabs[data-more-left="1"] .dc-fade.left { opacity:1; }
.dc-tabs[data-more-right="1"] .dc-fade.right { opacity:1; }

@media (max-width:720px){
   .dc-tabs { gap:6px; }
   .dc-tab { padding:8px 12px; font-size:.72rem; }
}
@media (max-width:520px){
   .dc-tab { padding:7px 11px; font-size:.7rem; }
}

/* Content */
.dc-content { flex:1; min-height:0; position:relative; display:flex; flex-direction:column; }
.dc-panels { flex:1; min-height:0; position:relative; overflow:auto; padding:0 6px 24px; scrollbar-width:thin; scrollbar-color:#00ff88 #0b0b14; display:flex; flex-direction:column; }
.dc-panels::-webkit-scrollbar { width:10px; }
.dc-panels::-webkit-scrollbar-track { background:#0b0b14; }
.dc-panels::-webkit-scrollbar-thumb { background:linear-gradient(#00ff88,#35ffc9); border-radius:12px; box-shadow:0 0 0 2px #0b0b14 inset; }
.dc-sections { flex:1; min-height:0; overflow:visible; }
.dc-panel { display:none; animation:dcFade .35s ease; min-height:100%; position:relative; z-index:1; }
.dc-panel.active { display:block; }
@keyframes dcFade { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }

/* Overview grids */
/* Overview cards */
.dc-overview-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:4px; align-items:stretch; }
.dc-card {
  background:#14141d;
  border:1px solid rgba(0,255,136,0.3);
  border-radius:14px;
  padding:18px 20px 20px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 2px 6px -2px rgba(0,0,0,0.55);
  min-height:140px;
  height:100%;
}
.dc-card h3 {
  margin:0 0 6px;
  font-size:.85rem;
  letter-spacing:.5px;
  font-weight:600;
  color:#8ff6ff;
  text-transform:uppercase;
  line-height:1.2;
}
.dc-kv { display:flex; justify-content:space-between; gap:10px; font-size:.8rem; line-height:1.3; }
.dc-kv label { opacity:.65; color:#9fd; }
.dc-kv value, .dc-value {
  font-family:monospace;
  font-weight:600;
  font-size:1.1rem;
  color:#e5e5e5;
  line-height:1.4;
}

/* Combined Dose Card - displays min/avg/max in a single card with avg prominent */
.dc-dose-card {
  background:#14141d;
  border:1px solid rgba(0,255,136,0.3);
  border-radius:14px;
  padding:18px 20px 20px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:0 2px 6px -2px rgba(0,0,0,0.55);
  min-height:140px;
  height:100%;
}
.dc-dose-card h3 {
  margin:0 0 10px;
  font-size:.85rem;
  letter-spacing:.5px;
  font-weight:600;
  color:#8ff6ff;
  text-transform:uppercase;
  align-self:flex-start;
  line-height:1.2;
}
.dc-dose-stack {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
  flex:1;
  justify-content:center;
}
.dc-dose-primary {
  font-size:2.2rem;
  font-weight:700;
  font-family:monospace;
  color:#00ff88;
  text-shadow:0 0 10px rgba(0,255,136,0.5);
  line-height:1.1;
  letter-spacing:-0.5px;
}
.dc-dose-secondary {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.75rem;
  opacity:.75;
  font-family:monospace;
  color:#9fd;
}
.dc-dose-label {
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  opacity:.65;
  margin-right:4px;
  font-weight:500;
}
.dc-dose-value {
  font-weight:600;
  font-size:.8rem;
  color:#e5e5e5;
}

/* Skeleton */
/* Skeletons (reuse shimmer hues similar to profile center) */
.dc-skel-line, .dc-skel-block { background:linear-gradient(90deg, #0f1218 25%, #151a22 37%, #0f1218 63%); background-size:400% 100%; animation:dcShimmer 1.4s ease infinite; }
.dc-skel-line { height:12px; border-radius:6px; }
.dc-skel-block { height:54px; border-radius:12px; }
@keyframes dcShimmer { 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
.dc-skel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }

/* Analytics */
/* Analytics */
.dc-analytics-wrap { display:flex; flex-direction:column; gap:12px; }
.dc-chart-controls { background:#14141d; border:1px solid rgba(0,255,136,0.3); border-radius:14px; padding:10px 14px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.dc-seg { display:inline-flex; border:1px solid rgba(0,255,136,0.35); border-radius:999px; overflow:hidden; }
.dc-seg button { background:#0b0b11; color:#cfd; border:0; padding:6px 14px; font-size:.7rem; cursor:pointer; display:flex; align-items:center; gap:6px; letter-spacing:.5px; }
.dc-seg button[aria-pressed="true"] { background:#112a21; color:#fff; box-shadow:0 0 10px -3px rgba(0,255,136,0.4); }
.dc-seg button:focus-visible { outline:2px solid #35ffc9; outline-offset:2px; }
.dc-inline-field { display:flex; flex-direction:column; gap:4px; font-size:.65rem; min-width:120px; }
.dc-inline-field select, .dc-inline-field input[type=number], .dc-inline-field input[type=range] { background:#0b0b11; border:1px solid rgba(0,255,136,0.35); color:#e5e5e5; padding:6px 8px; border-radius:10px; font-size:.7rem; }
.dc-chart-stage { position:relative; height:380px; background:#0b0b11; border:1px solid rgba(0,255,136,0.3); border-radius:16px; padding:10px; display:flex; align-items:stretch; }
.dc-chart-stage canvas { width:100% !important; height:100% !important; }
.dc-chart-empty { font-size:.75rem; opacity:.7; display:flex; align-items:center; justify-content:center; width:100%; }
@media (max-width:880px){ .dc-chart-stage { height:300px; } }

/* Data Table */
/* Data Table */
.dc-table-wrap { overflow:auto; border:1px solid rgba(0,255,136,0.3); border-radius:14px; background:#14141d; position:relative; z-index:1; margin-top:18px; }

/* Extra guaranteed buffer so panel content never visually collides with tabs */
/* Removed static small padding-top (replaced with dynamic var-based offset above) */
/* Safety: guarantee first real content sits below tabs by >=12px visually */

/* If a panel begins with a grid or table, push it further down for clarity */
.dc-panel > .dc-overview-grid:first-child,
.dc-panel > .dc-analytics-wrap:first-child,
.dc-panel > .dc-chart-stage:first-child,
.dc-panel > .dc-table-wrap:first-child { margin-top:4px; }
.dc-table { width:100%; border-collapse:collapse; font-size:.7rem; }
.dc-table th { text-align:left; background:#0b0b11; font-weight:500; padding:6px 10px; position:sticky; top:0; z-index:2; color:#cfd; }

/* Absolute safety overlay to block content from reaching tabs (debug). Removed later if not needed. */
#detail-center-shell .dc-tabs::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(0,255,136,0.2); pointer-events:none; }

/* Guard: ensure scroll area never flows over header/tabs */
#detail-center-shell::after { content:""; position:absolute; left:0; right:0; top:0; height:0; pointer-events:none; z-index:10; }
.dc-table td { padding:4px 10px; border-top:1px solid rgba(0,255,136,0.15); white-space:nowrap; }
.dc-table tbody tr:nth-child(even){ background:#112a21; }
.dc-table tbody tr:hover { background:#18313c; }

/* History sparkline enhancements */
.dc-history-head { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:.65rem; opacity:.85; }
.dc-history-spark-wrap { background:#0b0b11; border:1px solid rgba(0,255,136,0.3); border-radius:10px; padding:4px 6px 2px; flex:1; min-width:140px; position:relative; height:56px; display:flex; }
.dc-history-spark-wrap canvas { width:100% !important; height:50px !important; }

@media (max-width:880px){ .dc-history-spark-wrap { height:52px; } .dc-history-spark-wrap canvas { height:46px !important; } }
@media (max-width:560px){ .dc-history-spark-wrap { height:50px; } .dc-history-spark-wrap canvas { height:44px !important; } }

/* Comments (Feature) */
/* Comments */
.dc-comments-empty { font-size:.75rem; opacity:.7; padding:18px 6px; }
.dc-comment-list { display:flex; flex-direction:column; gap:10px; }
.dc-comment { background:#14141d; border:1px solid rgba(0,255,136,0.3); border-radius:12px; padding:10px 12px; font-size:.7rem; line-height:1.45; }
.dc-comment-head { display:flex; justify-content:space-between; font-size:.6rem; opacity:.7; margin-bottom:4px; }

/* Status / badges */
/* Badges */
.dc-badge { display:inline-flex; align-items:center; gap:4px; font-size:.55rem; padding:4px 8px; background:#112a21; border:1px solid #35ffc9; border-radius:999px; letter-spacing:.5px; color:#fff; box-shadow:0 0 0 1px rgba(53,255,201,0.3) inset, 0 0 6px -2px rgba(0,255,136,0.35); }

/* Close animation placeholder (optional future) */

/* Accessibility helpers */
/* Accessibility */
#detail-center-shell:focus { outline:none; }

@media (prefers-reduced-motion:reduce){ #detail-center-root, #detail-center-backdrop, #detail-center-shell, .dc-item { transition:none; } }

/* Mobile collapse for controls (future toggle) */

/* Note: Desktop docking feature removed to maintain consistency with other modals (profile-center, upload-center, etc.)
   All viewports now display detail-center as a centered modal with backdrop.
*/