/*
 * Tayseer ERP — Vuexy Branding Overrides
 * Burgundy primary color + Cairo Arabic font
 * Also provides legacy design tokens (--clr-*) used by feature CSS.
 */

:root,
[data-bs-theme="light"] {
  /* Bootstrap 5 overrides */
  --bs-primary: #800020;
  --bs-primary-rgb: 128, 0, 32;
  --bs-primary-bg-subtle: rgba(128, 0, 32, 0.08);
  --bs-primary-border-subtle: rgba(128, 0, 32, 0.2);
  --bs-primary-text-emphasis: #5a0016;
  --bs-link-color: #800020;
  --bs-link-color-rgb: 128, 0, 32;
  --bs-link-hover-color: #5a0016;
  --bs-link-hover-color-rgb: 90, 0, 22;
  --bs-font-sans-serif: 'Cairo', sans-serif;
  --bs-body-font-family: 'Cairo', sans-serif;

  /* Legacy design tokens (used by smart-onboarding, system-settings, etc.) */
  --clr-primary-900: #4a0012;
  --clr-primary-800: #600018;
  --clr-primary-700: #70001c;
  --clr-primary: #800020;
  --clr-primary-500: #9a1a3a;
  --clr-primary-400: #b03050;
  --clr-primary-300: #c75070;
  --clr-primary-200: #dd8098;
  --clr-primary-100: #f0c0cc;
  --clr-primary-50: #fdf0f3;
  --clr-accent: #c8a04a;
  --clr-accent-light: #e8d08a;
  --clr-accent-dark: #9a7a2a;
  --clr-bg: #f4f6f9;
  --clr-surface: #ffffff;
  --clr-border: #e0e0e0;
  --clr-text: #2c2c2c;
  --clr-text-muted: #6c757d;
  --clr-text-light: #999;
  --clr-text-on-primary: #ffffff;
  --clr-success: #28a745;
  --clr-warning: #ffc107;
  --clr-danger: #dc3545;
  --clr-info: #17a2b8;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 26px;
  --transition: all 0.25s ease;
}

body {
  font-family: 'Cairo', sans-serif;
}

/* Primary color for buttons, badges, bg-primary, etc. */
.bg-primary, .btn-primary {
  background-color: #800020 !important;
  border-color: #800020 !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #6a001a !important;
  border-color: #6a001a !important;
}
.btn-outline-primary {
  color: #800020;
  border-color: #800020;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
  background-color: #800020;
  border-color: #800020;
  color: #fff;
}
.btn-label-primary {
  background-color: rgba(128, 0, 32, 0.08);
  color: #800020;
}
.btn-text-primary {
  color: #800020;
}
.text-primary {
  color: #800020 !important;
}
.border-primary {
  border-color: #800020 !important;
}
.badge.bg-primary {
  background-color: #800020 !important;
}
a {
  color: #800020;
}
a:hover {
  color: #5a0016;
}

/* Sidebar dark theme with burgundy accent */
.layout-menu[data-bs-theme="dark"] {
  --bs-primary: #c8a04a;
}
.layout-menu[data-bs-theme="dark"] .menu-inner > .menu-item.active > .menu-link,
.layout-menu[data-bs-theme="dark"] .menu-inner > .menu-item.active > .menu-link:hover {
  background-color: rgba(200, 160, 74, 0.16);
  color: #c8a04a;
}
.layout-menu[data-bs-theme="dark"] .menu-sub .menu-item.active > .menu-link,
.layout-menu[data-bs-theme="dark"] .menu-sub .menu-item.active > .menu-link:hover {
  color: #c8a04a;
}

/* App brand styling */
.app-brand .app-brand-text {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: clamp(0.7rem, 1.1vw + 0.4rem, 0.92rem);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  max-width: calc(100% - 70px);
}
.app-brand .app-brand-logo img {
  border-radius: 6px;
}

/* Navbar user avatar */
.avatar-online::after {
  background-color: var(--bs-success);
}

/* Vuexy active menu indicator line */
.layout-menu .menu-inner > .menu-item.active::before {
  background: #c8a04a;
}

/* Pagination active state */
.page-item.active .page-link {
  background-color: #800020;
  border-color: #800020;
}

/* Nav pills/tabs */
.nav-pills .nav-link.active {
  background-color: #800020;
}
.nav-tabs .nav-link.active {
  color: #800020;
  border-bottom-color: #800020;
}

/* Form focus */
.form-control:focus,
.form-select:focus {
  border-color: rgba(128, 0, 32, 0.5);
  box-shadow: 0 0 0.25rem 0.05rem rgba(128, 0, 32, 0.1);
}

/* Card header consistency */
.card {
  border-radius: 0.5rem;
}

/* Table hover */
.table-hover > tbody > tr:hover {
  --bs-table-hover-bg: rgba(128, 0, 32, 0.04);
}

/* RTL fixes for select2 and kartik widgets */
.select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered {
  text-align: right;
}