/* ===================================================================
   Vikunja — Refresh v5
   Fixes: dark mode, dropdown/z-index clipping, settings field overlap.
   New: cooler neutral palette, Vazirmatn (Persian), full dark theme.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box !important; }

:root {
  --v-surface: #FFFFFF;
  --v-surface-2: #F5F6F8;
  --v-surface-3: #ECEEF2;
  --bulma-scheme-main: #FBFBFC;
  --bulma-scheme-main-bis: #F5F6F8;
  --bulma-scheme-main-ter: #ECEEF2;
  --bulma-background: #F5F6F8;
  --bulma-border: #E2E4EA;
  --bulma-border-hover: #C7CBD6;
  --bulma-text: #1F2430;
  --bulma-text-strong: #0E1116;
  --bulma-text-light: #6B7180;

  --bulma-primary: #0E7C63;
  --bulma-primary-light: #E1F2ED;
  --bulma-primary-dark: #095745;
  --bulma-primary-invert: #FFFFFF;
  --bulma-link: #0E7C63;
  --bulma-link-hover: #095745;

  --v-p1: #C1442E; --v-p1-bg: #FBEAE5;
  --v-p2: #B4740E; --v-p2-bg: #FBF0DB;
  --v-p3: #2F6FB0; --v-p3-bg: #E3EEF9;
  --v-p4: #7C8091; --v-p4-bg: #ECEEF2;

  --bulma-radius: 8px;
  --bulma-radius-large: 10px;
  --bulma-radius-small: 6px;
}

/* ---- Dark mode: mirrors every token above ---- */
/* Confirmed via live DOM inspection: Vikunja applies a plain "dark" class to <html>, not data-theme */
html.dark {
  --v-surface: #1B1E27;
  --v-surface-2: #12141C;
  --v-surface-3: #22262F;
  --bulma-scheme-main: #12141C;
  --bulma-scheme-main-bis: #181B24;
  --bulma-scheme-main-ter: #22262F;
  --bulma-background: #12141C;
  --bulma-border: #2C303B;
  --bulma-border-hover: #3D4250;
  --bulma-text: #E7E9EE;
  --bulma-text-strong: #FFFFFF;
  --bulma-text-light: #9195A3;
  --bulma-primary-light: #12332C;
}

body {
  font-family: 'Vazirmatn', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--bulma-text) !important;
  background: var(--bulma-scheme-main) !important;
  line-height: 1.7 !important;
}

[dir="ltr"], code, input[type="number"] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

h1, h2, h3, .title {
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  color: var(--bulma-text-strong) !important;
}

.title.is-1, .title.is-2 { font-size: 1.85rem !important; margin-bottom: 20px !important; }
.title.is-3, .title.is-4 { font-size: 1.25rem !important; }
.subtitle, .has-text-grey { color: var(--bulma-text-light) !important; }

p, li { line-height: 1.75 !important; }

/* Hide the "Powered by Vikunja" footer link */
a.menu-bottom-link { display: none !important; }

/* Consistent stacking order so nothing gets clipped or hidden */
.navbar { z-index: 30 !important; }
.app-sidebar { z-index: 20 !important; }
.dropdown.is-active .dropdown-menu,
.dropdown-menu, .dropdown-content { z-index: 60 !important; }
.modal { z-index: 100 !important; }
.tooltip, [role="tooltip"] { z-index: 80 !important; }

