/* =========================================================================
 * brand.css — NOAKO / Zollanvari visual rebrand layer
 *
 * A direction-agnostic brand skin that sits ON TOP of the Metronic theme
 * (style.bundle) and the preorder/responsive layers, but BEFORE i18n.css so
 * that i18n.css keeps the last word on fonts & the language switcher.
 *
 * It changes ONLY presentation: palette, typography rhythm, radii, shadows,
 * and component finishes. It does NOT touch logos, the app name, the i18n
 * machinery, or any markup.
 *
 * Palette source — the three classic Persian-carpet dye tones:
 *   Madder (روناس)  — primary / actions      #A8324A
 *   Indigo (نیل)    — structure / navigation  #22304E
 *   Saffron (زعفران)— highlight / accent      #D99A2B
 * on a warm "Sand" neutral canvas.
 * ========================================================================= */

:root {
  /* —— Madder (روناس) —— */
  --br-madder-50:#FBF0F2;  --br-madder-100:#F6DCE1; --br-madder-200:#EBB6C0;
  --br-madder-300:#DC8B9C; --br-madder-400:#C85F77; --br-madder-500:#A8324A;
  --br-madder-600:#8E2740; --br-madder-700:#721E33; --br-madder-800:#561726;

  /* —— Indigo (نیل) —— */
  --br-indigo-50:#EEF1F7;  --br-indigo-100:#DDE4F1; --br-indigo-300:#8FA4CE;
  --br-indigo-500:#3B5BA5; --br-indigo-600:#2E4068; --br-indigo-700:#22304E;
  --br-indigo-800:#1C2742; --br-indigo-900:#141B2E;

  /* —— Saffron (زعفران) —— */
  --br-saffron-100:#F8ECCF; --br-saffron-300:#EBC476; --br-saffron-500:#D99A2B; --br-saffron-600:#B97E1C;

  /* —— Warm neutrals (Sand) —— */
  --br-sand-0:#FFFFFF;  --br-sand-25:#FBF9F4; --br-sand-50:#F5F1E9; --br-sand-100:#ECE6DA;
  --br-sand-200:#DDD5C5; --br-sand-300:#C4B9A4; --br-sand-400:#9A8F7B; --br-sand-500:#6E6555;
  --br-sand-600:#4E4738; --br-ink:#1C1A14;

  /* —— Semantic —— */
  --br-success:#2F8F6B; --br-success-bg:#E6F2EC;
  --br-warning:#D99A2B; --br-warning-bg:#FBF0D8;
  --br-danger:#C0392B;  --br-danger-bg:#FBE7E4;
  --br-info:#3B5BA5;    --br-info-bg:#E7ECF7;

  /* —— Roles —— */
  --br-primary:var(--br-madder-500);
  --br-primary-press:var(--br-madder-700);
  --br-bg:var(--br-sand-25);
  --br-surface:var(--br-sand-0);
  --br-border:var(--br-sand-200);
  --br-border-soft:var(--br-sand-100);
  --br-text:var(--br-ink);
  --br-text-2:var(--br-sand-500);

  /* —— Radii / shadows / motion —— */
  --br-r-sm:10px; --br-r-md:14px; --br-r-lg:20px; --br-r-full:999px;
  --br-sh-xs:0 1px 2px rgba(54,48,36,.06);
  --br-sh-sm:0 2px 8px rgba(54,48,36,.07);
  --br-sh-md:0 8px 24px rgba(54,48,36,.10);
  --br-sh-lg:0 20px 48px rgba(54,48,36,.14);
  --br-glow:0 6px 22px rgba(168,50,74,.26);
  --br-motion:.18s cubic-bezier(.4,0,.2,1);
}

/* =========================================================================
 * 1) Canvas & typography rhythm
 * ========================================================================= */
body,
.kt-content,
.kt-grid--root,
.kt-wrapper { background-color: var(--br-bg); }

body { color: var(--br-text); -webkit-font-smoothing: antialiased; }

/* Headings get a touch more presence (font-family itself is owned by i18n.css) */
.kt-subheader__title,
.kt-portlet__head-title,
h1, h2, h3 { letter-spacing: .1px; }

/* Links read as madder */
a { color: var(--br-madder-600); }
a:hover { color: var(--br-madder-700); }
.kt-link, .kt-link:hover { color: var(--br-madder-600); }

/* Selection */
::selection { background: var(--br-madder-100); color: var(--br-madder-800); }

