/* =========================================================
   Vikunja - SUPER PREMIUM LIGHT (Any.do-like)
   - Clean + airy spacing
   - Soft cards + premium shadows
   - Any.do-ish blue accents
   - Includes a final Light-Enforcement section to remove
     any dark leftovers (login/modals/editor/dropdowns)
   ========================================================= */

/* -------------------------
   Tokens
-------------------------- */
:root{
  --bg: #f6f7fb;
  --bg2: #f2f5ff;

  --surface: #ffffff;
  --surface2: #fbfcff;
  --surface3: #f7f9ff;

  --text: #1f2430;
  --text2: rgba(31,36,48,.86);
  --muted: rgba(31,36,48,.68);

  --line: rgba(31,36,48,.10);
  --line2: rgba(31,36,48,.08);

  --primary: #2f6df6;
  --primary2: #245fe6;

  --radius: 16px;
  --radius-sm: 12px;

  --shadow-xl: 0 26px 70px rgba(16, 24, 40, .14);
  --shadow-lg: 0 18px 44px rgba(16, 24, 40, .12);
  --shadow-md: 0 12px 26px rgba(16, 24, 40, .10);
  --shadow-sm: 0 8px 18px rgba(16, 24, 40, .08);

  --focus: 0 0 0 4px rgba(47,109,246,.18);
}

/* -------------------------
   Base
-------------------------- */
html, body{
  background:
    radial-gradient(1100px 700px at 18% -10%, rgba(47,109,246,.10), transparent 55%),
    radial-gradient(900px 600px at 110% 10%, rgba(110,231,255,.10), transparent 55%),
    radial-gradient(900px 600px at 40% 120%, rgba(144,97,249,.06), transparent 55%),
    var(--bg) !important;
  color: var(--text) !important;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, input, button, textarea, select{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial !important;
}

a{
  color: rgba(31,36,48,.88) !important;
  text-decoration: none !important;
}
a:hover{
  color: #0f172a !important;
}

/* Nice focus */
*:focus-visible{
  outline: none !important;
  box-shadow: var(--focus) !important;
  border-radius: 10px;
}

/* -------------------------
   Topbar / Header (glass light)
-------------------------- */
.navbar, header, .topbar, .app-header{
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line2) !important;
  color: var(--text) !important;
}

/* -------------------------
   Sidebar
-------------------------- */
aside, .sidebar, .menu, .navigation, .left-nav{
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--line2) !important;
  color: var(--text) !important;
}

.menu-list a, .sidebar a{
  border-radius: 12px !important;
  padding: 9px 10px !important;
  color: var(--text2) !important;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.menu-list a:hover, .sidebar a:hover{
  background: rgba(47,109,246,.08) !important;
  box-shadow: 0 10px 22px rgba(16,24,40,.08);
  transform: translateY(-1px);
}

.menu-list a.is-active, .sidebar a.is-active{
  background: linear-gradient(180deg, rgba(47,109,246,.16), rgba(47,109,246,.08)) !important;
  box-shadow: 0 14px 26px rgba(16,24,40,.10);
  border: 1px solid rgba(47,109,246,.18) !important;
  color: rgba(15,23,42,.92) !important;
}

/* -------------------------
   Containers / cards / modals / dropdowns
-------------------------- */
.card, .box, .panel, .modal-card, .dropdown-content, .notification{
  background: linear-gradient(180deg, var(--surface2), var(--surface)) !important;
  border: 1px solid var(--line2) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--text) !important;
}

.modal-card, .dropdown-content{
  box-shadow: var(--shadow-lg) !important;
}

/* Modal overlay */
.modal, .modal-background, .overlay, .backdrop{
  background: rgba(15, 23, 42, .25) !important;
}

/* -------------------------
   Typography
-------------------------- */
h1,h2,h3,h4,h5,h6{
  color: var(--text) !important;
  letter-spacing: .15px;
}
p, span, div, li, td, th, small, strong, em{
  color: var(--text2) !important;
}

