:root {
  --bg:#06111f;
  --panel:#0c1b2c;
  --panel2:#10243a;
  --panel3:#132d47;
  --border:#1d3853;
  --border2:#274963;

  --text:#edf6ff;
  --muted:#8fa9c1;

  --blue:#42a8ff;
  --green:#45d692;
  --red:#ff6472;
  --orange:#ffa148;
  --purple:#a77bff;

  --shadow:
    0 20px 60px rgba(0,0,0,.18);
}

* {
  box-sizing:border-box;
}

html {
  background:var(--bg);
}

body {
  margin:0;

  min-height:100vh;

  color:var(--text);

  background:
    radial-gradient(
      circle at top,
      #10263d 0,
      #071421 28%,
      #06111f 65%
    );

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

button,
input,
select {
  font:inherit;
}

button {
  cursor:pointer;
}

.hidden {
  display:none !important;
}


/* LOGIN */

.login-shell {
  min-height:100vh;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:24px;
}

.login-card {
  width:min(430px,100%);

  padding:40px;

  border:
    1px solid var(--border);

  border-radius:24px;

  background:
    rgba(12,27,44,.92);

  box-shadow:var(--shadow);
}

.login-icon {
  font-size:46px;
}

.login-card h1 {
  margin:
    20px 0 4px;

  font-size:34px;
}

.login-card p {
  margin:
    0 0 30px;

  color:var(--muted);
}

.login-card input {
  margin-bottom:14px;
}

.login-error {
  margin-top:16px;
  color:var(--red);
}


/* INPUTS */

input,
select {
  width:100%;

  padding:
    11px 13px;

  border:
    1px solid var(--border2);

  border-radius:10px;

  color:var(--text);

  background:#081725;

  outline:none;
}

input:focus,
select:focus {
  border-color:var(--blue);
}

label {
  display:block;

  margin-bottom:5px;

  color:var(--muted);

  font-size:12px;
}


/* BUTTONS */

button {
  padding:
    10px 15px;

  border:
    1px solid transparent;

  border-radius:10px;

  color:white;

  background:#17324b;
}

button:hover {
  filter:brightness(1.08);
}

.primary {
  background:
    linear-gradient(
      135deg,
      #1683e5,
      #257bd1
    );
}

.secondary {
  background:#13273b;
  border-color:var(--border);
}

.big {
  width:100%;
  padding:14px;
}

.small {
  padding:
    7px 11px;
}

.full {
  width:100%;
  margin-top:14px;
}


/* TOP BAR */

.topbar {
  position:sticky;

  top:0;

  z-index:50;

  display:flex;

  align-items:center;
  justify-content:space-between;

  height:72px;

  padding:
    0 20px;

  border-bottom:
    1px solid var(--border);

  background:
    rgba(5,15,26,.91);

  backdrop-filter:
    blur(15px);
}

.brand-wrap {
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-icon {
  font-size:30px;
}

.brand-title {
  font-weight:750;
  font-size:19px;
}

.brand-sub {
  margin-top:2px;
  color:var(--muted);
  font-size:12px;
}

.top-user {
  display:flex;
  align-items:center;
  gap:12px;
}


/* DESKTOP NAV */

.desktop-nav {
  position:sticky;

  top:72px;

  z-index:40;

  display:flex;

  gap:4px;

  overflow-x:auto;

  padding:
    8px 20px;

  border-bottom:
    1px solid var(--border);

  background:
    rgba(5,15,26,.91);

  backdrop-filter:
    blur(15px);
}

.nav {
  white-space:nowrap;

  color:#bad0e4;

  background:transparent;
}

.nav.active {
  color:#62baff;
  background:#102d47;
}


/* MAIN */

main {
  width:min(1600px,100%);

  margin:auto;

  padding:
    18px 18px 100px;
}

.card {
  padding:16px;

  border:
    1px solid var(--border);

  border-radius:15px;

  background:
    linear-gradient(
      150deg,
      rgba(15,32,51,.97),
      rgba(9,23,38,.97)
    );

  box-shadow:
    0 10px 30px rgba(0,0,0,.10);
}

.card-title {
  font-size:16px;
  font-weight:700;
}

.card-subtitle {
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
}

.card-head {
  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:12px;

  margin-bottom:15px;
}


/* FILTERS */

.filters {
  display:grid;

  grid-template-columns:
    1fr 1fr 1fr auto;

  align-items:end;

  gap:10px;

  margin-bottom:14px;
}


/* PAGES */

.page {
  display:none;
}

.page.active {
  display:block;
}


/* KPI */

.kpis {
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;

  margin-bottom:14px;
}

.kpi {
  min-height:120px;

  padding:17px;

  border:
    1px solid var(--border);

  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #112943,
      #0b1b2c
    );
}

.kpi:nth-child(2) {
  background:
    linear-gradient(
      135deg,
      #24214d,
      #111b36
    );
}

.kpi:nth-child(3) {
  background:
    linear-gradient(
      135deg,
      #113b33,
      #0b2526
    );
}

.kpi:nth-child(4) {
  background:
    linear-gradient(
      135deg,
      #3d2a17,
      #251e18
    );
}

.kpi-label {
  color:#9fb5cb;
  font-size:12px;
}

.kpi-value {
  margin-top:9px;

  font-size:29px;
  font-weight:750;
}

.kpi-sub {
  margin-top:7px;

  color:var(--muted);

  font-size:12px;
}


/* GRID */

.dashboard-grid {
  display:grid;

  grid-template-columns:
    2fr 1fr;

  gap:14px;
}

.span-2 {
  min-width:0;
}

.chart {
  width:100%;
  min-height:270px;
}


/* QUALITY */

.quality-banner {
  margin-bottom:14px;

  padding:11px 14px;

  border:
    1px solid #6e5421;

  border-radius:10px;

  color:#ffd67c;

  background:#372a10;
}

.quality-list {
  line-height:2;
  font-size:13px;
}

.quality-ok {
  color:var(--green);
}

.quality-warning {
  color:var(--orange);
}


/* TABLE */

.table-wrap {
  overflow:auto;
  margin-top:10px;
}

table {
  width:100%;

  min-width:900px;

  border-collapse:collapse;
}

th,
td {
  padding:
    10px 9px;

  border-bottom:
    1px solid #18324a;

  text-align:left;

  font-size:12px;
}

th {
  position:sticky;
  top:0;

  color:#92abc1;

  background:#0d1d2e;
}

.good {
  color:var(--green);
}

.bad {
  color:var(--red);
}

.warn {
  color:var(--orange);
}


/* TYPE BAR */

.type-row {
  display:grid;

  grid-template-columns:
    95px 1fr 60px;

  gap:10px;

  align-items:center;

  margin:
    13px 0;
}

.type-name {
  text-transform:capitalize;
}

.mini {
  color:var(--muted);
  font-size:11px;
}

.progress {
  height:8px;

  overflow:hidden;

  border-radius:20px;

  background:#183148;
}

.progress > div {
  height:100%;

  border-radius:20px;

  background:
    linear-gradient(
      90deg,
      #32c984,
      #56e6a5
    );
}


/* WORKOUT CARDS */

.workout-cards,
.type-cards,
.daily-cards {
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:12px;
}

.workout-card,
.type-card,
.daily-card {
  padding:14px;

  border:
    1px solid #1c3a55;

  border-radius:13px;

  background:#091827;
}

.workout-card h3,
.type-card h3,
.daily-card h3 {
  margin:
    0 0 4px;

  font-size:15px;
}

.workout-meta {
  margin-bottom:11px;

  color:var(--muted);
  font-size:11px;
}

.metric {
  display:flex;

  justify-content:space-between;

  gap:15px;

  padding:
    6px 0;

  border-bottom:
    1px solid #142c41;

  font-size:12px;
}

.metric:last-child {
  border-bottom:0;
}

.metric span {
  color:#96adc1;
}

.metric b {
  text-align:right;
}


/* IMPACT */

.impact-workout {
  margin-bottom:14px;

  padding:14px;

  border:
    1px solid var(--border);

  border-radius:13px;

  background:#081725;
}

.impact-grid {
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:8px;

  margin-top:10px;
}

.impact-box {
  padding:10px;

  border-radius:10px;

  background:#102339;

  font-size:11px;
}

.impact-window {
  margin-bottom:7px;
  font-weight:700;
}


/* COMPARE */

.compare-grid {
  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:10px;

  align-items:end;

  margin-top:15px;
}

.compare-summary {
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:10px;

  margin-top:18px;
}


/* REPORT */

.report-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:15px;
}

