@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Flex:opsz,wght@8..144,400..700&display=swap");

/* Vilni Tasks — Google Material Design поверх Planka (Gravity UI).
   Токени Material 3 / Google-продуктів (Gmail/Drive-стиль): Google Blue,
   світлі поверхні, Roboto, Material elevation + shape.
   Світла тема форситься у brand.js. ⚠️ hashed-класи лого (_45te1_) під
   поточний білд; решта — підрядкові селектори, стійкі до оновлень. */

.g-root_theme_light,
.g-root_theme_dark,
:root {
  /* ── Material color: Google Blue primary ── */
  --g-color-base-brand: #1a73e8 !important;
  --g-color-base-brand-hover: #1b66c9 !important;
  --g-color-line-brand: #1a73e8 !important;
  --g-color-text-brand: #1a73e8 !important;
  --g-color-text-brand-heavy: #174ea6 !important;
  --g-color-text-brand-contrast: #ffffff !important;
  --g-color-text-link: #1a73e8 !important;
  --g-color-text-link-hover: #174ea6 !important;
  --g-color-base-selection: #e8f0fe !important;          /* Google light-blue hover */
  --g-color-base-selection-hover: #d2e3fc !important;

  /* ── Google neutrals (текст/лінії) ── */
  --g-color-text-primary: #202124 !important;            /* Google near-black */
  --g-color-text-complementary: #5f6368 !important;      /* Google grey */
  --g-color-text-secondary: #5f6368 !important;
  --g-color-text-hint: #80868b !important;
  --g-color-line-generic: #dadce0 !important;            /* Google border */
  --g-color-line-generic-hover: #c4c7c5 !important;

  /* ── Material shape (заокруглення) ── */
  --g-border-radius-xs: 6px !important;
  --g-border-radius-s: 8px !important;
  --g-border-radius-m: 12px !important;
  --g-border-radius-l: 16px !important;
  --g-border-radius-xl: 28px !important;

  /* ── Roboto (шрифт Google/Material) ── */
  --g-font-family-sans: "Roboto", "Roboto Flex", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif !important;
}

/* поверхні: світло-сірий фон + білі картки — для ОБОХ тем (робимо темну світлою через CSS,
   щоб не форсити клас у JS і не ламати React) */
.g-root_theme_light, .g-root_theme_dark {
  --g-color-base-background: #f0f4f9 !important;          /* Google surface-container */
  --g-color-base-generic: #ffffff !important;
  --g-color-base-float: #ffffff !important;
  --g-color-base-float-medium: #ffffff !important;
  --g-color-base-float-heavy: #f1f3f4 !important;
  --g-color-base-simple-hover: #f1f3f4 !important;
}
/* .g-root має ТЕМНИЙ bg попри тему — форсуємо світлий (це і є «чорний фон») */
.g-root, [class*="g-root"] { background-color: #f0f4f9 !important; }

/* ── Хедер board: був білий текст під темний фон → світлий бар + темний текст (Gmail) ── */
[class*="_wrapper_1o9kk"] {
  background: #ffffff !important;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08) !important;
}
[class*="_wrapper_jdrq3"], [class*="_wrapper_rbzeo"], [class*="_wrapper_18h1r"] {
  background: transparent !important;
}
/* увесь текст/іконки хедера → темні (крім кольорового аватара) */
[class*="_wrapper_1o9kk"] *:not([class*="_initials_"]):not([class*="_wrapper_rbde9_"]) {
  color: #3c4043 !important;
}

html, body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }


/* ── Картка задачі (.card з hashed _wrapper_) — заокруглення + Material-тінь ── */
.card[class*="_wrapper_"],
[class*="_card_"] {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .12), 0 1px 3px 1px rgba(60, 64, 67, .08) !important;
  transition: box-shadow .2s ease !important;
}
.card[class*="_wrapper_"]:hover {
  box-shadow: 0 1px 3px rgba(60, 64, 67, .2), 0 4px 8px 3px rgba(60, 64, 67, .12) !important;
}
/* колонки/списки — заокруглення */
[class*="_listWrapper_"],
[class*="_innerWrapper_"],
[class*="_list_"] { border-radius: 16px !important; }

