:root {
    --primary-hover: #d6a100;
    --primary-dark: #b68700;
    --gm-bg: #f3f6fb;
    --gm-bg-2: #eef2f8;
    --gm-surface: rgba(255, 255, 255, 0.92);
    --gm-surface-2: #f8fafc;
    --gm-surface-solid: #ffffff;
    --gm-surface-soft: rgba(255, 255, 255, 0.78);
    --gm-panel-bg: rgba(255, 255, 255, 0.76);
    --gm-sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(246, 249, 255, 0.94) 100%);
    --gm-border: rgba(148, 163, 184, 0.2);
    --gm-border-strong: rgba(148, 163, 184, 0.28);
    --gm-text: #182338;
    --gm-text-muted: #66758f;
    --gm-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
    --gm-shadow-hover: 0 24px 56px rgba(15, 23, 42, 0.11);
    --gm-shell-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    --gm-radius-sm: 14px;
    --gm-radius-md: 20px;
    --gm-radius-lg: 26px;
    --gm-primary-soft: rgba(244, 195, 1, 0.16);
    --gm-link: #155eef;
    --gm-success: #065f46;
    --gm-danger: #dc2626;
    --gm-warning: #b45309;
    --gm-info: #0f8cb8;
    --gm-success-soft: rgba(34, 197, 94, 0.12);
    --gm-danger-soft: rgba(248, 113, 113, 0.14);
    --gm-warning-soft: rgba(245, 158, 11, 0.12);
    --gm-info-soft: rgba(56, 189, 248, 0.14);
    --gm-drawer-close-bg: #e8eef8;
    --gm-drawer-close-border: rgba(148, 163, 184, 0.55);
    --gm-drawer-close-text: #334155;
    --gm-auth-bg: radial-gradient(circle at top left, rgba(244, 195, 1, 0.18), transparent 24%),
        radial-gradient(circle at right 20%, rgba(6, 78, 59, 0.08), transparent 28%),
        linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);

    /* Shell layout dimensions - single source of truth, used instead of repeating magic numbers */
    --gm-sidebar-w: 17.25rem;
    --gm-sidebar-w-collapsed: 5.4rem;
    --gm-navheader-h: 4.45rem;
    --gm-header-h: 5.1rem;
    --gm-shell-padtop: 5.85rem;
}

[data-theme-version="dark"] {
    --primary-hover: #ffd657;
    --primary-dark: #ffde73;
    --gm-bg: #07111f;
    --gm-bg-2: #0f172a;
    --gm-surface: rgba(15, 23, 42, 0.9);
    --gm-surface-2: rgba(15, 23, 42, 0.82);
    --gm-surface-solid: #111827;
    --gm-surface-soft: rgba(15, 23, 42, 0.88);
    --gm-panel-bg: rgba(15, 23, 42, 0.82);
    --gm-sidebar-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(17, 24, 39, 0.98) 100%);
    --gm-border: rgba(100, 116, 139, 0.32);
    --gm-border-strong: rgba(100, 116, 139, 0.46);
    --gm-text: #e5edf8;
    --gm-text-muted: #9aabc3;
    --gm-shadow: 0 18px 42px rgba(2, 6, 23, 0.26);
    --gm-shadow-hover: 0 28px 64px rgba(2, 6, 23, 0.36);
    --gm-shell-shadow: 0 28px 72px rgba(2, 6, 23, 0.3);
    --gm-primary-soft: rgba(244, 195, 1, 0.18);
    --gm-link: #93c5fd;
    --gm-success: #6ee7b7;
    --gm-danger: #fca5a5;
    --gm-warning: #fcd34d;
    --gm-info: #7dd3fc;
    --gm-success-soft: rgba(34, 197, 94, 0.18);
    --gm-danger-soft: rgba(248, 113, 113, 0.2);
    --gm-warning-soft: rgba(245, 158, 11, 0.18);
    --gm-info-soft: rgba(56, 189, 248, 0.2);
    --gm-drawer-close-bg: rgba(51, 65, 85, 0.9);
    --gm-drawer-close-border: rgba(100, 116, 139, 0.9);
    --gm-drawer-close-text: #f8fafc;
    --gm-auth-bg: radial-gradient(circle at top left, rgba(244, 195, 1, 0.16), transparent 24%),
        radial-gradient(circle at right 20%, rgba(14, 165, 233, 0.1), transparent 28%),
        linear-gradient(180deg, #020617 0%, #0f172a 100%);
}

body {
    font-family: "Inter", var(--font-family-base);
    color: var(--gm-text);
    background:
        radial-gradient(circle at top left, rgba(244, 195, 1, 0.1), transparent 22%),
        radial-gradient(circle at top right, rgba(244, 195, 1, 0.08), transparent 18%),
        linear-gradient(180deg, var(--gm-bg) 0%, var(--gm-bg-2) 100%);
}

/*
 * The legacy per-page breadcrumb card (.page-titles) is superseded by the
 * unified topbar title in the shared shell header (.topbar-page-title).
 * app/shell JS copies the page title into the topbar and hides this block
 * so every page shows one consistent title treatment instead of two.
 */
.page-titles {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
}

.card,
.dz-card,
.widget-card,
.welcome-card,
.sales-stat-card,
.float-request-stat-card,
.float-request-toolbar-card,
.float-request-table-card,
.float-review-panel,
.notification-panel,
.users-stat-card,
.users-toolbar-card,
.users-table-card,
.care-stat-card,
.care-table-card,
.care-toolbar-card,
.draft-stat-card,
.draft-toolbar-card,
.draft-table-card,
.profile-hero-card,
.profile-account-card,
.profile-form-card,
.profile-security-card,
.profile-stat-card {
    border-radius: var(--gm-radius-md);
    border-color: var(--gm-border) !important;
    box-shadow: var(--gm-shadow);
}

.card .card-header,
.card .card-body,
.card .card-footer {
    background: var(--gm-surface);
}

.card .card-header {
    padding: 1.15rem 1.35rem 0.9rem;
    border-bottom: 1px solid var(--gm-border);
}

.card .card-body {
    padding: 1.25rem 1.35rem 1.35rem;
}

.card .card-footer {
    padding: 0.95rem 1.35rem 1.25rem;
}

.card .card-body.p-0,
.card .card-header.p-0,
.card .card-footer.p-0 {
    padding: 0 !important;
}

.card .table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border-radius: inherit;
}

.card .table-responsive.active-projects,
.card .table-responsive.recentOrderTable {
    padding: 0.25rem 1rem 1rem;
}

.card .table-responsive.active-projects .tbl-caption {
    margin-bottom: 0.75rem;
}

.btn {
    min-height: 46px;
    padding: 0.7rem 1.1rem;
    border-radius: var(--gm-radius-sm);
    font-weight: 700;
}

