/* ==========================================================================
       V24 — requested update pack (Tanvir)
       1)  Sidebar hover-open made buttery smooth
       2)  Quick Meal Input / Custom Quick Meal removed (done inline above)
       3)  My Profile Facebook link + icon (styles here, logic in JS below)
       4)  Dashboard Messenger group link field (styles here, logic in JS below)
       5)  Sidebar order: Google Sheet + Edit Access above Notification (done in JS above)
       6)  Homepage navbar links perfectly centered
       7)  Homepage hero title text size reduced
       8)  Mess PIN red-on-empty already existed — untouched
       9)  All text inputs/selects/textareas made transparent (no filled bg)
       10) "Mess Mint" brand text made slimmer / less bold
       11) Mobile/tablet: header logo+text centered, hamburger has no bg, size bumped a touch
       12) Mobile Dashboard: Today + Record Date stay in one compact row
       ========================================================================== */

    /* ---------- 1. Smoother sidebar hover-open ---------- */
    .responsive-sidebar {
      transition: width 0.42s cubic-bezier(.22, 1, .36, 1),
        transform 0.42s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.42s ease !important;
    }

    .responsive-sidebar .tab-btn {
      transition: width 0.42s cubic-bezier(.22, 1, .36, 1),
        padding 0.42s cubic-bezier(.22, 1, .36, 1),
        font-size 0.42s cubic-bezier(.22, 1, .36, 1),
        transform 0.2s ease !important;
    }

    .responsive-sidebar .nav-label {
      display: inline-block;
      opacity: 0;
      max-width: 0;
      overflow: hidden;
      white-space: nowrap;
      transition: opacity 0.34s ease 0.06s, max-width 0.42s cubic-bezier(.22, 1, .36, 1);
      vertical-align: middle;
    }

    .responsive-sidebar:hover .nav-label,
    body.sidebar-pinned .responsive-sidebar .nav-label,
    body.sidebar-open .responsive-sidebar .nav-label,
    body.sidebar-click-open .responsive-sidebar .nav-label,
    .responsive-sidebar.force-open .nav-label {
      opacity: 1 !important;
      max-width: 220px !important;
    }

    /* Mobile/Tablet: sidebar-open ব্যবহার করে (hover না), তাই এখানে সবসময় label পুরো দেখাবে */
    @media (max-width: 900px) {

      .responsive-sidebar .nav-label {
        max-width: none !important;
        opacity: 1 !important;
        overflow: visible !important;
      }
    }

    .sidebar-mess-name {
      transition: opacity 0.3s ease, max-height 0.34s ease, margin 0.34s ease, padding 0.34s ease;
      opacity: 0;
      max-height: 0;
      margin: 0 !important;
      padding: 0 6px !important;
      overflow: hidden;
      display: flex !important;
    }

    .responsive-sidebar:hover .sidebar-mess-name,
    body.sidebar-pinned .sidebar-mess-name,
    body.sidebar-click-open .responsive-sidebar:hover .sidebar-mess-name {
      opacity: 1;
      max-height: 48px;
      margin: 0 0 6px !important;
      padding: 8px 6px !important;
    }

    /* ---------- 3. Facebook row/button on profile (matches WhatsApp row style) ---------- */
    .fb-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
    }

    .fb-row .fb-number {
      font-size: 0.85rem;
      color: var(--text2);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fb-contact {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border-radius: 999px;
      background: #1877F2;
      color: #fff !important;
      font-size: 0.78rem;
      font-weight: 700;
      text-decoration: none;
      flex-shrink: 0;
    }

    .fb-contact svg {
      width: 15px;
      height: 15px;
      fill: #fff;
    }

    /* ---------- 4. Messenger group link toolbar item ---------- */
    .toolbar-item.messenger-toolbar-item {
      min-width: 190px;
    }

    .messenger-toolbar-item .messenger-input-row {
      display: flex;
      gap: 6px;
    }

    .messenger-toolbar-item .messenger-input-row .text-input {
      flex: 1 1 auto;
      min-width: 0;
    }

    .messenger-join-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-radius: 10px;
      background: #0084FF;
      color: #fff !important;
      font-size: 0.82rem;
      font-weight: 700;
      text-decoration: none;
      width: 100%;
      justify-content: center;
      box-sizing: border-box;
    }

    .messenger-join-btn:hover {
      filter: brightness(1.06);
    }

    .messenger-saved-date {
      display: block;
      font-size: 0.68rem;
      color: var(--text2);
      margin-top: 4px;
      text-align: center;
    }

    /* ---------- 6. Homepage navbar links perfectly centered ---------- */
    @media (min-width: 861px) {
      .hp-nav-inner {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
      }

      .hp-nav-inner .hp-logo {
        margin-right: 0 !important;
        justify-self: start;
      }

      .hp-nav-inner .hp-nav-links {
        justify-self: center;
      }

      .hp-nav-inner .hp-nav-right {
        justify-self: end;
      }

      /* The auth (login/register/forgot) navbar has no middle hp-nav-links element,
         so the 3-column grid above would center its only two children instead of
         pushing the actions to the right edge. Force it back to a simple
         logo-left / actions-right row. */
      .auth-nav .hp-nav-inner {
        display: flex !important;
        justify-content: space-between !important;
      }
    }

    /* ---------- 7. Homepage hero title — smaller text ---------- */
    .hp-hero-text h1 {
      font-size: clamp(1.5rem, 2.6vw, 2.15rem) !important;
    }

    /* ---------- 9. Transparent inputs everywhere ---------- */
    .text-input,
    .select-input,
    textarea,
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="search"],
    select {
      background: transparent !important;
      background-color: transparent !important;
    }

    /* ---------- 10. "Mess Mint" brand text — slimmer weight, slightly bigger size.
       Colour is intentionally FIXED to the logo's own orange (not tied to the
       moderator's customizable --accent), so the brand name always matches the logo
       no matter what accent colour a mess picks in Settings. ---------- */
    .app-brand-title-text {
      font-weight: 500 !important;
      letter-spacing: -0.005em !important;
      background: none !important;
      -webkit-background-clip: initial !important;
      background-clip: initial !important;
      -webkit-text-fill-color: #FF8243 !important;
      color: #FF8243 !important;
    }

    .app-header h1 {
      font-size: clamp(1.1rem, 1.9vw, 1.45rem) !important;
    }

    @media (max-width: 620px) {
      .app-brand-title-text {
        font-size: 1.05rem !important;
      }
    }

    @media (max-width: 900px) {
      .brand-wrap h1 {
        font-size: clamp(0.98rem, 2.4vw, 1.18rem) !important;
      }
    }

    /* ---------- 10b. Sidebar icons + dashboard card top-strip — same reasoning as the
       brand text above: fixed to the logo's orange so the interface keeps a consistent
       brand identity, instead of shifting with the mess's customizable accent colour. ---------- */
    .responsive-sidebar .tab-btn .nav-icon,
    .responsive-sidebar .tab-btn>i {
      color: #FF8243 !important;
    }

    .responsive-sidebar .tab-btn:hover,
    .responsive-sidebar .tab-btn.active {
      color: #FF8243 !important;
    }

    .responsive-sidebar .tab-btn.active .nav-icon,
    .responsive-sidebar .tab-btn.active>i {
      background: #FF8243 !important;
      color: #fff !important;
    }

    .stat-card::before {
      background: #FF8243 !important;
    }

    .premium-kpi strong {
      color: #FF8243 !important;
    }

    /* ---------- 10c. Whole app — force every colour that follows the customizable
       accent to the logo's fixed orange/teal, everywhere (cards, numbers, buttons,
       borders, links, icons...). `!important` here beats the non-important inline
       style the JS sets on <html> for the moderator's saved accent colour, so this
       always wins regardless of what a mess has picked in Settings. */
    :root,
    [data-theme="dark"] {
      --accent: #FF8243 !important;
      --accent2: #069494 !important;
    }

    .hp-logo {
      font-weight: 600 !important;
    }

    .hp-logo-text {
      font-weight: 600 !important;
    }

    /* ---------- 11. Mobile/tablet header: logo left, hamburger right, transparent hamburger ---------- */
    @media (max-width: 900px) {
      .app-header .sidebar-toggle-btn {
        background: var(--accent) !important;
        border-color: transparent !important;
        box-shadow: none !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 1.1rem !important;
        color: #fff !important;
      }

      .app-header .sidebar-toggle-btn:hover,
      body.sidebar-open .app-header .sidebar-toggle-btn,
      body.sidebar-pinned .app-header .sidebar-toggle-btn {
        background: var(--accent) !important;
        color: #fff !important;
        box-shadow: none !important;
      }

      .app-header .hamburger-bar {
        width: 21px;
      }
    }

    /* ---------- 12. Mobile Dashboard: Today + Record Date compact single row ---------- */
    @media (max-width: 520px) {
      .toolbar.dashboard-only-toolbar {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
      }

      .toolbar.dashboard-only-toolbar .messenger-toolbar-item {
        grid-column: 1 / -1;
      }

      .toolbar.dashboard-only-toolbar .toolbar-item {
        padding: 8px 9px !important;
      }

      .toolbar.dashboard-only-toolbar .toolbar-item label {
        font-size: 0.68rem !important;
      }

      .toolbar.dashboard-only-toolbar .toolbar-today-value {
        min-height: 28px !important;
        font-size: 0.78rem !important;
        padding: 4px 6px !important;
      }

      .toolbar.dashboard-only-toolbar #monthPicker {
        padding: 6px 8px !important;
        font-size: 0.78rem !important;
      }
    }

    /* ---------- 13. Full-page colour wash matching the logo's orange + teal ----------
       Uses the app's own --accent (orange) / --accent2 (teal) variables — close to the
       logo's colours but not identical — as a soft wash across the whole page instead of
       a flat neutral background, so the app visually ties back to the logo. */
    body {
      /* Fallback for browsers without color-mix() support */
      background:
        radial-gradient(1100px 620px at -5% -10%, rgba(255, 130, 67, 0.16), transparent 60%),
        radial-gradient(1100px 620px at 105% 110%, rgba(6, 148, 148, 0.16), transparent 60%),
        var(--bg);
      background:
        radial-gradient(1100px 620px at -5% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
        radial-gradient(1100px 620px at 105% 110%, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 60%),
        var(--bg) !important;
      background-attachment: fixed !important;
    }

    .app-header {
      background:
        linear-gradient(120deg, rgba(255, 130, 67, 0.12), rgba(6, 148, 148, 0.12)),
        var(--surface);
      background:
        linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent2) 12%, transparent)),
        var(--surface) !important;
    }

    .responsive-sidebar {
      background:
        linear-gradient(165deg, rgba(255, 130, 67, 0.10), rgba(6, 148, 148, 0.10)),
        linear-gradient(180deg, var(--surface), var(--surface2));
      background:
        linear-gradient(165deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent2) 10%, transparent)),
        linear-gradient(180deg, var(--surface), var(--surface2)) !important;
    }

    .homepage-view .hp-nav {
      background:
        linear-gradient(120deg, color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent2) 8%, transparent)),
        rgba(248, 250, 252, 0.85);
    }

    [data-theme="dark"] .homepage-view .hp-nav {
      background:
        linear-gradient(120deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent2) 10%, transparent)),
        rgba(15, 23, 42, 0.85);
    }