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

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
@import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700");

:root {
    /* Brand Palette */
    --zc-primary: #13458f;
    --zc-primary-dark: #13458f;
    --zc-primary-light: #645ce1;
    --zc-primary-xlight: #ECEBFE;
    --zc-primary-xxlight: rgba(80, 70, 229, 0.08);
    --zc-primary-middle: #8A82F0;
    --zc-secondary: #13458f;
    --zc-secondary-light: #CFFAFE;
    --zc-secondary-xlight: #ECFEFF;
    /* Semantic Colours */
    --zc-success: #10B981;
    --zc-success-light: #D1FAE5;
    --zc-warning: #F59E0B;
    --zc-warning-light: #FEF3C7;
    --zc-danger: #EF4444;
    --zc-danger-light: #FEE2E2;
    --zc-info: #3B82F6;
    --zc-info-light: #DBEAFE;
    --zc-white: #FFFFFF;
    --zc-google: #4285F4;
    --zc-gpt: #10A37F;
    --zc-claude: #CC785c;
    --zc-cyan: #0891B2;
    --zc-pink: #EC4899;
    --zc-pink-dark: #BE185D;
    --zc-orange: #D97706;
    --zc-blue: #13458f;
    /* Sidebar — light, unlike the typical dark-navy admin sidebar */
    --zc-sidebar-bg: #FFFFFF;
    --zc-sidebar-bg-2: #F7F7FC;
    --zc-sidebar-hover: rgba(80, 70, 229, 0.07);
    --zc-sidebar-active-bg: rgba(80, 70, 229, 0.12);
    --zc-sidebar-active-border: #5046E5;
    --zc-sidebar-text: #55596B;
    --zc-sidebar-text-active: #111827;
    --zc-sidebar-text-muted: #9CA3AF;
    --zc-sidebar-section-color: #A1A1B0;
    --zc-sidebar-border: rgba(15, 15, 35, 0.07);
    --zc-dark-surface: #0F0F23;
    --zc-dark-surface-2: #1E1B4B;
    --zc-on-dark-text: #F9FAFB;
    --zc-on-dark-text-muted: rgba(255, 255, 255, 0.65);
    --zc-sidebar-width: 265px;
    --zc-sidebar-width-collapsed: 72px;
    /* Layout */
    --zc-topbar-height: 64px;
    --zc-body-bg: #F4F6FA;
    --zc-card-bg: #FFFFFF;
    --zc-border-color: #E5E7EB;
    --zc-border-light: #F3F4F6;
    /* Text */
    --zc-text-primary: #111827;
    --zc-text-secondary: #6B7280;
    --zc-text-muted: #4a5565;
    --text-inverse: #FFFFFF;
    /* Shadows */
    --zc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --zc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --zc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --zc-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.04);
    --zc-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.08);
    --zc-shadow-ai: 0 4px 20px rgba(80, 70, 229, 0.20);
    --zc-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    /* Border Radii */
    --zc-radius-xs: 4px;
    --zc-radius-sm: 6px;
    --zc-radius-md: 8px;
    --zc-radius-lg: 12px;
    --zc-radius-xl: 16px;
    --zc-radius-2xl: 20px;
    --zc-radius-3xl: 24px;
    --zc-radius-pill: 100px;
    /* Typography — fonts */
    /* Typography — fonts */
    --zc-font-sans: "Roboto", sans-serif;
    --zc-font-mono: "Roboto", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --zc-fs-2xs: 10px;
    --zc-fs-xs: 12px;
    --zc-fs-sm: 13px;
    --zc-fs-base: 14px;
    --zc-fs-md: 15px;
    --zc-fs-lg: 16px;
    --zc-fs-xl: 18px;
    --zc-fs-2xl: 21px;
    --zc-fs-3xl: 26px;
    --zc-fs-4xl: 28px;
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
    /* Chart container heights */
    --zc-chart-h-xs: 160px;
    --zc-chart-h-sm: 200px;
    --zc-chart-h-md: 220px;
    --zc-chart-h-lg: 280px;
    --zc-chart-h-xl: 340px;
    --zc-chart-h-xxl: 430px;
}

/* Spin animation for loader icons */
.lucide-spin {
    animation: iconSpin 0.8s linear infinite;
    display: inline-block;
}

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

/* ============================================================
   02. BASE & RESET
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 15px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--zc-font-sans) !important;
    font-size: 15px;
    font-weight: 300 !important;
    line-height: 1.6;
    color: var(--zc-text-primary);
    background-color: var(--zc-body-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: var(--zc-primary);
    transition: color var(--transition-fast);
}

    a:hover {
        color: var(--zc-primary-dark);
    }

img {
    max-width: 100%;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

p:last-child {
    margin-bottom: 0;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--zc-border-color);
    border-radius: var(--zc-radius-pill);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--zc-text-muted);
    }

/* ============================================================
   03. TYPOGRAPHY & UTILITIES
   ============================================================ */

/* Heading scale — uses CSS variables for easy global resizing */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--zc-font-sans);
    font-weight: 600;
    line-height: 1.3;
    color: var(--zc-text-primary);
    margin-bottom: 0;
}

h1 {
    font-size: var(--zc-fs-4xl);
    font-weight: 800;
}

h2 {
    font-size: var(--zc-fs-3xl);
    font-weight: 700;
}

h3 {
    font-size: var(--zc-fs-2xl);
    font-weight: 700;
}

h4 {
    font-size: var(--zc-fs-xl);
    font-weight: 600;
}

h5 {
    font-size: var(--zc-fs-lg);
    font-weight: 600;
}

h6 {
    font-size: var(--zc-fs-md);
    font-weight: 600;
}

/* Page-level labels */
.page-title {
    font-size: var(--zc-fs-2xl);
    font-weight: 700;
    color: var(--zc-text-primary);
}

.page-subtitle {
    font-size: 14px;
    color: var(--zc-text-secondary);
    margin-top: 3px;
}

.section-title {
    font-size: var(--zc-fs-md);
    font-weight: 600;
    color: var(--zc-text-primary);
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--zc-text-primary);
}

.label-text {
    font-size: var(--zc-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--zc-text-muted);
}

/* Font-size utilities — map to scale variables */
.text-3xs {
    font-size: var(--zc-fs-2xs) !important;
}

.text-xs {
    font-size: var(--zc-fs-xs) !important;
}

.text-sm {
    font-size: var(--zc-fs-sm) !important;
}

.text-base {
    font-size: var(--zc-fs-md) !important;
}

.text-lg {
    font-size: var(--zc-fs-lg) !important;
}

.text-xl {
    font-size: var(--zc-fs-xl) !important;
}

.text-2xl {
    font-size: var(--zc-fs-2xl) !important;
}

.text-3xl {
    font-size: var(--zc-fs-3xl) !important;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-22 {
    font-size: 22px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-12-5 {
    font-size: 12.5px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-11 {
    font-size: 11px !important;
}

.fs-10 {
    font-size: 10px !important;
}

.fs-9 {
    font-size: 9px !important;
}

.p-32 {
    padding: 32px;
}

.pt-50 {
    padding-top: 50px !important;
}

.text-inverse {
    color: var(--text-inverse) !important;
}

.text-muted {
    color: var(--zc-text-muted) !important;
}

.text-secondary-c {
    color: var(--zc-text-secondary) !important;
}

.text-dark-muted {
    color: var(--zc-on-dark-text-muted) !important;
}

.text-primary-c {
    color: var(--zc-primary) !important;
}


.text-zentic-secondary {
    color: var(--zc-secondary) !important;
}

.text-success-c {
    color: var(--zc-success) !important;
}

.text-danger-c {
    color: var(--zc-danger) !important;
}

.text-warning-c {
    color: var(--zc-warning) !important;
}

.text-primary-dark-c {
    color: var(--zc-primary-dark) !important;
}

.text-primary-light-c {
    color: var(--zc-primary-light) !important;
}

.text-info-c {
    color: var(--zc-info) !important;
}

.text-google-c {
    color: var(--zc-google) !important;
}

.text-gpt-c {
    color: var(--zc-gpt) !important;
}

.text-claude-c {
    color: var(--zc-claude) !important;
}

.text-pink-c {
    color: var(--zc-pink) !important;
}


.text-cyan-c {
    color: var(--zc-cyan) !important;
}

.text-orange-dark-c {
    color: var(--zc-orange) !important;
}

.text-success-dark-c {
    color: #059669 !important;
}

.text-blue-dark-c {
    color: var(--zc-blue) !important;
}

.text-purple-dark-c {
    color: var(--zc-primary-dark) !important;
}

.text-pink-dark-c {
    color: var(--zc-primary-dark) !important;
}

.text-underline {
    text-decoration: underline;
}

.text-inherit {
    color: inherit !important;
}

.bg-primary-c {
    background-color: var(--zc-primary) !important;
}

.zentic-bg-primary {
    background-color: var(--zc-primary);
}

.zentic-bg-primary-xlight {
    background-color: var(--zc-primary-xlight);
}

.zentic-bg-secondary {
    background-color: var(--zc-secondary);
}

.zentic-bg-success {
    background-color: var(--zc-success);
}

.zentic-bg-danger {
    background-color: var(--zc-danger);
}

.zentic-bg-warning {
    background-color: var(--zc-warning);
}

.zentic-bg-gradient {
    background: linear-gradient(135deg, var(--zc-primary-dark), var(--zc-primary));
}

.mark,
mark {
    background: rgba(80, 70, 229, 0.15);
    color: var(--zc-primary);
    padding: 1px 3px;
    border-radius: 2px;
}

.mono {
    font-family: var(--zc-font-mono);
}

.gap-xs {
    gap: 4px;
}

.gap-sm {
    gap: 8px;
}

.gap-md {
    gap: 12px;
}

.gap-lg {
    gap: 16px;
}

.gap-xl {
    gap: 24px;
}

.flex-1 {
    flex: 1;
    min-width: 0;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.h-260,
.h-240,
.h-220,
.h-180,
.h-300 {
    position: relative;
    width: 100%;
    min-width: 0;
}

    .h-260 canvas,
    .h-240 canvas,
    .h-220 canvas,
    .h-180 canvas,
    .h-300 canvas {
        max-width: 100%;
    }

.h-400 {
    height: 400px;
}

.h-260 {
    height: 260px;
}

.h-240 {
    height: 240px;
}

.h-220 {
    height: 220px;
}

.h-180 {
    height: 180px;
}

.pointer {
    cursor: pointer;
}

.divider {
    border: 0;
    border-top: 1px solid var(--zc-border-color);
    margin: 0;
}

.zentic-border-bottom {
    border-bottom: 1px solid var(--zc-border-light);
}

.zentic-border-top {
    border-top: 1px solid var(--zc-border-light)
}

.zentic-border-light {
    border-color: var(--zc-border-light);
}

.zentic-border-radius-md {
    border-radius: var(--zc-radius-md) !important;
}

.zentic-border-radius-lg {
    border-radius: var(--zc-radius-lg) !important;
}

.zentic-border-radius-xl {
    border-radius: var(--zc-radius-xl) !important;
}

.zentic-border-radius-pill {
    border-radius: var(--zc-radius-pill) !important;
}

@media(max-width:480px) {
    .flex-1 {
        flex: auto;
    }
}

/* Gradient text helper */
.gradient-text {
    background: var(--zc-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   04. LAYOUT STRUCTURE
   ============================================================ */
.zentic-wrapper {
    display: flex;
    min-height: 100vh;
}

.zentic-main {
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    /*margin-left: var(--zc-sidebar-width);*/
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition-base);
}

    .zentic-main.sidebar-collapsed {
        margin-left: var(--zc-sidebar-width-collapsed);
    }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    backdrop-filter: blur(2px);
}

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

/* ============================================================
   05. SIDEBAR
   ============================================================ */
.zentic-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--zc-sidebar-width);
    height: 100vh;
    background: var(--zc-sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow: hidden;
    transition: width var(--transition-base), transform var(--transition-base);
    border-right: 1px solid var(--zc-sidebar-border);
    box-shadow: 1px 0 0 rgba(15, 15, 35, 0.02), 4px 0 24px rgba(15, 15, 35, 0.03);
}

/* Brand */
.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--zc-sidebar-border);
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    outline: none;
}

.brand-text {
    overflow: hidden;
}

.brand-name {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--zc-sidebar-text-active);
    white-space: nowrap;
}

    .brand-name.black {
        color: var(--zc-text-primary);
    }

    .brand-name span {
        color: var(--zc-primary-light);
    }

.brand-tag {
    display: block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--zc-sidebar-text-muted);
    white-space: nowrap;
    margin-top: 1px;
}

.sidebar-close-btn {
    background: none;
    border: none;
    color: var(--zc-sidebar-text);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: var(--zc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

    .sidebar-close-btn:hover {
        background: var(--zc-sidebar-hover);
        color: var(--zc-sidebar-text-active);
    }

/* AI Status Bar */
.sidebar-ai-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(80, 70, 229, 0.08);
    border-bottom: 1px solid var(--zc-sidebar-border);
    flex-shrink: 0;
}

.ai-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--zc-success);
    box-shadow: 0 0 6px var(--zc-success);
    flex-shrink: 0;
    animation: aiPulse 2s ease-in-out infinite;
}

.ai-status-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--zc-primary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
}

.ai-status-indicator {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

    .ai-status-indicator span {
        display: block;
        width: 3px;
        background: var(--zc-primary-light);
        border-radius: 2px;
        opacity: 0.6;
        animation: aiBar 1.2s ease-in-out infinite;
    }

        .ai-status-indicator span:nth-child(1) {
            height: 5px;
            animation-delay: 0s;
        }

        .ai-status-indicator span:nth-child(2) {
            height: 10px;
            animation-delay: 0.2s;
        }

        .ai-status-indicator span:nth-child(3) {
            height: 7px;
            animation-delay: 0.4s;
        }

/* Navigation */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0 20px;
}

    .sidebar-nav::-webkit-scrollbar {
        width: 3px;
    }

    .sidebar-nav::-webkit-scrollbar-thumb {
        background: rgba(15, 15, 35, 0.12);
    }

.nav-section {
    padding: 0 10px;
    margin-bottom: 4px;
}

.nav-section-arrow {
    font-size: 12px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.nav-section.collapsed .nav-section-arrow {
    transform: rotate(-90deg);
}

.nav-section.collapsed .nav-list {
    display: none;
}

.zentic-sidebar.collapsed .nav-section-arrow {
    display: none;
}

.nav-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-item {
    margin-bottom: 1px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px !important;
    border-radius: var(--zc-radius-sm);
    color: var(--zc-sidebar-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    position: relative;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

    .nav-link:hover,
    .nav-link:focus {
        background: var(--zc-sidebar-hover);
        color: var(--zc-sidebar-text-active);
    }

    .nav-link.active {
        /* background: linear-gradient(135deg, var(--zc-primary) 0%, var(--zc-primary-dark) 100%); */
        background: #13458f;
        color: #fff !important;
        /* box-shadow: 0 4px 14px rgba(80, 70, 229, 0.35); */
    }

        .nav-link.active .nav-icon {
            color: #fff;
        }

.zentic-card-header .btn.btn-primary {
    background: #13458f !important;
    border-color: #13458f box-shadow: none !important;
}

.nav-icon,
i.nav-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    line-height: normal;
}

.nav-text {
    flex: 1;
    padding-left: 6px;
}

.nav-count {
    background: var(--zc-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--zc-radius-pill);
    flex-shrink: 0;
    margin-bottom: auto;
    min-width: 20px;
    height: 20px;
}

.nav-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--zc-radius-pill);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-badge {
    background: var(--zc-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(80, 70, 229, 0.35);
}

.new-badge {
    background: var(--zc-success);
    color: #fff;
}

/* Dropdown Nav */
.nav-dropdown-toggle {
    cursor: pointer;
}

.nav-dropdown-arrow {
    font-size: 10px;
    margin-left: auto;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.has-dropdown.open > .nav-dropdown-toggle .nav-dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    display: none;
    padding: 2px 0 2px 26px;
    margin: 0;
    list-style: none;
}

.has-dropdown.open > .nav-dropdown-menu {
    display: block;
}

.nav-sublink {
    padding: 7px 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--zc-radius-sm);
    color: var(--zc-sidebar-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    position: relative;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

a.nav-sublink.active {
    background: linear-gradient(135deg, var(--zc-primary) 0%, var(--zc-primary-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(80, 70, 229, 0.35);
}

.nav-sub-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zc-sidebar-section-color);
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.nav-sublink:hover .nav-sub-dot,
.nav-sublink.active .nav-sub-dot {
    background: var(--zc-primary-light);
}

/* Sidebar User */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--zc-sidebar-border);
    flex-shrink: 0;
    cursor: pointer;
    transition: background var(--transition-fast);
    position: relative;
}

    .sidebar-user:hover {
        background: var(--zc-sidebar-hover);
    }

.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.sidebar-user-info {
    flex: 1;
    overflow: hidden;
}

.sidebar-user-name {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--zc-sidebar-text-active);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    display: block;
    font-size: 10.5px;
    color: var(--zc-sidebar-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-settings {
    background: none;
    border: none;
    padding: 4px 6px;
    color: var(--zc-sidebar-text-muted);
    cursor: pointer;
    font-size: 14px;
    border-radius: var(--zc-radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
    line-height: 1;
}

    .sidebar-user-settings:hover {
        color: var(--zc-sidebar-text-active);
        background: rgba(15, 15, 35, 0.06);
    }

/* Collapsed Sidebar */
.zentic-sidebar.collapsed {
    width: var(--zc-sidebar-width-collapsed);
}

    .zentic-sidebar.collapsed .brand-text,
    .zentic-sidebar.collapsed .ai-status-text,
    .zentic-sidebar.collapsed .ai-status-indicator,
    .zentic-sidebar.collapsed .nav-section-label,
    .zentic-sidebar.collapsed .nav-text,
    .zentic-sidebar.collapsed .nav-count,
    .zentic-sidebar.collapsed .nav-badge,
    .zentic-sidebar.collapsed .nav-dropdown-arrow,
    .zentic-sidebar.collapsed .sidebar-user-info,
    .zentic-sidebar.collapsed .sidebar-user-settings,
    .zentic-sidebar.collapsed .nav-dropdown-menu,
    .aichat-sidebar-collapsed .brand-text {
        display: none;
    }

    .zentic-sidebar.collapsed .sidebar-brand {
        padding: 13px 19px 13px;
    }

    .zentic-sidebar.collapsed .nav-section {
        padding: 0 8px;
    }

        /* Icon-only rail mode: section labels are hidden, so per-section
   collapse state is meaningless — always show every icon. */
        .zentic-sidebar.collapsed .nav-section.collapsed .nav-list {
            display: block;
        }

    .zentic-sidebar.collapsed .nav-link {
        padding: 10px;
        justify-content: center;
    }

        .zentic-sidebar.collapsed .nav-link::before {
            display: none;
        }

    .zentic-sidebar.collapsed .nav-icon {
        margin: 0;
        font-size: 16px;
    }

    .zentic-sidebar.collapsed .sidebar-user {
        padding: 14px;
        justify-content: center;
    }

    .zentic-sidebar.collapsed .sidebar-user-avatar {
        border: none;
    }

    .zentic-sidebar.collapsed .ai-status-dot {
        margin: 8px auto;
    }

    .zentic-sidebar.collapsed .sidebar-ai-status {
        justify-content: center;
        padding: 8px;
    }

/* ============================================================
   06. TOPBAR
   ============================================================ */
.zentic-topbar {
    position: sticky;
    top: 0;
    z-index: 500;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--zc-border-color);
    height: var(--zc-topbar-height);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    flex-shrink: 0;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.topbar-center {
    flex: 1;
    max-width: 420px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Hamburger */
.sidebar-toggle-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--zc-radius-sm);
    border: none;
    background: transparent;
    color: var(--zc-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

    .sidebar-toggle-btn:hover {
        background: var(--zc-border-light);
        color: var(--zc-text-primary);
    }

@media(max-width: 991px) {
    .sidebar-toggle-btn {
        width: 24px;
    }
}

/* Breadcrumb */
.topbar-breadcrumb .breadcrumb {
    margin: 0;
    padding: 0;
    background: none;
}

.topbar-breadcrumb .breadcrumb-item {
    font-size: 13px;
    color: var(--zc-text-muted);
}

    .topbar-breadcrumb .breadcrumb-item a {
        color: var(--zc-text-muted);
        text-decoration: none;
    }

        .topbar-breadcrumb .breadcrumb-item a:hover {
            color: var(--zc-primary);
        }

    .topbar-breadcrumb .breadcrumb-item.active {
        color: var(--zc-text-secondary);
        font-weight: 500;
    }

    .topbar-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        content: "/";
        color: var(--zc-border-color);
    }

.breadcrumb-item.active {
    color: var(--zc-text-muted);
}

/* Search */
.topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--zc-body-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-pill);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    padding: 6px 16px;
    color: var(--zc-text-secondary);
}

header .topbar-search {
    background: var(--zc-body-bg);
    padding: 7px 14px;
}

.topbar-search.box-white {
    background: var(--zc-white);
}

.topbar-search:focus-within {
    border-color: var(--zc-primary-light);
}

.search-icon {
    color: var(--zc-text-muted);
    font-size: 12px;
    flex-shrink: 0;
}

.search-input {
    background: none;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: var(--zc-font-sans);
    color: var(--zc-text-primary);
    flex: 1;
    min-width: 0;
}

    .search-input::placeholder {
        color: var(--zc-text-muted);
    }

.search-kbd {
    background: var(--zc-border-light);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xs);
    font-size: 10px;
    padding: 1px 5px;
    color: var(--zc-text-muted);
    font-family: var(--zc-font-mono);
    white-space: nowrap;
}

.topbar-btn-notification,
.topbar-btn-chat {
    position: relative;
}

.topbar-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: var(--zc-radius-sm);
    border: none;
    background: transparent;
    color: var(--zc-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

#dirIcon {
    display: inline-block;
    transition: transform var(--transition-fast);
}

html[dir="rtl"] #dirIcon {
    transform: scaleX(-1);
}

.topbar-btn:hover {
    background: var(--zc-border-light);
    color: var(--zc-text-primary);
}

.topbar-divider {
    width: 1px;
    height: 22px;
    background: var(--zc-border-color);
    flex-shrink: 0;
}

/* Notification Badge */
.notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zc-danger);
    border: 2px solid var(--zc-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
}

/* Notification Panel */
.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: 340px;
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 900;
    display: none;
    overflow: hidden;
    animation: fadeIn 0.15s ease;
}

    .notif-panel.open {
        display: block;
    }

.notif-bg {
    background: rgba(80, 70, 229, 0.03);
}

    .notif-bg .notif-icon {
        flex-shrink: 0;
        border-radius: var(--zc-radius-sm);
    }

.notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--zc-border-light);
}

    .notif-header h6 {
        font-size: 14px;
        font-weight: 600;
        margin: 0;
    }

.btn-text {
    background: none;
    border: none;
    font-size: 12px;
    color: var(--zc-primary);
    cursor: pointer;
    font-family: var(--zc-font-sans);
    font-weight: 600;
    padding: 0;
}

.notif-list {
    max-height: 320px;
    overflow-y: auto;
}

.notif-item {
    display: flex;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--zc-border-light);
    transition: background var(--transition-fast);
    cursor: pointer;
}

    .notif-item:hover {
        background: var(--zc-body-bg);
    }

    .notif-item.unread {
        background: rgba(80, 70, 229, 0.03);
    }

    .notif-item:last-child {
        border-bottom: none;
    }

.notif-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--zc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}

    .notif-icon.bg-primary {
        background: var(--zc-primary);
    }

    .notif-icon.bg-success {
        background: var(--zc-success);
    }

    .notif-icon.bg-warning {
        background: var(--zc-warning);
    }

    .notif-icon.bg-danger {
        background: var(--zc-danger);
    }

    .notif-icon.bg-info {
        background: var(--zc-info);
    }

.notif-content {
    flex: 1;
    min-width: 0;
}

.notif-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--zc-text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-desc {
    font-size: 13px;
    color: var(--zc-text-secondary);
    margin-bottom: 2px;
}

.notif-time {
    font-size: 12px;
    color: var(--zc-text-muted);
}

.notif-footer {
    padding: 10px 18px;
    border-top: 1px solid var(--zc-border-light);
    text-align: center;
}

    .notif-footer a {
        font-size: 12px;
        font-weight: 600;
        color: var(--zc-primary);
    }

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

.notif-footer-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--zc-text-secondary);
}

/* Notification Tabs */
.notif-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 14px 0;
    border-bottom: 1px solid var(--zc-border-light);
}

.notif-tab {
    background: none;
    border: none;
    font-family: var(--zc-font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--zc-text-secondary);
    padding: 6px 12px 10px;
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast);
}

    .notif-tab:hover {
        color: var(--zc-text-primary);
    }

    .notif-tab.active {
        color: var(--zc-primary);
    }

        .notif-tab.active::after {
            content: '';
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: -1px;
            height: 2px;
            background: var(--zc-primary);
            border-radius: 2px 2px 0 0;
        }

/* Notification request card */
.notif-request-actions {
    display: flex;
    gap: 8px;
    margin: 8px 0 4px;
}

.btn-notif-accept,
.btn-notif-decline {
    flex: 1;
    border: none;
    border-radius: var(--zc-radius-sm);
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--zc-font-sans);
    cursor: pointer;
}

.btn-notif-accept {
    background: var(--zc-primary);
    color: #fff;
}

.btn-notif-decline {
    background: var(--zc-body-bg);
    color: var(--zc-text-secondary);
    border: 1px solid var(--zc-border-color);
}

/* Notification attachment card */
.notif-attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--zc-body-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    padding: 8px 10px;
    margin: 4px 0;
    font-size: 12px;
}

    .notif-attachment i {
        color: var(--zc-success);
        font-size: 16px;
    }

    .notif-attachment span {
        font-weight: 600;
        color: var(--zc-text-primary);
        flex: 1;
    }

    .notif-attachment em {
        color: var(--zc-text-muted);
        font-style: normal;
    }

/* ============================================================
   Chat Quick Panel (topbar)
   ============================================================ */
.chat-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: 340px;
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 900;
    display: none;
    overflow: hidden;
    animation: fadeIn 0.15s ease;
}

    .chat-panel.open {
        display: block;
    }