.btn-primary,
.btn.btn-primary,
.btn-secondary,
.btn.btn-secondary {
    color: #1f2937 !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    border-color: transparent;
    box-shadow: 0 16px 32px rgba(244, 195, 1, 0.2);
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
    color: #111827 !important;
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-dark) 100%);
    border-color: transparent;
}

.form-control,
.dataTables_filter input,
.dataTables_length select,
.bootstrap-select .dropdown-toggle,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
textarea,
select {
    min-height: 46px;
    padding: 0.72rem 0.95rem;
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius-sm);
    background: rgba(255, 255, 255, 0.88);
    color: var(--gm-text);
}

[data-theme-version="dark"] .form-control,
[data-theme-version="dark"] .dataTables_filter input,
[data-theme-version="dark"] .dataTables_length select,
[data-theme-version="dark"] .bootstrap-select .dropdown-toggle,
[data-theme-version="dark"] .select2-container--default .select2-selection--single,
[data-theme-version="dark"] .select2-container--default .select2-selection--multiple,
[data-theme-version="dark"] textarea,
[data-theme-version="dark"] select {
    background: rgba(15, 23, 42, 0.82);
}

.form-control:focus,
.dataTables_filter input:focus,
.dataTables_length select:focus,
.bootstrap-select .dropdown-toggle:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
textarea.form-control:focus,
select:focus {
    border-color: rgba(244, 195, 1, 0.42);
    box-shadow: 0 0 0 0.24rem rgba(244, 195, 1, 0.16) !important;
}

.table-responsive {
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(248, 250, 252, 0.78) 100%);
}

[data-theme-version="dark"] .table-responsive {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82) 0%, rgba(17, 24, 39, 0.76) 100%);
}

.table thead th,
table.dataTable thead th,
table.dataTable thead td {
    padding: 0.9rem 1rem;
    background: transparent;
    color: var(--gm-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table tbody td,
table.dataTable tbody td {
    padding: 1rem;
    white-space: nowrap;
}

.modal-content,
.offcanvas {
    border-radius: var(--gm-radius-lg);
    overflow: hidden;
}

.gm-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1100;
    width: min(420px, calc(100vw - 2rem));
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 0.95rem 1rem;
    border: 1px solid var(--gm-border-strong);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--gm-shell-shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px);
    transition: opacity 220ms ease, transform 220ms ease;
    backdrop-filter: blur(18px);
}

[data-theme-version="dark"] .gm-toast {
    background: rgba(15, 23, 42, 0.94);
}

.gm-toast.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.gm-toast__icon {
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 900;
}

.gm-toast__content {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.gm-toast__title {
    color: var(--gm-text);
    font-size: 0.92rem;
    line-height: 1.3;
}

.gm-toast__message {
    color: var(--gm-text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
    word-break: break-word;
}

.gm-toast--success .gm-toast__icon {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}

.gm-toast--warning .gm-toast__icon {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.gm-toast--danger .gm-toast__icon {
    background: rgba(248, 113, 113, 0.14);
    color: #dc2626;
}

.gm-toast--info .gm-toast__icon {
    background: rgba(244, 195, 1, 0.16);
    color: var(--primary-dark);
}

@media (max-width: 991.98px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        margin-left: 0;
        margin-top: 0.55rem;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .gm-drawer-actions .btn {
        width: 100%;
    }

    .gm-toast {
        left: 1rem;
        right: 1rem;
        width: auto;
    }
}

/* =========================================================================
 * Shell layout - nav header, top header, sidebar (deznav), profile panel,
 * off-canvas drawers, and help desk CTA. Migrated out of the inline
 * <style> block that used to live in resources/views/layouts/nav_bar.blade.php
 * so it ships once instead of once per request, and uses the shared
 * --gm-* tokens above instead of a separate --apollo-* palette.
 * ========================================================================= */

#main-wrapper .header,
#main-wrapper .header-content,
#main-wrapper .content-body,
#main-wrapper .footer,
#main-wrapper .deznav,
#main-wrapper .nav-header {
    position: relative;
    z-index: 1;
}

#main-wrapper .nav-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: var(--gm-sidebar-w);
    height: var(--gm-navheader-h);
    background: rgba(255, 255, 255, 0.98) !important;
    border-right: 1px solid rgba(207, 216, 233, 0.65) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px);
    z-index: 1045 !important;
}

#main-wrapper .nav-header .brand-logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: var(--gm-navheader-h);
    height: 100%;
    padding: 0.68rem 1.05rem 0.68rem 1.1rem;
    background: rgba(255, 255, 255, 0.98) !important;
    position: relative;
    z-index: 2;
    text-decoration: none;
    color: #5f6f87;
}

#main-wrapper .nav-header .brand-badge {
    width: 2.85rem;
    height: 2.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.95rem;
    background: linear-gradient(145deg, rgba(255, 252, 240, 0.98) 0%, rgba(249, 238, 184, 0.96) 100%);
    border: 1px solid rgba(233, 184, 24, 0.28);
    box-shadow: 0 14px 28px rgba(214, 174, 17, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    flex-shrink: 0;
}

#main-wrapper .nav-header .brand-mark {
    width: 1.86rem;
    height: 1.86rem;
    display: block;
    object-fit: contain;
}

#main-wrapper .nav-header .brand-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
}

#main-wrapper .nav-header .brand-title-row {
    display: flex;
    align-items: center;
    min-width: 0;
    position: relative;
    padding-left: 0.9rem;
}

#main-wrapper .nav-header .brand-title-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.24rem;
    height: 1.55rem;
    border-radius: 999px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, rgba(244, 195, 1, 0.95) 0%, rgba(232, 177, 11, 0.62) 100%);
    box-shadow: 0 0 0 0.28rem rgba(244, 195, 1, 0.08);
}

#main-wrapper .nav-header .brand-wordmark {
    display: block;
    width: auto;
    max-width: 100%;
    height: 1.55rem;
    object-fit: contain;
    object-position: left center;
    filter: saturate(0.96) contrast(1.02);
}

#main-wrapper .header {
    position: fixed !important;
    top: 0;
    left: var(--gm-sidebar-w);
    width: calc(100% - var(--gm-sidebar-w)) !important;
    height: var(--gm-header-h) !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    background: linear-gradient(180deg, rgba(244, 248, 255, 0.98) 0%, rgba(250, 252, 255, 0.98) 100%) !important;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(214, 222, 236, 0.72) !important;
    box-shadow: none !important;
    overflow: visible;
    z-index: 1035 !important;
}

