/* =============================================================
   mehak.css — Mehak Design System v1.0
   Built on Bootstrap 5 · Supports RTL & LTR
   ============================================================= */

/* ── 1. CSS Custom Properties ──────────────────────────────── */
:root {
    /* Brand */
    --mhk-primary:           #2563EB;
    --mhk-primary-dark:      #1D4ED8;
    --mhk-primary-darker:    #1E3A8A;
    --mhk-primary-rgb:       37, 99, 235;
    --mhk-primary-light:     #EFF6FF;
    --mhk-primary-border:    #BFDBFE;
    --mhk-secondary:         #475569;
    --mhk-accent:            #F59E0B;

    /* State */
    --mhk-success:           #10B981;
    --mhk-success-light:     #D1FAE5;
    --mhk-warning:           #F59E0B;
    --mhk-warning-light:     #FEF3C7;
    --mhk-danger:            #EF4444;
    --mhk-danger-light:      #FEE2E2;
    --mhk-info:              #0EA5E9;
    --mhk-info-light:        #E0F2FE;

    /* Text */
    --mhk-text-primary:      #1E293B;
    --mhk-text-secondary:    #475569;
    --mhk-text-muted:        #94A3B8;
    --mhk-text-inverse:      #FFFFFF;

    /* Backgrounds */
    --mhk-bg-body:           #F1F5F9;
    --mhk-bg-card:           #FFFFFF;
    --mhk-bg-sidebar:        #0F172A;
    --mhk-bg-sidebar-hover:  rgba(255, 255, 255, 0.06);
    --mhk-bg-sidebar-active: rgba(37, 99, 235, 0.22);
    --mhk-bg-topbar:         #FFFFFF;

    /* Borders */
    --mhk-border-color:      #E2E8F0;
    --mhk-border-radius:     0.5rem;
    --mhk-border-radius-sm:  0.375rem;
    --mhk-border-radius-lg:  0.75rem;
    --mhk-border-radius-xl:  1rem;

    /* Shadows */
    --mhk-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
    --mhk-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --mhk-shadow:      0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --mhk-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --mhk-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);

    /* Spacing */
    --mhk-spacing-xs:  0.25rem;
    --mhk-spacing-sm:  0.5rem;
    --mhk-spacing-md:  1rem;
    --mhk-spacing-lg:  1.5rem;
    --mhk-spacing-xl:  2rem;
    --mhk-spacing-2xl: 3rem;

    /* Layout */
    --mhk-sidebar-width:  260px;
    --mhk-topbar-height:  64px;

    /* Typography */
    --mhk-font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mhk-font-arabic:  'Tajawal', 'Tahoma', 'Arial', sans-serif;
    --mhk-font-mono:    'Fira Code', 'Cascadia Code', 'Consolas', monospace;

    /* Transitions */
    --mhk-transition:    all 0.2s ease;
    --mhk-transition-sm: all 0.15s ease;
}

/* ── 2. Base & Global ─────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--mhk-font-body);
    background-color: var(--mhk-bg-body);
    color: var(--mhk-text-primary);
    font-size: 0.875rem;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

[dir="rtl"] body,
[dir="rtl"] * {
    font-family: var(--mhk-font-arabic);
}

/* ── 3. Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ── 4. App Layout ───────────────────────────────────────── */

/* Outer wrapper — semantic container for sidebar + main */
.mhk-wrapper {
    min-height: 100vh;
}

/* Sidebar */
.mhk-sidebar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: var(--mhk-sidebar-width);
    height: 100vh;
    background-color: var(--mhk-bg-sidebar);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.25s ease, width 0.25s ease;
    z-index: 1040;
    box-shadow: var(--mhk-shadow-lg);
}

/* Sidebar Brand */
.mhk-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
    height: var(--mhk-topbar-height);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-decoration: none;
    flex-shrink: 0;
}

.mhk-sidebar-brand:hover {
    text-decoration: none;
}

.mhk-sidebar-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: var(--mhk-border-radius-sm);
    background: var(--mhk-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}

.mhk-sidebar-brand-text {
    color: #FFFFFF;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
}

/* Sidebar Scrollable Nav Area */
.mhk-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.625rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.mhk-sidebar-nav::-webkit-scrollbar { width: 3px; }
.mhk-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.mhk-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; }

/* Sidebar Group Label */
.mhk-sidebar-group {
    margin-bottom: 0.125rem;
}

