/* Copyright © 2026 Baka Attila Tamás. Minden jog fenntartva / All rights reserved. Lásd / see: LICENSE */
/* ============================================================
   The Bubblegum look (v181; themes.php): sweet bubblegum pink: a hot-pink
   header, a polka-dot board, white cards on a pink ledge.
   Pacifico for the name, Fredoka for the names of things, Nunito for the rest.
   Cards carry the deadline as a band along the top; the + and the main
   buttons are pink with dark text, on a magenta ledge.

   Everything here is under html[data-skin="bubblegum"], so it does nothing in
   any other look. The tokens of style.css are all set again (light, then
   dark), then the shapes that differ. The colours are the design's
   (sampled from its mockups), a few adjusted to be read: the header's pink a
   shade deeper by day (white on it 3:1), the user's button a white pill,
   Sürgős's text dark, the done band lilac (the design gave it the yellow of
   soon); the people's and the tags' are made in its family from
   the hues of the default look's, each text 4.5:1 or better.
   ============================================================ */

/* The faces, self-hosted: Pacifico, Fredoka and Nunito (SIL OFL 1.1, see
   THIRD-PARTY-NOTICES.md), Fontsource's cuts: Latin, and Latin Extended for
   ő and ű, each fetched only when a page needs it. */
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Pacifico-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Pacifico-LatinExt.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('fonts/Fredoka-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('fonts/Fredoka-LatinExt.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('fonts/Nunito-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('fonts/Nunito-LatinExt.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 200 1000; font-display: swap;
  src: url('fonts/Nunito-Italic-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 200 1000; font-display: swap;
  src: url('fonts/Nunito-Italic-LatinExt.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokens: light ---------- */
html[data-skin="bubblegum"] {
  --search-lift: 0px;   /* the header's search box (v196): this face's lower case already sits in the middle */
  --bg: #fef1f8;
  --surface: #ffffff;
  --ink: #5d193a;
  --ink-2: #6c2e4c;
  --muted: #834e66;
  --line: #ede6e9;
  --line-strong: #cdb8c2;
  --accent: #f061a7;
  --accent-hi: #f274b2;
  --accent-text: #c42070;   /* links, project names */
  --accent-soft: #fce4f0;
  --danger: #b01b38;
  --danger-solid: #ffffff;   /* the bell's count (--bell-ink on it) */
  --stripe-none: transparent;   /* no deadline coming up: no band at all */
  --ok: #904563;
  --dl-late: #fe5860;
  --dl-soon: #fdd36d;
  --dl-done: #c9a3f2;   /* in the done column: the accent (the design gave it the yellow of soon) */
  --urgent-bg: #fe595f;
  --urgent-ink: #330617;
  --high: #551127;
  --prio3-bg: #fed36d;
  --low: #864066;
  --hover: #f6f2f4;
  --soft: #fee5f2;
  --count-bg: #fe6eb4;
  --count-ink: #490a2d;
  --hl-bg: #fdd36d;
  --hl-ink: #5d193a;
  --soft2: #faf8f9;
  --panel: #feeff6;
  --filter-bar: #fde4f0;
  --desc-bg: #feeff6;
  --input-bg: #fef3f9;
  --on-accent: #410e31;
  --warn-bg: #fef2d3;
  --warn-line: #fee5a7;
  --danger-soft: #ffdadc;
  --danger-chip: #b01b38;
  --scroll: #dec6d2;
  --scroll-hi: #ceb0bf;
  --scroll-board: #d7bdca;
  --ghost-hover: rgba(93, 25, 58, 0.06);
  --overlay: rgba(125, 68, 96, 0.32);
  --radius: 14px;
  --shadow: 0 1px 4px rgba(93, 25, 58, 0.06);
  --shadow-up: 0 4px 16px rgba(93, 25, 58, 0.14);
  --shadow-modal: 0 12px 40px rgba(93, 25, 58, 0.2);
  --font:         'Nunito', 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Fredoka', 'Nunito', 'Geist', system-ui, sans-serif;
  --font-mono:    var(--font);

  /* This look's own */
  --header-bg: #f061a7;
  --header-ink: #ffffff;
  --title-ink: #d4137d;
  --logo-ink: #ffffff;
  --logo-shadow: 1.5px 2px 0 #b4497d;
  --brand-name: #ffffff;
  --ledge: #f6c3dc;
  --button-ledge: #de1a87;
  --dot: #fbd5e8;
  --accent-fill: #fe6eb4;
  --accent-fill-hi: #fe88c2;
  --card-line: #f8cae0;
  --bell-ink: #610e3a;
  --check: #fe8bc6;
  --bar-1: #fea7d2;
  --bar-2: #fdc5e0;
  --focus: #c42070;
  /* The swatches (v167; themes.php): soft chips, deep text (6:1 or more). */
  --sw1-bg: #fee0dd; --sw1-fg: #763835;  --sw2-bg: #fee1d0; --sw2-fg: #713e18;  --sw3-bg: #f4e6ca; --sw3-fg: #624905;
  --sw4-bg: #e4eccf; --sw4-fg: #475413;  --sw5-bg: #d6f0da; --sw5-fg: #235a32;  --sw6-bg: #ccf1e9; --sw6-fg: #025a4f;
  --sw7-bg: #cbeff8; --sw7-fg: #075765;  --sw8-bg: #daeafe; --sw8-fg: #294e7c;  --sw9-bg: #e5e5ff; --sw9-fg: #49457b;
  --sw10-bg: #f4e0f9; --sw10-fg: #623c6a;  --sw11-bg: #fedeeb; --sw11-fg: #703753;  --sw12-bg: #e4e8f0; --sw12-fg: #464d5c;
}

/* ---------- tokens: dark ---------- */
html[data-skin="bubblegum"][data-theme="dark"] {
  --bg: #390f27;
  --surface: #481534;
  --ink: #fdeefb;
  --ink-2: #fad9ed;
  --muted: #f5b9d9;
  --line: #60314e;
  --line-strong: #79506a;
  --accent: #fea7d2;
  --accent-hi: #feb2d7;
  --accent-text: #f8aed5;
  --accent-soft: rgba(254, 167, 210, 0.22);
  --danger: #f58b9a;
  --danger-solid: #ffe3f1;
  --stripe-none: transparent;
  --ok: #c8bdbd;
  --dl-late: #fe595e;
  --dl-soon: #fdd36d;
  --dl-done: #c9a3f2;
  --urgent-bg: #fe595f;
  --urgent-ink: #330617;
  --high: #290b0a;
  --prio3-bg: #fed36d;
  --low: #f6b7d8;
  --hover: #51203e;
  --soft: #5b1f45;
  --count-bg: #fe6eb4;
  --count-ink: #331026;
  --hl-bg: #6b5a12;
  --hl-ink: #fff6d6;
  --soft2: #51203e;
  --panel: #2d0b23;
  --filter-bar: #4a1636;
  --desc-bg: #2d0b23;
  --input-bg: #29091e;
  --on-accent: #370d26;
  --warn-bg: #69373e;
  --warn-line: #90614b;
  --danger-soft: rgba(245, 139, 154, 0.16);
  --danger-chip: #f58b9a;
  --scroll: #603c51;
  --scroll-hi: #745267;
  --scroll-board: #68455a;
  --ghost-hover: rgba(253, 238, 251, 0.07);
  --overlay: rgba(17, 4, 12, 0.6);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-up: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, .55);

  /* This look's own */
  --header-bg: #af2e6e;
  --header-ink: #ffffff;
  --title-ink: #ffb6dc;
  --logo-ink: #ffe3f1;
  --logo-shadow: 0 0 8px rgba(255, 140, 200, .7);
  --brand-name: #fff1a6;
  --ledge: #250818;
  --button-ledge: #c4568e;
  --dot: #4a1636;
  --accent-fill: #fea7d2;
  --accent-fill-hi: #feb7da;
  --card-line: #5e1d48;
  --bell-ink: #390624;
  --check: #fe8bc6;
  --bar-1: #fea7d2;
  --bar-2: #fdc5e0;
  --focus: #f8aed5;
  /* The swatches (v167; themes.php): deep chips, light text (7:1 or more). */
  --sw1-bg: #462e2c; --sw1-fg: #fbcac6;  --sw2-bg: #443024; --sw2-fg: #f6ceb6;  --sw3-bg: #3e341f; --sw3-fg: #e8d5ae;
  --sw4-bg: #333823; --sw4-fg: #d2deb4;  --sw5-bg: #283b2c; --sw5-fg: #bee3c4;  --sw6-bg: #1f3c36; --sw6-fg: #b0e4d9;
  --sw7-bg: #1e3a41; --sw7-fg: #aee2ee;  --sw8-bg: #293648; --sw8-fg: #bfdafd;  --sw9-bg: #333347; --sw9-fg: #d3d3fc;
  --sw10-bg: #3e2f41; --sw10-fg: #e9ccef;  --sw11-bg: #442e38; --sw11-fg: #f6c9dc;  --sw12-bg: #33353b; --sw12-fg: #d2d8e3;
  color-scheme: dark;
}

/* ---------- the header: its own fill and the mark ---------- */
html[data-skin="bubblegum"] .toolbar { background: var(--header-bg); border-bottom-color: var(--card-line); }
html[data-skin="bubblegum"] .toolbar .filter-bar { background: var(--filter-bar); border-top-color: var(--line); }
/* The name: the default look's face and size (v178; 22px until v177), in the look's ink. */
html[data-skin="bubblegum"] .toolbar .brand { color: var(--logo-ink); }
/* The board's name before "Kanban" (v173): the link colour, or the look's own (Sandstone
   the bark brown of its mark, a shade deeper by day and lighter by night since v178 to read
   at regular size). */
html[data-skin="bubblegum"] .toolbar .brand-name, html[data-skin="bubblegum"] .login h1 .brand-name { color: var(--brand-name); }
html[data-skin="bubblegum"] .toolbar .brand::before,
html[data-skin="bubblegum"] .login h1::before { background: url("bubblegum-mark.svg") center / 26px 26px no-repeat; }
html[data-skin="bubblegum"] .user-btn { border: 1px solid var(--card-line); }
html[data-skin="bubblegum"] .presence.crowd .pav { box-shadow: 0 0 0 2px var(--header-bg); }

/* ---------- names of things: the default look's type (v179; a step larger until v178), in the titles' ink ---------- */
html[data-skin="bubblegum"] .col-head h2, html[data-skin="bubblegum"] .agenda-group h2 { color: var(--title-ink); }
html[data-skin="bubblegum"] .lane-label { color: var(--title-ink); }

/* ---------- the board ---------- */
/* A card: a thin edge; the deadline's colour is a band along the top (none
   when nothing is due), not down the left side — as in 1985 and Miami. */
html[data-skin="bubblegum"] .card {
  border: 1px solid var(--card-line);
  box-shadow: inset 0 5px 0 var(--card-color, transparent), var(--shadow);
  padding: 14px 12px 11px 12px;
}
html[data-skin="bubblegum"] .card:hover { box-shadow: inset 0 5px 0 var(--card-color, transparent), var(--shadow-up); }
html[data-skin="bubblegum"] .card .ticket-link { top: 17px; }
html[data-skin="bubblegum"] .card.sortable-drag { box-shadow: inset 0 5px 0 var(--card-color, transparent), var(--shadow-modal); }

/* An empty lane's outline: the lines are made for the cards, too faint on the board. */
html[data-skin="bubblegum"] .cards.lane:empty { border-color: var(--line-strong); }

/* The calendar (v171): each group's panel has the cards' edge; its rows keep
   the colour down the left side (none when nothing is due). */
html[data-skin="bubblegum"] .agenda-panel { border: 1px solid var(--card-line); }
html[data-skin="bubblegum"] .agenda-head { border-left: 1px solid transparent; border-right: 1px solid transparent; }

/* Chips: Sürgős and Magas solid with dark text, Alacsony an outline; the
   default look's type (v179; bolder until v178). */
html[data-skin="bubblegum"] .prio.p1 { background: transparent; color: var(--low); box-shadow: inset 0 0 0 1.5px var(--low); }
html[data-skin="bubblegum"] .detail-info .pick-trigger.pp4, html[data-skin="bubblegum"] .detail-info .pick-trigger.pp3 { border-color: transparent; }
html[data-skin="bubblegum"] .detail-info .pick-trigger.pp1 { background: transparent; color: var(--low); border-color: var(--low); }
/* The bell's count: a small tan square (its figures the default look's type since v179). */
html[data-skin="bubblegum"] .toolbar .bell-badge { color: var(--bell-ink); border-radius: 4px; }
html[data-skin="bubblegum"] input[type=checkbox], html[data-skin="bubblegum"] input[type=radio],
html[data-skin="bubblegum"] .chk-item .item-check { accent-color: var(--check); }
html[data-skin="bubblegum"] input:focus, html[data-skin="bubblegum"] select:focus, html[data-skin="bubblegum"] textarea:focus,
html[data-skin="bubblegum"] .btn:focus-visible { outline-color: var(--focus); border-color: var(--focus); }

/* ---------- dialogs ---------- */
html[data-skin="bubblegum"] .modal { border: 1px solid var(--card-line); }
/* The card's own band across the top of its view and editor. */
html[data-skin="bubblegum"] .modal.card-view, html[data-skin="bubblegum"] .modal.card-edit {
  box-shadow: inset 0 5px 0 var(--card-color, transparent), var(--shadow-modal);
}
html[data-skin="bubblegum"] .modal.card-view > .detail-head, html[data-skin="bubblegum"] .modal.card-edit > .detail-head { margin-top: -15px; padding-top: 15px; }
html[data-skin="bubblegum"] .rich blockquote { border-left-color: var(--bar-2); }

/* The checklist's bar: a block per item, the done ones in the look's two
   greens in turn (one plain bar past 20 items, when the blocks would be slivers). */
html[data-skin="bubblegum"] .chk-bar { height: 8px; border-radius: 0; background: none; gap: 3px; }
html[data-skin="bubblegum"] .chk-bar i { background: var(--soft); border-radius: 1px; }
html[data-skin="bubblegum"] .chk-bar i.on { background: var(--bar-1); }
html[data-skin="bubblegum"] .chk-bar i.on:nth-child(even) { background: var(--bar-2); }
html[data-skin="bubblegum"] .chk-bar.many { gap: 0; }
html[data-skin="bubblegum"] .chk-bar.many i.on { background: var(--bar-1); }

/* Beállítások: the looks' cards */
html[data-skin="bubblegum"] .theme-card:focus-within { outline-color: var(--focus); }

/* Text and icons that style.css paints in the accent: this look's accent is
   a pale fill, too light to read as text, so they take the link colour. */
html[data-skin="bubblegum"] .about a,
html[data-skin="bubblegum"] .edit-pick .pick-add,
html[data-skin="bubblegum"] .card-tag-pick .tag-new,
html[data-skin="bubblegum"] .detail-pick .pick-check,
html[data-skin="bubblegum"] .toolbar .view-btn.on,
html[data-skin="bubblegum"] .toolbar .view-btn.on:hover,
html[data-skin="bubblegum"] .card .ticket-link:hover,
html[data-skin="bubblegum"] .btn.icon-link.copied,
html[data-skin="bubblegum"] .btn.icon-link.copied:hover,
html[data-skin="bubblegum"] .view-row .view-star.on,
html[data-skin="bubblegum"] .project-link-copy:hover,
html[data-skin="bubblegum"] .project-link-copy:focus-visible,
html[data-skin="bubblegum"] .btn.project-link-copy.copied,
html[data-skin="bubblegum"] .btn.project-link-copy.copied:hover,
html[data-skin="bubblegum"] .detail-url a:hover { color: var(--accent-text); }

/* ---------- the board: pink with polka dots ---------- */
html[data-skin="bubblegum"] body { background-color: var(--bg); background-image: radial-gradient(var(--dot) 1.5px, transparent 2px); background-size: 26px 26px; }

/* ---------- the header: hot pink, all in white; the name in Pacifico ---------- */
html[data-skin="bubblegum"] .toolbar { border-bottom: 0; }
html[data-skin="bubblegum"] .toolbar .brand, html[data-skin="bubblegum"] .login h1 {
  font-family: 'Pacifico', var(--font-display); font-weight: 400; letter-spacing: 0;
}
html[data-skin="bubblegum"] .toolbar .brand { font-size: 25px; line-height: 1.25; text-shadow: var(--logo-shadow); }
/* A phone shortens the name for the buttons' room (style.css): the script a size down there. */
@media (max-width: 640px) { html[data-skin="bubblegum"] .toolbar .brand { font-size: 20px; } }
html[data-skin="bubblegum"] .login h1 { font-size: 26px; line-height: 1.3; color: var(--accent-text); }
html[data-skin="bubblegum"] .login h1 .brand-name { color: var(--accent-text); }   /* the white card has no pink under it */
html[data-skin="bubblegum"] .toolbar .icon-btn, html[data-skin="bubblegum"] .toolbar .view-btn { color: var(--header-ink); }
html[data-skin="bubblegum"] .toolbar .icon-btn.dim { color: var(--header-ink); opacity: .7; }
html[data-skin="bubblegum"] .toolbar .icon-btn:hover, html[data-skin="bubblegum"] .toolbar .view-btn:hover { background: rgba(255, 255, 255, .18); }
html[data-skin="bubblegum"] .toolbar .view-btn.on, html[data-skin="bubblegum"] .toolbar .view-btn.on:hover { background: rgba(255, 255, 255, .28); color: var(--header-ink); }
/* The user's button: a white pill, the name in the ink (white on the pink would be 3:1, too little for it). */
html[data-skin="bubblegum"] .user-btn { background: #ffffff; color: #5d193a; border: 0; border-radius: 999px; }
html[data-skin="bubblegum"] .user-btn:hover { background: #fff0f7; }

/* ---------- names of things: Fredoka, a step larger ---------- */
html[data-skin="bubblegum"] .col-head h2, html[data-skin="bubblegum"] .agenda-group h2 { font-size: 17px; font-weight: 600; }
html[data-skin="bubblegum"] .lane-label, html[data-skin="bubblegum"] .modal h3, html[data-skin="bubblegum"] .settings-h { font-weight: 600; }
html[data-skin="bubblegum"] .card-view .detail-head h3 { font-size: 22px; }
html[data-skin="bubblegum"] .col-head .count, html[data-skin="bubblegum"] .agenda-group h2 .count { font-weight: 700; }

/* ---------- bubbly: a solid ledge under cards, panels, dialogs and buttons ---------- */
html[data-skin="bubblegum"] .card {
  border: 1.5px solid var(--card-line);
  box-shadow: inset 0 5px 0 var(--card-color, transparent), 0 4px 0 var(--ledge);
}
html[data-skin="bubblegum"] .card:hover { box-shadow: inset 0 5px 0 var(--card-color, transparent), 0 5px 0 var(--ledge), var(--shadow-up); }
html[data-skin="bubblegum"] .card.sortable-drag { box-shadow: inset 0 5px 0 var(--card-color, transparent), 0 5px 0 var(--ledge), var(--shadow-modal); }
html[data-skin="bubblegum"] .agenda-panel { border: 1.5px solid var(--card-line); box-shadow: 0 4px 0 var(--ledge); }
html[data-skin="bubblegum"] .agenda-head { border-left: 1.5px solid transparent; border-right: 1.5px solid transparent; }
html[data-skin="bubblegum"] .modal, html[data-skin="bubblegum"] .login { border-radius: 20px; border: 1.5px solid var(--card-line); box-shadow: 0 6px 0 var(--ledge), var(--shadow-modal); }
html[data-skin="bubblegum"] .modal.card-view, html[data-skin="bubblegum"] .modal.card-edit {
  box-shadow: inset 0 5px 0 var(--card-color, transparent), 0 6px 0 var(--ledge), var(--shadow-modal);
}
/* The main buttons and the +: the pink fill on a magenta ledge (by day the pink alone
   shows too little on white: the ledge is their edge). */
html[data-skin="bubblegum"] .btn.primary {
  background: var(--accent-fill); border-color: var(--accent-fill); border-radius: 999px;
  box-shadow: 0 3px 0 var(--button-ledge);
}
html[data-skin="bubblegum"] .btn.primary:hover { background: var(--accent-fill-hi); border-color: var(--accent-fill-hi); }
html[data-skin="bubblegum"] .btn.primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--button-ledge); }
html[data-skin="bubblegum"] .fab { box-shadow: 0 5px 0 var(--button-ledge), var(--shadow-up); }

/* ---------- chips: round ---------- */
html[data-skin="bubblegum"] .tag, html[data-skin="bubblegum"] .prio { border-radius: 999px; }