#main-wrapper .header .header-content {
    height: var(--gm-header-h) !important;
    padding-left: 1.75rem !important;
    padding-right: 1.25rem !important;
    background: linear-gradient(90deg, rgba(240, 245, 252, 0.98) 0%, rgba(248, 251, 255, 0.98) 100%) !important;
    backdrop-filter: blur(10px);
    border-left: 0;
}

#main-wrapper .header .header-content::after {
    display: none !important;
}

#main-wrapper .header .navbar,
#main-wrapper .header .navbar .navbar-collapse {
    min-height: var(--gm-header-h);
    height: 100%;
}

#main-wrapper .header .navbar {
    padding-inline: 1.25rem 1rem;
}

#main-wrapper .header-right .nav-item .nav-link {
    padding: 0;
}

#main-wrapper .header-left {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    gap: 1.15rem;
    flex: 1;
}

#main-wrapper .header-left .topbar-menu-btn {
    width: 2.8rem;
    height: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 1rem;
    background: transparent;
    color: #74829c;
    font-size: 1.45rem;
    backdrop-filter: none;
    box-shadow: none;
    transition: 0.2s ease;
}

#main-wrapper .header-left .topbar-menu-btn:hover {
    background: rgba(244, 195, 1, 0.12);
    border-color: rgba(244, 195, 1, 0.16);
    color: var(--primary);
}

#main-wrapper .header-left .topbar-page-title {
    margin: 0;
    color: #5f6f87 !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    line-height: 1 !important;
    text-transform: none !important;
}

#main-wrapper .header-left .topbar-page-kicker {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

#main-wrapper .header-right {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

#main-wrapper .header-profile2 .header-info {
    display: none !important;
}

#main-wrapper .header-profile2 .nav-link {
    padding: 0 !important;
    background: transparent;
    border: 0;
    box-shadow: none;
}

#main-wrapper .header-profile2 .header-info2 {
    gap: 0 !important;
}

#main-wrapper .header-profile2 .header-media {
    margin-right: 0 !important;
}

#main-wrapper .header-search {
    min-width: 21.5rem;
}

#main-wrapper .header-search .input-group {
    align-items: center;
    padding: 0 1.15rem;
    border: 1px solid rgba(201, 211, 228, 0.7);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    min-height: 2.75rem;
    backdrop-filter: blur(16px);
    transition: 0.2s ease;
}

#main-wrapper .header-search .input-group-text,
#main-wrapper .header-search .form-control {
    border: 0;
    background: transparent;
    box-shadow: none;
}

#main-wrapper .header-search .input-group-text {
    padding: 0;
    margin-right: 0.65rem;
    color: #9ba6b9;
}

#main-wrapper .header-search .form-control {
    padding: 0;
    color: #6b7890;
    font-size: 1rem;
    font-weight: 500;
}

#main-wrapper .header-search .form-control::placeholder {
    color: #adb6c5;
}

#main-wrapper .header-search .input-group:hover,
#main-wrapper .header-search .input-group:focus-within {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(244, 195, 1, 0.18);
    box-shadow: 0 14px 26px rgba(120, 143, 181, 0.1);
}

#main-wrapper .header-quick-action {
    width: 2.8rem;
    height: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.95rem;
    border: 1px solid rgba(184, 196, 220, 0.2);
    background: rgba(255, 255, 255, 0.82);
    color: #8d98ad;
    backdrop-filter: blur(14px);
    box-shadow: 0 6px 16px rgba(120, 143, 181, 0.05);
    transition: 0.2s ease;
}

#main-wrapper .header-quick-action:hover {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(244, 195, 1, 0.16);
    color: var(--primary);
}

#main-wrapper .header-quick-action.is-active {
    background: rgba(244, 195, 1, 0.12);
    border-color: rgba(244, 195, 1, 0.18);
    color: var(--primary);
}

#main-wrapper .header-quick-action.is-muted {
    background: transparent;
    border-color: transparent;
    color: #74829c;
}

/* Reset the browser's default button chrome for the logout action, which
   renders as a <button> inside a form instead of an <a>. */
button.profile-sidepanel-action {
    border: 0;
    background: none;
}

#main-wrapper .header-profile2 .nav-link,
#main-wrapper .header-profile2 .dropdown-menu {
    border-radius: 1.25rem;
}

#main-wrapper .header-profile2 .header-info2 {
    gap: 0;
    padding: 0;
}

#main-wrapper .header-profile2 .header-media img,
#main-wrapper .header-profile2 .card-header .avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 18px rgba(120, 143, 181, 0.16);
}

.header-profile2 .header-info h6,
.header-profile2 .card-header h6 {
    margin-bottom: 0.15rem;
    color: var(--gm-text);
    font-weight: 700;
}

.header-profile2 .header-info p,
.header-profile2 .card-header span {
    margin-bottom: 0;
    color: var(--gm-text-muted);
    font-size: 0.78rem;
}

.header-profile2 .dropdown-menu {
    padding: 0.65rem;
    min-width: 18rem;
    border: 1px solid var(--gm-border);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14);
    z-index: 1080;
}

.header-profile2 .card {
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
}

.header-profile2 .card-header,
.header-profile2 .card-footer {
    background: transparent;
    border: 0;
}

.header-profile2 .dropdown-item {
    border-radius: 0.9rem;
    padding: 0.85rem 1rem;
    transition: 0.2s ease;
}

.header-profile2 .dropdown-item:hover {
    background: rgba(255, 121, 121, 0.08);
}

.header-profile2 .dropdown-item svg {
    flex-shrink: 0;
}

.profile-sidepanel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(24rem, calc(100vw - 1.5rem));
    height: 100vh;
    padding: 1rem;
    background: rgba(248, 251, 255, 0.84);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(184, 196, 220, 0.28);
    box-shadow: -24px 0 48px rgba(15, 23, 42, 0.12);
    transform: translateX(104%);
    transition: transform 0.24s ease;
    z-index: 1095;
}

.profile-sidepanel.is-open {
    transform: translateX(0);
}

.profile-sidepanel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
    z-index: 1090;
}

.profile-sidepanel-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.profile-sidepanel-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(184, 196, 220, 0.22);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.profile-sidepanel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.profile-sidepanel-title {
    margin: 0;
    color: #24324a;
    font-size: 1.05rem;
    font-weight: 800;
}

.profile-sidepanel-subtitle {
    margin: 0.2rem 0 0;
    color: #8a97ad;
    font-size: 0.82rem;
    font-weight: 600;
}

