/* =====================================================================
 * Skeyenote — Modern UI Theme (design tokens + components)
 * ---------------------------------------------------------------------
 * A lightweight, antd-inspired design layer on top of Bootstrap 3.
 * Goal: modern + minimalist look using the Skeyenote brand palettes,
 * Venera (display) + Poppins (UI/text) fonts.
 *
 * This file is intentionally loaded LAST so it can override Bootstrap
 * and legacy component styles without touching their source.
 *
 * Sections:
 *   1. Design tokens (color scales, semantic colors, radius, shadow…)
 *   2. Dark-mode token overrides
 *   3. Base / typography
 *   4. Buttons
 *   5. Form controls (inputs, selects, textareas)
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. DESIGN TOKENS
 * ------------------------------------------------------------------- */
:root {
  /* Brand palette — BLUE */
  --blue-900: #0d2e4d;
  --blue-600: #49627a;
  --blue-400: #8697a6;
  --blue-200: #c2cbd2;
  --blue-100: #e6eaed;

  /* Brand palette — ORANGE */
  --orange-600: #d97a07;
  --orange-400: #e29b45;
  --orange-300: #ecbd83;
  --orange-200: #f5dec1;
  --orange-100: #fbf1e6;

  /* Brand palette — GREEN */
  --green-700: #2b751d;
  --green-500: #609856;
  --green-400: #95ba8e;
  --green-200: #cadcc6;
  --green-100: #e9f1e8;

  /* Brand palette — RED */
  --red-700: #a71e27;
  --red-500: #bd565d;
  --red-400: #d38f93;
  --red-200: #e9c7c9;
  --red-100: #f6e8e9;

  /* Neutrals */
  --white: #ffffff;
  --gray-50: #f7f9fa;
  --gray-100: #eef1f4;
  --gray-200: #e2e7ec;
  --gray-300: #cdd5dd;
  --gray-400: #aab4be;
  --gray-500: #7a8794;
  --gray-700: #4a5560;
  --gray-900: #1d2730;

  /* Semantic colors */
  --color-primary: var(--blue-900);
  --color-primary-hover: var(--blue-600);
  --color-primary-active: #082136;
  --color-primary-soft: var(--blue-100);

  --color-success: var(--green-700);
  --color-success-hover: var(--green-500);
  --color-success-soft: var(--green-100);

  --color-warning: var(--orange-600);
  --color-warning-hover: var(--orange-400);
  --color-warning-soft: var(--orange-100);

  --color-danger: var(--red-700);
  --color-danger-hover: var(--red-500);
  --color-danger-soft: var(--red-100);

  --color-info: var(--blue-600);
  --color-info-hover: var(--blue-400);

  /* Surfaces & text */
  --bg-body: var(--gray-50);
  --bg-surface: var(--white);
  --bg-subtle: var(--gray-100);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-on-accent: #ffffff;
  --border-color: var(--gray-200);
  --border-strong: var(--gray-300);

  /* Shape & motion */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(13, 46, 77, 0.04);
  --shadow-sm:
    0 1px 3px rgba(13, 46, 77, 0.08), 0 1px 2px rgba(13, 46, 77, 0.04);
  --shadow-md: 0 4px 12px rgba(13, 46, 77, 0.1);
  --shadow-lg: 0 12px 32px rgba(13, 46, 77, 0.14);

  --focus-ring: 0 0 0 3px rgba(73, 98, 122, 0.25);

  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-display: "Venera-500", "Poppins", sans-serif;
  --font-ui: "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

/* ---------------------------------------------------------------------
 * 2. DARK MODE TOKEN OVERRIDES
 * ------------------------------------------------------------------- */
body.dark-mode {
  --color-primary: var(--blue-600);
  --color-primary-hover: var(--blue-400);
  --color-primary-active: var(--blue-900);
  --color-primary-soft: rgba(73, 98, 122, 0.18);

  --color-success-soft: rgba(96, 152, 86, 0.18);
  --color-warning-soft: rgba(226, 155, 69, 0.18);
  --color-danger-soft: rgba(189, 86, 93, 0.18);

  --bg-body: #121212;
  --bg-surface: #1e1e1e;
  --bg-subtle: #2d2d2d;
  --text-primary: #e6e6e6;
  --text-secondary: #9aa4ad;
  --border-color: #333333;
  --border-strong: #444444;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --focus-ring: 0 0 0 3px rgba(134, 151, 166, 0.3);
}

/* ---------------------------------------------------------------------
 * 3. BASE / TYPOGRAPHY
 * ------------------------------------------------------------------- */
body {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* Venera is reserved for large display/hero text only — opt in explicitly */
.font-display,
.display-title {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------
 * 4. BUTTONS — antd-inspired, minimal
 * ------------------------------------------------------------------- */
.btn {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 7px 16px;
  box-shadow: var(--shadow-xs);
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
  outline: none;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn.disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

/* Sizes */
.btn-lg {
  font-size: 15px;
  padding: 10px 20px;
  border-radius: var(--radius-lg);
}
.btn-sm {
  font-size: 12px;
  padding: 5px 12px;
}
.btn-xs {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
}

/* Default / neutral — outlined */
.btn-default {
  background-color: var(--bg-surface);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.btn-default:hover,
.btn-default:focus {
  background-color: var(--bg-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-color: var(--bg-subtle);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Primary — solid brand blue */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-on-accent);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--text-on-accent);
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
  color: var(--text-on-accent);
}

/* Info — secondary blue */
.btn-info {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: var(--text-on-accent);
}
.btn-info:hover,
.btn-info:focus {
  background-color: var(--color-info-hover);
  border-color: var(--color-info-hover);
  color: var(--text-on-accent);
}
.btn-info:active,
.btn-info.active {
  background-color: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--text-on-accent);
}

/* Success — green */
.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--text-on-accent);
}
.btn-success:hover,
.btn-success:focus {
  background-color: var(--color-success-hover);
  border-color: var(--color-success-hover);
  color: var(--text-on-accent);
}
.btn-success:active,
.btn-success.active {
  background-color: var(--green-700);
  border-color: var(--green-700);
  color: var(--text-on-accent);
}

/* Warning — orange */
.btn-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--text-on-accent);
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--color-warning-hover);
  border-color: var(--color-warning-hover);
  color: var(--text-on-accent);
}
.btn-warning:active,
.btn-warning.active {
  background-color: var(--orange-600);
  border-color: var(--orange-600);
  color: var(--text-on-accent);
}

