/*
 * LinkIt canonical surfaces and application navigation.
 * This file owns shared visual shells only; page styles own layout and behavior.
 */
:root {
  --gl-canvas-bg: radial-gradient(circle at 50% 0%, rgba(20, 20, 30, 0.035), transparent 32%), linear-gradient(180deg, #fbfbfc 0%, #f6f7f9 100%);
  --gl-surface-bg: radial-gradient(circle at 50% 0%, rgba(20, 20, 30, 0.035), transparent 32%), linear-gradient(180deg, #fbfbfc 0%, #f6f7f9 100%);
  --gl-surface-inset-bg: var(--gl-canvas-bg);
  --gl-surface-shadow: 0 1px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --gl-surface-shadow-sm: 0 12px 22px -13px rgba(35,45,60,.34), inset 2px 2px 3px rgba(255,255,255,.92), inset -2px -3px 6px rgba(35,45,60,.10);
  --gl-surface-well: inset 4px 5px 11px -3px rgba(35,45,60,.22), inset -2px -3px 6px rgba(255,255,255,.9);
  --gl-surface-radius: 24px;
  --gl-surface-inset-radius: 26px;
  --gl-nav-radius: 15px;
  --gl-sidebar-width: 250px;
  --gl-sidebar-ink: #172033;
  --gl-sidebar-muted: #67758b;
  --gl-nav-active-bg: var(--primary-color);
  --gl-nav-ease: cubic-bezier(.19,.86,.22,1);
}

html[data-public-theme="dark"] {
  --gl-canvas-bg: #171717;
  --gl-surface-bg: #212121;
  --gl-surface-inset-bg: #2f2f2f;
  --gl-surface-shadow: 0 24px 42px -22px rgba(0,0,0,.9), 0 9px 18px -11px rgba(0,0,0,.72), inset 1px 1px 0 rgba(255,255,255,.07);
  --gl-surface-shadow-sm: 0 14px 26px -15px rgba(0,0,0,.88), inset 1px 1px 0 rgba(255,255,255,.06);
  --gl-surface-well: inset 3px 4px 9px -3px rgba(0,0,0,.74), inset -1px -1px 3px rgba(255,255,255,.05);
}

.gl-surface {
  background: var(--gl-surface-bg);
  border: 0;
  border-radius: var(--gl-surface-radius);
  box-shadow: var(--gl-surface-shadow);
}
.gl-sidebar .gl-nav-list { display: flex; flex-direction: column; gap: 6px; }

.gl-surface-inset {
  background: var(--gl-surface-inset-bg);
  border: 0;
  border-radius: var(--gl-surface-inset-radius);
  box-shadow: var(--gl-surface-well);
}

/* Intentionally light surfaces keep the light foreground hierarchy in either theme. */
.gl-surface--light,
:where(.home-process-disc, .checkout-payment-box, .gl-modal-content, .admin-shell .confirm-box) {
  --gl-text-primary: var(--gl-surface-light-text-primary);
  --gl-text-secondary: var(--gl-surface-light-text-secondary);
  --gl-text-muted: var(--gl-surface-light-text-muted);
  --gl-text-disabled: var(--gl-surface-light-text-disabled);
}

.gl-sidebar {
  box-sizing: border-box;
  width: var(--gl-sidebar-width);
  min-width: var(--gl-sidebar-width);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 24px 16px;
  border-radius: 32px;
  background: var(--gl-surface-bg);
  color: var(--gl-sidebar-ink);
  box-shadow: none;
}
.gl-sidebar .sidebar-logo a { color: var(--gl-sidebar-ink); }
.gl-sidebar .sidebar-user-info strong { color: var(--gl-sidebar-ink); }
.gl-sidebar .sidebar-user-info small { color: var(--gl-sidebar-muted); }

.gl-app-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: var(--gl-nav-radius);
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: transform .24s var(--gl-nav-ease), box-shadow .24s var(--gl-nav-ease), background .24s;
}
.gl-app-nav-link i { width: 20px; text-align: center; font-size: 18px; }
.gl-app-nav-link:hover,
.gl-app-nav-link:focus-visible { transform: translateX(3px); background: var(--gl-surface-inset-bg); color: inherit; box-shadow: var(--gl-surface-well); }
.gl-app-nav-link.active { background-color: var(--gl-nav-active-bg); background-image: none; color: #fff; font-weight: 700; box-shadow: none; }
.gl-sidebar-account { background: var(--gl-surface-inset-bg); border-radius: 16px; box-shadow: var(--gl-surface-well); }

.admin-shell .gl-sidebar {
  --gl-sidebar-width: 250px;
  --gl-sidebar-ink: #172033;
  --gl-sidebar-muted: #67758b;
  position: fixed;
  left: 0;
  z-index: 2000;
  overflow-y: auto;
  border-radius: 0;
  background: var(--gl-surface-bg);
  color: var(--gl-sidebar-ink);
  box-shadow: none;
}
.admin-shell .gl-sidebar .gl-app-nav-link { color: var(--gl-sidebar-ink); }
.admin-shell .gl-sidebar .gl-app-nav-link:hover,
.admin-shell .gl-sidebar .gl-app-nav-link:focus-visible { color: var(--gl-sidebar-ink); background: var(--gl-surface-inset-bg); }
.admin-shell .gl-sidebar .gl-app-nav-link.active { color: #fff; }

.admin-shell .admin-main-surface .gl-surface {
  box-shadow: var(--gl-surface-shadow-sm);
}

html[data-public-theme="dark"] .admin-shell .gl-sidebar {
  --gl-sidebar-ink: #fbf7ff;
  --gl-sidebar-muted: #cabbd8;
}

[dir="rtl"] .gl-app-nav-link:hover,
[dir="rtl"] .gl-app-nav-link:focus-visible { transform: translateX(-3px); }
[dir="rtl"] .admin-shell .gl-sidebar { left: auto; right: 0; border-radius: 0; }

@media (max-width: 768px) {
  .gl-sidebar { position: fixed; left: 0; width: min(300px, 85vw); min-width: 0; max-width: 85vw; height: 100vh; border-radius: 0 32px 32px 0; transform: translateX(-105%); transition: transform .35s ease; z-index: 1055; overflow-y: auto; }
  .gl-sidebar.open { transform: translateX(0); }
  [dir="rtl"] .gl-sidebar { left: auto; right: 0; border-radius: 32px 0 0 32px; transform: translateX(105%); }
  [dir="rtl"] .gl-sidebar.open { transform: translateX(0); }
  .admin-shell .gl-sidebar { position: fixed; width: 250px; min-width: 250px; }
}