/* ===== VendexaHub · Professional UI (Innovative Gradient + Cairo/Manrope) ===== */
/* Design principles applied:
   - 8pt spacing rhythm
   - Clear hierarchy: header > hero > content cards
   - Modern navbar: sticky, translucent, subtle border/shadow, active state
   - RTL-safe spacing (margin-inline/padding-inline)
   - Consistent sizing (box-sizing + min-height 44px targets)
*/

*,
*::before,
*::after { box-sizing: border-box; }

:root{
  /* Fonts */
  --font-ar: "Cairo", system-ui, -apple-system, "Segoe UI", Arial;
  --font-lat:"Manrope", system-ui, -apple-system, "Segoe UI", Arial;

  /* Colors */
  --color-bg:#E6EBF1;
  --color-surface:#FFFFFF;
  --color-text:#0A1220;
  --color-border:#D7DDE6;
  --color-muted:#4B5563;

  /* Brand */
  --color-primary-solid:#0AA9D7;
  --color-primary-gradient: linear-gradient(90deg,#0066FF 0%, #00FF99 100%);
  --primary-overlay: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28));

  /* Accents */
  --focus-ring: 3px solid #59B2FF;

  /* Buttons */
  --btn-primary-bg: var(--color-primary-gradient), var(--primary-overlay);
  --btn-primary-text:#FFFFFF;
  --btn-primary-hover:#0AA9D7;
  --btn-primary-active:#078CB2;

  --btn-secondary-bg:#642FCC;
  --btn-secondary-text:#FFFFFF;
  --btn-secondary-hover:#4B2399;
  --btn-secondary-active:#321766;

  /* Layout */
  --container-max: 1100px;

  /* Spacing (8pt-aligned) */
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;

  /* Radius */
  --radius-2:10px;
  --radius-3:12px;
  --radius-4:16px;

  /* Shadows (subtle, academic/professional) */
  --shadow-sm: 0 6px 14px rgba(0,0,0,.08);
  --shadow-md: 0 10px 24px rgba(0,0,0,.10);

  /* Header */
  --header-bg: rgba(255,255,255,.72);
  --header-border: rgba(215,221,230,.80);

  /* States */
  --color-success:#16A34A;
  --color-error:#DC2626;
}

:root[data-theme="dark"]{
  --color-bg:#0B1020;
  --color-surface:#0F162A;
  --color-text:#EAF0FF;
  --color-border:#22314A;
  --color-muted:#B7C2D6;

  --header-bg: rgba(15,22,42,.72);
  --header-border: rgba(34,49,74,.75);

  --shadow-sm: 0 10px 26px rgba(0,0,0,.35);
  --shadow-md: 0 18px 40px rgba(0,0,0,.45);
}

/* Language-specific font application */
html[lang="ar"] body{ font-family: var(--font-ar), var(--font-lat); }
html[lang="en"] body,
html[lang="tr"] body{ font-family: var(--font-lat), var(--font-ar); }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,170,215,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(0,255,153,.14), transparent 55%),
    var(--color-bg);
  color:var(--color-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
}

.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:16px;
}

