/* 
 * ACTIVETEL - Premium Blue Glassmorphism Design System
 * Global Styles
 */

:root {
    /* Primary Colors - Blue Centered */
    --primary-blue: #0d47a1;
    --primary-dark-blue: #0a3d91;
    --primary-light-blue: #1565c0;
    --royal-blue: #3f51b5;
    --electric-blue: #2196f3;
    --cyan: #00bcd4;
    --light-cyan: #80deea;
    /* Dark Theme Background */
    --dark-bg: #0f1419;
    --darker-bg: #0a0e12;
    --card-bg: rgba(13, 71, 161, 0.08);
    --card-bg-light: rgba(33, 150, 243, 0.12);
    /* Glass Effect */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    /* Accent Colors */
    --success: #4caf50;
    --warning: #ff9800;
    --error: #f44336;
    --info: #2196f3;
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #b0b3b8;
    --text-tertiary: #808080;
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 20px rgba(33, 150, 243, 0.2);
    --shadow-glow-blue: 0 0 30px rgba(13, 71, 161, 0.2);
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
}


/* Light Mode — a standard, professional admin-dashboard palette: soft
   slate-gray page background with crisp, mostly-opaque cards (rather than
   the previous near-white-on-white combination, which read as washed out),
   deep slate-navy text for contrast, and softened shadows tuned for a light
   background instead of reusing the dark theme's heavy black shadows. */

:root[data-theme="light"] {
    --dark-bg: #eef1f6;
    --darker-bg: #ffffff;
    --card-bg: rgba(13, 71, 161, 0.05);
    --card-bg-light: rgba(33, 150, 243, 0.07);
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(15, 23, 42, 0.10);
    --text-primary: #1e2733;
    --text-secondary: #51606f;
    --text-tertiary: #8a97a6;
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.07);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.09);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
    --shadow-glow: 0 0 20px rgba(33, 150, 243, 0.15);
    --shadow-glow-blue: 0 0 30px rgba(13, 71, 161, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 16px;
    transition: background-color var(--transition-normal);
}


/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.1rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
}

a {
    color: var(--electric-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--cyan);
}


/* Glass Card Component */

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    /*border: 1px solid var(--glass-border);*/
    border-color: var(--cyan);
    border-radius: 16px;
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}
  .glass-card{
        border:1px solid cyan !important;
    }
.glass-card:hover {
    background: var(--glass-bg);
    border-color: var(--cyan);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    transform: translateY(-2px);
}

.glass-card-elevated {
    box-shadow: var(--shadow-lg), var(--shadow-glow-blue);
    border-color: var(--electric-blue);
}


/* Container */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.container-sm {
    max-width: 600px;
    margin: 0 auto;
}

.container-lg {
    max-width: 100%;
}


/* Grid Layout */

.grid,
.grid-2,
.grid-3,
.grid-4 {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}


/* Card padding: any card/article sitting directly inside one of these
   grids gets consistent internal padding, even when it isn't built with
   the shared .glass-card helper (e.g. inline service cards). Plain
   layout wrappers (form-group grids, etc.) are untouched — the gap
   above already gives them spacing. */

.grid>.card,
.grid-2>.card,
.grid-3>.card,
.grid-4>.card,
.grid>article,
.grid-2>article,
.grid-3>article,
.grid-4>article {
    padding: var(--spacing-lg);
}

@media (max-width: 992px) {
    .grid-3 {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .grid-4 {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}


/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    gap: 0.5rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--electric-blue) 100%);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--electric-blue);
}

