/* Haddarly Brand Theme — uses haddarly-tokens.css */

/* ===== Sidebar ===== */
.main-sidebar {
    background: var(--sidebar-bg) !important;
    border-inline-end: 1px solid var(--sidebar-border) !important;
    box-shadow: var(--shadow-sm) !important;
}

.main-sidebar .sidebar {
    background: transparent !important;
}

.sidebar-primary,
.sidebar-dark-primary {
    background: var(--sidebar-bg) !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link {
    color: var(--sidebar-text) !important;
    margin: 2px 6px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
    background: var(--sidebar-hover-bg) !important;
    color: var(--primary-300) !important;
}

.main-sidebar .nav-sidebar .nav-link.active {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(155, 34, 66, 0.2) !important;
}

.main-sidebar .nav-item.menu-open > .nav-link:not(.active) {
    background: var(--sidebar-open-bg) !important;
    color: var(--primary-400) !important;
}

.main-sidebar .brand-link {
    background: var(--sidebar-bg) !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
    color: var(--sidebar-text) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 57px;
}

.main-sidebar .brand-link .brand-image {
    max-height: 40px !important;
    width: auto !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.main-sidebar .brand-link .brand-image-full {
    max-height: 44px !important;
    width: auto !important;
    max-width: 180px;
    object-fit: contain;
}

.main-sidebar .brand-text {
    color: var(--sidebar-text) !important;
    font-weight: bold !important;
}

.main-sidebar .user-panel {
    border-bottom: 1px solid var(--sidebar-border) !important;
}

.main-sidebar .user-panel .info a {
    color: var(--sidebar-text) !important;
}

.main-sidebar .form-control-sidebar {
    background: var(--secondary-50) !important;
    border: 1px solid var(--sidebar-border) !important;
    color: var(--sidebar-text) !important;
}

.main-sidebar .form-control-sidebar:focus {
    background: var(--neutral-white) !important;
    border-color: var(--primary-300) !important;
    box-shadow: 0 0 0 2px rgba(155, 34, 66, 0.12) !important;
}

.main-sidebar .form-control-sidebar::placeholder {
    color: var(--sidebar-text-muted) !important;
}

.main-sidebar .btn-sidebar {
    background: var(--primary-50) !important;
    border-color: var(--primary-300) !important;
    color: var(--primary-300) !important;
}

.main-sidebar .btn-sidebar:hover {
    background: var(--primary-75) !important;
    border-color: var(--primary-400) !important;
    color: var(--primary-400) !important;
}

.main-sidebar .nav-icon {
    color: var(--sidebar-icon) !important;
    font-size: 1.2rem !important;
    width: 28px !important;
    text-align: center !important;
    margin-right: 10px !important;
    transition: all 0.3s ease !important;
}

.main-sidebar .nav-link:hover .nav-icon {
    transform: scale(1.1) !important;
    color: var(--primary-300) !important;
}

.main-sidebar .nav-link.active .nav-icon,
.main-sidebar .nav-link.active .right {
    transform: scale(1.05) !important;
    color: var(--sidebar-active-text) !important;
}

.main-sidebar .nav-treeview {
    background: var(--sidebar-sub-bg) !important;
    margin: 0 8px;
    border-radius: 0 0 8px 8px;
}

.main-sidebar .nav-treeview > .nav-item > .nav-link {
    color: var(--sidebar-text-muted) !important;
    padding-left: 2.5rem;
}

.main-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    background: var(--sidebar-hover-bg) !important;
    color: var(--primary-300) !important;
}

.main-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(155, 34, 66, 0.2) !important;
}

.main-sidebar::-webkit-scrollbar {
    width: 6px;
}

.main-sidebar::-webkit-scrollbar-track {
    background: var(--primary-50);
}

.main-sidebar::-webkit-scrollbar-thumb {
    background: var(--primary-75);
    border-radius: 3px;
}

.main-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--primary-100);
}

