/* ═══════════════════════════════════════════════════════════════
   LOQMA PANEL UI — v2.0
   مستخرج مباشرة من ملف التصميم (Claude Design)
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar collapse state set before first paint (prevents FOUC) ── */
html.lq-sb-col #lq-sidebar            { width: 64px; }
html.lq-sb-col #lq-hdr-exp            { display: none !important; }
html.lq-sb-col #lq-hdr-col            { display: flex !important; }
html.lq-sb-col #lq-user-info          { display: none !important; }
html.lq-sb-col #lq-nav-wrap .lq-lbl   { display: none !important; }
html.lq-sb-col #lq-nav-wrap a         { justify-content: center !important; padding: 12px 0 !important; }


@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ─── Animations من التصميم ─── */
@keyframes livebeat {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.5; }
}

/* ─── Layout wrapper ─── */
body {
  overflow: hidden !important;
  height: 100vh !important;
  font-family: 'Tajawal', sans-serif !important;
}

#lq-wrapper {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
  background: #F8FAFC;
}

/* ─── Sidebar ─── */
#sidenav-main { display: none !important; }
#navbar-main  { display: none !important; }

/* ─── Nav links داخل السايدبار (تطبّق على menus/owner + menus/admin إلخ) ─── */
#lq-nav-wrap {
  scrollbar-width: none;
}
#lq-nav-wrap::-webkit-scrollbar { display: none; }

#lq-nav-wrap ul,
#lq-nav-wrap .navbar-nav {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#lq-nav-wrap .nav-item { margin-bottom: 2px !important; }

#lq-nav-wrap hr,
#lq-nav-wrap .lq-nav-sep {
  height: 1px !important;
  background: rgba(255,255,255,0.07) !important;
  margin: 7px 4px !important;
  border: none !important;
}

#lq-nav-wrap h6.navbar-heading {
  font-size: 10px !important;
  color: rgba(255,255,255,0.3) !important;
  letter-spacing: 1px !important;
  padding: 6px 14px 2px !important;
  margin-bottom: 0 !important;
  text-transform: uppercase !important;
}

/* ── nav-link ── */
#lq-nav-wrap .nav-link,
#lq-nav-wrap .nav-link:visited {
  display: flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  margin-bottom: 2px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 150ms ease !important;
  background: transparent !important;
  border: none !important;
  border-inline-start: 3px solid transparent !important;
  color: #7A9BB5 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: 'Tajawal', sans-serif !important;
  white-space: nowrap !important;
  gap: 10px !important;
  flex-direction: row !important;
}

#lq-nav-wrap .nav-link:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* active */
#lq-nav-wrap .nav-link.active,
#lq-nav-wrap .nav-link.lq-active {
  background: rgba(196,150,58,0.1) !important;
  border-inline-start: 3px solid #C4963A !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* iconStyle */
#lq-nav-wrap .nav-link i,
#lq-nav-wrap .nav-link .ni {
  font-size: 15px !important;
  width: 18px !important;
  min-width: 18px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  color: #7A9BB5 !important;
  order: 0 !important;
}

/* active icon */
#lq-nav-wrap .nav-link.active i,
#lq-nav-wrap .nav-link.lq-active i { color: #C4963A !important; }

/* nav-link-text span */
#lq-nav-wrap .nav-link .nav-link-text {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  order: 1 !important;
}

/* submenu indent — direction-aware */
#lq-nav-wrap .collapse .nav-link {
  padding: 8px 14px !important;
  padding-inline-start: 28px !important;
  font-size: 13px !important;
}

#lq-nav-wrap a[data-toggle="collapse"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  color: #7A9BB5 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: 'Tajawal', sans-serif !important;
  transition: all 150ms ease !important;
  margin-bottom: 2px !important;
}

#lq-nav-wrap a[data-toggle="collapse"]:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* blob (live orders dot) */
#lq-nav-wrap .blob { display: none !important; }

