/* ==========================================================================
       V15 — requested update pack
       1)  Today / Record Date toolbar lives on the Dashboard page only
       2)  Member delete always goes through a typed-email confirmation popup
       3)  Household members show up (and can be deleted) inside Mess Members
       4)  Extra meal rows / extended days can be removed, not only added
       5)  Collapsed sidebar shows only the mess icon
       6)  Header + "Next Bazar Date" ticker never overlap, no dead gap below
       7)  Member names wrap on word boundaries instead of breaking mid-word
       8)  Navbar notification bell with Recent Update History
       9)  Dedicated Notice Board page
       10) Professional Input page
       11) Brand logo in the navbar
       ========================================================================== */

    :root {
      --duty-ticker-height: 0px;
    }

    /* ---------- 11. Brand logo ---------- */
    .app-brand-row {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .app-brand-logo {
      /* Slightly optimized (not dramatically reduced) — still clearly visible/prominent. */
      width: clamp(34px, 3vw, 44px);
      height: clamp(34px, 3vw, 44px);
      flex: 0 0 auto;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 4px 10px rgba(255, 130, 67, .28));
    }

    .app-header h1 {
      display: flex;
      align-items: center;
      min-width: 0;
      margin: 0;
      font-size: clamp(0.98rem, 1.5vw, 1.3rem);
      line-height: 1.15;
    }

    .app-brand-title-text {
      color: var(--accent);
      font-weight: 700;
      /* slightly less bold than before, still clearly readable */
      letter-spacing: -0.015em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (max-width: 620px) {
      .app-brand-logo {
        width: 34px;
        height: 34px;
      }

      .app-brand-title-text {
        font-size: 0.9rem;
      }
    }

    /* ---------- 6. Header + ticker stacking ---------- */
    body:not(.show-homepage) .duty-marquee-navbar {
      position: fixed !important;
      top: var(--app-header-height) !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      margin-top: 0 !important;
      z-index: 930 !important;
    }

    body:not(.show-homepage) .container {
      padding-top: calc(var(--app-header-height) + var(--duty-ticker-height) + 16px) !important;
    }

    .responsive-sidebar,
    .responsive-sidebar:hover,
    body.sidebar-pinned .responsive-sidebar {
      top: calc(var(--app-header-height) + var(--duty-ticker-height)) !important;
      height: calc(100vh - var(--app-header-height) - var(--duty-ticker-height)) !important;
      max-height: calc(100vh - var(--app-header-height) - var(--duty-ticker-height)) !important;
    }

    @media (max-width: 900px) {

      .responsive-sidebar,
      .responsive-sidebar:hover,
      body.sidebar-pinned .responsive-sidebar {
        height: calc(100dvh - var(--app-header-height) - var(--duty-ticker-height)) !important;
        max-height: calc(100dvh - var(--app-header-height) - var(--duty-ticker-height)) !important;
      }
    }

    .sidebar-overlay {
      top: 0 !important;
    }

    /* ---------- 5. Collapsed sidebar mess name ---------- */
    .sidebar-mess-name {
      display: flex !important;
      align-items: center;
      justify-content: center;
      gap: 6px;
      overflow: hidden;
    }

    .sidebar-mess-icon {
      flex: 0 0 auto;
      font-size: 1rem;
      line-height: 1;
    }

    .sidebar-mess-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @media (min-width: 901px) {

      .responsive-sidebar:not(:hover):not(.force-open) .sidebar-mess-name,
      body:not(.sidebar-pinned):not(.sidebar-click-open) .responsive-sidebar:not(:hover) .sidebar-mess-name {
        display: flex !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 9px 0 !important;
      }

      .responsive-sidebar:not(:hover):not(.force-open) .sidebar-mess-text,
      body:not(.sidebar-pinned):not(.sidebar-click-open) .responsive-sidebar:not(:hover) .sidebar-mess-text {
        display: none !important;
      }

      .responsive-sidebar:not(:hover):not(.force-open) .sidebar-mess-icon,
      body:not(.sidebar-pinned):not(.sidebar-click-open) .responsive-sidebar:not(:hover) .sidebar-mess-icon {
        font-size: 1.12rem;
      }
    }

    /* ---------- 7. Member name wrapping ---------- */
    .member-head-stack .name-badge,
    .mobile-card-top .name-badge,
    .daily-meal-name-badge,
    .bazar-member-cell .name-badge,
    .bazar-sheet-table th,
    .bazar-summary-sheet td:first-child,
    .daily-meal-member-head {
      white-space: normal !important;
      overflow-wrap: break-word !important;
      word-break: normal !important;
      hyphens: none !important;
      -webkit-hyphens: none !important;
    }

    .daily-meal-member-head {
      min-width: 106px;
      padding-left: 6px !important;
      padding-right: 6px !important;
    }

    .daily-meal-name-badge {
      padding: 6px 9px !important;
      font-size: 0.74rem !important;
      line-height: 1.2 !important;
      max-width: 100% !important;
    }

    .bazar-member-head th.bazar-member-cell {
      min-width: 106px;
    }

    .meal-table-wrap,
    .bazar-table-wrap {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 640px) {
      .daily-meal-member-head {
        min-width: 92px;
      }

      .bazar-member-head th.bazar-member-cell {
        min-width: 92px;
      }

      .daily-meal-name-badge {
        font-size: 0.68rem !important;
        padding: 5px 7px !important;
      }
    }

    /* ---------- 8. Notification bell ---------- */
    .header-bell-wrap {
      position: relative;
      display: inline-flex;
    }

    .header-bell-btn {
      position: relative;
    }

    .header-bell-count {
      position: absolute;
      top: -5px;
      right: -5px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      background: var(--red, #ef4444);
      color: #fff;
      font-size: 0.64rem;
      font-weight: 900;
      line-height: 18px;
      text-align: center;
      box-shadow: 0 3px 8px rgba(239, 68, 68, .45);
      pointer-events: none;
    }

    .header-bell-panel {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      width: min(380px, calc(100vw - 26px));
      max-height: min(60vh, 480px);
      display: none;
      flex-direction: column;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 24px 60px rgba(15, 23, 42, .26);
      z-index: 1200;
      overflow: hidden;
    }

    .header-bell-panel.open {
      display: flex;
    }

    @media (max-width: 680px) {
      .header-bell-panel {
        position: fixed;
        top: calc(var(--app-header-height) + 8px);
        left: 10px;
        right: 10px;
        width: auto;
        max-height: 70vh;
      }
    }

    .header-bell-head,
    .header-bell-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 11px 13px;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
    }

    .header-bell-foot {
      border-bottom: 0;
      border-top: 1px solid var(--border);
      justify-content: flex-end;
    }

    .header-bell-head strong {
      font-size: 0.85rem;
      font-weight: 800;
    }

    .header-bell-body {
      padding: 8px 10px 12px;
      overflow-y: auto;
      flex: 1 1 auto;
    }

    .header-bell-body .activity-timeline-item {
      margin-bottom: 8px;
    }

    .header-bell-empty {
      padding: 22px 10px;
      text-align: center;
      color: var(--text2);
      font-size: 0.82rem;
    }

    /* ---------- 9. Notice Board page ---------- */
    .notice-page-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      padding: 20px 22px;
      margin-bottom: 16px;
      border-radius: 18px;
      color: #fff;
      background: linear-gradient(120deg, var(--accent), #6b8afd 92%);
      box-shadow: 0 18px 44px rgba(255, 130, 67, .22);
    }

    .notice-page-hero h2 {
      margin: 0 0 4px;
      font-size: 1.25rem;
      font-weight: 800;
    }

    .notice-page-hero p {
      margin: 0;
      font-size: 0.82rem;
      opacity: .92;
    }

    .notice-hero-pill {
      padding: 7px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .2);
      border: 1px solid rgba(255, 255, 255, .35);
      font-weight: 800;
      font-size: 0.78rem;
    }

    .notice-compose-grid {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      gap: 12px;
    }

    .notice-compose-grid .notice-compose-full {
      grid-column: 1 / -1;
    }

    .notice-compose-grid label {
      display: block;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--text2);
      margin-bottom: 6px;
    }

    .notice-compose-grid textarea.text-input {
      width: 100%;
      min-height: 84px;
      resize: vertical;
      font-family: inherit;
    }

    @media (max-width: 720px) {
      .notice-compose-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ---------- 2. Delete confirmation popup ---------- */
    .member-delete-modal .modal-header h2 {
      color: var(--red, #ef4444);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 1.02rem;
    }

    .member-delete-target {
      display: grid;
      gap: 4px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--surface2);
      margin-bottom: 10px;
    }

    .member-delete-target strong {
      font-size: 0.98rem;
      font-weight: 800;
    }

    .member-delete-target span {
      font-size: 0.78rem;
      color: var(--text2);
      word-break: break-all;
    }

    .member-delete-warning {
      margin: 0 0 4px;
      color: var(--text2);
      font-size: 0.82rem;
      line-height: 1.55;
    }

    .member-delete-hint {
      margin-top: 6px;
      font-size: 0.74rem;
      color: var(--text2);
    }

    .member-delete-hint b {
      color: var(--accent);
      word-break: break-all;
    }

    /* ---------- 3. Local members inside Mess Members ---------- */
    .local-members-heading {
      margin: 16px 0 8px;
      font-size: 0.76rem;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--text2);
    }

    .role-pill.local {
      background: rgba(107, 138, 253, .16);
      color: #4f6ef0;
    }

    /* ---------- 4. Extra / extended rows ---------- */
    .extra-meal-row td:first-child,
    .overflow-meal-row td:first-child,
    .duty-extended-row td:first-child {
      background: rgba(255, 130, 67, .1) !important;
    }

    .row-remove-btn {
      margin-top: 6px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .extra-row-label-input {
      max-width: 150px;
      font-size: 0.78rem !important;
      padding: 5px 8px !important;
    }

    /* ---------- 10. Professional Input page ---------- */
    .input-page-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
      padding: 22px 24px;
      margin-bottom: 18px;
      border-radius: 20px;
      color: #fff;
      background:
        radial-gradient(1100px 240px at 8% -40%, rgba(255, 255, 255, .3), transparent 60%),
        linear-gradient(118deg, #12A45F 0%, #0f766e 46%, #1f6feb 100%);
      box-shadow: 0 20px 48px rgba(18, 164, 95, .24);
    }

    .input-page-hero h2 {
      margin: 0 0 5px;
      font-size: 1.28rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .input-page-hero p {
      margin: 0;
      font-size: 0.83rem;
      opacity: .93;
      max-width: 62ch;
    }

    .input-hero-stats {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .input-hero-stat {
      min-width: 96px;
      padding: 10px 14px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .16);
      border: 1px solid rgba(255, 255, 255, .28);
      backdrop-filter: blur(4px);
    }

    .input-hero-stat span {
      display: block;
      font-size: 0.64rem;
      text-transform: uppercase;
      letter-spacing: .07em;
      opacity: .88;
      font-weight: 700;
    }

    .input-hero-stat strong {
      display: block;
      margin-top: 3px;
      font-size: 1.02rem;
      font-weight: 900;
    }

    #tab-input .card {
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
    }

    #tab-input .card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 4px;
      background: linear-gradient(180deg, var(--accent), #6b8afd);
      opacity: .85;
    }

    #tab-input .card:hover {
      border-color: rgba(255, 130, 67, .38);
      box-shadow: 0 16px 38px rgba(26, 31, 54, .12);
    }

    #tab-input .card-title {
      padding-bottom: 12px;
      margin-bottom: 14px;
      border-bottom: 1px dashed var(--border);
    }

    #tab-input .card-title-left span:last-child {
      font-size: 0.98rem;
      font-weight: 800;
      letter-spacing: -0.01em;
    }

    #tab-input .member-form,
    #tab-input .add-bill-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
      gap: 10px;
      align-items: center;
      padding: 14px;
      border-radius: 14px;
      background: var(--surface2);
      border: 1px solid var(--border);
    }

    #tab-input .member-form .text-input,
    #tab-input .member-form .select-input,
    #tab-input .add-bill-row .text-input,
    #tab-input .add-bill-row .select-input {
      max-width: 100% !important;
      width: 100%;
    }

    #tab-input .member-form .btn,
    #tab-input .add-bill-row .btn {
      white-space: nowrap;
    }

    #tab-input .bulk-rent-help {
      border-radius: 12px;
      background: rgba(107, 138, 253, .08);
      border: 1px solid rgba(107, 138, 253, .2);
      padding: 10px 12px;
      font-size: 0.79rem;
      line-height: 1.55;
    }

    #tab-input .rent-bulk-action-card {
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--surface2);
      padding: 14px;
      margin-top: 14px;
    }

    #tab-input .rent-preview-card {
      border-radius: 14px;
    }

    @media (max-width: 640px) {
      .input-page-hero {
        padding: 18px;
      }

      #tab-input .member-form,
      #tab-input .add-bill-row {
        grid-template-columns: 1fr;
      }
    }

    /* Modal above the fixed header/ticker stack */
    .modal-overlay {
      z-index: 1400;
    }

    /* Compact Today / Record Date pair, dashboard only */
    .toolbar.dashboard-only-toolbar {
      grid-template-columns: repeat(auto-fit, minmax(190px, 240px)) !important;
      gap: 12px !important;
      margin-bottom: 16px !important;
    }

    .toolbar.dashboard-only-toolbar .toolbar-item {
      padding: 10px 12px;
    }

    .toolbar.dashboard-only-toolbar .toolbar-today-value {
      min-height: 34px;
      font-size: 0.9rem;
    }

    @media (max-width: 520px) {
      .toolbar.dashboard-only-toolbar {
        grid-template-columns: 1fr !important;
      }
    }