// ============================================
// STYL "CHIIKAWA" (volitelný, výchozí je jednoduchý styl)
// Inspirováno mangou a anime Chiikawa (ちいかわ) od Nagana.
// Světlý režim = pastelová louka, kde se pleje plevel: krémové nebe,
// dole trsy trávy, silné hnědošedé obrysy jako v manze a tvary jako mochi.
// Karty podniků se střídají v barvách Chiikawy, Hachiware a Usagi, každá
// s obličejem postavy; zpoza titulku dne vykukuje Chiikawa.
// Tmavý režim = hvězdná noc s měsícem, pastelové akcenty září.
// Aktivní, pokud má <html> atribut data-luncher-theme="chiikawa".
// ============================================

$ck: 'html[data-luncher-theme="chiikawa"]';

// Obličeje postav (bílá Chiikawa s kulatýma ušima, Hachiware s modrou „čepičkou", žlutá Usagi s dlouhýma ušima),
// trsy trávy s kytičkou a hvězdná obloha
$ck-chiikawa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg stroke='%234a3f3a' stroke-width='1.8' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='11' r='5' fill='%23fff'/%3E%3Ccircle cx='30' cy='11' r='5' fill='%23fff'/%3E%3Cellipse cx='20' cy='24' rx='16' ry='13' fill='%23fff'/%3E%3Cg stroke='none'%3E%3Ccircle cx='14' cy='23' r='2' fill='%233a302c'/%3E%3Ccircle cx='26' cy='23' r='2' fill='%233a302c'/%3E%3Cellipse cx='10' cy='28' rx='3.2' ry='1.8' fill='%23f7a8b8'/%3E%3Cellipse cx='30' cy='28' rx='3.2' ry='1.8' fill='%23f7a8b8'/%3E%3C/g%3E%3Cpath d='M18 27q2 2 4 0' fill='none' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E");
$ck-hachiware: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg stroke='%234a3f3a' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 17L9 4L17 11Z' fill='%237aa3d6'/%3E%3Cpath d='M34 17L31 4L23 11Z' fill='%237aa3d6'/%3E%3Cellipse cx='20' cy='24' rx='16' ry='13' fill='%23fff'/%3E%3Cpath d='M5.5 20Q8 11 20 11Q32 11 34.5 20L22.5 20L20 25L17.5 20Z' fill='%237aa3d6' stroke='none'/%3E%3Cg stroke='none'%3E%3Ccircle cx='14' cy='23' r='2' fill='%233a302c'/%3E%3Ccircle cx='26' cy='23' r='2' fill='%233a302c'/%3E%3Cellipse cx='10' cy='28' rx='3.2' ry='1.8' fill='%23f7a8b8'/%3E%3Cellipse cx='30' cy='28' rx='3.2' ry='1.8' fill='%23f7a8b8'/%3E%3C/g%3E%3Cpath d='M17 28q1.5 1.6 3 0q1.5 1.6 3 0' fill='none' stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E");
$ck-usagi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg stroke='%234a3f3a' stroke-width='1.8' stroke-linejoin='round'%3E%3Cellipse cx='14' cy='9' rx='3.6' ry='8.5' fill='%23f7e08a'/%3E%3Cellipse cx='26' cy='9' rx='3.6' ry='8.5' fill='%23f7e08a'/%3E%3Cellipse cx='20' cy='25' rx='15' ry='12' fill='%23f7e08a'/%3E%3Cg stroke='none'%3E%3Ccircle cx='14' cy='23' r='2' fill='%233a302c'/%3E%3Ccircle cx='26' cy='23' r='2' fill='%233a302c'/%3E%3Cellipse cx='10' cy='28' rx='3.2' ry='1.8' fill='%23f7a8b8'/%3E%3Cellipse cx='30' cy='28' rx='3.2' ry='1.8' fill='%23f7a8b8'/%3E%3C/g%3E%3Cellipse cx='20' cy='29' rx='2' ry='2.4' fill='%23c2455f' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E");
$ck-grass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='28'%3E%3Cpath d='M0 28Q5 14 8 28Q12 8 16 28Q19 16 22 28ZM50 28Q53 18 56 28Q60 6 64 28Q68 14 71 28Q74 20 76 28Z' fill='%239fd18b'/%3E%3Ccircle cx='38' cy='22' r='3' fill='%23fff' stroke='%23f7a8b8' stroke-width='2'/%3E%3C/svg%3E");
$ck-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23fff6c8'%3E%3Ccircle cx='20' cy='30' r='1.4'/%3E%3Ccircle cx='90' cy='14' r='1'/%3E%3Ccircle cx='130' cy='70' r='1.6'/%3E%3Ccircle cx='60' cy='100' r='1'/%3E%3Ccircle cx='110' cy='140' r='1.2'/%3E%3Ccircle cx='30' cy='140' r='0.9'/%3E%3C/g%3E%3Cpath d='M75 60l2 5 5 2-5 2-2 5-2-5-5-2 5-2z' fill='%23ffe58f'/%3E%3C/svg%3E");