/* تجاوز ألوان الأيقونات القادمة من الموديولات (text-primary, text-red, etc.) */
#lq-nav-wrap a i[class*="text-"] { color: #7A9BB5 !important; }
#lq-nav-wrap a.lq-active i,
#lq-nav-wrap a.active i { color: #C4963A !important; }

/* live dot */
#lq-nav-wrap .lq-live { color: #4ADE80 !important; font-size: 8px !important; animation: livebeat 1.2s ease-in-out infinite; }

/* ─── Main area ─── */
#lq-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* ─── Content scroll area ─── */
#lq-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #F8FAFC;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.12) transparent;
}
#lq-content::-webkit-scrollbar { width: 6px; }
#lq-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

/* ─── Remove old Argon main-content offsets ─── */
.main-content {
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  height: 100% !important;
}

/* ─── Hide ALL Argon gradient headers ─── */
#lq-content .header.bg-gradient-primary,
#lq-content .header.bg-gradient-info,
#lq-content .header.bg-gradient-default,
#lq-content .header.bg-gradient-dark,
#lq-content .header.bg-gradient-danger,
#lq-content .header.bg-gradient-warning,
#lq-content .header.bg-gradient-success,
#lq-content .header.pb-8,
#lq-content .header.pb-6 {
  display: none !important;
}

/* ─── Remove negative margins left by hidden headers ─── */
#lq-content [class*="mt--"] { margin-top: 0 !important; }

/* ─── Content padding ─── */
#lq-content .container-fluid { padding: 24px !important; }

/* ─── Animation on page load ─── */
@keyframes lq-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#lq-content .container-fluid { animation: lq-page-in 250ms ease both; }

/* ─── Cards ─── */
#lq-content .card {
  border-radius: 12px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04) !important;
}
#lq-content .card-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  border-radius: 12px 12px 0 0 !important;
}

/* ─── Tables ─── */
#lq-content .table thead th {
  background: #F8FAFC;
  border-color: #E2E8F0;
  font-size: 11px;
  font-weight: 600;
  color: #94A3B8;
  letter-spacing: 0.5px;
}

/* ─── Primary buttons → gold ─── */
#lq-content .btn-primary {
  background: linear-gradient(135deg, #9A7020, #C4963A) !important;
  border-color: #C4963A !important;
}
#lq-content .btn-primary:hover {
  background: linear-gradient(135deg, #C4963A, #E8C06A) !important;
}

/* ─── Dropdown menus ─── */
.dropdown-menu {
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

/* ─── Global card bg-secondary override ─── */
#lq-content .card.bg-secondary {
  background: #FFFFFF !important;
}
#lq-content .card-header.bg-white {
  background: #FFFFFF !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

/* ─── Global table improvements for general/index pages ─── */
#lq-content .table tbody tr {
  border-bottom: 1px solid #F1F5F9;
  transition: background 100ms;
}
#lq-content .table tbody tr:hover { background: #FAFBFF; }
#lq-content .table tbody td { padding: 14px 16px; vertical-align: middle; }
#lq-content .card-footer { border-top: 1px solid #F1F5F9 !important; background: #FFFFFF !important; border-radius: 0 0 12px 12px !important; }
#lq-content .card-footer h4 { color: #94A3B8; font-size: 14px; }

/* ─── General/index page header buttons ─── */
#lq-content .card-header .btn-primary {
  background: linear-gradient(135deg,#9A7020,#C4963A) !important;
  border: none !important;
  border-radius: 9px !important;
}
#lq-content .card-header .btn-sm { border-radius: 8px !important; font-size: 12px !important; }

/* ─── Badge colors ─── */
#lq-content .badge-success { background: rgba(22,163,74,0.1) !important; color: #16A34A !important; border-radius: 8px; padding: 4px 10px; }
#lq-content .badge-warning { background: rgba(196,150,58,0.1) !important; color: #C4963A !important; border-radius: 8px; padding: 4px 10px; }
#lq-content .badge-danger  { background: rgba(220,38,38,0.1) !important; color: #DC2626 !important; border-radius: 8px; padding: 4px 10px; }
#lq-content .badge-info    { background: rgba(74,181,212,0.1) !important; color: #0E7490 !important; border-radius: 8px; padding: 4px 10px; }

