/* Custom colors for GrowthPoints */

/* ═══════════════════════════════════════════════════════════════
   SHARED CHAT UTILITIES
   These classes are used across multiple chat pages. Because
   Blazor scoped CSS only applies to the component that owns the
   .razor.css file, any class used by MORE than one component
   must live here (global CSS).
   ═══════════════════════════════════════════════════════════════ */

/* ── Icon button (header icons: back, search, menu, close) ── */
.chat-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    color: #000;
    padding: 4px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.chat-icon-btn--active {
    color: var(--brand, #4A8A68);
}

/* ── Header action group (right-side icon cluster) ── */
.chat-list-header-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* ── Dropdown backdrop (click-outside dismissal) ── */
.chat-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
}

/* ── Dropdown menu panel ── */
.chat-dropdown-menu {
    position: absolute;
    right: var(--gap, 16px);
    top: 56px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 50;
    min-width: 200px;
    overflow: hidden;
}

/* ── Dropdown menu item ── */
.chat-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 0.95rem;
    cursor: pointer;
    color: #000;
    border-bottom: 1px solid #f0f0f0;
}

.chat-dropdown-item:last-child {
    border-bottom: none;
}

.chat-dropdown-item:hover {
    background: #f8f8f8;
}

.chat-dropdown-divider {
    margin: 0;
    border: none;
    border-top: 1px solid #e0e0e0;
}

/* ── Spinner (used in send/action buttons across chat pages) ── */
.chat-req-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: chat-spin 0.7s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes chat-spin {
    to { transform: rotate(360deg); }
}

/* ── Confirmation overlay backdrop ──────────────────────────── */
/* Used in: ChatRequests, ChatContactRequest, ChatConversation, ContactInfo */
.chat-req-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal, 300);
    padding: var(--space-5, 24px);
    animation: chat-overlay-fade 200ms cubic-bezier(0, 0, 0.2, 1);
}

