/**
 * Twenty-One Modern Corporate Theme Overrides
 * Design System: Corporate Minimalist / Modern SaaS
 * Stack: WHMCS Twenty-One (Bootstrap 4.5.3 + FontAwesome 5)
 * RTL / Persian & LTR Compatible
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   Design Tokens & CSS Variables
   ========================================================================== */
:root {
    /* Brand Colors */
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-active: #1e40af;
    --color-primary-light: rgba(37, 99, 235, 0.08);
    --color-primary-border: rgba(37, 99, 235, 0.18);

    /* Secondary & Accents */
    --color-secondary: #475569;
    --color-accent: #0284c7;
    --color-cta: #ea580c;

    /* Semantic States */
    --color-success: #10b981;
    --color-success-bg: rgba(16, 185, 129, 0.1);
    --color-success-border: rgba(16, 185, 129, 0.25);

    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-warning-border: rgba(245, 158, 11, 0.25);

    --color-danger: #ef4444;
    --color-danger-bg: rgba(239, 68, 68, 0.1);
    --color-danger-border: rgba(239, 68, 68, 0.25);

    --color-info: #0ea5e9;
    --color-info-bg: rgba(14, 165, 233, 0.1);
    --color-info-border: rgba(14, 165, 233, 0.25);

    /* Neutral & Backgrounds */
    --color-bg-page: #f8fafc;
    --color-bg-card: #ffffff;
    --color-bg-subtle: #f1f5f9;
    --color-text-main: #0f172a;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;
    --color-border: #e2e8f0;
    --color-border-subtle: #f1f5f9;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Elevation Shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 6px -1px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 8px 20px -3px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
    --shadow-lg: 0 16px 36px -6px rgba(15, 23, 42, 0.09), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    --shadow-hover: 0 14px 28px -4px rgba(37, 99, 235, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.04);

    /* Typography */
    --font-fa: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-en: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Global Reset & Typography
   ========================================================================== */
body {
    background-color: var(--color-bg-page) !important;
    color: var(--color-text-main);
    font-family: var(--font-fa);
    font-size: 14.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.primary-bg-color {
    background-color: var(--color-bg-page) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-fa);
    font-weight: 700;
    color: var(--color-text-main);
    letter-spacing: -0.01em;
}

a {
    color: var(--color-primary);
    transition: var(--transition-base);
}
a:hover {
    color: var(--color-primary-hover);
    text-decoration: none;
}

/* ==========================================================================
   RTL Specifications
   ========================================================================== */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: var(--font-fa);
}
html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }
html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }
html[dir="rtl"] .float-left { float: right !important; }
html[dir="rtl"] .float-right { float: left !important; }
html[dir="rtl"] .dropdown-menu { text-align: right; }
html[dir="rtl"] .dropdown-menu-right { right: auto !important; left: 0 !important; }
html[dir="rtl"] .input-group > .input-group-prepend > .input-group-text,
html[dir="rtl"] .input-group > .input-group-prepend > .btn {
    border-top-right-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0 !important;
}
html[dir="rtl"] .input-group > .form-control:not(:first-child) {
    border-top-left-radius: var(--radius-md) !important;
    border-bottom-left-radius: var(--radius-md) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
#header {
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
    position: relative;
    z-index: 1000;
}

/* Topbar */
#header .topbar {
    background: #ffffff;
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 0.4rem 0;
    font-size: 13px;
}

#header .topbar .btn {
    font-size: 12.5px;
    padding: 0.3rem 0.75rem;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
}
#header .topbar .btn:hover {
    color: var(--color-primary);
    background: var(--color-bg-subtle);
}

/* Active Client Switcher Badge */
.active-client .input-group-text {
    background: transparent;
    border: none;
    font-size: 12px;
    color: var(--color-text-muted);
    padding: 0 0.5rem;
}
.btn-active-client {
    background: var(--color-bg-subtle) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-full) !important;
    color: var(--color-text-main) !important;
    font-weight: 600;
    font-size: 12.5px;
    padding: 0.25rem 0.85rem !important;
}
.btn-active-client:hover {
    border-color: var(--color-primary-border) !important;
    color: var(--color-primary) !important;
}

/* Navbar Brand & Logo */
#header .navbar {
    padding: 0.75rem 0;
}
#header .navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-text-main) !important;
    display: inline-flex;
    align-items: center;
}
#header .navbar-brand img {
    max-height: 38px;
    width: auto;
}

/* Search Input & Command Bar */
#header .navbar > .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
}

#header .search-form-header,
#header form.form-inline.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
    flex: 1 !important;
    max-width: 440px !important;
    display: flex !important;
    justify-content: center !important;
}

#header .search {
    display: flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 9999px !important;
    height: 42px !important;
    padding: 0 14px !important;
    transition: var(--transition-base) !important;
    width: 100% !important;
    max-width: 420px !important;
    position: relative !important;
}
#header .search:focus-within {
    background: #ffffff !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 2px 8px rgba(37, 99, 235, 0.08) !important;
}
#header .search .form-control {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    height: 100% !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    font-family: var(--font-fa) !important;
    color: var(--color-text-main) !important;
    outline: none !important;
    box-shadow: none !important;
}
#header .search .form-control::placeholder {
    color: #94a3b8 !important;
    font-size: 13px !important;
}
#header .search .input-group-append,
#header .search .input-group-prepend {
    margin: 0 !important;
}
#header .search .btn-search-submit,
#header .search .input-group-prepend .btn,
#header .search .input-group-append .btn {
    border: none !important;
    background: transparent !important;
    color: #94a3b8 !important;
    padding: 0 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    cursor: pointer;
    transition: color 0.15s ease;
}
#header .search:focus-within .btn-search-submit,
#header .search:focus-within .input-group-prepend .btn,
#header .search:focus-within .input-group-append .btn {
    color: var(--color-primary) !important;
}