/* ─── Filter section ─── */
#lq-content .orders-filters .form-control,
#lq-content .form-control {
  border-radius: 9px !important;
  border: 1px solid #E2E8F0 !important;
  background: #F8FAFC !important;
  font-size: 13px;
  font-family: 'Tajawal', sans-serif;
}

/* ─── Item status dot ─── */
.item-status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-left: 5px;
  vertical-align: middle;
  background: currentColor;
}

/* ─── Infoboxes / stat cards ─── */
#lq-content .card-stats {
  border-radius: 16px !important;
}
#lq-content .card-stats .card-body {
  padding: 18px 20px !important;
}

/* ─── Page title from admin_title ─── */
.lq-page-title {
  font-size: 24px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -.3px;
}

/* ─── Price cell (orders table — all pages) ─── */
.lq-price-cell { text-align: right !important; white-space: nowrap !important; }
.lq-price-val {
    color: #C4963A !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-variant-numeric: tabular-nums !important;
}
.lq-price-sym svg {
    fill: #94A3B8 !important;
    height: 12px !important;
    width: auto !important;
    display: inline !important;
    vertical-align: middle !important;
}

/* ─── Count badge (orders table — all pages) ─── */
.lq-count-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748B !important;
    font-family: 'Inter', sans-serif !important;
}