/* Danger — red */
.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--text-on-accent);
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: var(--text-on-accent);
}
.btn-danger:active,
.btn-danger.active {
  background-color: var(--red-700);
  border-color: var(--red-700);
  color: var(--text-on-accent);
}

/* Link button */
.btn-link {
  color: var(--color-primary);
  box-shadow: none;
}
.btn-link:hover,
.btn-link:focus {
  color: var(--color-primary-hover);
  text-decoration: none;
}

/* Button groups: keep radius tidy */
.btn-group > .btn:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ---------------------------------------------------------------------
 * 5. FORM CONTROLS
 * ------------------------------------------------------------------- */
.form-control {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background-color var(--transition);
}
.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  background-color: var(--bg-surface);
}
.form-control::placeholder {
  color: var(--text-secondary);
}
.form-control[disabled],
.form-control[readonly] {
  background-color: var(--bg-subtle);
  color: var(--text-secondary);
}

textarea.form-control {
  border-radius: var(--radius-md);
}

/* Dark-mode form controls (override legacy hardcoded rules) */
body.dark-mode .form-control {
  background-color: var(--bg-subtle) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
body.dark-mode .form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: var(--focus-ring) !important;
}

/* Dark-mode default buttons (override legacy hardcoded rules) */
body.dark-mode .btn-default {
  background-color: var(--bg-subtle) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
body.dark-mode .btn-default:hover,
body.dark-mode .btn-default:focus {
  border-color: var(--color-primary) !important;
  color: var(--blue-200) !important;
}

/* ---------------------------------------------------------------------
 * 6. CARDS / PANELS / WELLS
 * ------------------------------------------------------------------- */
.panel,
.box,
.well {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.panel {
  margin-bottom: 20px;
}
.well {
  box-shadow: none;
  background-color: var(--bg-subtle);
}

.panel-heading {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text-primary);
  padding: 14px 18px;
}
.panel-title {
  font-size: 15px;
  font-weight: 600;
}
.panel-body {
  padding: 18px;
  color: var(--text-primary);
}
.panel-footer {
  background-color: var(--bg-subtle);
  border-top: 1px solid var(--border-color);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

/* Subtle lift on interactive cards */
.panel.panel-hover:hover,
.box.box-hover:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

body.dark-mode .panel,
body.dark-mode .box {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
}
body.dark-mode .panel-heading,
body.dark-mode .panel-footer,
body.dark-mode .well {
  background-color: var(--bg-subtle) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
body.dark-mode .panel-body {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

/* ---------------------------------------------------------------------
 * 7. MODALS / WINDOWS
 * ------------------------------------------------------------------- */
/* Blurred, dimmed backdrop */
.modal-backdrop,
.modal-backdrop.in {
  background-color: rgba(13, 46, 77, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 1;
}
body.dark-mode .modal-backdrop,
body.dark-mode .modal-backdrop.in {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Surface */
.modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background-color: var(--bg-surface);
  overflow: hidden;
}
.modal-dialog {
  margin-top: 8vh;
}

/* Smooth scale + fade entrance (replaces default slide) */
.modal.fade .modal-dialog {
  transform: scale(0.96);
  opacity: 0;
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.22s ease;
}
.modal.in .modal-dialog {
  transform: scale(1);
  opacity: 1;
}

/* Header — sticky, generous padding */
.modal-header {
  position: relative;
  border-bottom: 1px solid var(--border-color);
  padding: 20px 24px;
}
.modal-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  color: var(--text-primary);
}

/* Body — scrolls when tall */
.modal-body {
  padding: 24px;
  color: var(--text-primary);
  max-height: 70vh;
  overflow-y: auto;
}

/* Footer — actions aligned right with spacing */
.modal-footer {
  border-top: 1px solid var(--border-color);
  padding: 16px 24px;
  text-align: right;
}
.modal-footer .btn + .btn {
  margin-left: 10px;
}

/* Circular close button, top-right */
.modal-header .close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  opacity: 1;
  text-shadow: none;
  margin: 0;
  transition:
    background-color var(--transition),
    color var(--transition);
}
.modal-header .close:hover,
.modal-header .close:focus {
  background: var(--border-color);
  color: var(--text-primary);
  opacity: 1;
}

body.dark-mode .modal-content {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: var(--border-color) !important;
}
body.dark-mode .modal-header .close {
  background: var(--bg-subtle);
}

/* Import Note modal: wider so the two import options sit side-by-side */
#noteImportModal .modal-dialog {
  width: 720px;
  max-width: 95%;
}
#noteImportModal .import-btn-image-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}
#noteImportModal .import-btn-image {
  display: block;
  margin-left: 0;
}
#noteImportModal .import-btn-image a {
  float: none;
  margin: 0;
}

