/* assets/css/style.css - Corporate Dashboard Design System */

:root {
    /* Color Palette - Vibrant Indigo & Pink Gradients */
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --secondary: #ec4899;
    --secondary-hover: #db2777;
    --bg-dark: #eef2f6;                 /* Clean Light Corporate background */
    --card-dark: #ffffff;               /* Clean white cards */
    --border-dark: #e2e8f0;             /* Soft light borders */
    --text-white: #1e293b;              /* Dark text */
    --text-muted: #64748b;              /* Muted text */
    
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #06b6d4;
    
    /* Font styles */
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --radius-lg: 12px;
    --radius-md: 8px;
    --shadow-premium: 0 4px 18px 0 rgba(0, 0, 0, 0.04);
}

/* Dark Mode support overrides */
body.dark-mode {
    --bg-dark: #0b0f19;
    --card-dark: rgba(17, 24, 39, 0.7);
    --border-dark: rgba(255, 255, 255, 0.08);
    --text-white: #f3f4f6;
    --text-muted: #9ca3af;
    --shadow-premium: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

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

body {
    font-family: var(--font-sans);
    background-color: var(--bg-dark);
    color: var(--text-white);
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Glassmorphism/Flat cards utility styles */
.glass {
    background: var(--card-dark);
    border: 1px solid var(--border-dark);
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.055);
    border-radius: 16px;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* Unified professional page-card language */
.card.glass, .card:not(.glass) {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.055);
    overflow: hidden;
}

.card.glass:hover, .card:not(.glass):hover {
    border-color: #dbe4ef;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.075);
}

body.dark-mode .card.glass, body.dark-mode .card:not(.glass) {
    background: #111827;
    border-color: rgba(255,255,255,.09);
    box-shadow: 0 10px 32px rgba(0,0,0,.22);
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Layout Wrappers */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Collapsible Sidebar styles */
.sidebar {
    position: relative;  /* Sidebar occupies its own layout column; pages open beside it */
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background: linear-gradient(180deg, #16324f 0%, #0f2942 100%);   /* Navy blue sidebar */
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
    z-index: 100;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-header h2 {
    font-size: 22px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: opacity 0.2s ease;
    color: #ffffff;                     /* Light logo text on navy sidebar */
}

.toggle-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
    border-radius: var(--radius-md);
    transition: background 0.3s, color 0.3s;
}

.toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-dark);
    transition: all 0.3s;
}

.sidebar.collapsed .sidebar-user {
    padding: 15px 10px;
    justify-content: center;
}

.sidebar-user .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--primary);
}

.sidebar-user .user-details {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

.sidebar.collapsed .sidebar-user .user-details {
    opacity: 0;
    display: none;
}

.sidebar-user .user-details h4 {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.sidebar-user .user-details span {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
}

.sidebar-nav {
    flex: 1;
    padding: 15px 10px;
}

.sidebar-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-link i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.nav-link:hover, .nav-link.active {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    border-left: 3px solid #38bdf8;
}

.sidebar.collapsed .nav-link span {
    opacity: 0;
    display: none;
}

/* Submenu links & search box legibility on navy sidebar */
.nav-link-sub { color: rgba(255,255,255,0.55); }
.sub-dot { background: rgba(255,255,255,0.4); }
.menu-item-has-child.open > .nav-link { color: #ffffff !important; }
#adminMenuSearch {
    color: #ffffff !important;
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
}
#adminMenuSearch::placeholder { color: rgba(255,255,255,0.45); }
.menu-search-container i { color: rgba(255,255,255,0.5) !important; }
.menu-search-container { border-bottom-color: rgba(255,255,255,0.08) !important; }
.sidebar-release-tag { color: rgba(255,255,255,0.4) !important; border-top-color: rgba(255,255,255,0.08) !important; background: transparent !important; }

/* Main Layout content styles */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: 0;      /* Sidebar is a flex column, so content starts beside it */
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keep content properly offset when the sidebar is collapsed */
.sidebar.collapsed ~ .main-content {
    margin-left: 0;
}

.topbar {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    background: #ffffff;                /* Corporate Pure White Topbar (like the screenshot!) */
    border-bottom: 1px solid var(--border-dark);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.02);
}

body.dark-mode .topbar {
    background: rgba(17, 24, 39, 0.95);
}

.topbar-left h3 {
    color: var(--text-white);
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, color 0.3s;
}

.btn-icon:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--primary);
}

body.dark-mode .btn-icon:hover {
    background: rgba(255, 255, 255, 0.05);
}

.content-area {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
}

/* General premium card elements styling */
.card {
    margin-bottom: 24px;
    border-radius: 16px;
}

.card-header {
    min-height: 62px;
    padding: 15px 20px;
    border-bottom: 1px solid #edf1f5;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -.01em;
    color: #1e293b;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px 16px 0 0;
}

.card-header i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef4ff;
    color: #3b82f6;
    font-size: 14px;
}

.card-header h1, .card-header h2, .card-header h3, .card-header h4 {
    color: #172033;
    font-weight: 700;
}