/* ── Confirmation modal card ─────────────────────────────────── */
.chat-req-modal {
    background: var(--surface, #fff);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 32px 24px 24px;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    animation: chat-modal-enter 200ms cubic-bezier(0, 0, 0.2, 1);
}

/* ── Modal icon ──────────────────────────────────────────────── */
.chat-req-modal-icon {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--brand, #4A8A68);
}

.chat-req-modal-icon--danger  { color: #e53935; }
.chat-req-modal-icon--warning { color: #F57C00; }

/* ── Modal body text ─────────────────────────────────────────── */
.chat-req-modal-text {
    text-align: center;
    font-size: 1rem;
    color: var(--text, #000);
    margin: 0;
    line-height: 1.5;
}

/* ── Modal button column ─────────────────────────────────────── */
.chat-req-modal-btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* ── Confirmation buttons (full-width pill) ──────────────────── */
.chat-req-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 40px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 200ms;
}

.chat-req-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.chat-req-btn--grant   { background: var(--brand, #4A8A68); color: var(--text-white, #fff); }
.chat-req-btn--decline { background: #555;                  color: var(--text-white, #fff); }

/* ── Entry animations ────────────────────────────────────────── */
@keyframes chat-overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes chat-modal-enter {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

@media (prefers-reduced-motion: reduce) {
    .chat-req-overlay,
    .chat-req-modal { animation: none; }
}

/* ── Chat message search highlight ──────────────────────────── */
mark.chat-search-highlight {
    background: #b2f0b2;
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

/* Design tokens — canonical source: design-system/MASTER.md */
:root {
	/* Brand greens */
	--brand: #4A8A68;
	--brand-strong: #136242;
	--brand-deep: #044D31;
	--brand-light: #86AF99;
	--brand-subtle: #F6F8F7;
	--btn-disabled: #c2d7cc;

	/* Surfaces & backgrounds */
	--bg: #F6F8F7;
	--surface: #ffffff;

	/* Text */
	--text: #000000;
	--text-white: #ffffff;
	--muted: #848484;

	/* Accent */
	--accent: #FF700D;

	/* Status dots */
	--status-online:  #17CD20;
	--status-away:    #FF9B00;
	--status-offline: #5D5446;

	/* Chat UI */
	--chat-text-secondary:  #6A6C6B;  /* preview / secondary text — warmer than --muted */
	--chat-selected-row:    #EDFAEF;  /* active/selected chat row highlight */
	--chat-unread-badge:    #FF0000;  /* unread count badge */
	--chat-read-check:      #3DC518;  /* message read double-tick */
	--chat-selected-check:  #2BC602;  /* forward-picker selected checkbox */
	--chat-select-border:   #A8A8A8;  /* unselected forward-picker circle border */

	/* Layout */
	--gap: 16px;
}

/* Base layout */
body {
    color: var(--text);
    min-height: 100vh;
}

/* Home page background */
.main-content-home {
    background: #FFFFFF;
}

/* Auth / other pages background */
.main-content-auth {
    background: #F6F8F7;
}

/* ===== App grid (mobile-first) ===== */
.app-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "main"
        "footer";
    min-height: 100vh;
}
.app-main { grid-area: main; padding-bottom: 80px; }
.app-footer { grid-area: footer; }

/* Remove bottom padding when footer is not shown */
.app-grid.no-footer .app-main {
    padding-bottom: 0;
    max-width: none;
}

/* Full viewport for no-footer pages */
.app-grid.no-footer {
    grid-template-rows: 1fr;
    grid-template-areas: "main";
}

/* Tablet (768px) — centred card column visible against page background */
@media (min-width: 768px) {
    .app-main {
        max-width: 640px;
        margin-inline: auto;
        width: 100%;
        padding-inline: 24px;
        box-sizing: border-box;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.05);
        border-radius: 16px 16px 0 0;
    }
    .app-grid.no-footer .app-main {
        max-width: none;
        padding-inline: 0;
        box-shadow: none;
        border-radius: 0;
    }
}

/* Desktop (1024px) — wider column, stronger card lift */
@media (min-width: 1024px) {
    .app-main {
        max-width: 800px;
        padding-inline: 40px;
        padding-bottom: 100px;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 8px 32px rgba(0,0,0,0.07);
        border-radius: 16px 16px 0 0;
    }
    .app-grid.no-footer .app-main {
        max-width: none;
        padding-inline: 0;
        padding-bottom: 0;
        box-shadow: none;
        border-radius: 0;
    }
}

/* Large desktop (1440px) — more breathing room, same visual style */
@media (min-width: 1440px) {
    .app-main {
        max-width: 960px;
    }
    .app-grid.no-footer .app-main {
        max-width: none;
    }
}

/* ===== Menu links ===== */
.custom-menu-link {
    color: var(--text) !important;
    font-weight: 500;
}
.active-menu-link {
    color: var(--text) !important;
    font-weight: bold;
}
.custom-menu-link:not(.active-menu-link) {
    color: var(--muted) !important;
}

/* Bottom navigation */
.bottom-nav-bar {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff !important;
    z-index: 1000;
    padding: 8px 0 env(safe-area-inset-bottom, 0) 0;
    height: calc(70px + env(safe-area-inset-bottom, 0));
    box-shadow: 0 -1px 6px rgba(0,0,0,0.06);
}
.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
    padding: 4px 0;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item:active {
    opacity: 0.7;
}
.bottom-nav-icon.mud-icon-root,
.bottom-nav-icon.mud-icon-root.mud-svg-icon,
.bottom-nav-icon svg {
    width: 28px;
    height: 28px;
    color: #7A7A7A !important;
    fill: #7A7A7A !important;
    pointer-events: none;
    display: inline-block;
    vertical-align: middle;
}
.bottom-nav-icon,
.bottom-nav-icon.fas,
.bottom-nav-icon.far,
.bottom-nav-icon.fal,
.bottom-nav-icon.fab {
    font-size: 28px;
    color: #7A7A7A !important;
    pointer-events: none;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}
.bottom-nav-icon-active,
.bottom-nav-icon-active.fas,
.bottom-nav-icon-active.far,
bottom-nav-icon-active.fal,
.bottom-nav-icon-active.fab {
    color: #000 !important;
}

.bottom-nav-label {
    font-size: 0.8rem;
    color: #000000;
    margin-top: 2px;
    text-align: center;
    pointer-events: none;
}

/* Ensure image-based SVGs match font / SVG icon sizing and alignment */
img.bottom-nav-icon,
.bottom-nav-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;      /* keep aspect ratio */
    display: inline-block;
    vertical-align: middle;   /* aligns with text and other icons */
    pointer-events: none;
}

/* Larger viewports: scale ALL bottom-nav icons together */
@media (min-width: 768px) {
    /* Tablet: match the 640px app-main column */
    .bottom-nav-bar {
        max-width: 640px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.10);
    }
    .bottom-nav-icon,
    .bottom-nav-icon.fas,
    .bottom-nav-icon.far,
    .bottom-nav-icon.fal,
    .bottom-nav-icon.fab {
        font-size: 26px;
    }
    .bottom-nav-icon.mud-icon-root,
    .bottom-nav-icon.mud-icon-root.mud-svg-icon,
    .bottom-nav-icon svg {
        width: 26px;
        height: 26px;
    }
    img.bottom-nav-icon,
    .bottom-nav-icon img {
        width: 26px;
        height: 26px;
    }
    .bottom-nav-label {
        font-size: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .bottom-nav-bar {
        display: flex;
        max-width: 800px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 0;       /* flush with card bottom edge */
        box-shadow: none;       /* card shadow on app-main handles depth */
    }
}

@media (min-width: 1440px) {
    .bottom-nav-bar {
        max-width: 960px;
    }
}

/* Note: to allow the SVG to inherit color from CSS (so it matches .bottom-nav-icon color),
   the SVG file should use `fill="currentColor"` (or remove fill attributes). Otherwise the
   image will render with the colors baked into the file. */

/* ===== Reusable input group (icon inside box, left of input) ===== */
.gp-input-group {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #86AF99;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.gp-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px 0 16px;
    color: var(--brand, #4A8A68);
    flex-shrink: 0;
}
.gp-input-icon svg,
.gp-input-icon .mud-icon-root,
.gp-input-icon .mud-icon-root.mud-svg-icon,
.gp-input-icon .fas,
.gp-input-icon .fal,
.gp-input-icon .fa-regular {
    width: 24px;
    height: 24px;
    font-size: 20px;
    color: var(--brand) !important;
    fill: var(--brand) !important;
}
.gp-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 10px 16px 10px 4px;
    font-size: 16px;
    color: var(--text, #000);
    font-family: inherit;
    box-sizing: border-box;
}
.gp-input::placeholder {
    color: var(--muted, #848484);
}
.gp-input-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #4A8A68;
    margin-bottom: 4px;
    padding-left: 4px;
    letter-spacing: 0.02em;
}

/* Responsive scaling */
@media (min-width: 768px) {
    .gp-input-icon { padding: 0 14px 0 20px; }
    .gp-input-icon svg,
    .gp-input-icon .mud-icon-root,
    .gp-input-icon .fas,
    .gp-input-icon .fal,
    .gp-input-icon .fa-regular { width: 24px; height: 24px; font-size: 20px; }
    .gp-input { font-size: 16px; padding: 12px 16px 12px 6px; }
}
@media (min-width: 1024px) {
    .gp-input-icon svg,
    .gp-input-icon .mud-icon-root,
    .gp-input-icon .fas,
    .gp-input-icon .fal,
    .gp-input-icon .fa-regular { width: 22px; height: 22px; font-size: 18px; }
    .gp-input { font-size: 15px; padding: 10px 14px 10px 6px; }
}

/* ===== Select (dropdown inside input group) ===== */
.gp-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background: transparent;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* Prevent iOS from zooming the viewport when a select gains focus
   (iOS auto-zooms into inputs smaller than 16px). */
@media (max-width: 767px) {
    .gp-select,
    .gp-input { font-size: 16px; }
}
.gp-select-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px 0 0;
    color: var(--muted, #848484);
    font-size: 14px;
    pointer-events: none;
    flex-shrink: 0;
}

/* MudBlazor button/icon defaults (override)
   NOTE: Global override — only Counter.razor uses MudButton directly.
   These rules also affect MudBlazor internal components (dialogs, badges).
   Consider scoping to specific wrappers if adding more MudButton usage. */
.mud-button, .mud-icon-button {
    background-color: #ffffff !important;
    color: #000000 !important;
}
.mud-button.mud-disabled, .mud-icon-button.mud-disabled {
    background-color: #c2d7cc !important;
    color: #000000 !important;
}

/* ===== Fixed top bar: constrains hamburger + actions to app-main column ===== */
.gp-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    pointer-events: none;
    /* Push bar content below device status bar (notch / Dynamic Island / Face ID) */
    padding-top: env(safe-area-inset-top, 0px);
}
.gp-top-bar-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* left | center | right — equal side widths */
    align-items: center;
    width: 100%;
    max-width: 100%; /* mobile: full width */
    margin: 0 auto;
    padding: 8px 4px;
    box-sizing: border-box;
    pointer-events: none;
}
.gp-top-bar-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    pointer-events: auto;
}
.gp-top-bar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.gp-top-bar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: auto;
}

/* Tablet — match the 640px app-main column */
@media (min-width: 768px) {
    .gp-top-bar-inner {
        max-width: 640px;
        padding: 12px 8px;
    }
}

/* Desktop — match 800px app-main column */
@media (min-width: 1024px) {
    .gp-top-bar-inner {
        max-width: 800px;
        padding: 14px 12px;
    }
}

/* Large desktop — match 960px app-main column */
@media (min-width: 1440px) {
    .gp-top-bar-inner {
        max-width: 960px;
    }
}

/* dashboard theme: top bar buttons become white */
.dashboard-theme .gp-top-bar .gp-hamburger-btn,
.dashboard-theme .gp-top-bar .gp-hamburger-btn .gp-hamburger-icon-svg,
.dashboard-theme .gp-top-bar .gp-hamburger-btn .mud-icon-root.mud-svg-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}
.dashboard-theme .gp-top-bar .gp-chat-btn,
.dashboard-theme .gp-top-bar .gp-chat-btn .gp-chat-icon-white,
.dashboard-theme .gp-top-bar .gp-chat-btn .mud-icon-root.mud-svg-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Inline info button (inside top bar, not floating) */
.gp-info-btn-inline {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #dc3545;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    pointer-events: auto;
}

/* Hamburger button - base */
.gp-hamburger-btn {
    background: transparent;
    border: none;
    padding: 12px;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    color: #000;
    transition: background 0.2s, color 0.2s;
}
.gp-hamburger-icon-svg {
    color: inherit !important;
}
.gp-hamburger-label {
    margin-left: 6px;
    color: inherit !important;
}

/* Menu open state - specific overrides placed after global rules to ensure they win */
.gp-hamburger-btn.menu-open {
    background: #136242 !important;
    color: #fff !important;
}
.gp-hamburger-btn.menu-open .gp-hamburger-icon-svg,
.gp-hamburger-btn.menu-open .gp-hamburger-label {
    color: #fff !important;
}
/* Ensure MudBlazor svg icon inside the open hamburger uses white */
.gp-hamburger-btn.menu-open .mud-icon-root.mud-svg-icon {
    fill: #fff !important;
    color: #fff !important;
}

/* Menu overlay and sidebar */
.gp-menu-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.3);
    z-index: 2000;
}
.gp-menu-sidebar {
    background: #fff;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    padding-top: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Sidebar header button (full width) */
.gp-sidebar-header-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* left-align contents */
    width: 100%;
    padding: 12px 16px;
    background: #136242;
    color: #fff;
    border: none;
    cursor: pointer;
}
.gp-sidebar-icon {
    color: #fff !important;
}
.gp-sidebar-label {
    color: #fff !important;
    font-weight: 600;
    margin-left: 110px; /* spacing between arrow and text */
}

