/* ===================================
   OpenClaw Hosting Panel - Custom Styles
   Dark/Light Mode + Professional Theme
   =================================== */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ----- Scrollbar ----- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }
* { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }

/* ----- Animations ----- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 20px rgba(99,102,241,0.3); } 50% { box-shadow: 0 0 40px rgba(99,102,241,0.6); } }
@keyframes countUp { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.fade-in { animation: fadeIn 0.5s ease-out both; }
.fade-in-down { animation: fadeInDown 0.4s ease-out both; }
.fade-in-up { animation: fadeInUp 0.5s ease-out both; }
.slide-in-right { animation: slideInRight 0.4s ease-out both; }
.anim-fade-up { animation: fadeInUp 0.7s ease-out both; }
.anim-fade-up-d1 { animation: fadeInUp 0.7s ease-out 0.1s both; }
.anim-fade-up-d2 { animation: fadeInUp 0.7s ease-out 0.2s both; }
.anim-fade-up-d3 { animation: fadeInUp 0.7s ease-out 0.3s both; }
.anim-fade-up-d4 { animation: fadeInUp 0.7s ease-out 0.4s both; }
.anim-float { animation: float 3s ease-in-out infinite; }
.anim-float-d { animation: float 3s ease-in-out 1s infinite; }
.anim-pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* ----- Flash Messages ----- */
.flash-message { animation: fadeInDown 0.4s ease-out both; transition: opacity 0.4s ease, transform 0.4s ease; }
.flash-message.dismissing { opacity: 0; transform: translateY(-16px); }

/* ----- FAQ ----- */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; }
.faq-answer.open { max-height: 600px; }
.faq-chevron { transition: transform 0.3s ease; }
.faq-chevron.open { transform: rotate(180deg); }

/* ----- Cards ----- */
.card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.dark .card-hover:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.4); }