body.dark-mode .card-header {
    background: rgba(255, 255, 255, 0.02);
}

.card-body {
    padding: 20px;
}

.card-body > .table-responsive, .card-body > table {
    border-radius: 12px;
}

body.dark-mode .card-header {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    border-bottom-color: rgba(255,255,255,.08);
    color: #f8fafc;
}

body.dark-mode .card-header h1, body.dark-mode .card-header h2, body.dark-mode .card-header h3, body.dark-mode .card-header h4 {
    color: #f8fafc;
}

body.dark-mode .card-header i {
    background: rgba(59,130,246,.14);
}


.justify-between {
    justify-content: space-between;
}

/* Buttons System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-weight: 500;
    font-family: var(--font-sans);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-xs {
    padding: 4px 8px;
    font-size: 11px;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

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

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

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

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

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-dark);
    color: var(--text-white);
}

.btn-outline:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.dark-mode .btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Forms components */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: #ffffff;               /* Standard clean input in default theme */
    border: 1px solid #cbd5e1;
    color: #1e293b;
    font-family: var(--font-sans);
    transition: border-color 0.3s, background 0.3s;
}

body.dark-mode .form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-dark);
    color: var(--text-white);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    background: #ffffff;
}

body.dark-mode .form-control:focus {
    background: rgba(255, 255, 255, 0.08);
}

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

/* Dashboard Statistics components - Aligning precisely to corporate colors in picture */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.stat-card {
    background: #ffffff !important;
    border: 1px solid var(--border-dark) !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s !important;
    box-shadow: 0 8px 26px 0 rgba(15, 23, 42, 0.055) !important;
    border-color: #e5eaf1 !important;
}

body.dark-mode .stat-card {
    background: rgba(17, 24, 39, 0.8) !important;
}

.stat-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.06) !important;
}

.stat-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    color: #fff !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.4) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.stat-icon::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(135deg, rgba(255,255,255,.32), transparent 60%) !important;
    pointer-events: none !important;
}

.stat-card:hover .stat-icon {
    transform: translateY(-2px) scale(1.06) rotate(-2deg);
}

.stat-card h3 {
    color: var(--text-white) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
}