body.dark-mode .modal-header-import,
body.dark-mode .modal-header-note-name {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .modal-body-import .import-btn-image a {
  background: var(--bg-subtle) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

body.dark-mode .modal-body-import .import-btn-image a:hover {
  background: var(--color-primary-soft) !important;
}

body.dark-mode .modal-body-import .modal-body-import-desc {
  color: var(--text-primary) !important;
}

/* ---------------------------------------------------------------------
 * 8. DROPDOWN MENUS
 * ------------------------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  background-color: var(--bg-surface);
  font-family: var(--font-ui);
}
.dropdown-menu > li > a {
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 13px;
  color: var(--text-primary);
  transition:
    background-color var(--transition),
    color var(--transition);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background-color: var(--color-primary);
  color: var(--text-on-accent);
}
.dropdown-menu .divider {
  margin: 6px 0;
  background-color: var(--border-color);
}

body.dark-mode .dropdown-menu {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
}
body.dark-mode .dropdown-menu > li > a {
  color: var(--text-primary) !important;
}
body.dark-mode .dropdown-menu > li > a:hover,
body.dark-mode .dropdown-menu > li > a:focus {
  background-color: var(--color-primary-soft) !important;
  color: var(--blue-200) !important;
}

/* ---------------------------------------------------------------------
 * 9. TABLES
 * ------------------------------------------------------------------- */
.table {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-primary);
}
.table > thead > tr > th {
  border-bottom: 1px solid var(--border-strong);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 12px 14px;
}
.table > tbody > tr > td {
  border-top: 1px solid var(--border-color);
  padding: 12px 14px;
  vertical-align: middle;
}
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: var(--bg-subtle);
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--bg-subtle);
}

body.dark-mode .table {
  color: var(--text-primary) !important;
}
body.dark-mode .table > thead > tr > th {
  color: var(--text-secondary) !important;
}
body.dark-mode .table > thead > tr > th,
body.dark-mode .table > tbody > tr > td {
  border-color: var(--border-color) !important;
}
ody.dark-mode .table-hover > tbody > tr:hover,
body.dark-mode .table-hover > tbody > tr:hover > td,
body.dark-mode .table-hover > tbody > tr:hover > th,
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--bg-subtle) !important;
}

/* ---------------------------------------------------------------------
 * 10. ALERTS / TOASTS
 * ------------------------------------------------------------------- */
.alert {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 12px 16px;
}
.alert-success {
  background-color: var(--color-success-soft);
  border-color: var(--green-400);
  color: var(--green-700);
}
.alert-info {
  background-color: var(--blue-100);
  border-color: var(--blue-400);
  color: var(--blue-900);
}
.alert-warning {
  background-color: var(--color-warning-soft);
  border-color: var(--orange-300);
  color: var(--orange-600);
}
.alert-danger {
  background-color: var(--color-danger-soft);
  border-color: var(--red-400);
  color: var(--red-700);
}

/* ── Toast / ngToast ── */
.ng-toast .alert {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 16px;
  margin: 0;
  border: none;
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
  font-family: var(--font-ui, "Poppins", sans-serif);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

/* Close button */
.ng-toast .alert-dismissible {
  padding-right: 40px;
}
.ng-toast .alert-dismissible .close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  text-shadow: none;
  float: none;
}
.ng-toast .alert-dismissible .close:hover {
  opacity: 1;
}

/* Icons via pseudo-elements or add them via template */
.ng-toast .alert:before {
  font-family: "FontAwesome";
  font-size: 16px;
  flex-shrink: 0;
}
.ng-toast .alert-success:before {
  content: "\f00c"; /* fa-check */
  color: var(--green-700);
}
.ng-toast .alert-info:before {
  content: "\f05a"; /* fa-info-circle */
  color: var(--blue-600);
}
.ng-toast .alert-warning:before {
  content: "\f071"; /* fa-exclamation-triangle */
  color: var(--orange-600);
}
.ng-toast .alert-danger:before {
  content: "\f057"; /* fa-times-circle */
  color: var(--red-700);
}

