/* ═══════════════════════════════════════════
   VELMOR TASKS — Web UI Theme
   Varsayilan: light mode. Dark mode: body data-theme="dark"
   ═══════════════════════════════════════════ */

/* Light mode (varsayilan) */
:root,
:root[data-bs-theme="light"],
[data-theme="light"] {
  /* Template light palette */
  --bg:           #f5f5f7;
  --bg-surface:   #ffffff;
  --bg-card:      #ffffff;
  --bg-card-hover:#f8f8fa;
  --bg-input:     rgba(0,0,0,0.03);
  --bg-overlay:   rgba(0,0,0,0.35);
  --bg-column:    rgba(0,0,0,0.015);

  --border:       rgba(0,0,0,0.07);
  --border-accent:rgba(99,102,241,0.12);

  --text:         #111118;
  --text-sec:     #72747e;
  --text-dim:     #c4c6ce;

  --accent:       #6366F1;
  --accent-light: #818CF8;
  --accent-glow:  rgba(99,102,241,0.08);
  --accent-solid: rgba(99,102,241,0.06);

  --coral:        #E8453E;
  --coral-bg:     rgba(232,69,62,0.05);
  --sage:         #059669;
  --sage-bg:      rgba(5,150,105,0.05);
  --amber:        #D97706;
  --amber-bg:     rgba(217,119,6,0.05);
  --blue:         #3B82F6;
  --blue-bg:      rgba(59,130,246,0.05);

  --sidebar-w:    260px;
  --sidebar-bg:   #ffffff;
  --sidebar-hover:rgba(0,0,0,0.03);
  --sidebar-active:rgba(99,102,241,0.08);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

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

  /* Kanban kolon — arka plandan ayrılsın */
  --bg-kanban-col: #fafbfc;
  --kanban-col-border: rgba(0, 0, 0, 0.12);
  --kanban-col-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  --kanban-col-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.12);

  /* Geriye uyumluluk */
  --c-bg: var(--bg);
  --c-surface: var(--bg-surface);
  --c-surface-muted: #f8fafc;
  --c-border: var(--border);
  --c-text: var(--text);
  --c-muted: var(--text-sec);
  --c-primary: var(--accent);
  --c-accent: var(--sage);
  --sh-1: 0 10px 18px rgba(15, 23, 42, 0.04);
  --sh-2: 0 18px 40px rgba(15, 23, 42, 0.12);
  --t-fast: 140ms;
  --t-med: 180ms;
  --app-bg: var(--bg);
  --surface-bg: var(--bg-surface);
  --border-color: var(--border);
  --text-primary: var(--text);
  --text-muted: var(--text-sec);
  --brand-primary: var(--accent);
  --brand-primary-soft: var(--accent-solid);
  --success-soft: var(--sage-bg);
  --warning-soft: var(--amber-bg);
  --danger-soft: var(--coral-bg);
  --shadow-soft: var(--sh-1);
  --radius-lg: var(--r-lg);
  --radius-md: var(--r-md);
  --radius-sm: var(--r-sm);
}