.stat-card p {
    color: var(--text-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Elegant Bottom Wave Lines styling for each card type */
.stat-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: transparent !important;
    transition: height 0.3s ease !important;
}

.stat-card:hover::after {
    height: 6px !important;
}

/* Specific Corporate Color Badges & Bottom Wave Gradients — gradient icon finish */
.stat-teal .stat-icon { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; box-shadow: 0 8px 18px -5px rgba(37,99,235,.45) !important; }
.stat-teal::after { background: linear-gradient(90deg, #3b82f6 0%, rgba(59, 130, 246, 0.2) 100%) !important; }

.stat-cyan .stat-icon { background: linear-gradient(135deg, #22d3ee, #0891b2) !important; box-shadow: 0 8px 18px -5px rgba(8,145,178,.45) !important; }
.stat-cyan::after { background: linear-gradient(90deg, #06b6d4 0%, rgba(6, 182, 212, 0.2) 100%) !important; }

.stat-green .stat-icon { background: linear-gradient(135deg, #34d399, #059669) !important; box-shadow: 0 8px 18px -5px rgba(5,150,105,.45) !important; }
.stat-green::after { background: linear-gradient(90deg, #10b981 0%, rgba(16, 185, 129, 0.2) 100%) !important; }

.stat-pink .stat-icon { background: linear-gradient(135deg, #f472b6, #db2777) !important; box-shadow: 0 8px 18px -5px rgba(219,39,119,.45) !important; }
.stat-pink::after { background: linear-gradient(90deg, #ec4899 0%, rgba(236, 72, 153, 0.2) 100%) !important; }

.stat-orange .stat-icon { background: linear-gradient(135deg, #fbbf24, #d97706) !important; box-shadow: 0 8px 18px -5px rgba(217,119,6,.45) !important; }
.stat-orange::after { background: linear-gradient(90deg, #f59e0b 0%, rgba(245, 158, 11, 0.2) 100%) !important; }

.stat-purple .stat-icon { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: 0 8px 18px -5px rgba(124,58,237,.45) !important; }
.stat-purple::after { background: linear-gradient(90deg, #8b5cf6 0%, rgba(139, 92, 246, 0.2) 100%) !important; }

/* Tables styling */
.table-responsive {
    overflow-x: auto;
    width: 100%;
}

.table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.table th, .table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-dark);
}

.table th {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}

.table td {
    font-size: 14px;
    color: var(--text-white);
}

.table tr:hover {
    background: #f8fafc;
}

body.dark-mode .table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}


/* Badge component */
.badge {
    display: inline-flex;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.badge-success { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.badge-danger { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.badge-warning { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.badge-indigo { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.badge-cyan { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }
.badge-pink { background: rgba(236, 72, 153, 0.15); color: #f472b6; }

/* Micro-Animations & transitions system */
.animate-fade-in { animation: fadeIn 0.4s ease forwards; }
.animate-scale-up { animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-slide-down { animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

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

@keyframes scaleUp {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

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

/* Auth Cards Glass UI */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15) 0%, rgba(236, 72, 153, 0.05) 90%);
}

.login-card, .register-card {
    width: 100%;
    max-width: 440px;
    padding: 35px;
}

.register-card {
    max-width: 640px;
}

.login-header {
    text-align: center;
    margin-bottom: 25px;
}

.logo-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 15px;
}

.login-header h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}

.login-header p {
    font-size: 13px;
    color: var(--text-muted);
}

.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.btn-toggle-password {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

.login-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    margin: 15px 0 20px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.forgot-link, .register-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.forgot-link:hover, .register-link:hover {
    text-decoration: underline;
}

.login-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Modals overlays glass styling */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
    overscroll-behavior: contain;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    width: 100%;
    max-width: 500px;
    overflow: hidden;
}

.modal-lg {
    max-width: 800px;
}

/* Fullscreen modal variant (e.g. Add New Client form) */
.modal-content.modal-fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.modal-content.modal-fullscreen .modal-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Fullscreen monitor overlay. Scoped so other application modals keep their existing sizing. */
.modal-overlay.modal-fullscreen-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
.modal-overlay.modal-fullscreen-overlay .modal-content.modal-fullscreen {
    margin: 0;
}


/* Add New Client modal: start beside the fixed sidebar, never underneath it */
#modal-client-create.modal-overlay {
    left: 260px;
    width: calc(100% - 260px);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#modal-client-create .modal-content.modal-fullscreen {
    width: 100%;
    max-width: 100%;
}

/* Follow the sidebar when it's collapsed */
.sidebar.collapsed ~ .main-content #modal-client-create.modal-overlay {
    left: 72px;
    width: calc(100% - 72px);
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    transition: color 0.3s;
}

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

.modal-body {
    padding: 20px;
}

/* Toast alert elements styling — v2 animated notification system */
.toast-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    z-index: 9999;
    pointer-events: none;
}

.toast-x {
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 300px;
    max-width: 380px;
    padding: 14px 40px 14px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(148,163,184,.22);
    box-shadow: 0 18px 40px rgba(15,23,42,.16), 0 3px 10px rgba(15,23,42,.06);
    backdrop-filter: blur(10px);
    animation: toastSpringIn .45s cubic-bezier(.34,1.56,.64,1) forwards;
}

body.dark-mode .toast-x { background: rgba(23, 30, 46, .96); border-color: rgba(255,255,255,.08); }

.toast-x.toast-x-out {
    animation: toastSlideOut .3s cubic-bezier(.4,0,1,1) forwards;
}

@keyframes toastSpringIn {
    0%   { transform: translateX(120%) scale(.9); opacity: 0; }
    60%  { transform: translateX(-6%) scale(1.01); opacity: 1; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes toastSlideOut {
    to { transform: translateX(110%) scale(.95); opacity: 0; }
}

.toast-x-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 16px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.4);
    animation: toastIconPop .5s cubic-bezier(.34,1.56,.64,1) .08s both;
}
.toast-x-icon::after {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 60%);
}

@keyframes toastIconPop {
    0%   { transform: scale(.3) rotate(-20deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.toast-x-success .toast-x-icon { background: linear-gradient(135deg,#34d399,#059669); box-shadow: 0 6px 14px -3px rgba(5,150,105,.5); }
.toast-x-error   .toast-x-icon { background: linear-gradient(135deg,#f87171,#dc2626); box-shadow: 0 6px 14px -3px rgba(220,38,38,.5); }
.toast-x-warning .toast-x-icon { background: linear-gradient(135deg,#fbbf24,#d97706); box-shadow: 0 6px 14px -3px rgba(217,119,6,.5); }
.toast-x-info    .toast-x-icon { background: linear-gradient(135deg,#60a5fa,#2563eb); box-shadow: 0 6px 14px -3px rgba(37,99,235,.5); }

.toast-x-body { flex: 1; min-width: 0; }
.toast-x-title {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 2px;
}
.toast-x-success .toast-x-title { color: #059669; }
.toast-x-error   .toast-x-title { color: #dc2626; }
.toast-x-warning .toast-x-title { color: #d97706; }
.toast-x-info    .toast-x-title { color: #2563eb; }

.toast-x-msg {
    font-size: 13.5px;
    line-height: 1.4;
    color: #1e293b !important;
    font-weight: 500;
    word-break: break-word;
}
body.dark-mode .toast-x-msg { color: #e5e9f0 !important; }

.toast-x-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(148,163,184,.14);
    color: #64748b;
    font-size: 11px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.toast-x-close:hover { background: rgba(148,163,184,.28); color: #1e293b; transform: scale(1.08); }

.toast-x-bar {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 3px;
    background: rgba(148,163,184,.18);
}
.toast-x-bar span {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left;
    animation: toastBarShrink linear forwards;
}
.toast-x-success .toast-x-bar span { background: linear-gradient(90deg,#34d399,#059669); }
.toast-x-error   .toast-x-bar span { background: linear-gradient(90deg,#f87171,#dc2626); }
.toast-x-warning .toast-x-bar span { background: linear-gradient(90deg,#fbbf24,#d97706); }
.toast-x-info    .toast-x-bar span { background: linear-gradient(90deg,#60a5fa,#2563eb); }

@keyframes toastBarShrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Support Tickets Dialogue box layout spacing */
.ticket-summary-widget {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    text-align: center;
}

.summary-item {
    padding: 15px 5px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
}

.summary-item .val { font-size: 20px; font-weight: 700; }
.summary-item .lbl { font-size: 9px; color: #d1d5db; text-transform: uppercase; margin-top: 3px; }

.bg-indigo-900 { background-color: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3); color: #818cf8; }
.bg-red-900 { background-color: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; }
.bg-yellow-900 { background-color: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); color: #fbbf24; }
.bg-green-900 { background-color: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #34d399; }

/* Hidden utility class */
.hidden { display: none !important; }

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Printing styles for payment receipts */
@media print {
    body * {
        visibility: hidden;
    }
    .print-section, .print-section * {
        visibility: visible;
    }
    .print-section {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        color: black !important;
        background: white !important;
    }
    .modal-overlay {
        background: transparent !important;
        backdrop-filter: none !important;
    }
}

/* ==========================================================================
   Vibrant Responsive Layout overrides (ISP Billing Standard)
   ========================================================================== */
@media (max-width: 992px) {
    /* Sidebar position/width/open-state on mobile are owned exclusively by the
       "SIDEBAR STABILITY FIX" block further down (.app-container > .sidebar) —
       intentionally not redeclared here to avoid the layered-override bugs
       that caused the sidebar to break on open. */

    /* Sidebar is off-canvas on mobile, so the client-create modal should use the full width */
    #modal-client-create.modal-overlay,
    .sidebar.collapsed ~ .main-content #modal-client-create.modal-overlay {
        left: 0 !important;
        width: 100% !important;
    }

    #mobile-toggle-sidebar {
        display: inline-block !important;
    }
    
    .topbar {
        padding: 10px 15px !important;
        gap: 10px !important;
    }
    
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .dashboard-stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .topbar-right {
        gap: 10px !important;
    }
    
    .topbar-right a span {
        display: none !important; /* Keep icons, hide texts on small screens */
    }
    
    .ticket-summary-widget {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .modal-content {
        width: 95% !important;
        margin: 10px auto !important;
    }
    
    .stats-card {
        padding: 15px !important;
    }
}

/* ==========================================================================
   MISSING UTILITY CLASSES - Full Set
   ========================================================================== */
.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-1 { flex: 1 !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.gap-1 { gap: 8px !important; }
.gap-2 { gap: 12px !important; }
.gap-3 { gap: 16px !important; }
.gap-4 { gap: 20px !important; }
.grid { display: grid !important; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.p-3 { padding: 16px !important; }
.p-4 { padding: 20px !important; }
.mt-2 { margin-top: 8px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.py-4 { padding-top: 20px !important; padding-bottom: 20px !important; }
.py-5 { padding-top: 30px !important; padding-bottom: 30px !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-sm { font-size: 13px !important; }
.text-xs { font-size: 11px !important; }
.font-bold { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }
.text-muted { color: var(--text-muted) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-indigo-400 { color: #818cf8 !important; }
.text-pink-400 { color: #f472b6 !important; }
.bg-gray-900 { background: rgba(0,0,0,0.06) !important; border-radius: var(--radius-md) !important; }
body.dark-mode .bg-gray-900 { background: rgba(255,255,255,0.04) !important; }
.rounded { border-radius: var(--radius-md) !important; }
.table-container { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }
.form-label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--text-muted); font-weight: 500; }
.badge-info { background: rgba(6,182,212,0.15); color: #22d3ee; }
.btn-indigo { background: rgba(99,102,241,0.12); color: #818cf8; border: 1px solid rgba(99,102,241,0.25); }
.btn-indigo:hover, .btn-indigo.active { background: rgba(99,102,241,0.25); color: #a5b4fc; }
.ripple { position: relative; overflow: hidden; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1.2s linear infinite !important; }

/* Dashboard panels row */
.dashboard-panels-row { display: flex; gap: 20px; margin-top: 25px; }
.stats-grid.second-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.canvas-wrapper { height: 220px; position: relative; }

/* Promised payments */
.promised-list { list-style: none; padding: 0; margin: 0; }
.promised-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-dark); font-size: 13px; gap: 8px; }
.promised-item:last-child { border-bottom: none; }
.no-promised { color: var(--text-muted); font-size: 13px; text-align: center; padding: 15px 0; }

/* ==========================================================================
   IMPROVED RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1100px) {
    .dashboard-panels-row { flex-direction: column; }
    .widgets-column { flex-direction: row !important; flex-wrap: wrap; }
    .widgets-column > .card { flex: 1; min-width: 280px; }
}

@media (max-width: 992px) {
    /* Sidebar/main-content position again owned by the STABILITY FIX block below —
       not redeclared here. */
    #mobile-toggle-sidebar { display: inline-flex !important; }
    .content-area { padding: 15px !important; }
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .grid-cols-2 { grid-template-columns: 1fr !important; }
    .form-grid { grid-template-columns: 1fr !important; }
    .topbar { padding: 10px 15px !important; }
    .topbar-right a span { display: none !important; }
    .dashboard-stats-grid { grid-template-columns: repeat(2,1fr) !important; }
}

@media (max-width: 768px) {
    .content-area { padding: 10px !important; }
    .stats-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
    .stat-card { padding: 14px !important; }
    .stat-card h3 { font-size: 20px !important; }
    .dashboard-panels-row { flex-direction: column; gap: 12px; }
    .card-header { flex-wrap: wrap; gap: 8px; }
    .table th, .table td { padding: 9px 8px !important; font-size: 12px !important; }
    .modal-content { max-width: 96vw !important; max-height: 92vh !important; overflow-y: auto !important; }
    .topbar { height: auto !important; flex-wrap: wrap !important; padding: 10px 12px !important; gap: 8px !important; }
    .filter-card .card-body { flex-direction: column !important; align-items: flex-start !important; }
    .ticket-summary-widget { grid-template-columns: repeat(2,1fr) !important; }
    .modal-content { width: 95% !important; }
    .modal-content.modal-fullscreen { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; margin: 0 !important; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
    .toast-container { right: 10px !important; left: 10px !important; bottom: 15px !important; }
    .toast-x { min-width: unset !important; max-width: unset !important; width: 100% !important; }
    .profile-tabs { flex-wrap: wrap !important; }
    .profile-tabs .btn { font-size: 11px !important; padding: 5px 8px !important; }
    .marquee-section { display: none !important; }
}

/* Client List — M.Status toggle switch */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ef4444; transition: .2s; border-radius: 999px; }
.switch .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: #fff; transition: .2s; border-radius: 50%; }
.switch input:checked + .slider { background-color: #3b82f6; }
.switch input:checked + .slider:before { transform: translateX(18px); }

/* ==========================================================================
   SIDEBAR STABILITY FIX — existing layout only
   Keeps the sidebar fixed on desktop, independently scrollable, and
   correctly off-canvas on tablet/mobile. No menu items or features removed.

   THIS IS THE SINGLE SOURCE OF TRUTH for .sidebar position/left/width/
   height/z-index/overflow and for .main-content margin-left/width.
   Do NOT add another .sidebar or .main-content position/width/left rule
   anywhere else (style.css, index.php inline <style>, or any page file).
   Add new visual/decorative .sidebar-* rules elsewhere if needed, but
   never redeclare position, left, top, width, height, or margin-left
   for .sidebar / .main-content outside this block.
   ========================================================================== */

@media (min-width: 993px) {
    .app-container {
        position: relative;
    }

    .app-container > .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 260px !important;
        height: 100vh !important;
        min-height: 100vh !important;
        flex: 0 0 260px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .app-container > .main-content {
        width: calc(100% - 260px) !important;
        margin-left: 260px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .app-container > .sidebar.collapsed {
        width: 72px !important;
        flex-basis: 72px !important;
    }

    .app-container > .sidebar.collapsed ~ .main-content {
        width: calc(100% - 72px) !important;
        margin-left: 72px !important;
    }

    .app-container > .sidebar .sidebar-nav {
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: thin;
    }
}

@media (max-width: 992px) {
    /* No horizontal scrollbar from the content that gets pushed off-screen below */
    .app-container {
        overflow-x: hidden !important;
    }

    .app-container > .sidebar,
    .app-container > .sidebar.collapsed {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        width: 260px !important;
        height: 100vh !important;
        min-height: 100vh !important;
        flex: 0 0 260px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        z-index: 9999 !important;
    }

    .app-container > .sidebar.open,
    .app-container > .sidebar.open.collapsed {
        left: 0 !important;
        width: 260px !important;
    }

    .app-container > .main-content,
    .app-container > .sidebar.collapsed ~ .main-content {
        width: 100% !important;
        margin-left: 0 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* PUSH layout (not overlay): opening the sidebar shifts the dashboard
       content to the right by the sidebar's width, so content is beside the
       sidebar and never hidden underneath/behind it. */
    .app-container > .sidebar.open ~ .main-content {
        transform: translateX(260px) !important;
    }

    .app-container > .sidebar .sidebar-nav {
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Invisible tap-to-close catcher over the (now off-screen) pushed content,
       so tapping outside the sidebar still closes it. No dark dimming — the
       content itself is simply moved beside the sidebar, never covered. */
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 9990; /* below the sidebar (9999), above main-content */
        opacity: 0;
        pointer-events: none;
    }

    .sidebar-backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Backdrop is a mobile-only concept; always hidden on desktop */
@media (min-width: 993px) {
    .sidebar-backdrop {
        display: none !important;
    }
}


/* Topbar quick-action shortcuts */
.topbar-right .topbar-shortcut {
    min-height: 40px;
    padding: 7px 14px !important;
    border-radius: 12px !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #1e293b !important;
    border: 1px solid transparent !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.topbar-right .topbar-shortcut:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.13);
    filter: brightness(0.98);
}

.topbar-right .topbar-support-ticket {
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
    border-color: #93c5fd !important;
}

.topbar-right .topbar-support-ticket i {
    color: #2563eb !important;
}

.topbar-right .topbar-online-monitor {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
    border-color: #6ee7b7 !important;
}

.topbar-right .topbar-online-monitor i {
    color: #059669 !important;
}

body.dark-mode .topbar-right .topbar-shortcut {
    color: #f8fafc !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.25);
}

body.dark-mode .topbar-right .topbar-support-ticket {
    background: linear-gradient(135deg, rgba(37,99,235,.22), rgba(59,130,246,.12)) !important;
    border-color: rgba(96,165,250,.45) !important;
}

body.dark-mode .topbar-right .topbar-online-monitor {
    background: linear-gradient(135deg, rgba(5,150,105,.22), rgba(16,185,129,.12)) !important;
    border-color: rgba(52,211,153,.42) !important;
}

@media (max-width: 900px) {
    .topbar-right .topbar-shortcut span {
        display: none;
    }
    .topbar-right .topbar-shortcut {
        width: 40px;
        justify-content: center;
        padding: 7px !important;
        gap: 0;
    }
}

/* ===== ALL ADD / CREATE / EDIT FORMS — COLOR-GRADE PRO v2 ===== */
.pro-form{
  position:relative!important;
  border:1px solid #d9e2f2!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#ffffff 0%,#f7f9ff 48%,#f0fdfa 100%)!important;
  box-shadow:0 14px 36px rgba(30,41,59,.09)!important;
  overflow:hidden!important;
}
.pro-form:before{
  content:""!important;
  display:block!important;
  height:5px!important;
  margin:-20px -20px 20px!important;
  background:linear-gradient(90deg,#4f46e5 0%,#7c3aed 25%,#0891b2 52%,#10b981 76%,#f59e0b 100%)!important;
}
.pro-form .form-group,.pro-form .form-field,.pro-form .field,.pro-form .hr-field{
  padding:2px 0!important;
}
.pro-form label{
  display:block!important;
  margin:0 0 7px!important;
  color:#26324a!important;
  font-size:12px!important;
  font-weight:800!important;
}
.pro-form label:before{content:""!important;display:inline-block!important;width:6px!important;height:6px!important;border-radius:50%!important;margin:0 7px 1px 0!important;background:linear-gradient(135deg,#6366f1,#06b6d4)!important;box-shadow:0 0 0 3px rgba(99,102,241,.08)!important}
.pro-form input:not([type=checkbox]):not([type=radio]),.pro-form select,.pro-form textarea,.pro-form .form-control{
  width:100%!important;min-height:44px!important;box-sizing:border-box!important;
  border:1px solid #d6deeb!important;border-radius:12px!important;
  background:rgba(255,255,255,.96)!important;color:#172033!important;
  padding:10px 12px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px rgba(15,23,42,.035)!important;
  transition:border-color .18s,box-shadow .18s,transform .18s,background .18s!important;
}
.pro-form textarea{min-height:92px!important;resize:vertical!important}
.pro-form input:not([type=checkbox]):not([type=radio]):hover,.pro-form select:hover,.pro-form textarea:hover,.pro-form .form-control:hover{border-color:#9caee0!important;background:#fff!important}
.pro-form input:not([type=checkbox]):not([type=radio]):focus,.pro-form select:focus,.pro-form textarea:focus,.pro-form .form-control:focus{
  outline:none!important;border-color:#6366f1!important;background:#fff!important;
  box-shadow:0 0 0 4px rgba(99,102,241,.10),0 9px 20px rgba(79,70,229,.08)!important;transform:translateY(-1px)!important;
}
.pro-form input[type=checkbox],.pro-form input[type=radio]{accent-color:#4f46e5!important}
.pro-form button[type=submit],.pro-form .btn-primary,.pro-form .btn-success{
  border:0!important;border-radius:12px!important;min-height:42px!important;
  background:linear-gradient(135deg,#4f46e5,#2563eb 52%,#0891b2)!important;
  color:#fff!important;font-weight:850!important;box-shadow:0 9px 20px rgba(37,99,235,.22)!important;
}
.pro-form button[type=submit]:hover,.pro-form .btn-primary:hover,.pro-form .btn-success:hover{transform:translateY(-1px)!important;filter:brightness(1.04)!important;box-shadow:0 12px 25px rgba(37,99,235,.27)!important}
.pro-form .btn-outline,.pro-form .btn-light{border-radius:12px!important;border:1px solid #d2dbe9!important;background:#fff!important;color:#334155!important;font-weight:800!important}
.pro-form hr{border:0!important;border-top:1px solid #e3eaf4!important;margin:18px 0!important}
.pro-form small{color:#64748b!important}
.pro-form .form-section,.pro-form .section-card,.pro-form .hr-section{
  border:1px solid #e1e8f3!important;border-radius:15px!important;background:rgba(255,255,255,.72)!important;
  box-shadow:0 6px 18px rgba(15,23,42,.035)!important;padding:14px!important;
}
/* Make modal add/edit forms visually distinct without changing their HTML or behavior. */
.modal-content > .modal-body > .pro-form,.modal-content .pro-form{margin:0!important}
.modal-content .pro-form:before{margin:-20px -20px 18px!important}
body.dark-mode .pro-form{background:linear-gradient(145deg,#111827,#172033 55%,#102a2b)!important;border-color:#334155!important}
body.dark-mode .pro-form label{color:#e5e7eb!important}
body.dark-mode .pro-form input:not([type=checkbox]):not([type=radio]),body.dark-mode .pro-form select,body.dark-mode .pro-form textarea,body.dark-mode .pro-form .form-control{background:#0f172acc!important;color:#f8fafc!important;border-color:#334155!important}
body.dark-mode .pro-form .form-section,body.dark-mode .pro-form .section-card,body.dark-mode .pro-form .hr-section{background:#111827bb!important;border-color:#334155!important}
@media(max-width:700px){.pro-form{padding:15px!important;border-radius:15px!important}.pro-form:before{margin:-15px -15px 15px!important}.pro-form input:not([type=checkbox]):not([type=radio]),.pro-form select,.pro-form textarea,.pro-form .form-control{min-height:43px!important}}


/* ==========================================================================
   DASHBOARD PAGE VIEWPORT (fixed frame + scrolling content area)
   - Topbar / announcement bar stay on top; every page opens BELOW them.
   - Pages open beside the sidebar (sidebar offset is handled by the
     "SIDEBAR STABILITY FIX" block above - untouched).
   - ONLY #content-area scrolls (vertical AND horizontal, always-visible
     scrollbars). The opened page never spills outside it, so no other
     page/area appears when scrolling down or right.
   ========================================================================== */
.app-container {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.app-container > .main-content {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Everything above the page keeps its natural height. */
.app-container > .main-content > * {
    flex-shrink: 0;
}

.app-container > .main-content > .content-area {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: scroll !important;        /* vertical + horizontal bars always shown on every page */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
    scrollbar-color: #94a3b8 #e5e7eb;
}

/* Always-visible, touch-friendly scrollbars on the page area. */
.app-container > .main-content > .content-area::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
.app-container > .main-content > .content-area::-webkit-scrollbar-track {
    background: #e5e7eb;
}
.app-container > .main-content > .content-area::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
}
.app-container > .main-content > .content-area::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}
.app-container > .main-content > .content-area::-webkit-scrollbar-corner {
    background: #e5e7eb;
}

/* Printing / PDF export must still show the whole page. */
@media print {
    .app-container,
    .app-container > .main-content,
    .app-container > .main-content > .content-area {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ==========================================================================
   UNIFIED ALWAYS-VISIBLE SCROLLBARS
   Reference: Support Staff -> Edit popup scroll system. Every page, popup and
   table now shows the same manual scrollbars (vertical + horizontal) all the
   time, whether the content is short or long.
   ========================================================================== */
*{scrollbar-width:auto;scrollbar-color:#94a3b8 #e5e7eb}
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:#e5e7eb}
*::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:8px;border:2px solid #e5e7eb}
*::-webkit-scrollbar-thumb:hover{background:#64748b}
*::-webkit-scrollbar-corner{background:#e5e7eb}
body.dark-mode *{scrollbar-color:#64748b #1e293b}
body.dark-mode *::-webkit-scrollbar-track,body.dark-mode *::-webkit-scrollbar-corner{background:#1e293b}
body.dark-mode *::-webkit-scrollbar-thumb{background:#64748b;border-color:#1e293b}
body.dark-mode *::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* Popups / modal bodies: both scrollbars always present */
.modal-body,
.modal-content.modal-fullscreen .modal-body,
#modal-client-create .modal-content.modal-fullscreen .modal-body,
#modal-live-monitor .modal-body,#modal-live-monitor .modal-content > .modal-body,
#modal-lm-action .modal-body,#modal-lm-action .modal-content > .modal-body,
.isp-modal-body,.sa-admin-edit-body,.hr-form-body,.hrp-body,.mcp-body,
.software-bill-modal,.uc-request-box,.ss-ticket-modal-box,
.ss-modal-box.ss-staff-edit-box,.sa-change-log-body,.ss-change-log-body,.app-notification-list{
  overflow:scroll !important;
  -webkit-overflow-scrolling:touch;
}

/* Tables: both scrollbars always present */
.table-responsive,.table-container,
.audit-table-wrap,.bill-table-wrap,.clone-table-wrap,.crp-table-wrap,
.gateway-table-wrap,.gateway-permission-table-wrap,.isp-detail-table-wrap,
.netmap-table-wrap,.rr-table-wrap,.reseller-table-wrap,.sa-users-table-wrap,
.sfh-table-wrap,.ss-auth-table-wrap,.ss-detail-table-wrap,.ss-network-table-wrap,
.ss-table-wrap,.ss-ticket-table-wrap,.ssub-table-wrap,.uc-table-wrap,.ep-scroll,.ep-calendar-wrap{
  overflow:scroll !important;
  -webkit-overflow-scrolling:touch;
}

/* ==========================================================================
   BOXED TABLES (all tables): every cell gets a thin box border - grid look
   like the Users table reference. Only borders are added; data, header
   colours, spacing, scrolling and behaviour are unchanged. Screen only.
   ========================================================================== */
@media screen {
  :root{--tbl-box:#c9d3e0}
  body.dark-mode{--tbl-box:rgba(148,163,184,.30)}

  table:not(.reseller-table):not(.sa-users-table){border-collapse:collapse}
  table:not(.reseller-table):not(.sa-users-table) th,
  table:not(.reseller-table):not(.sa-users-table) td{
    border:1px solid var(--tbl-box) !important;
  }

  /* Tables that use separated rows/spacing: box each cell without changing spacing */
  table.reseller-table th,table.reseller-table td,
  table.sa-users-table th,table.sa-users-table td{
    border-style:solid !important;border-color:var(--tbl-box) !important;
    border-width:1px 1px 1px 0 !important;
  }
  table.reseller-table th:first-child,table.reseller-table td:first-child,
  table.sa-users-table th:first-child,table.sa-users-table td:first-child{border-left-width:1px !important}
  table.sa-users-table tbody td{border-top-width:0 !important}
}

/* ======================================================================
   GLOBAL CONTENT-AREA CONTAINMENT (v20)
   Shared safety rules for every page injected into #content-area. Keep the
   topbar/announcement region stationary while only the page viewport scrolls.
   ====================================================================== */
html, body {
    min-width: 0;
    max-width: 100%;
}

.app-container,
.app-container > .main-content,
.app-container > .main-content > #content-area {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

/* Topbar and notices remain in the fixed-height app shell, not in page scroll. */
.app-container > .main-content > .topbar {
    position: relative;
    top: auto;
    z-index: 120;
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
}

.app-container > .main-content > #content-area {
    position: relative;
    isolation: isolate;
    contain: layout style;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Keep nested grids/cards/forms inside the content viewport. Flex and grid
   children need min-width:0 or their intrinsic width can push the page out. */
#content-area :where(.row, .col, [class*="col-"], .card, .card-body,
    .form-group, .form-row, .d-flex, .modal-body, .tab-content,
    .tab-pane, .chart-container, .chart-wrapper, .table-responsive,
    .table-container) {
    min-width: 0;
    box-sizing: border-box;
}

#content-area :where(p, label, .form-text, .text-muted, .small,
    td, th, .nav-link, .card-title, .card-text, .alert, .badge) {
    overflow-wrap: anywhere;
}

/* Tables keep readable column widths and scroll within their own wrapper. */
#content-area :where(.table-responsive, .table-container, .audit-table-wrap,
    .bill-table-wrap, .clone-table-wrap, .crp-table-wrap, .gateway-table-wrap,
    .gateway-permission-table-wrap, .isp-detail-table-wrap, .netmap-table-wrap,
    .rr-table-wrap, .reseller-table-wrap, .sa-users-table-wrap, .sfh-table-wrap,
    .ss-auth-table-wrap, .ss-detail-table-wrap, .ss-network-table-wrap,
    .ss-table-wrap, .ss-ticket-table-wrap, .ssub-table-wrap, .uc-table-wrap,
    .ep-scroll, .ep-calendar-wrap) {
    display: block;
    max-width: 100%;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

#content-area table {
    max-width: none;
}

#content-area img, #content-area video, #content-area canvas, #content-area iframe {
    max-width: 100%;
}

/* Avoid page-level fixed/absolute children escaping the content area when
   common page wrappers are used; modals/popups remain governed by their own
   overlay rules and are intentionally excluded. */
#content-area > :where(.page-container, .page-wrapper, .page-content,
    .module-container, .feature-container, .content-wrapper) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .app-container > .main-content > .topbar {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
        gap: 8px;
    }
    .app-container > .main-content > #content-area {
        padding: 16px !important;
        width: 100%;
    }
    #content-area :where(.row, [class*="col-"], .d-flex) {
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .app-container > .main-content > #content-area {
        padding: 10px !important;
    }
    .app-container > .main-content > .topbar {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ==========================================================================
   MOBILE TABLE FIX
   Table cells used overflow-wrap:anywhere inside a width:100% table, so on
   phones every column was squeezed and text broke letter-by-letter. Tables now
   keep a readable minimum width and scroll sideways inside their wrapper.
   ========================================================================== */
#content-area :where(td, th) {
    overflow-wrap: normal;
    word-break: normal;
}
#content-area :where(.table-responsive, .table-container) > table {
    min-width: 680px;
}
#content-area table th {
    white-space: nowrap;
}
#content-area table td :where(.btn, button, .badge, .status-badge, [class*="badge"]) {
    white-space: nowrap;
}
#content-area table td a {
    overflow-wrap: anywhere; /* only long links/emails may break */
}