/* Premium UI — consumes variables from leo.vars.css */

/* Navbar */
.pro-navbar {
  position: sticky; top: 12px; inset-inline: 0;
  margin: 12px auto; max-width: 1240px; padding: 12px 16px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 22px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 18px; z-index: 50;
}
.pro-navbar .brand { font-weight: 800; letter-spacing: .2px; }
.pro-navbar .links { display: flex; gap: 18px; flex: 1; }
.pro-navbar .links a { color: var(--color-text); opacity: .9; text-decoration: none; }
.pro-navbar .links a:hover { opacity: 1; }
.pro-navbar .tools { display: flex; gap: 8px; align-items: center; }

/* Language dropdown */
.lang{ position: relative; }
.lang-btn, .theme-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--color-border); background: transparent; color: var(--color-text);
  border-radius: 999px; cursor: pointer; box-shadow: var(--shadow-sm);
}
.lang-list {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; min-width: 220px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; box-shadow: var(--shadow); padding: 8px; display: none;
}
.lang.open .lang-list { display: block; }
.lang-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 10px; text-decoration: none; color: var(--color-text);
}
.lang-item:hover { background: rgba(2,6,23,.05); }
html[data-theme="dark"] .lang-item:hover { background: rgba(255,255,255,.06); }
.lang-item[aria-current="true"] { opacity: .6; pointer-events: none; }
.lang-btn .flag, .lang-item .flag {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 999px; border: 1px solid var(--color-border);
  background: var(--color-surface); font-size: 12px; line-height: 1;
}

/* Buttons */
.btn, .pro-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: 999px; cursor: pointer; border: none; text-decoration: none;
}
.pro-btn { background: linear-gradient(90deg,var(--accent),var(--accent-2)); color: var(--accent-contrast); box-shadow: var(--shadow); }
.btn.ghost { background: transparent; border: 1px solid var(--accent); color: var(--accent); }

/* Tables */
.table {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden;
}
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--color-border); }
.table tr:last-child td { border-bottom: 0; }
.table th { text-align: left; font-weight: 700; }

/* Forms */
.input, input[type="text"], input[type="email"], select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
}
.label { display:block; font-weight: 600; margin-bottom: 6px; }

/* Grid helpers */
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){ .grid.cols-3 { grid-template-columns: 1fr; } .grid.cols-2 { grid-template-columns: 1fr; } }

/* RTL tweaks */
[dir="rtl"] .pro-navbar .links { flex-direction: row-reverse; }
[dir="rtl"] .lang-list { inset-inline-start: 0; inset-inline-end: auto; }