/* ─── Pagination — hide disabled prev/next arrows ─── */
#lq-content .pagination .page-item.disabled { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   DARK MODE — global shell  (follows <html data-theme="dark">)
   Toggled by the navbar moon button (lqToggleDark). Sidebar is already navy.
   Redesigned sections (#plan-page …) carry their own scoped dark overrides.
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] body { background: #0A1525; }
[data-theme="dark"] #lq-content { background: #0A1525; color: #C7D6E5; }

/* top navbar */
[data-theme="dark"] #lq-navbar { background: #122038 !important; border-bottom-color: #1E3450 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; }
[data-theme="dark"] #lq-navbar #lq-page-title,
[data-theme="dark"] #lq-navbar [style*="#0F172A"] { color: #F0F4F8 !important; }
[data-theme="dark"] #lq-navbar [style*="#F8FAFC"] { background: #1B3D5E !important; border-color: #1E3450 !important; }

/* cards */
[data-theme="dark"] #lq-content .card,
[data-theme="dark"] #lq-content .card.bg-secondary { background: #122038 !important; border-color: #1E3450 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; color: #C7D6E5; }
[data-theme="dark"] #lq-content .card-header,
[data-theme="dark"] #lq-content .card-header.bg-white { background: #122038 !important; border-bottom-color: #1E3450 !important; }
[data-theme="dark"] #lq-content .card-footer { background: #122038 !important; border-top-color: #1E3450 !important; }
[data-theme="dark"] #lq-content .card-header h1,
[data-theme="dark"] #lq-content .card-header h2,
[data-theme="dark"] #lq-content .card-header h3,
[data-theme="dark"] #lq-content .card-header h4,
[data-theme="dark"] #lq-content .card-header h5,
[data-theme="dark"] #lq-content .card-header .mb-0,
[data-theme="dark"] #lq-content .h3 { color: #F0F4F8 !important; }

/* tables */
[data-theme="dark"] #lq-content .table { color: #C7D6E5; }
[data-theme="dark"] #lq-content .table thead th { background: #0E1B30; border-color: #1E3450; color: #7A9BB5; }
[data-theme="dark"] #lq-content .table td,
[data-theme="dark"] #lq-content .table th { border-color: #1E3450 !important; }
[data-theme="dark"] #lq-content .table tbody tr { border-bottom-color: #1E3450; }
[data-theme="dark"] #lq-content .table tbody tr:hover { background: #16263F; }

/* forms */
[data-theme="dark"] #lq-content .form-control { background: #0A1525 !important; border-color: #1E3450 !important; color: #F0F4F8 !important; }
[data-theme="dark"] #lq-content .form-control::placeholder { color: #5C7A99 !important; }

/* dropdown menus (notifications / user) */
[data-theme="dark"] .dropdown-menu { background: #122038 !important; border-color: #1E3450 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; }
[data-theme="dark"] .dropdown-menu [style*="#0F172A"] { color: #F0F4F8 !important; }
[data-theme="dark"] .dropdown-menu [style*="#F1F5F9"] { border-color: #1E3450 !important; }
[data-theme="dark"] .dropdown-item { color: #C7D6E5 !important; }
[data-theme="dark"] .dropdown-item:hover { background: #1B3D5E !important; }
[data-theme="dark"] .dropdown-divider { border-color: #1E3450 !important; }

/* misc surfaces */
[data-theme="dark"] #lq-content hr { border-color: #1E3450 !important; }
[data-theme="dark"] #lq-content .text-muted { color: #7A9BB5 !important; }

/* page footer — dark mode: match dark surface, or hide when empty */
[data-theme="dark"] footer.footer { background: #0A1525 !important; border-top: 1px solid #1E3450 !important; }
[data-theme="dark"] footer.footer * { color: #7A9BB5 !important; }

/* ── Bootstrap modals — global dark mode ── */
[data-theme="dark"] .modal-content { background: #122038 !important; border-color: #1E3450 !important; }
[data-theme="dark"] .modal-header { border-bottom-color: #1E3450 !important; }
[data-theme="dark"] .modal-footer { border-top-color: #1E3450 !important; }
[data-theme="dark"] .modal-title { color: #F0F4F8 !important; }
[data-theme="dark"] .modal .close { color: #7A9BB5 !important; opacity: 1 !important; }
[data-theme="dark"] .modal .close span { color: #7A9BB5 !important; }
[data-theme="dark"] .modal .card.bg-secondary,
[data-theme="dark"] .modal .card.shadow,
[data-theme="dark"] .modal .shadow.card { background: #0A1525 !important; border-color: #1E3450 !important; }
[data-theme="dark"] .modal .form-control { background: #0A1525 !important; border-color: #1E3450 !important; color: #F0F4F8 !important; }
[data-theme="dark"] .modal .form-control::placeholder { color: #5C7A99 !important; }
[data-theme="dark"] .modal .form-control-label { color: #9FB6CC !important; }
[data-theme="dark"] .modal label { color: #9FB6CC !important; }
[data-theme="dark"] .modal .card-body { background: #0A1525 !important; }
[data-theme="dark"] .modal select.form-control option { background: #0A1525; color: #F0F4F8; }

/* ── variants/content inline-style dark overrides ── */
[data-theme="dark"] #lq-content [style*="background:#FFFFFF"],
[data-theme="dark"] #lq-content [style*="background:#F8FAFC"] { background: #122038 !important; border-color: #1E3450 !important; }
[data-theme="dark"] #lq-content [style*="color:#1B3D5E"] { color: #4AB5D4 !important; }
[data-theme="dark"] #lq-content [style*="color:#0F172A"] { color: #F0F4F8 !important; }
[data-theme="dark"] #lq-content [style*="color:#94A3B8"] { color: #7A9BB5 !important; }
[data-theme="dark"] #lq-content [style*="background:#FAFAFA"] { background: #0A1525 !important; border-color: #1E3450 !important; }
/* general.index table (variants + options embed) */
[data-theme="dark"] body.lq-embed .card-header { background: #122038 !important; border-color: #1E3450 !important; }
[data-theme="dark"] body.lq-embed .card-header h3 { color: #F0F4F8 !important; }
[data-theme="dark"] body.lq-embed .table thead th { background: #0E1B30 !important; color: #7A9BB5 !important; }
[data-theme="dark"] body.lq-embed .table tbody td { background: #122038 !important; color: #C7D6E5 !important; }
[data-theme="dark"] body.lq-embed .form-control { background: #0A1525 !important; border-color: #1E3450 !important; color: #F0F4F8 !important; }
[data-theme="dark"] body.lq-embed .card.shadow { background: #122038 !important; border-color: #1E3450 !important; }

/* ── intl-tel-input (iti) dark mode — global ── */
[data-theme="dark"] .iti__selected-flag{background:#0E1B30!important}
[data-theme="dark"] .iti__selected-flag:hover,[data-theme="dark"] .iti__selected-flag:focus{background:#1E3450!important}
[data-theme="dark"] .iti__selected-dial-code{color:#C7D6E5!important}
[data-theme="dark"] .iti__arrow{border-top-color:#7A9BB5!important}
[data-theme="dark"] .iti__country-list{background:#122038!important;border-color:#1E3450!important;box-shadow:0 4px 20px rgba(0,0,0,.45)!important}
[data-theme="dark"] .iti__search-input{background:#0A1525!important;border-color:#1E3450!important;color:#F0F4F8!important}
[data-theme="dark"] .iti__search-input::placeholder{color:#5C7A99!important}
[data-theme="dark"] .iti__country:hover,[data-theme="dark"] .iti__country.iti__active{background:#1E3450!important}
[data-theme="dark"] .iti__country-name{color:#C7D6E5!important}
[data-theme="dark"] .iti__dial-code{color:#7A9BB5!important}
[data-theme="dark"] .iti__divider{border-bottom-color:#1E3450!important}
[data-theme="dark"] input[style*="background: rgb(241, 245, 249)"]{background:#0A1525!important;color:#F0F4F8!important}
[data-theme="dark"] input[style*="background: rgb(255, 255, 255)"]{background:#0A1525!important;color:#F0F4F8!important}

/* ═══════════════ Mobile layer: sidebar drawer + tables (2026-07-04) ═══════════════ */
@media (max-width: 767px) {
  /* السايدبار: درج منزلق فوق المحتوى بدل عمود ثابت يأكل العرض */
  #lq-sidebar {
    position: fixed !important;
    top: 0; bottom: 0; right: 0; left: auto;
    width: 256px !important;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(.4,0,.2,1) !important;
    box-shadow: none;
  }
  [dir="ltr"] #lq-sidebar { left: 0; right: auto; transform: translateX(-100%); }
  html.lq-sb-open #lq-sidebar { transform: translateX(0) !important; }

  /* داخل الدرج تُعرض القائمة كاملة حتى لو كانت حالة الطي محفوظة من الديسكتوب */
  html.lq-sb-col #lq-sidebar          { width: 256px !important; }
  html.lq-sb-col #lq-hdr-exp          { display: flex !important; }
  html.lq-sb-col #lq-hdr-col          { display: none !important; }
  html.lq-sb-col #lq-user-info        { display: block !important; }
  html.lq-sb-col #lq-nav-wrap .lq-lbl { display: inline !important; }
  html.lq-sb-col #lq-nav-wrap a       { justify-content: flex-start !important; padding: 10px 14px !important; }

  /* خلفية معتمة تغلق الدرج */
  #lq-sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(10,21,37,.55); z-index: 1049; }
  html.lq-sb-open #lq-sb-backdrop { display: block; }

  /* المحتوى: كامل العرض وحشوات أصغر */
  #lq-content .container-fluid { padding: 12px !important; }

  /* الجداول: تمرير أفقي بدل قصّ الأعمدة */
  #lq-content table.table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* الظل فقط عندما يكون الدرج مفتوحاً — الظل الدائم كان ينزّ لحافة الشاشة وهو مغلق */
@media (max-width: 767px) {
  html.lq-sb-open #lq-sidebar { box-shadow: -10px 0 30px rgba(0,0,0,.3); }
  [dir="ltr"] html.lq-sb-open #lq-sidebar, html[dir="ltr"].lq-sb-open #lq-sidebar { box-shadow: 10px 0 30px rgba(0,0,0,.3); }
  /* بطاقات أهدأ على الجوال */
  #lq-content .card { box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; }
}