/* Ensure MudBlazor svg icon inside sidebar header is white */
.gp-sidebar-header-btn .mud-icon-root.mud-svg-icon {
    fill: #fff !important;
    color: #fff !important;
}

/* ===== Menu: Services Statement card ===== */
.gp-menu-card {
	margin: 20px 16px 12px;
	border: 1.5px solid #86AF99;
	border-radius: 12px;
	padding: 14px 16px;
	background: #E9F5EF;
}
.gp-menu-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.gp-menu-card-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text, #000);
}
.gp-menu-card-amount {
    font-weight: 700;
    font-size: 17px;
    color: var(--text, #000);
}
.gp-menu-card-desc {
    font-size: 13px;
    color: var(--text, #000);
    line-height: 1.4;
    margin: 0;
}

/* ===== Sidebar: profile identity row ===== */
.gp-sidebar-profile-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 8px;
    border-bottom: 1px solid #e8ece9;
}

.gp-sidebar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #e0e0e0;
    flex-shrink: 0;
    border: 1.5px solid #86AF99;
}

.gp-sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gp-sidebar-username {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #000);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

/* ===== Menu: navigation items ===== */
.gp-menu-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
}
.gp-menu-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 14px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    color: var(--text, #000);
    text-align: left;
}
.gp-menu-item:hover {
    background: #f0f5f2;
}
.gp-menu-item.gp-menu-muted {
    font-weight: 500;
    color: var(--muted, #848484);
}
.gp-menu-item.gp-menu-merchant {
    font-weight: 700;
    color: #000;
}
.gp-menu-item:disabled {
    cursor: default;
    pointer-events: none;
}
.gp-menu-item.gp-menu-danger {
    color: var(--text, #000);
}
.gp-menu-item-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted, #848484);
    line-height: 1.3;
}

/* ===== Auth pages (Login, Forgot Password, Reset Password) ===== */
.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 24px;
    min-height: 100vh;
    background: #F6F8F7;
}