/* Dark mode (secilebilir) */
[data-theme="dark"],
:root[data-bs-theme="dark"] {
  --bg:           #0e1015;
  --bg-surface:   #14161d;
  --bg-card:      #1a1c24;
  --bg-card-hover:#20222c;
  --bg-input:     rgba(255,255,255,0.04);
  --bg-overlay:   rgba(0,0,0,0.55);
  --bg-column:    rgba(255,255,255,0.018);

  --border:       rgba(255,255,255,0.06);
  --border-accent:rgba(129,140,248,0.15);

  --text:         #e8e9ef;
  --text-sec:     #6e717e;
  --text-dim:     #3a3c46;

  --accent:       #818CF8;
  --accent-light: #A5B4FC;
  --accent-glow:  rgba(129,140,248,0.12);
  --accent-solid: rgba(129,140,248,0.08);

  --coral:        #F97066;
  --coral-bg:     rgba(249,112,102,0.07);
  --sage:         #34D399;
  --sage-bg:      rgba(52,211,153,0.07);
  --amber:        #FBBF24;
  --amber-bg:     rgba(251,191,36,0.07);
  --blue:         #60A5FA;
  --blue-bg:      rgba(96,165,250,0.07);

  --sidebar-bg:   #0b0d12;
  --sidebar-hover:rgba(255,255,255,0.04);
  --sidebar-active:rgba(129,140,248,0.1);

  --bg-kanban-col: #1e2028;
  --kanban-col-border: rgba(255, 255, 255, 0.1);
  --kanban-col-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --kanban-col-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.45);

  --sh-1: 0 10px 18px rgba(15, 23, 42, 0.6);
  --sh-2: 0 22px 45px rgba(15, 23, 42, 0.85);

  --c-bg: var(--bg);
  --c-surface: var(--bg-surface);
  --c-surface-muted: #0b1120;
  --c-border: var(--border);
  --c-text: var(--text);
  --c-muted: var(--text-sec);
  --c-primary: var(--accent);
  --app-bg: var(--bg);
  --surface-bg: var(--bg-surface);
  --border-color: var(--border);
  --text-primary: var(--text);
  --text-muted: var(--text-sec);
  --brand-primary: var(--accent);
  --brand-primary-soft: var(--accent-solid);
  --success-soft: var(--sage-bg);
  --warning-soft: var(--amber-bg);
  --danger-soft: var(--coral-bg);
  --shadow-soft: var(--sh-1);
}

body {
  color: var(--text-primary);
  background: var(--app-bg);
}

.card,
.modal-content,
.list-group-item {
  border-color: var(--border-color);
  border-radius: var(--radius-md);
}

.shadow-sm,
.card,
.modal-content {
  box-shadow: var(--shadow-soft);
}

.text-muted {
  color: var(--text-muted) !important;
}

.btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--accent-light);
  border-color: var(--accent-light);
}