.btn-secondary:hover {
    border-color: var(--cyan);
    box-shadow: var(--shadow-glow);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover {
    background: #45a049;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

.btn-danger {
    background: var(--error);
    color: white;
}

.btn-danger:hover {
    background: #da190b;
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.3);
}

.btn-warning {
    background: var(--warning);
    color: white;
}

.btn-warning:hover {
    background: #f57c00;
    box-shadow: 0 0 20px rgba(255, 152, 0, 0.3);
}

.btn-sm {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.btn-lg {
    font-size: 1.125rem;
    padding: 1rem 2rem;
}

.btn-full {
    width: 100%;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* Form Elements */

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.form-label.required::after {
    content: " *";
    color: var(--error);
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.form-control::placeholder {
    color: var(--text-tertiary);
}

.form-control:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
    background: var(--glass-bg);
}

.form-control:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-control-lg {
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
}


/* Password field "show/hide" eye toggle. password-toggle.js wraps every
   input[type="password"] in .password-field and injects the button below,
   so this is the only CSS any page needs — no per-page markup required. */

.password-field {
    position: relative;
}

.password-field .form-control {
    padding-right: 2.75rem;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 6px;
    transition: color var(--transition-fast);
}

.password-toggle-btn:hover,
.password-toggle-btn:focus-visible {
    color: var(--cyan);
    outline: none;
}

.password-toggle-btn svg {
    width: 1.125rem;
    height: 1.125rem;
    pointer-events: none;
}

.password-toggle-btn .icon-eye-off {
    display: none;
}

.password-toggle-btn.is-visible .icon-eye {
    display: none;
}

.password-toggle-btn.is-visible .icon-eye-off {
    display: block;
}

.form-select {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232196f3' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}


/* The dropdown popup a <select> opens is rendered by the OS/browser, not by
   our glass-card styling — it ignores backdrop-filter and the translucent
   glass background. Without an explicit color, <option> text inherits the
   white --text-primary color and lands on the browser's own (usually
   white/light) popup background, making every option invisible until
   highlighted. Give options an explicit, theme-independent color/background
   so the closed field still matches the glass design but the open list is
   always readable. */

select.form-control option,
select.form-select option {
    color: #1a1a1a;
    background-color: #ffffff;
}

.form-check {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.form-check-input {
    width: 20px;
    height: 20px;
    margin-right: var(--spacing-md);
    cursor: pointer;
    accent-color: var(--electric-blue);
}

.form-check-label {
    cursor: pointer;
    user-select: none;
}

.form-error {
    color: var(--error);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.form-success {
    color: var(--success);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}


/* Badges */

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-primary {
    background: var(--primary-blue);
    color: white;
}

.badge-success {
    background: var(--success);
    color: white;
}

.badge-danger {
    background: var(--error);
    color: white;
}

.badge-warning {
    background: var(--warning);
    color: white;
}

.badge-info {
    background: var(--info);
    color: white;
}


/* Bordered rules box (e.g. prohibited words / naming rules) */

.rules-box {
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
    background: var(--card-bg);
}

.rules-box h3 {
    margin: 0 0 0.4em 0;
    font-size: 0.95rem;
    color: var(--cyan);
}

.rules-box p {
    margin: 0 0 0.75em 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.rules-box p:last-child {
    margin-bottom: 0;
}


/* Percentage input (e.g. director share) — appends a fixed "%" suffix */

.percent-input-wrap {
    position: relative;
}

.percent-input-wrap .form-control {
    padding-right: 2.25rem;
}

.percent-input-wrap .percent-suffix {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
    font-size: 0.95rem;
}


/* Alerts */

.alert {
    padding: var(--spacing-md);
    border-radius: 8px;
    margin-bottom: var(--spacing-lg);
    border-left: 4px solid;
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.alert-success {
    background: rgba(76, 175, 80, 0.1);
    border-color: var(--success);
    color: var(--text-primary);
}

.alert-danger {
    background: rgba(244, 67, 54, 0.1);
    border-color: var(--error);
    color: var(--text-primary);
}

.alert-warning {
    background: rgba(255, 152, 0, 0.1);
    border-color: var(--warning);
    color: var(--text-primary);
}

.alert-info {
    background: rgba(33, 150, 243, 0.1);
    border-color: var(--info);
    color: var(--text-primary);
}


/* Tables */

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--glass-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.table thead {
    background: rgba(13, 71, 161, 0.2);
}

.table th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
}

.table td {
    padding: var(--spacing-md);
    border-top: 1px solid var(--glass-border);
}

.table tbody tr:hover {
    background: rgba(33, 150, 243, 0.05);
}


/* Navbar */

.navbar {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    padding: var(--spacing-md) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.navbar-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    gap: var(--spacing-md);
}


/* Floating back button - rendered right after the header/navbar closes on
   every logged-in customer/admin page, so it visually "floats" just under
   the header rather than living inside it. Fixed to the viewport (stays in
   place while the page scrolls). Its top offset is set dynamically in
   JS (see positionFloatingBackButton() in assets/js/main.js) to sit right
   below the real, rendered height of the navbar on every page - so it can
   never end up hidden underneath it. Always navigates to the immediate
   previous page (see goToPreviousPage() in assets/js/main.js). */

.floating-back-btn {
    position: fixed;
    top: 84px;
    left: max(var(--spacing-lg), env(safe-area-inset-left));
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 var(--spacing-lg) 0 var(--spacing-md);
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, var(--primary-blue), var(--cyan));
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(0, 188, 212, 0.15);
    animation: floatingBackIn 0.5s ease, floatingBackPulse 2.8s ease-in-out 0.6s infinite;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast);
}

.floating-back-btn:hover,
.floating-back-btn:focus-visible {
    filter: brightness(1.15);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(0, 188, 212, 0.25);
    transform: translateY(-3px) scale(1.04);
    color: #ffffff;
    animation-play-state: paused;
}

.floating-back-btn:active {
    transform: translateY(0) scale(0.97);
    filter: brightness(0.98);
}

.floating-back-btn svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
    stroke-width: 3;
    flex-shrink: 0;
    animation: floatingBackNudge 1.8s ease-in-out 1s infinite;
}

.floating-back-btn:hover svg {
    animation: none;
    transform: translateX(-3px);
}

@keyframes floatingBackIn {
    from {
        opacity: 0;
        transform: translateY(-16px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes floatingBackPulse {
    0%,
    100% {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(0, 188, 212, 0.15);
    }
    50% {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 8px rgba(0, 188, 212, 0.05);
    }
}

@keyframes floatingBackNudge {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-3px);
    }
}

@media (min-width: 769px) {
    .floating-back-btn {
        left: calc(250px + var(--spacing-lg));
    }
}

@media (max-width: 480px) {
    .floating-back-btn {
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 50%;
    }
    .floating-back-btn .floating-back-label {
        display: none;
    }
}


/* The button floats OVER the page (position: fixed), so without this the
   page's own top padding wasn't enough to clear it and it sat on top of
   the page title/first row of content. This reserves enough extra top
   space on any page that has the button (targeted via the sibling
   selector, so it never affects pages without one) equal to the button's
   height + the gap below the navbar + a little breathing room. */

.floating-back-btn~.main-content {
    padding-top: calc(var(--spacing-xl) + 46px + 16px + var(--spacing-md));
}

@media (max-width: 768px) {
    .floating-back-btn~.main-content {
        padding-top: calc(var(--spacing-lg) + 46px + 16px + var(--spacing-md));
    }
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
    flex-shrink: 1;
}

.navbar-brand a {
    display: flex;
    align-items: center;
    min-width: 0;
}

.navbar-brand img {
    height: 40px;
}

.navbar-menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: var(--spacing-xl);
}

.navbar-link {
    color: var(--text-secondary);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.navbar-link:hover,
.navbar-link.active {
    color: var(--cyan);
}


/* Public navbar hamburger toggle — hidden on desktop, shown only inside the
   768px media query below. Present on every page that includes
   includes/site-header.php, so the menu is always reachable on mobile
   (see assets/js/main.js for the open/close behaviour). This unstyled
   base rule must stay BEFORE the media query so the mobile "flex" rule
   in the query wins the cascade. */

.navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--glass-bg);
    cursor: pointer;
    flex-shrink: 0;
}

.navbar-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.navbar-toggle:hover {
    border-color: var(--cyan);
}

.navbar-toggle[aria-expanded="true"] .navbar-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navbar-toggle[aria-expanded="true"] .navbar-toggle-bar:nth-child(2) {
    opacity: 0;
}

.navbar-toggle[aria-expanded="true"] .navbar-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* Sidebar */

.sidebar {
  
    width: 250px;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border-right: 1px solid var(--glass-border);
    /*padding: var(--spacing-lg);*/
    height: 100vh;
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 500;
     padding-top: 50px !important;
}

.sidebar-menu {
    list-style: none;
}

.sidebar-item {
    margin-bottom: var(--spacing-md);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.sidebar-link:hover,
.sidebar-link.active {
    background: rgba(33, 150, 243, 0.1);
    color: var(--cyan);
}

.sidebar-link.active {
    border-left: 3px solid var(--cyan);
}


/* Main Content */

.main-content {
    margin-left: 250px;
    padding: var(--spacing-xl);
}


/* Mobile sidebar toggle button — hidden on desktop, shown only inside the
   768px media query below. Injected automatically by assets/js/main.js on
   any page that has a .sidebar, so no per-page markup is needed.
   NOTE: this unstyled/hidden base rule must be declared BEFORE the media
   query below. CSS cascade order (not just specificity) decides which of
   two equal-specificity rules wins, so if this "display: none" rule were
   declared after the media query's "display: inline-flex" rule, it would
   always win on mobile too and the button would never actually show. */

.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: 1.25rem;
    cursor: pointer;
    margin-right: var(--spacing-md);
}

@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
        padding: var(--spacing-lg);
    }
    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
    }
    .sidebar.active {
        transform: translateX(0);
    }
    .mobile-menu-toggle {
        display: inline-flex;
    }
    /* Public site navbar (includes/site-header.php): collapse the link
       list into a dropdown panel toggled by .navbar-toggle, instead of
       just hiding it with no way to reopen it. */
    .navbar-container {
        padding: 0 var(--spacing-md);
    }
    /* The full "ACTIVETEL" wordmark at desktop size (1.5rem) crowds the
       toggle button on narrow screens, so it scales down here instead of
       staying fixed. */
    .navbar-brand {
        font-size: 1.15rem;
    }
    .navbar-toggle {
        display: flex;
    }
    .navbar-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: 80vh;
        overflow-y: auto;
        background: var(--darker-bg);
        border-bottom: 1px solid var(--glass-border);
        box-shadow: var(--shadow-md);
        padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
    }
    .navbar-menu.active {
        display: flex;
    }
    .navbar-menu li {
        width: 100%;
    }
    .navbar-menu .navbar-link {
        display: block;
        padding: var(--spacing-md) 0;
        border-bottom: 1px solid var(--glass-border);
    }
    .navbar-menu li:last-child .navbar-link {
        border-bottom: none;
    }
    .navbar-menu li:has(>.btn) {
        margin-top: var(--spacing-md);
    }
    .navbar-menu .btn {
        display: block;
        text-align: center;
        width: 100%;
    }
}