/* ----- Gradient Text ----- */
.gradient-text { background: linear-gradient(135deg, #6366f1, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ----- Loading Skeleton ----- */
.skeleton { background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 0.5rem; }
.dark .skeleton { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%; }

/* ----- Button Loading ----- */
.btn-loading { position: relative; pointer-events: none; opacity: 0.7; }
.btn-loading::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin 0.6s linear infinite; top: 50%; left: 50%; margin-top: -9px; margin-left: -9px; }

/* ----- Mobile Menu Overlay ----- */
.mobile-menu-overlay { transition: opacity 0.3s ease; }
.mobile-menu-overlay.hidden { opacity: 0; pointer-events: none; }

/* ----- Theme Toggle Pill ----- */
button[role="switch"] { outline-offset: 2px; }
button[role="switch"]:focus-visible { outline: 2px solid #2563eb; }
button[role="switch"] > span { will-change: transform; }

/* ----- Dark mode base improvements ----- */
.dark body { background-color: #020617; }

/* ----- Gradient text update ----- */
.gradient-text { background: linear-gradient(135deg, #2563eb, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ----- Dashboard Modern Styles ----- */
.dash-welcome-card {
  background: radial-gradient(ellipse at top right, rgba(37,99,235,0.04), transparent 60%),
              radial-gradient(ellipse at bottom left, rgba(99,102,241,0.03), transparent 60%);
}

.dash-stat-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dash-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}
.dark .dash-stat-card:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

/* Progress bar shimmer for active services */
.dash-progress-bar {
  background: linear-gradient(90deg, #10b981, #34d399);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.dash-progress-bar.warning {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.dash-progress-bar.danger {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

/* Quick action tile hover effect */
.dash-quick-action {
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.dash-quick-action:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
.dark .dash-quick-action:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}

/* Sidebar active state enhancement */
.sidebar-link {
  transition: all 0.2s ease;
  position: relative;
}
.sidebar-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: linear-gradient(to bottom, #2563eb, #6366f1);
  border-radius: 0 3px 3px 0;
  transition: height 0.25s ease;
}
.sidebar-link.active::before {
  height: 60%;
}
.sidebar-link:hover:not(.active)::before {
  height: 30%;
}

/* ===================================
   OpenClawManage Refresh - Shared UI
   =================================== */

:root {
  --oc-ink: #111827;
  --oc-muted: #64748b;
  --oc-line: #dbe4ef;
  --oc-soft: #f6f8fb;
  --oc-panel: rgba(255, 255, 255, 0.92);
  --oc-primary: #0f62fe;
  --oc-primary-strong: #0747c9;
  --oc-cyan: #0891b2;
  --oc-emerald: #0f9f6e;
  --oc-amber: #d97706;
  --oc-rose: #e11d48;
  --oc-violet: #7c3aed;
  --oc-shadow: 0 18px 55px rgba(15, 23, 42, 0.12);
  --oc-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.dark {
  --oc-ink: #eef5ff;
  --oc-muted: #94a3b8;
  --oc-line: rgba(148, 163, 184, 0.18);
  --oc-soft: #0a1220;
  --oc-panel: rgba(15, 23, 42, 0.84);
  --oc-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
  --oc-shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.3);
}

body {
  background:
    linear-gradient(180deg, rgba(241, 245, 249, 0.72) 0%, rgba(248, 250, 252, 0.96) 42%, rgba(241, 245, 249, 0.9) 100%);
}

.dark body {
  background:
    radial-gradient(circle at 18% 8%, rgba(8, 145, 178, 0.14), transparent 28%),
    radial-gradient(circle at 85% 12%, rgba(15, 159, 110, 0.12), transparent 24%),
    linear-gradient(180deg, #07101d 0%, #0a1220 48%, #070b13 100%);
}

::selection { background: rgba(8, 145, 178, 0.22); }

a,
button,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

.oc-shell-bg {
  background:
    linear-gradient(135deg, rgba(8, 145, 178, 0.06), transparent 32%),
    linear-gradient(315deg, rgba(15, 159, 110, 0.06), transparent 30%),
    #f7f9fc;
}

.dark .oc-shell-bg {
  background:
    radial-gradient(circle at 20% 0%, rgba(8, 145, 178, 0.16), transparent 28%),
    radial-gradient(circle at 100% 10%, rgba(15, 159, 110, 0.12), transparent 24%),
    #080f1c;
}

.oc-container {
  width: min(100% - 2rem, 1180px);
  margin-inline: auto;
}

.oc-card {
  background: var(--oc-panel);
  border: 1px solid var(--oc-line);
  border-radius: 16px;
  box-shadow: var(--oc-shadow-soft);
}

.oc-card-flat {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--oc-line);
  border-radius: 16px;
}

.dark .oc-card-flat {
  background: rgba(15, 23, 42, 0.76);
}

.oc-surface {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(219, 228, 239, 0.8);
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08);
}

.dark .oc-surface {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.14);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
}

.oc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(8, 145, 178, 0.22);
  background: rgba(8, 145, 178, 0.08);
  color: #0e7490;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.55rem 0.75rem;
  text-transform: uppercase;
}

.dark .oc-kicker {
  border-color: rgba(34, 211, 238, 0.2);
  background: rgba(8, 145, 178, 0.14);
  color: #67e8f9;
}

.oc-kicker-on-dark {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cffafe !important;
}

.oc-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--oc-emerald);
  box-shadow: 0 0 0 5px rgba(15, 159, 110, 0.12);
}

.oc-gradient-text {
  background: linear-gradient(135deg, #0891b2, #0f9f6e 55%, #d97706);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.oc-section {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.oc-section-tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.oc-button,
.btn {
  align-items: center;
  border-radius: 0.75rem;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 800;
  gap: 0.5rem;
  justify-content: center;
  line-height: 1;
  min-height: 2.55rem;
  padding: 0.75rem 1rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.oc-button:hover,
.btn:hover {
  transform: translateY(-1px);
}

.oc-button-primary,
.btn-primary {
  background: linear-gradient(135deg, #0f62fe, #0891b2);
  color: #fff;
  box-shadow: 0 12px 28px rgba(15, 98, 254, 0.22);
}

.oc-button-primary:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, #0747c9, #0e7490);
  box-shadow: 0 16px 34px rgba(15, 98, 254, 0.3);
}

.oc-button-secondary {
  background: #111827;
  color: #fff;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.18);
}

.dark .oc-button-secondary {
  background: #f8fafc;
  color: #0f172a;
}

.oc-button-ghost,
.btn-ghost {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--oc-line);
  color: var(--oc-ink);
}

.dark .oc-button-ghost,
.dark .btn-ghost {
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
}

.btn-sm {
  min-height: 2.25rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.8125rem;
}

.btn-xs {
  min-height: 1.85rem;
  padding: 0.42rem 0.62rem;
  border-radius: 0.58rem;
  font-size: 0.75rem;
}

.badge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 0.32rem;
  line-height: 1;
  padding: 0.35rem 0.58rem;
  white-space: nowrap;
}

.badge-sm { font-size: 0.68rem; padding: 0.3rem 0.52rem; }
.badge-xs { font-size: 0.62rem; padding: 0.24rem 0.44rem; }
.badge-ghost { background: rgba(100, 116, 139, 0.11); color: #475569; }
.dark .badge-ghost { background: rgba(148, 163, 184, 0.13); color: #cbd5e1; }
.badge-outline { border: 1px solid currentColor; background: transparent; }
.badge-success { background: rgba(15, 159, 110, 0.13); color: #047857; }
.badge-warning { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.badge-error { background: rgba(225, 29, 72, 0.12); color: #be123c; }
.badge-info { background: rgba(8, 145, 178, 0.13); color: #0e7490; }
.dark .badge-success { color: #6ee7b7; }
.dark .badge-warning { color: #fbbf24; }
.dark .badge-error { color: #fb7185; }
.dark .badge-info { color: #67e8f9; }

.text-success { color: var(--oc-emerald) !important; }
.text-warning { color: var(--oc-amber) !important; }
.text-error { color: var(--oc-rose) !important; }
.text-info { color: var(--oc-cyan) !important; }
.bg-success { background-color: var(--oc-emerald) !important; }
.bg-warning { background-color: var(--oc-amber) !important; }
.bg-error { background-color: var(--oc-rose) !important; }
.bg-info { background-color: var(--oc-cyan) !important; }

.table {
  border-collapse: separate;
  border-spacing: 0;
}

.table th {
  background: rgba(248, 250, 252, 0.82);
  color: #64748b;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dark .table th {
  background: rgba(15, 23, 42, 0.88);
  color: #94a3b8;
}

.table-sm th,
.table-sm td {
  padding-block: 0.75rem;
}

input,
textarea,
select {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.16);
}

.auth-shell {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5.5rem) 1rem;
}

.auth-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(8, 145, 178, 0.1), transparent 30%),
    linear-gradient(315deg, rgba(15, 159, 110, 0.12), transparent 34%);
  pointer-events: none;
}

.auth-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(219, 228, 239, 0.9);
  border-radius: 1.25rem;
  box-shadow: var(--oc-shadow);
  overflow: hidden;
}

.dark .auth-card {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.16);
}

.auth-panel {
  background:
    linear-gradient(135deg, rgba(8, 145, 178, 0.96), rgba(15, 98, 254, 0.88)),
    #0f62fe;
}

.oc-hero-scene {
  background:
    radial-gradient(circle at 16% 20%, rgba(14, 165, 233, 0.3), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(16, 185, 129, 0.22), transparent 23%),
    linear-gradient(135deg, #07101d 0%, #122134 52%, #08131f 100%);
}

.oc-hero-mesh {
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.86), rgba(0,0,0,0.22));
}

.oc-product-frame {
  background: rgba(7, 16, 29, 0.72);
  border: 1px solid rgba(226, 232, 240, 0.12);
  border-radius: 1.35rem;
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.36);
}

.oc-metric-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.95rem;
}

.oc-channel-pill {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem;
}

.oc-reveal {
  animation: fadeInUp 0.65s ease-out both;
}

.oc-reveal-d1 { animation-delay: 0.08s; }
.oc-reveal-d2 { animation-delay: 0.16s; }
.oc-reveal-d3 { animation-delay: 0.24s; }

.admin-shell main,
.customer-shell main {
  background:
    linear-gradient(135deg, rgba(8, 145, 178, 0.055), transparent 34%),
    linear-gradient(315deg, rgba(15, 159, 110, 0.05), transparent 32%);
}

.admin-topbar,
.customer-topbar {
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(219, 228, 239, 0.78);
}

.dark .admin-topbar,
.dark .customer-topbar {
  background: rgba(8, 15, 28, 0.82);
  border-bottom-color: rgba(148, 163, 184, 0.14);
}

#sidebar,
#admin-sidebar {
  box-shadow: 18px 0 55px rgba(0, 0, 0, 0.2);
}

#sidebar nav a,
#admin-sidebar nav a {
  position: relative;
}

#sidebar nav a:hover,
#admin-sidebar nav a:hover {
  transform: translateX(2px);
}

@media (max-width: 640px) {
  .oc-button,
  .btn {
    white-space: normal;
  }

  .oc-section {
    padding-block: 3.5rem;
  }
}