.report-title {
  margin:
    18px 0 10px;

  font-size:18px;
}


/* AI */

.ai-output {
  margin-top:18px;

  padding:18px;

  white-space:pre-wrap;

  line-height:1.55;

  border:
    1px solid var(--border);

  border-radius:12px;

  color:#dcecff;

  background:#081725;

  font-size:13px;
}


/* ADMIN */

.admin-grid {
  display:grid;

  grid-template-columns:
    1fr 2fr;

  gap:14px;
}

.admin-grid input,
.admin-grid select {
  margin-bottom:12px;
}

.user-row {
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  padding:
    11px 0;

  border-bottom:
    1px solid var(--border);
}

.user-role {
  margin-top:3px;

  color:var(--muted);

  font-size:11px;
}


/* MOBILE NAV */

.mobile-nav {
  display:none;
}


/* TABLET */

@media(max-width:1050px) {

  .kpis {
    grid-template-columns:
      1fr 1fr;
  }

  .workout-cards,
  .type-cards,
  .daily-cards {
    grid-template-columns:
      1fr 1fr;
  }

  .impact-grid {
    grid-template-columns:
      1fr 1fr;
  }

}


/* MOBILE */

@media(max-width:760px) {

  body {
    padding-bottom:
      env(safe-area-inset-bottom);
  }

  .topbar {
    height:62px;

    padding:
      0 13px;
  }

  .brand-icon {
    font-size:23px;
  }

  .brand-title {
    max-width:220px;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    font-size:14px;
  }

  .brand-sub {
    font-size:10px;
  }

  #currentUser {
    display:none;
  }

  .desktop-nav {
    display:none;
  }

  main {
    padding:
      11px 11px 92px;
  }

  .filters {
    grid-template-columns:
      1fr 1fr;

    padding:12px;
  }

  .filters > div:nth-child(3) {
    grid-column:
      1 / -1;
  }

  .filters button {
    grid-column:
      1 / -1;
  }

  .kpis {
    grid-template-columns:
      1fr 1fr;

    gap:8px;
  }

  .kpi {
    min-height:100px;

    padding:12px;
  }

  .kpi-label {
    font-size:10px;
  }

  .kpi-value {
    font-size:21px;
  }

  .kpi-sub {
    font-size:10px;
  }

  .dashboard-grid {
    grid-template-columns:
      1fr;
  }

  .workout-cards,
  .type-cards,
  .daily-cards {
    grid-template-columns:
      1fr;
  }

  .impact-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .compare-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .compare-grid button {
    grid-column:
      1 / -1;
  }

  .compare-summary {
    grid-template-columns:
      1fr 1fr;
  }

  .admin-grid {
    grid-template-columns:
      1fr;
  }

  .card {
    padding:12px;
  }

  .login-card {
    padding:25px;
  }

  .login-card h1 {
    font-size:27px;
  }

  .mobile-nav {
    position:fixed;

    left:0;
    right:0;
    bottom:0;

    z-index:100;

    display:grid;

    grid-template-columns:
      repeat(5,1fr);

    padding:
      5px 5px
      max(
        5px,
        env(safe-area-inset-bottom)
      );

    border-top:
      1px solid var(--border);

    background:
      rgba(5,15,26,.97);

    backdrop-filter:
      blur(14px);
  }

  .mobile-nav-btn {
    display:flex;

    flex-direction:column;

    align-items:center;

    gap:2px;

    padding:
      7px 2px;

    color:#829ab0;

    background:transparent;

    font-size:10px;
  }

  .mobile-nav-btn span {
    font-size:17px;
  }

  .mobile-nav-btn.active {
    color:#54b3ff;
  }

}