.main-sidebar .nav-header {
    color: var(--sidebar-text-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 1rem 1rem 0.5rem;
}

.main-sidebar .nav-sidebar .nav-link > .right,
.main-sidebar .nav-sidebar .nav-link > p > .right {
    color: var(--sidebar-text-muted) !important;
}

.main-sidebar .nav-link.active > .right,
.main-sidebar .nav-link.active > p > .right {
    color: var(--sidebar-active-text) !important;
}

/* Collapsed sidebar: icon only */
body.sidebar-mini.sidebar-collapse .main-sidebar .brand-link .brand-image-full {
    display: none !important;
}

body.sidebar-mini:not(.sidebar-collapse) .main-sidebar .brand-link .brand-image-icon-only {
    display: none !important;
}

body.sidebar-mini.sidebar-collapse .main-sidebar .brand-link .brand-image-icon-only {
    display: inline-block !important;
    max-height: 36px !important;
    margin: 0 auto;
}

body.sidebar-mini.sidebar-collapse .main-sidebar .brand-link .brand-text {
    display: none !important;
}

/* ===== Content header (base — extended in haddarly-rtl.css) ===== */
.content-header h1,
.content-header .breadcrumb-item.active {
    color: var(--primary-500) !important;
}

/* ===== Cards ===== */
.card-haddarly,
.card.card-haddarly {
    border: 1px solid var(--haddarly-border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-haddarly > .card-header {
    background: var(--secondary-50);
    border-bottom: 1px solid var(--color-border);
    color: var(--primary-500);
    font-weight: 600;
}

.card {
    border-radius: 12px;
    border-color: var(--haddarly-border);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background: var(--secondary-50);
    border-bottom-color: var(--color-border);
    color: var(--neutral-muted);
}

.content-wrapper {
    background: var(--haddarly-surface) !important;
}

/* ===== Buttons ===== */
.btn-primary,
.btn-haddarly {
    background: var(--haddarly-primary) !important;
    border-color: var(--haddarly-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-haddarly:hover {
    background: var(--haddarly-primary-dark) !important;
    border-color: var(--haddarly-primary-dark) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--haddarly-primary) !important;
    border-color: var(--haddarly-primary) !important;
}

.btn-outline-primary:hover {
    background: var(--haddarly-primary) !important;
    color: #fff !important;
}

a {
    color: var(--haddarly-primary);
}

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

/* ===== Pagination ===== */
.page-item.active .page-link {
    background-color: var(--haddarly-primary) !important;
    border-color: var(--haddarly-primary) !important;
}

.page-link {
    color: var(--haddarly-primary) !important;
}

.page-link:hover {
    color: var(--haddarly-primary-dark) !important;
}

/* ===== Select2 ===== */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--haddarly-primary) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--haddarly-primary) !important;
}

/* ===== DevExtreme accent ===== */
.dx-button-mode-contained.dx-button-default {
    background-color: var(--haddarly-primary) !important;
    border-color: var(--haddarly-primary) !important;
}

.dx-button-mode-contained.dx-button-default.dx-state-hover {
    background-color: var(--haddarly-primary-dark) !important;
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td {
    background-color: rgba(155, 34, 66, 0.08) !important;
}

/* ===== Dashboard welcome card ===== */
.haddarly-welcome-card {
    background: linear-gradient(135deg, var(--primary-300) 0%, var(--primary-500) 100%);
    color: #fff;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.haddarly-welcome-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.haddarly-welcome-card h3 {
    color: #fff;
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-size: 1.5rem;
}

.haddarly-welcome-card .welcome-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.haddarly-welcome-card img {
    max-width: 260px;
    height: auto;
    opacity: 0.98;
    background: rgba(255, 255, 255, 0.95);
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

/* ===== Auth pages (shared) ===== */
.haddarly-auth-body {
    font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, var(--haddarly-primary) 0%, var(--haddarly-primary-dark) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.haddarly-auth-header {
    background: linear-gradient(135deg, var(--haddarly-primary) 0%, var(--haddarly-primary-dark) 100%);
}

.haddarly-auth-btn {
    background: linear-gradient(135deg, var(--haddarly-primary) 0%, var(--haddarly-primary-dark) 100%) !important;
}

.haddarly-auth-btn:hover {
    box-shadow: 0 10px 20px rgba(155, 34, 66, 0.35) !important;
}

.haddarly-auth-focus:focus {
    border-color: var(--haddarly-primary) !important;
    box-shadow: 0 0 0 3px rgba(155, 34, 66, 0.15) !important;
}

.haddarly-auth-link {
    color: var(--haddarly-primary) !important;
}

.haddarly-auth-link:hover {
    color: var(--haddarly-primary-dark) !important;
}

.haddarly-auth-logo img {
    max-width: 160px;
    max-height: 80px;
    object-fit: contain;
}

/* ===== Notification footer accent ===== */
.notification-dropdown-footer {
    color: var(--haddarly-primary) !important;
}

.notification-dropdown-footer:hover {
    background: rgba(155, 34, 66, 0.06) !important;
}
section.content {
    background: #fff;
}