.auth-logo {
    width: 100px;
    height: 100px;
    margin-bottom: 24px;
}
.auth-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.auth-title {
    font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    font-weight: 700;
    font-size: 28px;
    color: var(--text, #000);
    margin: 0 0 8px;
    text-align: center;
}

.auth-subtitle {
    font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    font-style: italic;
    font-size: 16px;
    color: var(--muted, #848484);
    text-align: center;
    margin: 0 0 32px;
    line-height: 1.4;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 480px;
}

.auth-error {
    color: #dc3545;
    font-size: 14px;
    text-align: center;
    margin-bottom: 8px;
    font-weight: 500;
}

/* ErrorBoundary fallback */
.gp-error-boundary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
}

    .gp-error-boundary h2 {
        font-size: 20px;
        font-weight: 600;
        margin: 0;
        color: var(--mud-palette-text-primary, #333);
    }

    .gp-error-boundary p {
        font-size: 14px;
        color: var(--mud-palette-text-secondary, #666);
        margin: 0;
    }

    .gp-error-boundary .auth-btn {
        margin-top: 8px;
        max-width: 200px;
    }

/* App update banner */
.gp-update-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--brand-strong, #136242);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    z-index: 1200;
}

.gp-update-btn {
    background: #fff;
    color: var(--brand-strong, #136242);
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.gp-update-btn:hover {
    background: #e8ece9;
}

.gp-update-dismiss {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px;
    opacity: 0.8;
}

.gp-update-dismiss:hover {
    opacity: 1;
}

.auth-success {
    color: var(--brand, #4A8A68);
    font-size: 14px;
    text-align: center;
    margin-bottom: 8px;
    font-weight: 500;
}

.auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
}

.auth-link {
    color: var(--text, #000);
    font-weight: 600;
    font-size: 14px;
    text-decoration: underline;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text, #000);
    cursor: pointer;
}
.auth-remember input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--brand, #4A8A68);
    cursor: pointer;
}

.auth-btn {
    display: block;
    width: 100%;
    padding: 16px;
    border-radius: 55px;
    background: var(--brand, #407d5d);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    border: none;
    cursor: pointer;
    margin-top: 8px;
    text-align: center;
}
.auth-btn:hover {
    background: var(--brand-strong, #136242);
}

.auth-btn-disabled {
    background: var(--btn-disabled, #c2d7cc) !important;
    cursor: not-allowed;
}

.auth-btn-alt-1 {
	background: #407d5d;
	padding: 13px;
}

	.auth-btn-alt-1:hover {
		background: #2f5f49;
	}


.auth-btn-secondary {
    background: #6b6b6b;
    color: #fff;
    margin-top: 0;
}
.auth-btn-secondary:hover {
    background: #555;
}

.auth-btn-danger {
    background: #b00020;
    margin-top: 0;
}
.auth-btn-danger:hover:not(:disabled) {
    background: #8b0018;
}
.auth-btn-danger:disabled {
    background: var(--btn-disabled, #c2d7cc);
    cursor: not-allowed;
}

.auth-link-btn {
    background: none;
    border: none;
    color: var(--brand, #4A8A68);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    text-align: center;
}

.auth-terms {
    font-size: 14px;
    color: var(--brand, #4A8A68);
    font-weight: 600;
}
.auth-terms-link {
    color: var(--brand, #4A8A68);
    text-decoration: underline;
    font-weight: 600;
}

.auth-checkbox {
    width: 22px;
    height: 22px;
    accent-color: var(--brand, #4A8A68);
    cursor: pointer;
}

.auth-privacy-link {
    color: var(--brand, #4A8A68);
    font-weight: 600;
    font-size: 14px;
    text-decoration: underline;
    text-align: center;
}

/* ===== Check Email page ===== */
.ce-icon-wrap {
    display: flex;
    justify-content: center;
    margin: 16px 0 8px;
}
.ce-icon {
    font-size: 52px;
    color: var(--brand, #4A8A68);
}
.ce-text {
    text-align: center;
    font-size: 15px;
    color: var(--muted, #848484);
    margin: 8px 0 4px;
    line-height: 1.5;
}
.ce-email {
    text-align: center;
    font-size: 15px;
    margin: 4px 0 16px;
}
.ce-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 16px;
}
.auth-btn-link {
    background: none;
    border: none;
    color: var(--brand, #4A8A68);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    text-align: center;
    padding: 4px 8px;
}
.auth-btn-link:disabled {
    color: var(--muted, #848484);
    cursor: not-allowed;
    text-decoration: none;
}

/* Password toggle button inside input group */
.gp-input-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0 14px 0 0;
    cursor: pointer;
    flex-shrink: 0;
}
.gp-input-toggle .mud-icon-root,
.gp-input-toggle .mud-icon-root.mud-svg-icon {
    width: 22px;
    height: 22px;
    color: var(--muted, #848484) !important;
    fill: var(--muted, #848484) !important;
}

/* Responsive - small screens */
@media (max-width: 374px) {
    .auth-page { padding: 24px 16px 16px; }
    .auth-logo { width: 72px; height: 72px; margin-bottom: 16px; }
    .auth-title { font-size: 22px; }
    .auth-subtitle { font-size: 14px; margin-bottom: 20px; }
    .auth-form { gap: 12px; }
    .auth-btn { font-size: 16px; padding: 14px; }
    .auth-options { flex-wrap: wrap; gap: 8px; }
    .gp-input { font-size: 14px; padding: 10px 12px 10px 4px; }
    .gp-input-icon { padding: 0 8px 0 12px; }
    .notifications-title { font-size: 22px; }
    .notifications-subtitle { font-size: 14px; }
}

/* Responsive - tablet */
@media (min-width: 768px) {
    .auth-logo { width: 100px; height: 100px; }
    .auth-title { font-size: 28px; }
    .auth-subtitle { font-size: 16px; }
    .auth-form { max-width: 480px; }
}

/* Responsive - desktop */
@media (min-width: 1024px) {
    .auth-logo { width: 100px; height: 100px; }
    .auth-title { font-size: 28px; }
    .auth-subtitle { font-size: 16px; }
    .auth-btn { font-size: 16px; padding: 13px; }
    .auth-form { max-width: 480px; }
}

/* ===== Custom dialog (popup) ===== */
.gp-dialog .mud-dialog-content {
    padding: 0 !important;
    overflow: hidden;
}

/* Full-screen dialog (used for deactivate account form etc.) */
.gp-fullscreen-dialog .mud-dialog-content {
    padding: 0 !important;
    overflow-y: auto;
}

.gp-dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px 28px;
}

.gp-dialog-icon {
    margin-bottom: 8px;
}
.gp-dialog-icon .mud-icon-root,
.gp-dialog-icon .mud-icon-root.mud-svg-icon {
    width: 32px;
    height: 32px;
    color: var(--brand, #4A8A68) !important;
    fill: var(--brand, #4A8A68) !important;
}

.gp-dialog-title {
    font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    font-weight: 700;
    font-size: 22px;
    color: var(--text, #000);
    margin: 0 0 12px;
}

.gp-dialog-text {
    font-size: 15px;
    color: var(--text, #000);
    line-height: 1.5;
    margin: 0 0 15px;
}

.gp-dialog-content .auth-btn {
    max-width: 320px;
}

/* ===== Notifications prompt page ===== */
.notifications-prompt {
    justify-content: center;
}

.notifications-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 480px;
    gap: 8px;
}

.notifications-title {
    font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    font-weight: 700;
    font-size: 26px;
    color: var(--text, #000);
    margin: 0 0 4px;
}

.notifications-subtitle {
    font-size: 16px;
    color: var(--text, #000);
    margin: 0 0 24px;
}

.notifications-content .auth-btn {
    width: 100%;
}

.notifications-later {
    background: none;
    border: none;
    color: var(--muted, #848484);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    padding: 12px;
}

/* ===== Chat badge (inside gp-top-bar) ===== */
.gp-chat-badge {
	position: relative;
	display: inline-flex;
}
.gp-chat-btn {
	background: transparent;
	border: none;
	padding: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gp-chat-icon {
	font-size: 25px;
	color: #000;
}
.gp-chat-icon-white {
	font-size: 25px;
	color: #000;
}

/* Red notification bubble on the chat button */
span.gp-chat-badge-dot {
	border-radius: 12.5px !important;
	font-size: 20px !important;
	height: 25px !important;
	letter-spacing: 0 !important;
	min-width: 25px !important;
	padding: 4px 6px !important;
	pointer-events: auto !important;
	line-height: 1 !important;
	position: absolute !important;
	text-align: center !important;
	text-indent: 0 !important;
	transition: .3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
	white-space: nowrap !important;
	top: auto !important;
	right: auto !important;
	bottom: calc(100% - 23px) !important;
	left: calc(100% - 22px) !important;
}

/* ===== Info button (top-center) ===== */
.gp-info-btn-inactive {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1100;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #ffffff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.gp-info-btn-icon-inactive {
	font-size: 12px;
	color: #4B9076;
}
.gp-info-btn {
    /* now rendered as gp-info-btn-inline inside gp-top-bar — kept for legacy references */
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #dc3545;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.gp-info-btn-icon {
    font-size: 12px;
    color: #fff;
}


.ms-action-btn img {
	width: 48px;
	height: 48px;
	/*object-fit: contain;*/
}
/* ===== Info dialog content ===== */
.gp-info-dialog-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--brand, #4A8A68);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.gp-info-icon-inner {
    font-size: 22px;
    color: #fff;
}

.gp-info-heading {
    font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    font-weight: 700;
    font-size: 17px;
    color: var(--text, #000);
    margin: 4px 0 8px;
}

.gp-info-dialog-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand, #4A8A68);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.gp-info-icon-inner {
    font-size: 22px;
    color: #fff;
}

.gp-info-heading {
    font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    font-weight: 700;
    font-size: 17px;
    color: var(--text, #000);
    margin: 4px 0 8px;
}

.gp-info-disclaimer {
    font-size: 14px;
    color: var(--text, #000);
    line-height: 1.5;
    margin: 4px 0 12px;
    text-align: center;
    font-style: italic;
}

/* ===== Info dialog — scrollable on small screens ===== */
.gp-info-dialog .mud-dialog {
    max-height: 90vh !important;
    display: flex;
    flex-direction: column;
}
.gp-info-dialog .mud-dialog-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    max-height: calc(90vh - 20px);
}
.gp-info-dialog-body {
    padding: 28px 20px 24px;
}

/* ===== Info button — read state (white bg, green icon) ===== */
.gp-info-btn-inline--read {
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.gp-info-btn-inline--read .gp-info-btn-icon {
    color: var(--brand, #4A8A68) !important;
}

/* ===== Warning dialog icon (red triangle) ===== */

.gp-warning-dialog-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gp-warning-dialog-icon::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-bottom: 48px solid #dc3545;
    border-radius: 4px;
}
.gp-warning-icon-inner {
    position: relative;
    z-index: 1;
    font-size: 20px;
    color: #fff;
    margin-top: 8px;
}

/* ===== Dialog cancel button (gray) ===== */
.gp-dialog-cancel-btn {
    display: block;
    width: 100%;
    max-width: 320px;
    padding: 16px;
    border-radius: 55px;
    background: #6c757d;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    border: none;
    cursor: pointer;
    margin-top: 8px;
    margin-bottom: 12px;
    text-align: center;
}
.gp-dialog-cancel-btn:hover {
    background: #5a6268;
}

/* ===== Dialog plain text button (e.g. "Switch Off") ===== */
.gp-dialog-text-btn {
    background: none;
    border: none;
    color: var(--muted, #848484);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    padding: 12px;
    text-align: center;
}

/* ===== Login failed dialog ===== */
.gp-login-failed-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.gp-login-failed-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand, #4A8A68);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gp-login-failed-icon-inner {
    font-size: 18px;
    color: #fff;
}

/* Dashboard-specific icon color overrides (force white on dashboard) */
.dashboard-theme .gp-hamburger-btn,
.dashboard-theme .gp-hamburger-btn .gp-hamburger-icon-svg,
.dashboard-theme .gp-hamburger-btn .mud-icon-root.mud-svg-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Hide global hamburger and chat badge on chat pages (they have their own nav) */
.chat-page-active .gp-hamburger-btn,
.chat-page-active .gp-chat-badge {
    display: none !important;
}

.dashboard-theme .gp-chat-badge,
.dashboard-theme .gp-chat-badge .gp-chat-btn,
.dashboard-theme .gp-chat-badge .gp-chat-btn .gp-chat-icon-white,
.dashboard-theme .gp-chat-badge .mud-icon-root.mud-svg-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}




/* Override MudBlazor badge inset for this avatar instance */
.gp-avatar-badge.mud-badge.mud-badge-top.right.mud-badge-overlap {
	/* default for most screens: move the red badge farther from avatar edge */
	inset: auto auto calc(100% - 30px) calc(100% - 30px) !important;
}

/* Target the inner badge span directly */
span.gp-avatar-badge-badge {
	top: auto !important;
	right: auto !important;
	bottom: calc(100% - 34px) !important;
	left: calc(100% - 34px) !important;
}

@media (max-width: 374px) {
	span.gp-avatar-badge-badge {
		bottom: calc(100% - 20px) !important;
		left: calc(100% - 20px) !important;
	}
}

@media (min-width: 1024px) {
	span.gp-avatar-badge-badge {
		bottom: calc(100% - 40px) !important;
		left: calc(100% - 40px) !important;
	}
}

/* Override MudBlazor badge inset for Growth Point Rewards avatar */
.gpr-avatar-badge.mud-badge.mud-badge-top.right.mud-badge-overlap {
	inset: auto auto calc(100% - 24px) calc(100% - 24px) !important;
}

span.gpr-avatar-badge-badge {
	top: auto !important;
	right: auto !important;
	bottom: calc(100% - 28px) !important;
	left: calc(100% - 28px) !important;
}

@media (max-width: 374px) {
	span.gpr-avatar-badge-badge {
		bottom: calc(100% - 18px) !important;
		left: calc(100% - 18px) !important;
	}
}

@media (min-width: 1024px) {
	span.gpr-avatar-badge-badge {
		bottom: calc(100% - 32px) !important;
		left: calc(100% - 32px) !important;
	}
}

/* ===== Shared page layout ===== */
.gp-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #F6F8F7;
	min-height: 100vh;
	padding: 16px 24px 100px;
}

/* ── Viewport lock for chat pages ──────────────────────────── */
/* Height stops above the fixed nav bar so flex children don't slip behind it.
   min-height: 0 overrides the base .app-grid min-height: 100vh so that
   height: calc(100dvh - 70px) can take effect. */
.chat-page-active {
	height: calc(100dvh - 70px - env(safe-area-inset-bottom, 0px));
	min-height: 0;
	overflow: hidden;
}

.chat-page-active .app-main {
	flex: 1 1 0%;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding-bottom: 0;
	box-shadow: none;
	border-radius: 0;
}

.chat-page-active .mud-main-content {
	flex: 1 1 0%;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Chat pages are full-bleed edge-to-edge (no horizontal padding, no centering) */
/* min-height: 0 cancels the base .gp-page min-height: 100vh so height: 100% can take effect;
   flex: 1 1 0% makes it fill the available height in the flex column parent. */
.gp-page.chat-full-bleed {
	align-items: stretch;
	padding: 0 !important;
	background: #fff;
	flex: 1 1 0%;
	min-height: 0;
	height: 100%;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Remove MudBlazor wrapper padding/background for chat full-bleed pages */
.mud-main-content:has(.chat-full-bleed) {
	padding: 0 !important;
	margin: 0 !important;
	background: #fff !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
	flex: 1 1 0% !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}

/* ===== Shared loading indicator ===== */
.gp-loading {
	text-align: center;
	padding: 48px;
	color: var(--muted, #848484);
}

/* ===== Shared page title ===== */
.gp-page-title {
	font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	font-weight: 700;
	font-size: clamp(22px, 5.5vw, 30px);
	color: var(--text, #000);
	text-align: center;
	margin: 0 0 16px;
}

/* ===== Default / fallback images ===== */
.gp-img-fallback-square {
	background: url('/images/default/default-square.svg') center / cover no-repeat;
}

.gp-img-fallback-horizontal {
	background: url('/images/default/default-horizontal.svg') center / cover no-repeat;
}

.gp-img-fallback-vertical {
	background: url('/images/default/default-vertical.svg') center / cover no-repeat;
}

/* ===== Shared data table ===== */
.gp-table-wrap {
	width: 100%;
	max-width: 640px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.gp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.gp-th {
	font-weight: 600;
	font-size: 15px;
	color: var(--text, #000);
	padding: 14px 16px;
	text-align: left;
	border-bottom: 2px solid #e8ece9;
	white-space: nowrap;
}
.gp-th-center { text-align: center; }
.gp-th-right  { text-align: right; }

.gp-row {
	border-bottom: 1px solid #e8ece9;
}
.gp-row:last-child {
	border-bottom: none;
}

.gp-td {
	padding: 10px 12px;
	vertical-align: top;
	color: var(--text, #000);
}
.gp-td-center { text-align: center; }
.gp-td-right  { text-align: right; }

/* ===== Shared circular avatar ===== */
.gp-circle-avatar {
	border-radius: 50%;
	overflow: hidden;
	background: #e0e0e0;
}
.gp-circle-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===== Shared responsive: small phones ===== */
@media (max-width: 374px) {
	.gp-page { padding: 12px 16px 100px; }
	.gp-th { padding: 10px 8px; font-size: 13px; }
	.gp-td { padding: 10px 8px; }
}

/* ===== Shared responsive: tablet ===== */
@media (min-width: 768px) {
	.gp-page-title { font-size: 30px; }
	.gp-table { font-size: 16px; }
	.gp-th { font-size: 17px; padding: 16px 20px; }
	.gp-td { padding: 16px 20px; }
	.gp-table-wrap { max-width: 720px; }
}

/* ===== Shared responsive: desktop ===== */
@media (min-width: 1024px) {
	.gp-page-title { font-size: 32px; }
	.gp-table-wrap { max-width: 800px; }
}

/* ===== Top bar transparent background (non-dashboard pages) ===== */
.top-bar-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(60px + env(safe-area-inset-top, 0px));
    background: rgba(246, 248, 247, 0.92);
    z-index: 1050;
    pointer-events: none;
}

.top-bar-bg::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(to bottom, rgba(246, 248, 247, 0.92), transparent);
    pointer-events: none;
}

/* ---- Form ---- */
.std-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: 480px;
}

.std-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.std-label {
	font-weight: 700;
	font-size: 15px;
	color: var(--text, #000);
}

/* ---- Select dropdown ---- */
.std-select-wrap {
	position: relative;
	width: 100%;
}

.std-select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background: #fff;
	border: 2px solid #86AF99;
	border-radius: 10px;
	padding: 12px 40px 12px 16px;
	font-size: 16px;
	font-family: inherit;
	color: var(--text, #000);
	cursor: pointer;
	outline: none;
}

.std-select:focus {
	border-color: var(--brand, #4A8A68);
}

.std-select-icon {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted, #848484);
	font-size: 14px;
	pointer-events: none;
}

/* =====================================================================
   DESKTOP & TABLET RESPONSIVE UTILITIES
   Additive breakpoint enhancements — no existing mobile rules changed.
   ===================================================================== */

/* ── Hamburger / floating buttons: reposition on wider screens ── */
@media (min-width: 768px) {
	/* Give the hamburger more breathing room on tablet */
	.gp-hamburger-btn {
		padding: 14px;
	}
}

@media (min-width: 1024px) {
	/* On desktop the hamburger becomes a subtle card-style button */
	.gp-hamburger-btn {
		background: #e8ece9d7 !important;
		border-radius: 10px !important;
		padding: 10px 16px !important;
	}
}

/* ── Sidebar overlay: wider panel on tablet/desktop ── */
@media (min-width: 768px) {
	.gp-menu-sidebar {
		width: 360px;
		max-width: 40vw;
	}
}

/* ── Page-level padding scaling ── */
@media (min-width: 768px) {
	.ms-page {
		padding-bottom: 120px;
	}
	.ms-cards,
	.ms-actions,
	.ms-welcome {
		max-width: 680px;
	}
}

@media (min-width: 1024px) {
	.ms-page {
		padding-bottom: 60px;
	}
	.ms-cards {
		max-width: 800px;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.ms-card {
		flex: 1 1 calc(50% - 8px);
		min-width: 260px;
	}
	.ms-actions {
		max-width: 800px;
	}
	.ms-welcome {
		max-width: 800px;
	}
}

/* ── Auth / form pages: center and cap width ── */
@media (min-width: 768px) {
	.auth-page,
	.auth-card,
	.auth-container {
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ── General content card grid: 2-col on tablet ── */
@media (min-width: 768px) {
	.gp-card-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (min-width: 1024px) {
	.gp-card-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}

/* ── Typography scaling on larger screens ── */
@media (min-width: 768px) {
	.page-title {
		font-size: clamp(22px, 3vw, 32px);
	}
	.section-title {
		font-size: clamp(18px, 2.5vw, 24px);
	}
}

/* ── Input groups and form elements: scale on desktop ── */
@media (min-width: 1024px) {
	.std-input,
	.std-select {
		font-size: 18px;
		padding: 14px 16px;
	}
	.std-label {
		font-size: 16px;
	}
}

/* ── Scrollbar styling for desktop browsers ── */
@media (min-width: 1024px) {
	::-webkit-scrollbar {
		width: 8px;
	}
	::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 4px;
	}
	::-webkit-scrollbar-thumb {
		background: #c0c0c0;
		border-radius: 4px;
	}
	::-webkit-scrollbar-thumb:hover {
		background: #a0a0a0;
	}
}

/* ── No-footer pages (public pages like Home): full viewport, no centering ── */
@media (min-width: 768px) {
	.app-grid.no-footer .app-main {
		padding-left: 0;
		padding-right: 0;
	}
}

/* =====================================================================
   RESPONSIVE RELAXED MODE
   Toggle: add/remove  data-relaxed  from the <html> element in index.html
   Targets extra-small phones (≤360px wide).
   Purposely scoped so nothing changes on standard mobile/tablet/desktop.
   ===================================================================== */

/* --- Token overrides for xs screens --- */
@media (max-width: 360px) {
	[data-relaxed] {
		--gap: 12px;
	}
}

/* --- Layout: app-main and gp-page padding --- */
@media (max-width: 360px) {
	[data-relaxed] .app-main {
		padding-bottom: 72px;
	}

	[data-relaxed] .gp-page {
		padding: 10px 14px 90px;
	}

	[data-relaxed] .gp-page-title {
		font-size: clamp(18px, 5vw, 22px);
		margin-bottom: 10px;
	}
}

/* --- Buttons --- */
@media (max-width: 360px) {
	[data-relaxed] .auth-btn {
		padding: 13px 14px;
		font-size: 16px;
	}

	[data-relaxed] .auth-btn-secondary {
		padding: 11px 14px;
		font-size: 15px;
	}
}

/* --- Inputs --- */
@media (max-width: 360px) {
	[data-relaxed] .gp-input {
		font-size: 15px;
		padding: 10px 12px 10px 6px;
	}

	[data-relaxed] .gp-input-group {
		margin-bottom: 10px;
	}
}

/* --- Auth page layout --- */
@media (max-width: 360px) {
	[data-relaxed] .auth-page {
		padding: 12px 16px 80px;
	}

	[data-relaxed] .auth-form {
		gap: 10px;
	}
}

/* --- Dialogs: prevent overflow and add scroll on xs --- */
@media (max-width: 360px) {
	[data-relaxed] .mud-dialog {
		max-height: 88dvh !important;
	}

	[data-relaxed] .mud-dialog-content {
		overflow-y: auto !important;
		max-height: calc(88dvh - 120px) !important;
	}
}

/* --- Bottom nav: tighter on xs --- */
@media (max-width: 360px) {
	[data-relaxed] .bottom-nav-bar {
		height: calc(60px + env(safe-area-inset-bottom, 0));
		padding: 6px 0 env(safe-area-inset-bottom, 0) 0;
	}

	[data-relaxed] .bottom-nav-item {
		padding: 3px 0;
	}
}