/* Very narrow phones (most iPhones/Androids in portrait): shrink the
   wordmark and toggle button a little further so they never wrap or
   overflow the container edge. */

@media (max-width: 768px) {
    /*
     * Keep the Back control below the rendered navbar so it can never
     * cover the ACTIVETEL logo or the mobile menu toggle. JS adjusts the
     * exact top position to the navbar's real height.
     */
    .floating-back-btn {
        left: max(12px, env(safe-area-inset-left));
        min-height: 44px;
        height: 44px;
        padding-left: 12px;
        padding-right: 14px;
        font-size: 0.9rem;
        z-index: 10000;
    }
    .floating-back-btn svg {
        width: 19px;
        height: 19px;
    }
}

@media (max-width: 400px) {
    .navbar-brand {
        font-size: 1rem;
    }
    .navbar-toggle {
        width: 36px;
        height: 36px;
    }
}

.mobile-menu-toggle:hover {
    background: rgba(33, 150, 243, 0.1);
    color: var(--cyan);
}


/* Backdrop shown behind the sidebar while it's open on mobile, so tapping
   outside the menu closes it. */

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 499;
}

.sidebar-backdrop.active {
    display: block;
}


/* Loading Spinner */

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--glass-border);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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


/* Animations */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn var(--transition-normal);
}