.mhk-sidebar-group-title {
    font-size: 0.675rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #4B5563;
    padding: 0.875rem 1.25rem 0.375rem;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
}

/* Sidebar Item */
.mhk-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.575rem 1.25rem;
    color: #94A3B8;
    text-decoration: none !important;
    font-size: 0.875rem;
    font-weight: 400;
    transition: var(--mhk-transition-sm);
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: start;
}

.mhk-sidebar-item:hover {
    color: #E2E8F0;
    background-color: var(--mhk-bg-sidebar-hover);
}

.mhk-sidebar-item.active {
    color: #FFFFFF;
    background-color: var(--mhk-bg-sidebar-active);
    font-weight: 500;
}

.mhk-sidebar-item.active::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--mhk-primary);
}

[dir="rtl"] .mhk-sidebar-item.active::before {
    border-radius: 2px 0 0 2px;
}

[dir="ltr"] .mhk-sidebar-item.active::before {
    border-radius: 0 2px 2px 0;
}

.mhk-sidebar-item-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9375rem;
    opacity: 0.8;
}

.mhk-sidebar-item.active .mhk-sidebar-item-icon,
.mhk-sidebar-item:hover .mhk-sidebar-item-icon {
    opacity: 1;
}

.mhk-sidebar-item-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar Footer */
.mhk-sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0.5rem 0;
    flex-shrink: 0;
}

/* ── Main Wrapper ──────────────────────────────────────────── */
.mhk-main {
    margin-inline-start: var(--mhk-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin 0.25s ease;
}

/* ── Topbar ───────────────────────────────────────────────── */
.mhk-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--mhk-topbar-height);
    background: var(--mhk-bg-topbar);
    border-bottom: 1px solid var(--mhk-border-color);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 0.875rem;
    box-shadow: var(--mhk-shadow-xs);
    flex-shrink: 0;
}

.mhk-topbar-toggle {
    display: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--mhk-text-secondary);
    border-radius: var(--mhk-border-radius-sm);
    cursor: pointer;
    font-size: 1.1rem;
    transition: var(--mhk-transition-sm);
    flex-shrink: 0;
}

.mhk-topbar-toggle:hover {
    background: var(--mhk-bg-body);
    color: var(--mhk-text-primary);
}

.mhk-topbar-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mhk-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mhk-topbar-actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.mhk-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--mhk-border-radius-sm);
    border: 1px solid var(--mhk-border-color);
    background: transparent;
    color: var(--mhk-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: var(--mhk-transition-sm);
    font-size: 0.9rem;
    position: relative;
}

.mhk-topbar-btn:hover {
    background: var(--mhk-bg-body);
    color: var(--mhk-primary);
    border-color: var(--mhk-primary-border);
}

.mhk-topbar-badge {
    position: absolute;
    top: 5px;
    inset-inline-end: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mhk-danger);
    border: 1.5px solid white;
}

.mhk-topbar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mhk-primary) 0%, var(--mhk-primary-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid var(--mhk-border-color);
    transition: var(--mhk-transition-sm);
    text-decoration: none !important;
    flex-shrink: 0;
}

.mhk-topbar-avatar:hover {
    border-color: var(--mhk-primary);
    color: white;
}

/* ── Main Content ─────────────────────────────────────────── */
.mhk-content {
    flex: 1;
    padding: var(--mhk-spacing-lg);
}

/* ── Mobile Overlay ───────────────────────────────────────── */
.mhk-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1039;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

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

/* ── 5. Page Header ───────────────────────────────────────── */
.mhk-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--mhk-spacing-lg);
    flex-wrap: wrap;
}

.mhk-page-header-info {
    min-width: 0;
}

.mhk-page-header-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--mhk-text-primary);
    margin: 0;
    line-height: 1.3;
}

.mhk-page-header-subtitle {
    font-size: 0.8125rem;
    color: var(--mhk-text-muted);
    margin: 0.2rem 0 0;
}

.mhk-page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── 6. Content Card ──────────────────────────────────────── */
.mhk-card {
    background: var(--mhk-bg-card);
    border-radius: var(--mhk-border-radius-lg);
    border: 1px solid var(--mhk-border-color);
    box-shadow: var(--mhk-shadow-sm);
    overflow: hidden;
}

.mhk-card-header {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--mhk-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--mhk-bg-card);
}

.mhk-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mhk-text-primary);
    margin: 0;
}

.mhk-card-body {
    padding: 1.25rem;
}