/* Light mode brand colors */
.ng-toast .alert-success {
  background-color: var(--green-100, #e9f1e8);
  color: var(--green-700, #2b751d);
}
.ng-toast .alert-info {
  background-color: var(--color-primary-soft, #e6eaed);
  color: var(--color-primary, #0d2e4d);
}
.ng-toast .alert-warning {
  background-color: var(--color-warning-soft, #fbf1e6);
  color: var(--orange-600, #d97a07);
}
.ng-toast .alert-danger {
  background-color: var(--color-danger-soft, #f6e8e9);
  color: var(--red-700, #a71e27);
}

body.dark-mode .alert-success {
  color: var(--green-400) !important;
  border-color: rgba(96, 152, 86, 0.4) !important;
}
body.dark-mode .alert-info {
  color: var(--blue-200) !important;
  background-color: var(--color-primary-soft) !important;
  border-color: rgba(73, 98, 122, 0.5) !important;
}
body.dark-mode .alert-warning {
  color: var(--orange-300) !important;
  border-color: rgba(226, 155, 69, 0.4) !important;
}
body.dark-mode .alert-danger {
  color: var(--red-400) !important;
  border-color: rgba(189, 86, 93, 0.4) !important;
}

/* ---------------------------------------------------------------------
 * 11. LABELS / BADGES
 * ------------------------------------------------------------------- */
.label,
.badge {
  font-family: var(--font-ui);
  font-weight: 500;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  font-size: 11px;
}
.label-primary,
.badge {
  background-color: var(--color-primary);
}
.label-success {
  background-color: var(--color-success);
}
.label-warning {
  background-color: var(--color-warning);
}
.label-danger {
  background-color: var(--color-danger);
}
.label-info {
  background-color: var(--color-info);
}

/* ---------------------------------------------------------------------
 * 12. NAVBAR (light, minimal — keeps existing layout/dark-mode rules)
 * ------------------------------------------------------------------- */
.navbar-fixed-top {
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
}
.navbar-inverse .navbar-nav > li > a {
  color: var(--text-secondary);
  transition:
    color var(--transition),
    background-color var(--transition);
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: var(--color-primary);
  background-color: var(--color-primary-soft);
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-soft);
}
.navbar-title > span {
  color: var(--color-primary);
}
.navbar-search {
  border-radius: var(--radius-pill);
}

/* Logo: swap to white variant in dark mode (same dimensions as light) */
/* Line 845 — replace */
.navbar-logo .logo-dark {
  display: none !important;
}

/* Line 848 — replace */
body.dark-mode .navbar-logo .logo-light {
  display: none !important;
}

/* Line 851 — replace */
body.dark-mode .navbar-logo .logo-dark {
  display: inline-block !important;
}

/* Kill the focus/active outline ("weird border") when clicking the logo */
.navbar-brand,
.navbar-logo,
.navbar-brand:focus,
.navbar-brand:active,
.navbar-brand:hover,
.navbar-logo:focus,
.navbar-logo:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
.navbar-brand img,
.navbar-logo img {
  border: 0;
  outline: none;
}

body.dark-mode .navbar-fixed-top {
  background-color: var(--bg-surface) !important;
  border-bottom-color: var(--border-color) !important;
}
body.dark-mode .navbar-inverse .navbar-nav > li > a {
  color: var(--text-secondary) !important;
}
body.dark-mode .navbar-inverse .navbar-nav > li > a:hover,
body.dark-mode .navbar-inverse .navbar-nav > .active > a {
  color: var(--blue-200) !important;
  background-color: var(--color-primary-soft) !important;
}

/* ---------------------------------------------------------------------
 * 13. GLOBAL POLISH & SPACING RHYTHM
 * ------------------------------------------------------------------- */
body {
  background: var(--bg-body);
  line-height: 1.6;
  letter-spacing: 0.005em;
}

/* Comfortable vertical rhythm for headings + text */
h1,
.h1 {
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 var(--space-5);
}
h2,
.h2 {
  font-size: 24px;
  line-height: 1.3;
  margin: 0 0 var(--space-4);
}
h3,
.h3 {
  font-size: 20px;
  line-height: 1.35;
  margin: 0 0 var(--space-4);
}
h4,
.h4 {
  font-size: 17px;
  line-height: 1.4;
  margin: 0 0 var(--space-3);
}
h5,
.h5 {
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 var(--space-2);
}
p {
  margin: 0 0 var(--space-4);
}

/* Refined card surface (overrides legacy .box 1px/1px/2px + 3px radius) */
.box,
.well {
  border-width: 1px !important;
  border-style: solid;
  border-color: var(--border-color);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

/* Give the app content room to breathe on large screens */
@media (min-width: 1200px) {
  #main,
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Links */
a {
  color: var(--color-primary);
  transition: color var(--transition);
}
a:hover,
a:focus {
  color: var(--color-primary-hover);
  text-decoration: none;
}

/* Horizontal rules + selection */
hr {
  border-top: 1px solid var(--border-color);
  margin: var(--space-5) 0;
}
::selection {
  background: var(--blue-200);
  color: var(--blue-900);
}
body.dark-mode ::selection {
  background: var(--blue-600);
  color: #fff;
}

/* Modern thin scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
  background-clip: content-box;
}
body.dark-mode * {
  scrollbar-color: #444 transparent;
}
body.dark-mode *::-webkit-scrollbar-thumb {
  background: #444;
  background-clip: content-box;
}
body.dark-mode *::-webkit-scrollbar-thumb:hover {
  background: #555;
  background-clip: content-box;
}

/* Inline code */
code,
kbd,
pre {
  font-family: "Source-Code-Pro", "SFMono-Regular", Menlo, monospace;
}

/* Paragraph cards on the notebook (consistent radius/shadow) */
.paragraph-space {
  background: var(--bg-surface);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition),
    border-color var(--transition);
}
.paragraph-col .focused {
  box-shadow: var(--shadow-md);
  border-color: var(--color-info);
}

/* ---------------------------------------------------------------------
 * 13b. CODE EDITOR (ACE) — modern cell look + proper dark mode
 * ------------------------------------------------------------------- */
/* Subtle rounded "cell" feel in both modes */
#main .ace-chrome,
#main .ace_editor {
  border-radius: var(--radius-md);
}

/* Dark mode: give the editor a real dark surface.
   (Legacy CSS only recolored the text and left the background white,
    relying on a text-shadow hack — this fixes that properly.) */
body.dark-mode #main .ace-chrome,
body.dark-mode #main .ace_editor,
body.dark-mode #main .ace-chrome .ace_scroller,
body.dark-mode #main .ace-chrome .ace_content {
  background-color: #1b1b1d !important;
}
body.dark-mode #main .ace-chrome .ace_gutter {
  background: #161618 !important;
  color: #6b7178 !important;
}
body.dark-mode #main .ace-chrome .ace_gutter-active-line {
  background: #2a2a2e !important;
  color: #c2cbd2 !important;
}
body.dark-mode #main .ace-chrome .ace_marker-layer .ace_active-line {
  background: rgba(255, 255, 255, 0.04) !important;
}
body.dark-mode #main .ace-chrome .ace_marker-layer .ace_selection {
  background: #2d4a63 !important;
}
body.dark-mode #main .ace-chrome .ace_print-margin {
  background: #2a2a2e !important;
}
/* Drop the legacy white-text shadow now that the surface is dark */
body.dark-mode .ace_editor,
body.dark-mode .ace-chrome {
  text-shadow: none !important;
}

/* ---------------------------------------------------------------------
 * 14. SEARCH RESULTS PAGE
 * ------------------------------------------------------------------- */
.searchResults .search-results-wrap {
  max-width: 760px;
  margin: 32px auto;
  padding: 0 16px;
}
.search-results-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.search-results-count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  text-align: center;
}
.search-results-term {
  color: var(--color-primary);
  font-weight: 600;
}