.chat-panel-item {
    display: flex;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--zc-border-light);
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .chat-panel-item:hover {
        background: var(--zc-body-bg);
    }

    .chat-panel-item.unread {
        background: rgba(80, 70, 229, 0.03);
    }

    .chat-panel-item:last-child {
        border-bottom: none;
    }

.chat-panel-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.chat-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--zc-card-bg);
}

    .chat-status-dot.online {
        background: var(--zc-success);
    }

.chat-panel-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--zc-border-light);
}

.chat-panel-input {
    flex: 1;
    border: 1px solid var(--zc-border-color);
    background: var(--zc-body-bg);
    border-radius: var(--zc-radius-pill);
    padding: 8px 14px;
    font-size: 13px;
    font-family: var(--zc-font-sans);
    color: var(--zc-text-primary);
    outline: none;
}

    .chat-panel-input:focus {
        border-color: var(--zc-primary);
    }

.chat-panel-send {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--zc-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
}

/* User Dropdown */
.topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 0px 4px 6px;
    border-radius: var(--zc-radius-sm);
    transition: background var(--transition-fast);
    position: relative;
}


.topbar-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.topbar-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--zc-primary);
}

.topbar-user-arrow {
    font-size: 10px;
    color: var(--zc-text-muted);
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 900;
    display: none;
    overflow: hidden;
    animation: fadeIn 0.15s ease;
}

    .user-dropdown-menu.open {
        display: block;
    }

.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 13px;
    border-bottom: 1px solid var(--zc-border-light);
    background: linear-gradient(135deg, rgba(80, 70, 229, 0.06) 0%, transparent 100%);
}

.udm-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.udm-info {
    flex: 1;
    overflow: hidden;
}

.user-dropdown-header p {
    margin: 0;
}

.user-dropdown-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--zc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown-email {
    font-size: 13px;
    color: var(--zc-text-muted);
    margin-top: 1px !important;
}

.udm-body {
    padding: 6px;
}

.udm-upgrade {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px;
    padding: 10px 12px;
    border-radius: var(--zc-radius-sm);
    background: linear-gradient(135deg, var(--zc-primary), var(--zc-primary-dark));
    text-decoration: none;
    box-shadow: var(--zc-shadow-ai);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

    .udm-upgrade:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(80, 70, 229, 0.3);
    }

.udm-upgrade-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.udm-upgrade-info {
    flex: 1;
    min-width: 0;
}

.udm-upgrade-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-inverse);
    margin: 0;
}

.udm-upgrade-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    margin: 1px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.udm-upgrade-arrow {
    color: rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
    font-size: 13px;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--zc-text-secondary);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}

    .user-dropdown-item:hover {
        background: var(--zc-body-bg);
        color: var(--zc-text-primary);
    }

    .user-dropdown-item i {
        width: 16px;
        font-size: 14px;
        text-align: center;
        color: var(--zc-text-muted);
        flex-shrink: 0;
    }

    .user-dropdown-item span:first-of-type {
        flex: 1;
    }

.user-dropdown-divider {
    border: 0;
    border-top: 1px solid var(--zc-border-light);
    margin: 4px 0;
}

.user-dropdown-item.danger {
    color: var(--zc-danger);
}

    .user-dropdown-item.danger i {
        color: var(--zc-danger);
    }

    .user-dropdown-item.danger:hover {
        background: var(--zc-danger-light);
        color: var(--zc-danger);
    }

.udm-badge {
    background: var(--zc-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    line-height: 1.6;
    flex-shrink: 0;
}

/* ============================================================
   06B. BOOTSTRAP DROPDOWN — ZENTIC OVERRIDES
   Override Bootstrap's default dropdown to match Zentic's
   design system typography, colours, radius, and shadows.
   ============================================================ */
.dropdown-menu {
    font-family: var(--zc-font-sans);
    font-size: 13px;
    background-color: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.07);
    padding: 6px;
    min-width: 200px;
    animation: fadeIn 0.15s ease;
}

.dropdown-item {
    font-family: var(--zc-font-sans);
    font-size: 13px;
    color: var(--zc-text-secondary);
    border-radius: var(--zc-radius-sm);
    padding: 9px 10px;
    display: flex;
    align-items: center;
    transition: background var(--transition-fast), color var(--transition-fast);
    line-height: 1.4;
}

    .dropdown-item i {
        font-size: 13px;
        width: 16px;
        text-align: center;
        color: var(--zc-text-muted);
        flex-shrink: 0;
        transition: color var(--transition-fast);
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--zc-body-bg);
        color: var(--zc-text-primary);
    }

        .dropdown-item:hover i,
        .dropdown-item:focus i {
            color: var(--zc-primary);
        }

    .dropdown-item:active {
        background-color: var(--zc-primary-xlight);
        color: var(--zc-primary);
    }

    .dropdown-item.text-danger {
        color: var(--zc-danger);
    }

        .dropdown-item.text-danger i {
            color: var(--zc-danger);
        }

        .dropdown-item.text-danger:hover {
            background-color: var(--zc-danger-light);
            color: var(--zc-danger);
        }

.dropdown-divider {
    border-top: 1px solid var(--zc-border-light);
    margin: 4px 0;
    opacity: 1;
}

/* Dark theme */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--zc-card-bg);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--zc-text-primary);
}

/* ============================================================
   07. CONTENT AREA & FOOTER
   ============================================================ */
.zentic-content {
    flex: 1;
    padding: 24px;
}

.zentic-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--zc-border-color);
    background: var(--zc-card-bg);
    font-size: 14px;
    color: var(--zc-text-muted);
    flex-shrink: 0;
    font-weight: 500;
}

    .zentic-footer a {
        color: inherit;
        ;
    }

        .zentic-footer a:hover {
            color: var(--zc-primary);
        }

/* Search result tabs — override Bootstrap nav-tabs to match site btn-zentic style */
.search-nav-tabs {
    border-bottom: none;
    gap: 8px;
    flex-wrap: wrap;
}

    .search-nav-tabs .nav-link {
        display: inline-flex;
        align-items: center;
        transition: all var(--transition-fast);
        line-height: 1;
    }

        .search-nav-tabs .nav-link:hover,
        .search-nav-tabs .nav-link:focus {
            color: var(--zc-primary);
            border-color: var(--zc-border-color);
        }

        .search-nav-tabs .nav-link.active,
        .search-nav-tabs .nav-link:focus {
            background: var(--zc-primary) !important;
            color: #fff !important;
            border-color: var(--zc-primary) !important;
            box-shadow: 0 2px 8px rgba(80, 70, 229, 0.30);
        }

/* Pagination styled to match site */
.search-pagination .page-link {
    color: var(--zc-text-secondary);
    border-color: var(--zc-border-color);
    background: var(--zc-card-bg);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--zc-font-sans);
    padding: 6px 12px;
}

    .search-pagination .page-link:hover {
        color: var(--zc-primary);
        border-color: var(--zc-primary-light);
        background: var(--zc-body-bg);
    }

.search-pagination .page-item.active .page-link {
    background: var(--zc-primary);
    border-color: var(--zc-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(80, 70, 229, 0.25);
}

.search-pagination .page-item.disabled .page-link {
    opacity: 0.45;
    background: var(--zc-card-bg);
}

.sr-item a {
    text-decoration: none;
}

.sr-item .zentic-card {
    transition: border-color .15s;
    border-color: var(--zc-border-color);
}

    .sr-item .zentic-card:hover {
        border-color: var(--zc-primary);
    }

/* ============================================================
   08. PAGE HEADER
   ============================================================ */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ============================================================
   09. CARDS & PANELS
   ============================================================ */
.zentic-card {
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    box-shadow: var(--zc-shadow-card);
}

.zentic-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--zc-border-light);
    font-size: 15px;
}

.zentic-card-body {
    padding: 20px;
}

    .zentic-card-body:has(table) {
        overflow-x: auto;
    }

.zentic-card-body-sm {
    padding: 16px 20px;
}

.zentic-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--zc-border-light);
    background: var(--zc-body-bg);
    border-radius: 0 0 var(--zc-radius-xl) var(--zc-radius-xl);
}

/* ============================================================
   10. STAT WIDGETS
   ============================================================ */
.stat-card {
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    padding: 20px;
    box-shadow: var(--zc-shadow-card);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--zc-primary) 0%, var(--zc-secondary) 100%);
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--zc-shadow-md);
    }

        .stat-card:hover::before {
            opacity: 1;
        }

.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--zc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

    .stat-icon i,
    .header-icon i,
    .notif-icon i {
        font-size: 22px;
    }

.zentic-bg-purple {
    background: linear-gradient(135deg, var(--zc-primary-middle), var(--zc-primary));
    color: #fff;
    box-shadow: 0 4px 12px rgba(80, 70, 229, 0.35);
}

.zentic-bg-cyan {
    background: linear-gradient(135deg, #22D3EE, var(--zc-secondary));
    color: #fff;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35);
}

.zentic-bg-green {
    background: linear-gradient(135deg, #34D399, var(--zc-success));
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.zentic-bg-orange {
    background: linear-gradient(135deg, #FBBF24, var(--zc-warning));
    color: #fff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.zentic-bg-red {
    background: linear-gradient(135deg, #FB7185, var(--zc-danger));
    color: #fff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.zentic-bg-blue {
    background: linear-gradient(135deg, #60A5FA, var(--zc-info));
    color: #fff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.zentic-bg-light-purple {
    background: var(--zc-primary-xlight);
    color: var(--zc-primary);
}

.zentic-bg-light-cyan {
    background: var(--zc-secondary-xlight);
    color: var(--zc-cyan);
}

.zentic-bg-light-green {
    background: var(--zc-success-light);
    color: var(--zc-success);
}

.zentic-bg-light-orange {
    background: var(--zc-warning-light);
    color: var(--zc-orange);
}

.zentic-bg-light-red {
    background: var(--zc-danger-light);
    color: var(--zc-danger);
}

.stat-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--zc-text-primary);
    font-family: var(--zc-font-sans);
    letter-spacing: -0.5px;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 13px;
    color: var(--zc-text-muted);
    font-weight: 500;
}

.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: var(--zc-radius-pill);
    box-shadow: none;
}

@media(max-width: 576px) {

    .stat-icon i,
    .header-icon i,
    .notif-icon i {
        font-size: 18px;
    }

    .topbar-btn {
        width: 30px;
        height: 30px;
    }
}

/* ============================================================
   11. AI INSIGHT BANNER
   ============================================================ */
.ai-insight-banner {
    background: linear-gradient(135deg, var(--zc-primary-dark) 0%, #312E81 40%, #0F172A 100%);
    border-radius: var(--zc-radius-xl);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: var(--zc-shadow-ai);
}

    .ai-insight-banner::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
    }

    .ai-insight-banner::after {
        content: '';
        position: absolute;
        bottom: -50px;
        right: 100px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: rgba(6, 182, 212, 0.1);
    }

.ai-banner-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--zc-radius-sm);
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.ai-banner-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.ai-banner-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.ai-banner-text {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.75);
}

.ai-banner-action {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--zc-radius-pill);
    cursor: pointer;
    font-family: var(--zc-font-sans);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: background var(--transition-fast);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .ai-banner-action:hover {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
    }

.ai-banner-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    position: relative;
    z-index: 1;
    transition: color var(--transition-fast);
    flex-shrink: 0;
}

    .ai-banner-close:hover {
        color: #fff;
    }

.figure-bg {
    height: 120px;
    background: linear-gradient(135deg, var(--zc-primary), var(--zc-secondary));
    border-radius: var(--zc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .figure-bg i {
        font-size: 40px;
        color: rgba(255, 255, 255, 0.5);
    }

/* ============================================================
   12. DATA TABLES
   ============================================================ */
.zentic-table-wrapper {
    overflow-x: auto;
    border-radius: 0 0 var(--zc-radius-xl) var(--zc-radius-xl);
}

.zentic-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .zentic-table thead tr {
        border-bottom: 2px solid var(--zc-border-light);
    }

    .zentic-table thead th {
        padding: .7rem .6rem;
        text-align: left;
        font-size: 13px;
        font-weight: 600;
        text-transform: capitalize;
        color: var(--zc-text-muted);
        white-space: nowrap;
        background: var(--zc-body-bg);
    }

    .zentic-table tbody tr {
        border-bottom: 1px solid var(--zc-border-light);
        transition: background var(--transition-fast);
    }

        .zentic-table tbody tr:hover {
            background: var(--zc-body-bg);
        }

        .zentic-table tbody tr:last-child {
            border-bottom: none;
        }

    .zentic-table tbody td {
        padding: .7rem .6rem;
        font-size: 14px;
        color: var(--zc-text-primary);
        vertical-align: middle;
    }

        .zentic-table tbody td a {
            color: inherit;
            text-decoration: none !important;
        }

.table-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.gallery-pick-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    flex-shrink: 0;
}

.table-user-info {
    min-width: 0;
}

.table-user-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--zc-text-primary);
}

.table-user-email {
    display: block;
    font-size: 11px;
    color: var(--zc-text-muted);
}

/* Table Pagination & Footer */
.table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--zc-border-light);
    font-size: 12px;
    color: var(--zc-text-muted);
    background: var(--zc-card-bg);
    flex-wrap: wrap;
    gap: 8px;
    border-radius: 0 0 var(--zc-radius-xl) var(--zc-radius-xl);
}

.table-pagination {
    display: flex;
    gap: 4px;
}

.page-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--zc-radius-sm);
    border: 1px solid var(--zc-border-color);
    background: var(--zc-card-bg);
    font-size: 12px;
    font-weight: 500;
    color: var(--zc-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-family: var(--zc-font-sans);
}

    .page-btn:hover {
        background: var(--zc-body-bg);
        border-color: var(--zc-primary-light);
        color: var(--zc-primary);
    }

    .page-btn.active {
        background: var(--zc-primary);
        border-color: var(--zc-primary);
        color: #fff;
    }

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

/* ============================================================
   13. BUTTONS
   ============================================================ */
.btn-zentic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--zc-radius-sm);
    border: none;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--zc-font-sans);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

    .btn-zentic i {
        font-weight: 500;
    }

    .btn-zentic.btn-sm {
        font-size: 13px;
    }

    .btn-zentic.btn-xs {
        font-size: 12px;
    }

    .btn-zentic.btn-sm.tab-border {
        border: 1px solid var(--zc-border-color);
    }

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

.btn-primary {
    background: linear-gradient(135deg, var(--zc-primary-light) 0%, var(--zc-primary) 55%, var(--zc-primary-dark) 100%);
    color: #fff;
    /* box-shadow: 0 2px 8px rgba(80, 70, 229, 0.30); */
}

    .btn-primary:hover {
        background: linear-gradient(135deg, var(--zc-primary) 0%, var(--zc-primary-dark) 100%);
        color: #fff;
        /* box-shadow: 0 3px 6px rgba(80, 70, 229, 0.42); */
        /* transform: translateY(-1px); */
    }

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

    .btn-outline:hover {
        background: var(--zc-body-bg);
        border-color: var(--zc-primary-light);
        color: var(--zc-primary);
    }

.btn-outline-warning {
    background: transparent;
    color: var(--zc-warning);
    border: 1px solid var(--zc-border-color);
}

    .btn-outline-warning:hover {
        background: transparent;
        color: var(--zc-warning);
        border: 1px solid var(--zc-warning);
    }

.btn-outline-danger {
    background: transparent;
    color: var(--zc-danger);
    border: 1px solid var(--zc-border-color);
}

    .btn-outline-danger:hover {
        background: transparent;
        border-color: var(--zc-danger);
        color: var(--zc-danger);
    }

.btn-ghost {
    background: transparent;
    color: var(--zc-text-secondary);
    border: none;
}

    .btn-ghost:hover {
        background: var(--zc-border-light);
        color: var(--zc-text-primary);
    }

.btn-primary-ghost {
    background: transparent;
    color: var(--zc-primary);
    border-color: transparent;
}

    .btn-primary-ghost:hover {
        background: var(--zc-primary-xlight);
    }

.btn-danger {
    background: var(--zc-danger);
    color: #fff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

    .btn-danger:hover {
        background: #DC2626;
        color: #fff;
        transform: translateY(-1px);
    }

.btn-success {
    background: var(--zc-success);
    color: #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

    .btn-success:hover {
        background: #059669;
        color: #fff;
        transform: translateY(-1px);
    }

.btn-warning {
    background: var(--zc-warning);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

    .btn-warning:hover {
        background: var(--zc-orange);
        color: #fff;
    }

.btn-ai {
    background: var(--zc-primary);
    color: #fff;
    box-shadow: var(--zc-shadow-ai);
}

    .btn-ai:hover {
        box-shadow: 0 6px 20px rgba(80, 70, 229, 0.45);
        transform: translateY(-1px);
        color: #fff;
    }

.btn-white {
    background: var(--zc-white);
    color: var(--zc-text-secondary);
    border: 1px solid var(--zc-border-color);
}

    .btn-white:hover {
        background: var(--zc-white);
        border-color: var(--zc-primary-light);
        color: var(--zc-primary);
    }

.btn-sm {
    padding: 10px 12px;
    font-size: 12px;
    border-radius: var(--zc-radius-sm);
}

    .btn-sm.dropdown-toggle.dropdown-toggle-split {
        padding: 11px 12px;
    }

.btn-xs {
    padding: 6px 20px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 14px;
    border-radius: var(--zc-radius-xl);
}

.btn-icon {
    padding: 8px;
    width: 36px;
    height: 36px;
    justify-content: center;
}

    .btn-icon.btn-sm {
        width: 30px;
        height: 30px;
        padding: 6px;
    }

    .btn-icon.btn-lg {
        width: 44px;
        height: 44px;
        padding: 12px;
    }

.border-outline-danger {
    border-color: rgba(239, 68, 68, 0.3);
}

/* ============================================================
   14. BADGES & STATUS LABELS
   ============================================================ */
.badge-zentic {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--zc-radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

    .badge-zentic.badge-lg {
        padding: 8px 10px;
        width: max-content;
    }

.badge-purple {
    background: var(--zc-primary-xlight);
    color: var(--zc-primary);
}

.badge-cyan {
    background: var(--zc-secondary-xlight);
    color: var(--zc-cyan);
}

.badge-green {
    background: var(--zc-success-light);
    color: #065F46;
}

.badge-orange {
    background: var(--zc-warning-light);
    color: #92400E;
}

.badge-red {
    background: var(--zc-danger-light);
    color: #991B1B;
}

.badge-teal {
    background: #CCFBF1;
    color: #0F766E;
}

.badge-pink {
    background: #FCE7F3;
    color: #9D174D;
}

.prompt-preview {
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-blue {
    background: var(--zc-info-light);
    color: #1E40AF;
}

.badge-gray {
    background: var(--zc-border-light);
    color: var(--zc-text-secondary);
}

.badge-dark {
    background: #1F2937;
    color: var(--zc-on-dark-text);
}

.badge-dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ============================================================
   15. AVATARS & GROUPS
   ============================================================ */
.avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
}

.avatar-xs {
    width: 24px;
    height: 24px;
    font-size: 9px;
}

.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 11px;
}

.avatar-md {
    width: 38px;
    height: 38px;
    font-size: 12px;
}

.avatar-10 {
    width: 10px;
    height: 10px;
}

.avatar-12 {
    width: 12px;
    height: 12px;
}

.avatar-14 {
    width: 14px;
    height: 14px;
}

.avatar-28 {
    width: 28px;
    height: 28px;
}

.avatar-32 {
    width: 32px;
    height: 32px;
}

.avatar-36 {
    width: 36px;
    height: 36px;
}

.avatar-40 {
    width: 40px;
    height: 40px;
}

.avatar-44 {
    width: 44px;
    height: 44px;
}

.avatar-48 {
    width: 48px;
    height: 48px;
}

.avatar-52 {
    width: 52px;
    height: 52px;
}

.avatar-56 {
    width: 56px;
    height: 56px;
}

.avatar-64 {
    width: 64px;
    height: 64px;
}

.avatar-72 {
    width: 72px;
    height: 72px;
}

.avatar-80 {
    width: 80px;
    height: 80px;
}

.avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

.avatar-xl {
    width: 64px;
    height: 64px;
    font-size: 20px;
}

.avatar-2xl {
    width: 80px;
    height: 80px;
    font-size: 26px;
}

.avatar-group {
    display: flex;
}

    .avatar-group .avatar {
        border: 2px solid var(--zc-card-bg);
        margin-left: -8px;
    }

        .avatar-group .avatar:first-child {
            margin-left: 0;
        }

/* ============================================================
   16. FORM ELEMENTS
   ============================================================ */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--zc-text-secondary);
    margin-bottom: 6px;
}

    .form-label .required {
        color: var(--zc-danger);
        margin-left: 2px;
    }

.form-control-zentic {
    width: 100%;
    padding: 6px 13px;
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    font-size: 14px;
    font-family: var(--zc-font-sans);
    color: var(--zc-text-primary);
    background: var(--zc-card-bg);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .form-control-zentic::placeholder,
    .form-control::placeholder {
        color: var(--zc-text-muted);
    }

.form-select:focus {
    box-shadow: none;
}

.form-control-zentic:focus {
    border-color: var(--zc-primary-light);
}

.form-control-zentic:disabled {
    background: var(--zc-border-light);
    opacity: 0.7;
    cursor: not-allowed;
}

.form-control-zentic.is-invalid {
    border-color: var(--zc-danger);
}

.form-control-zentic.is-valid {
    border-color: var(--zc-success);
}

.form-select-zentic {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
    cursor: pointer;
}

.mark-att-select {
    width: auto;
    display: inline-block;
}

textarea.form-control-zentic {
    resize: vertical;
    min-height: 90px;
}

.form-hint {
    font-size: 11.5px;
    color: var(--zc-text-muted);
    margin-top: 4px;
}

.form-hint-danger {
    height: 3px;
    flex: 1;
    border-radius: 2px;
    background: var(--zc-danger);
}

.form-hint-warning {
    height: 3px;
    flex: 1;
    border-radius: 2px;
    background: var(--zc-warning);
}

.form-hint-border {
    height: 3px;
    flex: 1;
    border-radius: 2px;
    background: var(--zc-border-color);
}

.form-error {
    font-size: 11.5px;
    color: var(--zc-danger);
    margin-top: 4px;
}

/* Input Group */
.input-group-zentic {
    display: flex;
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .input-group-zentic:focus-within {
        border-color: var(--zc-primary-light);
    }

.input-right-rounded {
    border-bottom-right-radius: var(--zc-radius-lg);
    border-top-right-radius: var(--zc-radius-lg);
}

.input-group-addon {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--zc-body-bg);
    border-right: 1px solid var(--zc-border-color);
    color: var(--zc-text-muted);
    font-size: 13px;
    white-space: nowrap;
}

    .input-group-addon.input-right {
        border-left: 1px solid var(--zc-border-color);
        cursor: pointer
    }

.input-group-zentic .form-control-zentic {
    border: none;
    border-radius: 0;
    box-shadow: none !important;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--zc-border-color);
    border-radius: var(--zc-radius-pill);
    transition: background var(--transition-fast);
}

    .toggle-slider::before {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        left: 3px;
        top: 3px;
        border-radius: 50%;
        background: #fff;
        box-shadow: var(--zc-shadow-xs);
        transition: transform var(--transition-fast);
    }

.toggle-switch input:checked + .toggle-slider {
    background: var(--zc-primary);
}

    .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(18px);
    }

/* Settings Row */
.settings-section {
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    padding: 20px;
    margin-bottom: 20px;
}

.settings-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--zc-text-primary);
    margin-bottom: 4px;
}

.settings-section-desc {
    font-size: 12.5px;
    color: var(--zc-text-muted);
    margin-bottom: 16px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--zc-border-light);
}

    .settings-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.settings-row-info {
    flex: 1;
}

.settings-row-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--zc-text-primary);
    margin-bottom: 2px;
}

.settings-row-desc {
    font-size: 11.5px;
    color: var(--zc-text-muted);
}

.settings-divider {
    border: 0;
    border-top: 1px solid var(--zc-border-light);
    margin: 16px 0;
}

/* Settings Tabs */
.settings-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--zc-white);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-pill);
    margin-bottom: 24px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: var(--zc-radius-pill);
    border: none;
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--zc-font-sans);
    color: var(--zc-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

    .settings-tab.active {
        background: var(--zc-primary);
        color: #fff;
        box-shadow: var(--zc-shadow-sm);
    }

    .settings-tab:hover:not(.active) {
        color: var(--zc-text-primary);
    }

.settings-panel .settings-content hr {
    border-color: var(--zc-border-light);
    margin: 16px 0;
}

.settings-panel .model-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    font-size: 18px;
}

.settings-panel .info-box-bg input {
    height: 32px;
    font-size: 12px;
}

.settings-panel {
    display: none;
}

    .settings-panel.active {
        display: block;
    }

/* ============================================================
   17. FILE UPLOAD
   ============================================================ */
.file-upload-zone {
    border: 2px dashed var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    padding: 40px 24px;
    text-align: center;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .file-upload-zone:hover,
    .file-upload-zone.dragover {
        border-color: var(--zc-primary-light);
        background: var(--zc-primary-xxlight);
    }

    .file-upload-zone input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

.file-upload-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--zc-radius-xl);
    background: var(--zc-primary-xlight);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
    color: var(--zc-primary);
}

.file-upload-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--zc-text-primary);
}

.file-upload-desc {
    font-size: 12.5px;
    color: var(--zc-text-muted);
}

    .file-upload-desc span {
        color: var(--zc-primary);
        font-weight: 600;
    }

.file-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--zc-body-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
}