.mhk-card-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--mhk-border-color);
    background: #FAFBFC;
}

/* ── 7. Data Table ────────────────────────────────────────── */
.mhk-table-container {
    overflow-x: auto;
    border-radius: var(--mhk-border-radius-lg);
    border: 1px solid var(--mhk-border-color);
}

.mhk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin: 0;
    background: var(--mhk-bg-card);
}

.mhk-table thead {
    background: var(--mhk-primary);
}

.mhk-table thead th {
    padding: 0.75rem 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    border: none;
    vertical-align: middle;
}

.mhk-table tbody tr {
    border-bottom: 1px solid var(--mhk-border-color);
    transition: background-color 0.12s ease;
}

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

.mhk-table tbody tr:nth-child(even) {
    background-color: #FAFBFD;
}

.mhk-table tbody tr:hover {
    background-color: var(--mhk-primary-light);
}

.mhk-table tbody td {
    padding: 0.75rem 1rem;
    color: var(--mhk-text-secondary);
    vertical-align: middle;
    border: none;
}

.mhk-table-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    justify-content: center;
}

/* Search bar above table */
.mhk-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.mhk-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border: 1px solid var(--mhk-border-color);
    border-radius: var(--mhk-border-radius-sm);
    padding: 0.4rem 0.75rem;
    transition: var(--mhk-transition-sm);
    min-width: 220px;
}

.mhk-search:focus-within {
    border-color: var(--mhk-primary);
    box-shadow: 0 0 0 3px rgba(var(--mhk-primary-rgb), 0.1);
}

.mhk-search input {
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: var(--mhk-text-primary);
    background: transparent;
    width: 100%;
}

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

.mhk-search-icon {
    color: var(--mhk-text-muted);
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ── 8. Forms ─────────────────────────────────────────────── */
.mhk-form .form-label,
.mhk-form-group .form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mhk-text-secondary);
    margin-bottom: 0.375rem;
    display: block;
}

.mhk-form .form-control,
.mhk-form .form-select,
.mhk-form-group .form-control,
.mhk-form-group .form-select {
    border: 1px solid var(--mhk-border-color);
    border-radius: var(--mhk-border-radius-sm);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    color: var(--mhk-text-primary);
    background-color: #FFFFFF;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}

.mhk-form .form-control:focus,
.mhk-form .form-select:focus,
.mhk-form-group .form-control:focus,
.mhk-form-group .form-select:focus {
    border-color: var(--mhk-primary);
    box-shadow: 0 0 0 3px rgba(var(--mhk-primary-rgb), 0.12);
    outline: none;
}

.mhk-form .form-control.is-invalid,
.mhk-form-group .form-control.is-invalid {
    border-color: var(--mhk-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.mhk-form .invalid-feedback,
.mhk-form-group .invalid-feedback {
    font-size: 0.78rem;
    color: var(--mhk-danger);
}

.mhk-form textarea.form-control,
.mhk-form-group textarea.form-control {
    resize: vertical;
    min-height: 90px;
}

.mhk-form-group {
    margin-bottom: 1.25rem;
}

.mhk-form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--mhk-border-color);
    flex-wrap: wrap;
}

/* ── 9. Details Grid ──────────────────────────────────────── */
.mhk-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.mhk-details-item {
    padding: 0.875rem 1rem;
    border: 1px solid var(--mhk-border-color);
    border-radius: var(--mhk-border-radius-sm);
    background: var(--mhk-bg-body);
}

.mhk-details-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mhk-text-muted);
    margin-bottom: 0.3rem;
    user-select: none;
}

.mhk-details-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--mhk-text-primary);
    word-break: break-word;
}

/* ── 10. Buttons ──────────────────────────────────────────── */
.mhk-btn-primary,
.mhk-btn-secondary,
.mhk-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--mhk-border-radius-sm);
    cursor: pointer;
    text-decoration: none !important;
    transition: var(--mhk-transition-sm);
    line-height: 1.4;
    white-space: nowrap;
    user-select: none;
}

.mhk-btn-primary {
    border: 1px solid var(--mhk-primary);
    background: var(--mhk-primary);
    color: white;
}

.mhk-btn-primary:hover {
    background: var(--mhk-primary-dark);
    border-color: var(--mhk-primary-dark);
    color: white;
    box-shadow: var(--mhk-shadow);
}

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

.mhk-btn-secondary:hover {
    background: var(--mhk-bg-body);
    border-color: #94A3B8;
    color: var(--mhk-text-primary);
}

