/* Dark mode (default) */
:root{
  --bg:#0f172a; /* slate-900 */
  --card:#111827; /* gray-900 */
  --muted:#94a3b8; /* slate-400 */
  --text:#e2e8f0; /* slate-200 */
  --accent:#22d3ee; /* cyan-400 */
  --accent-2:#a78bfa; /* violet-400 */
  --good:#34d399; /* emerald-400 */
  --warn:#f59e0b; /* amber-500 */
  --border:#1f2937; /* gray-800 */
  --header-gradient:linear-gradient(180deg,#0b1223,transparent);
  --banner-bg:#fef3c7;
  --banner-text:#0f172a;
  --banner-border:#fde68a;
  --good-bg:#064e3b; /* emerald-900 */
  --good-border:#10b981; /* emerald-500 */
}

/* Light mode */
[data-theme="light"] {
  --bg:#ffffff;
  --card:#f9fafb; /* gray-50 */
  --muted:#6b7280; /* gray-500 */
  --text:#111827; /* gray-900 */
  --accent:#0891b2; /* cyan-600 */
  --accent-2:#7c3aed; /* violet-600 */
  --good:#059669; /* emerald-600 */
  --warn:#d97706; /* amber-600 */
  --border:#e5e7eb; /* gray-200 */
  --header-gradient:linear-gradient(180deg,#f3f4f6,transparent);
  --banner-bg:#dbeafe; /* blue-100 */
  --banner-text:#1e40af; /* blue-800 */
  --banner-border:#93c5fd; /* blue-300 */
  --good-bg:#d1fae5; /* emerald-100 */
  --good-border:#10b981; /* emerald-500 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;transition:background-color 0.3s ease,color 0.3s ease}
img{max-width:100%}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.header-container{position:relative}
.site-header{padding:15px 0;border-bottom:1px solid var(--border);background:var(--header-gradient)}
.site-header h1{margin:0;font-size:22px}
.inspiration-link{color:#10b981 !important;text-decoration:none !important;font-size:14px;font-weight:300;margin-left:8px;transition:color 0.2s ease;vertical-align:baseline;opacity:0.9}
.inspiration-link:hover{color:#34d399 !important;text-decoration:none !important;opacity:1}
.inspiration-link:visited{color:#10b981 !important;text-decoration:none !important}
@media (max-width:768px){.inspiration-link{display:none}}
.hours-explain-link{color:#10b981 !important;text-decoration:none !important;font-size:14px;font-weight:300;margin-left:8px;transition:color 0.2s ease;vertical-align:baseline;opacity:0.9}
.hours-explain-link:hover{color:#34d399 !important;text-decoration:none !important;opacity:1}
.hours-explain-link:visited{color:#10b981 !important;text-decoration:none !important}
@media (max-width:768px){.hours-explain-link{display:none}}
.site-footer{margin:16px 0 8px 0;color:var(--muted);text-align:center}
.site-footer p{margin:0 0 10px 0;font-size:12px}
.aws-logo-container{margin-top:0;padding-bottom:16px}
.aws-logo{display:none;max-height:30px;width:auto}
[data-theme="dark"] .aws-logo-dark,:root:not([data-theme]) .aws-logo-dark{display:inline-block}
[data-theme="light"] .aws-logo-light{display:inline-block}
.aws-logo-container a{display:inline-block;opacity:0.8;transition:opacity 0.2s ease}
.aws-logo-container a:hover{opacity:1}

.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0}
.operational-subtitle{font-size:12px;color:var(--text);background:var(--good-bg);border:1px solid var(--good-border);border-radius:6px;padding:6px 10px;transition:all 0.3s ease}
.period-toggle button{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 14px;cursor:pointer;transition:all 0.2s}
.period-toggle button.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,211,238,.15)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;transition:background-color 0.3s ease,border-color 0.3s ease}
.kpi-label{color:var(--muted);font-size:13px}
.kpi-value{font-size:28px;font-weight:700;margin-top:6px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.grid .card:nth-child(-n+2){grid-column:span 1}
.grid-3-col{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;transition:background-color 0.3s ease,border-color 0.3s ease}
.card h2{margin:0 0 12px 0;font-size:16px}

table.simple{width:100%;border-collapse:collapse}
table.simple th,table.simple td{padding:8px 10px;border-bottom:1px solid var(--border)}
table.simple th{color:var(--muted);text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
table.simple td:last-child{text-align:right}

@media (max-width: 980px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr}
  .grid-3-col{grid-template-columns:1fr}
  .theme-toggle{display:none}
  .screenshot-toggle{display:none}
}
@media (max-width: 520px){
  .kpis{grid-template-columns:1fr}
}

/* Simple portrait mode optimization for 1080x1920 displays */
@media screen and (max-aspect-ratio: 10/16) and (min-width: 1000px) {
  /* Container width constraint */
  .container {
    max-width: 1000px;
  }
  
  /* KPIs in 2x2 grid */
  .kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* All sections use 2-column grids */
  .grid-3-col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Reduce spacing for better fit */
  .controls {
    margin: 15px 0;
  }
  
  .site-header {
    padding: 12px 0;
  }
  
  .site-footer {
    margin: 15px 0 10px 0;
  }
  
  /* Constrain chart heights */
  canvas {
    max-height: 380px;
  }
  
  /* Hide screenshot button in portrait mode (designed for landscape presentations) */
  .screenshot-toggle {
    display: none;
  }
}

/* Loading Modal Styles */
.loading-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.loading-modal.hidden {
  display: none;
}

.loading-content {
  text-align: center;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(34, 211, 238, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-content p {
  color: var(--text);
  font-size: 16px;
  margin: 0;
}

/* Header Controls */
.header-controls {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Screenshot Button */
.screenshot-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition: all 0.3s ease;
}

.screenshot-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.05);
}

.screenshot-btn:active {
  transform: scale(0.95);
}

.screenshot-btn.capturing {
  animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Custom Tooltips - positioned below buttons */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-wrapper::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.tooltip-wrapper:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Theme Toggle Button */
.theme-toggle button {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition: all 0.3s ease;
}

.theme-toggle button:hover {
  background: var(--accent);
  color: var(--bg);
  transform: rotate(15deg);
}

.theme-toggle .sun-icon,
.theme-toggle .moon-icon {
  display: none;
}

[data-theme="dark"] .theme-toggle .moon-icon,
:root:not([data-theme]) .theme-toggle .moon-icon {
  display: block;
}

[data-theme="light"] .theme-toggle .sun-icon {
  display: block;
}

/* Empty chart placeholder */
.empty-chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  font-size: 120px;
  opacity: 0.8;
  user-select: none;
}

/* Slightly smaller on mobile */
@media (max-width: 640px) {
  .empty-chart-placeholder {
    min-height: 180px;
    font-size: 90px;
  }
}

/* Explanation Modal Styles */
.explanation-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.explanation-modal.hidden {
  display: none;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 28px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

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

.modal-content h3 {
  margin: 0 0 20px 0;
  font-size: 24px;
  color: var(--text);
}

.modal-content h4 {
  margin: 20px 0 12px 0;
  font-size: 16px;
  color: var(--accent);
  font-weight: 600;
}

.modal-body {
  color: var(--text);
  line-height: 1.6;
}

.modal-body p {
  margin: 0 0 16px 0;
}

.modal-body ul {
  margin: 0 0 16px 0;
  padding-left: 24px;
}

.modal-body li {
  margin: 0 0 8px 0;
  color: var(--muted);
}

.modal-note {
  background: var(--good-bg);
  border: 1px solid var(--good-border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 20px !important;
  font-size: 14px;
}

.modal-note em {
  color: var(--text);
  opacity: 0.9;
}

/* Mobile adjustments for modal */
@media (max-width: 640px) {
  .modal-content {
    width: 95%;
    padding: 20px;
    max-height: 90vh;
  }
  
  .modal-content h3 {
    font-size: 20px;
  }
  
  .modal-content h4 {
    font-size: 15px;
  }
}