.file-list-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--zc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.file-list-name {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-list-size {
    font-size: 11px;
    color: var(--zc-text-muted);
    flex-shrink: 0;
}

.file-list-remove {
    background: none;
    border: none;
    color: var(--zc-text-muted);
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: var(--zc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

    .file-list-remove:hover {
        background: var(--zc-danger-light);
        color: var(--zc-danger);
    }

/* ============================================================
   18. PROGRESS BARS
   ============================================================ */
.progress-zentic {
    height: 6px;
    background: #efefef;
    border-radius: var(--zc-radius-pill);
    overflow: hidden;
}

    .progress-zentic.thick {
        height: 10px;
    }

.progress-fill {
    height: 100%;
    border-radius: var(--zc-radius-pill);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-purple {
    background: var(--zc-primary);
}

.progress-cyan {
    background: var(--zc-secondary);
}

.progress-green {
    background: var(--zc-success);
}

.progress-orange {
    background: var(--zc-warning);
}

.progress-red {
    background: var(--zc-danger);
}

.progress-blue {
    background: var(--zc-info);
}

.progress-gradient {
    background: linear-gradient(90deg, var(--zc-primary), var(--zc-secondary));
}

/* ============================================================
   19. ACTIVITY FEED & TIMELINE
   ============================================================ */
.activity-list {
    display: flex;
    flex-direction: column;
}

.activity-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--zc-border-light);
}

    .activity-item:last-child {
        border-bottom: none;
    }

.activity-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--zc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: 13px;
    color: var(--zc-text-secondary);
    margin-bottom: 2px;
}

    .activity-title strong {
        color: var(--zc-text-primary);
    }

.activity-time {
    font-size: 11px;
    color: var(--zc-text-muted);
}

/* ============================================================
   20. NOTIFICATION PANEL (see topbar section)
   ============================================================ */

/* ============================================================
   21. AI CHAT INTERFACE
   ============================================================ */
.chat-layout-ai {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 500px;
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    overflow: hidden;
}

.chat-layout {
    display: flex;
    gap: 0;
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    overflow: hidden;
    background: var(--zc-card-bg);
    height: calc(100vh - 220px);
    min-height: 550px
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column
}

.chat-main-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--zc-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between
}

.chat-contacts {
    width: 300px;
    border-right: 1px solid var(--zc-border-color);
    flex-shrink: 0;
    display: flex;
    flex-direction: column
}

.chat-header {
    padding: 12px;
}

.chat-label {
    padding: 6px 12px 4px;
}

.chat-contacts hr {
    border-color: var(--zc-border-light);
    margin: 4px 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-message {
    display: flex;
    gap: 12px;
    max-width: 78%;
    animation: fadeSlideUp 0.3s ease;
}

    .chat-message.user-message {
        align-self: flex-end;
        flex-direction: row-reverse;
    }

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

    .chat-avatar.ai-avatar {
        background: var(--zc-primary);
        box-shadow: var(--zc-shadow-ai);
    }

    .chat-avatar.user-avatar {
        background: #374151;
    }

.chat-bubble {
    padding: 12px 16px;
    border-radius: var(--zc-radius-xl);
    font-size: 13.5px;
    line-height: 1.6;
    max-width: 100%;
}

.ai-message .chat-bubble {
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-bottom-left-radius: var(--zc-radius-xs);
    color: var(--zc-text-primary);
}

.user-message .chat-bubble {
    background: var(--zc-primary);
    color: #fff;
    border-bottom-right-radius: var(--zc-radius-xs);
}

.chat-time {
    font-size: 10px;
    color: var(--zc-text-muted);
    margin-top: 5px;
    display: block;
}

.ai-message .chat-time {
    text-align: left;
}

.user-message .chat-time {
    text-align: right;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 10px 14px;
    background: var(--zc-body-bg);
    border: 1px solid var(--zc-border-light);
    border-radius: var(--zc-radius-xl);
    align-items: center;
    width: fit-content;
}

.typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--zc-text-muted);
    animation: typingBounce 1.2s ease-in-out infinite;
}

    .typing-dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .typing-dot:nth-child(3) {
        animation-delay: 0.4s;
    }

/* Suggested Prompts */
.suggested-prompts {
    display: flex;
    gap: 8px;
    padding: 12px 24px;
    overflow-x: auto;
    border-top: 1px solid var(--zc-border-light);
    flex-wrap: nowrap;
}

.prompt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--zc-body-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-pill);
    font-size: 12px;
    font-weight: 500;
    color: var(--zc-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--zc-font-sans);
    transition: all var(--transition-fast);
}

    .prompt-chip:hover {
        border-color: var(--zc-primary-light);
        color: var(--zc-primary);
        background: var(--zc-primary-xxlight);
    }

/* Chat Input Area */
.chat-input-area {
    padding: 16px 24px 20px;
    border-top: 1px solid var(--zc-border-light);
    background: var(--zc-card-bg);
}

.chat-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: var(--zc-body-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-pill);
    padding: 10px 14px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .chat-input-wrapper:focus-within {
        border-color: var(--zc-primary-light);
    }

.chat-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 13.5px;
    font-family: var(--zc-font-sans);
    color: var(--zc-text-primary);
    resize: none;
    max-height: 120px;
    line-height: 2.1;
}

    .chat-input::placeholder {
        color: var(--zc-text-muted);
    }

.chat-send-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--zc-radius-pill);
    background: var(--zc-primary);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

    .chat-send-btn:hover {
        background: var(--zc-primary-dark);
        transform: scale(1.05);
    }

@media (max-width: 480px) {
    .chat-input-wrapper {
        gap: 0;
    }

    .chat-main-header .btn-icon.btn-sm {
        width: 22px;
        height: 22px;
    }

    .chat-main-header {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* ============================================================
   22. AI MODELS PAGE
   ============================================================ */
.model-card {
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    padding: 20px;
    transition: all var(--transition-fast);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .model-card:hover {
        border-color: var(--zc-primary-light);
        box-shadow: var(--zc-shadow-md);
        transform: translateY(-2px);
    }

    .model-card.active {
        border-color: var(--zc-primary);
        box-shadow: var(--zc-shadow-ai);
    }

        .model-card.active::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--zc-primary), var(--zc-secondary));
        }

.model-provider-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--zc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 800;
    color: #fff;
}

.model-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.model-type {
    font-size: 11.5px;
    color: var(--zc-text-muted);
    margin-bottom: 12px;
}

.model-stats {
    display: flex;
    gap: 16px;
}

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

.model-stat-val {
    font-size: 16px;
    font-weight: 800;
    color: var(--zc-primary);
}

.model-stat-lbl {
    font-size: 10px;
    color: var(--zc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================
   23. AI PLAYGROUND
   ============================================================ */
.playground-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    height: calc(100vh - 220px);
    min-height: 500px;
}

.playground-panel {
    display: flex;
    flex-direction: column;
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    overflow: hidden;
}

.playground-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--zc-border-light);
    background: var(--zc-body-bg);
}

.playground-editor {
    flex: 1;
    padding: 16px;
    font-family: var(--zc-font-mono);
    font-size: 13px;
    border: none;
    outline: none;
    resize: none;
    color: var(--zc-text-primary);
    background: var(--zc-card-bg);
    line-height: 1.7;
}

.playground-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--zc-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.playground-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.playground-editor-input {
    flex: 0 0 40%;
    border-bottom: 1px solid var(--zc-border-light);
}

.playground-response-sep {
    background: var(--zc-body-bg);
    padding: 6px 12px;
    font-size: 10px;
    color: var(--zc-text-muted);
    border-bottom: 1px solid var(--zc-border-light);
}

.playground-editor-response {
    flex: 1;
    color: var(--zc-text-secondary);
}

/* ============================================================
   24. ANALYTICS & CHARTS
   ============================================================ */
.chart-container {
    position: relative;
    width: 100%;
    min-width: 0;
}

    .chart-container canvas {
        max-width: 100%;
    }

/* ============================================================
   25. KANBAN BOARD
   ============================================================ */
.kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
    min-height: 500px;
}

.kanban-col {
    min-width: 270px;
    max-width: 285px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--zc-radius-lg) var(--zc-radius-lg) 0 0;
    font-size: 12.5px;
    font-weight: 700;
}

.kanban-col-body {
    background: var(--zc-body-bg);
    border: 1px solid var(--zc-border-light);
    border-top: none;
    border-radius: 0 0 var(--zc-radius-lg) var(--zc-radius-lg);
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
}

.kanban-card {
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    padding: 14px;
    cursor: grab;
    box-shadow: var(--zc-shadow-xs);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

    .kanban-card:hover {
        box-shadow: var(--zc-shadow-md);
        transform: translateY(-2px);
    }

.kanban-card-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.kanban-card-desc {
    font-size: 11.5px;
    color: var(--zc-text-secondary);
    margin-bottom: 10px;
    line-height: 1.5;
}

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

.kanban-add-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px dashed var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    font-size: 12px;
    color: var(--zc-text-muted);
    cursor: pointer;
    font-family: var(--zc-font-sans);
    margin-top: 4px;
    transition: all var(--transition-fast);
}

    .kanban-add-btn:hover {
        background: var(--zc-card-bg);
        color: var(--zc-primary);
        border-color: var(--zc-primary-light);
    }

/* ============================================================
   26. CALENDAR
   ============================================================ */
.cal-header-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

    .cal-header-days span {
        text-align: center;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--zc-text-muted);
        padding: 6px 0;
    }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal-day {
    min-height: 88px;
    padding: 6px 8px;
    border: 1px solid var(--zc-border-light);
    border-radius: var(--zc-radius-sm);
    background: var(--zc-card-bg);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

    .cal-day:hover {
        border-color: var(--zc-primary-light);
    }

    .cal-day.other-month {
        background: var(--zc-body-bg);
        opacity: 0.5;
    }

    .cal-day.today {
        border-color: var(--zc-primary);
        background: var(--zc-primary-xxlight);
    }

.cal-day-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--zc-text-secondary);
    margin-bottom: 3px;
}

.cal-day.today .cal-day-num {
    color: var(--zc-primary);
}

.cal-event {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   CALENDAR — RESPONSIVE FIXES
   ============================================================ */

@media (max-width: 768px) {

    .cal-day {
        min-height: 68px;
        padding: 4px 5px;
    }

    .cal-event-popup {
        width: min(300px, calc(100vw - 24px));
    }
}

@media (max-width: 576px) {

    .cal-main-card .zentic-card-header {
        padding: 10px 12px;
        gap: 6px;
    }

    .cal-header-days span {
        font-size: 9px;
        padding: 4px 0;
    }

    .cal-day {
        min-height: 50px;
        padding: 3px 3px;
    }

    .cal-day-num {
        font-size: 10px;
        margin-bottom: 1px;
    }

    .cal-event {
        font-size: 0;
        height: 5px;
        padding: 0;
        min-height: 5px;
        margin-bottom: 2px;
        border-radius: 2px;
    }

    .cal-view-tabs {
        flex: 1;
    }

    .cal-view-tab {
        flex: 1;
        text-align: center;
        padding: 5px 6px;
        font-size: 11px;
    }

    .cal-event-popup {
        width: calc(100vw - 24px);
        max-width: 340px;
    }
}

@media (max-width: 480px) {

    .cal-day {
        min-height: 40px;
        padding: 2px 3px;
    }

    .cal-header-days span {
        font-size: 8px;
        padding: 3px 0;
    }

    .cal-day-num {
        font-size: 9px;
    }

    .cal-view-tabs {
        width: 100%;
    }
}

/* ============================================================
   27. FILE MANAGER
   ============================================================ */
.fm-layout {
    display: flex;
    gap: 0;
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    overflow: hidden;
}

.fm-sidebar {
    width: 220px;
    border-right: 1px solid var(--zc-border-color);
    flex-shrink: 0;
    padding: 16px 8px;
    background: var(--zc-body-bg);
}

    .fm-sidebar hr {
        border-color: var(--zc-border-light);
        margin: 10px 0;
    }

.fm-storage-block {
    padding: 0 4px 12px;
}

.fm-storage-inner {
    padding: 6px 10px;
}

.fm-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--zc-card-bg);
}

.fm-toolbar {
    padding: 12px 16px;
    border-bottom: 1px solid var(--zc-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--zc-card-bg);
    flex-wrap: wrap;
}

.fm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    padding: 16px;
}

.fm-item {
    padding: 14px 12px;
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .fm-item:hover {
        border-color: var(--zc-primary-light);
        background: var(--zc-primary-xxlight);
    }

.fm-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: var(--zc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 20px;
}

.fm-item-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--zc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-item-meta {
    font-size: 10px;
    color: var(--zc-text-muted);
    margin-top: 2px;
}

.fm-folder-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--zc-radius-sm);
    font-size: 12.5px;
    color: var(--zc-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 500;
}

    .fm-folder-link:hover {
        background: var(--zc-border-light);
        color: var(--zc-text-primary);
    }

    .fm-folder-link.active {
        background: var(--zc-primary-xlight);
        color: var(--zc-primary);
        font-weight: 600;
    }

@media(max-width:480px) {
    .fm-grid {
        grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    }
}

/* ============================================================
   28. INBOX / EMAIL
   ============================================================ */
.inbox-layout {
    display: flex;
    gap: 0;
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    overflow: hidden;
    background: var(--zc-card-bg);
    height: calc(100vh - 220px);
    min-height: 550px;
}

.inbox-email-body {
    font-size: 14px;
    line-height: 1.8;
    color: var(--zc-text-secondary)
}

.inbox-sidebar {
    width: 280px;
    border-right: 1px solid var(--zc-border-color);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

    .inbox-sidebar hr {
        border-color: var(--zc-border-light);
        margin: 8px 0;
    }

    .inbox-sidebar .label-sidebar {
        padding: 4px 12px 6px
    }

.inbox-folder-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 13px;
    color: var(--zc-text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: var(--zc-radius-sm);
    margin: 1px 8px;
    background: var(--zc-card-bg);
}

    .inbox-folder-link:hover {
        background: var(--zc-card-bg);
        color: var(--zc-text-primary);
    }

    .inbox-folder-link.active {
        background: var(--zc-primary-xlight);
        color: var(--zc-primary);
        font-weight: 600;
    }

.inbox-folder-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    background: var(--zc-primary);
    color: #fff;
    border-radius: var(--zc-radius-pill);
    padding: 1px 7px;
}

.inbox-list {
    width: 320px;
    border-right: 1px solid var(--zc-border-color);
    overflow-y: auto;
    flex-shrink: 0;
}

.inbox-email-row {
    display: flex;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--zc-border-light);
    cursor: pointer;
    transition: background var(--transition-fast);
    position: relative;
}

    .inbox-email-row:hover {
        background: var(--zc-body-bg);
    }

    .inbox-email-row.unread {
        background: rgba(80, 70, 229, 0.02);
    }

        .inbox-email-row.unread::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--zc-primary);
        }

    .inbox-email-row.selected {
        background: var(--zc-primary-xxlight);
    }

.inbox-email-subject {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--zc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-email-row.unread .inbox-email-subject {
    font-weight: 700;
}

.inbox-email-preview {
    font-size: 11.5px;
    color: var(--zc-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-email-time {
    font-size: 11px;
    color: var(--zc-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.inbox-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.inbox-detail-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--zc-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.inbox-detail-body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.inbox-reply-box {
    padding: 12px 20px;
    border-top: 1px solid var(--zc-border-light);
}

.inbox-reply-inner {
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    overflow: hidden;
}

.inbox-reply-toolbar {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--zc-body-bg);
}

/* ============================================================
   29. SETTINGS PAGE (see form section)
   ============================================================ */

/* ============================================================
   30. LOGIN / AUTH PAGES
   ============================================================ */
.auth-page {
    display: flex;
    min-height: 100vh;
}

.auth-left {
    flex: 1;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(150deg, #0b0b1f 0%, #1e1b4b 45%, #0e2a3a 100%);
    background-size: 22px 22px, 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    position: relative;
    overflow: hidden;
}

.auth-left-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.auth-left-orb-1 {
    width: 420px;
    height: 420px;
    background: rgba(80, 70, 229, 0.20);
    top: -160px;
    right: -120px;
}

.auth-left-orb-2 {
    width: 320px;
    height: 320px;
    background: rgba(6, 182, 212, 0.14);
    bottom: -110px;
    left: -90px;
}

.auth-left-orb-3 {
    width: 200px;
    height: 200px;
    background: rgba(236, 72, 153, 0.10);
    top: 45%;
    left: 8%;
}

.auth-left-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 48px;
}

.auth-left-logo-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--zc-radius-xl);
    background: var(--zc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}

.auth-left-logo-text {
    font-size: 22px;
    font-weight: 800;
    color: var(--zc-on-dark-text);
    letter-spacing: -0.3px;
}

/* .brand-name is shared with the (light) sidebar — force it light here */
.auth-left .brand-name {
    color: var(--zc-on-dark-text);
}

.auth-tagline {
    font-size: 28px;
    font-weight: 800;
    color: var(--zc-on-dark-text);
    line-height: 1.25;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

    .auth-tagline span {
        background: linear-gradient(90deg, #8A82F0, #67E8F9);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.auth-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin-bottom: 36px;
}

.auth-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.auth-feature-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--zc-radius-sm);
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #8A82F0;
    flex-shrink: 0;
}

.auth-feature span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}

.auth-right {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 56px;
    background: var(--zc-body-bg);
}

.auth-form-container {
    width: 100%;
    max-width: 420px;
}

.auth-form-header {
    margin-bottom: 28px;
}

.auth-form-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 6px;
}

.auth-form-subtitle {
    font-size: 13.5px;
    color: var(--zc-text-secondary);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--zc-text-muted);
    margin: 20px 0;
}

    .auth-divider::before,
    .auth-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--zc-border-color);
    }

.auth-card {
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-2xl);
    padding: 28px;
    box-shadow: var(--zc-shadow-lg);
}

/* ============================================================
   31. DATATABLE CUSTOMISATION
   ============================================================ */
.dataTables_wrapper {
    padding: 0;
    overflow-y: hidden;
}

    .dataTables_wrapper input.form-check-input {
        padding: 0 !important;
    }

div.dataTables_wrapper div.dataTables_filter label {
    position: relative;
}

    div.dataTables_wrapper div.dataTables_filter label::before {
        content: "\e151";
        color: var(--zc-text-muted);
        font-family: 'lucide' !important;
        font-weight: 500;
        top: 7px;
        left: 1.8em;
        position: absolute;
    }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    padding: 6px 12px;
    font-size: 13px;
    font-family: var(--zc-font-sans);
    color: var(--zc-text-primary);
    background-color: var(--zc-card-bg);
    outline: none;
}

.dataTables_wrapper .dataTables_length select {
    width: 70% !important;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-left: .5em;
    display: inline-block;
    width: auto;
    padding-left: 3em;
    border-radius: var(--zc-radius-pill);
    background: var(--zc-body-bg);
    box-shadow: none;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--zc-primary-light);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    margin: 2px;
}

.dataTables_paginate .pagination {
    justify-content: flex-end;
}

.dataTables_wrapper .dataTables_paginate .paginate_button .page-link {
    width: 30px;
    height: 30px;
    border-radius: var(--zc-radius-sm);
    border: 1px solid var(--zc-border-color);
    background: var(--zc-card-bg);
    font-size: 12px;
    font-weight: 500;
    color: var(--zc-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    justify-content: center;
    transition: all var(--transition-fast);
    font-family: var(--zc-font-sans);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous .page-link {
    font-size: 20px;
    padding: 0 0 5px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover .page-link {
    background: var(--zc-primary);
    border-color: var(--zc-primary);
    color: #fff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current .page-link {
    background: var(--zc-primary);
    border-color: var(--zc-primary);
    color: #fff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dataTables_wrapper .dataTables_info {
    font-size: 12px;
    color: var(--zc-text-muted);
    padding-top: 4px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-size: 12.5px;
    color: var(--zc-text-secondary);
}

table.dataTable thead th {
    background: var(--zc-body-bg);
    border-bottom: 2px solid var(--zc-border-light) !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--zc-text-muted);
    padding: 11px 16px;
}

    table.dataTable thead th.sorting::after,
    table.dataTable thead th.sorting_asc::after,
    table.dataTable thead th.sorting_desc::after {
        opacity: 0.5;
    }

/* ============================================================
   32. MODALS & OFFCANVAS
   ============================================================ */
.zentic-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
}

    .zentic-modal-backdrop.open {
        display: flex;
    }

.zentic-modal {
    background: var(--zc-card-bg);
    border-radius: var(--zc-radius-2xl);
    box-shadow: var(--zc-shadow-xl);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.2s ease;
    margin: 16px;
}

.zentic-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--zc-border-light);
}

.zentic-modal-title {
    font-size: 15px;
    font-weight: 700;
}

.zentic-modal-close {
    background: none;
    border: none;
    color: var(--zc-text-muted);
    cursor: pointer;
    font-size: 16px;
    width: 28px;
    height: 28px;
    border-radius: var(--zc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

    .zentic-modal-close:hover {
        background: var(--zc-border-light);
        color: var(--zc-text-primary);
    }

.zentic-modal-body {
    padding: 22px;
    overflow-y: auto;
    flex: 1;
}

.zentic-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--zc-border-light);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ============================================================
   33. ALERTS & TOASTS
   ============================================================ */
.alert-zentic {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--zc-radius-sm);
    border: 1px solid transparent;
    font-size: 13px;
}

    .alert-zentic .alert-icon {
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .alert-zentic .alert-content {
        flex: 1;
    }

    .alert-zentic .alert-title {
        font-weight: 600;
        margin-bottom: 2px;
    }

    .alert-zentic .alert-close {
        background: none;
        border: none;
        cursor: pointer;
        opacity: 0.6;
        font-size: 14px;
        padding: 0;
        margin-left: auto;
        transition: opacity var(--transition-fast);
    }

        .alert-zentic .alert-close:hover {
            opacity: 1;
        }

.alert-primary {
    background: var(--zc-primary-xlight);
    border-color: rgba(80, 70, 229, 0.2);
    color: var(--zc-primary-dark);
}

.alert-success {
    background: var(--zc-success-light);
    border-color: rgba(16, 185, 129, 0.2);
    color: #065F46;
}

.alert-warning {
    background: var(--zc-warning-light);
    border-color: rgba(245, 158, 11, 0.2);
    color: #92400E;
}

.alert-danger {
    background: var(--zc-danger-light);
    border-color: rgba(239, 68, 68, 0.2);
    color: #991B1B;
}

.alert-info {
    background: var(--zc-info-light);
    border-color: rgba(59, 130, 246, 0.2);
    color: #1E40AF;
}

/* Toast */
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    box-shadow: var(--zc-shadow-lg);
    pointer-events: auto;
    animation: toastIn 0.3s ease;
    font-size: 14px;
}

    .toast-item.removing {
        animation: toastOut 0.3s ease forwards;
    }

    .toast-item .toast-icon {
        font-size: 16px;
        flex-shrink: 0
    }

    .toast-item .toast-span {
        flex: 1;
        font-size: 13px;
    }

    .toast-item button {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--zc-text-muted);
        font-size: 14px;
        padding: 0;
        flex-shrink: 0;
    }

/* ============================================================
   34. EMPTY STATES
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 60px 24px;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--zc-radius-xl);
    background: var(--zc-primary-xlight);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 26px;
    color: var(--zc-primary);
}

.empty-state-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
}

.empty-state-desc {
    font-size: 13.5px;
    color: var(--zc-text-secondary);
    max-width: 380px;
    margin: 0 auto 24px;
}

/* ============================================================
   35. DARK MODE
   ============================================================ */