.header-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 380px;
    height: 40px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 0 14px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.header-search-wrapper:focus-within {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 2px 8px rgba(37, 99, 235, 0.08);
}
.header-search-wrapper .search-icon {
    color: #94a3b8;
    font-size: 13px;
    margin-left: 10px;
    pointer-events: none;
    transition: color 0.2s;
}
.header-search-wrapper:focus-within .search-icon {
    color: #2563eb;
}
.header-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-family: var(--font-fa) !important;
    color: #0f172a !important;
    outline: none !important;
    box-shadow: none !important;
    height: 100% !important;
}
.header-search-input::placeholder {
    color: #94a3b8;
    font-size: 12.5px;
}
.search-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    pointer-events: none;
}

/* Header Top Actions & User Chip */
.topbar-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.topbar-action-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 14px;
    text-decoration: none !important;
    position: relative;
    transition: all 0.2s ease;
}
.topbar-action-btn:hover {
    color: #2563eb;
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.topbar-action-btn .notification-indicator {
    position: absolute;
    top: 7px;
    left: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    border: 1.5px solid #ffffff;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}
.topbar-divider {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    margin: 0 4px;
}
.user-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 3px 12px 3px 4px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    text-decoration: none !important;
    color: #0f172a;
    transition: all 0.2s ease;
}
.user-chip-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.user-avatar-gradient {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    flex-shrink: 0;
}
.user-chip-info {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.2;
}
.user-chip-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
}
.user-chip-role {
    font-size: 10.5px;
    color: #64748b;
    font-weight: 500;
}
.user-chip-chevron {
    font-size: 10px;
    color: #94a3b8;
    transition: color 0.2s;
}
.user-chip-btn:hover .user-chip-chevron {
    color: #2563eb;
}

/* ==========================================================================
   Main Navigation Bar (.main-navbar-wrapper) - Modern Corporate SaaS
   ========================================================================== */
.main-navbar-wrapper {
    background: #ffffff !important;
    border-top: 1px solid var(--color-border-subtle) !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    padding: 0 !important;
}
.main-navbar-wrapper .navbar-nav,
.main-navbar-wrapper #nav,
#nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0.35rem 0 !important;
    margin: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
}
.main-navbar-wrapper .navbar-nav > li,
.main-navbar-wrapper #nav > li,
#nav > li,
.main-navbar-wrapper li {
    position: relative;
    list-style: none !important;
    list-style-type: none !important;
}
.main-navbar-wrapper .navbar-nav > li::before,
.main-navbar-wrapper #nav > li::before,
#nav > li::before {
    content: none !important;
    display: none !important;
}
.main-navbar-wrapper .navbar-nav > li > a,
.main-navbar-wrapper .navbar-nav .nav-link,
.main-navbar-wrapper #nav > li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    padding: 0.55rem 0.85rem !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    line-height: 1.4 !important;
    position: relative;
}
.main-navbar-wrapper .navbar-nav > li > a:hover,
.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper #nav > li > a:hover {
    color: var(--color-primary) !important;
    background-color: var(--color-primary-light) !important;
}
.main-navbar-wrapper .navbar-nav > li.active > a,
.main-navbar-wrapper .navbar-nav > li.active .nav-link,
.main-navbar-wrapper .navbar-nav > li > a.active,
.main-navbar-wrapper #nav > li.active > a {
    color: var(--color-primary) !important;
    background-color: rgba(37, 99, 235, 0.08) !important;
    font-weight: 700 !important;
}

/* Modern Clean CSS-Border Dropdown Caret (Guaranteed render on all browsers/devices) */
.main-navbar-wrapper .navbar-nav > li > a.dropdown-toggle::after,
.main-navbar-wrapper .navbar-nav .dropdown-toggle::after,
.main-navbar-wrapper #nav > li > a.dropdown-toggle::after {
    display: inline-block !important;
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    border: solid #64748b !important;
    border-width: 0 1.5px 1.5px 0 !important;
    transform: rotate(45deg) !important;
    margin-right: 6px !important;
    margin-left: 0 !important;
    margin-bottom: 2px !important;
    vertical-align: middle !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}
.main-navbar-wrapper .navbar-nav > li.show > a.dropdown-toggle::after,
.main-navbar-wrapper .navbar-nav > li:hover > a.dropdown-toggle::after,
.main-navbar-wrapper #nav > li.show > a.dropdown-toggle::after {
    border-color: var(--color-primary) !important;
    transform: rotate(-135deg) !important;
    margin-bottom: -2px !important;
}

/* Modern Floating Dropdown Menu Card */
.main-navbar-wrapper .dropdown-menu {
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05) !important;
    padding: 6px !important;
    background: #ffffff !important;
    min-width: 210px !important;
    margin-top: 6px !important;
    animation: fadeInDownMenu 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInDownMenu {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
html[dir="rtl"] .main-navbar-wrapper .dropdown-menu {
    text-align: right !important;
}
.main-navbar-wrapper .dropdown-item,
.main-navbar-wrapper .dropdown-menu > li > a {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    padding: 0.5rem 0.85rem !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}
.main-navbar-wrapper .dropdown-item:hover,
.main-navbar-wrapper .dropdown-item:focus,
.main-navbar-wrapper .dropdown-menu > li > a:hover {
    background-color: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
    transform: translateX(-3px);
}
.main-navbar-wrapper .dropdown-item i,
.main-navbar-wrapper .dropdown-menu > li > a i {
    font-size: 13px !important;
    color: #64748b !important;
    transition: color 0.15s ease;
}
.main-navbar-wrapper .dropdown-item:hover i,
.main-navbar-wrapper .dropdown-menu > li > a:hover i {
    color: var(--color-primary) !important;
}
.main-navbar-wrapper .dropdown-divider {
    border-top: 1px solid var(--color-border-subtle) !important;
    margin: 4px 0 !important;
}

/* ==========================================================================
   Corporate Wallet Widget
   ========================================================================== */
.wallet-nav-item {
    display: flex;
    align-items: center;
}
.wallet-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.85rem !important;
    border-radius: var(--radius-full) !important;
    background: #ffffff !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-main) !important;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-base);
}
.wallet-btn:hover {
    border-color: var(--color-primary-border) !important;
    background: var(--color-primary-light) !important;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.wallet-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 14px;
}
.wallet-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}
.wallet-label {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 500;
}
.wallet-balance {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-main);
    font-family: var(--font-fa);
}
/* Shopping Cart Toolbar Button */
header.header .toolbar .nav-link.cart-btn,
.cart-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-full) !important;
    border: 1px solid var(--color-border) !important;
    background: #ffffff !important;
    color: var(--color-text-muted) !important;
    position: relative !important;
    overflow: visible !important; /* Prevents .btn overflow:hidden from clipping badge */
    transition: var(--transition-base);
}
header.header .toolbar .nav-link.cart-btn:hover,
.cart-btn:hover {
    color: var(--color-primary) !important;
    border-color: var(--color-primary-border) !important;
    background: #f8fafc !important;
}
header.header .toolbar .nav-link.cart-btn i,
.cart-btn i {
    font-size: 15px !important;
    color: var(--color-text-muted) !important;
    position: static !important;
}
header.header .toolbar .nav-link.cart-btn:hover i,
.cart-btn:hover i {
    color: var(--color-primary) !important;
}