/* ===== Modern Header / Navbar ===== */
.vh-header{
  position: sticky;
  top: 0;
  z-index: 50;

  display:flex;
  align-items:center;
  gap: var(--space-4);

  padding-block: 12px;
  margin-bottom: var(--space-4);

  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.vh-logo{
  font-weight: 900;
  letter-spacing: .2px;
  text-decoration:none;
  color:var(--color-text);
  display:inline-flex;
  align-items:center;
  gap: 10px;
}

.vh-logo::before{
  content:"";
  width: 14px;
  height: 14px;
  border-radius: 6px;
  background: var(--color-primary-gradient);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* Nav links (modern pill style) */
.vh-nav{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--header-border);
}

:root[data-theme="dark"] .vh-nav{
  background: rgba(15,22,42,.55);
}

.vh-nav a{
  color:var(--color-text);
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  min-height: 40px;
  display:inline-flex;
  align-items:center;
  transition: background .18s ease, transform .18s ease;
}

.vh-nav a:hover{
  background: rgba(0,0,0,.06);
  transform: translateY(-1px);
}

:root[data-theme="dark"] .vh-nav a:hover{
  background: rgba(255,255,255,.08);
}

/* Active page state */
.vh-nav a[aria-current="page"]{
  background: rgba(10,169,215,.14);
  border: 1px solid rgba(10,169,215,.35);
}

/* Actions (language + logout, etc.) */
.vh-actions{
  margin-inline-start:auto;
  position:relative;
  display:flex;
  gap: 10px;
  align-items:center;
}

/* Chips (more modern + consistent) */
.chip{
  border:1px solid var(--color-border);
  background: rgba(255,255,255,.85);
  color:inherit;

  padding: 10px 12px;
  border-radius: 999px;

  cursor:pointer;
  min-height:44px;

  display:inline-flex;
  align-items:center;
  gap: 8px;

  font-weight: 800;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

:root[data-theme="dark"] .chip{
  background: rgba(15,22,42,.85);
}

.chip:hover{
  transform: translateY(-1px);
  border-color: rgba(10,169,215,.35);
}

.chip:focus-visible{
  outline:var(--focus-ring);
  outline-offset:2px;
}

.chip.danger{
  border-color: rgba(220,38,38,.35);
  color: var(--color-text);
  background: rgba(220,38,38,.08);
}

/* Language menu (polished) */
.lang-menu{
  position:absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;

  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;

  padding: 8px;
  display:none;
  z-index:10;

  box-shadow: var(--shadow-sm);
  min-width: 180px;
}

.lang-menu[aria-hidden="false"]{ display:block; }

.lang-menu button{
  display:flex;
  width:100%;
  text-align:start;

  background: transparent;
  border: none;

  padding: 10px 12px;
  border-radius: 12px;

  cursor:pointer;
  font-weight: 800;
  color: var(--color-text);
}

.lang-menu button:hover{
  background: rgba(10,169,215,.10);
}

/* ===== Main layout ===== */
.vh-main{
  padding-block: var(--space-6);
}

/* Hero: more premium look */
.hero{
  border-radius: var(--radius-4);
  padding: clamp(22px, 4vw, 52px);
  margin-bottom: var(--space-5);

  color:#fff;
  background-blend-mode: overlay;
  background-image: var(--color-primary-gradient), var(--primary-overlay);
  box-shadow: var(--shadow-md);

  position: relative;
  overflow: hidden;
}

.hero::after{
  content:"";
  position:absolute;
  inset:-40% -20%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.20), transparent 60%);
  transform: rotate(18deg);
  pointer-events:none;
}

.hero h1{
  margin: 0 0 var(--space-2);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.2;
  font-weight: 900;
}

.hero p{
  margin: 0;
  max-width: 62ch;
  font-weight: 600;
  opacity: .95;
}

/* Cards */
.card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.card:hover{
  border-color: rgba(10,169,215,.22);
}

/* Auth card width */
.vh-auth{
  max-width: 600px;
  margin-inline: auto;
}

/* Labels + inputs */
.vh-label{
  display:block;
  margin: var(--space-3) 0 var(--space-2);
  font-weight: 800;
}

.vh-input,
textarea.vh-input{
  width:100%;
  max-width:100%;
  display:block;

  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);

  font: inherit;
  background: rgba(255,255,255,.92);
  color: var(--color-text);

  min-height: 44px;
  line-height: 1.4;

  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

:root[data-theme="dark"] .vh-input,
:root[data-theme="dark"] textarea.vh-input{
  background: rgba(15,22,42,.92);
}

.vh-input:hover{
  border-color: rgba(10,169,215,.35);
}

.vh-input:focus{
  outline: var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(89,178,255,.18);
}

textarea.vh-input{
  min-height: 120px;
  resize: vertical;
}

/* Form layout rows/grids */
.vh-row{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: var(--space-4);
}