/* Form input stilleri — dark mode uyumlu */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select,
:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select,
body[data-bs-theme="dark"] .form-control,
body[data-bs-theme="dark"] .form-select,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select,
body[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
body[data-theme="dark"] textarea,
body[data-theme="dark"] select,
:root[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
:root[data-bs-theme="dark"] textarea,
:root[data-bs-theme="dark"] select,
body[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
body[data-bs-theme="dark"] textarea,
body[data-bs-theme="dark"] select {
  background-color: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
body[data-theme="dark"] .form-control:focus,
body[data-theme="dark"] .form-select:focus,
:root[data-bs-theme="dark"] .form-control:focus,
:root[data-bs-theme="dark"] .form-select:focus,
body[data-bs-theme="dark"] .form-control:focus,
body[data-bs-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
body[data-theme="dark"] input:focus:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
body[data-theme="dark"] textarea:focus,
body[data-theme="dark"] select:focus,
:root[data-bs-theme="dark"] input:focus:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
:root[data-bs-theme="dark"] textarea:focus,
:root[data-bs-theme="dark"] select:focus,
body[data-bs-theme="dark"] input:focus:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
body[data-bs-theme="dark"] textarea:focus,
body[data-bs-theme="dark"] select:focus {
  background-color: var(--bg-input) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 0.25rem var(--accent-glow) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea::placeholder,
body[data-theme="dark"] .form-control::placeholder,
body[data-theme="dark"] textarea::placeholder,
:root[data-bs-theme="dark"] .form-control::placeholder,
:root[data-bs-theme="dark"] textarea::placeholder,
body[data-bs-theme="dark"] .form-control::placeholder,
body[data-bs-theme="dark"] textarea::placeholder {
  color: var(--text-dim) !important;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled,
body[data-theme="dark"] .form-control:disabled,
body[data-theme="dark"] .form-select:disabled,
:root[data-bs-theme="dark"] .form-control:disabled,
:root[data-bs-theme="dark"] .form-select:disabled,
body[data-bs-theme="dark"] .form-control:disabled,
body[data-bs-theme="dark"] .form-select:disabled,
[data-theme="dark"] input:disabled:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] select:disabled,
body[data-theme="dark"] input:disabled:not([type="checkbox"]):not([type="radio"]),
body[data-theme="dark"] textarea:disabled,
body[data-theme="dark"] select:disabled,
:root[data-bs-theme="dark"] input:disabled:not([type="checkbox"]):not([type="radio"]),
:root[data-bs-theme="dark"] textarea:disabled,
:root[data-bs-theme="dark"] select:disabled,
body[data-bs-theme="dark"] input:disabled:not([type="checkbox"]):not([type="radio"]),
body[data-bs-theme="dark"] textarea:disabled,
body[data-bs-theme="dark"] select:disabled {
  background-color: var(--bg-input) !important;
  opacity: 0.6;
  color: var(--text-sec) !important;
}

/* Bootstrap dropdown dark mode */
[data-theme="dark"] .dropdown-menu,
body[data-theme="dark"] .dropdown-menu,
:root[data-bs-theme="dark"] .dropdown-menu,
body[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .dropdown-item,
body[data-theme="dark"] .dropdown-item,
:root[data-bs-theme="dark"] .dropdown-item,
body[data-bs-theme="dark"] .dropdown-item {
  color: var(--text) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
body[data-theme="dark"] .dropdown-item:hover,
body[data-theme="dark"] .dropdown-item:focus,
:root[data-bs-theme="dark"] .dropdown-item:hover,
:root[data-bs-theme="dark"] .dropdown-item:focus,
body[data-bs-theme="dark"] .dropdown-item:hover,
body[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--bg-input) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active,
body[data-theme="dark"] .dropdown-item.active,
body[data-theme="dark"] .dropdown-item:active,
:root[data-bs-theme="dark"] .dropdown-item.active,
:root[data-bs-theme="dark"] .dropdown-item:active,
body[data-bs-theme="dark"] .dropdown-item.active,
body[data-bs-theme="dark"] .dropdown-item:active {
  background-color: var(--accent-solid) !important;
  color: var(--accent) !important;
}

/* Modal dark mode */
[data-theme="dark"] .modal-content,
body[data-theme="dark"] .modal-content,
:root[data-bs-theme="dark"] .modal-content,
body[data-bs-theme="dark"] .modal-content {
  background-color: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .modal-header,
body[data-theme="dark"] .modal-header,
:root[data-bs-theme="dark"] .modal-header,
body[data-bs-theme="dark"] .modal-header {
  border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .modal-footer,
body[data-theme="dark"] .modal-footer,
:root[data-bs-theme="dark"] .modal-footer,
body[data-bs-theme="dark"] .modal-footer {
  border-top-color: var(--border) !important;
}

/* List group dark mode */
[data-theme="dark"] .list-group-item,
body[data-theme="dark"] .list-group-item,
:root[data-bs-theme="dark"] .list-group-item,
body[data-bs-theme="dark"] .list-group-item {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .list-group-item:hover,
body[data-theme="dark"] .list-group-item:hover,
:root[data-bs-theme="dark"] .list-group-item:hover,
body[data-bs-theme="dark"] .list-group-item:hover {
  background-color: var(--bg-card-hover) !important;
}

/* Alert dark mode */
[data-theme="dark"] .alert,
body[data-theme="dark"] .alert,
:root[data-bs-theme="dark"] .alert,
body[data-bs-theme="dark"] .alert {
  border-color: var(--border) !important;
}

[data-theme="dark"] .alert-light,
body[data-theme="dark"] .alert-light,
:root[data-bs-theme="dark"] .alert-light,
body[data-bs-theme="dark"] .alert-light {
  background-color: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}