/* Badge placed outside in top corner without covering the cart */
header.header .toolbar .nav-link.cart-btn .badge,
.cart-btn .badge-info,
#cartItemCount {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    left: auto !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    background: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 9999px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 14px !important;
    display: inline-flex; /* Normal display so .d-none can hide it */
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.35) !important;
    opacity: 1 !important;
    z-index: 10 !important;
    pointer-events: none;
}

/* Ensure empty or zero cart badge is 100% hidden */
#cartItemCount.d-none,
.cart-btn .badge.d-none,
#cartItemCount:empty,
.cart-btn .badge:empty {
    display: none !important;
}

/* ==========================================================================
   Breadcrumb & Page Header
   ========================================================================== */
.master-breadcrumb {
    background: transparent;
    padding: 1.25rem 0 0.5rem;
}
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: 13px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
}
/* Modern crisp CSS-rendered Chevron for Breadcrumb (Zero font dependency, 100% reliable) */
.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block !important;
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    border: solid #94a3b8 !important;
    border-width: 0 1.5px 1.5px 0 !important;
    transform: rotate(-45deg) !important; /* LTR pointing right */
    margin: 0 10px !important;
    padding: 0 !important;
    vertical-align: middle !important;
    float: none !important;
}
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    transform: rotate(135deg) !important; /* RTL pointing left */
    border-color: #94a3b8 !important;
}
.breadcrumb-item a {
    color: var(--color-text-muted);
}
.breadcrumb-item a:hover {
    color: var(--color-primary);
}
.breadcrumb-item.active {
    color: var(--color-text-main);
    font-weight: 600;
}

/* ==========================================================================
   Dashboard Bento Tiles (.tiles .tile) - Inspired by Modern CloudOcean / XBOARD
   ========================================================================== */
.tiles {
    margin-bottom: 2rem;
}
.tiles .row {
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}
.tiles [class*="col-"] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    margin-bottom: 1rem;
}
.tiles .tile {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
        "title icon"
        "stat  icon" !important;
    align-items: center !important;
    gap: 0.15rem 1rem !important;
    background: #ffffff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.15rem 1.35rem !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    transition: var(--transition-base) !important;
    position: relative !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 98px !important;
    text-decoration: none !important;
}
.tiles .tile:hover {
    transform: translateY(-3px);
    border-color: rgba(37, 99, 235, 0.3) !important;
    box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.08) !important;
}

/* Title Label - Top Left in LTR, Top Right in RTL */
.tiles .tile .title {
    grid-area: title !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--color-text-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-align: right !important;
    display: block !important;
}

/* Stat Number - Bottom Left in LTR, Bottom Right in RTL */
.tiles .tile .stat {
    grid-area: stat !important;
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    color: var(--color-text-main) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-fa) !important;
    text-align: right !important;
    display: block !important;
}

/* 3D-Style Icon Container - Spans both rows on the other side */
.tiles .tile i,
.tiles .tile > i {
    grid-area: icon !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 52px !important;
    height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    font-size: 1.35rem !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: var(--transition-base) !important;
}

.tiles .tile:hover i,
.tiles .tile:hover > i {
    transform: scale(1.08) rotate(-3deg);
}

/* 3D Gradient Icon Variations inspired by modern hosting themes */
/* 1. Services - 3D Blue / Cyan Stack */
.tiles .col-6:nth-child(1) .tile i,
.tiles .col-6:nth-child(1) .tile > i {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
    color: #0284c7 !important;
    border: 1px solid #7dd3fc !important;
    box-shadow: 0 4px 14px -2px rgba(2, 132, 199, 0.25) !important;
}
/* 2. Domains - 3D Emerald / Teal Bullseye */
.tiles .col-6:nth-child(2) .tile i,
.tiles .col-6:nth-child(2) .tile > i {
    background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%) !important;
    color: #0d9488 !important;
    border: 1px solid #5eead4 !important;
    box-shadow: 0 4px 14px -2px rgba(13, 148, 136, 0.25) !important;
}
/* 3. Tickets - 3D Violet / Purple Help */
.tiles .col-6:nth-child(3) .tile i,
.tiles .col-6:nth-child(3) .tile > i {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
    color: #7c3aed !important;
    border: 1px solid #c4b5fd !important;
    box-shadow: 0 4px 14px -2px rgba(124, 58, 237, 0.25) !important;
}
/* 4. Invoices - 3D Amber / Gold Coins */
.tiles .col-6:nth-child(4) .tile i,
.tiles .col-6:nth-child(4) .tile > i {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    color: #d97706 !important;
    border: 1px solid #fcd34d !important;
    box-shadow: 0 4px 14px -2px rgba(217, 119, 6, 0.25) !important;
}