.slide-in-up {
    animation: slideInUp var(--transition-normal);
}

.slide-in-down {
    animation: slideInDown var(--transition-normal);
}


/* Modals */

.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: var(--spacing-xl);
    max-width: 500px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    animation: slideInDown var(--transition-normal);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-footer {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    margin-top: var(--spacing-lg);
}


/* Utility Classes */

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.mt-xs {
    margin-top: var(--spacing-xs);
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mt-xl {
    margin-top: var(--spacing-xl);
}

.mt-2xl {
    margin-top: var(--spacing-2xl);
}

.mb-xs {
    margin-bottom: var(--spacing-xs);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mb-xl {
    margin-bottom: var(--spacing-xl);
}

.mb-2xl {
    margin-bottom: var(--spacing-2xl);
}

.p-md {
    padding: var(--spacing-md);
}

.p-lg {
    padding: var(--spacing-lg);
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gap-md {
    gap: var(--spacing-md);
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.cursor-pointer {
    cursor: pointer;
}


/* Responsive Design */

@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    .container {
        padding: 0 var(--spacing-md);
    }
}


/* Dark/Light Mode Toggle */

.theme-toggle {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.theme-toggle:hover {
    border-color: var(--cyan);
    box-shadow: var(--shadow-glow);
}


/* Wallet balance pill shown in the customer dashboard header (all dashboard pages) */

.wallet-balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    color: var(--cyan);
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.wallet-balance-pill:hover {
    border-color: var(--cyan);
    box-shadow: var(--shadow-glow);
}

.wallet-balance-pill-icon {
    font-size: 1rem;
}

@media (max-width: 576px) {
    .wallet-balance-pill {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* Admin: Print Application (admin/application-details.php).
   Elements marked .no-print are hidden when printing; everything else
   (application header, submitted details, documents list, timeline)
   prints as-is. */

@media print {
    .no-print,
    .navbar,
    .floating-back-btn,
    form button,
    form input[type="submit"],
    .btn {
        display: none !important;
    }
    .btn.print-keep {
        display: none !important;
        /* the Print button itself never appears in the printout */
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
    .glass-card,
    .glass-card-elevated {
        background: #fff !important;
        border: 1px solid #999 !important;
        box-shadow: none !important;
        color: #000 !important;
        break-inside: avoid;
    }
    .main-content {
        margin-left: 0 !important;
    }
    a[href]::after {
        content: "";
    }
    .badge {
        border: 1px solid #999;
        color: #000 !important;
        background: #eee !important;
    }
    #print-only-heading {
        display: block !important;
    }
}


/* Final viewport controls ------------------------------------------------ */


/*
 * Back button placement:
 * - With a dashboard sidebar visible/open, sit immediately to the RIGHT of
 *   the 250px sidebar so no sidebar link/content is covered.
 * - With the mobile sidebar closed (or on pages without a sidebar), return
 *   to the upper-left corner below the navbar/logo.
 */

.floating-back-btn {
    position: fixed !important;
    top: 82px !important;
    left: max(266px, calc(250px + var(--spacing-lg))) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 10000 !important;
    width: auto !important;
    min-width: 122px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 20px 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0d47a1 0%, #2196f3 52%, #00bcd4 100%) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .40), 0 0 0 3px rgba(0, 188, 212, .16) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.floating-back-btn svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    display: block !important;
    stroke: #fff !important;
    color: #fff !important;
    stroke-width: 3 !important;
    transform: none !important;
}

.floating-back-btn .floating-back-label {
    display: inline !important;
    color: #fff !important;
    font-weight: 800 !important;
}

.floating-back-btn:hover,
.floating-back-btn:focus-visible {
    color: #fff !important;
    filter: brightness(1.08) saturate(1.08) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .50), 0 0 0 5px rgba(0, 188, 212, .22) !important;
}

.floating-back-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .95) !important;
    outline-offset: 3px !important;
}

.floating-back-btn:active {
    transform: translateY(0) scale(.96) !important;
}

.floating-back-btn~.main-content {
    padding-top: calc(var(--spacing-xl) + 36px) !important;
}


/* WhatsApp group floating call-to-action. The URL/text are admin-managed. */

.whatsapp-group-float {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 10001;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    max-width: min(360px, calc(100vw - 32px));
    padding: 12px 16px 12px 13px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 16px;
    background: linear-gradient(135deg, #128c7e, #25d366);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .32), 0 0 0 4px rgba(37, 211, 102, .12);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    animation: whatsappFloatIn .55s ease;
}

.whatsapp-group-float:hover,
.whatsapp-group-float:focus-visible {
    color: #fff;
    transform: translateY(-4px);
    filter: brightness(1.05);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .38), 0 0 0 6px rgba(37, 211, 102, .16);
}

.whatsapp-group-float:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .95);
    outline-offset: 3px;
}

.whatsapp-group-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}