.searchResults .search-results {
  list-style: none;
  padding: 0;
  margin: 0;
}
.search-result-item {
  margin-bottom: 8px;
}
.search-result-item > a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}
.search-result-item > a:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.search-result-item .srh-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  flex-shrink: 0;
}
.search-result-item .srh-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}
.search-result-item .srh-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-item .srh-path {
  font-size: 12px;
  color: var(--text-secondary);
}
.search-result-item .srh-go {
  color: var(--text-secondary);
  font-size: 18px;
}

.search-no-result-found {
  text-align: center;
  margin: 80px auto;
  color: var(--text-secondary);
  border: none;
  background: transparent;
  max-width: 420px;
}
.search-no-result-found .glyphicon {
  font-size: 40px;
  opacity: 0.4;
  margin-bottom: 16px;
  display: block;
}
.search-no-result-found p {
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.search-no-result-found .srh-empty-hint {
  font-size: 13px;
}

/* ---------------------------------------------------------------------
 * 15. NAVBAR NOTEBOOK DROPDOWN
 * ------------------------------------------------------------------- */
.notebook-list-dropdown > .dropdown-menu {
  min-width: 300px;
  max-width: 360px;
  padding: 8px;
}
/* Filter input inside the dropdown */
#notebook-list > .filter-names,
.notebook-list-dropdown .filter-names {
  margin: 4px 4px 8px;
  padding: 0;
}
.note-name-query {
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-subtle);
  font-size: 13px;
}
.note-name-query:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  background: var(--bg-surface);
}

/* Scroll area for the note list */
#notebook-list {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

/* Note + folder rows in the dropdown */
.dropdown-menu .notebook-list-item,
#notebook-list .notebook-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px !important;
  border-radius: var(--radius-md);
  color: var(--text-primary) !important;
  font-size: 13px;
  transition:
    background var(--transition),
    color var(--transition);
}
.dropdown-menu .notebook-list-item:hover,
#notebook-list .notebook-list-item:hover {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}
#notebook-list .notebook-list-item i {
  color: var(--color-info);
}
#notebook-list .notebook-list-item:hover i {
  color: var(--color-primary);
}

/* Selected/active note: white text on the navy active background */
#notebook-list li.active > .notebook-list-item,
#notebook-list li.active > a.notebook-list-item,
#notebook-list li.active > .notebook-list-item:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}
#notebook-list li.active > .notebook-list-item i,
#notebook-list li.active > .notebook-list-item span {
  color: #fff !important;
}

/* Nested folder indentation + connector */
#notebook-list .expandable ul {
  padding-left: 14px !important;
  border-left: 1px solid var(--border-color);
  margin-left: 14px;
}

/* "Create new note" action at top of dropdown */
.notebook-list-dropdown .dropdown-menu > li:first-child > a {
  font-weight: 500;
  color: var(--color-primary);
}

body.dark-mode .note-name-query {
  background: var(--bg-subtle) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
body.dark-mode .dropdown-menu .notebook-list-item:hover,
body.dark-mode #notebook-list .notebook-list-item:hover {
  background: var(--color-primary-soft) !important;
  color: var(--blue-200) !important;
}
body.dark-mode #notebook-list .expandable ul {
  border-left-color: var(--border-color);
}