[data-theme="dark"] {
    --zc-body-bg: #0D0D1A;
    --zc-card-bg: #13132B;
    --zc-border-color: #37393d;
    --zc-border-light: rgba(255, 255, 255, 0.05);
    --zc-text-primary: #F1F5F9;
    --zc-text-secondary: #94A3B8;
    --zc-text-muted: #9CA3AF;
    --zc-white: #13132B;
    --zc-sidebar-bg: #13132B;
    --zc-sidebar-bg-2: rgba(255, 255, 255, 0.03);
    --zc-sidebar-active-bg: rgba(80, 70, 229, 0.18);
    --zc-sidebar-active-border: #5046E5;
    --zc-sidebar-text: #94A3B8;
    --zc-sidebar-text-active: #F1F5F9;
    --zc-sidebar-text-muted: #9CA3AF;
    --zc-sidebar-border: rgba(255, 255, 255, 0.06);
}

    /* ── Date / Time inputs in dark mode ─────────────────────────── */
    [data-theme="dark"] input[type="date"],
    [data-theme="dark"] input[type="time"],
    [data-theme="dark"] input[type="datetime-local"],
    [data-theme="dark"] input[type="month"],
    [data-theme="dark"] input[type="week"] {
        color-scheme: dark;
        color: var(--zc-text-primary);
        background-color: var(--zc-card-bg);
        border-color: rgba(255, 255, 255, 0.1);
    }

        [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
        [data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
        [data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
        [data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
        [data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
            filter: brightness(0) invert(1);
            opacity: 0.65;
            cursor: pointer;
        }

    [data-theme="dark"] .zentic-topbar {
        background: rgba(19, 19, 43, 0.95);
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    [data-theme="dark"] .zentic-modal-backdrop {
        background: rgba(0, 0, 0, .7);
    }

    [data-theme="dark"] .zentic-footer {
        background: var(--zc-card-bg);
        border-top-color: rgba(255, 255, 255, 0.06);
    }

    [data-theme="dark"] .sidebar-collapse-toggle {
        background: var(--zc-card-bg);
        border-color: rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .zentic-table thead th {
        background: rgba(255, 255, 255, 0.03);
    }

    [data-theme="dark"] .zentic-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.03);
    }

    [data-theme="dark"] .notif-panel {
        background: var(--zc-card-bg);
        border-color: rgba(255, 255, 255, 0.08);
    }

    [data-theme="dark"] .chat-panel {
        background: var(--zc-card-bg);
        border-color: rgba(255, 255, 255, 0.08);
    }

    [data-theme="dark"] .user-dropdown-menu {
        background: var(--zc-card-bg);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    [data-theme="dark"] .user-dropdown-item:hover {
        background: rgba(255, 255, 255, 0.05);
    }



    [data-theme="dark"] .auth-right {
        background: #080812;
    }

    [data-theme="dark"] .auth-card {
        background: #13132B;
        border-color: rgba(255, 255, 255, 0.08);
    }

    [data-theme="dark"] .kanban-col-body {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.06);
    }

    [data-theme="dark"] .chat-bubble {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.08);
        color: var(--zc-text-primary);
    }

    [data-theme="dark"] .playground-editor {
        background: rgba(255, 255, 255, 0.04);
        color: var(--zc-text-primary);
    }

    [data-theme="dark"] .fm-sidebar {
        background: rgba(255, 255, 255, 0.02);
    }

    [data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
    [data-theme="dark"] .dataTables_wrapper .dataTables_length select {
        background-color: var(--zc-card-bg);
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--zc-text-primary);
    }

    [data-theme="dark"] .form-select {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
        background: var(--zc-card-bg);
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    [data-theme="dark"] table.dataTable thead th {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] .gridjs-container {
        color: var(--zc-text-primary);
    }

    [data-theme="dark"] .gridjs-td {
        background-color: var(--zc-card-bg);
        color: var(--zc-text-primary);
    }

    [data-theme="dark"] .gridjs-footer {
        background-color: var(--zc-card-bg);
        border-color: rgba(255, 255, 255, 0.08);
    }

    [data-theme="dark"] .gridjs-input {
        background-color: var(--zc-card-bg);
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--zc-text-primary);
    }

    [data-theme="dark"] .gridjs-pagination {
        color: var(--zc-text-muted);
    }

    [data-theme="dark"] .lang-dropdown {
        background: var(--zc-card-bg);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    }

    [data-theme="dark"] .lang-dropdown-header {
        border-bottom-color: rgba(255, 255, 255, 0.06);
        color: var(--zc-text-muted);
    }

    [data-theme="dark"] .lang-item:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    [data-theme="dark"] .lang-item.active {
        background: rgba(80, 70, 229, 0.15);
    }

    [data-theme="dark"] .lang-no-results {
        color: var(--zc-text-muted);
    }

    [data-theme="dark"] .gallery-filter-btn {
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--zc-text-secondary);
    }

        [data-theme="dark"] .gallery-filter-btn:hover {
            background: rgba(80, 70, 229, 0.15);
            border-color: var(--zc-primary);
        }

        [data-theme="dark"] .gallery-filter-btn.active {
            background: var(--zc-primary);
            border-color: var(--zc-primary);
            color: #fff;
        }

    [data-theme="dark"] .table-toolbar {
        background: rgba(80, 70, 229, 0.12);
        border-color: rgba(80, 70, 229, 0.25);
    }


/* ============================================================
   36. ANIMATIONS & TRANSITIONS
   ============================================================ */
@keyframes aiPulse {

    0%, 100% {
        box-shadow: 0 0 6px var(--zc-success);
        opacity: 1;
    }

    50% {
        box-shadow: 0 0 12px var(--zc-success);
        opacity: 0.7;
    }
}

@keyframes aiBar {

    0%, 100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

@keyframes typingBounce {

    0%, 60%, 100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-6px);
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

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

.spin {
    animation: spin 1s linear infinite;
}

.fade-in {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   37. PRINT STYLES
   ============================================================ */
@media print {

    .zentic-sidebar,
    .zentic-topbar,
    .zentic-footer,
    .page-header-actions,
    .btn-zentic {
        display: none !important;
    }

    .zentic-main {
        margin-left: 0 !important;
    }

    .zentic-content {
        padding: 0 !important;
    }

    .zentic-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* ============================================================
   38. CHART & UTILITY CLASSES
   ============================================================ */
.chart-h-xs,
.chart-h-sm,
.chart-h-md,
.chart-h-lg,
.chart-h-xl,
.chart-h-xxl {
    position: relative;
    width: 100%;
    min-width: 0;
}

    .chart-h-xs canvas,
    .chart-h-sm canvas,
    .chart-h-md canvas,
    .chart-h-lg canvas,
    .chart-h-xl canvas,
    .chart-h-xxl canvas {
        max-width: 100%;
    }

.chart-h-xs {
    height: var(--zc-chart-h-xs);
}

.chart-h-sm {
    height: var(--zc-chart-h-sm);
}

.chart-h-md {
    height: var(--zc-chart-h-md);
}

.chart-h-lg {
    height: var(--zc-chart-h-lg);
}

.chart-h-xl {
    height: var(--zc-chart-h-xl);
}

.chart-h-xxl {
    height: var(--zc-chart-h-xxl);
}


.bar-primary {
    background: var(--zc-primary);
}

.bar-secondary {
    background: var(--zc-secondary);
}

.bar-success {
    background: var(--zc-success);
}

.bar-warning {
    background: var(--zc-warning);
}

.bar-danger {
    background: var(--zc-danger);
}

.bar-info {
    background: var(--zc-info);
}

.op-10 {
    opacity: 0.10;
}

.op-20 {
    opacity: 0.20;
}

.op-30 {
    opacity: 0.30;
}

.op-40 {
    opacity: 0.40;
}

.op-50 {
    opacity: 0.50;
}

.op-60 {
    opacity: 0.60;
}

.op-70 {
    opacity: 0.70;
}

.op-75 {
    opacity: 0.75;
}

.op-85 {
    opacity: 0.85;
}

.op-100 {
    opacity: 1;
}

.mh-30 {
    height: 30%;
}

.mh-35 {
    height: 35%;
}

.mh-40 {
    height: 40%;
}

.mh-45 {
    height: 45%;
}

.mh-50 {
    height: 50%;
}

.mh-55 {
    height: 55%;
}

.mh-60 {
    height: 60%;
}

.mh-65 {
    height: 65%;
}

.mh-70 {
    height: 70%;
}

.mh-75 {
    height: 75%;
}

.mh-80 {
    height: 80%;
}

.mh-85 {
    height: 85%;
}

.mh-90 {
    height: 90%;
}

.mh-100 {
    height: 100%;
}

.h-4px {
    height: 4px;
}

.h-16px {
    height: 16px;
}

.legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-rect {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-price {
    flex: 1;
    margin: 0 12px;
}

.legend-primary {
    background: var(--zc-primary);
}

.legend-secondary {
    background: var(--zc-secondary);
}

.legend-success {
    background: var(--zc-success);
}

.legend-warning {
    background: var(--zc-warning);
}

.legend-danger {
    background: var(--zc-danger);
}

.legend-info {
    background: var(--zc-info);
}

.text-2xs {
    font-size: var(--zc-fs-2xs);
}

.text-xs {
    font-size: var(--zc-fs-xs);
}

.text-sm {
    font-size: var(--zc-fs-sm);
}

.text-base {
    font-size: var(--zc-fs-base);
}

.text-md {
    font-size: var(--zc-fs-md);
}

.text-lg {
    font-size: var(--zc-fs-lg);
}

.text-xl {
    font-size: var(--zc-fs-xl);
}

.text-2xl {
    font-size: var(--zc-fs-2xl);
}

.text-3xl {
    font-size: var(--zc-fs-3xl);
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.lh-n {
    line-height: normal;
    padding: 2px;
}

/* Width utilities */
.w-select-sm {
    width: 145px;
}

.w-select-normal {
    width: 155px;
}

.w-select-md {
    width: 180px;
}

.w-50-px {
    width: 50px;
}

.w-80-px {
    width: 80px;
}

.w-150-px {
    width: 150px;
}

.w-160-px {
    width: 160px;
}

.w-180-px {
    width: 180px;
}

.w-90 {
    width: 90%;
}

.w-91 {
    width: 91%;
}

.w-94 {
    width: 94%;
}

.w-97 {
    width: 97%;
}

.w-87 {
    width: 87%;
}

.w-88 {
    width: 88%;
}

.w-84 {
    width: 84%;
}

.w-82 {
    width: 82%;
}

.w-80 {
    width: 80%;
}

.w-78 {
    width: 78%;
}

.w-75 {
    width: 75%;
}

.w-74 {
    width: 74%;
}

.w-72 {
    width: 72%;
}

.w-68 {
    width: 68%;
}

.w-62 {
    width: 62%;
}

.w-60 {
    width: 60%;
}

.w-57 {
    width: 57%;
}

.w-56 {
    width: 56%;
}

.w-54 {
    width: 54%;
}

.w-52 {
    width: 52%;
}

.w-45 {
    width: 45%;
}

.w-38 {
    width: 38%;
}

.w-34 {
    width: 34%;
}

.w-33 {
    width: 33%;
}

.w-29 {
    width: 29%;
}

.w-28 {
    width: 28%;
}

.w-26 {
    width: 26%;
}

.w-22 {
    width: 22%;
}

.w-28 {
    width: 28%;
}

.w-20 {
    width: 20%;
}

.w-18 {
    width: 18%;
}

.w-13 {
    width: 13%;
}

.w-7 {
    width: 7%;
}

.w-0 {
    width: 0%;
}

.max-w-100 {
    max-width: 100px;
}

.max-w-120 {
    max-width: 120px;
}

.max-w-160 {
    max-width: 160px;
}

.max-w-180 {
    max-width: 180px;
}

.max-w-200 {
    max-width: 200px;
}

.max-w-220 {
    max-width: 220px;
}

.max-w-260 {
    max-width: 260px;
}

.max-w-280 {
    max-width: 280px;
}

.max-w-380 {
    max-width: 380px;
}

.max-w-700 {
    max-width: 700px;
}

.max-w-800 {
    max-width: 800px;
}

.max-w-search {
    max-width: 180px;
}

.h-300 {
    height: 300px;
}

.pt-0-i {
    padding-top: 0 !important;
}

.zc-border-card-border {
    margin-left: -8px;
    border: 2px solid var(--zc-card-bg);
}

.zc-m-auto-12 {
    margin: 0 auto 12px;
}

/* ============================================================
   39. UI COMPONENTS EXTENSION (v2.1) — Maps, Charts, Tables
   ============================================================ */
/* ── Country / Progress Row ─────────────────────────────────── */
.country-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--zc-border-light);
}

    .country-row:last-child {
        border-bottom: none;
    }

.country-flag {
    font-size: 12px;
    flex-shrink: 0;
}

.country-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
}

.country-bar {
    flex: 2;
}

.country-pct {
    font-size: 12px;
    font-weight: 700;
    color: var(--zc-primary);
    min-width: 36px;
    text-align: right;
}

.country-val {
    font-size: 11.5px;
    color: var(--zc-text-muted);
    min-width: 52px;
    text-align: right;
}

/* ── Gallery ─────────────────────────────────────────────────── */
.gallery-card {
    overflow: hidden;
    cursor: pointer;
}

.gallery-thumb {
    height: 160px;
    position: relative;
    overflow: hidden;
}

    .gallery-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.gallery-icon {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.25);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background .25s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-expand {
    color: #fff;
    font-size: 24px;
    opacity: 0;
    transition: opacity .25s;
}

.gallery-card:hover .gallery-overlay {
    background: rgba(0, 0, 0, 0.45);
}

.gallery-card:hover .gallery-expand {
    opacity: 1;
}

.gallery-card-info {
    padding: 10px 14px;
}

.gallery-filter-btn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: all .15s;
}

    .gallery-filter-btn:hover {
        border-color: var(--zc-border-color);
    }

    .gallery-filter-btn.active {
        background: var(--zc-primary);
        border-color: var(--zc-primary);
        color: #fff;
    }

.glightbox-clean .gslide-desc {
    font-size: inherit !important;
    font-family: var(--zc-font-sans) !important;
    line-height: normal !important;
}

.glightbox-clean .gslide-description {
    background: var(--zc-body-bg) !important;
}

/* Lightbox — handled by GLightbox library */
/* ── Error Pages (404 / 500) ─────────────────────────────────── */
.err-page-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(15, 15, 35, 0.05) 1px, transparent 1px), var(--zc-body-bg);
    background-size: 22px 22px, 100% 100%;
    padding: 24px;
}

.err-content {
    text-align: center;
    max-width: 480px;
    width: 100%;
}

.err-logo {
    display: inline-flex;
    margin-bottom: 28px;
}

.err-number {
    font-size: 100px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -4px;
    background: linear-gradient(135deg, var(--zc-primary), var(--zc-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}

    .err-number.err-danger {
        background: linear-gradient(135deg, var(--zc-danger), var(--zc-warning));
        -webkit-background-clip: text;
        background-clip: text;
    }

.err-divider {
    width: 64px;
    height: 4px;
    background: linear-gradient(135deg, var(--zc-primary), var(--zc-secondary));
    border-radius: 2px;
    margin: 0 auto 28px;
}

    .err-divider.err-danger {
        background: linear-gradient(135deg, var(--zc-danger), var(--zc-warning));
    }

.err-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: var(--zc-radius-xl);
    background: linear-gradient(135deg, var(--zc-primary-light), var(--zc-primary));
    box-shadow: 0 8px 20px rgba(80, 70, 229, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 26px;
    color: #fff;
}

    .err-icon-wrap.err-danger {
        background: linear-gradient(135deg, #FB7185, var(--zc-danger));
        box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
    }

.err-heading {
    font-size: 22px;
}

.err-desc {
    max-width: 360px;
    line-height: 1.7;
    margin-left: auto;
    margin-right: auto;
}

/* ── Coming Soon Page ────────────────────────────────────────── */
.cs-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(150deg, #0a0a18, #1e1b4b, #0e2a3a);
    background-size: 22px 22px, 100% 100%;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.cs-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.cs-orb-1 {
    width: 500px;
    height: 500px;
    background: rgba(80, 70, 229, 0.16);
    top: -200px;
    right: -150px;
}

.cs-orb-2 {
    width: 350px;
    height: 350px;
    background: rgba(6, 182, 212, 0.12);
    bottom: -120px;
    left: -80px;
}

.cs-orb-3 {
    width: 220px;
    height: 220px;
    background: rgba(236, 72, 153, 0.09);
    top: 50%;
    left: 10%;
}

.cs-wrap {
    text-align: center;
    max-width: 560px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(80, 70, 229, 0.15);
    border: 1px solid rgba(80, 70, 229, 0.3);
    border-radius: 100px;
    padding: 6px 18px;
    margin-bottom: 32px;
}

.cs-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zc-primary);
    animation: aiPulse 2s infinite;
}

.cs-badge-text {
    font-size: 12px;
    font-weight: 700;
    color: #8A82F0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cs-brand {
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 28px;
}

.cs-brand-icon {
    width: 52px;
    height: 52px;
    font-size: 24px;
}

/* .brand-name is shared with the (light) sidebar — force it light here */
.cs-brand .brand-name {
    color: var(--zc-on-dark-text);
}

.cs-brand-title {
    font-size: 30px;
    font-weight: 800;
    color: var(--zc-on-dark-text);
    letter-spacing: -0.5px;
}

.cs-heading {
    font-size: 40px;
    font-weight: 800;
    color: var(--zc-on-dark-text);
    margin-bottom: 16px;
    letter-spacing: -1px;
    line-height: 1.2;
}

.cs-heading-accent {
    background: linear-gradient(90deg, #8A82F0, #67E8F9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cs-lead {
    color: var(--zc-on-dark-text-muted);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 40px;
}

.cs-email-form {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.cs-email-input {
    flex: 1;
    max-width: 300px;
    padding: 12px 18px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: var(--zc-on-dark-text);
    font-family: var(--zc-font-sans);
    font-size: 13px;
    outline: none;
}

.cs-email-btn {
    padding: 12px 24px;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--zc-primary), #3730A3);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--zc-font-sans);
}

.cs-stats {
    display: flex;
    gap: 24px;
    justify-content: center;
}

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

.cs-stat-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--zc-on-dark-text);
}

.cs-stat-label {
    font-size: 11px;
    color: var(--zc-on-dark-text-muted);
}

.cs-stat-div {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    align-self: stretch;
}

.cs-back {
    display: block;
    margin-top: 32px;
    color: var(--zc-on-dark-text-muted);
    font-size: 13px;
    text-decoration: none;
}

    .cs-back:hover {
        color: var(--zc-on-dark-text);
    }

/* ── Maintenance Page ────────────────────────────────────────── */
.maint-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(150deg, #0a0a18, #1e1b4b, #0e2a3a);
    background-size: 22px 22px, 100% 100%;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.maint-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.maint-orb-1 {
    width: 480px;
    height: 480px;
    background: rgba(80, 70, 229, 0.16);
    top: -180px;
    right: -140px;
}

.maint-orb-2 {
    width: 320px;
    height: 320px;
    background: rgba(6, 182, 212, 0.12);
    bottom: -110px;
    left: -80px;
}

.maint-content {
    text-align: center;
    max-width: 520px;
    width: 100%;
}

.maint-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(80, 70, 229, 0.15);
    border: 2px solid rgba(80, 70, 229, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
    animation: spin 12s linear infinite;
    font-size: 28px;
    color: #8A82F0;
}

.maint-heading {
    font-size: 32px;
    font-weight: 800;
    color: var(--zc-on-dark-text);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.maint-desc {
    color: var(--zc-on-dark-text-muted);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 40px;
}

    .maint-desc strong {
        color: #8A82F0;
    }

.maint-timer {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 40px;
}

.countdown-unit {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 18px 22px;
    min-width: 80px;
}

.countdown-num {
    font-size: 32px;
    font-weight: 800;
    color: var(--zc-on-dark-text);
    font-family: var(--zc-font-mono);
}

.countdown-label {
    font-size: 10px;
    color: var(--zc-on-dark-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.maint-form {
    display: flex;
    gap: 8px;
    justify-content: center;
    max-width: 380px;
    margin: 0 auto 24px;
}

.maint-input {
    flex: 1;
    padding: 10px 16px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: var(--zc-on-dark-text);
    font-family: var(--zc-font-sans);
    font-size: 13px;
    outline: none;
}

.maint-btn {
    padding: 10px 20px;
    border-radius: 100px;
    background: var(--zc-primary);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--zc-font-sans);
}

/* ── Extra Color Utilities ───────────────────────────────────── */
.progress-pink {
    background: var(--zc-pink);
}

.progress-purple-dark {
    background: var(--zc-primary-dark);
}

/* ── Table Checkbox ──────────────────────────────────────────── */
.zentic-table .form-check-input {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--zc-primary);
    margin: 0;
}

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--zc-primary-xxlight);
    border-radius: var(--zc-radius-sm);
    border: 1px solid var(--zc-border-light);
    border-left: 3px solid var(--zc-primary);
    margin: 8px 0;
    display: none;
}

    .table-toolbar.visible {
        display: flex;
    }

.table-toolbar-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--zc-primary);
}

.table-toolbar .btn-zentic {
    font-size: 12px;
}

.table-toolbar .btn-danger {
    background: var(--zc-danger);
    border-color: var(--zc-danger);
    color: #fff;
}

    .table-toolbar .btn-danger:hover {
        opacity: 0.9;
    }

/* ── Calendar Enhanced ───────────────────────────────────────── */
.cal-view-tabs {
    display: flex;
    gap: 4px;
}

.cal-view-tab {
    padding: 5px 14px;
    border-radius: var(--zc-radius-sm);
    border: 1px solid var(--zc-border-color);
    background: var(--zc-white);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--zc-font-sans);
    color: var(--zc-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .cal-view-tab.active {
        background: var(--zc-primary);
        color: #fff;
    }

.cal-event {
    position: relative;
    cursor: pointer;
}

    .cal-event:hover {
        opacity: 0.85;
    }

.cal-week-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    gap: 1px;
    background: var(--zc-border-light);
}

.cal-week-header {
    background: var(--zc-card-bg);
    text-align: center;
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--zc-text-muted);
}

    .cal-week-header.today-col {
        color: var(--zc-primary);
    }

.cal-week-time {
    background: var(--zc-card-bg);
    padding: 4px 8px;
    font-size: 10px;
    color: var(--zc-text-muted);
    text-align: right;
    border-top: 1px solid var(--zc-border-light);
}

.cal-week-cell {
    background: var(--zc-card-bg);
    min-height: 50px;
    border-top: 1px solid var(--zc-border-light);
    position: relative;
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .cal-week-cell:hover {
        background: var(--zc-primary-xxlight);
    }

.cal-week-event {
    position: absolute;
    left: 2px;
    right: 2px;
    top: 3px;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    z-index: 1;
    cursor: pointer;
}

.cal-day-schedule {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cal-day-slot {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid var(--zc-border-light);
    align-items: flex-start;
}

.cal-day-slot-time {
    width: 52px;
    font-size: 11px;
    color: var(--zc-text-muted);
    flex-shrink: 0;
    padding-top: 2px;
}

.cal-day-event-block {
    flex: 1;
    padding: 8px 12px;
    border-radius: var(--zc-radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

/* ── Event Popup ─────────────────────────────────────────────── */
.cal-event-popup {
    position: fixed;
    z-index: 2000;
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    box-shadow: var(--zc-shadow-xl);
    width: 300px;
    padding: 18px;
    display: none;
}

    .cal-event-popup.open {
        display: block;
        animation: fadeIn 0.15s ease;
    }

.cal-event-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cal-popup-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--zc-text-muted);
    font-size: 14px;
    padding: 4px;
    border-radius: var(--zc-radius-sm);
}

    .cal-popup-close:hover {
        background: var(--zc-border-light);
    }

/* ── Typography Page ─────────────────────────────────────────── */
.typo-sample {
    border: 1px solid var(--zc-border-light);
    border-radius: var(--zc-radius-sm);
    padding: 16px 20px;
    margin-bottom: 12px;
}

.typo-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--zc-text-muted);
    margin-bottom: 8px;
    display: block;
}

/* ── Component Preview Card ──────────────────────────────────── */
.component-preview {
    border: 1px solid var(--zc-border-light);
    border-radius: var(--zc-radius-sm);
    padding: 24px;
    margin-bottom: 16px;
    background: var(--zc-body-bg);
}

.component-preview-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--zc-text-muted);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Spinner ─────────────────────────────────────────────────── */
.zentic-spinner {
    display: inline-block;
    border-radius: 50%;
    border: 3px solid var(--zc-border-light);
    border-top-color: var(--zc-primary);
    animation: spin 0.8s linear infinite;
}

.zentic-spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.zentic-spinner-md {
    width: 32px;
    height: 32px;
}

.zentic-spinner-lg {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

.zentic-spinner-xl {
    width: 64px;
    height: 64px;
    border-width: 5px;
}

.zentic-spinner-cyan {
    border-top-color: var(--zc-secondary);
}

.zentic-spinner-green {
    border-top-color: var(--zc-success);
}

.zentic-spinner-orange {
    border-top-color: var(--zc-warning);
}

.zentic-spinner-red {
    border-top-color: var(--zc-danger);
}

.zentic-spinner.bw-2 {
    border-width: 2px;
}

.zentic-spinner .bt-white {
    border-top-color: #fff;
}

/* ── Toast Demo ──────────────────────────────────────────────── */
.toast-demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

/* ── Map Page ────────────────────────────────────────────────── */
#leafletMap,
#vectorMap {
    border-radius: var(--zc-radius-sm);
    overflow: hidden;
}

/* ── Chart Pages ─────────────────────────────────────────────── */
.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.chart-card {
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    overflow: hidden;
}

.chart-card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--zc-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

/* ── Navs & Tabs ─────────────────────────────────────────────── */
.zentic-tabs {
    display: flex;
    border-bottom: 2px solid var(--zc-border-light);
    gap: 0;
    margin-bottom: 20px;
}

.zentic-tab {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--zc-text-muted);
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--zc-font-sans);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition-fast);
}

    .zentic-tab:hover {
        color: var(--zc-text-primary);
    }

    .zentic-tab.active {
        color: var(--zc-primary);
        border-bottom-color: var(--zc-primary);
    }

.zentic-tab-pane {
    display: none;
}

    .zentic-tab-pane.active {
        display: block;
    }

/* ── Pagination Demo ─────────────────────────────────────────── */
.pagination-zentic {
    display: flex;
    gap: 4px;
    align-items: center;
}

    .pagination-zentic .page-btn {
        min-width: 36px;
    }

.pagi-select {
    height: 32px;
    padding: 4px 8px;
    font-size: 12px;
}

/* ── Cards Demo ──────────────────────────────────────────────── */
.demo-card {
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    overflow: hidden;
    transition: all var(--transition-fast);
}

    .demo-card:hover {
        box-shadow: var(--zc-shadow-md);
        transform: translateY(-2px);
    }

.demo-card-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--zc-primary), var(--zc-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

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

/* ── List Group ──────────────────────────────────────────────── */
.list-group-zentic {
    border-radius: 0 0 var(--zc-radius-lg) var(--zc-radius-lg);
    overflow: hidden;
}

.list-group-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--zc-border-light);
    font-size: 13px;
    background: var(--zc-card-bg);
    transition: background var(--transition-fast);
    cursor: pointer;
}

    .list-group-item:last-child {
        border-bottom: none;
    }

    .list-group-item:hover {
        background: var(--zc-body-bg);
    }

    .list-group-item.active {
        background: var(--zc-primary-xlight);
        color: var(--zc-primary);
        font-weight: 600;
    }

    .list-group-item.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ── Accordion ───────────────────────────────────────────────── */
.zentic-accordion {
    border: 1px solid var(--zc-border-color);
    overflow: hidden;
}

.accordion-item {
    border-bottom: 1px solid var(--zc-border-light);
}

    .accordion-item:last-child {
        border-bottom: none;
    }

.accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 13.5px;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--zc-font-sans);
    color: var(--zc-text-primary);
    transition: background var(--transition-fast);
}

    .accordion-btn:hover {
        background: var(--zc-body-bg);
    }

    .accordion-btn i.arrow {
        transition: transform var(--transition-fast);
    }

.accordion-item.open .accordion-btn i.arrow {
    transform: rotate(180deg);
}

.accordion-body {
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    font-size: 13.5px;
    color: var(--zc-text-secondary);
    line-height: 1.7;
}

.accordion-item.open .accordion-body {
    max-height: 200px;
    padding: 12px 16px 16px;
}

/* ── Popover ─────────────────────────────────────────────────── */
.zentic-popover {
    position: absolute;
    z-index: 1100;
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    box-shadow: var(--zc-shadow-lg);
    padding: 12px 14px;
    width: 220px;
    font-size: 12.5px;
    color: var(--zc-text-secondary);
    line-height: 1.6;
    display: none;
}

    .zentic-popover.open {
        display: block;
        animation: fadeIn 0.15s ease;
    }

.zentic-popover-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--zc-text-primary);
    margin-bottom: 6px;
}