/* SMALL PHONE */

@media(max-width:390px) {

  .kpis {
    grid-template-columns:
      1fr 1fr;
  }

  .impact-grid {
    grid-template-columns:
      1fr;
  }

}

.permissions-box {
  margin-top:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#081725;
}

.permissions-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}

.permission-item {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
}

.permission-item input {
  width:auto;
}

.user-actions {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
}

@media(max-width:760px) {
  .permissions-grid {
    grid-template-columns:1fr;
  }
}

/* =========================================================
   GUI V3 - LANGUAGE + FORMATTED AI
   ========================================================= */

.language-switch {
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#081725;
}

.language-btn {
  padding:6px 10px;
  border:0;
  border-radius:7px;
  color:var(--muted);
  background:transparent;
  font-size:12px;
}

.language-btn.active {
  color:#fff;
  background:#176fae;
}

html[dir="rtl"] body {
  direction:rtl;
}

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

html[dir="rtl"] .brand-wrap {
  flex-direction:row;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
  text-align:right;
}

html[dir="rtl"] .metric {
  direction:rtl;
}

html[dir="rtl"] .metric b {
  text-align:left;
}

html[dir="rtl"] .card-head {
  direction:rtl;
}

html[dir="rtl"] .ai-content {
  text-align:right;
}

html[dir="ltr"] .ai-content {
  text-align:left;
}


/* AI formatted output */