/* ---------------------------------------------------------------------
 * 16. TOOLTIPS (uib / bootstrap)
 * ------------------------------------------------------------------- */
.tooltip {
  font-family: var(--font-ui);
  font-size: 12px;
  z-index: 10010;
}
.tooltip.in {
  opacity: 1;
}
.tooltip-inner {
  background: var(--gray-900);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 6px 10px;
  box-shadow: var(--shadow-md);
  max-width: 240px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.tooltip.top .tooltip-arrow {
  border-top-color: var(--gray-900);
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: var(--gray-900);
}
.tooltip.left .tooltip-arrow {
  border-left-color: var(--gray-900);
}
.tooltip.right .tooltip-arrow {
  border-right-color: var(--gray-900);
}
body.dark-mode .tooltip-inner {
  background: #3a3a3e;
}
body.dark-mode .tooltip.top .tooltip-arrow {
  border-top-color: #3a3a3e;
}
body.dark-mode .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #3a3a3e;
}
body.dark-mode .tooltip.left .tooltip-arrow {
  border-left-color: #3a3a3e;
}
body.dark-mode .tooltip.right .tooltip-arrow {
  border-right-color: #3a3a3e;
}

/* ---------------------------------------------------------------------
 * 17. CHECKBOXES & RADIOS
 * ------------------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
  vertical-align: middle;
}
.checkbox label,
.radio label {
  cursor: pointer;
}
body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
  accent-color: var(--blue-600);
}

/* ---------------------------------------------------------------------
 * 18. SPINNERS
 * ------------------------------------------------------------------- */
.fa-spin {
  color: var(--color-primary);
}
.spinAnimation {
  color: var(--color-primary);
}
body.dark-mode .fa-spin,
body.dark-mode .spinAnimation {
  color: var(--blue-400);
}
/* Spinners inside buttons/links follow their container's color */
.btn .fa-spin,
.btn-primary .fa-spin,
.btn-info .fa-spin,
.btn-success .fa-spin,
.btn-warning .fa-spin,
.btn-danger .fa-spin,
a .fa-spin {
  color: inherit;
}

/* ---------------------------------------------------------------------
 * 19. PROGRESS BARS
 * ------------------------------------------------------------------- */
.progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  box-shadow: none;
  overflow: hidden;
}
.progress-bar {
  background-color: var(--color-primary);
  background-image: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-info)
  );
  box-shadow: none;
  transition: width 0.3s ease;
}
.progress-bar-striped.active {
  background-image: linear-gradient(
    90deg,
    var(--color-info),
    var(--color-primary),
    var(--color-info)
  );
  background-size: 200% 100%;
  animation: skn-progress-slide 1.2s linear infinite;
}
@keyframes skn-progress-slide {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: 0 0;
  }
}
body.dark-mode .progress {
  background: #2a2a2e;
}

/* ---------------------------------------------------------------------
 * 20. INPUT GROUPS
 * ------------------------------------------------------------------- */
.input-group-addon {
  background: var(--bg-subtle);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.input-group .form-control:not(:first-child),
.input-group-addon:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group .form-control:not(:last-child),
.input-group-addon:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
body.dark-mode .input-group-addon {
  background: var(--bg-subtle) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}

/* ---------------------------------------------------------------------
 * 21. PAGINATION (bootstrap + ui-grid pager)
 * ------------------------------------------------------------------- */
.pagination {
  border-radius: var(--radius-md);
}
.pagination > li > a,
.pagination > li > span {
  color: var(--text-primary);
  border-color: var(--border-color);
  font-size: 13px;
  padding: 6px 12px;
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition);
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.pagination > li > a:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-color: var(--border-strong);
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ui-grid pager controls */
.ui-grid-pager-control button {
  border-radius: var(--radius-sm);
}
.ui-grid-pager-control input {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
}

/* ---------------------------------------------------------------------
 * 22. COPY-OUTPUT BUTTON (paragraph results)
 * ------------------------------------------------------------------- */
.plainTextContainer,
.html-result-wrap {
  position: relative;
}
.result-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  opacity: 0;
  padding: 3px 9px;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
  transition:
    opacity var(--transition),
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition);
}
.plainTextContainer:hover .result-copy-btn,
.html-result-wrap:hover .result-copy-btn,
.result-copy-btn:focus {
  opacity: 1;
}

/* ---------------------------------------------------------------------
 * 23. MARKDOWN OUTPUT TYPOGRAPHY (.markdown-body)
 * ------------------------------------------------------------------- */