/* ── Object Fit ──────────────────────────────────────────────── */
.object-fit-demo {
    width: 100%;
    height: 140px;
    border-radius: var(--zc-radius-sm);
    background: linear-gradient(135deg, var(--zc-primary-xlight), #CFFAFE);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--zc-border-color);
    overflow: hidden;
}

    .object-fit-demo img {
        width: 100%;
        height: 100%;
    }

/* ── Edit Modal Full ─────────────────────────────────────────── */
.zentic-modal.modal-lg {
    max-width: 720px;
}

.zentic-modal.modal-xl {
    max-width: 900px;
}

/* ── Dashboard improvements ──────────────────────────────────── */
.mini-chart-bar {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 52px;
    margin-top: auto;
    overflow: hidden;
    border-radius: 0 0 var(--zc-radius-xl) var(--zc-radius-xl);
    padding: 0 2px;
}

.mini-bar {
    flex: 1;
    border-radius: var(--zc-radius-xs) var(--zc-radius-xs) 0 0;
    min-width: 4px;
    transition: height 0.6s cubic-bezier(.4, 0, .2, 1);
}

/* ── Language Switcher ───────────────────────────────────────── */
.lang-switcher {
    position: relative;
    display: flex;
    align-items: center;
}

/* Trigger button */
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    background: var(--zc-card-bg);
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    white-space: nowrap;
}

    .lang-btn:hover {
        border-color: var(--zc-primary);
        background: var(--zc-primary-xxlight);
        box-shadow: 0 0 0 3px rgba(80, 70, 229, 0.08);
    }

.lang-switcher.open .lang-btn {
    border-color: var(--zc-primary);
    background: var(--zc-primary-xxlight);
    box-shadow: 0 0 0 3px rgba(80, 70, 229, 0.10);
}

.lang-globe {
    font-size: 13px;
    color: var(--zc-primary);
}

.lang-flag-btn {
    width: 22px;
    height: 16px;
    object-fit: cover;
    flex-shrink: 0;
    vertical-align: middle;
    border-radius: 2px;
    display: inline-block;
}

.lang-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--zc-text-primary);
}

.lang-arrow {
    font-size: 9px;
    color: var(--zc-text-muted);
    transition: transform 0.22s ease;
    margin-left: 1px;
}

.lang-switcher.open .lang-arrow {
    transform: rotate(180deg);
}

/* Dropdown panel */
.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
    z-index: 1100;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

.lang-switcher.open .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Dropdown header */
.lang-dropdown-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px 11px;
    border-bottom: 1px solid var(--zc-border-light);
    font-size: 12px;
    font-weight: 700;
    color: var(--zc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

    .lang-dropdown-header .icon-globe {
        font-size: 11px;
        color: var(--zc-primary);
    }

/* Search */
.lang-search-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    background: var(--zc-body-bg);
    border-bottom: 1px solid var(--zc-border-light);
}

    .lang-search-wrap .icon-search {
        font-size: 11px;
        color: var(--zc-text-muted);
        flex-shrink: 0;
    }

.lang-search {
    border: none;
    outline: none;
    background: transparent;
    font-size: 12.5px;
    color: var(--zc-text-primary);
    width: 100%;
    font-family: inherit;
}

    .lang-search::placeholder {
        color: var(--zc-text-muted);
    }

/* List */
.lang-list {
    max-height: 260px;
    overflow-y: auto;
    padding: 5px 0;
}

    .lang-list::-webkit-scrollbar {
        width: 3px;
    }

    .lang-list::-webkit-scrollbar-thumb {
        background: var(--zc-border-color);
        border-radius: 4px;
    }

/* Language item */
.lang-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.14s;
    border-radius: 0;
}

    .lang-item:hover {
        background: var(--zc-body-bg);
    }

    .lang-item.active {
        background: var(--zc-primary-xxlight);
    }

.lang-flag {
    width: 26px;
    height: 20px;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    border-radius: 3px;
}

/* Info column */
.lang-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.lang-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--zc-text-primary);
    line-height: 1.3;
}

.lang-item.active .lang-name {
    color: var(--zc-primary);
}

.lang-region {
    font-size: 11px;
    color: var(--zc-text-muted);
    line-height: 1.2;
}

/* Check icon */
.lang-check {
    font-size: 13px;
    color: var(--zc-primary);
    flex-shrink: 0;
}

.lang-item:not(.active) .lang-check {
    display: none;
}

/* No results */
.lang-no-results {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    font-size: 12.5px;
    color: var(--zc-text-muted);
    text-align: center;
}

    .lang-no-results .icon-frown {
        font-size: 22px;
        opacity: 0.4;
    }

@media (max-width: 768px) {
    header .lang-label {
        display: none;
    }
}

@media(max-width: 576px) {

    .lang-btn {
        padding: 0 3px;
    }

    .lang-flag-btn {
        width: 20px;
        height: 14px;
    }
}

@media(max-width: 480px) {
    header .lang-dropdown {
        top: 100%;
        right: 10px;
    }

    header .lang-switcher {
        position: inherit;
    }

    header .lang-btn {
        border: none;
    }

        header .lang-btn .lang-label {
            display: none;
        }

        header .lang-btn i.lang-arrow {
            display: none;
        }
}

/* ── Budget Utilisation improvements ─────────────────────────── */
.progress-zentic.thick {
    height: 16px !important;
}

.budget-model-card {
    padding: 14px 16px;
    border-radius: var(--zc-radius-sm);
    border: 1px solid var(--zc-border-light);
    transition: box-shadow 0.2s ease;
}

    .budget-model-card .progress-zentic {
        background: #fff;
    }

    .budget-model-card .progress-zentic {
        height: 5px;
    }

    .budget-model-card.primary {
        background: #ECEBFE;
        border-color: #EEF2FF;
    }

    .budget-model-card.secondary {
        background: var(--zc-secondary-xlight);
        border-color: var(--zc-secondary-light)
    }

    .budget-model-card.warning {
        background: var(--zc-warning-light);
        border-color: rgba(245, 158, 11, 0.2)
    }

    .budget-model-card.success {
        background: var(--zc-success-light);
        border-color: rgba(16, 185, 129, 0.2)
    }

    .budget-model-card:hover {
        box-shadow: var(--zc-shadow-sm);
    }

    .budget-model-card .model-label {
        font-size: 11px;
        font-weight: 700;
        color: #6B7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }

    .budget-model-card .model-amount {
        font-size: 18px;
        font-weight: 800;
        margin-bottom: 8px;
    }

/* ── DataTable Checkbox fix ───────────────────────────────────── */
.dataTables_wrapper table.dataTable tbody tr.selected {
    background: var(--zc-primary-xxlight) !important;
}

    .dataTables_wrapper table.dataTable tbody tr.selected td {
        color: var(--zc-primary) !important;
    }

/* ── Grid JS Table ───────────────────────────────────────────── */
.gridjs-wrapper {
    border-radius: var(--zc-radius-lg) var(--zc-radius-lg) 0 0 !important;
    border: 1px solid var(--zc-border-color) !important;
}

.gridjs-table th {
    background: var(--zc-body-bg) !important;
    color: var(--zc-text-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
}

.gridjs-table td {
    font-size: 13px !important;
}

.gridjs-pagination {
    font-size: 12px !important;
}

    .gridjs-pagination .gridjs-pages button {
        border: 1px solid var(--zc-border-color);
        background: var(--zc-card-bg);
        color: inherit;
    }

        .gridjs-pagination .gridjs-pages button.gridjs-currentPage,
        .gridjs-pagination .gridjs-pages button:hover {
            background-color: var(--zc-primary);
            color: #fff;
            border-color: var(--zc-primary);
        }

            .gridjs-pagination .gridjs-pages button:disabled,
            .gridjs-pagination .gridjs-pages button:hover:disabled,
            .gridjs-pagination .gridjs-pages button[disabled] {
                border-color: var(--zc-border-color);
            }

[data-theme="dark"] th.gridjs-th {
    border-color: var(--zc-border-color);
}

/* chart-grid responsive — consolidated into section 38 above */

/* ── Pulse animation for skeleton loaders ──────────────────── */
@keyframes pulse {

    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ── Alert close button color ────────────────────────────────── */
.alert-close {
    background: none;
    border: none;
    cursor: pointer;
    color: currentColor;
    opacity: 0.6;
    font-size: 14px;
    padding: 2px;
    line-height: 1;
    transition: opacity var(--transition-fast);
}

    .alert-close:hover {
        opacity: 1;
    }

/* ── Fix toast item base style ───────────────────────────────── */
.toast-item {
    border-left: 3px solid var(--zc-primary);
}

    .toast-item:has(.icon-circle-check) {
        border-left-color: var(--zc-success);
    }

    .toast-item:has(.icon-circle-x) {
        border-left-color: var(--zc-danger);
    }

    .toast-item:has(.icon-triangle-alert) {
        border-left-color: var(--zc-warning);
    }

/* ── Table selected row ──────────────────────────────────────── */
.zentic-table tbody tr.selected {
    background: var(--zc-primary-xxlight) !important;
}

/* ── Nav dropdown open state smooth ─────────────────────────── */
.nav-dropdown-menu {
    animation: fadeIn 0.15s ease;
}

/* ── File Manager List View ──────────────────────────────────── */
.fm-list-view {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    gap: 0;
}

    .fm-list-view .fm-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--zc-border-light);
        text-align: left;
    }

        .fm-list-view .fm-item:last-child {
            border-bottom: none;
        }

    .fm-list-view .fm-icon-wrap {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        font-size: 15px;
        margin-bottom: 0;
    }

    .fm-list-view .fm-item-name {
        flex: 1;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fm-list-view .fm-item-meta {
        font-size: 12px;
        color: var(--zc-text-muted);
        min-width: 80px;
        text-align: right;
        margin-top: 0;
    }

/* ── Users Table Row Selected (light tint not full blue) ─────── */
table.dataTable > tbody > tr.selected > * {
    background: var(--zc-primary-xxlight) !important;
    box-shadow: none !important;
}

/* ── Transactions Pagination ─────────────────────────────────── */
#txPagination {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--zc-border-light);
}

    #txPagination .pagination {
        margin: 0;
    }

    #txPagination .page-link.disabled {
        cursor: not-allowed;
    }

/* ── Sidebar Profile Popup ───────────────────────────────────── */
.sidebar-user {
    cursor: pointer;
}

.sidebar-profile-popup {
    position: fixed;
    bottom: 74px;
    left: 12px;
    width: calc(var(--zc-sidebar-width) - 24px);
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 15, 35, 0.16), 0 4px 16px rgba(15, 15, 35, 0.08);
    display: none;
    z-index: 9999;
    overflow: hidden;
    animation: fadeIn 0.15s ease;
}

    .sidebar-profile-popup.open {
        display: block;
    }

.zentic-sidebar.collapsed .sidebar-profile-popup {
    display: none !important;
}

.spp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 13px;
    border-bottom: 1px solid var(--zc-border-light);
    background: rgba(80, 70, 229, 0.06);
}

.spp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.spp-info {
    flex: 1;
    overflow: hidden;
}

.spp-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--zc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spp-subtitle {
    display: block;
    font-size: 11px;
    color: var(--zc-text-muted);
    margin-top: 1px;
}

.spp-close {
    width: 24px;
    height: 24px;
    border: 1px solid var(--zc-border-color);
    border-radius: 50%;
    background: var(--zc-body-bg);
    color: var(--zc-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

    .spp-close:hover {
        background: var(--zc-border-light);
        color: var(--zc-text-primary);
    }

.spp-body {
    padding: 8px;
}

.spp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--zc-text-secondary);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

    .spp-item:hover {
        background: var(--zc-body-bg);
        color: var(--zc-text-primary);
    }

    .spp-item i {
        width: 16px;
        text-align: center;
        font-size: 13px;
        flex-shrink: 0;
        color: var(--zc-text-muted);
    }

    .spp-item:hover i {
        color: var(--zc-primary);
    }

.spp-divider {
    border: 0;
    border-top: 1px solid var(--zc-border-light);
    margin: 4px 0;
}

.spp-divider-2 {
    border-color: var(--zc-border-light);
    margin: 12px 0;
}

.spp-danger {
    color: #F87171;
}

    .spp-danger i {
        color: #F87171 !important;
    }

    .spp-danger:hover {
        background: rgba(239, 68, 68, 0.1) !important;
        color: var(--zc-danger) !important;
    }

        .spp-danger:hover i {
            color: var(--zc-danger) !important;
        }

/* ── Share Popup Modal ───────────────────────────────────────── */
.share-link-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--zc-body-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    padding: 10px 14px;
}

    .share-link-box code {
        flex: 1;
        font-size: 12px;
        color: var(--zc-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ── API Key View button ─────────────────────────────────────── */
.api-key-view-btn {
    flex-shrink: 0;
}

/* ── Prompt filter active button ─────────────────────────────── */
.prompt-filter-btn.btn-primary {
    background: var(--zc-primary);
    color: #fff;
    border-color: var(--zc-primary);
}

/* ── DataTables pagination brand ────────────────────────────── */
.dataTables_wrapper .paginate_button.current {
    background: var(--zc-primary) !important;
    color: #fff !important;
    border-color: var(--zc-primary) !important;
    border-radius: var(--zc-radius-md) !important;
}

.dataTables_wrapper .paginate_button:hover:not(.disabled):not(.current) {
    background: var(--zc-primary-xlight) !important;
    color: var(--zc-primary) !important;
    border-color: var(--zc-primary-light) !important;
    border-radius: var(--zc-radius-md) !important;
}

.dataTables_wrapper .dataTables_info {
    color: var(--zc-text-muted);
    font-size: 13px;
}

/* ============================================================
   40. EXTRACTED INLINE COMPONENT STYLES
   ============================================================ */

/* -- Utility extensions ------------------------------------ */
.z-1 {
    z-index: 1;
}

.text-2xs {
    font-size: 10px;
}

.text-3xs {
    font-size: 8px;
}

.min-w-0 {
    min-width: 0;
}

.icon-w-sm {
    width: 16px;
}

.cursor-help {
    cursor: help;
}

.cursor-pointer {
    cursor: pointer;
}

.pe-events-auto {
    pointer-events: auto;
}

/* -- Upload / drag-drop zone ------------------------------- */
.upload-drop-zone {
    border: 2px dashed var(--zc-border-light);
    border-radius: var(--zc-radius-sm);
    padding: 32px;
    text-align: center;
    margin-bottom: 16px;
}

.upload-drop-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

/* -- AI model icon gradients ------------------------------- */
.model-icon-gpt {
    background: linear-gradient(135deg, var(--zc-gpt), #1a7a5e);
}

.model-icon-claude {
    background: linear-gradient(135deg, var(--zc-claude), #a85c3e);
}

.model-icon-gemini {
    background: linear-gradient(135deg, var(--zc-google), var(--zc-blue));
}

.model-icon-mistral {
    background: linear-gradient(135deg, var(--zc-primary-dark), #312E81);
}

.model-icon-llama {
    background: linear-gradient(135deg, var(--zc-info), var(--zc-blue));
}

/* -- Auth icon wrappers ------------------------------------ */
.auth-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.auth-icon-wrap-primary {
    background: var(--zc-primary-xlight);
}

.auth-icon-wrap-success {
    background: var(--zc-success-light);
}

.auth-bg-icon-wrap {
    background: var(--zc-primary-xlight);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* -- Team card banners ------------------------------------- */
.team-card-banner {
    height: 60px;
}

.team-card-banner-purple {
    background: linear-gradient(135deg, var(--zc-primary), rgba(80, 70, 229, 0.53));
}

.team-card-banner-cyan {
    background: linear-gradient(135deg, var(--zc-secondary), rgba(6, 182, 212, 0.53));
}

.team-card-banner-green {
    background: linear-gradient(135deg, var(--zc-success), rgba(16, 185, 129, 0.53));
}

.team-card-banner-red {
    background: linear-gradient(135deg, var(--zc-danger), rgba(239, 68, 68, 0.53));
}

.team-card-banner-blue-dk {
    background: linear-gradient(135deg, var(--zc-cyan), rgba(8, 145, 178, 0.53));
}

.team-card-banner-blue {
    background: linear-gradient(135deg, var(--zc-info), rgba(59, 130, 246, 0.53));
}

.team-card-banner-amber {
    background: linear-gradient(135deg, var(--zc-warning), rgba(245, 158, 11, 0.53));
}

.team-card-avatar {
    border: 3px solid var(--zc-card-bg);
    transform: translateY(-32px);
    margin-bottom: -16px;
}

/* -- Profile / user-detail cover --------------------------- */
.profile-cover {
    background: linear-gradient(135deg, var(--zc-primary), var(--zc-secondary));
    border-radius: var(--zc-radius-xl) var(--zc-radius-xl) 0 0;
}

.profile-cover-sm {
    height: 90px;
}

.profile-cover-md {
    height: 100px;
    position: relative;
}

.profile-cover-avatar-abs {
    border-radius: 50%;
    border: 4px solid var(--zc-card-bg);
    position: absolute;
    bottom: -40px;
    left: 20px;
}

.profile-avatar-offset {
    transform: translateY(-36px);
    margin-bottom: -20px;
}

    .profile-avatar-offset .avatar-gen {
        border: 4px solid var(--zc-card-bg);
    }

/* -- Timeline ---------------------------------------------- */
.timeline-track {
    position: absolute;
    left: 19px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--zc-border-color);
    z-index: 0;
}

.timeline-dot-primary {
    background: var(--zc-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
    z-index: 1;
}

.timeline-dot-muted {
    background: var(--zc-border-color);
    color: var(--zc-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
    z-index: 1;
}

.timeline-block .track {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

/* -- Chat sidebar list ------------------------------------- */
.chat-list-item {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--zc-border-light);
}

.chat-list-item-active {
    background: var(--zc-primary-xxlight);
}

.chat-list-item .content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-active-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--zc-success);
    border: 2px solid var(--zc-card-bg);
    position: absolute;
    bottom: 0;
    right: 0;
}

.chat-list-body {
    flex: 1;
    min-width: 0;
}

.chat-list-avatar-wrap {
    width: 38px;
    height: 38px;
    border-radius: var(--zc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
}

.chat-active-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--zc-primary);
}

/* -- OTP inputs -------------------------------------------- */
.otp-input {
    height: 52px;
    font-size: 22px;
    padding: 0;
}

/* -- Pricing ----------------------------------------------- */
.pricing-card-body {
    padding: 28px;
}

.pricing-card-price {
    font-size: 34px;
}

.pricing-badge-new {
    font-size: 9px;
}

.pricing-card-popular {
    border: 2px solid var(--zc-primary);
    position: relative;
}

.pricing-card-popular-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--zc-primary);
    color: #fff;
    padding: 4px 16px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pricing-card-enterprise {
    background: linear-gradient(135deg, var(--zc-dark-surface), var(--zc-dark-surface-2));
    border-color: rgba(80, 70, 229, 0.3);
}

.pricing-enterprise-price {
    font-size: 34px;
    color: #8A82F0;
}

.pricing-enterprise-sub {
    color: var(--zc-on-dark-text-muted);
}

.pricing-enterprise-item {
    color: #D1D5DB;
}

.pricing-enterprise-icon {
    margin-top: 2px;
    flex-shrink: 0;
}

.pricing-toggle-group {
    background: var(--zc-border-light);
    border-radius: 100px;
    border: 1px solid var(--zc-border-color);
    gap: 4px;
}

.pricing-toggle-btn {
    border-radius: 100px;
}

/* -- Calendar ---------------------------------------------- */
.cal-event-icon {
    width: 36px;
    height: 40px;
    border-radius: var(--zc-radius-sm);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .cal-event-icon span.small {
        font-size: 8px;
        font-weight: 700;
    }

    .cal-event-icon span.normal {
        font-size: 15px;
        font-weight: 800;
        line-height: 1;
    }

.cal-color-dot {
    border-radius: 2px;
}

.cal-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.cal-swatch-active {
    border-radius: 6px;
    outline: 3px solid var(--zc-text-primary);
}

.zentic-event-categories .toggle-switch {
    transform: scale(0.7);
}

.zentic-cal-event-popup i {
    width: 14px;
}

/* -- AI Agents empty drop ---------------------------------- */
.agent-empty-drop {
    border: 2px dashed var(--zc-border-color);
    padding: 40px 20px;
}

.agent-empty-icon {
    font-size: 22px;
}

/* -- Info / banner boxes ----------------------------------- */
.info-box-bg {
    background: var(--zc-body-bg);
    border-radius: var(--zc-radius-sm);
    border: 1px solid var(--zc-border-color);
}

.training-info-box {
    background: var(--zc-info-light);
    border-radius: var(--zc-radius-sm);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* -- Changelog --------------------------------------------- */
.changelog-card-top {
    border-top: 3px solid var(--zc-primary);
}

.changelog-feature-list {
    padding-left: 20px;
    color: var(--zc-text-secondary);
    font-size: 13px;
    line-height: 2;
}

/* -- Kanban ------------------------------------------------- */
.kanban-secondary-bg {
    background: rgba(6, 182, 212, .1);
}

.kanban-primary-bg {
    background: rgba(80, 70, 229, 0.1);
}

.kanban-border-primary {
    border-left: 3px solid var(--zc-primary);
}

.kanban-border-secondary {
    border-left: 3px solid var(--zc-secondary);
}

.kanban-badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #B45309;
}

.kanban-badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: #065F46;
}

/* -- Maps leaflet ------------------------------------------ */
.map-card-body-flush {
    padding: 0;
}

.map-container-full {
    border-radius: 0 0 var(--zc-radius-xl) var(--zc-radius-xl);
}

.map-container-md {
    height: 420px;
}

.map-container-sm {
    height: 220px;
}

.map-color-1 {
    color: var(--zc-primary);
}

.map-color-2 {
    color: var(--zc-secondary);
}

.map-color-3 {
    color: var(--zc-success);
}

.map-color-4 {
    color: var(--zc-warning);
}

.map-color-5 {
    color: var(--zc-danger);
}

.map-color-6 {
    color: var(--zc-info);
}

/* -- Maps vector ------------------------------------------- */
.vector-map-wrap {
    height: 380px;
    background: var(--zc-body-bg);
    border-radius: var(--zc-radius-sm);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vector-legend-swatch-1 {
    border-radius: 2px;
    background: rgba(80, 70, 229, 0.2);
}

.vector-legend-swatch-2 {
    border-radius: 2px;
    background: rgba(80, 70, 229, 0.5);
}

.vector-legend-swatch-3 {
    border-radius: 2px;
    background: rgba(80, 70, 229, 0.8);
}

.vector-legend-swatch-4 {
    border-radius: 2px;
    background: var(--zc-primary);
}

.vector-bar-pink {
    background: var(--zc-pink);
}

.vector-bar-violet {
    background: var(--zc-primary-dark);
}

/* -- Inbox ------------------------------------------------- */
.inbox-toolbar {
    margin: 12px;
    width: calc(100% - 24px);
    justify-content: center;
}

.inbox-list-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--zc-border-light);
}

    .inbox-list-item .topbar-search {
        padding: 5px 10px;
    }

.inbox-list-body {
    flex: 1;
    min-width: 0;
}

.inbox-compose-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--zc-border-light);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
}

.inbox-reply-input {
    border: none;
    padding: 12px 14px;
    font-size: 13px;
    font-family: var(--zc-font-sans);
    color: var(--zc-text-primary);
    background: var(--zc-card-bg);
    outline: none;
    resize: none;
    min-height: 72px;
}

/* -- File manager ------------------------------------------ */
.fm-file-list-wrap {
    min-height: 560px;
}

.fm-icon-amber {
    color: var(--zc-warning);
    width: 16px;
}

.fm-icon-cyan {
    color: var(--zc-secondary);
    width: 16px;
}

.fm-icon-green {
    color: var(--zc-success);
    width: 16px;
}

.fm-icon-purple {
    color: var(--zc-primary);
    width: 16px;
}

.fm-item-pdf {
    background: rgba(245, 158, 11, 0.12);
}

.fm-item-doc {
    background: rgba(239, 68, 68, 0.12);
}

.fm-item-xls {
    background: rgba(16, 185, 129, 0.12);
}

.fm-item-ppt {
    background: rgba(80, 70, 229, 0.12);
}

.fm-item-img {
    background: rgba(59, 130, 246, 0.12);
}

.fm-item-ai {
    background: rgba(80, 70, 229, 0.12);
}

.fm-item-fig {
    background: rgba(8, 145, 178, 0.12);
}

.fm-item-sql {
    background: rgba(6, 182, 212, 0.12);
}

.fm-item-zip {
    background: rgba(239, 68, 68, 0.12);
}

.fm-item-csv {
    background: rgba(107, 114, 128, 0.12);
}

.fm-item-sketch {
    background: rgba(236, 72, 153, 0.12);
}

.fm-item-video {
    background: rgba(245, 158, 11, 0.12);
}

/* -- Settings ---------------------------------------------- */
.settings-ai-banner {
    background: linear-gradient(135deg, var(--zc-primary-xxlight), var(--zc-secondary-xlight));
    border-radius: var(--zc-radius-xl);
    border: 1px solid var(--zc-primary-xlight);
    margin-bottom: 16px;
}

.settings-ai-icon {
    font-size: 22px;
}

.settings-border-l {
    border-left: 1px solid var(--zc-border-color);
}

.settings-avatar-img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid var(--zc-primary-xlight);
}

.settings-avatar-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    font-size: 11px;
}

/* -- Edit user avatar -------------------------------------- */
.edit-user-avatar-wrap {
    width: 96px;
    margin: 0 auto 16px;
}

.edit-user-avatar-img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid var(--zc-primary-xlight);
}

.edit-user-avatar-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--zc-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

/* -- Lock screen ------------------------------------------- */
.lock-screen-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(15, 15, 35, 0.05) 1px, transparent 1px), var(--zc-body-bg);
    background-size: 22px 22px, 100% 100%;
    padding: 24px;
}

.lock-avatar-wrap {
    width: 88px;
    height: 88px;
    margin: 0 auto 24px;
}

.lock-avatar-img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 4px solid var(--zc-card-bg);
}

.lock-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--zc-primary);
    border: 3px solid var(--zc-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock-status-icon {
    color: #fff;
    font-size: 12px;
}

/* -- Progress legend dots ---------------------------------- */
.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
}

.legend-dot-primary {
    background: var(--zc-primary);
}

.legend-dot-secondary {
    background: var(--zc-secondary);
}

.legend-dot-success {
    background: var(--zc-success);
}

/* -- UI button groups -------------------------------------- */
.btn-group-left {
    border-radius: var(--zc-radius-md) 0 0 var(--zc-radius-md);
}