.whatsapp-group-icon svg {
    width: 24px;
    height: 24px;
}

.whatsapp-group-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.whatsapp-group-copy strong {
    font-size: .94rem;
}

.whatsapp-group-copy small {
    margin-top: 3px;
    font-size: .72rem;
    opacity: .92;
    white-space: normal;
}

@keyframes whatsappFloatIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* Support page WhatsApp card */

.whatsapp-support-card {
    border: 1px solid rgba(37, 211, 102, .35);
    background: linear-gradient(135deg, rgba(18, 140, 126, .12), rgba(37, 211, 102, .05));
}

.whatsapp-support-content {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.whatsapp-support-content h2 {
    margin-bottom: var(--spacing-xs);
}

.whatsapp-support-content p {
    color: var(--text-secondary);
    margin: 0;
    max-width: 760px;
}

.whatsapp-support-button {
    background: #25d366 !important;
    color: #fff !important;
    border-color: #25d366 !important;
    white-space: nowrap;
}

.whatsapp-support-disabled {
    opacity: .65;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .floating-back-btn {
        top: 76px !important;
        left: max(12px, env(safe-area-inset-left)) !important;
        min-width: 54px !important;
        width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        gap: 0 !important;
    }
    .floating-back-btn .floating-back-label {
        display: none !important;
    }
    .floating-back-btn svg {
        width: 23px !important;
        height: 23px !important;
        min-width: 23px !important;
        min-height: 23px !important;
    }
    .floating-back-btn~.main-content {
        padding-top: var(--spacing-lg) !important;
    }
    /* Mobile sidebar OPEN: move the Back control outside the sidebar. */
    body.sidebar-open .floating-back-btn {
        left: calc(250px + 12px) !important;
    }
    .whatsapp-group-float {
        right: 12px;
        bottom: 12px;
        max-width: calc(100vw - 24px);
        padding: 10px 12px 10px 10px;
        border-radius: 14px;
    }
    .whatsapp-group-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
    .whatsapp-group-copy strong {
        font-size: .82rem;
    }
    .whatsapp-group-copy small {
        font-size: .65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-back-btn,
    .whatsapp-group-float {
        transition: none !important;
        animation: none !important;
    }
}


/* CAC Name Search — New Business / Existing Business selection cards */

.name-search-choice {
    align-items: stretch;
}

.name-search-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text-primary);
    cursor: pointer;
}