/* Disable old bottom color bar */
.tiles .tile .highlight {
    display: none !important;
}

/* ==========================================================================
   Welcome Header & Page Greeting
   ========================================================================== */
.welcome-header {
    margin-bottom: 1.75rem;
}
.welcome-header h2,
.welcome-header .welcome-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}
.welcome-header .welcome-breadcrumb {
    font-size: 13px;
    color: var(--color-text-muted);
}
.welcome-header .welcome-breadcrumb a {
    color: var(--color-text-muted);
}
.welcome-header .welcome-breadcrumb a:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   Active Products & Services Table/List (Inspiration Pattern)
   ========================================================================== */
.product-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--color-border-subtle);
    transition: var(--transition-base);
}
.product-row:last-child {
    border-bottom: none;
}
.product-row:hover {
    background: var(--color-bg-subtle);
}
.product-badge-active {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    text-transform: uppercase;
}
.btn-cpanel {
    background: #f1f5f9 !important;
    border: 1px solid var(--color-border) !important;
    color: #334155 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.35rem 0.85rem !important;
    transition: var(--transition-base);
}
.btn-cpanel:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Promo Banner Widget */
.promo-widget {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.25rem;
    text-align: center;
    margin-top: 1.5rem;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}
.promo-widget .promo-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15);
    color: var(--color-primary);
    font-size: 1.75rem;
}
.promo-widget h5 {
    font-size: 14.5px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 0.4rem;
}
.promo-widget p {
    font-size: 12.5px;
    color: #3b82f6;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* ==========================================================================
   Cards & Containers
   ========================================================================== */
.card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: var(--transition-base);
}
.card:hover {
    box-shadow: var(--shadow-md);
}
.card-header {
    background: #ffffff;
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 1.1rem 1.4rem;
    font-size: 15px;
    font-weight: 700;
}
.card-header .card-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-body {
    padding: 1.4rem;
}
.card-footer {
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border-subtle);
    padding: 0.9rem 1.4rem;
}

/* Remove dated thick accent headers */
.card[class*="card-accent-"] {
    border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   Tables & Data Presentation
   ========================================================================== */
.table {
    color: var(--color-text-main);
    margin-bottom: 0;
}
.table thead th {
    background-color: var(--color-bg-page);
    border-top: none;
    border-bottom: 1px solid var(--color-border);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}
.table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-top: 1px solid var(--color-border-subtle);
    font-size: 13.5px;
}
.table-hover tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.02);
}

/* Status Badges */
.badge {
    padding: 0.35rem 0.65rem;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1;
}
.badge-success, .status-active, .status-paid {
    background-color: var(--color-success-bg) !important;
    color: #065f46 !important;
    border: 1px solid var(--color-success-border);
}
.badge-warning, .status-pending {
    background-color: var(--color-warning-bg) !important;
    color: #92400e !important;
    border: 1px solid var(--color-warning-border);
}
.badge-danger, .status-unpaid, .status-cancelled, .status-terminated {
    background-color: var(--color-danger-bg) !important;
    color: #991b1b !important;
    border: 1px solid var(--color-danger-border);
}
.badge-info {
    background-color: var(--color-info-bg) !important;
    color: #075985 !important;
    border: 1px solid var(--color-info-border);
}
.badge-secondary, .status-closed {
    background-color: var(--color-bg-subtle) !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-border);
}

/* ==========================================================================
   Buttons & Forms
   ========================================================================== */
.btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 13.5px;
    padding: 0.55rem 1.15rem;
    transition: var(--transition-base);
    box-shadow: none !important;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(1px);
}
.btn-primary {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
    border: 1px solid var(--color-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}
.btn-primary:hover {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-active) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
}
.btn-primary:focus, .btn-primary.focus {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-active) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.35) !important;
}
.btn-outline-primary {
    border: 1px solid var(--color-border) !important;
    color: var(--color-primary) !important;
    background: #ffffff !important;
}
.btn-outline-primary:hover {
    background: var(--color-primary-light) !important;
    border-color: var(--color-primary-border) !important;
    color: var(--color-primary-hover) !important;
}
.btn-default, .btn-secondary {
    background: #ffffff !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-main) !important;
}
.btn-default:hover, .btn-secondary:hover {
    background: var(--color-bg-subtle) !important;
    border-color: #cbd5e1 !important;
    color: var(--color-text-main) !important;
}

/* Success Buttons - Modern Emerald Harmony */
.btn-success {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
    border: 1px solid #059669 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
}
.btn-success:hover, .btn-success:focus, .btn-success.focus {
    background: #059669 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
}
.btn-success:active, .btn-success.active {
    background: #047857 !important;
    border-color: #065f46 !important;
    color: #ffffff !important;
}

/* Info & Warning & Danger Buttons Modernization */
.btn-info {
    background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
    border: 1px solid #0369a1 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important;
}
.btn-info:hover {
    background: #0369a1 !important;
    border-color: #075985 !important;
    color: #ffffff !important;
}
.btn-warning {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
    border: 1px solid #d97706 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25) !important;
}
.btn-warning:hover {
    background: #d97706 !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
}
.btn-danger {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
    border: 1px solid #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
}
.btn-danger:hover {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

/* Sidebar Action Buttons Unified with Theme Palette */
.sidebar .btn-success,
.sidebar .card-body .btn-success,
.sidebar div[menuitemname="Client Details"] .btn,
.sidebar .btn-action {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
    border: 1px solid var(--color-primary-hover) !important;
    color: #ffffff !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
    transition: var(--transition-base) !important;
}
.sidebar .btn-success:hover,
.sidebar .card-body .btn-success:hover,
.sidebar div[menuitemname="Client Details"] .btn:hover,
.sidebar .btn-action:hover {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-active) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
}

/* ==========================================================================
   Form Controls, Inputs, and Selects
   ========================================================================== */