.ai-output {
  white-space:normal !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.ai-content {
  margin-top:18px;
  padding:22px 26px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#081827;
  color:#dcecff;
  line-height:1.65;
  font-size:14px;
}

.ai-content h1 {
  margin:0 0 20px;
  padding-bottom:11px;
  border-bottom:1px solid var(--border);
  font-size:25px;
}

.ai-content h2 {
  margin:30px 0 13px;
  color:#73bfff;
  font-size:20px;
}

.ai-content h3 {
  margin:24px 0 10px;
  color:#b7dfff;
  font-size:16px;
}

.ai-content p {
  margin:10px 0;
}

.ai-content strong {
  color:#fff;
  font-weight:700;
}

.ai-content ul,
.ai-content ol {
  margin:10px 0;
  padding-inline-start:26px;
}

.ai-content li {
  margin:7px 0;
}

.ai-table-wrap {
  margin:15px 0 22px;
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:11px;
}

.ai-content table {
  min-width:650px;
  width:100%;
  border-collapse:collapse;
  background:#0a1b2c;
}

.ai-content table th {
  position:static;
  padding:11px;
  color:#b8d8f2;
  background:#102942;
  border-bottom:1px solid #31516b;
  font-size:12px;
}

.ai-content table td {
  padding:10px 11px;
  border-bottom:1px solid #17324a;
  font-size:12px;
}

.ai-content table tr:last-child td {
  border-bottom:0;
}

.ai-separator {
  margin:24px 0;
  border:0;
  border-top:1px solid var(--border);
}

.ai-callout {
  margin:15px 0;
  padding:12px 14px;
  border-inline-start:4px solid var(--blue);
  border-radius:7px;
  background:#0d2740;
}

.ai-callout.warning {
  border-inline-start-color:var(--orange);
  background:#302612;
}

.ai-callout.good {
  border-inline-start-color:var(--green);
  background:#103126;
}

.ai-loading {
  display:flex;
  gap:10px;
  align-items:center;
  padding:20px;
  color:var(--muted);
}

.ai-spinner {
  width:18px;
  height:18px;
  border:2px solid #29455e;
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin {
  to {
    transform:rotate(360deg);
  }
}


/* Hebrew adjustments */

html[lang="he"] .desktop-nav {
  direction:rtl;
}

html[lang="he"] .filters {
  direction:rtl;
}

html[lang="he"] .mobile-nav {
  direction:rtl;
}

html[lang="he"] .type-row {
  direction:rtl;
}

html[lang="he"] .login-card {
  text-align:right;
}

@media(max-width:760px) {

  .language-switch {
    position:fixed;
    top:10px;
    right:10px;
    z-index:200;
  }

  html[dir="rtl"] .language-switch {
    right:auto;
    left:10px;
  }

  .ai-content {
    padding:15px;
    font-size:13px;
  }

  .ai-content h1 {
    font-size:21px;
  }

  .ai-content h2 {
    font-size:18px;
  }

  .ai-table-wrap {
    margin-inline:-4px;
  }
}

/* ============================================================
   PDF REPORTS
   ============================================================ */

.pdf-report-panel {
  margin-top:22px;
  padding:18px;

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

  background:
    linear-gradient(
      145deg,
      #10263c,
      #091827
    );
}

.pdf-report-title {
  margin-bottom:14px;

  font-size:17px;
  font-weight:700;
}

.pdf-controls {
  display:flex;

  align-items:end;

  gap:18px;

  flex-wrap:wrap;
}

.pdf-controls > div {
  width:min(260px,100%);
}

.pdf-ai-option {
  display:flex;

  align-items:center;

  gap:8px;

  min-height:42px;

  color:var(--text);

  cursor:pointer;
}

.pdf-ai-option input {
  width:auto;
}

.pdf-buttons {
  display:flex;

  gap:8px;

  flex-wrap:wrap;

  margin-top:16px;
}

.pdf-status {
  min-height:20px;

  margin-top:12px;

  color:var(--muted);

  font-size:12px;
}

.pdf-status.error {
  color:var(--red);
}

.pdf-status.success {
  color:var(--green);
}

@media(max-width:760px) {

  .pdf-controls {
    display:block;
  }

  .pdf-controls > div {
    width:100%;
  }

  .pdf-ai-option {
    margin-top:12px;
  }

  .pdf-buttons {
    display:grid;

    grid-template-columns:
      1fr 1fr;
  }

  .pdf-buttons .primary {
    grid-column:
      1 / -1;
  }

}


/* ============================================================
   MADE BY FOOTER
   ============================================================ */

body {
  padding-bottom:58px;
}

.udi-app-footer {
  width:100%;
  margin-top:28px;
  padding:14px 20px;

  text-align:center;

  color:#6f879a;

  font-size:11px;
  letter-spacing:.15px;

  border-top:1px solid rgba(120,160,190,.14);

  background:
    rgba(5,16,28,.78);
}

.udi-app-footer strong {
  color:#94b8d2;
  font-weight:600;
}

.udi-app-footer a {
  color:#94b8d2;
  text-decoration:none;
}

.udi-app-footer a:hover {
  color:#73bfff;
}


/* Mobile bottom navigation exists, so leave enough spacing */

@media(max-width:760px) {

  body {
    padding-bottom:105px;
  }

  .udi-app-footer {
    margin-top:22px;
    padding:12px 10px 16px;

    font-size:10px;
  }

}