/* Kitsune Nexus Admin - theme variables (light default, dark override) */

:root {
  --color-bg: #f7f6f2;
  --color-surface: #eeebe4;
  --color-surface-2: #e3dfd5;
  --color-border: #d8d6cd;
  --color-text: #2c2c2a;
  --color-text-secondary: #6b6a63;
  --color-accent: #C35817;
  --color-accent-text: #ffffff;
  --color-danger: #a23b2e;
  --color-success: #3a6b46;
  --color-warning: #9c6b1a;

  /* Status badges (Staff page) */
  --badge-success-bg: #dcfce7;
  --badge-success-text: #15803d;
  --badge-warning-bg: #fef3c7;
  --badge-warning-text: #b45309;
  --badge-danger-bg: #fee2e2;
  --badge-danger-text: #b91c1c;

  /* Role badges (Staff page) */
  --badge-teal-bg: #ccfbf1;
  --badge-teal-text: #0f766e;
  --badge-forest-bg: #d1e7dd;
  --badge-forest-text: #14532d;
  --badge-orange-bg: #ffedd5;
  --badge-orange-text: #9a3412;
  --badge-purple-bg: #f3e8ff;
  --badge-purple-text: #6b21a8;
  --badge-indigo-bg: #e0e7ff;
  --badge-indigo-text: #3730a3;

  --icon-feature: #009E00;
  --icon-subfeature: #4698B3;
  --icon-task: #AF9800;
  --icon-bug: #B31D03;
}

[data-theme="dark"] {
  --color-bg: #1c1c1a;
  --color-surface: #262623;
  --color-surface-2: #333330;
  --color-border: #46453f;
  --color-text: #ece9e0;
  --color-text-secondary: #a6a49a;
  --color-accent: #C35817;
  --color-accent-text: #ffffff;
  --color-danger: #e0796a;
  --color-success: #7fb08a;
  --color-warning: #d9a94a;

  --badge-success-bg: #14532d;
  --badge-success-text: #86efac;
  --badge-warning-bg: #78350f;
  --badge-warning-text: #fcd34d;
  --badge-danger-bg: #7f1d1d;
  --badge-danger-text: #fca5a5;

  --badge-teal-bg: #134e4a;
  --badge-teal-text: #5eead4;
  --badge-forest-bg: #1b4332;
  --badge-forest-text: #74c69d;
  --badge-orange-bg: #7c2d12;
  --badge-orange-text: #fdba74;
  --badge-purple-bg: #581c87;
  --badge-purple-text: #d8b4fe;
  --badge-indigo-bg: #312e81;
  --badge-indigo-text: #a5b4fc;

  --icon-feature: #00E200;
  --icon-subfeature: #64D9FF;
  --icon-task: #FAD800;
  --icon-bug: #FF2A04;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1c1c1a;
    --color-surface: #262623;
    --color-surface-2: #333330;
    --color-border: #46453f;
    --color-text: #ece9e0;
    --color-text-secondary: #a6a49a;
    --color-accent: #C35817;
    --color-accent-text: #ffffff;
    --color-danger: #e0796a;
    --color-success: #7fb08a;
    --color-warning: #d9a94a;

    --badge-success-bg: #14532d;
    --badge-success-text: #86efac;
    --badge-warning-bg: #78350f;
    --badge-warning-text: #fcd34d;
    --badge-danger-bg: #7f1d1d;
    --badge-danger-text: #fca5a5;

    --badge-teal-bg: #134e4a;
    --badge-teal-text: #5eead4;
    --badge-forest-bg: #1b4332;
    --badge-forest-text: #74c69d;
    --badge-orange-bg: #7c2d12;
    --badge-orange-text: #fdba74;
    --badge-purple-bg: #581c87;
    --badge-purple-text: #d8b4fe;
    --badge-indigo-bg: #312e81;
    --badge-indigo-text: #a5b4fc;

    --icon-feature: #00E200;
    --icon-subfeature: #64D9FF;
    --icon-task: #FAD800;
    --icon-bug: #FF2A04;
  }
}

* { box-sizing: border-box; }