.form-control,
.custom-select,
select.form-control {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-border) !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0.45rem 0.95rem !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    font-family: var(--font-fa) !important;
    color: var(--color-text-main) !important;
    background-color: #ffffff;
    box-sizing: border-box !important;
    transition: var(--transition-base);
}

textarea.form-control {
    height: auto !important;
    min-height: 100px !important;
    padding: 0.75rem 0.95rem !important;
    line-height: 1.6 !important;
}

.form-control:focus,
.custom-select:focus,
select.form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    background-color: #ffffff !important;
    outline: none !important;
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
    background-color: #f8fafc !important;
    color: #64748b !important;
    opacity: 1 !important;
    cursor: not-allowed;
    border-color: #e2e8f0 !important;
}

/* RTL Select Dropdowns */
html[dir="rtl"] .custom-select,
html[dir="rtl"] select.form-control {
    background-position: left 0.85rem center !important;
    padding-left: 2.2rem !important;
    padding-right: 0.95rem !important;
}

/* Form Labels */
.form-group label,
.form-control-label,
.col-form-label {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--color-text-main) !important;
    margin-bottom: 0.35rem !important;
    padding-top: 0 !important;
    display: inline-block;
}

/* RTL Form Checks & Radios */
html[dir="rtl"] .form-check,
html[dir="rtl"] .controls.form-check {
    padding-right: 1.75rem !important;
    padding-left: 0 !important;
    margin-bottom: 0.6rem;
}
html[dir="rtl"] .form-check-input {
    margin-right: -1.75rem !important;
    margin-left: 0 !important;
    margin-top: 0.25rem !important;
}
html[dir="rtl"] .controls.form-check label {
    font-weight: 400 !important;
    font-size: 13.5px !important;
    color: var(--color-text-main) !important;
    cursor: pointer;
    line-height: 1.8 !important;
}

/* ==========================================================================
   Prepend-Icon & International Telephone Input Fixes (RTL & Modern SaaS)
   ========================================================================== */
.form-group.prepend-icon,
#registration .prepend-icon {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 1.25rem !important;
}

/* Base input styling for prepend-icon containers */
.form-group.prepend-icon .field,
.form-group.prepend-icon .form-control,
#registration .prepend-icon .field,
#registration .prepend-icon .form-control {
    height: 46px !important;
    min-height: 46px !important;
    line-height: 46px !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-border) !important;
    padding-left: 14px !important;
    padding-right: 44px !important; /* Space for the right-hand icon in RTL */
    font-size: 14px !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    display: block !important;
}

/* When in LTR, icon is on the left */
html[dir="ltr"] .form-group.prepend-icon .field,
html[dir="ltr"] .form-group.prepend-icon .form-control,
html[dir="ltr"] #registration .prepend-icon .field,
html[dir="ltr"] #registration .prepend-icon .form-control {
    padding-left: 44px !important;
    padding-right: 14px !important;
}

/* Icon positioning in RTL */
.form-group.prepend-icon .field-icon,
#registration .prepend-icon .field-icon {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 44px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    margin: 0 !important;
    line-height: normal !important;
}

html[dir="ltr"] .form-group.prepend-icon .field-icon,
html[dir="ltr"] #registration .prepend-icon .field-icon {
    right: auto !important;
    left: 0 !important;
}

.form-group.prepend-icon .field-icon i,
#registration .prepend-icon .field-icon i {
    font-size: 15px !important;
}

/* Focus styles */
.form-group.prepend-icon:focus-within .field,
.form-group.prepend-icon:focus-within .form-control,
#registration .prepend-icon:focus-within .field,
#registration .prepend-icon:focus-within .form-control {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}
.form-group.prepend-icon:focus-within .field-icon,
#registration .prepend-icon:focus-within .field-icon {
    color: var(--color-primary) !important;
}

/* --------------------------------------------------------------------------
   International Telephone Input (.intl-tel-input) Clean SaaS Layout
   -------------------------------------------------------------------------- */
.intl-tel-input {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

/* Phone input styling (both in prepend-icon and standalone) */
.intl-tel-input input,
.intl-tel-input input.field,
.intl-tel-input input.form-control,
.form-group.prepend-icon .intl-tel-input input {
    height: 46px !important;
    min-height: 46px !important;
    line-height: normal !important;
    width: 100% !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-border) !important;
    font-size: 14px !important;
    direction: ltr !important; /* Phone numbers must type left-to-right */
    text-align: left !important;
    background-color: #ffffff !important;
}

/* Positioning of flag container and country dropdown */
.intl-tel-input .flag-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    height: 100% !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
}

.intl-tel-input .selected-flag {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 12px !important;
    background: #f8fafc !important;
    border-right: 1px solid var(--color-border) !important;
    border-left: none !important;
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
    cursor: pointer !important;
}

.intl-tel-input .selected-flag .selected-dial-code {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    direction: ltr !important;
}

.intl-tel-input .selected-flag .iti-arrow {
    border-top-color: #64748b !important;
    margin-top: 0 !important;
}

/* Input padding to prevent text overlapping flag & icons */
.intl-tel-input.allow-dropdown input,
.intl-tel-input.separate-dial-code input,
.intl-tel-input.allow-dropdown input.field,
.intl-tel-input.separate-dial-code input.field {
    padding-left: 92px !important; /* Reserve space for flag + dial code (+98) */
    padding-right: 44px !important; /* Reserve space for telephone icon on right */
}

/* When not inside prepend-icon (no right icon) */
.intl-tel-input:not(.inside-prepend) input:not(.has-right-icon) {
    padding-right: 14px !important;
}

/* Country dropdown list */
.intl-tel-input .country-list {
    border-radius: var(--radius-md) !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15) !important;
    border: 1px solid var(--color-border) !important;
    z-index: 100 !important;
    max-height: 240px !important;
    direction: ltr !important;
    text-align: left !important;
}

.intl-tel-input .country-list .country {
    padding: 8px 12px !important;
    font-size: 13px !important;
}

.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.highlight {
    background-color: #f1f5f9 !important;
}