/* =========================================================================
 * 2) Brand-color remap  (Metronic "brand" = old indigo-blue #5d78ff)
 * ========================================================================= */
.kt-bg-brand,
.kt-badge.kt-badge--brand,
.btn-brand,
.btn-brand:focus,
.btn-brand.focus {
  background-color: var(--br-primary) !important;
  border-color: var(--br-primary) !important;
  color: #fff !important;
}
.btn-brand:hover,
.btn-brand:active,
.btn-brand.active,
.show > .btn-brand.dropdown-toggle {
  background-color: var(--br-primary-press) !important;
  border-color: var(--br-primary-press) !important;
  color: #fff !important;
}
.kt-font-brand { color: var(--br-primary) !important; }
.kt-bg-light-brand { background-color: var(--br-madder-50) !important; }

/* Outline / label / hover variants */
.btn-outline-brand {
  color: var(--br-primary) !important;
  border-color: var(--br-madder-300) !important;
  background: transparent !important;
}
.btn-outline-brand:hover { background: var(--br-madder-50) !important; }
.btn.btn-label-brand {
  background-color: var(--br-madder-50) !important;
  color: var(--br-madder-600) !important;
}
.btn.btn-label-brand:hover {
  background-color: var(--br-primary) !important;
  color: #fff !important;
}

/* Bootstrap primary follows the brand too */
.btn-primary,
.btn-primary:focus {
  background-color: var(--br-primary) !important;
  border-color: var(--br-primary) !important;
  color: #fff !important;
}
.btn-primary:hover { background-color: var(--br-primary-press) !important; border-color: var(--br-primary-press) !important; }

/* =========================================================================
 * 3) Buttons — softer radius, brand glow on primary actions
 * ========================================================================= */
.btn {
  border-radius: var(--br-r-sm);
  font-weight: 600;
  transition: background-color var(--br-motion), color var(--br-motion), box-shadow var(--br-motion), transform var(--br-motion);
}
.btn:active { transform: translateY(1px); }
.btn-brand, .btn-primary { box-shadow: var(--br-glow); }
.btn-brand:hover, .btn-primary:hover { box-shadow: 0 8px 26px rgba(168,50,74,.34); }
.btn-elevate:hover { box-shadow: var(--br-sh-md); }

