/* ORAS theme and UI enhancements */

/* CSS animations for alerts */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

html { scroll-behavior: smooth; }

/* Design tokens (light by default) */
:root {
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --bg-elev: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --disabled: #9ca3af;
  --border: #e5e7eb;
  --card: #ffffff;
  --card-border: #e5e7eb;
  --nav: rgba(255,255,255,0.95);
  --accent: #3B82F6; /* default primary */
  --accent-2: #60A5FA;
  --chart: #60A5FA;
  --success: #16a34a;
  --warning: #f59e0b;
  --error: #ef4444;
  --sidebar: #ffffff;
  --card-deep: #ffffff;
}
html.dark:root {
  /* Dark Mode Blue Palette */
  --bg: #0D1117;          /* Background (Primary) */
  --bg-soft: #0D1117;     /* Soft background for gradients */
  --bg-elev: #161B22;     /* Surface */
  --text: #C9D1D9;        /* Text (Primary) */
  --muted: #8B949E;       /* Text (Secondary) */
  --disabled: #6E7681;    /* Disabled */
  --border: #30363D;      /* Subtle border */
  --card: #1C2128;        /* Card background */
  --card-border: #30363D; /* Card border */
  --nav: rgba(22,27,34,0.95);
  --accent: #1F6FEB;      /* Accent (Primary Blue) */
  --accent-2: #58A6FF;    /* Accent (Secondary Blue) */
  --chart: #4C9EFF;       /* Chart lines */
  --success: #2EA043;     /* Feedback colors */
  --warning: #F2CC60;
  --error: #F85149;
  --sidebar: #161B22;     /* Sidebar background */
  --card-deep: #1C2128;   /* Deeper panel */
}

/* Global theming */
body { background-color: var(--bg); color: var(--text); transition: background-color .25s ease, color .25s ease; }
#navbar { background-color: var(--nav) !important; border-color: var(--border) !important; transition: background-color .25s ease, border-color .25s ease; }
.card { background-color: var(--card) !important; border: 1px solid var(--card-border) !important; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.nav-link { color: var(--muted); transition: color .2s ease; }
.nav-link.active, .nav-link:hover { color: var(--text); }
.btn-secondary { background-color: var(--bg-elev); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { filter: brightness(1.06); }

/* Primary buttons pick up accent colors */
.btn-primary { background-color: var(--accent); border: 1px solid var(--accent); color: #fff; transition: background-color .2s ease, border-color .2s ease; }
.btn-primary:hover { background-color: var(--accent-2); border-color: var(--accent-2); }
.text-primary-600, .text-primary-500 { color: var(--accent) !important; }
.bg-primary-100 { background-color: color-mix(in srgb, var(--accent) 14%, transparent) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--error) !important; }
.border-success { border-color: var(--success) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-danger { border-color: var(--error) !important; }

/* Mobile hamburger animation */
#mobileToggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#mobileToggle.active span:nth-child(2) { opacity: 0; }
#mobileToggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
#mobileToggle span { transform-origin: center; }

/* Back to top */
#backToTop { position: fixed; right: 20px; bottom: 20px; display: none; z-index: 60; }

/* Section backgrounds that use utility classes */
.bg-gradient-to-br { background-image: linear-gradient(135deg, var(--bg-soft), var(--bg)); }
.bg-gray-50 { background-color: var(--bg-soft) !important; }
.bg-white { background-color: var(--bg-elev) !important; }
.text-gray-900 { color: var(--text) !important; }
.text-gray-600 { color: var(--muted) !important; }
.border-gray-100, .border-gray-200, .border-gray-700 { border-color: var(--border) !important; }

/* Basic dark mode overrides (works without Tailwind dark: variants) */
html.dark body { background-color: #0D1117; color: #C9D1D9; }
html.dark .bg-white { background-color: #161B22 !important; }
html.dark .bg-white\/95 { background-color: rgba(22,27,34,0.95) !important; }
html.dark .bg-gray-50 { background-color: #0D1117 !important; }
html.dark .bg-gray-900 { background-color: #0D1117 !important; }
html.dark .text-gray-900 { color: #C9D1D9 !important; }
html.dark .text-gray-800 { color: #C9D1D9 !important; }
html.dark .text-gray-700 { color: #8B949E !Important; }
html.dark .text-gray-600 { color: #8B949E !important; }
html.dark .text-gray-500 { color: #8B949E !important; }
html.dark .text-gray-400 { color: #8B949E !important; }
html.dark .border-gray-100 { border-color: #30363D !important; }
html.dark .border-gray-200 { border-color: #30363D !important; }
html.dark .border-gray-700 { border-color: #30363D !important; }
html.dark #navbar { background-color: rgba(22,27,34,0.95) !important; border-color: #30363D !important; }
html.dark .card { background-color: var(--card) !important; border-color: #30363D !important; }
html.dark .btn-secondary { background-color: #161B22; color: #C9D1D9; border-color: #30363D; }
html.dark .btn-secondary:hover { background-color: #1b2230; }

/* Sidebar targets for both Tailwind and AdminLTE pages */
html.dark #sidebar, html.dark .main-sidebar { background-color: var(--sidebar) !important; border-color: #30363D !important; }
html.dark aside, html.dark .sidebar-menu>li>a { background-color: var(--sidebar) !important; color: var(--text) !important; }

/* Chart base color variable (consumed by inline charts if referenced) */
:root { --chart-color: var(--chart); }

/* Floating theme toggle button (works across Tailwind/AdminLTE pages) */
.oras-theme-btn { position: fixed; top: 10px; right: 12px; z-index: 9999; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); padding: 6px 10px; border-radius: 8px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.oras-theme-btn:hover { filter: brightness(1.06); }