.btn-sm.btn-left {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-sm.btn-right {
    border-right: none
}

.btn-sm.btn-full {
    border: 1px solid var(--zc-border-color)
}

.btn-sm.btn-full-center {
    border: 1px solid var(--zc-border-color);
    border-left: none;
    border-right: none;
}

.btn-sm.btn-full-right {
    border: 1px solid var(--zc-border-color);
    border-right: none
}

.btn-group-mid {
    border-radius: 0;
}

.btn-group-right {
    border-radius: 0 var(--zc-radius-md) var(--zc-radius-md) 0;
}

.btn-seg-wrap {
    background: var(--zc-body-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    width: fit-content;
    gap: 2px;
}

.btn-seg-btn {
    border-radius: var(--zc-radius-sm);
}

.btn-pill-wrap {
    background: var(--zc-body-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-pill);
    width: fit-content;
    gap: 4px;
}

.btn-pill-btn {
    border-radius: var(--zc-radius-pill);
}

/* -- UI dropdown model indicators ------------------------- */
.dropdown-model-dot {
    font-size: 8px;
    margin-right: 8px;
}

.dropdown-icon-36 {
    width: 36px;
}

/* -- Search results ---------------------------------------- */
.search-input-lg {
    padding: 11px 18px;
}

.search-title-lg {
    font-size: 15px;
}

/* ============================================================
   41. CALL MODALS — unique dark gradient design
   ============================================================ */
.call-modal-content {
    border-radius: 20px !important;
    overflow: hidden;
    border: none !important;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
}

.call-modal-bg {
    background: linear-gradient(160deg, #13002b 0%, #2d0a5e 45%, #160036 100%);
    min-height: 500px;
    padding: 36px 40px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.call-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 13px;
}

    .call-modal-close:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

.call-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(80, 70, 229, 0.25);
    border: 1px solid rgba(80, 70, 229, 0.4);
    border-radius: 20px;
    padding: 5px 16px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.call-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8A82F0;
    animation: callDotBlink 1.2s ease-in-out infinite;
}

@keyframes callDotBlink {

    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Concentric pulsing rings */
.call-rings-wrap {
    width: 168px;
    height: 168px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.call-ring {
    position: absolute;
    border-radius: 50%;
    animation: callRingPulse 2.4s ease-out infinite;
}

.call-ring-1 {
    width: 104px;
    height: 104px;
    background: rgba(80, 70, 229, 0.28);
    animation-delay: 0s;
}

.call-ring-2 {
    width: 136px;
    height: 136px;
    background: rgba(80, 70, 229, 0.16);
    animation-delay: 0.7s;
}

.call-ring-3 {
    width: 168px;
    height: 168px;
    background: rgba(80, 70, 229, 0.08);
    animation-delay: 1.4s;
}

@keyframes callRingPulse {
    0% {
        transform: scale(0.75);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.call-contact-avatar {
    border: 3px solid rgba(255, 255, 255, 0.22) !important;
    z-index: 1;
    position: relative;
}

.call-contact-name {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.call-contact-role {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
}

/* Control buttons (mute / speaker / keypad) */
.call-ctrl-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.75);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin: 0 auto 6px;
}

    .call-ctrl-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .call-ctrl-btn.active {
        background: rgba(255, 255, 255, 0.88);
        color: #2d0a5e;
    }

.call-ctrl-label {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    text-align: center;
    margin: 0;
}

/* Accept / Decline */
.call-action-btn {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    border: none;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 auto;
    transition: transform 0.2s, filter 0.2s;
}

.call-action-accept {
    background: #22c55e;
    color: #fff;
}

    .call-action-accept:hover {
        transform: scale(1.1);
        filter: brightness(1.1);
    }

.call-action-decline {
    background: var(--zc-danger);
    color: #fff;
}

    .call-action-decline:hover {
        transform: scale(1.1);
        filter: brightness(1.1);
    }

/* Video call specifics */
.call-video-preview {
    width: 100%;
    background: #080814;
    border-radius: 14px;
    height: 196px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.call-video-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(80, 70, 229, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.call-video-self {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 78px;
    height: 56px;
    background: #1a1a2e;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 10px;
}

.call-video-name-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

/* ============================================================
   42. INBOX ACTION STATES
   ============================================================ */
.inbox-email-row {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    .inbox-email-row.mail-removing {
        opacity: 0 !important;
        transform: translateX(-20px) !important;
        pointer-events: none;
    }

/* Active button states — toggled via JS class on the button itself */
[data-inbox-action="star"].mail-btn-active i {
    color: var(--zc-warning) !important;
}

[data-inbox-action="unread"].mail-btn-active i {
    color: var(--zc-primary) !important;
}

[data-inbox-action].mail-btn-active {
    background: var(--zc-primary-xlight) !important;
}

/* -- Transactions ------------------------------------------ */
.paypal-blue {
    color: #003087;
}

/* -- UI object-fit ----------------------------------------- */
.card-img-banner {
    height: 140px;
    border-radius: var(--zc-radius-sm);
    overflow: hidden;
    border: 1px solid var(--zc-border-color);
}

.card-img-inner-banner {
    height: 100%;
    background: linear-gradient(135deg, var(--zc-primary), var(--zc-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: rgba(255, 255, 255, 0.5);
}

.img-clip-circle {
    overflow: hidden;
    background: var(--zc-primary);
    flex-shrink: 0;
}

.card-img-header {
    height: 140px;
    overflow: hidden;
    border-radius: var(--zc-radius-xl) var(--zc-radius-xl) 0 0;
}

.card-even-img-banner {
    height: 140px;
    border-radius: var(--zc-radius-sm);
    overflow: hidden;
    border: 1px solid var(--zc-border-color);
    background: var(--zc-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-even-img-inner-banner {
    width: 80%;
    height: 80%;
    background: linear-gradient(135deg, var(--zc-success), var(--zc-secondary));
    border-radius: var(--zc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: rgba(255, 255, 255, 0.6);
}

/* -- UI popovers demo -------------------------------------- */
.popover-demo {
    position: absolute;
    top: 36px;
    left: 0;
}

.popover-mono {
    font-size: 11px;
    font-family: var(--zc-font-mono);
}

/* -- UI navs-tabs vertical --------------------------------- */
.nav-bg {
    background: var(--zc-body-bg);
    border-radius: var(--zc-radius-sm);
}

.vertical-tab-panel {
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    overflow: hidden;
}

.vertical-tab-nav {
    width: 140px;
    border-right: 1px solid var(--zc-border-color);
    background: var(--zc-body-bg);
    flex-shrink: 0;
}

.vertical-tab-link {
    display: block;
    text-align: left;
    border-bottom: 1px solid var(--zc-border-light);
    border-radius: 0;
    padding: 12px 14px;
}

.vertical-tab-link-last {
    display: block;
    text-align: left;
    border-radius: 0;
    padding: 12px 14px;
}

.vertical-tab-body {
    flex: 1;
    padding: 16px;
}

.grid-list-switch {
    background: var(--zc-body-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    gap: 4px;
}

.grid-item {
    background: var(--zc-body-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-item {
    border: 1px solid var(--zc-border-light);
    border-radius: var(--zc-radius-sm);
}

#viewListContent {
    display: none;
    ;
}

/* -- UI spinners skeleton ---------------------------------- */
.skeleton-wrap {
    background: var(--zc-body-bg);
    border-radius: var(--zc-radius-xl);
    padding: 60px 24px;
    text-align: center;
    border: 1px dashed var(--zc-border-color);
}

.skeleton-avatar {
    background: var(--zc-border-light);
    animation: pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.skeleton-body {
    flex: 1;
}

.skeleton-line-1 {
    height: 12px;
    background: var(--zc-border-light);
    border-radius: 6px;
    margin-bottom: 8px;
    animation: pulse 1.5s ease-in-out infinite;
}

.skeleton-line-2 {
    height: 10px;
    background: var(--zc-border-light);
    border-radius: 6px;
    width: 60%;
    animation: pulse 1.5s ease-in-out infinite;
}

.skeleton-line {
    height: 10px;
    background: var(--zc-border-light);
    border-radius: 6px;
    margin-bottom: 8px;
    animation: pulse 1.5s ease-in-out infinite;
}

.skeleton-line-md {
    width: 85%;
}

.skeleton-line-sm {
    width: 70%;
}

/* -- UI toasts preview ------------------------------------- */
.toast-preview {
    display: block;
    background: var(--zc-body-bg);
    padding: 12px 14px;
    border-radius: var(--zc-radius-sm);
    font-size: 12.5px;
    font-family: var(--zc-font-mono);
    line-height: 1.8;
}

/* -- UI typography gradient text --------------------------- */
.gradient-text-warm {
    background: linear-gradient(90deg, var(--zc-warning), var(--zc-danger));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-cool {
    background: linear-gradient(90deg, var(--zc-success), var(--zc-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* -- Code / inline blocks ---------------------------------- */
.code-block-inline {
    background: var(--zc-body-bg);
    border-radius: var(--zc-radius-sm);
    font-family: var(--zc-font-mono);
    font-size: 12px;
}

.typo-sample-block {
    background: var(--zc-body-bg);
    padding: 10px 14px;
    border-radius: var(--zc-radius-sm);
    font-size: 13px;
}

/* -- Invoice ----------------------------------------------- */
.invoice-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 48px;
}

.invoice-brand {
    font-size: 28px;
    letter-spacing: -0.5px;
}

.invoice-ref {
    font-size: 16px;
}

.invoice-total {
    font-size: 24px;
}

@media(max-width: 575px) {
    .invoice-wrap {
        padding: 20px;
    }

    .invoice-brand {
        font-size: 24px;
    }
}

/* -- Form wizard ------------------------------------------- */
.wizard-progress-track {
    position: absolute;
    top: 15px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--zc-border-color);
    z-index: 0;
}

.wizard-progress-fill {
    height: 100%;
    background: var(--zc-primary);
    width: 0%;
    transition: width .4s ease;
    border-radius: 2px;
}

.wizard-progress-block .number {
    background: var(--zc-border-color);
    color: var(--zc-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    font-weight: 700;
    font-size: 13px;
}

.wizard-progress-block .active .number {
    background: var(--zc-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    font-weight: 700;
    font-size: 13px;
}

.wizard-progress-block .label {
    font-size: 11px;
    color: var(--zc-text-muted)
}

.wizard-progress-block .active .label {
    font-size: 11px;
    font-weight: 600;
}

/* -- Signup password strength bars ------------------------- */
.pwd-strength-bar {
    height: 3px;
    flex: 1;
    border-radius: 2px;
}

.pwd-bar-danger {
    background: var(--zc-danger);
}

.pwd-bar-warning {
    background: var(--zc-warning);
}

.pwd-bar-muted {
    background: var(--zc-border-color);
}

/* -- UI cards dark card ------------------------------------ */
.card-dark {
    background: linear-gradient(135deg, var(--zc-dark-surface), var(--zc-dark-surface-2));
    border-color: rgba(80, 70, 229, 0.3);
}

.card-dark-accent {
    color: #8A82F0;
}

.card-dark-sub {
    color: var(--zc-on-dark-text-muted);
}

.card-dark-text {
    color: #D1D5DB;
}

.card-dark-icon {
    font-size: 32px;
    color: #8A82F0;
    margin-bottom: 4px;
}

.card-rgba-text {
    color: rgba(255, 255, 255, 0.6);
}

.card-border-top-primary {
    border-top: 3px solid var(--zc-primary);
}

/* -- FAQ --------------------------------------------------- */
.faq-code-inline {
    font-family: var(--zc-font-mono);
    background: var(--zc-border-light);
    padding: 1px 5px;
    border-radius: 3px;
}

.faq-cta-body {
    padding: 28px;
}

.faq-cta-icon {
    font-size: 22px;
}

/* -- AI chat suggestion list ------------------------------- */
.ai-chat-suggestion-list {
    margin: 8px 0 0 16px;
    padding: 0;
}

/* -- AI workflows status text ------------------------------ */
.wf-status-text {
    font-size: 10px;
}

/* -- Profile / user-detail skill bars ---------------------- */
.skill-bar-primary {
    background: var(--zc-primary-xlight);
}

.skill-bar-success {
    background: var(--zc-success-light);
}

.skill-bar-cyan {
    background: var(--zc-secondary-xlight);
    color: var(--zc-cyan);
}

.skill-bar-amber {
    background: var(--zc-warning-light);
    color: var(--zc-orange);
}

/* -- UI buttons brand icons -------------------------------- */
.btn-brand-google {
    color: var(--zc-google);
}

.btn-brand-twitter {
    color: #1DA1F2;
}

.btn-brand-li {
    color: #0A66C2;
}

.btn-brand-slack {
    color: #4A154B;
}

.btn-brand-discord {
    color: #5865F2;
}

/* ============================================================
   43. DYNAMIC AVATAR GENERATOR (replaces ui-avatars.com)
   ============================================================ */
.avatar-gen,
.avatar-gen-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    color: #fff;
    font-family: var(--zc-font-sans);
    user-select: none;
    vertical-align: middle;
    letter-spacing: 0.5px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--zc-primary);
}

.avatar-gen-img {
    object-fit: cover;
}

    /* Sized automatically from data-size — no inline width/height, no JS */
    .avatar-gen-img[data-size="22"] {
        width: 22px;
        height: 22px;
    }

    .avatar-gen-img[data-size="24"] {
        width: 24px;
        height: 24px;
    }

    .avatar-gen-img[data-size="26"] {
        width: 26px;
        height: 26px;
    }

    .avatar-gen-img[data-size="28"] {
        width: 28px;
        height: 28px;
    }

    .avatar-gen-img[data-size="30"] {
        width: 30px;
        height: 30px;
    }

    .avatar-gen-img[data-size="32"] {
        width: 32px;
        height: 32px;
    }

    .avatar-gen-img[data-size="36"] {
        width: 36px;
        height: 36px;
    }

    .avatar-gen-img[data-size="38"] {
        width: 38px;
        height: 38px;
    }

    .avatar-gen-img[data-size="40"] {
        width: 40px;
        height: 40px;
    }

    .avatar-gen-img[data-size="44"] {
        width: 44px;
        height: 44px;
    }

    .avatar-gen-img[data-size="48"] {
        width: 48px;
        height: 48px;
    }

    .avatar-gen-img[data-size="64"] {
        width: 64px;
        height: 64px;
    }

    .avatar-gen-img[data-size="72"] {
        width: 72px;
        height: 72px;
    }

    .avatar-gen-img[data-size="80"] {
        width: 80px;
        height: 80px;
    }

    .avatar-gen-img[data-size="88"] {
        width: 88px;
        height: 88px;
    }

    .avatar-gen-img[data-size="96"] {
        width: 96px;
        height: 96px;
    }

.avatar-total {
    background: var(--zc-border-color);
    color: var(--zc-text-secondary);
    font-size: 11px;
    font-weight: 700;
}

/* ============================================================
   44. GALLERY UPLOAD MODAL
   ============================================================ */
.zentic-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

    .zentic-modal-backdrop.open {
        opacity: 1;
        pointer-events: all;
    }

.zentic-modal-dialog {
    width: 100%;
    max-width: 600px;
    transform: translateY(12px) scale(.98);
    transition: transform .22s ease;
}

.zentic-modal-backdrop.open .zentic-modal-dialog {
    transform: translateY(0) scale(1);
}

.zentic-modal-content {
    background: var(--zc-card-bg, #fff);
    border: 1px solid var(--zc-border-color);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.zentic-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--zc-border-color);
}

.modal-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--zc-primary)22, #6366f122);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--zc-primary, var(--zc-primary));
    flex-shrink: 0;
}

.zentic-modal-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--text-main, var(--zc-text-primary));
}

.zentic-modal-subtitle {
    font-size: 12px;
    color: var(--zc-text-muted, var(--zc-text-secondary));
    margin: 2px 0 0;
}

.zentic-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    color: var(--zc-text-muted, var(--zc-text-secondary));
    font-size: 16px;
    line-height: 1;
    transition: background .15s, color .15s;
}

    .zentic-modal-close:hover {
        background: var(--zc-hover-bg, var(--zc-border-light));
        color: var(--text-main, var(--zc-text-primary));
    }

.zentic-modal-body {
    padding: 20px 24px;
}

.zentic-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 24px;
    border-top: 1px solid var(--zc-border-color);
    background: transparent;
}

.gallery-drop-zone {
    border: 2px dashed var(--zc-border, #d1d5db);
    border-radius: 12px;
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: var(--zc-body-bg);
}

    .gallery-drop-zone:hover,
    .gallery-drop-zone.drag-over {
        border-color: var(--zc-primary, var(--zc-primary));
        background: rgba(80, 70, 229, .04);
    }

    .gallery-drop-zone.drag-over {
        background: rgba(80, 70, 229, .08);
    }

.drop-zone-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, var(--zc-primary)22, #6366f122);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--zc-primary, var(--zc-primary));
}

.drop-zone-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main, var(--zc-text-primary));
    margin: 0 0 4px;
}

.drop-zone-sub {
    font-size: 13px;
    color: var(--zc-text-muted, var(--zc-text-secondary));
    margin: 0 0 6px;
}

.drop-zone-browse {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--zc-primary, var(--zc-primary));
    font-weight: 600;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .drop-zone-browse:hover {
        opacity: .8;
    }

.drop-zone-hint {
    font-size: 11px;
    color: var(--zc-text-muted, var(--zc-sidebar-text));
    margin: 0;
}

.gallery-preview-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    max-height: 200px;
    overflow-y: auto;
}

.gallery-preview-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--zc-body-bg);
    border: 1px solid var(--zc-border-color);
}

.gallery-preview-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--zc-border-color);
}

.gallery-preview-info {
    flex: 1;
    min-width: 0;
}

.gallery-preview-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main, var(--zc-text-primary));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-preview-size {
    font-size: 11px;
    color: var(--zc-text-muted, var(--zc-text-secondary));
    margin-top: 2px;
}

.gallery-preview-status {
    font-size: 11px;
    margin-top: 3px;
}

.gallery-preview-remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    color: var(--zc-text-muted, var(--zc-sidebar-text));
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

    .gallery-preview-remove:hover {
        background: var(--zc-danger-light);
        color: var(--zc-danger);
    }

.gallery-upload-count:not(:empty) {
    background: rgba(255, 255, 255, .25);
    border-radius: 20px;
    padding: 1px 7px;
    font-size: 11px;
    margin-left: 4px;
}

.form-label-zentic {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--zc-text-muted, var(--zc-text-secondary));
    margin-bottom: 6px;
    letter-spacing: .02em;
}

/* ============================================================
   45. MOBILE TOPBAR LOGO (injected by zentic.js section 27)
   ============================================================ */
.topbar-mobile-brand {
    display: none;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--transition-fast);
}

    .topbar-mobile-brand:hover {
        opacity: 0.8;
    }

.topbar-mobile-brand-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}

.topbar-mobile-brand-text {
    font-size: 19px;
    font-weight: 800;
    color: var(--zc-text-primary);
    letter-spacing: -0.3px;
    line-height: 1;
}

    .topbar-mobile-brand-text span {
        color: var(--zc-primary);
    }

@media (max-width: 991px) {
    .topbar-mobile-brand {
        display: flex;
    }

    .topbar-breadcrumb {
        display: none !important;
    }
}

/* ============================================================
   46. RESPONSIVE TYPOGRAPHY SCALE
   ============================================================ */
@media (max-width: 991px) {
    .page-title {
        font-size: 22px;
    }

    .stat-value {
        font-size: 24px;
    }
}

@media (max-width: 768px) {

    html,
    body {
        font-size: 15px;
    }

    .page-title {
        font-size: 20px;
    }

    .stat-value {
        font-size: 22px;
    }

    .card-title {
        font-size: 14px;
    }

    .topbar-right .topbar-user-name {
        display: none;
    }
}

@media (max-width: 576px) {
    .page-title {
        font-size: 18px;
    }

    .page-subtitle {
        font-size: 13px;
    }

    .stat-value {
        font-size: 20px;
    }

    .card-title {
        font-size: 14px;
    }

    .btn-zentic {
        font-size: 13px;
    }

    .zentic-footer {
        font-size: 13px;
    }

    .zentic-topbar {
        gap: 6px;
    }

    .topbar-mobile-brand-text {
        font-size: 17px;
    }

    .topbar-divider {
        display: none;
    }

    .page-header-actions {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 17px;
    }

    .card-title {
        font-size: 13px;
    }

    .topbar-mobile-brand-img {
        width: 26px;
        height: 26px;
    }

    .topbar-mobile-brand-text {
        font-size: 16px;
    }
}


/* ============================================================
   47. BACK TO TOP BUTTON
   ============================================================ */
.back-to-top {
    position: fixed;
    bottom: 40px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--zc-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
    -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease, visibility 0.3s ease, box-shadow 0.3s ease;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, box-shadow 0.3s ease;
}

    .back-to-top svg {
        width: 18px;
        height: 18px;
        pointer-events: none
    }

    .back-to-top.visible {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .back-to-top:hover {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }


/* ============================================================
   48. RESPONSIVE / MEDIA QUERIES
   ============================================================ */
/* ──  1400px  ─────────────────────────────────────────────── */
@media (max-width: 1400px) {
    .zentic-content {
        padding: 20px;
    }
}

/* ──  1200px  ─────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .playground-layout {
        grid-template-columns: 1fr;
    }

    .stat-value {
        font-size: 22px;
    }
}

/* ── md  991px  (tablet landscape) ──────────────────────────── */
@media (max-width: 991px) {

    .zentic-sidebar {
        transform: translateX(-100%);
        z-index: 1001;
    }

        .zentic-sidebar.mobile-open {
            transform: translateX(0);
        }

    .zentic-main {
        margin-left: 0 !important;
    }

    .auth-left {
        display: none;
    }

    .auth-right {
        width: 100%;
        max-width: 100%;
    }

    .chart-grid {
        grid-template-columns: 1fr;
    }

    .inbox-sidebar {
        display: none;
    }

    .inbox-list {
        width: 260px;
        flex-shrink: 0;
    }

    .fm-sidebar {
        display: none;
    }

    .playground-layout {
        gap: 16px;
    }

    .chat-layout-ai {
        height: calc(100vh - 160px);
    }

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

/* ──  768px  (mobile landscape / small tablet) ────────────── */
@media (max-width: 768px) {

    .zentic-content {
        padding: 16px;
    }

    .zentic-topbar {
        padding: 0 16px;
        gap: 8px;
    }

    .topbar-center {
        display: none;
    }

    .topbar-right {
        gap: 2px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

    .stat-value {
        font-size: 20px;
    }

    .mini-chart-bar {
        height: 44px;
    }

    .card-title {
        font-size: 13px;
    }

    .chart-grid {
        grid-template-columns: 1fr;
    }

    .ai-banner-content {
        flex: auto;
    }

    .ai-banner-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .ai-banner-title {
        font-size: 13px;
    }

    .inbox-layout {
        height: calc(100vh - 160px);
        min-height: 500px;
    }

    .inbox-sidebar {
        display: none;
    }

    .inbox-list {
        width: 100%;
        height: 100%;
        border-right: none;
        border-bottom: none;
        flex-shrink: 1;
    }

    .inbox-detail {
        display: none;
    }

    .inbox-layout.inbox-showing-detail .inbox-list {
        display: none;
    }

    .inbox-layout.inbox-showing-detail .inbox-detail {
        display: flex;
        flex: 1;
    }

    .inbox-back-btn,
    .chat-back-btn {
        display: inline-flex !important;
    }

    .chat-layout {
        height: calc(100vh - 160px);
        min-height: 500px;
    }

    .chat-contacts {
        width: 100%;
        border-right: none;
    }

    .chat-main {
        display: none;
    }

    .chat-layout.chat-panel-open .chat-contacts {
        display: none;
    }

    .chat-layout.chat-panel-open .chat-main {
        display: flex;
        flex: 1;
    }

    .fm-layout {
        flex-direction: column;
    }

    .fm-sidebar {
        display: none;
    }

    .fm-main {
        min-height: 400px;
    }

    .kanban-board {
        gap: 10px;
        flex-wrap: wrap;
    }

    .kanban-col {
        min-width: 220px;
    }

    .kanban-col-body.drag-over {
        background: var(--zc-primary-light, rgba(80, 70, 229, 0.06));
        outline: 2px dashed var(--zc-primary);
        outline-offset: -2px;
    }

    .kanban-card.dragging {
        opacity: 0.4;
    }

    .kanban-col-value {
        font-size: 11px;
        font-weight: 600;
        opacity: .85;
    }

    .settings-tabs {
        border-radius: var(--zc-radius-sm);
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: left !important;
        margin-bottom: 8px;
    }

        .dataTables_wrapper .dataTables_filter input {
            width: 100%;
            max-width: 240px;
        }

    .dataTables_wrapper .row:first-child {
        flex-direction: column;
        gap: 0;
    }

    .zentic-table-wrapper,
    .table-responsive-wrapper,
    .dataTables_scrollBody {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .notif-panel {
        width: min(320px, calc(100vw - 24px));
    }

    .gallery-filter-btn {
        padding: 5px 12px;
        font-size: 12px;
    }

    .table-pagination {
        flex-wrap: wrap;
        gap: 4px;
    }

    .chat-messages {
        padding: 16px;
        gap: 14px;
    }

    .chat-input-area {
        padding: 12px 16px 16px;
    }

    .chat-layout-ai {
        height: calc(100vh - 150px);
        min-height: 420px;
    }
}

/* ── 576px  (mobile portrait) ────────────────────────────── */
@media (max-width: 576px) {

    /* Layout */
    .zentic-content {
        padding: 12px;
    }

    .zentic-topbar {
        padding: 0 12px;
        gap: 4px;
        height: 56px;
    }

    .topbar-divider {
        display: none;
    }

    /* Stat widgets */
    .stat-value {
        font-size: 20px;
    }

    .mini-chart-bar {
        height: 40px;
    }

    /* AI insight banner */
    .ai-insight-banner {
        flex-wrap: wrap;
    }

    .ai-banner-icon {
        display: none;
    }

    .ai-banner-action {
        font-size: 11px;
        padding: 6px 10px;
    }


    /* Notification panel */
    .notif-panel {
        width: calc(100vw - 24px);
        max-width: 340px;
    }

    /* Inbox detail body */
    .inbox-detail-body {
        padding: 16px;
    }


    /* Error pages */
    .err-number {
        font-size: 72px;
    }

    /* Kanban */
    .kanban-col {
        min-width: 200px;
    }

    /* Search tabs */
    .search-nav-tabs {
        gap: 6px;
    }

        .search-nav-tabs .nav-link {
            padding: 6px 12px;
            font-size: 12px;
        }

    /* Pagination */
    .table-pagination {
        justify-content: center;
    }

    .page-btn {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
    }

    /* Topbar user avatar  */
    .topbar-user .user-name,
    .topbar-user .user-role {
        display: none;
    }

    /* Profile cover buttons */
    .profile-cover-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ── 480px  ─────────────────────────────────────────────── */
@media (max-width: 480px) {

    /* Auth */
    .auth-right {
        padding: 32px 20px;
    }

    .auth-card {
        padding: 20px;
    }

    /* Stat */
    .stat-value {
        font-size: var(--zc-fs-xl);
    }

    /* Page header actions */
    .page-header-actions {
        flex-wrap: wrap;
    }

    /* Footer */
    .zentic-footer {
        flex-direction: column;
        gap: 4px;
        text-align: center;
        padding: 12px;
    }

    /* Error page */
    .err-number {
        font-size: 60px;
        letter-spacing: -2px;
    }

    /* DataTables length + filter compact */
    .dataTables_wrapper .dataTables_length select {
        padding: 4px 8px;
    }

    /* Notification panel */
    .notif-panel {
        width: calc(100vw - 20px);
        top: 100%;
    }

    .topbar-btn-notification {
        position: inherit;
    }

    /* Coming soon / Maintenance */
    .cs-heading {
        font-size: 26px;
    }

    .err-number {
        font-size: 48px;
        letter-spacing: -1px;
    }
}

/* ── Ecommerce: Card Brand Badges ────────────────────────────── */
.card-brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 27px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

    .card-brand-badge.cb-visa {
        background: #1a1f71;
        font-style: italic;
    }

    .card-brand-badge.cb-mastercard {
        background: #16161a;
        gap: 0;
    }

    .card-brand-badge .cb-circle {
        width: 15px;
        height: 15px;
        border-radius: 50%;
    }

    .card-brand-badge.cb-mastercard .cb-circle-red {
        background: #eb001b;
        margin-right: -6px;
    }

    .card-brand-badge.cb-mastercard .cb-circle-orange {
        background: #f79e1b;
        mix-blend-mode: screen;
    }

    .card-brand-badge.cb-amex {
        background: #2e77bc;
    }

    .card-brand-badge.cb-discover {
        background: #f58220;
        color: #1a1a1a;
    }

    .card-brand-badge.cb-paypal {
        background: #003087;
        font-style: italic;
    }

    .card-brand-badge.cb-generic {
        background: var(--zc-border-color);
        color: var(--zc-text-secondary);
        font-size: 13px;
    }

.card-brand-img {
    display: inline-block;
    width: 42px;
    height: 27px;
    object-fit: contain;
    border-radius: 5px;
    flex-shrink: 0;
}

.zc-add-image {
    width: 100%;
    max-width: 220px;
    height: 180px;
    object-fit: cover;
}

/* ── Ecommerce: Order Details ────────────────────────────── */
.order-timeline-line {
    width: 2px;
    flex: 1;
    background: var(--zc-border-color);
    margin-top: 4px;
}

/* ============================================================
   49. AI CHAT STANDALONE APP
   ============================================================ */
.aichat-shell {
    display: flex;
    height: 100vh;
    background: var(--zc-body-bg);
}

/* Model button supplies its own chevron icon — suppress Bootstrap's default caret */
#aichatModelBtn.dropdown-toggle::after {
    display: none;
}

.aichat-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--zc-sidebar-bg);
    border-right: 1px solid var(--zc-sidebar-border);
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
    overflow: hidden;
    transition: width var(--transition-base), padding var(--transition-base);
}

.aichat-sidebar-top {
    display: flex;
    align-items: center;
    padding: 4px 8px 18px;
    flex-shrink: 0;
}

.aichat-logo img {
    width: 30px;
    height: 30px;
    display: block;
}

.aichat-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.aichat-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--zc-radius-sm);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--zc-font-sans);
    color: var(--zc-sidebar-text);
    text-decoration: none;
    border: none;
    background: transparent;
    width: 100%;
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

    .aichat-nav-btn i {
        font-size: 16px;
        flex-shrink: 0;
    }

    .aichat-nav-btn:hover {
        background: var(--zc-sidebar-hover);
        color: var(--zc-sidebar-text-active);
    }

.aichat-nav-btn-primary {
    background: var(--zc-primary);
    color: var(--text-inverse);
    box-shadow: var(--zc-shadow-ai);
}

    .aichat-nav-btn-primary:hover {
        background: var(--zc-primary-dark);
        color: var(--text-inverse);
    }

.aichat-section {
    margin-bottom: 14px;
    flex-shrink: 0;
}

.aichat-section-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.aichat-section-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--zc-sidebar-section-color);
    padding: 6px 10px;
}