.profile-sidepanel-close {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-radius: 0.9rem;
    background: #e8eef8;
    color: #334155 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.profile-sidepanel-close,
.profile-sidepanel-close .profile-sidepanel-close-icon {
    color: #334155 !important;
}

.profile-sidepanel-close .profile-sidepanel-close-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.profile-sidepanel-close:hover {
    color: var(--primary);
    border-color: rgba(244, 195, 1, 0.18);
    background: rgba(244, 195, 1, 0.14);
}

.profile-sidepanel-close:hover,
.profile-sidepanel-close:hover .profile-sidepanel-close-icon {
    color: var(--primary) !important;
}

.profile-sidepanel-user {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 247, 255, 0.92) 100%);
    border: 1px solid rgba(184, 196, 220, 0.2);
}

.profile-sidepanel-user img {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 26px rgba(120, 143, 181, 0.16);
}

.profile-sidepanel-user h6 {
    margin: 0 0 0.2rem;
    color: #24324a;
    font-size: 1rem;
    font-weight: 800;
}

.profile-sidepanel-user p {
    margin: 0;
    color: #7d8aa0;
    font-size: 0.85rem;
    font-weight: 600;
}

.profile-sidepanel-balances {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.profile-balance-card {
    padding: 0.95rem 1rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(184, 196, 220, 0.2);
    background: rgba(255, 255, 255, 0.72);
}

.profile-balance-label {
    display: block;
    margin-bottom: 0.3rem;
    color: #8a97ad;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.profile-balance-value {
    color: #24324a;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.profile-sidepanel-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-sidepanel-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.92rem 1rem;
    border-radius: 1rem;
    text-decoration: none;
    font-weight: 700;
    transition: 0.2s ease;
}

.profile-sidepanel-action.logout {
    background: rgba(255, 121, 121, 0.1);
    color: #dd5c5c;
    border: 1px solid rgba(255, 121, 121, 0.18);
}

.profile-sidepanel-action.logout:hover {
    background: rgba(255, 121, 121, 0.16);
    color: #cb4848;
}

.gm-drawer {
    --gm-drawer-bg: rgba(255, 255, 255, 0.98);
    --gm-drawer-panel: rgba(248, 251, 255, 0.92);
    --gm-drawer-border: rgba(203, 213, 225, 0.9);
    --gm-drawer-text: #24324a;
    --gm-drawer-muted: #7d8aa0;
    --gm-drawer-close-bg: var(--gm-drawer-close-bg);
    --gm-drawer-close-border: var(--gm-drawer-close-border);
    --gm-drawer-close-text: var(--gm-drawer-close-text);
    background: var(--gm-drawer-bg) !important;
    border-left: 1px solid rgba(214, 222, 236, 0.9) !important;
    box-shadow: -24px 0 48px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(18px);
}

.gm-drawer .offcanvas-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.4rem 1.15rem;
    border-bottom: 1px solid var(--gm-drawer-border) !important;
    margin-left: 0 !important;
}

.gm-drawer .offcanvas-title {
    margin: 0;
    color: var(--gm-drawer-text);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.gm-drawer-subtitle {
    margin: 0.25rem 0 0;
    color: var(--gm-drawer-muted);
    font-size: 0.84rem;
    font-weight: 600;
}

.gm-drawer .offcanvas-body,
.gm-drawer-body {
    padding: 1.35rem 1.4rem 1.45rem !important;
}

.gm-drawer .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.gm-drawer-close {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gm-drawer-close-border);
    border-radius: 0.9rem;
    background: var(--gm-drawer-close-bg);
    color: var(--gm-drawer-close-text) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    opacity: 1 !important;
    padding: 0;
    margin: 0;
}

.gm-drawer-close:hover {
    background: rgba(244, 195, 1, 0.14);
    border-color: rgba(244, 195, 1, 0.2);
    color: var(--primary) !important;
}

.gm-drawer-close:focus {
    box-shadow: 0 0 0 0.2rem rgba(244, 195, 1, 0.16);
}

.gm-drawer-close .gm-drawer-close-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.gm-drawer .form-label {
    color: #4d5c76;
    font-size: 0.86rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
}

.gm-drawer .form-control,
.gm-drawer .form-select,
.gm-drawer .input-group-text {
    border-color: rgba(203, 213, 225, 0.92) !important;
    background: var(--gm-drawer-panel) !important;
    color: #334155 !important;
    min-height: 2.85rem;
}

.gm-drawer .form-control::placeholder {
    color: #9aa6b8 !important;
}

.gm-drawer .form-control:focus,
.gm-drawer .form-select:focus {
    border-color: rgba(244, 195, 1, 0.28) !important;
    box-shadow: 0 0 0 0.2rem rgba(244, 195, 1, 0.12) !important;
}

.gm-drawer-note {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    font-size: 0.76rem;
    font-weight: 700;
}

.gm-drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.gm-drawer-actions .btn {
    min-width: 8.5rem;
}

.deznav {
    position: fixed !important;
    top: var(--gm-navheader-h);
    left: 0;
    width: var(--gm-sidebar-w);
    height: calc(100vh - var(--gm-navheader-h));
    background: var(--gm-sidebar-bg);
    border-right: 1px solid var(--gm-border);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(18px);
    z-index: 1030 !important;
}

.deznav .deznav-scroll {
    padding: 1.1rem 0.95rem 1.5rem;
}

.deznav .menu-title {
    margin: 0.25rem 0 0.9rem;
    padding: 0 0.85rem;
    color: #8a94a6;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.deznav .metismenu > li {
    margin-bottom: 0.38rem;
}

.deznav .metismenu > li > a,
.deznav .metismenu ul a {
    display: flex;
    align-items: center;
    border-radius: 1rem;
    transition: 0.2s ease;
}

.deznav .metismenu > li > a {
    gap: 0.82rem;
    padding: 0.85rem 0.9rem;
    color: var(--gm-text);
    font-weight: 600;
    background: transparent;
}

.deznav .metismenu > li > a:hover,
.deznav .metismenu > li.mm-active > a,
.deznav .metismenu > li > a[aria-expanded="true"] {
    color: var(--primary);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 28px rgba(120, 143, 181, 0.1);
}

.deznav .metismenu .menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #8390aa;
    box-shadow: none;
    transition: 0.2s ease;
    flex-shrink: 0;
}

.deznav .metismenu > li > a:hover .menu-icon,
.deznav .metismenu > li.mm-active > a .menu-icon,
.deznav .metismenu > li > a[aria-expanded="true"] .menu-icon {
    background: transparent;
    color: var(--primary);
    box-shadow: none;
}

.deznav .metismenu .menu-icon svg,
.deznav .metismenu .menu-icon i,
.deznav .metismenu .menu-icon path,
.deznav .metismenu > li > a > svg,
.deznav .metismenu > li > a path {
    color: currentColor !important;
    stroke: currentColor !important;
}

.deznav .metismenu .menu-icon i {
    font-size: 1.1rem;
    line-height: 1;
}

.deznav .metismenu > li > a.has-arrow::after {
    color: #94a3b8;
    font-size: 0.85rem;
    right: 1rem;
    transition: 0.2s ease;
}

.deznav .metismenu > li.mm-active > a.has-arrow::after,
.deznav .metismenu > li > a.has-arrow[aria-expanded="true"]::after,
.deznav .metismenu > li > a.has-arrow:hover::after {
    color: var(--primary);
}

.deznav .metismenu .nav-text {
    flex: 1;
    font-size: 0.94rem;
    line-height: 1.35;
}

.deznav .metismenu ul {
    padding: 0.3rem 0 0.15rem;
}

.deznav .metismenu ul a,
.deznav .metismenu ul button {
    width: 100%;
    padding: 0.7rem 0.9rem 0.7rem 3.55rem;
    color: #62708a;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    background: transparent;
    border: 0;
}

.deznav .metismenu ul a:hover,
.deznav .metismenu ul .mm-active > a,
.deznav .metismenu ul button:hover {
    color: var(--primary);
    background: rgba(91, 97, 246, 0.08);
}

.deznav .metismenu ul a::before,
.deznav .metismenu ul button::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.75rem;
    border-radius: 999px;
    background: rgba(91, 97, 246, 0.24);
    box-shadow: 0 0 0 5px rgba(91, 97, 246, 0.05);
}

.deznav .metismenu li.mm-active > ul {
    margin-top: 0.25rem;
}

.nav-report-button {
    all: unset;
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.nav-report-form {
    display: inline;
}

.help-desk {
    padding: 1.15rem 0.7rem 0;
}

.help-desk .btn {
    width: 100%;
    border: 0;
    border-radius: 1rem;
    padding: 0.95rem 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, #f7cf26 0%, #f4c301 100%);
    color: #2b2200 !important;
    box-shadow: 0 16px 30px rgba(244, 195, 1, 0.24);
}

.help-desk .btn:hover {
    background: linear-gradient(135deg, #f2c000 0%, #ddb100 100%);
    color: #2b2200 !important;
}

.content-body {
    background: transparent !important;
    margin-left: var(--gm-sidebar-w) !important;
    padding-top: var(--gm-shell-padtop) !important;
    padding-inline: 0 !important;
    min-height: calc(100vh - var(--gm-shell-padtop)) !important;
}

.content-body .container-fluid,
.content-body > .container,
.content-body > .container-sm,
.content-body > .container-md,
.content-body > .container-lg,
.content-body > .container-xl,
.content-body > .container-xxl {
    width: min(100%, 1320px);
    margin-inline: auto;
    padding: 0 1.5rem 2rem;
}

.content-body .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

.footer {
    margin-left: var(--gm-sidebar-w) !important;
    background: transparent !important;
}

/* Public, nav-free pages (e.g. the shareable /new-card-templates gallery
   link) render #main-wrapper without layouts.nav_bar, so the sidebar-width
   offset above would otherwise leave a phantom blank margin. */
#main-wrapper.no-nav-shell .content-body {
    margin-left: 0 !important;
    padding-top: 0 !important;
}

#main-wrapper.no-nav-shell .footer {
    margin-left: 0 !important;
}

#main-wrapper.menu-toggle .nav-header {
    width: var(--gm-sidebar-w-collapsed);
}

#main-wrapper.menu-toggle .nav-header .brand-logo {
    justify-content: center;
    padding-inline: 1rem;
}

#main-wrapper.menu-toggle .nav-header .brand-copy {
    display: none;
}

#main-wrapper.menu-toggle .nav-header .brand-badge {
    width: 3rem;
    height: 3rem;
}

#main-wrapper.menu-toggle .header {
    left: var(--gm-sidebar-w-collapsed);
    width: calc(100% - var(--gm-sidebar-w-collapsed)) !important;
}

#main-wrapper.menu-toggle .deznav {
    width: var(--gm-sidebar-w-collapsed);
}

#main-wrapper.menu-toggle .deznav .menu-title,
#main-wrapper.menu-toggle .deznav .nav-text,
#main-wrapper.menu-toggle .deznav .metismenu > li > a.has-arrow::after {
    display: none !important;
}

#main-wrapper.menu-toggle .deznav .metismenu > li > a {
    justify-content: center;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

#main-wrapper.menu-toggle .deznav .metismenu .menu-icon {
    margin-right: 0;
}

#main-wrapper.menu-toggle .deznav .metismenu > li > ul {
    display: none !important;
}

#main-wrapper.menu-toggle .content-body,
#main-wrapper.menu-toggle .footer {
    margin-left: var(--gm-sidebar-w-collapsed) !important;
}

[data-theme-version="dark"] #main-wrapper .nav-header,
[data-theme-version="dark"] #main-wrapper .header,
[data-theme-version="dark"] #main-wrapper .header .header-content,
[data-theme-version="dark"] .deznav,
[data-theme-version="dark"] .header-profile2 .dropdown-menu {
    background: rgba(15, 23, 42, 0.88) !important;
    border-color: rgba(71, 85, 105, 0.48) !important;
    box-shadow: 0 18px 38px rgba(2, 6, 23, 0.36);
}

[data-theme-version="dark"] #main-wrapper .nav-header {
    background: rgba(15, 23, 42, 0.96) !important;
    border-right-color: rgba(71, 85, 105, 0.48) !important;
}

[data-theme-version="dark"] #main-wrapper .nav-header .brand-logo {
    background: rgba(15, 23, 42, 0.96) !important;
    color: #dbe7f5 !important;
}

[data-theme-version="dark"] #main-wrapper .nav-header .brand-badge {
    background: linear-gradient(145deg, rgba(35, 45, 62, 0.98) 0%, rgba(62, 76, 97, 0.92) 100%);
    border-color: rgba(244, 195, 1, 0.24);
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme-version="dark"] #main-wrapper .nav-header .brand-title-row::before {
    box-shadow: 0 0 0 0.28rem rgba(244, 195, 1, 0.12);
}

[data-theme-version="dark"] #main-wrapper .header-left .topbar-page-title,
[data-theme-version="dark"] .footer .copyright strong,
[data-theme-version="dark"] .footer .copyright a {
    color: #e5eefc !important;
}

[data-theme-version="dark"] #main-wrapper .header-left .topbar-menu-btn,
[data-theme-version="dark"] #main-wrapper .header-quick-action,
[data-theme-version="dark"] .footer .copyright p,
[data-theme-version="dark"] .footer .copyright .footer-meta,
[data-theme-version="dark"] .header-profile2 .card-header span {
    color: #94a3b8 !important;
}

[data-theme-version="dark"] #main-wrapper .header-left .topbar-menu-btn,
[data-theme-version="dark"] #main-wrapper .header-quick-action,
[data-theme-version="dark"] #main-wrapper .header-profile2 .nav-link {
    background: rgba(30, 41, 59, 0.92) !important;
    border-color: rgba(71, 85, 105, 0.45) !important;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.24) !important;
}

[data-theme-version="dark"] #main-wrapper .header-search .input-group {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(71, 85, 105, 0.52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme-version="dark"] #main-wrapper .header-search .input-group-text,
[data-theme-version="dark"] #main-wrapper .header-search .form-control,
[data-theme-version="dark"] #main-wrapper .header-search .form-control::placeholder {
    color: #94a3b8 !important;
}

[data-theme-version="dark"] .deznav .metismenu > li > a,
[data-theme-version="dark"] .deznav .metismenu ul a,
[data-theme-version="dark"] .deznav .menu-title {
    color: #cbd5e1 !important;
}

[data-theme-version="dark"] .deznav {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(17, 24, 39, 0.98) 100%) !important;
    border-right-color: rgba(71, 85, 105, 0.42) !important;
    box-shadow: inset -1px 0 0 rgba(30, 41, 59, 0.85) !important;
}

[data-theme-version="dark"] .deznav .deznav-scroll {
    background: transparent !important;
}

[data-theme-version="dark"] .deznav .metismenu > li > a:hover,
[data-theme-version="dark"] .deznav .metismenu > li.mm-active > a,
[data-theme-version="dark"] .deznav .metismenu > li > a[aria-expanded="true"],
[data-theme-version="dark"] .deznav .metismenu ul a:hover {
    background: rgba(244, 195, 1, 0.16);
    color: #eef2ff !important;
}

[data-theme-version="dark"] .deznav .metismenu .menu-icon,
[data-theme-version="dark"] .deznav .metismenu > li > a:hover .menu-icon,
[data-theme-version="dark"] .deznav .metismenu > li.mm-active > a .menu-icon,
[data-theme-version="dark"] .deznav .metismenu > li > a[aria-expanded="true"] .menu-icon {
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

[data-theme-version="dark"] .profile-sidepanel {
    background: rgba(15, 23, 42, 0.76);
    border-left-color: rgba(71, 85, 105, 0.4);
    box-shadow: -24px 0 48px rgba(2, 6, 23, 0.38);
}

[data-theme-version="dark"] .profile-sidepanel-card,
[data-theme-version="dark"] .profile-sidepanel-user,
[data-theme-version="dark"] .profile-balance-card {
    background: rgba(15, 23, 42, 0.88) !important;
    border-color: rgba(71, 85, 105, 0.42) !important;
    box-shadow: none;
}

[data-theme-version="dark"] .profile-sidepanel-title,
[data-theme-version="dark"] .profile-sidepanel-user h6,
[data-theme-version="dark"] .profile-balance-value {
    color: #e5eefc;
}

[data-theme-version="dark"] .profile-sidepanel-subtitle,
[data-theme-version="dark"] .profile-sidepanel-user p,
[data-theme-version="dark"] .profile-balance-label {
    color: #94a3b8;
}

[data-theme-version="dark"] .profile-sidepanel-close {
    background: rgba(51, 65, 85, 0.9) !important;
    border-color: rgba(100, 116, 139, 0.9) !important;
    color: #f8fafc !important;
}

[data-theme-version="dark"] .profile-sidepanel-close .profile-sidepanel-close-icon {
    color: #f8fafc !important;
}

[data-theme-version="dark"] .gm-drawer {
    --gm-drawer-bg: rgba(15, 23, 42, 0.96);
    --gm-drawer-panel: rgba(30, 41, 59, 0.92);
    --gm-drawer-border: rgba(71, 85, 105, 0.75);
    --gm-drawer-text: #e5eefc;
    --gm-drawer-muted: #94a3b8;
    box-shadow: -24px 0 48px rgba(2, 6, 23, 0.36);
}

@media (max-width: 991px) {
    #main-wrapper .nav-header,
    #main-wrapper .header,
    #main-wrapper .deznav,
    .content-body,
    .footer,
    #main-wrapper.menu-toggle .nav-header,
    #main-wrapper.menu-toggle .header,
    #main-wrapper.menu-toggle .deznav,
    #main-wrapper.menu-toggle .content-body,
    #main-wrapper.menu-toggle .footer {
        left: 0;
        width: 100% !important;
        margin-left: 0 !important;
    }

    .nav-header .brand-logo {
        min-height: 4.4rem;
        justify-content: flex-start;
    }

    .nav-header .brand-wordmark {
        height: 1.32rem;
    }

    .header,
    .header .header-content,
    .header .navbar {
        min-height: 4.4rem;
        height: 4.4rem !important;
    }

    .deznav .deznav-scroll {
        padding-inline: 0.75rem;
    }

    .header-left .topbar-page-title {
        font-size: 0.95rem;
    }

    .header-search {
        min-width: 0;
        width: 100%;
    }

    .gm-drawer .offcanvas-header,
    .gm-drawer .offcanvas-body,
    .gm-drawer-body {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .gm-drawer-actions .btn {
        width: 100%;
    }

    .content-body {
        padding-top: 5.25rem !important;
    }

    .content-body .container-fluid,
    .content-body > .container,
    .content-body > .container-sm,
    .content-body > .container-md,
    .content-body > .container-lg,
    .content-body > .container-xl,
    .content-body > .container-xxl {
        width: 100%;
        padding-inline: 1rem;
    }
}

@media (max-width: 767px) {
    .header-left {
        gap: 0.75rem;
    }

    .header-left .topbar-page-title {
        font-size: 1.05rem;
    }

    .header-search {
        display: none;
    }

    .nav-header .brand-logo {
        justify-content: center;
    }

    .nav-header .brand-copy {
        display: none;
    }
}

/* Unauthenticated shell (guest-facing pages rendered through the same nav
   partial): full-width header, no sidebar, no search box. */
#main-wrapper.guest-shell .nav-header {
    width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(207, 216, 233, 0.65) !important;
}

#main-wrapper.guest-shell .header {
    left: 0 !important;
    width: 100% !important;
}

#main-wrapper.guest-shell .header-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

#main-wrapper.guest-shell .header-left {
    display: none !important;
}

#main-wrapper.guest-shell .content-body,
#main-wrapper.guest-shell .content-body .row {
    margin-left: 0 !important;
}

#main-wrapper.guest-shell .content-body {
    padding-top: 5.5rem !important;
}

.guest-shell-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.guest-shell-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(184, 196, 220, 0.4);
    background: rgba(255, 255, 255, 0.88);
    color: #5f6f87;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.guest-shell-link:hover {
    color: #1f2937;
    text-decoration: none;
    border-color: rgba(244, 195, 1, 0.28);
    background: rgba(255, 255, 255, 0.96);
}

.guest-shell-link.is-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #f4c301 0%, #d4a800 100%);
    color: #1f2937;
    box-shadow: 0 12px 24px rgba(212, 168, 0, 0.2);
}

@media (max-width: 767px) {
    #main-wrapper.guest-shell .nav-header .brand-copy {
        display: flex !important;
    }

    #main-wrapper.guest-shell .header {
        top: var(--gm-navheader-h) !important;
    }

    #main-wrapper.guest-shell .header-search {
        display: none !important;
    }

    #main-wrapper.guest-shell .content-body {
        padding-top: 9rem !important;
    }
}

/* =========================================================================
 * Footer
 * ========================================================================= */

.footer {
    /*
     * This element sits at body level (a sibling of #main-wrapper, not
     * nested inside .content-body), so its own width is relative to the
     * full viewport, not the space left after the sidebar. Previously this
     * rule also capped .footer's own width at min(100%, 1320px), which -
     * combined with the fixed sidebar margin-left below - could add up to
     * more than the viewport width and clip the right-aligned text off
     * screen. Instead, let .footer fill exactly the space after the
     * sidebar, and let the inner .copyright element do the max-width +
     * centering, mirroring how .content-body / .container-fluid do it.
     */
    margin-top: 1.25rem;
    padding: 1.15rem 1.5rem 1.35rem;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

[data-theme-version="dark"] .footer {
    border-top-color: rgba(71, 85, 105, 0.36);
}

.footer .copyright {
    width: min(100%, 1320px);
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem 1.25rem;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    backdrop-filter: none;
    box-shadow: none !important;
}

.footer .copyright p {
    margin: 0;
    color: var(--gm-text-muted);
    font-size: 0.84rem;
    font-weight: 500;
    text-align: left;
    line-height: 1.7;
}

.footer .copyright strong,
.footer .copyright a {
    display: inline;
    color: #55637d !important;
    font-weight: 700;
    text-decoration: none;
}

.footer .copyright a:hover {
    color: var(--primary) !important;
}

.footer .copyright .footer-meta {
    text-align: right;
}

@media (max-width: 767px) {
    .footer {
        padding: 1rem 1rem 1.2rem;
    }

    .footer .copyright {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer .copyright p,
    .footer .copyright .footer-meta {
        text-align: left;
    }
}

/* =========================================================================
 * Auth pages (login, forgot/reset password) - resources/views/layouts/auth.blade.php
 * ========================================================================= */

/* Scoped to resources/views/layouts/auth.blade.php's <body class="vh-100">, which is
   unique to the auth shell (login/forgot/reset password) - safe to target directly. */
html:has(> body.vh-100) {
    min-height: 100%;
}

body.vh-100 {
    min-height: 100%;
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: var(--gm-auth-bg);
    color: var(--gm-text);
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    padding: 1.5rem;
}

.auth-frame {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    border: 1px solid var(--gm-border);
    border-radius: 2rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: var(--gm-shadow-hover);
    backdrop-filter: blur(18px);
}

.auth-panel,
.auth-showcase {
    position: relative;
    min-height: calc(100vh - 3rem);
}

.auth-panel {
    padding: 2rem;
    background: var(--gm-surface-2);
}

.auth-panel__inner {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.auth-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gm-link);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.auth-back-link:hover {
    color: var(--gm-link);
    text-decoration: none;
    opacity: 0.88;
}

.auth-theme-toggle {
    min-width: 3rem;
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0 1rem;
    border: 1px solid var(--gm-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--gm-text);
    font-size: 0.88rem;
    font-weight: 700;
    box-shadow: var(--gm-shadow);
}

.auth-theme-toggle:hover,
.auth-theme-toggle:focus {
    color: var(--gm-text);
    background: var(--gm-primary-soft);
    border-color: rgba(244, 195, 1, 0.28);
    text-decoration: none;
}

[data-theme-version="dark"] .auth-theme-toggle {
    background: rgba(15, 23, 42, 0.78);
    color: #e2e8f0;
}

.auth-card {
    padding: 2rem;
    border: 1px solid var(--gm-border);
    border-radius: 1.75rem;
    background: var(--gm-surface);
    box-shadow: var(--gm-shadow);
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.95rem;
    color: #9a7b18;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.auth-eyebrow::before {
    content: "";
    width: 2rem;
    height: 1px;
    background: linear-gradient(90deg, var(--primary) 0%, rgba(244, 195, 1, 0.18) 100%);
}

.auth-title {
    margin: 0;
    color: var(--gm-text);
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.auth-subtitle {
    margin: 0.9rem 0 0;
    color: var(--gm-text-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.auth-form {
    margin-top: 1.75rem;
}

.auth-form label {
    margin-bottom: 0.5rem;
    color: var(--gm-text);
    font-size: 0.92rem;
    font-weight: 700;
}

.auth-form .form-control,
.auth-form textarea,
.auth-form select {
    min-height: 3.35rem;
    border: 1px solid rgba(203, 213, 225, 0.95);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    box-shadow: none;
}

.auth-form textarea.form-control {
    min-height: 8rem;
    resize: vertical;
}

[data-theme-version="dark"] .auth-form .form-control,
[data-theme-version="dark"] .auth-form textarea,
[data-theme-version="dark"] .auth-form select {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(71, 85, 105, 0.72);
    color: #e2e8f0;
}

.auth-form .form-control:focus,
.auth-form textarea:focus,
.auth-form select:focus {
    border-color: rgba(244, 195, 1, 0.9);
    box-shadow: 0 0 0 0.24rem rgba(244, 195, 1, 0.15);
}

.auth-form .input-group {
    position: relative;
}

.auth-form .input-group .form-control {
    padding-right: 3.5rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--gm-text-muted);
}

.password-toggle:hover {
    color: var(--gm-text);
    background: var(--gm-primary-soft);
}

.auth-form .btn-primary {
    min-height: 3.3rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #1f2937;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 16px 34px rgba(212, 168, 0, 0.24);
}

.auth-form .btn-primary:hover,
.auth-form .btn-primary:focus {
    color: #111827;
    transform: translateY(-1px);
}

.auth-actions,
.auth-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.auth-links {
    margin-top: 1.25rem;
}

.auth-links a,
.auth-inline-link {
    color: var(--gm-link);
    font-weight: 700;
    text-decoration: none;
}

.auth-links a:hover,
.auth-inline-link:hover {
    text-decoration: underline;
}

.auth-helper {
    margin-top: 1rem;
    color: var(--gm-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.auth-showcase {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(circle at top right, rgba(244, 195, 1, 0.26), transparent 32%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%);
    color: #f8fafc;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff;
    text-decoration: none;
}

.auth-brand:hover {
    color: #fff;
    text-decoration: none;
    opacity: 0.92;
}

.auth-brand__badge {
    width: 3.4rem;
    height: 3.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.86) 100%);
    border: 1px solid rgba(244, 195, 1, 0.28);
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.24);
    flex-shrink: 0;
}

.auth-brand__badge img {
    width: 2.15rem;
    height: 2.15rem;
    object-fit: contain;
}

.auth-brand__wordmark {
    display: block;
    max-width: 220px;
    width: 220px;
    height: auto;
}

.auth-showcase__copy {
    max-width: 30rem;
    margin-top: 2rem;
}

.auth-showcase__title {
    margin: 0;
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.04;
}

.auth-showcase__body {
    margin: 1.1rem 0 0;
    color: rgba(226, 232, 240, 0.86);
    font-size: 1rem;
    line-height: 1.8;
}

.auth-showcase__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.75rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px);
}

.auth-showcase__media img {
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
}

.required {
    color: #dc2626;
}

.field-note {
    margin-top: 0.45rem;
    color: var(--gm-text-muted);
    font-size: 0.82rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    background: rgba(6, 95, 70, 0.08);
    color: var(--gm-success);
    font-size: 0.82rem;
    font-weight: 700;
}

.status-pill::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
}

@media (max-width: 991.98px) {
    .auth-shell {
        padding: 1rem;
    }

    .auth-frame {
        grid-template-columns: 1fr;
    }

    .auth-showcase {
        min-height: auto;
        order: -1;
    }

    .auth-showcase__media img {
        max-height: 260px;
    }

    .auth-panel,
    .auth-showcase {
        min-height: auto;
    }
}

@media (max-width: 575.98px) {
    .auth-panel,
    .auth-showcase,
    .auth-card {
        padding: 1.25rem;
    }

    .auth-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .auth-showcase__copy {
        margin-top: 1.25rem;
    }

    .auth-showcase__title {
        font-size: 2.2rem;
    }

    .auth-showcase__body {
        font-size: 0.96rem;
        line-height: 1.65;
    }

    .auth-showcase__media {
        min-height: 200px;
        margin-top: 1.25rem;
        padding: 1rem;
    }

    .auth-showcase__media img {
        max-height: 180px;
    }

    .auth-actions,
    .auth-links {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================================
 * Small shared utility classes
 * Replace one-off inline style="" attributes that were repeated verbatim
 * across several page views (star ratings, spinner visibility, notification
 * panel height, etc.).
 * ========================================================================= */

.gm-star-icon {
    color: gold;
}

.gm-notification-scroll {
    height: 380px;
}

.gm-icon-dash {
    stroke-dasharray: 37, 57;
    stroke-dashoffset: 0;
}

.gm-tfoot-shaded {
    background-color: rgb(122, 128, 122);
}

.gm-tip-spaced {
    margin-top: 14px;
}

.gm-price-white {
    color: #fff;
}

/* ==========================================================================
   Dark-mode contrast fixes
   ==========================================================================
   The "pixaguru" template-editor kit (bundled into style.css, classes
   prefixed pg-/pg_ plus the old-Bootstrap .panel accordion) was never wired
   into the dark theme: its containers use hardcoded light backgrounds, and
   some of its text colors reference --pixaguru-* custom properties that
   were never defined anywhere, so they silently fall back to whatever an
   ancestor's `color` resolves to. In dark mode, the site-wide
   `h1,h2,h3,h4,h5,h6 { color: var(--gm-text) !important }` rule (style.css)
   correctly turns heading text light/bright for dark surfaces - but these
   panels still have their original light backgrounds, so it becomes light
   text on a light background (e.g. the "Shape Settings" / shape-category
   list in the template editor). Fixing the backgrounds here lets the
   existing heading-color rule pair correctly instead of fighting it. */

:root {
    --pixaguru-title-color: var(--gm-text);
    --pixaguru-white-color: #ffffff;
    --pixaguru-global-color: var(--gm-text-muted);
    --pixaguru-primary: var(--primary, #f4c301);
}

.pg-sidebar-title,
.pg-title-elements ul li>a,
.panel-heading,
.pg_element_shape .panel-body ul .pg-element-svg,
.pg-property-widget,
.pg-imglist-item img,
.pg_upload_image {
    /* var(--gm-surface-2) already flips between its light and dark value
       via the [data-theme-version="dark"] block above, so a single rule
       here (loaded after style.css, same specificity as the vendor rule
       it replaces) is enough to cover both themes. */
    background: var(--gm-surface-2);
    border-color: var(--gm-border) !important;
}

.pg-title-elements ul li>a,
.panel .panel-title a,
.pg-sidebar-heading {
    color: var(--gm-text) !important;
}

.mypg_colorPicker {
    background: var(--gm-surface-solid);
    border-color: var(--gm-border) !important;
    color: var(--gm-text);
}

/* Form-control focus state: the vendor stylesheet resets the field
   background to solid white on focus with no dark variant, so typing into
   any input/select/textarea in dark mode (this includes the login form)
   showed light text on a white field the moment it was focused. */
[data-theme-version="dark"] .form-control:focus,
[data-theme-version="dark"] .dataTables_filter input:focus,
[data-theme-version="dark"] .dataTables_length select:focus,
[data-theme-version="dark"] .bootstrap-select .dropdown-toggle:focus,
[data-theme-version="dark"] textarea.form-control:focus,
[data-theme-version="dark"] select:focus,
[data-theme-version="dark"] .auth-form .form-control:focus,
[data-theme-version="dark"] .auth-form textarea:focus,
[data-theme-version="dark"] .auth-form select:focus {
    background: rgba(15, 23, 42, 0.86) !important;
    color: var(--gm-text);
}

/* Status badges (.badge.bg-success/danger/warning/info, .bg-label-*): the
   vendor stylesheet uses text/background pairs tuned for a light page
   (e.g. dark green text on a near-white tint). Route them through the
   themed --gm-success/danger/warning/info tokens so they stay legible on
   dark surfaces too. */
.badge.bg-success,
.badge-success,
.bg-label-success {
    color: var(--gm-success) !important;
    background: var(--gm-success-soft) !important;
}

.badge.bg-danger,
.badge-danger,
.bg-label-danger {
    color: var(--gm-danger) !important;
    background: var(--gm-danger-soft) !important;
}

.badge.bg-warning,
.badge-warning,
.bg-label-warning {
    color: var(--gm-warning) !important;
    background: var(--gm-warning-soft) !important;
}

.badge.bg-info,
.badge-info,
.bg-label-info {
    color: var(--gm-info) !important;
    background: var(--gm-info-soft) !important;
}