/* -------------------------
   Buttons
-------------------------- */
.button, button, .btn,
.base-button--type-button{
  border-radius: var(--radius-sm) !important;
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(31,36,48,.10) !important;
  color: rgba(31,36,48,.86) !important;
  box-shadow: var(--shadow-sm) !important;

  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.button:hover, button:hover, .btn:hover,
.base-button--type-button:hover{
  background: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(47,109,246,.18) !important;
}

.button:active, button:active, .btn:active,
.base-button--type-button:active{
  transform: translateY(0);
  box-shadow: var(--shadow-sm) !important;
}

/* Primary */
.button.is-primary, .btn-primary, button.primary{
  background: linear-gradient(180deg, var(--primary), var(--primary2)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0,0,0,.02) !important;
  box-shadow: 0 18px 34px rgba(47,109,246,.22), var(--shadow-sm) !important;
}

.button.is-primary:hover, .btn-primary:hover, button.primary:hover{
  box-shadow: 0 22px 40px rgba(47,109,246,.26), var(--shadow-md) !important;
}

/* Danger (subtle, premium) */
.button.is-danger, .danger, .delete, .remove{
  border-color: rgba(239,68,68,.20) !important;
}
.button.is-danger:hover, .danger:hover, .delete:hover, .remove:hover{
  background: rgba(239,68,68,.08) !important;
  border-color: rgba(239,68,68,.28) !important;
}

/* -------------------------
   Inputs
-------------------------- */
label, .label{
  color: rgba(31,36,48,.78) !important;
  font-weight: 600;
}

.input, input[type="text"], input[type="email"], input[type="password"], textarea, select{
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(31,36,48,.12) !important;
  color: rgba(31,36,48,.92) !important;

  border-radius: var(--radius-sm) !important;
  min-height: 42px !important;
  padding: 10px 12px !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

::placeholder{
  color: rgba(31,36,48,.45) !important;
}

.input:focus, input:focus, textarea:focus, select:focus{
  outline: none !important;
  border-color: rgba(47,109,246,.35) !important;
  box-shadow: var(--focus), 0 16px 30px rgba(16,24,40,.10) !important;
  background: #ffffff !important;
}

/* Select options readability */
select, select option{
  background: #ffffff !important;
  color: rgba(31,36,48,.92) !important;
}

/* -------------------------
   Tasks (list + kanban)
-------------------------- */
.task, .task-item, .list-item, .task-card, .kanban-card{
  background: linear-gradient(180deg, var(--surface2), var(--surface)) !important;
  border: 1px solid rgba(31,36,48,.08) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text) !important;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.task:hover, .task-item:hover, .list-item:hover, .task-card:hover, .kanban-card:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(47,109,246,.18) !important;
}

/* -------------------------
   Task detail: description & comments separation
-------------------------- */
.task-description, .description, .task-detail-description, .editor, .prosemirror, .ProseMirror{
  border: 1px solid rgba(31,36,48,.10) !important;
  background: rgba(255,255,255,.92) !important;
  border-radius: var(--radius) !important;
  padding: 14px 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  color: rgba(31,36,48,.92) !important;
}

.comments, .task-comments, .comment-section{
  border-top: 1px solid rgba(31,36,48,.08);
  padding-top: 14px !important;
}

/* H3 comments slightly smaller (~2pt) */
.comments h3, .task-comments h3, .comment-section h3{
  font-size: calc(1.25rem - 2.6px) !important;
  font-weight: 700 !important;
  color: rgba(31,36,48,.88) !important;
}

.comment, .comment-item{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(31,36,48,.08) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 10px 22px rgba(16,24,40,.06) !important;
  color: rgba(31,36,48,.92) !important;
}

/* -------------------------
   Login page (premium light)
-------------------------- */
.auth, .login, .auth-wrapper, .login-wrapper{
  color: rgba(31,36,48,.92) !important;
}

/* Login form container */
.auth form, .login form,
.auth .box, .login .box{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(31,36,48,.10) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-xl) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Dim left image a bit so text never looks washed out */
.auth .image, .login .image,
.auth .auth-image, .login .auth-image{
  filter: brightness(.85) contrast(1.05);
}

/* -------------------------
   Scrollbar (subtle)
-------------------------- */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{
  background: rgba(31,36,48,.16);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.9);
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(31,36,48,.22); }
*::-webkit-scrollbar-track{ background: rgba(255,255,255,.35); }

/* =========================================================
   LIGHT ENFORCEMENT (fix leftovers)
   - Forza background chiari e testi scuri su sezioni che
     a volte restano "dark" per classi specifiche
   ========================================================= */

/* Force light on common dark wrappers */
[class*="dark"], [data-theme="dark"]{
  /* non cambiamo temi globali via data-theme, ma impediamo
     che qualche wrapper "dark" rovini la pagina */
  background-color: transparent !important;
}

/* Main wrappers that sometimes keep dark colors */
.app, .app-container, .app-wrapper,
.main, main, .content, .page, .view,
.auth, .login, .auth-wrapper, .login-wrapper{
  color: rgba(31,36,48,.92) !important;
}

/* Ensure no dark panels remain */
.card, .box, .panel, .modal-card, .modal-content, .dropdown-content, .notification{
  background: #ffffff !important;
  color: rgba(31,36,48,.92) !important;
}

/* Ensure text never becomes white on light bg */
.auth *, .login *,
.modal-card *, .dropdown-content *{
  color: inherit;
}
.auth a, .login a{
  color: rgba(47,109,246,.92) !important;
}

/* Inputs again (some components re-apply styles) */
.auth input, .login input, .auth select, .login select,
.modal-card input, .modal-card select, .modal-card textarea,
.dropdown-content input, .dropdown-content select{
  background: #ffffff !important;
  color: rgba(31,36,48,.92) !important;
  border-color: rgba(31,36,48,.12) !important;
}

/* Options (Safari/Chromium quirks) */
select option{
  background: #ffffff !important;
  color: rgba(31,36,48,.92) !important;
}