/* Custom scrollbars (WebKit/Blink only - Chrome, Edge, Safari; Firefox
   has no equivalent and falls back to its own native scrollbar).
   Colors use theme variables rather than fixed hex, so both track and
   thumb automatically adapt between light/dark - --color-surface-2 and
   --color-accent are already themed elsewhere in this file. */
::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-surface-2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  filter: brightness(0.85);
}
::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.5rem;
}

.btn, a.btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-accent-text);
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"] {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  margin-bottom: 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
}

textarea {
  width: 100%;
  padding: 0.65rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  margin-bottom: 0.9rem;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}

.quill-container {
  margin-bottom: 0.9rem;
  border-radius: 0 0 6px 6px;
}
.quill-container .ql-editor {
  min-height: 280px;
  font-size: 0.95rem;
}
/* Quill's "snow" theme is hardcoded light - override just enough to stay
   legible in dark mode, without fighting its own toolbar icon styling. */
[data-theme="dark"] .ql-toolbar.ql-snow,
[data-theme="dark"] .ql-container.ql-snow {
  border-color: var(--color-border);
}
[data-theme="dark"] .ql-toolbar.ql-snow {
  background: var(--color-surface-2);
}
[data-theme="dark"] .ql-editor {
  background: var(--color-surface-2);
  color: var(--color-text);
}
[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--color-text-secondary); }
[data-theme="dark"] .ql-snow .ql-fill { fill: var(--color-text-secondary); }
[data-theme="dark"] .ql-snow .ql-picker { color: var(--color-text-secondary); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ql-toolbar.ql-snow,
  :root:not([data-theme="light"]) .ql-container.ql-snow {
    border-color: var(--color-border);
  }
  :root:not([data-theme="light"]) .ql-toolbar.ql-snow {
    background: var(--color-surface-2);
  }
  :root:not([data-theme="light"]) .ql-editor {
    background: var(--color-surface-2);
    color: var(--color-text);
  }
  :root:not([data-theme="light"]) .ql-snow .ql-stroke { stroke: var(--color-text-secondary); }
  :root:not([data-theme="light"]) .ql-snow .ql-fill { fill: var(--color-text-secondary); }
  :root:not([data-theme="light"]) .ql-snow .ql-picker { color: var(--color-text-secondary); }
}

/* The calendar icon is browser-native chrome and can't be fully restyled,
   but WebKit/Blink browsers (Chrome, Edge, Safari) support inverting it
   for visibility against the theme background. Firefox has no equivalent
   and just uses its own icon regardless. */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
  cursor: pointer;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
  }
}

.error { color: var(--color-danger); font-size: 0.9rem; }