/* ==========================================================================
   Sidebar Navigation (.sidebar)
   ========================================================================== */
.sidebar .card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
}
.sidebar .card-header {
    background: #ffffff;
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 0.9rem 1.25rem;
}
.sidebar .card-header .card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-main);
}
.sidebar .list-group-item {
    border: none;
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 0.75rem 1.25rem;
    font-size: 13.5px;
    color: var(--color-text-muted);
    font-weight: 500;
    transition: var(--transition-base);
}
.sidebar .list-group-item:last-child {
    border-bottom: none;
}
.sidebar .list-group-item:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    padding-left: 1.45rem;
}
html[dir="rtl"] .sidebar .list-group-item:hover {
    padding-left: 1.25rem;
    padding-right: 1.45rem;
}
.sidebar .list-group-item.active {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 700;
    border-color: transparent;
}

/* ==========================================================================
   Homepage Quick Actions & Services
   ========================================================================== */
.action-icon-btns a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    color: var(--color-text-main);
    font-weight: 600;
    font-size: 13.5px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    text-align: center;
    margin-bottom: 1rem;
}
.action-icon-btns a:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
}
.action-icon-btns .ico-container {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 0.85rem;
    transition: var(--transition-base);
}
.action-icon-btns a:hover .ico-container {
    background: var(--color-primary);
    color: #ffffff;
}

/* ==========================================================================
   Footer
   ========================================================================== */
#footer {
    background: #ffffff;
    border-top: 1px solid var(--color-border);
    padding: 2.5rem 0 2rem;
    margin-top: 3.5rem;
    color: var(--color-text-muted);
    font-size: 13.5px;
}
#footer .nav-link {
    color: var(--color-text-muted);
    font-weight: 500;
    padding: 0.4rem 0.8rem;
}
#footer .nav-link:hover {
    color: var(--color-primary);
}
#footer .btn {
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: #ffffff;
    color: var(--color-text-main);
    font-size: 12.5px;
    padding: 0.35rem 0.85rem;
}
#footer .btn:hover {
    background: var(--color-bg-subtle);
}
#footer .copyright {
    color: var(--color-text-light);
    font-size: 12.5px;
}

/* ==========================================================================
   Responsive Adjustments (Mobile, Tablet, Laptop)
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Critical Content Reordering: Show main dashboard content FIRST, sidebar SECOND */
    .main-content > .container > .row,
    section#main-body > .container > .row,
    .primary-content-wrapper > .row {
        display: flex !important;
        flex-direction: column !important;
    }
    .primary-content,
    .col-lg-8.col-xl-9,
    .col-md-9 {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .sidebar,
    .col-lg-4.col-xl-3,
    .col-md-3 {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-top: 1.5rem !important;
    }

    /* Mobile Hamburger Menu Drawer */
    .main-navbar-wrapper {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
    .main-navbar-wrapper .navbar-collapse:not(.show) {
        display: none !important;
    }
    .main-navbar-wrapper .navbar-collapse.show {
        display: block !important;
        background: #ffffff !important;
        border: 1px solid var(--color-border) !important;
        border-radius: 16px !important;
        box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.14) !important;
        padding: 0.85rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 1rem !important;
        animation: slideDownNav 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes slideDownNav {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .main-navbar-wrapper .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .main-navbar-wrapper .navbar-nav > li {
        width: 100% !important;
    }
    .main-navbar-wrapper .navbar-nav > li > a,
    .main-navbar-wrapper .navbar-nav .nav-link {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.75rem 1rem !important;
        border-radius: 10px !important;
        border: 1px solid #f1f5f9 !important;
        background: #ffffff !important;
        color: var(--color-text-main) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        margin: 0 !important;
        transition: all 0.2s ease !important;
    }
    .main-navbar-wrapper .navbar-nav > li > a:hover,
    .main-navbar-wrapper .navbar-nav .nav-link:hover,
    .main-navbar-wrapper .navbar-nav > li.show > a {
        background: var(--color-primary-light) !important;
        border-color: var(--color-primary-border) !important;
        color: var(--color-primary) !important;
    }
    .main-navbar-wrapper .navbar-nav > li > a.dropdown-toggle::after {
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    /* Submenu Accordion inside Mobile Drawer */
    .main-navbar-wrapper .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
        background: #f8fafc !important;
        border-radius: 10px !important;
        padding: 6px !important;
        margin: 4px 0 8px !important;
        display: none !important;
        animation: none !important;
    }
    .main-navbar-wrapper li.dropdown.show > .dropdown-menu {
        display: block !important;
    }
    .main-navbar-wrapper .dropdown-menu .dropdown-item,
    .main-navbar-wrapper .dropdown-menu > li > a {
        padding: 0.6rem 0.85rem !important;
        font-size: 13px !important;
        color: #475569 !important;
        border-radius: 8px !important;
        margin-bottom: 2px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    .main-navbar-wrapper .dropdown-menu .dropdown-item:hover,
    .main-navbar-wrapper .dropdown-menu > li > a:hover {
        background: #ffffff !important;
        color: var(--color-primary) !important;
        transform: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    }

    /* Harmonized 40x40 Mobile Toolbar Buttons */
    .mobile-nav-toggle,
    .btn-navbar-toggle,
    header.header .toolbar .nav-link.cart-btn,
    .cart-btn,
    .wallet-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 10px !important;
        border: 1px solid var(--color-border) !important;
        background: #ffffff !important;
        color: var(--color-text-main) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer;
        font-size: 15px !important;
        transition: var(--transition-base);
        padding: 0 !important;
        overflow: visible !important;
    }
    .mobile-nav-toggle:hover,
    .mobile-nav-toggle:focus,
    .btn-navbar-toggle:hover,
    .btn-navbar-toggle:focus,
    header.header .toolbar .nav-link.cart-btn:hover,
    .wallet-btn:hover {
        border-color: var(--color-primary-border) !important;
        color: var(--color-primary) !important;
        background: var(--color-primary-light) !important;
    }
    .wallet-btn .wallet-icon {
        background: transparent !important;
        width: auto !important;
        height: auto !important;
    }
}

@media (max-width: 767.98px) {
    /* Compact Topbar on Mobile */
    #header .topbar {
        padding: 0.35rem 0 !important;
        font-size: 11.5px !important;
        border-bottom: 1px solid var(--color-border-subtle) !important;
    }
    #header .topbar .btn {
        font-size: 11.5px !important;
        padding: 2px 6px !important;
    }
    #header .topbar .btn-active-client span {
        max-width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: middle;
    }

    /* Breadcrumbs on Mobile */
    .master-breadcrumb {
        padding: 0.5rem 0 0.25rem !important;
    }
    .master-breadcrumb .breadcrumb {
        padding: 0.25rem 0 !important;
        font-size: 12px !important;
    }

    /* Metric Bento Tiles - 2x2 Grid */
    .tiles [class*="col-"] {
        padding-right: 0.35rem;
        padding-left: 0.35rem;
        margin-bottom: 0.7rem !important;
    }
    .tiles .tile {
        padding: 0.85rem 0.95rem !important;
        min-height: 84px !important;
        gap: 0.15rem 0.65rem !important;
        border-radius: 12px !important;
    }
    .tiles .tile i,
    .tiles .tile > i {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
        border-radius: 10px !important;
    }
    .tiles .tile .stat {
        font-size: 1.55rem !important;
    }
    .tiles .tile .title {
        font-size: 12px !important;
    }
    .welcome-header h2,
    .welcome-header .welcome-title {
        font-size: 1.45rem !important;
    }
    .wallet-copy {
        display: none !important;
    }

    /* Responsive DataTables / WHMCS List Tables: Convert to Cards */
    .dataTables_wrapper table.table,
    .table-responsive > table.table,
    table.table-list {
        display: block !important;
        width: 100% !important;
        border: none !important;
        overflow-x: visible !important;
    }
    .dataTables_wrapper table.table thead,
    .table-responsive > table.table thead,
    table.table-list thead {
        display: none !important;
    }
    .dataTables_wrapper table.table tbody,
    .table-responsive > table.table tbody,
    table.table-list tbody {
        display: block !important;
        width: 100% !important;
    }
    .dataTables_wrapper table.table tr,
    .table-responsive > table.table tr,
    table.table-list tr {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-lg) !important;
        padding: 0.85rem 1rem !important;
        margin-bottom: 0.75rem !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }
    .dataTables_wrapper table.table td,
    .table-responsive > table.table td,
    table.table-list td {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.35rem 0 !important;
        border: none !important;
        font-size: 13px !important;
        text-align: right !important;
    }
    .dataTables_wrapper table.table td:first-child,
    .table-responsive > table.table td:first-child,
    table.table-list td:first-child {
        font-weight: 700 !important;
        font-size: 14px !important;
        color: var(--color-text-main) !important;
        border-bottom: 1px solid var(--color-border-subtle) !important;
        padding-bottom: 0.45rem !important;
        margin-bottom: 0.35rem !important;
    }
}