/* Cards & containers — themed surface, not hardcoded white */
.box, .card, .modal-card, .task-view, .content-widget, .project-card {
  border-radius: var(--bulma-radius) !important;
  border: 1px solid var(--bulma-border) !important;
  background: var(--v-surface) !important;
  color: var(--bulma-text) !important;
  box-shadow: 0 1px 2px rgba(15,17,22,.05) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

.box:hover, .card:hover, .project-card:hover { border-color: var(--bulma-border-hover) !important; }

.modal-card { box-shadow: 0 8px 32px rgba(0,0,0,.28) !important; border: none !important; }
.modal-background { background: rgba(0,0,0,.5) !important; }

.button {
  border-radius: var(--bulma-radius-small) !important;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.button.is-primary {
  background: var(--bulma-primary) !important;
  border: 1px solid var(--bulma-primary) !important;
  color: #fff !important;
}
.button.is-primary:hover { background: var(--bulma-primary-dark) !important; border-color: var(--bulma-primary-dark) !important; }

.button:not(.is-primary):not(.is-danger) {
  background: var(--v-surface) !important;
  border: 1px solid var(--bulma-border) !important;
  color: var(--bulma-text) !important;
}
.button:not(.is-primary):not(.is-danger):hover {
  border-color: var(--bulma-primary) !important;
  color: var(--bulma-primary) !important;
}

/* Inputs — modest padding only, border-box already global (fixes settings overlap) */
.input, .textarea {
  border-radius: var(--bulma-radius-small) !important;
  border: 1px solid var(--bulma-border) !important;
  padding: 0.55em 0.8em !important;
  background: var(--v-surface) !important;
  color: var(--bulma-text) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

.select select {
  border-radius: var(--bulma-radius-small) !important;
  border: 1px solid var(--bulma-border) !important;
  background: var(--v-surface) !important;
  color: var(--bulma-text) !important;
}

.input::placeholder, .textarea::placeholder { color: var(--bulma-text-light) !important; opacity: 0.75; }

.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--bulma-primary) !important;
  box-shadow: 0 0 0 3px var(--bulma-primary-light) !important;
}

/* Ensure form rows never overlap regardless of content height */
.field { margin-bottom: 1.1rem !important; }
.field:last-child { margin-bottom: 0 !important; }
.field .control { margin-bottom: 0 !important; }
.field.is-grouped { align-items: center !important; flex-wrap: wrap !important; gap: 8px; }
.label { color: var(--bulma-text) !important; margin-bottom: 0.4em !important; font-weight: 600 !important; }

/* Colored pill tags (task labels/priorities) — separate from form .label */
.tag {
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 0.3em 0.8em !important;
  font-size: 0.78rem !important;
  border: none !important;
}

/* Real priority classes found in Vikunja's DOM (not guessed numbers) */
.priority-label.high-priority { color: var(--v-p1) !important; }
.priority-label.not-so-high { color: var(--v-p2) !important; }
.priority-label { font-weight: 600 !important; }

/* Task rows */
.task, .task-item, .single-task, tr.task {
  border-radius: var(--bulma-radius-small) !important;
  padding: 11px 14px !important;
  margin-bottom: 4px !important;
  background: var(--v-surface) !important;
  color: var(--bulma-text) !important;
  border: 1px solid var(--bulma-border) !important;
  border-left: 2px solid transparent !important;
  transition: border-color 150ms ease, background-color 150ms ease !important;
}

.task:hover, .task-item:hover, tr.task:hover {
  border-left-color: var(--bulma-primary) !important;
  background: var(--bulma-scheme-main-bis) !important;
}

.task.done, .task-item.done, .task--is-done { opacity: 0.55 !important; }

/* Tables — no overflow:hidden (that was clipping dropdown menus like the Gantt/Kanban view switcher) */
table.table {
  border: 1px solid var(--bulma-border) !important;
  border-radius: var(--bulma-radius) !important;
  background: var(--v-surface) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
table.table th:first-child { border-top-left-radius: var(--bulma-radius) !important; }
table.table th:last-child { border-top-right-radius: var(--bulma-radius) !important; }
table.table th {
  background: var(--bulma-scheme-main-bis) !important;
  color: var(--bulma-text-light) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--bulma-border) !important;
}
table.table td { border-bottom: 1px solid var(--bulma-border) !important; color: var(--bulma-text) !important; }
table.table tr:hover td { background: var(--bulma-scheme-main-bis) !important; }

/* View switcher / any toolbar dropdown: force visible above siblings */
.view-switcher, .project-view-tabs, .filters-toolbar {
  position: relative !important;
  z-index: 25 !important;
  overflow: visible !important;
}

/* Navbar & sidebar — themed, not hardcoded white */
.navbar {
  background: var(--v-surface) !important;
  border-bottom: 1px solid var(--bulma-border) !important;
  box-shadow: none !important;
}
.navbar a, .navbar .navbar-item, .navbar-brand { color: var(--bulma-text) !important; }

.menu-container, .menu {
  background: var(--bulma-scheme-main) !important;
  border-color: var(--bulma-border) !important;
}

.menu-container .list-menu-link, .menu-container .project-menu-title {
  color: var(--bulma-text) !important;
}

.menu-container .list-menu-link:hover { background: var(--bulma-scheme-main-ter) !important; }

.menu-container .router-link-exact-active .project-menu-title,
.menu-container a.router-link-exact-active {
  color: var(--bulma-primary) !important;
  font-weight: 700 !important;
}

.menu-container .list-menu-link {
  border-radius: var(--bulma-radius-small) !important;
  padding: 6px 10px !important;
  transition: background-color 150ms ease !important;
}
.menu-label {
  color: var(--bulma-text-light) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 0.68rem !important;
}

/* Kanban board */
.bucket, .kanban-bucket {
  background: var(--bulma-scheme-main-bis) !important;
  border-radius: var(--bulma-radius) !important;
  border: 1px solid var(--bulma-border) !important;
}
.bucket .task, .kanban-bucket .task { background: var(--v-surface) !important; }

/* Dropdowns, modals, notifications — themed, crisp */
.dropdown-content {
  border-radius: var(--bulma-radius-small) !important;
  border: 1px solid var(--bulma-border) !important;
  background: var(--v-surface) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}
.dropdown-item { color: var(--bulma-text) !important; }
.dropdown-item:hover { background: var(--bulma-scheme-main-ter) !important; color: var(--bulma-text) !important; }

.notification, .toast {
  border-radius: var(--bulma-radius-small) !important;
  border: 1px solid var(--bulma-border) !important;
  background: var(--v-surface) !important;
  color: var(--bulma-text) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}

.tabs a { color: var(--bulma-text-light) !important; border-bottom-color: transparent !important; font-weight: 600 !important; }
.tabs li.is-active a { color: var(--bulma-primary) !important; border-bottom-color: var(--bulma-primary) !important; }

input[type="checkbox"] { accent-color: var(--bulma-primary) !important; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bulma-border-hover); border-radius: 999px; }

