/* Pastel Coco Theme */
html[data-theme="pastel-coco"] {
  /* Core palette */
  --bg: linear-gradient(180deg, #eaf7ff 0%, #dff3e6 60%, #d2f0da 100%);
  --bg-alt: #e6f4eb;
  --bg-legacy: linear-gradient(180deg, #eaf7ff 0%, #dff3e6 60%, #d2f0da 100%);

  --surface: #fbfffd;
  --surface-soft: #f3fcf6;
  --surface-subtle: #eaf7ef;
  --surface-2: #f1fbf4;

  --text: #404a66;
  --muted: #6f7e9d;
  --accent: #6fa5ff;
  --accent-soft: #9fc4ff;
  --accent-strong: #3d78e3;

  --good: #2db074;
  --ok: #2db074;
  --warn: #d4962b;
  --danger: #d55e7d;
  --bad: #d55e7d;
  --danger-soft: rgba(213, 94, 125, 0.14);

  --border-subtle: #6f9de8;
  --border: #6f9de8;
  --card-border-strong: #6f9de8;
  --chip-bg: rgba(248, 255, 251, 0.9);
  --panel: #fbfffd;
  --panel-bg: color-mix(in oklab, var(--surface) 86%, #eaf8ef 14%);
  --panel-bg-soft: color-mix(in oklab, var(--surface-soft) 84%, #e3f5e9 16%);
  --panel-border: #6f9de8;
  --panel-border-strong: #6f9de8;
  --panel-glow: rgba(111, 165, 255, 0.32);
  --panel-glow-strong: rgba(111, 165, 255, 0.46);
  --field: #fafffc;
  --focus: #5f91e8;
  --focus-ring: rgba(95, 145, 232, 0.26);
  --sel-border: #89afe9;
  --sel-glow: rgba(111, 165, 255, 0.26);

  --hero-glow-1: rgba(255, 255, 255, 0.72);
  --hero-glow-2: rgba(164, 227, 199, 0.38);
  --shadow-soft: 0 8px 20px rgba(64, 74, 102, 0.15);
  --shadow: 0 6px 16px rgba(64, 74, 102, 0.13);

  /* Limits aligned with existing production themes */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 16px;
  --radius: 12px;
  --rad-lg: 16px;
  --rad-md: 12px;
  --rad-sm: 8px;
  --rad-pill: 16px;

  /* Compatibility aliases */
  --font-body: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif;
  --font-sans: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif;
  --font-mono: Consolas, "SFMono-Regular", Menlo, "Courier New", monospace;
  --ui-font: var(--font-body);
  --log-normal: #2f3a57;
  --log-warning: #bf8d2d;
  --log-error: #c84f71;

  --icon-gap: 18px;
  --icon-size: 110px;
  --sidebar-width: 260px;

  /* Style helpers */
  --coco-btn-border: #79cfa9;
}

html[data-theme="pastel-coco"] body {
  background: var(--bg) !important;
  background-image: var(--bg) !important;
}

/* Portal layout: greenish menu/topbar hue + blue line system */
html[data-theme="pastel-coco"] .portal-topbar,
html[data-theme="pastel-coco"] .app .sidebar {
  background: linear-gradient(180deg, #f6fdf7 0%, #e9f7ee 100%) !important;
}

html[data-theme="pastel-coco"] .app .main,
html[data-theme="pastel-coco"] .app .frame-wrap {
  background: var(--surface);
}

html[data-theme="pastel-coco"] .portal-topbar,
html[data-theme="pastel-coco"] .app .sidebar,
html[data-theme="pastel-coco"] .theme-picker,
html[data-theme="pastel-coco"] .mode-picker,
html[data-theme="pastel-coco"] .side-footer,
html[data-theme="pastel-coco"] .frame-wrap,
html[data-theme="pastel-coco"] .menu-toggle,
html[data-theme="pastel-coco"] .app.menu-collapsed .menu-toggle,
html[data-theme="pastel-coco"] .frame-wrap.double #dashboardFrame {
  border-color: var(--card-border-strong) !important;
}

html[data-theme="pastel-coco"] .portal-topbar,
html[data-theme="pastel-coco"] .app .sidebar {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--card-border-strong) 82%, #ffffff 18%) !important;
}

/* Force gradient shell background on app panels like Files */
html[data-theme="pastel-coco"] .explorer,
html[data-theme="pastel-coco"] .page {
  background: var(--bg) !important;
  background-image: var(--bg) !important;
}

/* Console page: use coco gradient as the visible background layer */
html[data-theme="pastel-coco"] .shell.card.console {
  background: var(--bg) !important;
  background-image: var(--bg) !important;
}

html[data-theme="pastel-coco"] .console-body {
  background: transparent !important;
}

/* Console run button: match pastel-coco list button style */
html[data-theme="pastel-coco"] .console-form .btn {
  border-color: var(--coco-btn-border);
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 22%,
    #f5fffb 34%,
    #dcf8ea 40%,
    #aee8cc 68%,
    #8fdcbc 100%
  );
  color: #2f5f4a;
  box-shadow: none;
}

html[data-theme="pastel-coco"] .console-form .btn:hover:not(:disabled) {
  border-color: #84d8b0;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 20%,
    #f8fffc 32%,
    #e9fff4 40%,
    #bff0d8 100%
  );
  color: #2f5f4a;
  box-shadow: none;
}

html[data-theme="pastel-coco"] .console-form .btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

html[data-theme="pastel-coco"] .console-form .btn:disabled {
  box-shadow: none;
}

html[data-theme="pastel-coco"] .hero-panel,
html[data-theme="pastel-coco"] .feature-card,
html[data-theme="pastel-coco"] .plan,
html[data-theme="pastel-coco"] .card {
  border: 3px solid var(--card-border-strong);
  background: var(--panel-bg);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.64),
    var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

html[data-theme="pastel-coco"] .panel-header {
  background: linear-gradient(180deg, #eef6ff 0%, #9fc4ff 45%, #3d78e3 100%);
  color: #ffffff;
}

/* Index desktop windows: use original coco blue titlebar shade */
html[data-theme="pastel-coco"] .desktop .window .titlebar {
  background: linear-gradient(180deg, #eef6ff 0%, #9fc4ff 45%, #3d78e3 100%) !important;
  border-bottom: 1px solid #6f9de8;
}

html[data-theme="pastel-coco"] .desktop .window .titlebar .title {
  color: #ffffff;
}

/* Metrics graphs */
html[data-theme="pastel-coco"] .explorer .chart-wrap,
html[data-theme="pastel-coco"] .explorer .mini-chart {
  background: #000;
}

/* Metrics: keep status/uptime readable on blue pathbar */
html[data-theme="pastel-coco"] .explorer .pathbar .status-pill,
html[data-theme="pastel-coco"] .explorer .pathbar .status-pill #statusLabel,
html[data-theme="pastel-coco"] .explorer .pathbar .uptime-pill,
html[data-theme="pastel-coco"] .explorer .pathbar .uptime-pill strong {
  color: #1f2a3d !important;
}

/* Blue top bars for metrics/files/backups/server settings/minecraft settings/permissions */
html[data-theme="pastel-coco"] .explorer .card.pathbar,
html[data-theme="pastel-coco"] .page .server-header,
html[data-theme="pastel-coco"] .page .shell > section.card:first-child {
  background: linear-gradient(180deg, #eef6ff 0%, #9fc4ff 45%, #3d78e3 100%) !important;
  border-color: #6f9de8 !important;
  color: #f6faff;
}

html[data-theme="pastel-coco"] .explorer .card.pathbar strong,
html[data-theme="pastel-coco"] .page .server-header .server-name,
html[data-theme="pastel-coco"] .page .shell > section.card:first-child .title {
  color: #ffffff !important;
}

html[data-theme="pastel-coco"] .page .server-header .server-id,
html[data-theme="pastel-coco"] .page .shell > section.card:first-child .subtitle {
  color: rgba(241, 247, 255, 0.9) !important;
}

html[data-theme="pastel-coco"] .explorer .card.pathbar .badge-soft,
html[data-theme="pastel-coco"] .page .server-header .badge-soft,
html[data-theme="pastel-coco"] .page .shell > section.card:first-child .server-chip {
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

html[data-theme="pastel-coco"] .btn-primary,
html[data-theme="pastel-coco"] .power-btn {
  border-color: var(--coco-btn-border);
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 22%,
    #f5fffb 34%,
    #dcf8ea 40%,
    #aee8cc 68%,
    #8fdcbc 100%
  );
  color: #2f5f4a;
  box-shadow:
    0 4px 10px rgba(64, 74, 102, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-theme="pastel-coco"] .btn-primary:hover:not(:disabled),
html[data-theme="pastel-coco"] .power-btn:hover:not(:disabled) {
  border-color: #84d8b0;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 20%,
    #f8fffc 32%,
    #e9fff4 40%,
    #bff0d8 100%
  );
  box-shadow:
    0 7px 16px rgba(64, 74, 102, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="pastel-coco"] .btn-ghost {
  border-color: #a7c3f1;
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}

html[data-theme="pastel-coco"] .btn-ghost:hover:not(:disabled) {
  border-color: var(--card-border-strong);
  box-shadow: 0 7px 16px rgba(64, 74, 102, 0.17);
}

/* Left bars: keep them flat (no glow/drop shadows) */
html[data-theme="pastel-coco"] .app .sidebar,
html[data-theme="pastel-coco"] .app .sidebar .server-btn,
html[data-theme="pastel-coco"] .app .sidebar .server-btn:hover:not(:disabled),
html[data-theme="pastel-coco"] .app .sidebar .server-btn.active,
html[data-theme="pastel-coco"] .app .sidebar .panel-glyph,
html[data-theme="pastel-coco"] .explorer .backups-index,
html[data-theme="pastel-coco"] .explorer .settings-index,
html[data-theme="pastel-coco"] .explorer .backups-index .index-item,
html[data-theme="pastel-coco"] .explorer .settings-index .index-item,
html[data-theme="pastel-coco"] .explorer .backups-index .index-item:hover:not(:disabled),
html[data-theme="pastel-coco"] .explorer .settings-index .index-item:hover:not(:disabled),
html[data-theme="pastel-coco"] .explorer .backups-index .index-item.active,
html[data-theme="pastel-coco"] .explorer .settings-index .index-item.active {
  box-shadow: none;
}

/* Left bar controls: match Add button look, but keep them flat */
html[data-theme="pastel-coco"] .app .sidebar .server-btn,
html[data-theme="pastel-coco"] .explorer .backups-index .index-item,
html[data-theme="pastel-coco"] .explorer .settings-index .index-item {
  border-color: var(--coco-btn-border);
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 22%,
    #f5fffb 34%,
    #dcf8ea 40%,
    #aee8cc 68%,
    #8fdcbc 100%
  );
  color: #2f5f4a;
}

html[data-theme="pastel-coco"] .app .sidebar .server-btn:hover:not(:disabled),
html[data-theme="pastel-coco"] .app .sidebar .server-btn.active,
html[data-theme="pastel-coco"] .explorer .backups-index .index-item:hover:not(:disabled),
html[data-theme="pastel-coco"] .explorer .backups-index .index-item.active,
html[data-theme="pastel-coco"] .explorer .settings-index .index-item:hover:not(:disabled),
html[data-theme="pastel-coco"] .explorer .settings-index .index-item.active {
  border-color: #84d8b0;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 20%,
    #f8fffc 32%,
    #e9fff4 40%,
    #bff0d8 100%
  );
  color: #2f5f4a;
}

/* Inputs/dropdowns: add clear blue outline treatment */
html[data-theme="pastel-coco"] select,
html[data-theme="pastel-coco"] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
html[data-theme="pastel-coco"] textarea,
html[data-theme="pastel-coco"] .field,
html[data-theme="pastel-coco"] .form-input,
html[data-theme="pastel-coco"] .form-select,
html[data-theme="pastel-coco"] .field-input,
html[data-theme="pastel-coco"] .field-textarea,
html[data-theme="pastel-coco"] .server-select,
html[data-theme="pastel-coco"] .theme-select,
html[data-theme="pastel-coco"] .mode-select {
  border-color: var(--card-border-strong);
  border-width: 2px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

html[data-theme="pastel-coco"] select:focus,
html[data-theme="pastel-coco"] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
html[data-theme="pastel-coco"] textarea:focus,
html[data-theme="pastel-coco"] .field:focus,
html[data-theme="pastel-coco"] .form-input:focus,
html[data-theme="pastel-coco"] .form-select:focus,
html[data-theme="pastel-coco"] .field-input:focus,
html[data-theme="pastel-coco"] .field-textarea:focus,
html[data-theme="pastel-coco"] .server-select:focus,
html[data-theme="pastel-coco"] .theme-select:focus,
html[data-theme="pastel-coco"] .mode-select:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px var(--focus-ring), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

/* Metrics pathbar readability override (must stay after generic strong white rules) */
html[data-theme="pastel-coco"] .explorer .pathbar .uptime-pill #uptime,
html[data-theme="pastel-coco"] .explorer .pathbar .status-pill #statusLabel {
  color: #1f2a3d !important;
}

/* Homepage top bar text */
html[data-theme="pastel-coco"] .site-header .brand-text-main,
html[data-theme="pastel-coco"] .site-header .brand-text-sub,
html[data-theme="pastel-coco"] .site-header .nav-link,
html[data-theme="pastel-coco"] .site-header .nav-link:hover,
html[data-theme="pastel-coco"] .site-header .nav-link:visited {
  color: #ffffff !important;
}

/* Login page compatibility: prevent global Coco button/card overrides from breaking login styles */
html[data-theme="pastel-coco"] .login-mascot + .card {
  background: linear-gradient(135deg, var(--panel), var(--panel-soft)) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

html[data-theme="pastel-coco"] .login-mascot + .card .btn-primary {
  color: #111827 !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft)) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="pastel-coco"] .login-mascot + .card .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.75) !important;
}

html[data-theme="pastel-coco"] .login-mascot + .card .btn-ghost {
  color: var(--text) !important;
  background: var(--surface-soft) !important;
  border-color: var(--border-subtle) !important;
}