/*!
 * Qandeel Global Theme (Metronic/Bootstrap Overrides)
 * File: public/assets/css/style.theme.css
 * Purpose: Site-wide brand theming using CSS variables + component overrides
 * Works with: Metronic style.bundle.css + plugins.bundle.css (LTR/RTL)
 * Version: 1.0.0
 */

/* =========================================================
   1) Brand Tokens
========================================================= */
:root{
  --q-primary: #213400; /* Primary Dark */
  --q-accent:  #008c1b; /* Accent / Success */
  --q-deep:    #1d1a03; /* Deep contrast */

  --q-bg:      #f6faf6;
  --q-surface: #ffffff;
  --q-surface-2: rgba(255,255,255,.92);

  --q-text:    #0f1a05;
  --q-muted:   rgba(15,26,5,.70);

  --q-border:  rgba(33,52,0,.14);
  --q-ring:    0 0 0 4px rgba(0,140,27,.18);

  --q-radius-xl: 22px;
  --q-radius-lg: 16px;
  --q-radius-md: 12px;
  --q-radius-sm: 10px;

  --q-shadow: 0 18px 45px rgba(29,26,3,.12);
  --q-shadow-soft: 0 10px 28px rgba(29,26,3,.10);

  --q-grad: linear-gradient(135deg, var(--q-accent) 0%, #0aa327 45%, var(--q-primary) 100%);
  --q-grad-dark: linear-gradient(135deg, var(--q-primary) 0%, var(--q-deep) 100%);
}

/* Global smoothing */
html, body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optional: global background (خفيف جداً، ما يكسّر صفحاتك) */
body{
  color: var(--q-text);
  background:
    radial-gradient(1200px 600px at 8% 10%, rgba(0,140,27,.08) 0%, transparent 55%),
    radial-gradient(900px 520px at 85% 15%, rgba(33,52,0,.10) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--q-bg) 100%);
}

/* =========================================================
   2) Bootstrap 5.3 CSS Variables
========================================================= */
:root{
  --bs-primary: var(--q-primary);
  --bs-success: var(--q-accent);
  --bs-dark:    var(--q-deep);

  --bs-link-color: var(--q-accent);
  --bs-link-hover-color: #0aa327;

  --bs-border-color: var(--q-border);
  --bs-body-color: var(--q-text);
  --bs-body-bg: var(--q-bg);

  --bs-focus-ring-color: rgba(0,140,27,.25);
}

/* Dark mode support (لو عندك data-bs-theme="dark") */
[data-bs-theme="dark"]{
  --bs-body-bg: #0b1204;
  --bs-body-color: rgba(255,255,255,.88);
  --bs-border-color: rgba(255,255,255,.12);
  --bs-link-color: #34d058;
  --bs-link-hover-color: #58f07d;
}

/* Links */
a, .link-primary{
  color: var(--q-accent) !important;
  text-decoration: none;
}
a:hover, .link-primary:hover{
  color: #0aa327 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Text helpers */
.text-primary{ color: var(--q-primary) !important; }
.text-success{ color: var(--q-accent) !important; }
.text-dark{ color: var(--q-deep) !important; }
.text-muted{ color: rgba(15,26,5,.60) !important; }

/* Borders */
.border, .border-top, .border-bottom, .border-start, .border-end{
  border-color: var(--q-border) !important;
}

/* =========================================================
   3) Metronic / KT Variables (covers most KT components)
   - Many Metronic elements rely on CSS vars like --kt-*
========================================================= */
:root{
  /* Primary set */
  --kt-primary: var(--q-primary);
  --kt-primary-active: #192a00;
  --kt-primary-light: rgba(33,52,0,.12);
  --kt-primary-inverse: #ffffff;

  /* Success set (use your accent) */
  --kt-success: var(--q-accent);
  --kt-success-active: #0aa327;
  --kt-success-light: rgba(0,140,27,.12);
  --kt-success-inverse: #ffffff;

  /* Dark set */
  --kt-dark: var(--q-deep);
  --kt-dark-active: #141202;
  --kt-dark-light: rgba(29,26,3,.10);
  --kt-dark-inverse: #ffffff;

  /* Base */
  --kt-border-color: var(--q-border);
  --kt-text-muted: rgba(15,26,5,.62);
  --kt-body-bg: var(--q-bg);
  --kt-body-color: var(--q-text);

  /* Radius / shadow feel (not all KT uses it but helpful) */
  --kt-border-radius: 14px;
}

/* =========================================================
   4) Buttons (Bootstrap + Metronic)
========================================================= */
.btn{
  border-radius: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:focus, .btn:focus-visible{
  box-shadow: var(--q-ring) !important;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0) scale(.99); }

.btn-primary{
  border: 0 !important;
  background: var(--q-grad) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(0,140,27,.22);
}
.btn-primary:hover{
  box-shadow: 0 18px 45px rgba(0,140,27,.26);
  filter: brightness(1.02);
}

.btn-success{
  border: 0 !important;
  background: linear-gradient(135deg, var(--q-accent), #0aa327) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(0,140,27,.18);
}

.btn-outline-primary{
  border-color: rgba(33,52,0,.35) !important;
  color: var(--q-primary) !important;
}
.btn-outline-primary:hover{
  background: rgba(33,52,0,.08) !important;
  border-color: rgba(33,52,0,.45) !important;
  color: var(--q-primary) !important;
}

.btn-outline-success{
  border-color: rgba(0,140,27,.45) !important;
  color: var(--q-accent) !important;
}
.btn-outline-success:hover{
  background: rgba(0,140,27,.10) !important;
  color: var(--q-primary) !important;
}

.btn-light{
  background: rgba(255,255,255,.85) !important;
  border: 1px solid var(--q-border) !important;
  color: var(--q-deep) !important;
}

/* =========================================================
   5) Forms
========================================================= */
.form-control, .form-select, textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"]{
  border-radius: 14px !important;
}

.form-control, .form-select{
  border-color: rgba(33,52,0,.18) !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--q-text) !important;
  transition: box-shadow .2s ease, border-color .2s ease, transform .08s ease;
}