/* Saffron utility button (for "featured" / premium actions) */
.btn-saffron { background: var(--br-saffron-500) !important; border-color: var(--br-saffron-500) !important; color:#3a2a05 !important; }
.btn-saffron:hover { background: var(--br-saffron-600) !important; color:#fff !important; }

/* Secondary / indigo */
.btn-dark, .btn-secondary { background-color: var(--br-indigo-700) !important; border-color: var(--br-indigo-700) !important; color:#fff !important; }
.btn-dark:hover, .btn-secondary:hover { background-color: var(--br-indigo-800) !important; }

/* =========================================================================
 * 4) Portlets / cards — warmer surface, rounder, lighter shadow
 * ========================================================================= */
.kt-portlet,
.card {
  border: 1px solid var(--br-border-soft);
  border-radius: var(--br-r-lg);
  box-shadow: var(--br-sh-xs);
  background: var(--br-surface);
}
.kt-portlet .kt-portlet__head {
  border-bottom: 1px solid var(--br-border-soft);
  border-radius: var(--br-r-lg) var(--br-r-lg) 0 0;
  min-height: 58px;
}
.kt-portlet .kt-portlet__head .kt-portlet__head-title {
  font-weight: 700;
  font-size: 1.05rem;
}
/* Accent rail on portlet head */
.kt-portlet .kt-portlet__head .kt-portlet__head-label::before {
  content:""; display:inline-block; width:4px; height:18px;
  border-radius:3px; background: var(--br-primary);
  margin-inline-end:10px; vertical-align:-3px;
}

/* =========================================================================
 * 5) Header — LIGHT warm-ivory bar (elegant, gallery-like)
 *    Background lives on the FULL-WIDTH rows only; inner boxes are transparent
 *    so the bar reads as one continuous surface edge-to-edge (no "box" seam).
 *    A hairline saffron rule + soft warm shadow give it a premium finish.
 * ========================================================================= */
.kt-header,
.kt-header__top,
.kt-header__bottom {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--br-sand-25) 100%) !important;
}
.kt-header {
  box-shadow: var(--br-sh-md);
  border-bottom: 2px solid var(--br-saffron-500);
}
.kt-header__bottom { border-top: 1px solid var(--br-border-soft); }
.kt-header__brand,
.kt-header__topbar,
.kt-header-menu-wrapper:not(.kt-header-menu-wrapper--on),
.kt-header .kt-container {
  background: transparent !important;
}

/* Logo: on the light bar, swap the WHITE wordmark for the brand's own COLORED
 * wordmark (assets/logo.png — already shipped as the "sticky" variant). No logo
 * file is edited; we only choose which existing variant is visible. */
.kt-header__brand .kt-header__brand-logo-default { display: none !important; }
.kt-header__brand .kt-header__brand-logo-sticky {
  display: inline-block !important;
  height: 56px !important;
  width: auto !important;
  padding: 4px !important;
}

/* Brand title text → ink (overrides the inline white) */
.kt-header__brand-nav,
.kt-header__brand-nav span { color: var(--br-ink) !important; }

/* Topbar (username + icons) → dark, readable on the light bar */
.kt-header__topbar .kt-header__topbar-icon i,
.kt-header__topbar-icon i { color: var(--br-sand-600) !important; }
.kt-header__topbar .kt-header__topbar-username,
.kt-header__topbar .kt-header__topbar-welcome,
.kt-header__topbar .kt-header__topbar-user-welcome { color: var(--br-ink) !important; }

/* Desktop horizontal menu on the light bar (≥1025px — the mobile off-canvas
 * panel keeps its own indigo treatment in the media block below). */
@media (min-width: 1025px) {
  .kt-header-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-text {
    color: var(--br-sand-600) !important;
    font-weight: 600;
  }
  .kt-header-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link:hover .kt-menu__link-text { color: var(--br-madder-600) !important; }
  .kt-header-menu .kt-menu__nav > .kt-menu__item:hover > .kt-menu__link {
    background: var(--br-madder-50) !important;
    border-radius: var(--br-r-sm);
    box-shadow: none !important;
  }
  .kt-header-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link {
    background: linear-gradient(90deg, var(--br-madder-600), var(--br-madder-500)) !important;
    border-radius: var(--br-r-sm);
    box-shadow: var(--br-glow) !important;
  }
  .kt-header-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-text { color: #fff !important; }
}

/* The compact mobile top strip stays indigo so its white logo + togglers read. */
.kt-header-mobile {
  background: linear-gradient(90deg, var(--br-indigo-900), var(--br-indigo-700)) !important;
}

/* ---- Mobile / tablet off-canvas menu (Metronic breakpoint = 1024px) -------
 * Below 1024px the header menu collapses into a sliding panel. By default that
 * panel is white, but our light header-menu text was made for the dark bar —
 * which left the links invisible (white on white). Fix: make the off-canvas
 * panel indigo so the light text stays readable and on-brand. */
@media (max-width: 1024px) {
  .kt-header-menu-wrapper,
  .kt-header-menu-wrapper .kt-header-menu,
  .kt-header-menu-wrapper .kt-header-menu .kt-menu__nav {
    background: var(--br-indigo-900) !important;
  }
  /* Every menu link label (top level + submenus) readable */
  .kt-header-menu-wrapper .kt-menu__link-text,
  .kt-header-menu-wrapper .kt-menu__link .kt-menu__link-text {
    color: #e7ecf6 !important;
  }
  .kt-header-menu-wrapper .kt-menu__link:hover .kt-menu__link-text,
  .kt-header-menu-wrapper .kt-menu__item--open > .kt-menu__link .kt-menu__link-text { color:#fff !important; }
  /* Icons & arrows in the panel */
  .kt-header-menu-wrapper .kt-menu__link-icon,
  .kt-header-menu-wrapper .kt-menu__hor-arrow,
  .kt-header-menu-wrapper .kt-menu__ver-arrow { color:#8fa0c4 !important; }
  /* Hover / open / active rows */
  .kt-header-menu-wrapper .kt-menu__item:hover > .kt-menu__link,
  .kt-header-menu-wrapper .kt-menu__item.kt-menu__item--open > .kt-menu__link {
    background: rgba(255,255,255,.07) !important;
  }
  .kt-header-menu-wrapper .kt-menu__item.kt-menu__item--active > .kt-menu__link {
    background: linear-gradient(90deg, var(--br-madder-600), var(--br-madder-500)) !important;
    box-shadow: none !important;
  }
  .kt-header-menu-wrapper .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-text { color:#fff !important; }
  /* Submenu separators softened on indigo */
  .kt-header-menu-wrapper .kt-menu__nav .kt-menu__item { border-color: rgba(255,255,255,.06) !important; }
  /* The panel close (X) button */
  .kt-header-menu-wrapper-close { background: var(--br-indigo-700) !important; border-color: rgba(255,255,255,.18) !important; }
  .kt-header-menu-wrapper-close i { color:#e7ecf6 !important; }
}

/* The mobile header bar itself (logo strip + toggles) — keep it indigo with
 * light, visible toggle icons. */
.kt-header-mobile .kt-header-mobile__toolbar-toggler span,
.kt-header-mobile .kt-header-mobile__toolbar-toggler span::before,
.kt-header-mobile .kt-header-mobile__toolbar-toggler span::after,
.kt-header-mobile .kt-header-mobile__toolbar-topbar-toggler i { background-color:#e7ecf6 !important; color:#e7ecf6 !important; }

/* =========================================================================
 * 6) Aside menu (if the layout uses a side nav) — indigo
 * ========================================================================= */
.kt-aside, .kt-aside-menu { background: var(--br-indigo-900) !important; }
.kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-text { color:#c2cbe0 !important; }
.kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link {
  background: linear-gradient(90deg, var(--br-madder-600), var(--br-madder-500)) !important;
}
.kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-text { color:#fff !important; }

/* =========================================================================
 * 7) Subheader
 * ========================================================================= */
.kt-subheader { background: transparent !important; }
.kt-subheader .kt-subheader__title { color: var(--br-ink) !important; font-weight:700; }
.kt-subheader .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-link { color: var(--br-text-2) !important; }

/* =========================================================================
 * 8) Forms — warm borders, madder focus halo
 * ========================================================================= */
.form-control,
.custom-select,
.input-group-text {
  border-radius: var(--br-r-sm);
  border-color: var(--br-border);
  color: var(--br-text);
  transition: border-color var(--br-motion), box-shadow var(--br-motion);
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--br-madder-400);
  box-shadow: 0 0 0 4px var(--br-madder-50);
}
.form-control.is-invalid,
.form-control.error {
  border-color: var(--br-danger);
  box-shadow: 0 0 0 4px var(--br-danger-bg);
}
label { color: var(--br-text); font-weight: 600; }

/* Checkboxes / radios brand tint */
.kt-checkbox > input:checked ~ span,
.kt-radio > input:checked ~ span { background: var(--br-primary) !important; }
.kt-checkbox > span:after { border-color:#fff !important; }
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--br-primary) !important; border-color: var(--br-primary) !important;
}

/* react-select (used in the gallery filters) */
.react-select__control--is-focused {
  border-color: var(--br-madder-400) !important;
  box-shadow: 0 0 0 4px var(--br-madder-50) !important;
}
.react-select__option--is-selected { background: var(--br-primary) !important; }
.react-select__option--is-focused { background: var(--br-madder-50) !important; color: var(--br-madder-700) !important; }

/* =========================================================================
 * 9) Tables — quiet header, warm hover, tabular numbers
 * ========================================================================= */
.table thead th,
.dataTable thead th {
  background: var(--br-sand-50);
  color: var(--br-text-2);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing:.3px;
  border-bottom: 1px solid var(--br-border) !important;
  border-top: none !important;
}
.table td, .table th { border-color: var(--br-border-soft) !important; vertical-align: middle; }
.table-hover tbody tr:hover,
.dataTable tbody tr:hover { background-color: var(--br-madder-50) !important; }
.table td.kt-num, .ltr-embed, .kt-ltr { font-variant-numeric: tabular-nums; }

/* DataTables length/search/paging controls */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--br-primary) !important; border-color: var(--br-primary) !important; color:#fff !important;
  border-radius: var(--br-r-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--br-madder-50) !important; border-color: var(--br-madder-200) !important; color: var(--br-madder-700) !important;
}

/* Bootstrap pagination */
.page-item.active .page-link { background-color: var(--br-primary); border-color: var(--br-primary); }
.page-link { color: var(--br-madder-600); border-radius: var(--br-r-sm) !important; margin: 0 2px; border-color: var(--br-border); }
.page-link:hover { background: var(--br-madder-50); color: var(--br-madder-700); }

/* =========================================================================
 * 10) Badges, labels & alerts — semantic palette
 * ========================================================================= */
.kt-badge.kt-badge--success, .badge-success { background-color: var(--br-success) !important; color:#fff !important; }
.kt-badge.kt-badge--warning, .badge-warning { background-color: var(--br-saffron-500) !important; color:#3a2a05 !important; }
.kt-badge.kt-badge--danger,  .badge-danger  { background-color: var(--br-danger) !important;  color:#fff !important; }
.kt-badge.kt-badge--info,    .badge-info    { background-color: var(--br-info) !important;    color:#fff !important; }
.kt-badge.kt-badge--brand,   .badge-primary { background-color: var(--br-primary) !important; color:#fff !important; }

.badge { border-radius: var(--br-r-full); padding: .4em .85em; font-weight: 600; }

/* Soft "pill" status chips */
.kt-badge--inline.kt-badge--unified-success { background: var(--br-success-bg) !important; color: var(--br-success) !important; }
.kt-badge--inline.kt-badge--unified-warning { background: var(--br-warning-bg) !important; color: var(--br-saffron-600) !important; }
.kt-badge--inline.kt-badge--unified-danger  { background: var(--br-danger-bg) !important;  color: var(--br-danger) !important; }

.alert { border-radius: var(--br-r-md); border-width: 1px; }
.alert-success { background: var(--br-success-bg); border-color:#bfe0cf; color:#1f6b4e; }
.alert-warning { background: var(--br-warning-bg); border-color:#f0dca8; color:#8a5e12; }
.alert-danger  { background: var(--br-danger-bg);  border-color:#f2c9c3; color:#922b20; }
.alert-info    { background: var(--br-info-bg);    border-color:#c8d5ee; color:#2c477f; }

/* SweetAlert confirm follows brand */
.sweet-alert button.confirm,
.swal2-confirm.swal2-styled { background-color: var(--br-primary) !important; }

/* =========================================================================
 * 11) Modals / dropdowns / tooltips finishing
 * ========================================================================= */
.modal-content, .dropdown-menu { border-radius: var(--br-r-md); border: 1px solid var(--br-border-soft); box-shadow: var(--br-sh-lg); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--br-primary); }
.tooltip-inner { background: var(--br-indigo-800); border-radius: var(--br-r-sm); }

/* Progress bars */
.progress { border-radius: var(--br-r-full); background: var(--br-sand-100); }
.progress-bar { background-color: var(--br-primary); }

/* =========================================================================
 * 12) Gallery (design cards) — let the carpet imagery lead
 * ========================================================================= */
.design-gallery .card,
.design-gallery .kt-portlet { border-radius: var(--br-r-md); overflow: hidden; }
.design-gallery .card:hover { box-shadow: var(--br-sh-md); transform: translateY(-3px); }
.design-gallery .card .card-img-top { background: var(--br-sand-100); }
.design-gallery .filters-section { border-radius: var(--br-r-md); border-color: var(--br-border-soft); }

/* =========================================================================
 * 13) Login (Metronic login-v3) — indigo brand wash + madder action
 * ========================================================================= */
.kt-login.kt-login--v3 .kt-grid__item--fluid { position: relative; }
/* Tint whatever background photo is used so it always reads on-brand */
.kt-login.kt-login--v3 .kt-grid__item--fluid::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(135deg, rgba(20,27,46,.92), rgba(34,48,78,.82) 55%, rgba(168,50,74,.55));
}
.kt-login.kt-login--v3 .kt-login__wrapper,
.kt-login.kt-login--v3 .kt-login__container { position: relative; z-index: 1; }
.kt-login.kt-login--v3 .kt-login__container {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--br-r-lg);
  padding: 34px 30px;
  box-shadow: var(--br-sh-lg);
}
.kt-login.kt-login--v3 .form-control {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: var(--br-r-sm);
}
.kt-login.kt-login--v3 .form-control:focus {
  border-color: var(--br-saffron-300) !important;
  box-shadow: 0 0 0 4px rgba(217,154,43,.18) !important;
}
.kt-login.kt-login--v3 .kt-login__btn-primary {
  width: 100%;
  background: var(--br-primary) !important;
  border-color: var(--br-primary) !important;
  border-radius: var(--br-r-sm);
  padding: .8rem 1rem;
  box-shadow: var(--br-glow);
}
.kt-login.kt-login--v3 .kt-login__btn-primary:hover { background: var(--br-primary-press) !important; }

/* =========================================================================
 * 14) Scrollbar polish (webkit)
 * ========================================================================= */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--br-sand-300); border-radius: var(--br-r-full); border:3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--br-sand-400); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }