/* Amal's Party Corner OS - Premium Design Theme */
:root {
    --primary-color: #ff477e;      /* Chic Pink */
    --primary-light: #ff85a2;
    --primary-dark: #e02256;
    --secondary-color: #d4af37;    /* Gold Accent */
    --secondary-light: #f3e5ab;
    --dark-slate: #1e1e2d;         /* Premium Dark Sidebar */
    --light-bg: #f8f9fc;
    --white: #ffffff;
    --border-color: #f1f1f4;
    --text-main: #3f4254;
    --text-muted: #b5b5c3;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #0ea5e9;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--primary-color, var(--light-bg)) !important;
    color: var(--text-main);
    overflow-x: hidden;
}

html,
body,
body.bg-light,
.bg-light {
    background-color: var(--primary-color, #f8f9fc) !important;
}

.main-content,
.wrapper,
.container-fluid {
    background-color: transparent;
}

/* Public pages expose the selected brand across the full canvas. Keep framed
   cards and controls opaque so their content remains readable. */
.brand-public-page .bg-white:not(.card):not(.dropdown-menu),
.brand-public-page .brand-page-footer {
    background-color: color-mix(in srgb, var(--primary-color) 78%, #ffffff) !important;
}

.brand-public-page .bg-light:not(body):not(.navbar) {
    background-color: color-mix(in srgb, var(--primary-color) 18%, #ffffff) !important;
}

.brand-public-page .row.bg-white {
    background-color: color-mix(in srgb, var(--primary-color) 78%, #ffffff) !important;
}

.brand-public-page > .container,
.brand-public-page > .container-fluid,
.brand-public-page .card-amal,
.brand-public-page .catalog-item-card,
.brand-public-page .division-card,
.brand-public-page .item-card {
    background-color: color-mix(in srgb, var(--primary-color) 16%, #ffffff) !important;
}

.brand-public-page .catalog-grid,
.brand-public-page #catalog,
.brand-public-page .web-hero + .row,
.brand-public-page footer {
    background-color: color-mix(in srgb, var(--primary-color) 24%, #ffffff) !important;
}

.brand-public-page .web-hero {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-dark) 82%, #1e1e2d) 0%, color-mix(in srgb, var(--primary-color) 68%, #1e1e2d) 100%), url('../images/banner.png') center center / cover no-repeat !important;
    box-shadow: 0 20px 60px color-mix(in srgb, var(--primary-color) 35%, transparent);
}

.brand-public-page .catalog-item-card,
.brand-public-page .card-amal,
.brand-public-page .division-card,
.brand-public-page .item-card {
    background-color: color-mix(in srgb, var(--primary-color) 32%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--primary-color) 42%, #ffffff) !important;
}

.brand-public-page .catalog-item-card .card-body,
.brand-public-page .card-amal .card-body {
    background-color: transparent !important;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #e4e6ef;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Sidebar Styling - Dark Khaki Theme */
.sidebar {
    width: 260px;
    background: linear-gradient(180deg, #231F17 0%, #16130E 100%);
    height: 100vh;
    max-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transition: all 0.3s ease;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(189, 168, 126, 0.15);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(189, 168, 126, 0.3) rgba(0, 0, 0, 0.2);
}

.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(189, 168, 126, 0.3);
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(189, 168, 126, 0.6);
}

.sidebar .brand-area {
    padding: 24px 20px;
    border-bottom: 1px solid rgba(189, 168, 126, 0.15);
    background-color: rgba(0, 0, 0, 0.2);
}

.sidebar-menu {
    padding: 15px 10px 40px 10px;
}

.sidebar-menu .menu-section {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #BDB082;
    opacity: 0.65;
    padding: 12px 15px 5px 15px;
    letter-spacing: 1px;
}

.sidebar-menu .nav-link-amal {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #C7BD9B;
    padding: 12px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    margin-bottom: 2px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar-menu .nav-link-amal:hover {
    color: #F5EFE0;
    background-color: rgba(189, 168, 126, 0.15);
}

.sidebar-menu .nav-link-amal.active {
    color: #14110C;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 35%, transparent);
    font-weight: 800;
}

.sidebar-menu .nav-link-amal i {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.sidebar-menu .nav-link-amal:hover i {
    transform: scale(1.1);
}

/* Content Area */
.wrapper {
    margin-left: 260px;
    min-height: 100vh;
    transition: all 0.3s ease;
    /* .wrapper is a flex item (flex-grow-1) in the body-level flex row
       alongside the sidebar. Flex items default to min-width:auto, which
       sizes them to fit their widest descendant's intrinsic content
       instead of shrinking to the available viewport width — this is
       what let content overflow horizontally on narrow screens. */
    min-width: 0;
}

/* Top bar style */
.topbar {
    height: 70px;
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
    padding: env(safe-area-inset-top, 0px) 30px 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 99;
}

.active-client-menu::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 3px;
    background-color: var(--primary-color);
    bottom: -4px;
    left: 20%;
    border-radius: 2px;
}

/* Global Storefront Layout Styles */
.web-hero {
    background: linear-gradient(120deg, rgba(10, 10, 30, 0.72) 0%, rgba(15, 10, 30, 0.45) 55%, rgba(10,10,30,0.10) 100%),
                url('../images/banner.png') center center / cover no-repeat;
    border-radius: 24px;
    padding: 45px 35px;
    border: none;
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
    min-height: 350px;
    display: flex;
    align-items: center;
    box-shadow: 0 20px 60px rgba(255, 71, 126, 0.18);
}
.web-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 22%, transparent) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}
.web-hero > .row {
    position: relative;
    z-index: 1;
    width: 100%;
}

.division-card {
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 30px 24px;
    height: 100%;
    position: relative;
}
.division-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(255, 71, 126, 0.08);
    border-color: rgba(255, 71, 126, 0.2);
}
.division-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.catalog-item-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.catalog-item-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
    border-color: var(--primary-light);
}

.catalog-thumb {
    height: 190px;
    background: linear-gradient(135deg, rgba(255, 71, 126, 0.02) 0%, rgba(212, 175, 55, 0.02) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    color: var(--primary-light);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.filter-pills-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
}
.filter-pill {
    border-radius: 12px;
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    white-space: nowrap;
    transition: all 0.2s ease;
}
.filter-pill:hover, .filter-pill.active {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 28%, transparent);
}

.feature-point {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}
.feature-point-icon {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.main-content {
    padding: 30px;
}

/* Glassmorphism & Modern Card Styling */
.card-amal {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(82, 63, 105, 0.03);
    margin-bottom: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-amal:hover {
    box-shadow: 0 12px 35px rgba(82, 63, 105, 0.06);
}

.card-amal .card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 20px 24px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--dark-slate);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.max-w-500 {
    max-width: 500px;
    min-width: 0;
}

.card-amal .card-body {
    padding: 24px;
}

/* Brand Customizer selector dropdown */
.brand-select-container {
    padding: 10px 15px;
    margin-bottom: 15px;
}

.brand-select {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-weight: 600;
    border-radius: 10px;
    padding: 10px;
}

.brand-select:focus {
    background-color: var(--dark-slate);
    color: var(--white);
    box-shadow: 0 0 0 0.25rem rgba(255, 71, 126, 0.25);
    border-color: var(--primary-color);
}

/* Custom stats cards */
.stat-card {
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 24px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.2s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.01);
}

.stat-card:hover {
    transform: translateY(-3px);
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-icon.pink {
    background-color: rgba(255, 71, 126, 0.1);
    color: var(--primary-color);
}

.stat-icon.gold {
    background-color: rgba(212, 175, 55, 0.1);
    color: var(--secondary-color);
}

.stat-icon.success {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.stat-icon.info {
    background-color: rgba(14, 165, 233, 0.1);
    color: var(--info);
}

/* Buttons */
.btn-amal-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: none;
    color: var(--white);
    font-weight: 600;
    border-radius: 10px;
    padding: 10px 20px;
    box-shadow: 0 4px 15px rgba(255, 71, 126, 0.2);
    transition: all 0.2s ease;
}

.btn-amal-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #bd1542 100%);
    transform: translateY(-1px);
    color: var(--white);
}

.btn-amal-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #b89326 100%);
    border: none;
    color: var(--white);
    font-weight: 600;
    border-radius: 10px;
    padding: 10px 20px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
    transition: all 0.2s ease;
}

.btn-amal-secondary:hover {
    background: linear-gradient(135deg, #b89326 0%, #99781a 100%);
    transform: translateY(-1px);
    color: var(--white);
}

.btn-amal-light {
    background-color: #f3f6f9;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-weight: 600;
    border-radius: 10px;
    padding: 10px 20px;
    transition: all 0.2s ease;
}

.btn-amal-light:hover {
    background-color: #e4e6ef;
    color: var(--text-main);
}

/* Badges */
.badge-amal-pink {
    background-color: rgba(255, 71, 126, 0.12);
    color: var(--primary-color);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
}

.badge-amal-gold {
    background-color: rgba(212, 175, 55, 0.15);
    color: #99781a;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
}

.badge-amal-success {
    background-color: rgba(16, 185, 129, 0.12);
    color: var(--success);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
}

.badge-amal-danger {
    background-color: rgba(239, 68, 68, 0.12);
    color: var(--danger);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
}

.badge-amal-info {
    background-color: rgba(14, 165, 233, 0.12);
    color: var(--info);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
}

/* WhatsApp Preview Pane */
.whatsapp-preview {
    background-color: #efeae2;
    border-radius: 16px;
    padding: 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.whatsapp-bubble {
    background-color: #ffffff;
    border-radius: 8px 8px 8px 0;
    padding: 12px;
    font-size: 0.88rem;
    line-height: 1.4;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    white-space: pre-wrap;
    color: #303030;
}

.whatsapp-time {
    font-size: 0.68rem;
    color: #8696a0;
    text-align: right;
    margin-top: 4px;
}

/* Form Styles */
.form-control:focus, .form-select:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 0.25rem rgba(255, 71, 126, 0.15);
}

/* User Card in Sidebar */
.sidebar-user {
    padding: 15px;
    border-top: 1px solid rgba(189, 168, 126, 0.15);
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #16130E;
    z-index: 10;
}

/* Login Page Theme with Animated Gradient Background */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.login-bg {
    background: linear-gradient(-45deg, rgba(255, 71, 126, 0.08) 0%, rgba(212, 175, 55, 0.04) 30%, rgba(255, 133, 162, 0.02) 70%, #ffffff 100%);
    background-size: 400% 400%;
    animation: gradientBG 12s ease infinite;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Slide-in and Fade-in Animation keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animations to layout cards */
.card-amal {
    animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Sequential stat card slide-ins */
.row > div:nth-child(1) .stat-card { animation: fadeInUp 0.4s ease forwards 0.05s; opacity: 0; }
.row > div:nth-child(2) .stat-card { animation: fadeInUp 0.4s ease forwards 0.1s; opacity: 0; }
.row > div:nth-child(3) .stat-card { animation: fadeInUp 0.4s ease forwards 0.15s; opacity: 0; }
.row > div:nth-child(4) .stat-card { animation: fadeInUp 0.4s ease forwards 0.2s; opacity: 0; }
.row > div:nth-child(5) .stat-card { animation: fadeInUp 0.4s ease forwards 0.25s; opacity: 0; }

.stat-card {
    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Nav Link rotation hover effect */
.sidebar-menu .nav-link-amal i {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-menu .nav-link-amal:hover i {
    transform: rotate(12deg) scale(1.2);
}

/* Checklist Next Steps */
.checklist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-bottom: 8px;
    background-color: #fcfcfd;
}

.checklist-item.done {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

/* Table styles */
.table-amal th {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    background-color: #fbfbfc;
    padding: 15px;
}

.table-amal td {
    padding: 16px 15px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

/* Cart and Alignment Enhancements */
.last-border-none:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Aligned Cart item inputs and actions */
.cart-qty-input {
    height: 38px;
    width: 70px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
}
.cart-qty-input:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(255, 71, 126, 0.1);
    outline: none;
}

.btn-icon-trash {
    height: 38px;
    width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--danger);
    background-color: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.1);
    transition: all 0.2s ease;
}
.btn-icon-trash:hover {
    color: #ffffff;
    background-color: var(--danger);
    border-color: var(--danger);
}

/* Floating animations */
@keyframes floatAnim {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}
.float-effect {
    animation: floatAnim 6s ease-in-out infinite;
}

/* Pulse Glow buttons */
@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(255, 71, 126, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 71, 126, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 71, 126, 0); }
}
.pulse-button {
    animation: pulseGlow 2s infinite;
}

/* Active client menu underline indicators */
.active-client-menu {
    color: var(--primary-color) !important;
    position: relative;
    transition: color 0.25s ease;
}
.active-client-menu::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 3px;
    background-color: var(--primary-color);
    bottom: -4px;
    left: 20%;
    border-radius: 2px;
}

/* ==========================================================================
   Admin Shell — Mobile Responsive Layout
   Sidebar becomes an off-canvas drawer below the "lg" breakpoint (992px);
   the topbar, cards and tables reflow instead of overflowing.
   ========================================================================== */

.sidebar-toggle-btn,
.sidebar-close-btn {
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 1.4rem;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.sidebar-toggle-btn {
    margin-right: 12px;
}

.sidebar-toggle-btn:hover,
.sidebar-close-btn:hover {
    background-color: var(--light-bg, #f1f1f4);
}

.sidebar-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #F5EFE0;
    font-size: 1.1rem;
}

.sidebar-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Backdrop shown behind the sidebar drawer on mobile */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 8, 0.5);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.sidebar-backdrop.show {
    display: block;
    opacity: 1;
}

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .wrapper {
        margin-left: 0;
    }

    .topbar {
        padding: env(safe-area-inset-top, 0px) 16px 0 16px;
        height: 64px;
    }

    .main-content {
        padding: 18px;
    }
}

@media (max-width: 767.98px) {
    .topbar {
        padding: env(safe-area-inset-top, 0px) 12px 0 12px;
        gap: 8px;
    }

    .main-content {
        padding: 14px;
    }

    .card-amal .card-header {
        padding: 16px 18px;
        font-size: 1rem;
    }

    .card-amal .card-body {
        padding: 16px;
    }

    h2.fw-extrabold,
    h2.fw-extrabold.text-dark {
        font-size: 1.35rem !important;
    }

    /* Let title-area actions wrap onto their own row instead of clipping */
    .d-flex.align-items-center.justify-content-between.mb-4 {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    /* Flex items default to min-width:auto, which sizes them to their
       content's intrinsic width instead of letting text wrap within the
       available space — the classic flexbox text-overflow gotcha. Every
       admin page's title/description sits in a flex row like this, so
       fix it here once rather than per page. */
    .d-flex.align-items-center.justify-content-between.mb-4 > * {
        min-width: 0;
    }

    table.table {
        font-size: 0.85rem;
    }

    /* Any form field under 16px makes iOS Safari zoom the whole page in the
       moment it's tapped, then snap back out on blur — the single biggest
       "this is just a website, not an app" tell on a phone. Bootstrap's
       .form-control-sm / .form-select-sm (used everywhere in this app for
       compact desktop tables) render at 14px, well under that threshold. */
    .form-control,
    .form-select,
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="search"] {
        font-size: 16px !important;
    }
}

@media (max-width: 575.98px) {
    .topbar {
        height: 60px;
        padding: env(safe-area-inset-top, 0px) 10px 0 10px;
    }

    .main-content {
        padding: 12px;
    }

    .card-amal .card-header,
    .card-amal .card-body {
        padding: 14px;
    }
}

/* 8-Stage Event Pipeline (events.php) — on very small screens, scroll
   horizontally through the stage chips instead of wrapping into cramped
   uneven rows. */
@media (max-width: 575.98px) {
    .pipeline-stages-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        padding-bottom: 4px;
    }

    .pipeline-stages-row > div {
        flex: 0 0 auto;
        min-width: 110px;
    }
}

/* ==========================================================================
   Native-App Mobile Shell — a fixed bottom tab bar (phone/tablet only,
   matches the sidebar's own <992px breakpoint) so the OS feels like a real
   app on a phone instead of a desktop dashboard squeezed into a small
   screen. Built in includes/footer.php from the same permission catalog as
   the sidebar, so a restricted staff role only ever sees tabs it can open.
   `env(safe-area-inset-bottom)` keeps it clear of the home indicator on
   notched iPhones; it degrades to 0 harmlessly everywhere else.
   ========================================================================== */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 991.98px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 98;
        background: linear-gradient(180deg, #231F17 0%, #16130E 100%);
        border-top: 1px solid rgba(189, 168, 126, 0.22);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) 4px;
        transition: transform 0.2s ease;
    }

    /* Hidden (slid away) while the full sidebar drawer is open, so it never
       floats above the drawer or its backdrop (both z-index 99/100). */
    .mobile-bottom-nav.is-hidden {
        transform: translateY(100%);
    }

    .mobile-bottom-nav-link {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        padding: 6px 2px;
        border: 0;
        background: transparent;
        color: rgba(245, 239, 224, 0.62);
        font-size: 0.68rem;
        font-weight: 700;
        text-decoration: none;
        border-radius: 12px;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav-link i {
        font-size: 1.25rem;
        line-height: 1;
    }

    .mobile-bottom-nav-link span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .mobile-bottom-nav-link.active {
        color: #F5EFE0;
        background-color: rgba(189, 168, 126, 0.16);
    }

    .mobile-bottom-nav-link:active {
        background-color: rgba(189, 168, 126, 0.22);
    }

    .mobile-bottom-nav-badge {
        position: absolute;
        top: 2px;
        right: calc(50% - 20px);
        background: var(--danger, #ef4444);
        color: #fff;
        font-size: 0.6rem;
        font-weight: 800;
        line-height: 1;
        padding: 2px 5px;
        border-radius: 20px;
        min-width: 15px;
        text-align: center;
        border: 2px solid #16130E;
    }

    /* Room for the fixed bottom bar so page content and the footer never
       sit underneath it. */
    .main-content {
        padding-bottom: 84px;
    }

    footer.text-center.py-4 {
        margin-bottom: 60px;
    }
}

/* ==========================================================================
   Hero Banner Starfield — glowing, twinkling dots for the dark cinematic
   hero sections on the public brand pages (bounce_house_abuja.php,
   amal_party_corner.php, party_station_abuja.php).
   ========================================================================== */
.hero-starfield {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.hero-star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.25;
    animation-name: hero-star-twinkle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes hero-star-twinkle {
    0%, 100% {
        opacity: 0.15;
        transform: scale(0.8);
        box-shadow: 0 0 0 0 currentColor;
    }
    50% {
        opacity: 1;
        transform: scale(1.6);
        box-shadow: 0 0 6px 1px currentColor;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-star {
        animation: none;
        opacity: 0.5;
    }
}

/* ==========================================================================
   Hero Ken-Burns Slideshow — an auto-playing, slowly zooming/panning photo
   sequence standing in for a video showreel on the public brand hero
   banners, built from the brand's own real product photos.
   ========================================================================== */
.hero-kenburns {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.hero-kb-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation-name: hero-kb-cycle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.hero-kenburns::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .hero-kb-slide {
        animation: none;
        opacity: 0;
    }
    .hero-kb-slide:first-child {
        opacity: 1;
    }
}