.mhk-btn-danger {
    border: 1px solid var(--mhk-danger);
    background: var(--mhk-danger);
    color: white;
}

.mhk-btn-danger:hover {
    background: #DC2626;
    border-color: #DC2626;
    color: white;
    box-shadow: var(--mhk-shadow);
}

/* Small icon button used in table action columns */
.mhk-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--mhk-border-radius-sm);
    border: 1px solid var(--mhk-border-color);
    background: white;
    color: var(--mhk-text-secondary);
    cursor: pointer;
    text-decoration: none !important;
    transition: var(--mhk-transition-sm);
    font-size: 0.8125rem;
    flex-shrink: 0;
}

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

.mhk-btn-icon.danger:hover {
    background: var(--mhk-danger-light);
    color: var(--mhk-danger);
    border-color: #FECACA;
}

/* ── 11. Status Badges ────────────────────────────────────── */
.mhk-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.mhk-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mhk-badge-active {
    background: var(--mhk-success-light);
    color: #065F46;
}
.mhk-badge-active::before { background: var(--mhk-success); }

.mhk-badge-inactive {
    background: #F1F5F9;
    color: #475569;
}
.mhk-badge-inactive::before { background: #94A3B8; }

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

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

.mhk-badge-info {
    background: var(--mhk-info-light);
    color: #0C4A6E;
}
.mhk-badge-info::before { background: var(--mhk-info); }

/* ── 12. Alerts ───────────────────────────────────────────── */
.mhk-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-radius: var(--mhk-border-radius);
    border: 1px solid transparent;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

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

.mhk-alert-success {
    background: var(--mhk-success-light);
    border-color: #A7F3D0;
    color: #065F46;
}

.mhk-alert-error {
    background: var(--mhk-danger-light);
    border-color: #FECACA;
    color: #991B1B;
}

.mhk-alert-warning {
    background: var(--mhk-warning-light);
    border-color: #FDE68A;
    color: #92400E;
}

.mhk-alert-info {
    background: var(--mhk-info-light);
    border-color: #BAE6FD;
    color: #0C4A6E;
}

/* ── 13. Empty State ──────────────────────────────────────── */
.mhk-empty {
    text-align: center;
    padding: var(--mhk-spacing-2xl) var(--mhk-spacing-xl);
}

.mhk-empty-icon {
    font-size: 2.75rem;
    color: var(--mhk-text-muted);
    margin-bottom: 1rem;
    opacity: 0.55;
}

.mhk-empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mhk-text-secondary);
    margin-bottom: 0.375rem;
}

.mhk-empty-text {
    font-size: 0.8125rem;
    color: var(--mhk-text-muted);
}

/* ── 14. Pagination ───────────────────────────────────────── */
.pagination .page-link {
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mhk-border-radius-sm) !important;
    border: 1px solid var(--mhk-border-color);
    font-size: 0.8125rem;
    color: var(--mhk-text-secondary);
    text-decoration: none;
    transition: var(--mhk-transition-sm);
    margin: 0 2px;
    background: white;
}

.pagination .page-link:hover {
    background: var(--mhk-primary-light);
    border-color: var(--mhk-primary-border);
    color: var(--mhk-primary);
}

.pagination .page-item.active .page-link {
    background: var(--mhk-primary);
    border-color: var(--mhk-primary);
    color: white;
}

.pagination .page-item.disabled .page-link {
    opacity: 0.45;
    cursor: not-allowed;
    background: white;
}

/* ── 15. Bootstrap Harmonization ─────────────────────────── */
.btn-primary {
    --bs-btn-bg:               var(--mhk-primary);
    --bs-btn-border-color:     var(--mhk-primary);
    --bs-btn-hover-bg:         var(--mhk-primary-dark);
    --bs-btn-hover-border-color: var(--mhk-primary-dark);
    --bs-btn-active-bg:        var(--mhk-primary-darker);
    --bs-btn-active-border-color: var(--mhk-primary-darker);
    --bs-btn-focus-shadow-rgb: var(--mhk-primary-rgb);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mhk-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--mhk-primary-rgb), 0.15);
}

.dropdown-menu {
    border: 1px solid var(--mhk-border-color);
    border-radius: var(--mhk-border-radius);
    box-shadow: var(--mhk-shadow-lg);
    font-size: 0.875rem;
    padding: 0.375rem;
}