@media (max-width: 575.98px) {
    /* Prevent page horizontal overflow */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Mobile Header Layout */
    #header .navbar .container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }
    #header .navbar-brand {
        font-size: 1.05rem !important;
        margin-right: 0 !important;
        margin-left: 0.5rem !important;
    }
    #header .navbar-brand img {
        max-height: 32px !important;
    }
    #header .navbar-nav.toolbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
    }
    #header .navbar-nav.toolbar .nav-item {
        margin: 0 !important;
    }

    /* Fix Title and Icon Collisions across all Card Headers */
    .card-header .card-title,
    .client-home-cards .card-header .card-title,
    .sidebar .card-header .card-title {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: var(--color-text-main) !important;
        line-height: 1.4 !important;
    }
    .card-header .card-title i,
    .client-home-cards .card-header .card-title i,
    .sidebar .card-header .card-title i {
        font-size: 15px !important;
        color: var(--color-primary) !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    /* Stack Domain Search input & buttons on Mobile */
    div[menuitemname="Register a New Domain"] .input-group,
    .client-home-cards form .input-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    div[menuitemname="Register a New Domain"] .input-group > .form-control,
    .client-home-cards form .input-group > .form-control {
        width: 100% !important;
        height: 44px !important;
        border-radius: var(--radius-md) !important;
    }
    div[menuitemname="Register a New Domain"] .input-group-append,
    .client-home-cards form .input-group-append {
        width: 100% !important;
        display: flex !important;
        gap: 0.5rem !important;
        margin: 0 !important;
    }
    div[menuitemname="Register a New Domain"] .input-group-append .btn,
    .client-home-cards form .input-group-append .btn {
        flex: 1 !important;
        height: 44px !important;
        border-radius: var(--radius-md) !important;
        justify-content: center !important;
    }

    /* Clean Card Bodies & Footers */
    .client-home-cards .card-body p {
        color: var(--color-text-muted) !important;
        font-size: 13px !important;
        line-height: 1.7 !important;
        padding: 1rem 1.15rem !important;
        margin: 0 !important;
        text-align: center !important;
    }
    .client-home-cards .card-footer {
        background: #f8fafc !important;
        border-top: 1px solid var(--color-border-subtle) !important;
        padding: 0.75rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    .client-home-cards .card-footer a {
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: var(--color-primary) !important;
        text-decoration: none !important;
    }

    /* Sidebar buttons styling */
    .sidebar .btn-success,
    .sidebar div[menuitemname="Client Details"] .btn {
        background: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #ffffff !important;
        border-radius: var(--radius-md) !important;
        font-weight: 600 !important;
        font-size: 13.5px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
    }
    .sidebar .btn-success:hover {
        background: var(--color-primary-dark) !important;
        border-color: var(--color-primary-dark) !important;
    }

    /* Hero Banner Mobile Optimization */
    .hero-banner {
        padding: 2rem 1.15rem !important;
        border-radius: 18px !important;
        margin-bottom: 1.5rem !important;
    }
    .hero-banner h1,
    .hero-banner .hero-title {
        font-size: 1.35rem !important;
        line-height: 1.45 !important;
        margin-bottom: 0.65rem !important;
    }
    .hero-banner p {
        font-size: 12.5px !important;
        line-height: 1.6 !important;
        margin-bottom: 1.25rem !important;
    }
    .hero-domain-search {
        display: flex !important;
        flex-direction: column !important;
        padding: 6px !important;
        background: #ffffff !important;
        border-radius: 14px !important;
        gap: 8px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    }
    .hero-domain-search .form-control {
        width: 100% !important;
        font-size: 13px !important;
        padding: 0.65rem 0.85rem !important;
        text-align: center !important;
        height: 44px !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
    }
    .hero-domain-search .btn,
    .hero-domain-search button[type="submit"] {
        width: 100% !important;
        border-radius: 10px !important;
        padding: 0.65rem 1rem !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        height: 44px !important;
    }

    /* Action Icon Buttons on Mobile */
    .action-icon-btns {
        margin-top: 1rem !important;
        margin-bottom: 2rem !important;
    }
    .action-icon-btns [class*="col-"] {
        padding-right: 0.35rem !important;
        padding-left: 0.35rem !important;
        margin-bottom: 0.7rem !important;
    }
    .action-icon-btns a {
        padding: 1.15rem 0.5rem !important;
        min-height: 110px !important;
        border-radius: 14px !important;
        justify-content: center !important;
    }
    .action-icon-btns .ico-container {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.15rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 10px !important;
    }
    .action-icon-btns a span {
        font-size: 12px !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
    }

    /* Metric Bento Tiles */
    .tiles .tile {
        padding: 0.75rem 0.85rem !important;
        min-height: 80px !important;
        gap: 0.1rem 0.5rem !important;
        border-radius: 12px !important;
    }
    .tiles .tile i,
    .tiles .tile > i {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
    }
    .tiles .tile .stat {
        font-size: 1.35rem !important;
    }
    .tiles .tile .title {
        font-size: 11px !important;
    }

    /* Product Rows */
    .product-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        padding: 0.85rem 1rem !important;
    }
    .product-row > div:first-child {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    .product-row > div:last-child {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    .btn-cpanel {
        font-size: 11.5px !important;
        padding: 0.3rem 0.65rem !important;
    }
    .ticket-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.4rem !important;
    }
    .ticket-item .badge-open,
    .ticket-item .badge-closed {
        align-self: flex-start !important;
    }

    /* General Cards & Tables */
    .card {
        border-radius: 14px !important;
        margin-bottom: 1.15rem !important;
    }
    .card-header {
        padding: 0.85rem 1rem !important;
    }
    .card-header.d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.65rem !important;
    }
    .card-header.d-flex > .btn,
    .card-header.d-flex > a.btn {
        width: 100% !important;
        justify-content: center !important;
        display: inline-flex !important;
        text-align: center !important;
    }
    .card-body {
        padding: 1rem !important;
    }
    .table thead th {
        padding: 0.65rem 0.75rem !important;
        font-size: 11.5px !important;
    }
    .table tbody td {
        padding: 0.75rem !important;
        font-size: 12.5px !important;
    }
}

