/* Kraken Theme - Force Dark Mode Everywhere */

/*
 * Force dark theme variables on :root to override light mode defaults
 * This ensures ALL pages (login, profile, web pages) use dark mode
 */
:root {
  /* Core colors - force dark palette */
  --neutral: var(--neutral-black);
  --invert-neutral: var(--neutral-white);
  --gray-700: #383838;
  --gray-800: #232323;

  /* Type Colors */
  --text-neutral: var(--gray-50);
  --text-dark: var(--gray-900);
  --text-muted: var(--gray-400);
  --text-light: var(--gray-300);
  --text-color: var(--gray-50);
  --heading-color: var(--gray-50);

  /* SVG Colors */
  --icon-fill: transparent;
  --icon-stroke: var(--gray-300);

  /* Error colors */
  --error-bg: var(--red-800);
  --error-border: var(--red-400);

  /* Layout Colors - Force dark backgrounds */
  --bg-color: var(--gray-900);
  --fg-color: var(--gray-900);
  --subtle-accent: var(--gray-800);
  --subtle-fg: var(--gray-700);
  --fg-hover-color: var(--gray-800);
  --card-bg: var(--gray-900);
  --disabled-text-color: var(--gray-400);
  --disabled-control-bg: var(--gray-800);
  --control-bg: var(--gray-800);
  --control-bg-on-gray: var(--gray-800);
  --awesomebar-focus-bg: var(--control-bg);
  --awesomplete-hover-bg: var(--gray-800);
  --modal-bg: var(--gray-900);
  --toast-bg: var(--modal-bg);
  --popover-bg: var(--bg-color);

  /* Button Colors */
  --btn-default-bg: var(--gray-800);
  --btn-default-hover-bg: var(--gray-700);
  --btn-primary: var(--gray-300);

  /* Border Colors */
  --border-primary: var(--gray-200);

  /* Background Text Color Pairs */
  --bg-blue: var(--blue-600);
  --bg-light-blue: var(--blue-600);
  --bg-dark-blue: var(--blue-900);
  --bg-green: var(--green-900);
  --bg-yellow: var(--yellow-700);
  --bg-orange: var(--orange-700);
  --bg-red: var(--red-600);
  --bg-gray: var(--gray-600);
  --bg-grey: var(--gray-600);
  --bg-darkgrey: var(--gray-600);
  --bg-dark-gray: var(--gray-500);
  --bg-light-gray: var(--gray-800);
  --bg-purple: var(--purple-700);
  --bg-pink: var(--pink-700);
  --bg-cyan: var(--cyan-800);

  --text-on-blue: var(--blue-50);
  --text-on-light-blue: var(--blue-50);
  --text-on-dark-blue: var(--blue-300);
  --text-on-green: var(--green-100);
  --text-on-yellow: var(--yellow-50);
  --text-on-orange: var(--orange-100);
  --text-on-red: var(--red-50);
  --text-on-gray: var(--gray-50);
  --text-on-grey: var(--gray-50);
  --text-on-darkgrey: var(--gray-200);
  --text-on-dark-gray: var(--gray-200);
  --text-on-light-gray: var(--gray-100);
  --text-on-purple: var(--purple-100);
  --text-on-pink: var(--pink-100);
  --text-on-cyan: var(--cyan-100);

  /* Alert colors */
  --alert-text-danger: var(--red-300);
  --alert-text-warning: var(--yellow-300);
  --alert-text-info: var(--blue-300);
  --alert-text-success: var(--green-300);
  --alert-bg-danger: var(--red-900);
  --alert-bg-warning: var(--yellow-900);
  --alert-bg-info: var(--blue-900);
  --alert-bg-success: var(--green-900);

  --sidebar-select-color: var(--gray-800);

  --scrollbar-thumb-color: var(--gray-600);
  --scrollbar-track-color: var(--gray-700);

  --timeline-badge-color: var(--gray-500);
  --timeline-badge-bg: var(--gray-900);

  --shadow-inset: var(--fg-color);
  --border-color: var(--gray-800);
  --dark-border-color: var(--gray-600);
  --table-border-color: var(--border-color);
  --highlight-color: var(--gray-700);
  --yellow-highlight-color: var(--yellow-700);

  --btn-group-border-color: var(--gray-700);
  --placeholder-color: var(--gray-700);
  --highlight-shadow: 1px 1px 10px var(--blue-900), 0px 0px 4px var(--blue-500);
  --shadow-base: 0px 4px 8px rgba(114, 176, 233, 0.06), 0px 0px 4px rgba(112, 172, 228, 0.12);

  /* Diff colors */
  --diff-added: var(--green-800);
  --diff-removed: var(--red-800);

  /* Progress bar */
  --progress-bar-bg: var(--light);

  /* Input */
  --input-disabled-bg: none;

  /* Checkbox */
  --checkbox-color: var(--neutral-white);
  --checkbox-focus-shadow: var(--focus-default);

  /* Switch */
  --switch-bg: var(--gray-500);

  /* Date picker */
  --date-active-text: var(--gray-100);
  --date-active-bg: var(--gray-700);
  --date-range-bg: var(--subtle-fg);

  /* Skeleton */
  --skeleton-bg: var(--gray-800);

  color-scheme: dark;
}