.dropdown-item {
    border-radius: var(--mhk-border-radius-sm);
    padding: 0.4rem 0.75rem;
    color: var(--mhk-text-secondary);
    transition: var(--mhk-transition-sm);
}

.dropdown-item:hover {
    background: var(--mhk-primary-light);
    color: var(--mhk-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--mhk-primary);
    color: white;
}

.dropdown-divider {
    border-color: var(--mhk-border-color);
    margin: 0.375rem 0;
}

/* ── 16. Utility Classes ──────────────────────────────────── */
.text-mhk-primary   { color: var(--mhk-primary) !important; }
.text-mhk-secondary { color: var(--mhk-text-secondary) !important; }
.text-mhk-muted     { color: var(--mhk-text-muted) !important; }
.bg-mhk-primary     { background-color: var(--mhk-primary) !important; }
.bg-mhk-body        { background-color: var(--mhk-bg-body) !important; }
.border-mhk         { border-color: var(--mhk-border-color) !important; }
.rounded-mhk        { border-radius: var(--mhk-border-radius) !important; }
.shadow-mhk         { box-shadow: var(--mhk-shadow) !important; }
.fw-500             { font-weight: 500 !important; }
.fw-600             { font-weight: 600 !important; }

/* ── 17. Responsive Breakpoints ───────────────────────────── */
@media (max-width: 991.98px) {
    .mhk-sidebar {
        transform: translateX(-100%);
    }

    [dir="rtl"] .mhk-sidebar {
        transform: translateX(100%);
    }

    .mhk-sidebar.open {
        transform: translateX(0) !important;
    }

    .mhk-main {
        margin-inline-start: 0 !important;
    }

    .mhk-topbar-toggle {
        display: flex;
    }

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

@media (max-width: 575.98px) {
    .mhk-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .mhk-page-header-actions {
        width: 100%;
    }

    .mhk-details-grid {
        grid-template-columns: 1fr;
    }

    .mhk-form-actions {
        flex-direction: column;
    }

    .mhk-btn-primary,
    .mhk-btn-secondary,
    .mhk-btn-danger {
        width: 100%;
        justify-content: center;
    }

    .mhk-table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .mhk-search {
        min-width: unset;
    }
}

/* ══════════════════════════════════════════════════════════════
   18. Auth Pages (Login / Register / Password Reset)
   ══════════════════════════════════════════════════════════════ */

/* ── Centered card layout (replaces split-screen) ────────────── */
.mhk-auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background: linear-gradient(150deg, #EFF6FF 0%, var(--mhk-bg-body) 60%);
}

.mhk-auth-container {
    width: 100%;
    max-width: 460px;
}

/* ── Auth logo (above card) ──────────────────────────────────── */
.mhk-auth-logo-top {
    text-align: center;
    margin-bottom: 1.75rem;
}

.mhk-auth-logo-top a { text-decoration: none !important; }

.mhk-auth-logo-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--mhk-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 auto 0.625rem;
    box-shadow: 0 8px 24px rgba(var(--mhk-primary-rgb), 0.3);
}

.mhk-auth-logo-name {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--mhk-text-primary);
}

/* ── Auth card box ───────────────────────────────────────────── */
.mhk-auth-card-box {
    background: #FFFFFF;
    border-radius: var(--mhk-border-radius-xl);
    box-shadow: var(--mhk-shadow-xl);
    padding: 2.25rem 2.5rem;
    border: 1px solid var(--mhk-border-color);
}

/* ── Brand side panel (hidden in new design) ─────────────────── */
.mhk-auth-brand {
    flex: 0 0 420px;
    background: linear-gradient(145deg,
        var(--mhk-primary-darker) 0%,
        var(--mhk-primary)        55%,
        #5b9cf6                   100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
    position: relative;
    overflow: hidden;
    color: #fff;
}

/* Decorative circles */
.mhk-auth-brand::before,
.mhk-auth-brand::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
}
.mhk-auth-brand::before { width: 320px; height: 320px; bottom: -80px; inset-inline-start: -80px; }
.mhk-auth-brand::after  { width: 200px; height: 200px; top: -40px;    inset-inline-end: -50px; }

.mhk-auth-brand-logo {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 1;
}

.mhk-auth-brand-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.75rem;
    position: relative;
    z-index: 1;
}

.mhk-auth-brand-sub {
    font-size: 1rem;
    opacity: 0.82;
    max-width: 280px;
    text-align: center;
    line-height: 1.65;
    position: relative;
    z-index: 1;
}