.aichat-chat-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.aichat-chat-item {
    display: block;
    padding: 8px 10px;
    border-radius: var(--zc-radius-sm);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--zc-font-sans);
    color: var(--zc-sidebar-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

    .aichat-chat-item:hover {
        background: var(--zc-sidebar-hover);
        color: var(--zc-sidebar-text-active);
    }

    .aichat-chat-item.active {
        background: var(--zc-sidebar-active-bg);
        color: var(--zc-sidebar-text-active);
        font-weight: 700;
    }

.aichat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
}

.aichat-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    flex-shrink: 0;
}

.aichat-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.aichat-hero {
    margin: auto;
    text-align: center;
    padding: 20px;
    max-width: 640px;
}

.aichat-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--zc-radius-xl);
    background: var(--zc-primary);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 20px;
    box-shadow: var(--zc-shadow-ai);
}

.aichat-hero-title {
    font-size: var(--zc-fs-3xl);
    font-weight: 800;
    color: var(--zc-text-primary);
    margin: 0;
}

.aichat-messages {
    display: none;
    flex-direction: column;
    gap: 20px;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 20px 12px;
}

.aichat-shell.aichat-conversation .aichat-hero {
    display: none;
}

.aichat-shell.aichat-conversation .aichat-messages {
    display: flex;
}

.aichat-shell.aichat-conversation .aichat-body {
    justify-content: flex-start;
}

.aichat-composer-wrap {
    flex-shrink: 0;
    padding: 0 20px 22px;
}

.aichat-composer {
    max-width: 760px;
    margin: 0 auto;
    background: var(--zc-card-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-2xl);
    box-shadow: var(--zc-shadow-lg);
    padding: 14px 16px 12px;
}

.aichat-suggestion {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    font-size: var(--zc-fs-sm);
    color: var(--zc-text-secondary);
    padding: 2px 4px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--zc-border-light);
    margin-bottom: 10px;
}

    .aichat-suggestion i {
        color: var(--zc-primary);
        margin-top: 2px;
        flex-shrink: 0;
    }

    .aichat-suggestion:hover {
        color: var(--zc-text-primary);
    }

.aichat-shell.aichat-conversation .aichat-suggestion {
    display: none;
}

.aichat-textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--zc-text-primary);
    font-family: var(--zc-font-sans);
    font-size: var(--zc-fs-base);
    max-height: 160px;
    padding: 2px 4px 10px;
}

    .aichat-textarea::placeholder {
        color: var(--zc-text-secondary);
    }

.aichat-composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.aichat-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--zc-radius-pill);
    border: 1px solid var(--zc-border-color);
    background: transparent;
    color: var(--zc-text-secondary);
    font-size: var(--zc-fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

    .aichat-pill-btn:hover {
        background: var(--zc-sidebar-hover);
        border-color: var(--zc-primary-light);
        color: var(--zc-text-primary);
    }

.aichat-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--zc-body-bg);
    color: var(--zc-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

    .aichat-icon-btn:hover {
        background: var(--zc-sidebar-hover);
        color: var(--zc-text-primary);
    }

.aichat-icon-btn-send {
    background: var(--zc-primary);
    color: var(--text-inverse);
}

    .aichat-icon-btn-send:hover {
        background: var(--zc-primary-dark);
        color: var(--text-inverse);
    }

.aichat-disclaimer {
    text-align: center;
    font-size: var(--zc-fs-2xs);
    color: var(--zc-text-secondary);
    margin: 10px 0 0;
}

.aichat-tag {
    padding: 7px 14px;
    border-radius: var(--zc-radius-pill);
    border: 1px solid var(--zc-border-color);
    background: transparent;
    color: var(--zc-text-primary);
    font-size: var(--zc-fs-xs);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

    .aichat-tag:hover {
        border-color: var(--zc-primary-light);
    }

    .aichat-tag.active {
        background: var(--zc-text-primary);
        border-color: var(--zc-text-primary);
        color: var(--zc-white);
    }

.aichat-info-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--zc-radius-sm);
    background: var(--zc-primary-xxlight);
    font-size: var(--zc-fs-sm);
    color: var(--zc-text-secondary);
}

    .aichat-info-box i {
        color: var(--zc-primary);
        margin-top: 2px;
        flex-shrink: 0;
    }

.aichat-search-modal {
    max-width: 560px;
    align-self: flex-start;
    margin-top: 12vh;
}

.aichat-search-input-wrap {
    padding: 16px 16px 8px;
}

.aichat-search-results {
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px 12px 16px;
}

.aichat-search-group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--zc-text-secondary);
    padding: 12px 10px 6px;
}

.aichat-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 10px;
    border: none;
    background: var(--zc-body-bg);
    border-radius: var(--zc-radius-sm);
    font-size: 14px;
    font-family: var(--zc-font-sans);
    color: var(--zc-text-primary);
    text-align: left;
    cursor: pointer;
    margin-bottom: 6px;
    transition: background var(--transition-fast);
}

    .aichat-search-item:hover {
        background: var(--zc-sidebar-hover);
    }

    .aichat-search-item i {
        color: var(--zc-text-secondary);
        flex-shrink: 0;
    }

.aichat-search-item-primary i {
    color: var(--zc-primary);
}

.aichat-search-empty {
    text-align: center;
    padding: 24px 10px;
    color: var(--zc-text-secondary);
    font-size: var(--zc-fs-sm);
}

.aichat-project-input {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--zc-body-bg);
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-pill);
    padding: 6px 8px 6px 6px;
}

.aichat-project-input-field {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--zc-font-sans);
    font-size: 14px;
    color: var(--zc-text-primary);
}

    .aichat-project-input-field::placeholder {
        color: var(--zc-text-secondary);
    }

.aichat-project-chat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--zc-border-light);
    background: var(--zc-card-bg);
    border-radius: var(--zc-radius-sm);
    text-align: left;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

    .aichat-project-chat-item:hover {
        background: var(--zc-sidebar-hover);
        border-color: var(--zc-primary-light);
    }

.aichat-project-chat-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--zc-text-primary);
}

.aichat-project-chat-desc {
    font-size: var(--zc-fs-xs);
    color: var(--zc-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aichat-project-chat-date {
    font-size: var(--zc-fs-xs);
    color: var(--zc-text-secondary);
    flex-shrink: 0;
}

.aichat-apps-view {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 20px 32px;
}

.aichat-apps-search {
    margin-bottom: 20px;
}

.aichat-apps-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.aichat-apps-banner {
    position: relative;
    border-radius: var(--zc-radius-xl);
    padding: 22px;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

    .aichat-apps-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px);
        background-size: 18px 18px;
        pointer-events: none;
    }

.aichat-apps-banner-purple {
    background: linear-gradient(135deg, var(--zc-primary), var(--zc-primary-dark));
}

.aichat-apps-banner-pink {
    background: linear-gradient(135deg, var(--zc-pink), var(--zc-pink-dark));
}

.aichat-apps-banner-bubble {
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.92);
    color: var(--zc-text-primary);
    font-size: var(--zc-fs-xs);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--zc-radius-pill);
    margin-bottom: 10px;
    z-index: 1;
}

.aichat-apps-banner-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--zc-radius-sm);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    margin-top: auto;
    margin-bottom: 10px;
}

.aichat-apps-banner-title {
    color: var(--text-inverse);
    font-size: var(--zc-fs-xl);
    font-weight: 800;
    margin: 0;
}

.aichat-apps-banner-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--zc-fs-sm);
    margin: 4px 0 14px;
}

.aichat-apps-banner-btn {
    align-self: flex-start;
    border: none;
    background: rgba(0, 0, 0, 0.75);
    color: var(--text-inverse);
    font-size: var(--zc-fs-xs);
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--zc-radius-pill);
    cursor: pointer;
    z-index: 1;
}

.aichat-apps-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--zc-border-light);
    padding-bottom: 2px;
}

.aichat-apps-tab {
    border: none;
    background: transparent;
    padding: 8px 4px;
    margin-right: 14px;
    font-size: var(--zc-fs-sm);
    font-weight: 600;
    color: var(--zc-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

    .aichat-apps-tab.active {
        color: var(--zc-primary);
        border-bottom-color: var(--zc-primary);
    }

.aichat-apps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.aichat-app-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--zc-border-light);
    background: var(--zc-card-bg);
    border-radius: var(--zc-radius-sm);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

    .aichat-app-row:hover {
        background: var(--zc-sidebar-hover);
        border-color: var(--zc-primary-light);
    }

    .aichat-app-row > i {
        color: var(--zc-text-secondary);
    }

.aichat-app-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--zc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    color: var(--text-inverse);
    flex-shrink: 0;
}

.aichat-app-icon-lg {
    width: 64px;
    height: 64px;
    border-radius: var(--zc-radius-sm);
    font-size: 22px;
}

.aichat-app-icon-blue {
    background: var(--zc-blue);
}

.aichat-app-icon-pink {
    background: var(--zc-pink);
}

.aichat-app-icon-cyan {
    background: var(--zc-cyan);
}

.aichat-app-icon-purple {
    background: var(--zc-primary);
}

.aichat-app-icon-green {
    background: var(--zc-success);
}

.aichat-app-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--zc-text-primary);
}

.aichat-app-desc {
    font-size: var(--zc-fs-xs);
    color: var(--zc-text-secondary);
    margin-top: 2px;
}

.aichat-breadcrumb {
    font-size: var(--zc-fs-sm);
    color: var(--zc-text-secondary);
    margin-bottom: 20px;
}

    .aichat-breadcrumb a {
        color: var(--zc-text-secondary);
        text-decoration: none;
    }

        .aichat-breadcrumb a:hover {
            color: var(--zc-primary);
        }

    .aichat-breadcrumb span {
        color: var(--zc-text-primary);
        font-weight: 600;
    }

.aichat-apps-banner-frame {
    position: relative;
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-xl);
    padding: 20px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: var(--zc-body-bg);
}

.aichat-app-detail-title {
    font-size: var(--zc-fs-3xl);
    font-weight: 800;
    color: var(--zc-text-primary);
    margin: 0 0 4px;
}

.aichat-app-detail-tagline {
    font-size: var(--zc-fs-md);
    color: var(--zc-text-secondary);
    margin-bottom: 20px;
}

.aichat-app-detail-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--zc-text-secondary);
    margin-top: 20px;
}

.aichat-app-detail-heading {
    font-size: var(--zc-fs-xl);
    font-weight: 800;
    color: var(--zc-text-primary);
    margin: 28px 0 14px;
}

.aichat-app-info-table {
    border: 1px solid var(--zc-border-light);
    border-radius: var(--zc-radius-sm);
    overflow: hidden;
}

.aichat-app-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: var(--zc-fs-sm);
    border-bottom: 1px solid var(--zc-border-light);
}

    .aichat-app-info-row:last-child {
        border-bottom: none;
    }

    .aichat-app-info-row > span:first-child {
        color: var(--zc-text-secondary);
    }

    .aichat-app-info-row > span:last-child {
        font-weight: 600;
        color: var(--zc-text-primary);
    }

    .aichat-app-info-row i {
        color: var(--zc-text-secondary);
    }

.aichat-images-view {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 20px 32px;
}

.aichat-images-heading {
    font-size: var(--zc-fs-lg);
    font-weight: 800;
    color: var(--zc-text-primary);
    margin: 28px 0 14px;
}

.aichat-images-view > .aichat-images-heading:first-of-type {
    margin-top: 24px;
}

.aichat-images-style-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.aichat-style-card {
    position: relative;
    border: none;
    padding: 0;
    border-radius: var(--zc-radius-xl);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 3 / 4;
}

    .aichat-style-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.aichat-style-card-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
    text-align: left;
}

.aichat-style-card-title {
    color: var(--text-inverse);
    font-size: 14px;
    font-weight: 700;
}

.aichat-style-card-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--zc-fs-2xs);
    margin-top: 2px;
}

.aichat-images-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.aichat-image-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--zc-border-light);
    background: var(--zc-card-bg);
    border-radius: var(--zc-radius-sm);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

    .aichat-image-tile:hover {
        background: var(--zc-sidebar-hover);
        border-color: var(--zc-primary-light);
    }

.aichat-image-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--zc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    flex-shrink: 0;
    font-size: 16px;
}

.aichat-images-my-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

    .aichat-images-my-grid img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: var(--zc-radius-sm);
        display: block;
    }

@media (max-width: 767px) {

    .aichat-apps-grid,
    .aichat-images-style-grid,
    .aichat-images-tile-grid,
    .aichat-images-my-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .aichat-apps-featured-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 479px) {

    .aichat-images-tile-grid,
    .aichat-apps-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.aichat-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 35, 0.4);
    z-index: 1055;
}

    .aichat-overlay.active {
        display: block;
    }

@media (min-width: 992px) {
    .aichat-shell.aichat-sidebar-collapsed .aichat-sidebar {
        width: var(--zc-sidebar-width-collapsed);
        padding-left: 10px;
        padding-right: 10px;
    }

    .aichat-shell.aichat-sidebar-collapsed .aichat-sidebar-top {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .aichat-shell.aichat-sidebar-collapsed .aichat-nav-btn {
        justify-content: center;
        padding: 10px;
    }

        .aichat-shell.aichat-sidebar-collapsed .aichat-nav-btn span,
        .aichat-shell.aichat-sidebar-collapsed .aichat-section,
        .aichat-shell.aichat-sidebar-collapsed .sidebar-user-info,
        .aichat-shell.aichat-sidebar-collapsed .sidebar-user-settings {
            display: none;
        }

    .aichat-shell.aichat-sidebar-collapsed .sidebar-user {
        justify-content: center;
        padding: 8px 4px;
    }
}

@media (max-width: 991px) {
    .aichat-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1060;
        transform: translateX(-100%);
        box-shadow: var(--zc-shadow-xl);
    }

    .aichat-shell.aichat-sidebar-mobile-open .aichat-sidebar {
        transform: translateX(0);
    }

    .aichat-hero-title {
        font-size: var(--zc-fs-2xl);
    }
}

/* ============================================================
   RTL SUPPORT
   Generated overrides for zentic.css — append to end of file.
   Every rule is scoped under [dir="rtl"] and mirrors a specific
   directional declaration found in the base (LTR) stylesheet.
   Where a left/right (or margin/padding/border) property is
   swapped, the original side is explicitly reset (to 0 / none /
   auto as appropriate) so both sides are never pinned/doubled
   at once — following the same convention already used in the
   base file (see original lines 1441-1442, 1705-1706).
   ============================================================ */

/* ── 04. Layout Structure ───────────────────────────────────── */

[dir="rtl"] .zentic-main {
    margin-left: 0;
    margin-right: var(--zc-sidebar-width);
    transition: margin-right var(--transition-base);
    /* was margin-left */
}

    [dir="rtl"] .zentic-main.sidebar-collapsed {
        margin-left: 0;
        margin-right: var(--zc-sidebar-width-collapsed);
    }

/* ── 05. Sidebar ─────────────────────────────────────────────── */

[dir="rtl"] .zentic-sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--zc-sidebar-border);
}

[dir="rtl"] .nav-link {
    text-align: right;
    /* was left */
}

[dir="rtl"] .nav-dropdown-arrow {
    margin-left: 0;
    margin-right: auto;
}

/* ── 06. Topbar ──────────────────────────────────────────────── */

[dir="rtl"] .topbar-right {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .topbar-user {
    padding-right: 6px;
    padding-left: 0;
}

[dir="rtl"] .notif-badge {
    right: auto;
    left: 4px;
}

[dir="rtl"] .notif-panel {
    right: auto;
    left: 0;
}

[dir="rtl"] .chat-status-dot {
    right: auto;
    left: 0;
}

[dir="rtl"] .chat-panel {
    right: auto;
    left: 0;
}

[dir="rtl"] .user-dropdown-menu {
    right: auto;
    left: 0;
}

x
/* ── 10. Stat Widgets / 11. AI Insight Banner ───────────────── */
[dir="rtl"] .ai-insight-banner::before {
    right: auto;
    left: -40px;
}

[dir="rtl"] .ai-insight-banner::after {
    right: auto;
    left: 100px;
}

/* ── 12. Data Tables ─────────────────────────────────────────── */

[dir="rtl"] .zentic-table thead th {
    text-align: right;
    /* was left */
}

/* ── 15. Avatars & Groups ────────────────────────────────────── */

[dir="rtl"] .avatar-group .avatar {
    margin-left: 0;
    margin-right: -8px;
}

    [dir="rtl"] .avatar-group .avatar:first-child {
        margin-right: 0;
    }

/* ── 16. Form Elements ───────────────────────────────────────── */

[dir="rtl"] .form-label .required {
    margin-left: 0;
    margin-right: 2px;
}

[dir="rtl"] .form-select-zentic {
    background-position: left 12px center;
    padding-right: 12px;
    padding-left: 36px;
}

[dir="rtl"] [type=email],
[dir="rtl"] [type=number],
[dir="rtl"] [type=tel],
[dir="rtl"] [type=url] {
    direction: rtl;
}

[dir="rtl"] div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
}

[dir="rtl"] .nav-dropdown-menu {
    padding-right: 26px;
    padding-left: 0;
}

[dir="rtl"] .input-right-rounded {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--zc-radius-lg);
    border-bottom-left-radius: var(--zc-radius-lg);
}

[dir="rtl"] .input-group-addon {
    border-right: none;
    border-left: 1px solid var(--zc-border-color);
}

    [dir="rtl"] .input-group-addon.input-right {
        border-left: none;
        border-right: 1px solid var(--zc-border-color);
    }

[dir="rtl"] .toggle-slider::before {
    left: auto;
    right: 3px;
}

[dir="rtl"] .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(-18px);
}

/* ── 21. AI Chat Interface ───────────────────────────────────── */

[dir="rtl"] .chat-contacts {
    border-right: none;
    border-left: 1px solid var(--zc-border-color);
}

[dir="rtl"] .ai-message .chat-bubble {
    border-bottom-left-radius: var(--zc-radius-xl);
    border-bottom-right-radius: var(--zc-radius-xs);
}

[dir="rtl"] .user-message .chat-bubble {
    border-bottom-right-radius: var(--zc-radius-xl);
    border-bottom-left-radius: var(--zc-radius-xs);
}

[dir="rtl"] .ai-message .chat-time {
    text-align: right;
}

[dir="rtl"] .user-message .chat-time {
    text-align: left;
}

/* ── 27. File Manager ────────────────────────────────────────── */

[dir="rtl"] .fm-sidebar {
    border-right: none;
    border-left: 1px solid var(--zc-border-color);
}

/* ── 28. Inbox / Email ───────────────────────────────────────── */

[dir="rtl"] .inbox-sidebar {
    border-right: none;
    border-left: 1px solid var(--zc-border-color);
}

[dir="rtl"] .inbox-folder-count {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .inbox-list {
    border-right: none;
    border-left: 1px solid var(--zc-border-color);
}

[dir="rtl"] .inbox-email-row.unread::before {
    left: auto;
    right: 0;
}

/* ── 30. Login / Auth Pages ──────────────────────────────────── */

[dir="rtl"] .auth-left-orb-1 {
    right: auto;
    left: -120px;
}

[dir="rtl"] .auth-left-orb-2 {
    left: auto;
    right: -90px;
}

[dir="rtl"] .auth-left-orb-3 {
    left: auto;
    right: 8%;
}

/* ── 31. DataTable Customisation ─────────────────────────────── */

[dir="rtl"] div.dataTables_wrapper div.dataTables_filter label::before {
    left: auto;
    right: 1.8em;
}

[dir="rtl"] div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0;
    margin-right: .5em;
    padding-left: 0;
    padding-right: 3em;
}

/* ── 33. Alerts & Toasts ─────────────────────────────────────── */