.name-search-card p {
    color: var(--text-secondary);
    flex-grow: 1;
}

.name-search-card .btn {
    pointer-events: none;
}


/* CAC Name Search — sequential step blocks (Existing Business flow) */

.name-search-step {
    position: relative;
    padding-left: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.name-search-step-dot {
    position: absolute;
    left: 0;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cyan);
}
/* Admin tables: per-row draggable horizontal scrollbar (assets/js/admin-row-scroll.js) */
.table tr.row-scroll > td { padding: 4px 0 !important; border-top: 0 !important; background: transparent !important; }
.row-scroll-inner {
    display: none;
    width: var(--row-scroll-w, 100%);
    will-change: transform;
    box-sizing: border-box;
    padding: 2px 8px;
}
.has-hscroll .row-scroll-inner { display: block; }
.row-scroll-track {
    position: relative;
    height: 16px;
    border-radius: 8px;
    background: rgba(0, 188, 212, .15);
    cursor: pointer;
    touch-action: none;
    user-select: none;
}
.row-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 48px;
    border-radius: 8px;
    background: rgba(0, 188, 212, .75);
    cursor: grab;
    touch-action: none;
}
.row-scroll-thumb:hover { background: rgba(0, 188, 212, .95); }
.row-scroll-thumb.is-dragging { cursor: grabbing; background: #00bcd4; }