.mhk-auth-brand-features {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    width: 100%;
    position: relative;
    z-index: 1;
}

.mhk-auth-brand-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--mhk-border-radius);
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
}

.mhk-auth-brand-feature i { font-size: 1.1rem; opacity: 0.9; }

/* ── Form side panel ──────────────────────────────────────── */
.mhk-auth-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    overflow-y: auto;
}

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

/* Mobile brand header (hidden on desktop) */
.mhk-auth-mobile-brand {
    display: none;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.mhk-auth-mobile-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--mhk-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
}

/* ── Auth Form Header ─────────────────────────────────────── */
.mhk-auth-title {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--mhk-text-primary);
    margin: 0 0 0.375rem;
}

.mhk-auth-subtitle {
    font-size: 0.9rem;
    color: var(--mhk-text-muted);
    margin-bottom: 2rem;
}

/* ── Input with icon ──────────────────────────────────────── */
.mhk-input-icon {
    position: relative;
}

.mhk-input-icon-el {
    position: absolute;
    inset-inline-end: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mhk-text-muted);
    font-size: 1rem;
    z-index: 2;
    pointer-events: none;
    transition: color 0.15s ease;
}

.mhk-input-icon-el.mhk-toggle-pwd {
    pointer-events: all;
    cursor: pointer;
}

.mhk-input-icon .form-control,
.mhk-input-icon .form-select {
    padding-inline-end: 2.75rem;
    height: 48px;
    border-radius: var(--mhk-border-radius-sm);
    border-color: var(--mhk-border-color);
    font-size: 0.9375rem;
    background: white;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mhk-input-icon .form-control:focus {
    border-color: var(--mhk-primary);
    box-shadow: 0 0 0 3px rgba(var(--mhk-primary-rgb), 0.12);
}

.mhk-input-icon .form-control:focus ~ .mhk-input-icon-el {
    color: var(--mhk-primary);
}

/* ── Auth Divider ─────────────────────────────────────────── */
.mhk-auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0;
    color: var(--mhk-text-muted);
    font-size: 0.8125rem;
}

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

/* ── Social Login Buttons ─────────────────────────────────── */
.mhk-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    height: 46px;
    border-radius: var(--mhk-border-radius-sm);
    border: 1.5px solid var(--mhk-border-color);
    background: white;
    color: var(--mhk-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: var(--mhk-transition-sm);
    cursor: pointer;
    margin-bottom: 0.625rem;
}

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

.mhk-social-btn img { width: 20px; height: 20px; }

/* ── Auth Submit Button ───────────────────────────────────── */
.mhk-auth-btn {
    width: 100%;
    height: 48px;
    border-radius: var(--mhk-border-radius-sm);
    background: var(--mhk-primary);
    border: none;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--mhk-transition-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.mhk-auth-btn:hover {
    background: var(--mhk-primary-dark);
    box-shadow: var(--mhk-shadow);
    color: white;
}

.mhk-auth-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Auth Footer Links ────────────────────────────────────── */
.mhk-auth-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--mhk-text-muted);
}

.mhk-auth-footer a {
    color: var(--mhk-primary);
    font-weight: 600;
    text-decoration: none;
}

.mhk-auth-footer a:hover { text-decoration: underline; }

/* ── Manage Pages Nav ─────────────────────────────────────── */
.mhk-manage-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mhk-manage-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: var(--mhk-border-radius-sm);
    color: var(--mhk-text-secondary);
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 400;
    transition: var(--mhk-transition-sm);
    border: 1px solid transparent;
}

.mhk-manage-nav-item:hover {
    background: var(--mhk-primary-light);
    color: var(--mhk-primary);
}

.mhk-manage-nav-item.active {
    background: var(--mhk-primary-light);
    color: var(--mhk-primary);
    font-weight: 600;
    border-color: var(--mhk-primary-border);
}

.mhk-manage-nav-item i { font-size: 1rem; }

/* ── Responsive Auth ──────────────────────────────────────── */
@media (max-width: 991.98px) {
    .mhk-auth-brand { display: none !important; }
    .mhk-auth-mobile-brand { display: flex; }
    .mhk-auth-form-panel { padding: 2rem 1.25rem; }
}

@media (max-width: 575.98px) {
    .mhk-auth-form-panel { padding: 1.5rem 1rem; align-items: flex-start; }
    .mhk-auth-title { font-size: 1.375rem; }
}