.form-control:focus, .form-select:focus{
  border-color: rgba(0,140,27,.55) !important;
  box-shadow: var(--q-ring) !important;
  transform: translateY(-1px);
}

.form-control::placeholder{
  color: rgba(15,26,5,.45) !important;
  font-weight: 600;
}

.is-invalid, .form-control.is-invalid, .form-select.is-invalid{
  border-color: rgba(29,26,3,.35) !important;
  box-shadow: 0 0 0 4px rgba(29,26,3,.10) !important;
}

.form-check-input{
  width: 18px;
  height: 18px;
  border-radius: 6px !important;
  border-color: rgba(33,52,0,.25) !important;
}
.form-check-input:checked{
  background-color: var(--q-accent) !important;
  border-color: var(--q-accent) !important;
}
.form-check-input:focus{
  box-shadow: var(--q-ring) !important;
}

/* =========================================================
   6) Cards / Modals / Dropdown
========================================================= */
.card, .modal-content, .dropdown-menu{
  border-radius: var(--q-radius-lg) !important;
  border-color: var(--q-border) !important;
  box-shadow: var(--q-shadow-soft);
}

.card{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
}

.modal-content{
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(12px);
}

/* Dropdown polish */
.dropdown-menu{
  border: 1px solid rgba(33,52,0,.12) !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 45px rgba(29,26,3,.16) !important;
  overflow: hidden;
}
.dropdown-item{
  font-weight: 800;
  border-radius: 12px;
  margin: 4px 8px;
  width: auto;
}
.dropdown-item:hover, .dropdown-item:focus{
  background: rgba(0,140,27,.10) !important;
  color: var(--q-primary) !important;
}

/* Metronic menu */
.menu .menu-link{
  border-radius: 12px !important;
  transition: background .15s ease, transform .12s ease;
}
.menu .menu-link:hover{
  background: rgba(0,140,27,.10) !important;
  transform: translateX(2px);
}
.menu .menu-link.active{
  background: rgba(0,140,27,.14) !important;
  color: var(--q-primary) !important;
  font-weight: 900 !important;
}

/* =========================================================
   7) Alerts / Badges
========================================================= */
.alert{
  border-radius: 14px !important;
  border: 1px solid rgba(33,52,0,.12) !important;
  box-shadow: var(--q-shadow-soft);
}
.alert-success{
  background: rgba(0,140,27,.10) !important;
  color: var(--q-primary) !important;
}
.alert-danger{
  background: rgba(29,26,3,.06) !important;
  color: var(--q-deep) !important;
  border-color: rgba(29,26,3,.12) !important;
}

.badge{
  border-radius: 999px !important;
  font-weight: 800 !important;
}
.badge-light-success{
  background: rgba(0,140,27,.12) !important;
  color: var(--q-primary) !important;
}
.badge-light-primary{
  background: rgba(33,52,0,.10) !important;
  color: var(--q-primary) !important;
}

/* =========================================================
   8) Tables / Pagination
========================================================= */
.table{
  color: var(--q-text) !important;
}
.table thead th{
  color: rgba(29,26,3,.82) !important;
  border-color: var(--q-border) !important;
  font-weight: 900;
}
.table td, .table th{
  border-color: var(--q-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > *{
  background-color: rgba(0,140,27,.04) !important;
}

.pagination .page-link{
  border-radius: 12px !important;
  border-color: rgba(33,52,0,.16) !important;
  color: var(--q-primary) !important;
  font-weight: 900;
}
.pagination .page-link:hover{
  background: rgba(0,140,27,.10) !important;
  color: var(--q-primary) !important;
}
.pagination .page-item.active .page-link{
  background: var(--q-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(0,140,27,.22);
}

/* =========================================================
   9) Tabs / Progress / Spinner
========================================================= */
.nav-tabs .nav-link{
  font-weight: 900;
  color: rgba(29,26,3,.70) !important;
}
.nav-tabs .nav-link.active{
  color: var(--q-primary) !important;
}
.nav-pills .nav-link{
  border-radius: 14px !important;
  font-weight: 900;
}
.nav-pills .nav-link.active{
  background: rgba(0,140,27,.12) !important;
  color: var(--q-primary) !important;
}

.progress{
  border-radius: 999px !important;
  background: rgba(33,52,0,.10) !important;
}
.progress-bar{
  background: var(--q-grad) !important;
}
.spinner-border{
  border-right-color: transparent !important;
}

/* =========================================================
   10) AUTH specific tiny fixes (safe)
========================================================= */
#kt_auth_lang_menu{
  max-height: 240px;
  overflow: auto;
  scrollbar-width: thin;
}

/* =========================================================
   11) Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}