.markdown-body {
  font-family: var(--font-ui) !important;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text-primary);
}
.markdown-body h1,
.markdown-body h2 {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.3em;
}
.markdown-body a {
  color: var(--color-primary);
}
.markdown-body code {
  font-family: "Source-Code-Pro", Menlo, monospace;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
  font-size: 0.9em;
}
.markdown-body pre {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.markdown-body pre code {
  background: transparent;
  color: var(--text-primary);
  padding: 0;
}
.markdown-body blockquote {
  border-left: 3px solid var(--blue-200);
  color: var(--text-secondary);
  padding: 0 1em;
}
.markdown-body table th {
  background: var(--bg-subtle);
  font-weight: 600;
}
.markdown-body table th,
.markdown-body table td {
  border: 1px solid var(--border-color);
  padding: 7px 12px;
}
.markdown-body hr {
  background: var(--border-color);
}

/* Markdown dark mode */
body.dark-mode .markdown-body {
  color: var(--text-primary);
  background: transparent;
}
body.dark-mode .markdown-body h1,
body.dark-mode .markdown-body h2,
body.dark-mode .markdown-body h3,
body.dark-mode .markdown-body h4,
body.dark-mode .markdown-body h5,
body.dark-mode .markdown-body h6 {
  color: var(--text-primary);
}
body.dark-mode .markdown-body h1,
body.dark-mode .markdown-body h2 {
  border-bottom-color: var(--border-color);
}
body.dark-mode .markdown-body pre {
  background: #161618;
  border-color: var(--border-color);
}
body.dark-mode .markdown-body pre code {
  color: #e6e6e6;
}
body.dark-mode .markdown-body code {
  background: var(--color-primary-soft);
  color: var(--blue-200);
}
body.dark-mode .markdown-body blockquote {
  border-left-color: var(--blue-600);
  color: var(--text-secondary);
}
body.dark-mode .markdown-body table th {
  background: var(--bg-subtle);
}
body.dark-mode .markdown-body table th,
body.dark-mode .markdown-body table td {
  border-color: var(--border-color);
}
body.dark-mode .markdown-body table tr {
  background: transparent;
}

/* ---------------------------------------------------------------------
 * 24. TABLE OUTPUT POLISH (HTML result tables, e.g. %sql / md tables)
 * ------------------------------------------------------------------- */
.html-result table {
  border-collapse: collapse;
  font-size: 13px;
}
.html-result thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--border-strong);
  padding: 10px 12px;
  white-space: nowrap;
}
.html-result tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
}
.html-result tbody tr:nth-child(odd) {
  background: var(--gray-50);
}
.html-result tbody tr:hover {
  background: var(--color-primary-soft);
}

/* ---------------------------------------------------------------------
 * 25. CONSISTENCY — dark-mode toggle switch (rebrand to palette)
 * ------------------------------------------------------------------- */
input:checked + .slider {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.slider {
  border-color: var(--border-strong);
}

/* ---------------------------------------------------------------------
 * 26. PARAGRAPH CONTROL TOOLBAR (per-cell actions)
 * ------------------------------------------------------------------- */
.paragraph .control {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  padding: 4px 12px;
  color: var(--text-secondary);
  opacity: 1;
  transition:
    opacity var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}
.paragraph:hover .control,
.paragraph .control:hover,
.paragraph .control.open {
  opacity: 1;
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.paragraph .control .fa-tasks {
  color: var(--color-primary);
}
body.dark-mode .paragraph .control {
  background: #2d2d2d !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
}

.paragraph-id-item {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}
/* ---------------------------------------------------------------------
 * 27. JOB MANAGER — job rows as cards
 * ------------------------------------------------------------------- */
.job {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(6px);
  box-shadow: var(--shadow-xs);
  padding: 14px 18px !important;
  margin-bottom: 12px;
  transition:
    box-shadow var(--transition),
    border-color var(--transition),
    transform var(--transition);
}
.job:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.job .control span {
  color: var(--text-secondary);
}
.job-control-btn {
  color: var(--color-primary);
}
.job-manager-header {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-xs) !important;
  border-radius: var(--radius-lg);
}
body.dark-mode .job {
  background: var(--bg-surface);
  border-color: var(--border-color);
}
body.dark-mode .job-manager-header {
  background: var(--bg-surface) !important;
  border-bottom-color: var(--border-color) !important;
}

/* ---------------------------------------------------------------------
 * 28. ADMIN TABLES — force left-to-right text (Configuration / Repos)
 * ------------------------------------------------------------------- */
.configuration .table,
.interpreter .table,
.admin-users-page .table,
.configuration .hiding_overflow {
  direction: ltr;
}
.configuration .table th,
.configuration .table td,
.interpreter .table th,
.interpreter .table td,
.admin-users-page .table th,
.admin-users-page .table td {
  direction: ltr;
  text-align: left;
}

/* ---------------------------------------------------------------------
 * 28b. FOLDER PERMISSIONS MODAL
 * ------------------------------------------------------------------- */
.folder-perm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 46, 77, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
}
.folder-perm-modal {
  width: 560px;
  max-width: 94%;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.folder-perm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-color);
}
.folder-perm-header h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}
.folder-perm-header .close {
  font-size: 22px;
  opacity: 0.6;
  border: 0;
  background: none;
  color: var(--text-secondary);
}
.folder-perm-header .close:hover {
  opacity: 1;
}
.folder-perm-body {
  padding: 20px 22px;
  max-height: 60vh;
  overflow-y: auto;
}
.folder-perm-path {
  font-family: "Source-Code-Pro", monospace;
  font-size: 13px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  word-break: break-all;
}
.folder-perm-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.folder-perm-body label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 12px 0 4px;
}
.folder-perm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--border-color);
}
body.dark-mode .folder-perm-path {
  color: var(--blue-200);
}

/* Inline validation alert inside the New Folder modal (over the name field) */
.folder-create-alert {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border: 1px solid var(--red-400);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 10px;
}
body.dark-mode .folder-create-alert {
  color: var(--red-400);
  border-color: rgba(189, 86, 93, 0.4);
}

/* Ensure toasts float above the blurred folder modals */
.ng-toast,
.ng-toast.ng-toast--top {
  z-index: 100002 !important;
}

/* select2 appends its dropdown to <body>; keep it above the folder modal overlay */
.select2-container--open {
  z-index: 100010 !important;
}
.select2-dropdown {
  z-index: 100010 !important;
}
.select2-container .select2-dropdown {
  z-index: 100010 !important;
}

/* Folder-permission select2 boxes span the full modal width */
.folder-perm-body span.select2,
.folder-perm-body .select2,
.folder-perm-body .select2-container {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box;
}
.folder-perm-body .select2-selection--multiple {
  min-height: 38px;
}

/* ---------------------------------------------------------------------
 * 29. NOTEBOOK CELL UX (Colab/Jupyter-inspired)
 * ------------------------------------------------------------------- */

/* 29a. Active-cell accent bar — colored left edge on the focused cell */
.paragraph-space.focused {
  box-shadow:
    inset 3px 0 0 var(--color-primary),
    var(--shadow-md) !important;
}
body.dark-mode .paragraph-space.focused {
  box-shadow:
    inset 3px 0 0 var(--color-info),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* 29b. Cell language/interpreter badge */
.paragraph {
  position: relative;
}
.cell-lang-badge {
  position: absolute;
  top: 5px;
  right: 8px;
  z-index: 3;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  opacity: 0.75;
  pointer-events: none;
  transition: opacity var(--transition);
}
/* fade the badge out on hover so it doesn't clash with the control toolbar */
.paragraph:hover .cell-lang-badge {
  opacity: 0;
}
body.dark-mode .cell-lang-badge {
  color: var(--blue-200);
  background: var(--color-primary-soft);
}

/* 29c. "Add cell" divider — Colab-style hover line with a centered pill */
.new-paragraph {
  position: relative;
  height: 12px;
  margin: 0 2px;
  cursor: pointer;
  overflow: visible;
  background: transparent !important;
}
.new-paragraph::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform 0.15s ease;
}
.new-paragraph:hover::before {
  transform: scaleX(1);
}
.new-paragraph .plus-sign,
.new-paragraph:hover .plus-sign {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  background: var(--color-primary);
  color: #fff !important;
  border-radius: var(--radius-pill);
  padding: 2px 14px;
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  z-index: 5;
  box-shadow: var(--shadow-sm);
}
.new-paragraph .new-paragraph-disable {
  background: var(--gray-300) !important;
  color: #fff !important;
}

/* ── Roles tag input ─────────────────────────────────────── */
.roles-tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid #ccd3da;
  border-radius: 4px;
  background: #fff;
  cursor: text;
  transition: border-color 0.15s;
}
.roles-tag-input--focused {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}
.role-tag-input-field {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #2d3a45;
  min-width: 80px;
  flex: 1;
  padding: 2px 0;
  height: 28px;
}
.role-tag-input-field::placeholder {
  color: #aab4be;
}

/* Role pill tags */
.role-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  background: #e8f0fe;
  color: #1a56c4;
  border: 1px solid #c5d8fb;
  white-space: nowrap;
  user-select: none;
}
.role-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: #1a56c4;
  opacity: 0.6;
  margin-left: 2px;
}
.role-tag-remove:hover {
  opacity: 1;
  background: rgba(26, 86, 196, 0.15);
}

/* Suggested role chips */
.role-suggestion-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: #f4f6f8;
  color: #5a6a7a;
  border: 1px solid #ccd3da;
  cursor: pointer;
  transition:
    background 0.1s,
    color 0.1s,
    border-color 0.1s;
}
.role-suggestion-chip:hover:not([disabled]) {
  background: #e8f0fe;
  color: #1a56c4;
  border-color: #c5d8fb;
}
.role-suggestion-chip--used,
.role-suggestion-chip[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* ── Dark mode — Roles tag input ──────────────────────────── */
body.dark-mode .roles-tag-input {
  background: #2a2a2a;
  border-color: #444;
}
body.dark-mode .roles-tag-input--focused {
  border-color: #6ab0f3;
  box-shadow: 0 0 0 3px rgba(106, 176, 243, 0.15);
}
body.dark-mode .role-tag-input-field {
  color: #e0e0e0;
}
body.dark-mode .role-tag-input-field::placeholder {
  color: #666;
}
body.dark-mode .role-tag {
  background: #2d3d5a;
  color: #8dc5f8;
  border-color: #3a5a8a;
}
body.dark-mode .role-tag-remove {
  color: #8dc5f8;
}
body.dark-mode .role-tag-remove:hover {
  background: rgba(141, 197, 248, 0.15);
}
body.dark-mode .role-suggestion-chip {
  background: #2a2a2a;
  color: #b0b0b0;
  border-color: #444;
}
body.dark-mode .role-suggestion-chip:hover:not([disabled]) {
  background: #2d3d5a;
  color: #8dc5f8;
  border-color: #3a5a8a;
}