[dir="rtl"] .alert-zentic .alert-close {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .toast-container {
    right: auto;
    left: 20px;
}

@keyframes toastInRtl {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastOutRtl {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

[dir="rtl"] .toast-item {
    animation-name: toastInRtl;
    /* was toastIn */
}

    [dir="rtl"] .toast-item.removing {
        animation-name: toastOutRtl;
    }

/* ── 37. Print Styles ────────────────────────────────────────── */

@media print {

    [dir="rtl"] .zentic-main {
        margin-right: 0 !important;
    }
}

/* ── 39. UI Components Extension ─────────────────────────────── */

[dir="rtl"] .zc-border-card-border {
    margin-left: 0;
    margin-right: -8px;
}

[dir="rtl"] .country-pct {
    text-align: left;
    /* was right */
}

[dir="rtl"] .country-val {
    text-align: left;
    /* was right */
}

[dir="rtl"] .cs-orb-1 {
    right: auto;
    left: -150px;
}

[dir="rtl"] .cs-orb-2 {
    left: auto;
    right: -80px;
}

[dir="rtl"] .cs-orb-3 {
    left: auto;
    right: 10%;
}

[dir="rtl"] .maint-orb-1 {
    right: auto;
    left: -140px;
}

[dir="rtl"] .maint-orb-2 {
    left: auto;
    right: -80px;
}

[dir="rtl"] .table-toolbar {
    border-left: none;
    border-right: 3px solid var(--zc-primary);
}

[dir="rtl"] .cal-week-time {
    text-align: left;
}

[dir="rtl"] .lang-arrow {
    margin-left: 0;
    margin-right: 1px;
}

[dir="rtl"] .lang-dropdown {
    right: auto;
    left: 0;
}

[dir="rtl"] .lang-dropdown {
    transform-origin: top left;
}

[dir="rtl"] .toast-item {
    border-left: none;
    border-right: 3px solid var(--zc-primary);
}

    [dir="rtl"] .toast-item:has(.icon-circle-check) {
        border-right-color: var(--zc-success);
    }

    [dir="rtl"] .toast-item:has(.icon-circle-x) {
        border-right-color: var(--zc-danger);
    }

    [dir="rtl"] .toast-item:has(.icon-triangle-alert) {
        border-right-color: var(--zc-warning);
    }

[dir="rtl"] .fm-list-view .fm-item {
    text-align: right;
}

[dir="rtl"] .fm-list-view .fm-item-meta {
    text-align: left;
}

[dir="rtl"] .sidebar-profile-popup {
    left: auto;
    right: 12px;
}

[dir="rtl"] .profile-cover-avatar-abs {
    left: auto;
    right: 20px;
}

[dir="rtl"] .timeline-track {
    left: auto;
    right: 19px;
}

[dir="rtl"] .chat-active-indicator {
    right: auto;
    left: 0;
}

[dir="rtl"] .chat-active-bar {
    left: auto;
    right: 0;
}

[dir="rtl"] .changelog-feature-list {
    padding-left: 0;
    padding-right: 20px;
}

[dir="rtl"] .kanban-border-primary {
    border-left: none;
    border-right: 3px solid var(--zc-primary);
}

[dir="rtl"] .kanban-border-secondary {
    border-left: none;
    border-right: 3px solid var(--zc-secondary);
}

[dir="rtl"] .settings-border-l {
    border-left: none;
    border-right: 1px solid var(--zc-border-color);
}

[dir="rtl"] .settings-avatar-btn {
    right: auto;
    left: 0;
}

[dir="rtl"] .edit-user-avatar-btn {
    right: auto;
    left: 0;
}

[dir="rtl"] .lock-status-dot {
    right: auto;
    left: -2px;
}

[dir="rtl"] .btn-group-left {
    border-radius: 0 var(--zc-radius-md) var(--zc-radius-md) 0;
}

[dir="rtl"] .btn-sm.btn-left {
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

[dir="rtl"] .btn-sm.btn-right {
    border-left: none;
    /* was border-right: none */
}

[dir="rtl"] .btn-sm.btn-full-right {
    border-left: none;
}

[dir="rtl"] .btn-group-right {
    border-radius: var(--zc-radius-md) 0 0 var(--zc-radius-md);
}

[dir="rtl"] .dropdown-model-dot {
    margin-right: 0;
    margin-left: 8px;
}

/* ── 41. Call Modals ─────────────────────────────────────────── */

[dir="rtl"] .call-modal-close {
    right: auto;
    left: 16px;
}

[dir="rtl"] .call-video-self {
    right: auto;
    left: 10px;
}

[dir="rtl"] .call-video-name-tag {
    left: auto;
    right: 10px;
}

/* ── UI popovers / vertical tabs ─────────────────────────────── */

[dir="rtl"] .popover-demo {
    left: auto;
    right: 0;
}

[dir="rtl"] .vertical-tab-nav {
    border-right: none;
    border-left: 1px solid var(--zc-border-color);
}

[dir="rtl"] .vertical-tab-link {
    text-align: right;
    /* was left */
}

[dir="rtl"] .vertical-tab-link-last {
    text-align: right;
    /* was left */
}

/* ── 44. Gallery Upload Modal ─────────────────────────────────── */

[dir="rtl"] .gallery-upload-count {
    margin-left: 0;
    margin-right: 4px;
}

[dir="rtl"] .inbox-email-row.mail-removing {
    transform: translateX(20px) !important;
}

/* ── 47. Back to Top Button ──────────────────────────────────── */

[dir="rtl"] .back-to-top {
    right: auto;
    left: 28px;
}

/* ── 48. Responsive / Media Queries ──────────────────────────── */

@media (max-width: 991px) {

    [dir="rtl"] .zentic-sidebar {
        transform: translateX(100%);
    }

    [dir="rtl"] .zentic-main {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 768px) {

    [dir="rtl"] .inbox-list {
        border-left: none;
    }

    [dir="rtl"] .chat-contacts {
        border-left: none;
    }

    [dir="rtl"] .dataTables_wrapper .dataTables_length,
    [dir="rtl"] .dataTables_wrapper .dataTables_filter {
        text-align: right !important;
    }
}

@media (max-width: 480px) {

    [dir="rtl"] header .lang-dropdown {
        right: auto;
        left: 10px;
    }
}

/* ── 49. AI Chat Standalone App ──────────────────────────────── */

[dir="rtl"] .aichat-sidebar {
    border-right: none;
    border-left: 1px solid var(--zc-sidebar-border);
}

[dir="rtl"] .aichat-nav-btn {
    text-align: right;
}

[dir="rtl"] .aichat-chat-item {
    text-align: right;
}

[dir="rtl"] .aichat-suggestion {
    text-align: right;
}

[dir="rtl"] .aichat-search-item {
    text-align: right;
}

[dir="rtl"] .aichat-project-chat-item {
    text-align: right;
}

[dir="rtl"] .aichat-apps-tab {
    margin-right: 0;
    margin-left: 14px;
}

[dir="rtl"] .aichat-app-row {
    text-align: right;
}

[dir="rtl"] .aichat-style-card-info {
    text-align: right;
    /* was left */
}

[dir="rtl"] .aichat-image-tile {
    text-align: right;
}

@media (max-width: 991px) {

    [dir="rtl"] .aichat-sidebar {
        left: auto;
        right: 0;
    }

    [dir="rtl"] .aichat-sidebar {
        transform: translateX(100%);
    }
}

.zentic-switch {
    position: relative;
    display: inline-block;
    width: 62px;
    height: 30px;
}

    .zentic-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.zentic-slider {
    position: absolute;
    inset: 0;
    background: #ddd;
    border-radius: 30px;
    cursor: pointer;
    transition: .2s;
}

    .zentic-slider::before {
        content: "";
        position: absolute;
        width: 22px;
        height: 22px;
        left: 4px;
        top: 4px;
        background: #fff;
        border-radius: 50%;
        transition: .2s;
    }

.zentic-switch input:checked + .zentic-slider {
    background: #0abd2c;
}

    .zentic-switch input:checked + .zentic-slider::before {
        transform: translateX(32px);
    }
/* =========================================================
   TABLE SEARCH - RIGHT SIDE ICON
   ========================================================= */

.zentic-table-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 360px;
}

    /* .zentic-table-search .search-input {
    padding-left: 14px;
    padding-right: 38px;
} */

    /* Search / Clear icon on RIGHT */
    .zentic-table-search .search-icon {
        position: absolute;
        right: 12px;
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        /* Keep icon clickable */
        .zentic-table-search .search-icon:hover {
            opacity: 0.7;
        }

.sidebar-brand .brand-icon img {
    width: 100%;
    height: 51px;
}
/* =========================================================
   FORM TABLE - COMPACT UI
   ========================================================= */

/* Smaller table font */
.zentic-table {
    font-size: 14px;
}

    .zentic-table th {
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
    }

    .zentic-table td {
        font-size: 14px;
        vertical-align: middle;
    }

/* Form title */
.form-title-cell {
    display: inline-block;
    max-width: 230px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

    /* Title hover */
    .form-title-cell:hover {
        text-decoration: underline;
    }

/* Compact switches */
.small-switch {
    width: 46px !important;
    height: 24px !important;
    display: inline-block;
    position: relative;
}

    .small-switch .zentic-slider {
        border-radius: 30px;
    }

        .small-switch .zentic-slider::before {
            width: 18px !important;
            height: 18px !important;
            left: 3px !important;
            top: 3px !important;
        }

    .small-switch input:checked + .zentic-slider::before {
        transform: translateX(22px) !important;
    }

/* Action buttons */
.table-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}

.table-action-btn {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    text-decoration: none !important;
    transition: transform 0.15s ease;
}


/* Keep date compact */
.zentic-table td:nth-child(8) {
    white-space: nowrap;
    font-size: 13px;
}

/* Mail links */
.zentic-table td a.d-block {
    line-height: 1.5;
}

/* Registration + Thank You links */
.zentic-table td a {
    font-size: 12px;
    font-weight: 600;
    padding-right: 8px;
}

/* Smaller row spacing */
/*.zentic-table tbody tr {
    height: 62px;
}*/

/* Responsive */
@media (max-width: 1200px) {

    .zentic-table {
        font-size: 13px;
    }

        .zentic-table th {
            font-size: 12px;
        }

        .zentic-table td {
            font-size: 13px;
        }

    .form-title-cell {
        max-width: 210px;
    }

    .table-actions {
        gap: 10px;
    }
}

.created-date {
    white-space: nowrap;
    line-height: 1.5;
    font-size: 12px !important;
}

    .created-date span {
        display: block;
    }
/* ================================
   TABLE FOOTER
================================ */

.zentic-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
}

.table-entries-info {
    font-size: 14px;
    color: #334155;
}

/* Pagination */

.table-pagination .pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.table-pagination .page-link {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 13px;
    color: #2563eb;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    text-decoration: none;
}

    .table-pagination .page-link:hover {
        background: #f1f5ff;
        border-color: #2563eb;
    }

.table-pagination .page-item.active .page-link {
    background: #3b5bdb;
    border-color: #3b5bdb;
    color: #fff;
}

.table-pagination .page-item.disabled .page-link {
    color: #adb5bd;
    background: #f8f9fa;
    cursor: not-allowed;
}
/* Default - sidebar open */
.sidebar-logo-full {
    display: block;
}

.sidebar-logo-small {
    display: none;
}

/* Sidebar collapsed */
.zentic-sidebar:has(~ .zentic-main.sidebar-collapsed) .sidebar-logo-full {
    display: none;
}

.zentic-sidebar:has(~ .zentic-main.sidebar-collapsed) .sidebar-logo-small {
    display: block;
}
/* =========================================
   TOPBAR USER PROFILE
========================================= */

.topbar-user {
    position: relative;
    display: flex;
    align-items: center;
}


/* Profile pill */
.topbar-user-trigger {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 6px;
    border: 1px solid #e5e7eb;
    border-radius: 28px;
    background: #ffffff;
    color: #352a72;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
}


    /* Hover */
    .topbar-user-trigger:hover {
        border-color: #d8d4e8;
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.11);
    }


    /* Avatar */
    .topbar-user-trigger .topbar-user-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #ffffff;
        flex-shrink: 0;
    }


/* Name */
.topbar-user-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--zc-primary);
    white-space: nowrap;
}

.switcher-body {
    display: none
}
/* Arrow */
.topbar-user-arrow {
    font-size: 13px;
    margin-left: 2px;
    color: #777;
    transition: transform 0.2s ease;
}


/* Arrow when dropdown is open */
.topbar-user.active .topbar-user-arrow {
    transform: rotate(180deg);
}


/* =========================================
   DROPDOWN
========================================= */

.topbar-user .user-dropdown-menu {
    top: calc(100% + 10px);
    right: 0;
    min-width: 270px;
    z-index: 1050;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .topbar-user-trigger {
        width: 44px;
        height: 44px;
        padding: 3px;
        justify-content: center;
        gap: 0;
    }

        .topbar-user-trigger .topbar-user-avatar {
            width: 38px;
            height: 38px;
        }

    .topbar-user-name,
    .topbar-user-arrow {
        display: none;
    }
}

.reg-page .created-date {
    font-size: 13px !important;
}

/* Registration Sort - Floating Label Style */
.reg-sort-field {
    position: relative;
    width: 130px;
}

.reg-sort-select {
    width: 100%;
    height: 40px;
    padding: 12px 10px 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background-color: #fff;
    color: #55596b;
    font-size: 12px;
    font-weight: 400;
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reg-sort-field label {
    position: absolute;
    top: -7px;
    left: 15px;
    z-index: 2;
    padding: 0 7px;
    background: #fff;
    color: #55596b;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    pointer-events: none;
}

.reg-sort-field::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #6b7280;
    border-bottom: 1.5px solid #6b7280;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.reg-sort-select:hover {
    border-color: #b8bdc7;
}

.reg-sort-select:focus {
    border-color: #5046e5;
    box-shadow: 0 0 0 3px rgba(80, 70, 229, 0.08);
}

/* =========================================================
   AWS FORM BUILDER - SUBMISSION DETAILS MODAL
   ========================================================= */

.aws-submission-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.aws-submission-modal {
    width: min(1050px, 100%);
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18), 0 8px 20px rgba(15, 23, 42, 0.08);
}


/* HEADER */

.aws-submission-modal-header {
    min-height: 78px;
    padding: 16px 22px;
    background: var(--zc-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aws-submission-header-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: 0.75;
    margin-bottom: 2px;
}

.aws-submission-modal-header h4 {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #fff;
}

.aws-submission-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s ease;
}

    .aws-submission-close:hover {
        background: rgba(255, 255, 255, 0.22);
    }


/* BODY */

.aws-submission-modal-body {
    padding: 22px;
    overflow-y: auto;
}


/* TOP INFO */

.aws-submission-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.aws-submission-info-card {
    min-height: 82px;
    padding: 16px 18px;
    border: 1px solid #e8ebf1;
    border-radius: 11px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.035);
}

.aws-submission-info-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 10px;
    background: #eef2ff;
    color: #13458f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.aws-submission-label {
    display: block;
    color: #7b8494;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 5px;
}

.aws-submission-info-card strong {
    display: block;
    color: #252b36;
    font-size: 14px;
    font-weight: 600;
}


/* SECTION */

.aws-submission-section {
    margin-bottom: 28px;
}

.aws-submission-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 11px;
}

.aws-submission-section-kicker {
    display: block;
    color: #8b94a4;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.1px;
    margin-bottom: 2px;
}

.aws-submission-section-heading h5 {
    margin: 0;
    color: #343b47;
    font-size: 16px;
    font-weight: 650;
}

.aws-submission-field-count {
    padding: 5px 10px;
    border-radius: 20px;
    background: #f1f4f9;
    color: #687386;
    font-size: 11px;
    font-weight: 600;
}


/* PAYMENT */

.aws-payment-card {
    border: 1px solid #e8ebf1;
    border-radius: 11px;
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.035);
}

.aws-payment-item span {
    display: block;
    color: #8992a1;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 5px;
}

.aws-payment-item strong {
    color: #303744;
    font-size: 14px;
    font-weight: 650;
}

.aws-payment-success {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 20px;
    background: #eafaf0;
    color: #159447 !important;
    font-size: 11px !important;
}

.aws-payment-transaction {
    grid-column: 1 / -1;
    padding-top: 13px;
    border-top: 1px solid #edf0f4;
}


/* FORM DATA */

.aws-form-data-card {
    border: 1px solid #e8ebf1;
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.035);
}

.aws-form-data-row {
    min-height: 49px;
    padding: 10px 16px;
    display: grid;
    grid-template-columns: 32% 68%;
    align-items: center;
    border-bottom: 1px solid #edf0f4;
}

    .aws-form-data-row:last-child {
        border-bottom: 0;
    }

    .aws-form-data-row:nth-child(even) {
        background: #fafbfc;
    }

.aws-form-data-label {
    color: #555f6e;
    font-size: 12px;
    font-weight: 650;
}

.aws-form-data-value {
    color: #596270;
    font-size: 13px;
    font-weight: 400;
    word-break: break-word;
}


/* FILE */

.aws-file-value {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

    .aws-file-value > i {
        color: #13458f;
    }

.aws-file-action {
    width: 27px;
    height: 27px;
    border: 0;
    border-radius: 6px;
    background: #eef2ff;
    color: #13458f;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .aws-file-action:hover {
        background: #13458f;
        color: #ffffff;
    }


/* VERIFIED */

.aws-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 20px;
    background: #eafaf0;
    color: #159447;
    font-size: 11px;
    font-weight: 600;
}


/* FOOTER */

.aws-submission-modal-footer {
    min-height: 70px;
    padding: 14px 22px;
    border-top: 1px solid #e8ebf1;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.aws-submission-close-btn {
    border: 0;
    border-radius: 7px;
    padding: 9px 19px;
    background: #6b7280;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

    .aws-submission-close-btn:hover {
        background: #4b5563;
    }


/* RESPONSIVE */

@media (max-width: 768px) {

    .aws-submission-overlay {
        padding: 10px;
    }

    .aws-submission-modal {
        max-height: calc(100vh - 20px);
        border-radius: 10px;
    }

    .aws-submission-modal-body {
        padding: 16px;
    }

    .aws-submission-info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .aws-payment-card {
        grid-template-columns: 1fr 1fr;
    }

    .aws-form-data-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .aws-form-data-label {
        color: #737d8d;
    }

    .aws-payment-transaction {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {

    .aws-submission-modal-header {
        min-height: 68px;
        padding: 13px 16px;
    }

        .aws-submission-modal-header h4 {
            font-size: 18px;
        }

    .aws-payment-card {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .aws-payment-transaction {
        grid-column: auto;
    }

    .aws-form-data-row {
        padding: 12px;
    }
}


/* Registration page controls - unique styles */
.registration-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.registration-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.registration-search-box {
    width: 100%;
    max-width: 360px;
}

.registration-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.registration-sort-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.registration-sort-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--zc-text-secondary);
    white-space: nowrap;
    margin: 0;
}

.registration-sort-select {
    min-width: 140px;
    height: 40px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--zc-border-color);
    border-radius: var(--zc-radius-sm);
    background: #fff;
    color: var(--zc-text-primary);
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.breadcrumb-title {
    color: black !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

.registration-sort-select:focus {
    border-color: var(--zc-primary);
    box-shadow: 0 0 0 3px rgba(80,70,229,.10);
}

.registration-export-btn {
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
}

.registration-view-btn {
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    background: #13458f !important;
    color: #ffffff !important;
}


.registration-empty-row td {
    text-align: center;
    padding: 40px 20px !important;
    color: var(--zc-text-muted);
}

@media (max-width: 767.98px) {
    .registration-page-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .registration-toolbar-left, .registration-toolbar-right {
        width: 100%;
    }

    .registration-toolbar-right {
        justify-content: flex-end;
    }

    .registration-search-box {
        max-width: none;
    }

    .registration-sort-wrap {
        flex: 1;
    }

    .registration-sort-select {
        width: 100%;
    }
}


/* Submission modal - hidden by default and opened only by the View button */
.aws-submission-overlay {
    display: none !important;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(3px);
}

    .aws-submission-overlay.aws-submission-show {
        display: flex !important;
    }

.aws-submission-modal {
    width: min(1080px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.aws-submission-modal-body {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
}

.zentic-table a:hover {
    text-decoration: underline;
}
/* =========================================================
   AWS SHARE / PUBLISH MODAL
========================================================= */

.aws-share-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
}

    .aws-share-overlay.show {
        display: flex;
    }

.aws-share-modal {
    width: min(900px, 100%);
    max-height: 90vh;
    overflow: hidden;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: awsShareModalIn 0.2s ease;
}

@keyframes awsShareModalIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header */

.aws-share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e9edf3;
}

.aws-share-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.aws-share-title-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3867f5;
    color: #fff;
    font-size: 20px;
}

.aws-share-title-wrap h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    text-transform: uppercase;
}

.aws-share-title-wrap p {
    margin: 3px 0 0;
    color: #8a94a6;
    font-size: 14px;
}

.aws-share-close {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 6px;
    background: #f1f3f5;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
}

    .aws-share-close:hover {
        background: #e5e7eb;
        color: #374151;
    }

/* Tabs */

.aws-share-tabs {
    display: flex;
    gap: 28px;
    padding: 0 24px;
    border-bottom: 1px solid #e9edf3;
}

.aws-share-tab {
    position: relative;
    padding: 16px 14px;
    border: 0;
    background: transparent;
    color: #8a94a6;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

    .aws-share-tab::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        background: #3867f5;
        transform: scaleX(0);
        transition: 0.2s ease;
    }

    .aws-share-tab.active {
        color: #3867f5;
    }

        .aws-share-tab.active::after {
            transform: scaleX(1);
        }

/* Content */

.aws-share-content {
    display: none;
    padding: 24px;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
}

    .aws-share-content.active {
        display: block;
    }

/* Section */

.aws-share-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.aws-share-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #18a957;
}

.aws-share-section-head h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #172033;
}

.aws-share-section-head p {
    margin: 4px 0 0;
    color: #8a94a6;
    font-size: 13px;
}

/* Cards */

.aws-share-card {
    padding: 20px;
    border: 1px solid #e4e8ef;
    border-radius: 14px;
    background: #fff;
}

.aws-share-card-top,
.aws-embed-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

    .aws-share-card-top label {
        font-size: 14px;
        font-weight: 700;
        color: #172033;
    }

.aws-share-public-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 30px;
    background: #e9f9f0;
    color: #159447;
    font-size: 12px;
    font-weight: 700;
}

/* Link */

.aws-share-link-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 50px;
    border: 1px solid #dfe4eb;
    border-radius: 9px;
    background: #f8f9fb;
}

    .aws-share-link-box i {
        color: #64748b;
    }

    .aws-share-link-box input {
        width: 100%;
        border: 0;
        outline: none;
        background: transparent;
        color: #374151;
        font-size: 14px;
    }

.aws-share-actions,
.aws-embed-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.aws-share-copy-btn,
.aws-share-open-btn {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.aws-share-copy-btn {
    background: #16a34a;
}

.aws-share-open-btn {
    background: #3867f5;
}

.aws-share-copy-btn:hover {
    background: #12843c;
}

.aws-share-open-btn:hover {
    background: #2856d8;
}

/* Social */

.aws-social-heading h5,
.aws-embed-top h5 {
    margin: 0;
    color: #172033;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.aws-social-heading p,
.aws-embed-top p {
    margin: 6px 0 0;
    color: #8a94a6;
    font-size: 14px;
}

.aws-social-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
}

.aws-social-btn {
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: 0.2s ease;
}

    .aws-social-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }

.aws-whatsapp {
    background: #20c86b;
}

.aws-facebook {
    background: #1877f2;
}

.aws-linkedin {
    background: #0a66c2;
}

.aws-x {
    background: #000;
    font-size: 17px;
    font-weight: 700;
}

.aws-email {
    background: #6b7280;
}

/* Embed */

.aws-embed-select {
    height: 40px;
    min-width: 145px;
    padding: 0 12px;
    border: 1px solid #d7dce4;
    border-radius: 7px;
    background: #fff;
    color: #374151;
}

.aws-embed-code {
    padding: 18px;
    border-radius: 10px;
    background: #11151d;
    overflow-x: auto;
}

    .aws-embed-code code {
        color: #f472b6;
        font-family: monospace;
        font-size: 13px;
        line-height: 1.6;
        white-space: pre-wrap;
    }

/* Mobile */

@media (max-width: 576px) {

    .aws-share-overlay {
        padding: 10px;
    }

    .aws-share-modal {
        max-height: 95vh;
    }

    .aws-share-header {
        padding: 16px;
    }

    .aws-share-content {
        padding: 16px;
    }

    .aws-share-tabs {
        gap: 5px;
        padding: 0 10px;
    }

    .aws-share-tab {
        padding: 14px 10px;
    }

    .aws-share-card-top,
    .aws-embed-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .aws-share-actions {
        flex-direction: column;
    }

    .aws-share-copy-btn,
    .aws-share-open-btn {
        width: 100%;
    }
}

.aws-social-btn {
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 21px;
    transition: all 0.2s ease;
}

    .aws-social-btn:hover {
        transform: translateY(-2px);
    }

.aws-whatsapp {
    background: #25D366;
}

.aws-facebook {
    background: #1877F2;
}

.aws-linkedin {
    background: #0A66C2;
}
/* =========================================================
   AWS DELETE CONFIRMATION MODAL
========================================================= */

.aws-delete-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
}

    .aws-delete-overlay.show {
        display: flex;
    }

.aws-delete-modal {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 14px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    animation: awsDeleteModalIn 0.2s ease;
}

@keyframes awsDeleteModalIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.aws-delete-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fee2e2;
    color: #ef4444;
    font-size: 23px;
}

.aws-delete-content h4 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 18px;
    font-weight: 700;
    word-break: break-word;
}

.aws-delete-content p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.aws-delete-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
}

.aws-delete-cancel-btn,
.aws-delete-confirm-btn {
    min-width: 100px;
    height: 42px;
    padding: 0 18px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aws-delete-cancel-btn {
    border: 1px solid #dfe3e8;
    background: #ffffff;
    color: #4b5563;
}

    .aws-delete-cancel-btn:hover {
        background: #f8f9fa;
    }

.aws-delete-confirm-btn {
    border: 1px solid #ef4444;
    background: #ef4444;
    color: #ffffff;
}

    .aws-delete-confirm-btn:hover {
        background: #dc2626;
        border-color: #dc2626;
    }

@media (max-width: 480px) {

    .aws-delete-modal {
        padding: 24px 20px;
    }

    .aws-delete-actions {
        flex-direction: column-reverse;
    }

    .aws-delete-cancel-btn,
    .aws-delete-confirm-btn {
        width: 100%;
    }
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    border: none;
}

a.cursor-pointer {
    text-decoration: auto !important;
}

.invalid-feedback {
    /*    display: none !important;
*/ width: 100% !important;
    margin-top: .25rem !important;
    font-size: .875em !important;
    color: #dc3545 !important;
}

.container-my {
    margin-inline: 70px;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-action-btn {
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

    /* Edit */
    .table-action-btn[title="Edit"] {
        background-color: #eef8f8;
        border: 1px solid #176b6b36;
        color: #176b6b !important;
    }



    /* Preview */
    .table-action-btn[title="PreView"] {
        background-color: #eef4ff;
        border: 1px solid #13458f1c;
        color: var(--zc-blue) !important;
    }

    /* Share */
    .table-action-btn[title="Share"] {
        background-color: #eefaf7;
        border: 1px solid #14b8a64f;
        color: #14b8a6 !important;
    }

    /* Delete */
    .table-action-btn[title="Delete"], .table-action-btn[title="Delete unavailable — form has submissions"] {
        background-color: #fff0f2;
        border: 1px solid transparent;
        color: #ef233c !important;
    }

    .table-action-btn[title="Delete unavailable — form has submissions"] {
        opacity: 0.6;
        pointer-events: none
    }
    /* Icons */
    .table-action-btn i {
        font-size: 13px;
        line-height: 1;
        margin: 0px !important;
    }

.btn.table-action-btn:hover {
    border-color: inherit !important;
    background-color: inherit;
}

.zentic-table tbody td a {
    color: var(--zc-primary) !important;
}

a.btn.btn-primarymahi {
    background: none;
    border-color: #ffffff;
    color: #13458f;
    font-weight: 600;
    font-size: large;
}