/* ── Кнопки в стилі Material 3 (pill) ── */
.g-button { border-radius: 20px !important; font-weight: 500 !important; letter-spacing: .15px; }
.g-button_view_action { box-shadow: 0 1px 2px rgba(26, 115, 232, .3) !important; }
.g-button_view_action:hover { box-shadow: 0 1px 3px rgba(26, 115, 232, .4), 0 2px 6px 2px rgba(26, 115, 232, .15) !important; }

/* поля вводу — мʼякі заокруглення */
.g-text-input__control, [class*="_input_"] { border-radius: 8px !important; }

/* ── Хедер-лого «PLANKA» (проєкти) → Vilni Tasks: ховаємо текст, ставимо лого ── */
a[class*="_title_jdrq3"], a[class*="_logo_jdrq3"] {
  font-size: 0 !important;                 /* сховати слово PLANKA */
  width: 132px !important;
  height: 30px !important;
  background: url("/branding/logo.svg") left center / contain no-repeat !important;
}

/* ── Плитка «Створити проєкт» (add tile): була білий-48% → невидима на світлому ── */
[class*="_addButton_suzcb"] {
  color: #1a73e8 !important;
  background: #f8faff !important;
  border: 2px dashed #c4d3ec !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease !important;
}
[class*="_addButton_suzcb"]:hover {
  background: #eef4ff !important;
  border-color: #1a73e8 !important;
}
[class*="_addButtonTitle_suzcb"] { color: #1a73e8 !important; font-weight: 500 !important; opacity: 1 !important; }
[class*="_addButton_suzcb"] svg,
[class*="_addButton_suzcb"] i { color: #1a73e8 !important; fill: #1a73e8 !important; opacity: 1 !important; }

/* ── Login: лого «Vilni Tasks» + прибрати Planka ── */
._logo_45te1_70 { display: none !important; }
._logoWrapper_45te1_74 {
  height: 60px;
  background: url("/branding/logo.svg") center / contain no-repeat;
}
._poweredBy_45te1_79 { display: none !important; }
img[alt="Planka" i] { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   MATERIAL OVERHAUL (v7) — глибокий Google-стиль поверх Semantic UI + Gravity.
   Semantic-компоненти Planka досі мали шрифт Nunitoga + темні фони rgba(0,0,0,.24)
   + radius 3px — це й робило вигляд «сирим». Тут це системно виправляємо.
   ═════════════════════════════════════════════════════════════════════════ */

:root { --vilni-font: "Roboto","Roboto Flex",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }

/* — 1. Шрифт Roboto (вбити Nunitoga зі Semantic), але НЕ чіпати .icon —
   широкий [class*="_"]/`.ui` ламав шрифт іконок Semantic (зірка/таргет → □). */
html, body, button, input, textarea, select, optgroup,
.ui.button, .ui.input > input, .ui.dropdown > .text, .ui.dropdown > input,
.ui.header, .ui.menu .item, .ui.label, .ui.form, p, span:not([class*="icon"]),
h1, h2, h3, h4, a {
  font-family: var(--vilni-font) !important;
}
/* НЕ чіпаємо шрифт іконок: Semantic має 3 шрифти (Icons/outline-icons/brand-icons)
   з різними гліфами на однакових кодах — будь-який override їх ламає. */

/* — 2. Пошук на борді → Google-pill (світло-сірий, без рамки, заокруглений) — */
.ui.input > input,
.ui.icon.input > input {
  background: #f1f3f4 !important;
  color: #202124 !important;
  border: 1px solid transparent !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  padding: 9px 16px !important;
  transition: background .15s, box-shadow .15s, border-color .15s !important;
}
.ui.input > input::placeholder { color: #5f6368 !important; opacity: 1 !important; }
.ui.input > input:focus,
.ui.icon.input > input:focus {
  background: #fff !important;
  border-color: #dadce0 !important;
  box-shadow: 0 1px 3px rgba(60,64,67,.18) !important;
}
.ui.icon.input > i.icon { color: #5f6368 !important; opacity: 1 !important; }

/* — 3. Semantic-кнопки → Material (subtle) — */
.ui.button {
  background: #f1f3f4 !important;
  color: #3c4043 !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: background .15s, box-shadow .15s !important;
}
.ui.button:hover { background: #e8eaed !important; color: #202124 !important; }
.ui.button:active { background: #dde1e6 !important; }
/* круглі icon-кнопки (add member тощо) лишаємо круглими, але світлими */
.ui.icon.button { background: #f1f3f4 !important; color: #5f6368 !important; }
.ui.icon.button:hover { background: #e8eaed !important; color: #202124 !important; }
/* кольорові/основні кнопки не чіпаємо */
.ui.button.primary, .ui.primary.button { background: #1a73e8 !important; color: #fff !important; }
.ui.button.primary:hover { background: #1b66c9 !important; }

/* — 4. Мітки-чіпи (пріоритет) → Material chip (pill, 500) — */
.ui.label, [class*="_label_"] {
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  letter-spacing: .3px !important;
  padding: 4px 10px !important;
  box-shadow: none !important;
}

/* — 5. Dropdown / меню → Material elevation — */
.ui.dropdown .menu, .ui.menu,
[class*="_popup"], [class*="popup"] [class*="_content"] {
  border-radius: 12px !important;
}
.ui.dropdown { border-radius: 8px !important; }

/* — 6. Колонки → Google-поверхні (білі, м'яка тінь, простір) — */
[class*="_listWrapper_"], [class*="_innerWrapper_"] {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.05) !important;
  padding: 4px !important;
}
[class*="_name_"][class*="_list"], [class*="_listName"], [class*="_headerName"] {
  font-weight: 500 !important; letter-spacing: .1px !important; color: #202124 !important;
}

/* — 7. Картки → плоскі Material (білі, 1px бордер, мінімальна тінь) — */
.card[class*="_wrapper_"] {
  border: 1px solid #e8eaed !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.card[class*="_wrapper_"]:hover {
  border-color: #d2e3fc !important;
  box-shadow: 0 1px 3px rgba(60,64,67,.16) !important;
}

/* — 8. «+ Додати картку / іншу картку» → Google-blue text button — */
[class*="_addCard"], [class*="_addAnother"], a[class*="_add"] {
  color: #1a73e8 !important; font-weight: 500 !important; border-radius: 8px !important;
}
[class*="_addCard"]:hover, [class*="_addAnother"]:hover { background: #e8f0fe !important; }

/* — 9. Хедер board → Gmail (чисто-білий, тонкий бордер, простір) — */
[class*="_wrapper_1o9kk"] {
  background: #ffffff !important;
  box-shadow: inset 0 -1px 0 #e8eaed !important;
}

/* — 10. Таб-плитка проєкту (board tab «ЛексусПарк») → Material chip — */
[class*="_tab"] { border-radius: 10px 10px 0 0 !important; font-weight: 500 !important; }

/* — 11. Аватари — рівні кола, Google-кольори лишаємо — */
[class*="_initials_"] { font-weight: 500 !important; letter-spacing: .3px !important; }

/* — 12. Скролбари у Google-стилі — */
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-thumb { background: #dadce0; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #bdc1c6; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }


/* ── (v9) Плитка проєкту → Google-градієнт. Сірий малює шар _cover_vr1u9 (rgb 85,85,85)
   + чорний ::after — даємо градієнт йому, scrim робимо легким для контрасту тексту. ── */
[class*="_wrapper_vr1u9"], [class*="_cover_vr1u9"] {
  background-image: linear-gradient(135deg, #4285f4 0%, #1a73e8 55%, #174ea6 100%) !important;
  background-color: transparent !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
[class*="_cover_vr1u9"]::after { background: rgba(0, 0, 0, .14) !important; }   /* легкий scrim */
[class*="_wrapper_vr1u9"] [class*="_title_vr1u9"] { color: #fff !important; font-weight: 600 !important; }

/* ── (v9) Таб дошки → Material (активний: білий + синій індикатор знизу) ── */
[class*="_tab_cjxaz"] { background: transparent !important; border-radius: 10px 10px 0 0 !important; }
[class*="_tabActive_cjxaz"] {
  background: #ffffff !important;
  box-shadow: inset 0 -3px 0 #1a73e8 !important;
}
[class*="_tabActive_cjxaz"] [class*="_name_cjxaz"] { color: #1a73e8 !important; font-weight: 600 !important; }
[class*="_tab_cjxaz"]:hover { background: #f1f3f4 !important; }

/* ── (v9) Скрім модалки картки → Material scrim ── */
[class*="_overlay"], .ui.dimmer, [class*="_modalOverlay"] { background: rgba(32,33,36,.5) !important; }

/* ── (v9) Заголовок колонки — Google type ── */
[class*="_headerName_"], [class*="_name_"][class*="header"] {
  font-weight: 600 !important; font-size: 14px !important; letter-spacing: .1px !important;
}


/* ── (v11) Login: сховати «PLANKA», фото-cover → Google-градієнт ── */
h1._formTitle_45te1_36 { display: none !important; }
[class*="_cover_45te1"],
.ten.wide.computer.column {
  background-image: linear-gradient(135deg, #1a73e8 0%, #1559b8 55%, #174ea6 100%) !important;
  background-color: #1a73e8 !important;
}
/* login інпути — чистіші (білі, тонкий бордер замість сірої заливки) */
.ui.fluid.input > input {
  background: #fff !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
}
.ui.fluid.input > input:focus { border-color: #1a73e8 !important; box-shadow: 0 0 0 1px #1a73e8 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM (v12) — прибрати дешевий НЕЙТРАЛЬНИЙ СІРИЙ та жорсткі ОБВОДКИ.
   Принцип Google/Material 3: відокремлювати не сірими рамками/заливками, а
   М'ЯКОЮ ЕЛЕВАЦІЄЮ (тінь) + ледь СИНЮВАТИМ тоном (а не нейтральним сірим).
   ═════════════════════════════════════════════════════════════════════════ */

/* токени: hover/поверхні/лінії → холодний синюватий тон (не сірий) */
.g-root_theme_light, .g-root_theme_dark {
  --g-color-base-simple-hover: #e8f0fe !important;     /* Google hover-blue */
  --g-color-base-float-heavy: #eef2fb !important;
  --g-color-line-generic: #e9edf6 !important;          /* ледь видима, холодна */
  --g-color-line-generic-hover: #d7e0f0 !important;
}
/* фон застосунку — чистіший, трохи холодний (не сіро-білий) */
.g-root, [class*="g-root"] { background-color: #f6f8fc !important; }

/* — Пошук: чистий тональний pill (легка синь), без сірого, без рамки — */
.ui.input > input, .ui.icon.input > input {
  background: #eef2fb !important;
  border: none !important;
  border-radius: 26px !important;
  box-shadow: none !important;
}
.ui.input > input:focus, .ui.icon.input > input:focus {
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(26,115,232,.22), 0 2px 8px 2px rgba(26,115,232,.08) !important;
}

/* — Semantic-кнопки/фільтри: прибрати сіру заливку → тональна синь, hover яскравіше — */
.ui.button, .ui.icon.button {
  background: #eef2fb !important;
  color: #3c4043 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 20px !important;
}
.ui.button:hover, .ui.icon.button:hover { background: #e8f0fe !important; color: #1a73e8 !important; }
.ui.button:active, .ui.button.active, .ui.active.button { background: #d3e3fd !important; color: #174ea6 !important; }
.ui.button.primary, .ui.primary.button { background: #1a73e8 !important; color: #fff !important; }

/* — Картки: БЕЗ обводки → білі з м'якою Material-елевацією (Google-спосіб) — */
.card[class*="_wrapper_"], [class*="_card_"] {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(60,64,67,.10), 0 1px 3px 1px rgba(60,64,67,.05) !important;
}
.card[class*="_wrapper_"]:hover {
  box-shadow: 0 2px 4px rgba(26,115,232,.18), 0 4px 12px 2px rgba(60,64,67,.10) !important;
  transform: translateY(-1px) !important;
  transition: box-shadow .18s ease, transform .18s ease !important;
}

/* — Колонки: білі, м'яка тінь, БЕЗ сірих рамок/смуг — */
[class*="_listWrapper_"], [class*="_innerWrapper_"] {
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(60,64,67,.06), 0 6px 16px rgba(60,64,67,.05) !important;
}
/* винищити будь-які залишкові сірі рамки */
[class*="_card_"], [class*="_list"], [class*="_wrapper_"], .ui.segment, .ui.input,
[class*="_tab_cjxaz"] { border-color: transparent !important; }

/* — Скролбари: холодні, ледь видимі (не сірі) — */
*::-webkit-scrollbar-thumb { background: #cdd8ec !important; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #b4c3e0 !important; background-clip: content-box; }

/* — Хедер board: тонка холодна лінія замість сірої — */
[class*="_wrapper_1o9kk"] { box-shadow: inset 0 -1px 0 #e9edf6 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM v13 — добити Planka «subtle grey» #0000003d (rgba(0,0,0,.24)) на пілюлях.
   Це й був найдешевший сірий. → Material 3 tonal chip (світло-синій secondary-container).
   Текст/зірку, що були білими під сірим, робимо синіми/темними під світлий фон.
   ═════════════════════════════════════════════════════════════════════════ */
[class*="_filterLabel_uc4mw"], [class*="_favoriteButton_vr1u9"],
[class*="_addButton_1lbjc"], [class*="_addButton_u3rl2"],
[class*="_othersButton_"], [class*="_actionBarItem_"],
[class*="_button_1cyxy"], [class*="_button_ygjr8"], [class*="_wrapper_jdrq3_89"] {
  background: #e8f0fe !important;            /* Google secondary-container, не сірий */
  color: #1967d2 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease !important;
}
[class*="_filterLabel_uc4mw"]:hover, [class*="_favoriteButton_vr1u9"]:hover,
[class*="_addButton_1lbjc"]:hover, [class*="_addButton_u3rl2"]:hover,
[class*="_othersButton_"]:hover, [class*="_actionBarItem_"]:hover,
[class*="_button_1cyxy"]:hover, [class*="_button_ygjr8"]:hover {
  background: #d3e3fd !important; color: #174ea6 !important;
}
/* зірка favourite була біла (під сірий) → сіро-синя під світлий tonal */
[class*="_favoriteButton_vr1u9"] i.icon { color: #5f6368 !important; }
[class*="_favoriteButton_vr1u9"].active i.icon,
[class*="_favoriteButton_vr1u9"] i.icon.yellow { color: #f9ab00 !important; }   /* активна — Google-жовта */
/* перемикач активного виду (вибраний) — насиченіша синь */
[class*="_actionBarItem_"][class*="active"], [class*="_actionBarItemActive_"] {
  background: #d3e3fd !important; color: #174ea6 !important;
}


/* ── (v14) Колонка: зовнішній сірий шар _outerWrapper_hsqrn (#dfe3e6) → білий+тінь ── */
[class*="_outerWrapper_hsqrn"] {
  background: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(60,64,67,.06), 0 6px 16px rgba(60,64,67,.05) !important;
}
[class*="_innerWrapper_hsqrn"] { background: transparent !important; box-shadow: none !important; }

/* ── (v14) Верхній бар-меню _wrapper_jdrq3 був сірий→я зробив синім; треба прозорий ── */
[class*="_wrapper_jdrq3"] { background: transparent !important; }


/* ── (v15) добити останній сірий ── */
/* пілюля зірка+аватар _wrapper_1gfxr (сірий 8%) → прозора; зірка сіро-синя */
[class*="_wrapper_1gfxr"] { background: transparent !important; }
[class*="_icon_1gfxr"] { color: #5f6368 !important; }
/* «+ Додати картку/список» — прибрати сіру заливку #0000003d, лишити синій текст + tonal-hover */
[class*="_addCardButton_"], [class*="_addListButton_"] {
  background: transparent !important; color: #1a73e8 !important; box-shadow: none !important;
}
[class*="_addCardButton_"]:hover, [class*="_addListButton_"]:hover { background: #e8f0fe !important; }


/* ── (v16) Плитки «Створити проект» → чисті білі картки з м'якою тінню (без сірого/обводки) ── */
[class*="_addButton_suzcb"] {
  background: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(60,64,67,.10), 0 1px 3px 1px rgba(60,64,67,.05) !important;
}
[class*="_addButton_suzcb"]:hover {
  background: #f8fbff !important;
  box-shadow: 0 2px 6px rgba(26,115,232,.18), 0 4px 12px rgba(60,64,67,.10) !important;
  transform: translateY(-1px) !important;
}