/* ==========================================================================
   Modern Empty State Cards (UX Pro Max Bento Standard)
   ========================================================================== */
.empty-state-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 3.5rem 2rem 2.5rem;
    margin: 1.5rem auto 2.5rem;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
    position: relative;
    overflow: hidden;
}

.empty-state-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb 0%, #0284c7 50%, #10b981 100%);
}

.empty-state-icon {
    width: 84px;
    height: 84px;
    line-height: 84px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(2, 132, 199, 0.15) 100%);
    color: var(--color-primary);
    font-size: 38px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px -4px rgba(37, 99, 235, 0.15);
}

.empty-state-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.empty-state-desc {
    font-size: 14.5px;
    color: var(--color-text-muted);
    max-width: 580px;
    margin: 0 auto 1.75rem;
    line-height: 1.7;
}

.empty-state-actions {
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.empty-state-btn {
    padding: 0.75rem 2rem !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    min-height: 48px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.empty-state-btn:hover {
    transform: translateY(-2px);
}

.empty-state-features {
    border-top: 1px solid var(--color-border-subtle);
}

.empty-feature-box {
    background: #f8fafc;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all 0.2s ease;
    height: 100%;
}

.empty-feature-box:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.empty-feature-box .feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--color-primary);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}

.empty-feature-box h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 0.35rem;
}

.empty-feature-box p {
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin-bottom: 0;
    line-height: 1.5;
}

@media (max-width: 575.98px) {
    .empty-state-card {
        padding: 2.25rem 1.25rem 1.5rem;
        border-radius: 16px;
    }
    .empty-state-icon {
        width: 68px;
        height: 68px;
        font-size: 30px;
    }
    .empty-state-title {
        font-size: 17px;
    }
    .empty-state-desc {
        font-size: 13.5px;
    }
    .empty-state-btn {
        width: 100% !important;
    }
}

/* ==========================================================================
   Services Table - Invoice Download Actions
   ========================================================================== */
.invoice-action-cell {
    white-space: nowrap;
    vertical-align: middle !important;
}

.invoice-action-cell .btn-group {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-sm);
    display: inline-flex;
}

.invoice-action-cell .btn {
    font-size: 12px;
    padding: 0.3rem 0.65rem;
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
    transition: all 0.2s ease-in-out;
}

.invoice-action-cell .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.invoice-action-cell .btn-download-invoice {
    font-weight: 500;
}

.invoice-action-cell .btn-outline-warning {
    color: #b45309;
    border-color: #fde68a;
    background-color: #fffbeb;
}

.invoice-action-cell .btn-outline-warning:hover {
    background-color: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}