[dir="rtl"] .vh-row{ flex-direction: row-reverse; }

.vh-grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width:640px){
  .vh-grid-2{ grid-template-columns: 1fr; }
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;

  padding: 12px 18px;
  border-radius: 12px;

  border: 1px solid transparent;
  cursor:pointer;

  font-weight: 900;
  line-height: 1;
  text-decoration:none;

  min-height:44px;

  transition: transform .16s ease, filter .16s ease, background .16s ease;
}

.btn:focus-visible{
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: rgba(10,169,215,.55);
}

.btn-primary:hover{
  background: var(--btn-primary-hover);
}

.btn-primary:active{
  background: var(--btn-primary-active);
}

.btn-secondary{
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}

.btn-secondary:hover{ background: var(--btn-secondary-hover); }
.btn-secondary:active{ background: var(--btn-secondary-active); }

/* Messages + footer */
.vh-msg{
  margin-top: var(--space-3);
  min-height: 1.2em;
  font-weight: 700;
  color: var(--color-muted);
}

.vh-footer{
  padding-block: var(--space-6);
  color: var(--color-muted);
}

/* Checkbox block */
.vh-check{
  display:flex;
  align-items:flex-start;
  gap: 10px;

  margin-top: var(--space-4);
  padding: 12px;

  border: 1px solid var(--color-border);
  border-radius: 12px;

  background: rgba(255,255,255,.75);
}

:root[data-theme="dark"] .vh-check{
  background: rgba(15,22,42,.75);
}

.vh-check input{ margin-top: 4px; width: 18px; height: 18px; }
.vh-link{ color: inherit; font-weight: 900; text-decoration: underline; }

/* ===== Responsive ===== */
/* Keep nav hidden on small screens (existing behavior), but header remains premium */
@media (max-width:640px){
  .vh-nav{ display:none; }
  .vh-header{ gap: 10px; }
}

/* ===== Add-ons: Tables, Skeletons, Toasts, Badges, Loaders ===== */
.vh-table { width:100%; border-collapse:collapse; }
.vh-table th, .vh-table td { padding:12px 10px; border-bottom:1px solid var(--color-border); text-align:start; }
.vh-table th { font-weight:900; color:var(--color-muted); background:var(--color-surface); position:sticky; top:0; z-index:1; }

.skeleton { position:relative; overflow:hidden; background:rgba(220,228,240,.75); border-radius:10px; }
:root[data-theme="dark"] .skeleton{ background: rgba(34,49,74,.50); }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  transform: translateX(-100%); animation: sh 1.2s infinite;
}
@keyframes sh { to { transform: translateX(100%);} }

.badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px; }
.badge--success{ background:rgba(22,163,74,.12); color:#166534; }
.badge--warning{ background:rgba(245,158,11,.16); color:#92400e; }
.badge--info{    background:rgba(37,99,235,.14);  color:#1e3a8a; }
:root[data-theme="dark"] .badge--success{ color:#a7f3d0; }
:root[data-theme="dark"] .badge--warning{ color:#fde68a; }
:root[data-theme="dark"] .badge--info{    color:#bfdbfe; }

.toast-wrap{ position:fixed; inset-inline-end:16px; top:16px; display:flex; flex-direction:column; gap:8px; z-index:9999; }
.toast{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow-sm);
  font-weight: 800;
}
.toast--ok{ border-color: rgba(22,163,74,.30); }
.toast--err{ border-color: rgba(220,38,38,.30); }

.loader{ display:inline-flex; gap:6px; align-items:center; }
.loader i{ width:8px; height:8px; border-radius:50%; background: var(--color-primary-solid); animation:b 1s infinite ease-in-out; }
.loader i:nth-child(2){ animation-delay:.15s }
.loader i:nth-child(3){ animation-delay:.3s }
@keyframes b{ 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }

.pager{ display:flex; gap:8px; align-items:center; }
.pager .chip[aria-current="page"]{ background: rgba(10,169,215,.12); border-color: rgba(10,169,215,.28); }