/* Force dark background on body and html */
html, body {
  background-color: var(--gray-900) !important;
  color: var(--gray-50) !important;
}

/* Force data-theme attribute to dark */
html {
  color-scheme: dark;
}

/* Login page specific - force dark mode */
.page-container,
.main-section,
.web-footer,
body > div,
.container {
  background-color: var(--gray-900) !important;
}

/* Login card/form styling */
.login-content,
.page-card,
.page-card-body,
.page-card-head,
.page-card-actions {
  background-color: var(--gray-900) !important;
  color: var(--gray-50) !important;
}

/* Form inputs on login/web pages */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  background-color: var(--gray-800) !important;
  color: var(--gray-50) !important;
  border-color: var(--gray-700) !important;
}

.form-control::placeholder,
input::placeholder {
  color: var(--gray-500) !important;
}

/* Links */
a {
  color: var(--blue-400);
}

a:hover {
  color: var(--blue-300);
}

/* User profile page */
.user-image-wrapper,
.user-details,
.profile-info,
.user-info,
.frappe-card {
  background-color: var(--gray-900) !important;
  color: var(--gray-50) !important;
}

/* Settings pages */
.settings-page,
.system-settings,
.user-settings {
  background-color: var(--gray-900) !important;
}

/* Web pages / Portal pages */
.web-page,
.web-content,
.portal-page {
  background-color: var(--gray-900) !important;
  color: var(--gray-50) !important;
}

/* Navbar on web pages */
.navbar,
.web-navbar {
  background-color: var(--gray-900) !important;
}

/* Footer */
footer,
.web-footer,
.footer {
  background-color: var(--gray-900) !important;
  color: var(--gray-400) !important;
}

/* Modal dialogs */
.modal-content,
.modal-header,
.modal-body,
.modal-footer {
  background-color: var(--gray-900) !important;
  color: var(--gray-50) !important;
  border-color: var(--gray-700) !important;
}

/* Dropdown menus */
.dropdown-menu {
  background-color: var(--gray-900) !important;
  border-color: var(--gray-700) !important;
}

.dropdown-item {
  color: var(--gray-50) !important;
}

.dropdown-item:hover {
  background-color: var(--gray-800) !important;
}

/* Tables */
table,
.table,
.datatable {
  background-color: var(--gray-900) !important;
  color: var(--gray-50) !important;
}

th, td {
  border-color: var(--gray-800) !important;
}

/* Progress bar */
.progress {
  background-color: var(--gray-700) !important;
}

/* Sidebar */
.layout-side-section,
.sidebar {
  background-color: var(--gray-900) !important;
}

/* Quill editor */
.ql-editor {
  color: var(--gray-50) !important;
}

.ql-toolbar {
  background-color: var(--gray-800) !important;
  border-color: var(--gray-700) !important;
}

/* Hide Help dropdown in navbar */
.dropdown-help {
  display: none !important;
}

/* Workspace layout - always centered with max-width */
[data-page-route="Workspaces"] .layout-main {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

[data-page-route="Workspaces"] .page-head .container {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure text selection is visible in dark mode */
::selection {
  color: var(--gray-50);
  background: var(--gray-500);
}

/* Cards and panels */
.card,
.panel,
.frappe-card {
  background-color: var(--gray-900) !important;
  border-color: var(--gray-800) !important;
}

/* List views */
.list-row,
.list-row-container {
  background-color: var(--gray-900) !important;
}

.list-row:hover {
  background-color: var(--gray-800) !important;
}

/* Buttons - ensure visibility */
.btn-default {
  background-color: var(--gray-800) !important;
  color: var(--gray-50) !important;
  border-color: var(--gray-700) !important;
}

.btn-default:hover {
  background-color: var(--gray-700) !important;
}

.btn-primary {
  background-color: var(--gray-300) !important;
  color: var(--gray-900) !important;
}

.btn-primary:hover {
  background-color: var(--gray-200) !important;
}

/* Ensure print format stays light (for actual printing) */
@media print {
  :root {
    --bg-color: white;
    --fg-color: white;
    --text-color: black;
  }

  body {
    background-color: white !important;
    color: black !important;
  }
}