/* Badges - status and role labels on the Staff page */
.badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid currentColor; /* light mode default - each badge variant already sets its own text color, so currentColor automatically matches without duplicating per variant; removed in dark mode below */
}
.badge-success { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-text); }
.badge-teal    { background: var(--badge-teal-bg);    color: var(--badge-teal-text); }
.badge-forest  { background: var(--badge-forest-bg);  color: var(--badge-forest-text); }
.badge-orange  { background: var(--badge-orange-bg);  color: var(--badge-orange-text); }
.badge-purple  { background: var(--badge-purple-bg);  color: var(--badge-purple-text); }
.badge-indigo  { background: var(--badge-indigo-bg);  color: var(--badge-indigo-text); }
[data-theme="dark"] .badge { border: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge { border: none; }
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.subtitle {
  font-weight: 600;
  color: var(--color-text-secondary);
}

.theme-toggle {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

/* Recovery codes table - 2 columns */
table.recovery-codes {
  width: 100%;
  border-collapse: collapse;
  font-family: "SF Mono", "Roboto Mono", monospace;
  font-size: 1.02rem;
  margin: 1rem 0;
}
table.recovery-codes td {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------------
   Sidebar navigation (authenticated app pages only - see app_base.html)
--------------------------------------------------------------------- */

.nav-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: width 0.15s ease;
  overflow: hidden;
  z-index: 10;
}

.nav-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
}

.nav-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.nav-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-header-text { flex: 1; overflow: hidden; }

.nav-title-line {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.nav-collapse-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
  display: flex;
}
.nav-collapse-btn:hover { background: var(--color-surface-2); }

.nav-version {
  padding: 0.5rem 0.9rem;
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.nav-links {
  flex: 1;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.nav-link:hover { background: var(--color-surface-2); }

/* Nav submenu - the first expandable nav group in this codebase.
   Server-side auto-expand (via the "open" class, added in app_base.html
   based on request.url.path) handles "I'm currently on one of these
   pages" - JS toggling is only for manually glancing at the group's
   contents while elsewhere, so no client-side persistence is needed. */
.nav-submenu-toggle {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  justify-content: flex-start;
}
.nav-submenu-caret {
  margin-left: auto;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform 0.15s;
}
.nav-submenu-group.open .nav-submenu-caret { transform: rotate(180deg); }
.nav-submenu {
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  padding-left: 1.6rem;
}
.nav-submenu-group.open .nav-submenu { display: flex; }
.nav-sublink { padding-top: 0.4rem; padding-bottom: 0.4rem; }

.nav-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.nav-footer {
  padding: 0.6rem;
  border-top: 1px solid var(--color-border);
}

.app-main {
  margin-left: 240px;
  padding: 2.5rem;
  max-width: 900px;
  transition: margin-left 0.15s ease;
}
.app-main.app-main-wide {
  max-width: none;
}

/* Collapsed state */
:root[data-nav-collapsed="true"] .nav-panel { width: 64px; }
:root[data-nav-collapsed="true"] .app-main { margin-left: 64px; }
:root[data-nav-collapsed="true"] .nav-header-text,
:root[data-nav-collapsed="true"] .nav-version,
:root[data-nav-collapsed="true"] .nav-label { display: none; }
:root[data-nav-collapsed="true"] .nav-header {
  justify-content: center;
  padding: 1rem 0.4rem;
}
:root[data-nav-collapsed="true"] .nav-collapse-btn { display: none; }
:root[data-nav-collapsed="true"] .nav-link { justify-content: center; }

/* ---------------------------------------------------------------------
   Toggle switches (role selection - invite form, edit-roles modal)
--------------------------------------------------------------------- */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.toggle-row:last-child { border-bottom: none; }

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: absolute;
  inset: 0;
  background-color: var(--color-border);
  transition: background-color 0.15s ease;
  border-radius: 999px;
  cursor: pointer;
}
.switch-slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background-color: var(--color-surface);
  transition: transform 0.15s ease;
  border-radius: 50%;
}
.switch input:checked + .switch-slider {
  background-color: var(--color-accent);
}
.switch input:checked + .switch-slider::before {
  transform: translateX(18px);
}
.switch input:disabled + .switch-slider {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------
   Modal (native <dialog> element - edit roles)
--------------------------------------------------------------------- */

dialog.modal {
  border: none;
  border-radius: 10px;
  padding: 1.5rem;
  background: var(--color-surface);
  color: var(--color-text);
  max-width: 420px;
  width: 90%;
  overflow: visible;
}
dialog.modal.modal-lg {
  max-width: 900px;
  max-height: 85vh;
  overflow-y: auto;
}
dialog.modal.modal-fullscreen[open] {
  width: 95vw;
  max-width: 95vw;
  height: 92vh;
  max-height: 92vh;
  overflow: hidden; /* the dialog itself never scrolls - only specific children do */
  display: flex;
  flex-direction: column;
}
/* Direct children of the fullscreen dialog - used by the View modal,
   which has no <form> wrapper. Header/status line/close button keep
   their natural size; the content box grows to fill whatever's left and
   scrolls internally via .view-content below. */
dialog.modal.modal-fullscreen > h3,
dialog.modal.modal-fullscreen > p,
dialog.modal.modal-fullscreen > .actions {
  flex-shrink: 0;
}
dialog.modal.modal-fullscreen > .view-content {
  flex: 1 1 auto;
  min-height: 0; /* without this, a flex child won't shrink below its content's natural height, defeating the fill+scroll behavior */
  overflow-y: auto;
}
/* The <form> wrapper used by the New Draft/Edit modals becomes its own
   nested flex column, so its own children (title, labels, toolbar,
   editor, action buttons) distribute the same way. */
dialog.modal.modal-fullscreen > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
dialog.modal.modal-fullscreen > form h3,
dialog.modal.modal-fullscreen > form label,
dialog.modal.modal-fullscreen > form input[type="text"],
dialog.modal.modal-fullscreen > form .ql-toolbar,
dialog.modal.modal-fullscreen > form .actions {
  flex-shrink: 0;
}
dialog.modal.modal-fullscreen .quill-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
dialog.modal.modal-fullscreen .quill-container .ql-editor {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
dialog.modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------------
   Custom date picker - replaces native <input type="date"> entirely so
   the calendar popover can actually follow the site theme. Browsers give
   no way to restyle the native calendar UI itself (WebKit allows tinting
   the icon at best), so this is a small vanilla-JS component instead of
   relying on any of that.
--------------------------------------------------------------------- */

.date-picker { position: relative; }
.date-picker-display { cursor: pointer; }
.date-picker-calendar {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.94rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  width: 288px;
}
.date-picker.dp-open .date-picker-calendar { display: block; }

.dp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
  font-weight: 600;
  font-size: 1.06rem;
}
.dp-nav {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  font-size: 1.375rem;
  line-height: 1;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
}
.dp-nav:hover { background: var(--color-surface-2); }

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.dp-dow {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 0.25rem 0;
}
.dp-day {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.44rem 0;
  border-radius: 6px;
  color: var(--color-text);
  font-size: 1rem;
}
.dp-day:hover { background: var(--color-surface-2); }
.dp-day-selected { background: var(--color-accent); color: var(--color-accent-text); }

.dp-footer {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-border);
  text-align: right;
}
.dp-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 0.94rem;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Roadmap: draggable tables (outer = Features, nested = Tasks/Bugs)
   Uses the native HTML5 drag-and-drop API - no JS library needed.
--------------------------------------------------------------------- */

table.roadmap-outer {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.75rem;
}
table.roadmap-outer > tbody > tr.feature-row > td {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.25rem;
}
tr.feature-row.dragging { opacity: 0.4; }

.drag-handle {
  cursor: grab;
  color: var(--color-text-secondary);
  padding: 0.2rem 0.3rem;
  user-select: none;
  touch-action: none;
}
.drag-handle:active { cursor: grabbing; }

table.roadmap-items {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
}
table.roadmap-items th {
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  padding: 0.4rem;
}
table.roadmap-items td {
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
  vertical-align: middle;
}
tr.item-row.dragging { opacity: 0.4; }

/* Sub-Features: visually nested (accent left border + slightly different
   background) within their parent Feature's card. */
table.roadmap-subfeatures {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.6rem;
  margin-top: 0.75rem;
}
table.roadmap-subfeatures > tbody > tr.subfeature-row > td {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 8px;
  padding: 1rem;
}
tr.subfeature-row.dragging { opacity: 0.4; }

/* Brief highlight on a row just created or moved, so the page doesn't
   feel like it silently reset to the top after adding something. */
tr.just-created > td {
  animation: roadmap-highlight-flash 2.2s ease-out;
}
@keyframes roadmap-highlight-flash {
  0%   { background-color: var(--badge-warning-bg); }
  100% { background-color: transparent; }
}

/* Quota usage bars - Email Configuration page, Resend accounts only.
   A plain track + fill rather than a <progress> element, since a
   near-full quota (red) needs a color the native element can't easily
   carry across browsers. */
.quota-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  font-size: 0.8rem;
}
.quota-label {
  color: var(--color-text-secondary);
  min-width: 3.2rem;
  flex-shrink: 0;
}
.quota-track {
  flex: 1;
  height: 0.5rem;
  background: var(--color-surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.quota-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
  transition: width 0.3s ease;
}
.quota-fill.quota-warning { background: var(--color-warning); }
.quota-fill.quota-danger { background: var(--color-danger); }
.quota-numbers {
  color: var(--color-text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}