.avatar, .user-avatar img, .gravatar { border-radius: 50% !important; border: 1px solid var(--bulma-border) !important; }

.breadcrumb a { color: var(--bulma-text-light) !important; font-weight: 500 !important; }
.breadcrumb li.is-active a { color: var(--bulma-text-strong) !important; font-weight: 700 !important; }

.pagination-link, .pagination-previous, .pagination-next {
  border-radius: var(--bulma-radius-small) !important;
  border: 1px solid var(--bulma-border) !important;
  color: var(--bulma-text) !important;
  background: var(--v-surface) !important;
}
.pagination-link.is-current { background: var(--bulma-primary) !important; border-color: var(--bulma-primary) !important; color: #fff !important; }

.no-tasks, .empty-state { color: var(--bulma-text-light) !important; font-weight: 500 !important; }

/* Jalali (Shamsi) date additions — injected by vikunja-jalali.js */
.jalali-date-badge {
  color: var(--bulma-text-light) !important;
  font-size: 0.85em;
  font-family: 'Vazirmatn', sans-serif !important;
  unicode-bidi: plaintext !important;
}
.jalali-gantt-date {
  display: block;
  font-size: 0.62rem;
  line-height: 1.1;
  color: var(--bulma-primary) !important;
  font-family: 'Vazirmatn', sans-serif !important;
}
.gantt-timeline-days .timeunit, .timeunit-wrapper {
  height: auto !important;
  min-height: 46px !important;
}
.gantt-timeline {
  height: auto !important;
}

/* flatpickr day cells: make room for a small Jalali day number underneath */
.flatpickr-day {
  height: auto !important;
  min-height: 44px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.1 !important;
}
.jalali-flatpickr-day {
  font-size: 0.6rem;
  color: var(--bulma-primary);
  font-family: 'Vazirmatn', sans-serif !important;
  margin-top: 1px;
}
.flatpickr-days { height: auto !important; }
.flatpickr-calendar { width: auto !important; }
.dayContainer { min-width: 100% !important; }
.jalali-month-label {
  text-align: center;
  font-size: 0.72rem;
  color: var(--bulma-text-light);
  font-family: 'Vazirmatn', sans-serif !important;
  margin-top: -2px;
  margin-bottom: 4px;
}

a { color: var(--bulma-link) !important; }
a:hover { color: var(--bulma-link-hover) !important; }
::selection { background: var(--bulma-primary-light); color: var(--bulma-text-strong); }

/* Auto-detect text direction per element based on its own content —
   Persian text flows RTL, English/numbers stay LTR, page structure stays LTR */
body, h1, h2, h3, h4, p, span, a, li, td, th, label, .title, .subtitle,
.project-menu-title, .task-id, .kanban-card__title-link, .label, .tag,
input, textarea, .field-label, .menu-item-icon + *, button, .button {
  unicode-bidi: plaintext !important;
}

/* Final readability safety net */
.box, .card, .modal-card, .dropdown-content, .navbar, .menu-container, .notification, table.table {
  color: var(--bulma-text) !important;
}

/* View switcher tabs (List/Gantt/Table/Kanban) — real class is switch-view-button, not .button */
.switch-view {
  border-bottom: 1px solid var(--bulma-border) !important;
  display: flex !important;
  gap: 4px;
}
.switch-view-button {
  color: var(--bulma-text-light) !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: var(--bulma-radius-small) var(--bulma-radius-small) 0 0 !important;
  border-bottom: 2px solid transparent !important;
  transition: color 150ms ease, background-color 150ms ease !important;
}
.switch-view-button:hover {
  color: var(--bulma-text) !important;
  background: var(--bulma-scheme-main-ter) !important;
}
.switch-view-button.is-active {
  color: var(--bulma-primary) !important;
  border-bottom-color: var(--bulma-primary) !important;
  background: transparent !important;
}

/* Generic fallback for Vikunja's own button component, wherever .button isn't also present */
.base-button:not(.button) {
  color: var(--bulma-text) !important;
  transition: color 150ms ease, background-color 150ms ease !important;
}