#{$ck} {
  --ck-font: 'Zen Maru Gothic', 'Nunito', sans-serif;
  --ck-display: 'Hachi Maru Pop', 'Zen Maru Gothic', sans-serif;
  --ck-ink: #4a3f3a;              // obrys jako kresba v manze
  --ck-pink: #f7a8b8;             // ruměnec Chiikawy
  --ck-pink-deep: #c94f74;
  --ck-blue: #7aa3d6;             // Hachiware
  --ck-blue-light: #e3eefb;
  --ck-yellow: #f7e08a;           // Usagi
  --ck-yellow-light: #fff6d2;
  --ck-white-pink: #fff1f4;       // Chiikawa
  --ck-green: #9fd18b;            // tráva na pletí
  --ck-line: #4a3f3a;
  --ck-soft-line: #eadcd6;

  --luncher-primary: var(--ck-pink-deep);
  --luncher-primary-hover: #b03f62;
  --luncher-primary-light: #ffe6ec;
  --luncher-bg: #fff8f2;
  --luncher-bg-card: #ffffff;
  --luncher-bg-hover: #fff1f4;
  --luncher-text: var(--ck-ink);
  --luncher-text-secondary: #6b5d57;
  --luncher-text-muted: #a3938c;
  --luncher-border: var(--ck-soft-line);
  --luncher-border-light: #f4e9e4;
  --luncher-navbar-bg: #ffe3ea;
  --luncher-navbar-text: var(--ck-ink);
  --luncher-action-icon: var(--ck-pink-deep);
  --luncher-buyer-icon: #4a78b5;
  --luncher-success: #5a9e4a;
  --luncher-warning: #d9a21a;
  --luncher-danger: #d9534f;
  --luncher-radius-sm: 14px;
  --luncher-radius: 18px;
  --luncher-radius-lg: 22px;
  --luncher-radius-xl: 26px;
  --luncher-shadow: 0 3px 0 var(--ck-line);
  --luncher-shadow-lg: 0 5px 0 var(--ck-line), 0 10px 22px rgb(74 63 58 / 0.15);

  &[data-bs-theme="dark"] {
    // Noc pod hvězdami — postavičky už spí
    --ck-line: #12152b;
    --ck-soft-line: #3a4170;
    --ck-white-pink: #3a2f4a;
    --ck-blue-light: #283a5c;
    --ck-yellow-light: #463f2a;

    --luncher-primary: #ff9fb8;
    --luncher-primary-hover: #ffbfcf;
    --luncher-primary-light: #3d2a42;
    --luncher-bg: #1b1f3a;
    --luncher-bg-card: #262b4d;
    --luncher-bg-hover: #2f355c;
    --luncher-text: #f4eef6;
    --luncher-text-secondary: #cfc8dc;
    --luncher-text-muted: #8e8aab;
    --luncher-border-light: #2f355c;
    --luncher-navbar-bg: #2a2f55;
    --luncher-navbar-text: #f4eef6;
    --luncher-action-icon: #ff9fb8;
    --luncher-buyer-icon: #9cc3f0;
    --luncher-success: #9fd18b;
    --luncher-warning: #f7e08a;
    --luncher-danger: #ff8a8a;
    --luncher-shadow: 0 3px 0 var(--ck-line), 0 6px 16px rgb(0 0 0 / 0.3);
    --luncher-shadow-lg: 0 5px 0 var(--ck-line), 0 0 24px rgb(255 159 184 / 0.25);
  }

  body {
    font-family: var(--ck-font);
    background-color: var(--luncher-bg);
    // Pastelová louka — nahoře růžové nebe, dole trsy trávy s kytičkami
    background-image:
      #{$ck-grass},
      radial-gradient(circle at 15% 0%, rgb(247 168 184 / 0.25), transparent 40%),
      radial-gradient(circle at 85% 10%, rgb(122 163 214 / 0.18), transparent 40%),
      linear-gradient(180deg, #fff8f2 60%, #f2fae9);
    background-size: 90px 28px, 100% 100%, 100% 100%, 100% 100%;
    background-position: left bottom, 0 0, 0 0, 0 0;
    background-repeat: repeat-x, no-repeat, no-repeat, no-repeat;
    background-attachment: fixed;
  }

  &[data-bs-theme="dark"] body {
    // Hvězdná noc s měsícem
    background-image:
      radial-gradient(circle at 88% 8%, #fff6c8 0 22px, rgb(255 246 200 / 0.25) 24px, transparent 70px),
      #{$ck-stars},
      linear-gradient(180deg, #1b1f3a, #232a52);
    background-size: 100% 100%, 160px 160px, 100% 100%;
    background-repeat: no-repeat, repeat, no-repeat;
  }

  .app-container {
    background: transparent;
  }

  h1, h2, h3, h4, .navbar-brand {
    font-family: var(--ck-display);
    font-weight: 400;
  }

  .btn {
    font-family: var(--ck-font);
  }

  // ---------- Navbar: pastelově růžový, u loga obličej Chiikawy ----------
  .navbar {
    background: var(--luncher-navbar-bg) !important;
    border-bottom: 2.5px solid var(--ck-line);
    box-shadow: 0 3px 0 rgb(74 63 58 / 0.12);

    .navbar-brand {
      letter-spacing: 0.02em;

      &::after {
        content: '';
        display: inline-block;
        width: 26px;
        height: 26px;
        margin-left: 6px;
        margin-right: 0.6em;
        vertical-align: -5px;
        background: $ck-chiikawa center / contain no-repeat;
        transform-origin: 50% 100%;
        animation: ck-wobble 3.2s ease-in-out infinite;
      }
    }

    .dropdown-menu {
      border: 2px solid var(--ck-line);
      border-radius: var(--luncher-radius);
      box-shadow: var(--luncher-shadow);
    }
  }

  &[data-bs-theme="dark"] .navbar {
    border-bottom-color: #3a4170;
    box-shadow: 0 3px 14px rgb(0 0 0 / 0.35);
  }

  // ---------- Titulek dne: mochi štítek s ruměncem, zpoza vykukuje Chiikawa ----------
  .day-navigator .title {
    position: relative;
    display: inline-block;
    padding: 8px 40px 8px;
    margin-top: 14px;
    font-family: var(--ck-display);
    font-size: 1.6rem;
    color: var(--ck-ink) !important;
    background:
      radial-gradient(ellipse 9px 5px at 26px 58%, var(--ck-pink) 98%, transparent),
      radial-gradient(ellipse 9px 5px at calc(100% - 26px) 58%, var(--ck-pink) 98%, transparent),
      #ffffff;
    border: 2.5px solid var(--ck-line);
    border-radius: 999px;
    box-shadow: 0 4px 0 var(--ck-line);

    // Chiikawa vykukuje zpoza štítku
    &::after {
      content: '';
      position: absolute;
      right: 26px;
      top: -27px;
      width: 34px;
      height: 34px;
      background: $ck-chiikawa center / contain no-repeat;
      // Spodní část, která by překryla štítek, se ořízne — vypadá to, že je schovaná za ním
      clip-path: inset(0 0 7px 0);
      animation: ck-peek 4s ease-in-out infinite;
    }

    // Jiskřička radosti
    &::before {
      content: '✦';
      position: absolute;
      left: -18px;
      top: -10px;
      font-size: 0.7em;
      color: #e0b93a;
      animation: ck-twinkle 1.8s ease-in-out infinite;
    }

    &.text-muted {
      color: var(--luncher-text-muted) !important;
      background: #f6efeb;
      border-color: #c9bab3;
      box-shadow: 0 4px 0 #c9bab3;

      // Jiný den — Chiikawa spí a nevykukuje
      &::after,
      &::before {
        display: none;
      }
    }
  }

  &[data-bs-theme="dark"] .day-navigator .title {
    color: #f4eef6 !important;
    background:
      radial-gradient(ellipse 9px 5px at 26px 58%, rgb(247 168 184 / 0.7) 98%, transparent),
      radial-gradient(ellipse 9px 5px at calc(100% - 26px) 58%, rgb(247 168 184 / 0.7) 98%, transparent),
      #3a4170;
    border-color: #12152b;
    box-shadow: 0 4px 0 #12152b, 0 0 22px rgb(255 159 184 / 0.25);

    &.text-muted {
      color: var(--luncher-text-muted) !important;
      background: #262b4d;
      box-shadow: 0 4px 0 #12152b;
    }
  }

  // ---------- Karty podniků: střídají se Chiikawa, Hachiware a Usagi ----------
  .restaurant-card {
    --ck-card-bg: var(--ck-white-pink);
    --ck-card-face: #{$ck-chiikawa};
    border: 2.5px solid var(--ck-line);
    border-radius: var(--luncher-radius-lg);
    box-shadow: var(--luncher-shadow);
    overflow: hidden;
    background: var(--luncher-bg-card);
    transition: transform 0.2s cubic-bezier(.3, 1.6, .5, 1), box-shadow 0.2s ease;

    &:hover {
      transform: translateY(-3px);
      box-shadow: var(--luncher-shadow-lg);
    }

    .restaurant-header {
      background: var(--ck-card-bg);
      border-bottom: 2.5px solid var(--ck-line);

      // Obličej postavy vpravo v hlavičce
      &::after {
        content: '';
        flex: none;
        width: 38px;
        height: 38px;
        background: var(--ck-card-face) center / contain no-repeat;
        transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1);
      }

      &:hover {
        background: var(--ck-card-bg);
        filter: brightness(0.97);

        &::after {
          transform: translateY(-3px) rotate(-8deg);
        }
      }

      h3 {
        color: var(--ck-ink);
        font-family: var(--ck-display);
        font-weight: 400;
      }

      small {
        color: #8a7a73;
      }
    }
  }

  [class*="col"]:nth-child(3n+2) > .restaurant-card {
    --ck-card-bg: var(--ck-blue-light);
    --ck-card-face: #{$ck-hachiware};
  }

  [class*="col"]:nth-child(3n) > .restaurant-card {
    --ck-card-bg: var(--ck-yellow-light);
    --ck-card-face: #{$ck-usagi};
  }

  &[data-bs-theme="dark"] .restaurant-card {
    border-color: #12152b;

    .restaurant-header {
      border-bottom-color: #12152b;

      h3 {
        color: #f4eef6;
      }

      small {
        color: #b4aecb;
      }
    }
  }

  .food-table {
    --bs-table-bg: transparent;
  }

  .food-table tbody tr:hover > td {
    background: #fff1f4;
  }

  &[data-bs-theme="dark"] .food-table tbody tr:hover > td {
    background: #2f355c;
  }

  .food-price {
    color: var(--ck-pink-deep);
    font-weight: 900;
  }

  &[data-bs-theme="dark"] .food-price {
    color: #ff9fb8;
  }

  // ---------- Panely a tabulka voleb ----------
  .choice-section,
  .choices-table,
  .pizza-section,
  .no-votes {
    border: 2.5px solid var(--ck-line);
    border-radius: var(--luncher-radius-lg);
    box-shadow: var(--luncher-shadow);
  }

  .choices-table,
  .choices-table .nested-table {
    --bs-table-bg: var(--luncher-bg-card);
  }

  .choices-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  // Sloupec s podnikem: růžová tvářička
  .choices-table > tbody > tr > td:first-child {
    background: var(--ck-white-pink);
    color: var(--ck-pink-deep);
    font-family: var(--ck-display);
    border-right: 2.5px dashed var(--ck-pink);
  }

  &[data-bs-theme="dark"] {
    .choice-section,
    .choices-table,
    .pizza-section,
    .no-votes,
    .card {
      border-color: #12152b;
    }

    .choices-table > tbody > tr > td:first-child {
      color: #ff9fb8;
    }
  }

  // Bootstrap karty (skupinové objednávky apod.) a seznamy
  .card {
    border: 2.5px solid var(--ck-line);
    border-radius: var(--luncher-radius-lg);
    box-shadow: var(--luncher-shadow);
    overflow: hidden;
    background: var(--luncher-bg-card);

    // Rozbalovací výběr z nabídky nesmí karta oříznout
    &:has(.select-search-container) {
      overflow: visible;
    }

    > .card-header {
      background: var(--ck-white-pink);
      border-bottom: 2px dashed var(--ck-pink);
      font-family: var(--ck-display);

      &:first-child {
        border-radius: calc(var(--luncher-radius-lg) - 2px) calc(var(--luncher-radius-lg) - 2px) 0 0;
      }
    }

    .table {
      --bs-table-bg: transparent;
      margin-bottom: 0;

      > :last-child > tr:last-child > * {
        border-bottom-width: 0;
      }
    }
  }

  .list-group {
    border-radius: var(--luncher-radius);
    overflow: hidden;
    border: 2px solid var(--ck-line);

    > .list-group-item {
      border-left: none;
      border-right: none;

      &:first-child {
        border-top: none;
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .form-select, .form-control,
  input[type="text"], input[type="email"], input[type="password"] {
    border-radius: var(--luncher-radius-sm);
    border: 2px solid var(--ck-soft-line);

    &:focus {
      border-color: var(--ck-pink-deep);
      box-shadow: 0 0 0 3px rgb(247 168 184 / 0.45);
    }
  }

  // ---------- Tlačítka: nálepky ve tvaru mochi, při najetí poskočí ----------
  .btn {
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 0.02em;
    transition: transform 0.18s cubic-bezier(.3, 1.6, .5, 1), box-shadow 0.18s ease, background 0.2s ease;
  }

  .btn-primary {
    background: var(--ck-pink-deep);
    border: 2px solid var(--ck-line);
    color: #fff;
    box-shadow: 0 3px 0 var(--ck-line);

    &:hover {
      background: #d6608a;
      border-color: var(--ck-line);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 5px 0 var(--ck-line);
    }

    &:active {
      transform: translateY(2px) !important;
      box-shadow: 0 1px 0 var(--ck-line);
    }

    &:disabled {
      background: #f1e6e2;
      border-color: #c9bab3;
      color: #a3938c;
      box-shadow: none;
    }
  }

  .btn-outline-primary {
    background: var(--luncher-bg-card);
    border: 2px solid var(--ck-line);
    color: var(--ck-pink-deep);
    box-shadow: 0 3px 0 var(--ck-line);

    &:hover {
      background: var(--ck-white-pink);
      border-color: var(--ck-line);
      color: var(--ck-pink-deep);
      transform: translateY(-2px);
    }
  }

  // Sekundární — modrá jako Hachiware
  .btn-secondary {
    background: var(--ck-blue);
    border: 2px solid var(--ck-line);
    color: #fff;
    box-shadow: 0 3px 0 var(--ck-line);

    &:hover {
      background: #6a93c8;
      border-color: var(--ck-line);
      color: #fff;
      transform: translateY(-2px);
    }
  }

  .btn-danger {
    border: 2px solid var(--ck-line);
    box-shadow: 0 3px 0 var(--ck-line);
  }

  .action-icon:hover {
    background: var(--luncher-primary-light);
    color: var(--luncher-primary);
  }

  // Tmavý režim: světlé pastelové akcenty potřebují tmavý text
  &[data-bs-theme="dark"] {
    .btn-primary {
      background: #ff9fb8;
      color: #2a1f33;

      &:hover {
        background: #ffbfcf;
        color: #2a1f33;
      }

      &:disabled {
        background: #2f355c;
        border-color: #12152b;
        color: #8e8aab;
      }
    }

    .btn-outline-primary {
      color: #ff9fb8;

      &:hover {
        background: #3d2a42;
        color: #ff9fb8;
      }
    }

    .btn-secondary {
      background: #9cc3f0;
      color: #1b1f3a;

      &:hover {
        background: #b6d4f5;
        color: #1b1f3a;
      }
    }

    .react-datepicker__day--selected,
    .react-datepicker__day--keyboard-selected {
      color: #2a1f33;
    }
  }

  // ---------- Modaly: velká nálepka s obrysem ----------
  .modal-content {
    border: 2.5px solid var(--ck-line);
    border-radius: var(--luncher-radius-xl);
    box-shadow: 0 6px 0 var(--ck-line), 0 18px 40px rgb(74 63 58 / 0.25);
    overflow: hidden;
  }

  .modal-header {
    background: var(--luncher-navbar-bg);
    border-bottom: 2.5px solid var(--ck-line);

    .modal-title, .modal-title h2 {
      color: var(--ck-ink);
      font-family: var(--ck-display);
      font-weight: 400;
    }
  }

  &[data-bs-theme="dark"] {
    .modal-content {
      border-color: #12152b;
      box-shadow: 0 6px 0 #12152b, 0 0 30px rgb(255 159 184 / 0.15);
    }

    .modal-header {
      border-bottom-color: #12152b;

      .modal-title, .modal-title h2 {
        color: #f4eef6;
      }
    }
  }

  // Patička — pruh trávy, kde se pleje plevel
  .footer {
    border-top: 2.5px solid var(--ck-line);
    background:
      #{$ck-grass} left top / 90px 28px repeat-x,
      var(--luncher-navbar-bg);
    padding-top: 34px;

    a {
      color: var(--ck-pink-deep);
    }
  }

  &[data-bs-theme="dark"] .footer {
    border-top-color: #12152b;
    background: var(--luncher-navbar-bg);
    padding-top: 16px;

    a {
      color: #ff9fb8;
    }
  }
}

// Chiikawa se kolébá ze strany na stranu
@keyframes ck-wobble {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-10deg); }
  40% { transform: rotate(8deg); }
  55% { transform: rotate(0deg); }
}

// Vykukování zpoza štítku — schová se a zase vykoukne (ořez se posouvá s ní)
@keyframes ck-peek {
  0%, 15% { transform: translateY(18px); clip-path: inset(0 0 25px 0); }
  30%, 75% { transform: translateY(0); clip-path: inset(0 0 7px 0); }
  85% { transform: translateY(-2px); clip-path: inset(0 0 5px 0); }
  100% { transform: translateY(18px); clip-path: inset(0 0 25px 0); }
}

@keyframes ck-twinkle {
  0%, 100% { transform: scale(0.7) rotate(0deg); opacity: 0.4; }
  50% { transform: scale(1.15) rotate(20deg); opacity: 1; }
}

@media (max-width: 575.98px) {
  #{$ck} .day-navigator .title {
    font-size: 1.25rem;
    padding: 6px 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #{$ck} .navbar .navbar-brand::after,
  #{$ck} .day-navigator .title::after,
  #{$ck} .day-navigator .title::before {
    animation: none;
  }
}