/*
 * LinkIt canonical surfaces and application navigation.
 * This file owns shared visual shells only; page styles own layout and behavior.
 */
:root {
  --gl-canvas-bg: color-mix(in srgb, #ffffff 6%, #dce4f3);
  --gl-surface-bg: linear-gradient(158deg, #fafcff, #f3f6fd 48%, #eaf0fa);
  --gl-surface-inset-bg: var(--gl-canvas-bg);
  --gl-surface-shadow: 0 22px 38px -20px rgba(35,45,60,.36), 0 8px 16px -10px rgba(35,45,60,.18), inset 2px 3px 4px rgba(255,255,255,.95), inset -3px -5px 9px rgba(35,45,60,.09);
  --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: 36px;
  --gl-surface-inset-radius: 26px;
  --gl-nav-radius: 15px;
  --gl-sidebar-width: 270px;
  --gl-sidebar-ink: #172033;
  --gl-sidebar-muted: #67758b;
  --gl-nav-active-bg: linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 72%, #fff), var(--primary-color) 48%, color-mix(in srgb, var(--primary-color) 84%, #24113e) 48.01%, color-mix(in srgb, var(--primary-color) 72%, #24113e));
  --gl-nav-ease: cubic-bezier(.19,.86,.22,1);
}

html[data-public-theme="dark"] {
  --gl-canvas-bg: linear-gradient(135deg, #2b0a47, #1c0333);
  --gl-surface-bg: linear-gradient(160deg, #351054, #24063d);
  --gl-surface-inset-bg: linear-gradient(155deg, #2a0845, #23053a);
  --gl-surface-shadow: 0 24px 42px -22px rgba(4,0,10,.88), 0 9px 18px -11px rgba(4,0,10,.68), inset 1px 1px 0 rgba(255,255,255,.12), inset -3px -4px 8px rgba(0,0,0,.3);
  --gl-surface-shadow-sm: 0 14px 26px -15px rgba(4,0,10,.85), inset 1px 1px 0 rgba(255,255,255,.1), inset -2px -3px 6px rgba(0,0,0,.28);
  --gl-surface-well: inset 4px 5px 11px -3px rgba(3,0,8,.72), inset -1px -2px 5px rgba(255,255,255,.08);
}

.gl-surface {
  background: var(--gl-surface-bg);
  border: 0;
  border-radius: var(--gl-surface-radius);
  box-shadow: none;
}
.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;
  padding: 24px 16px;
  border-radius: 32px;
  background: var(--gl-surface-bg);
  color: var(--gl-sidebar-ink);
  box-shadow: var(--gl-surface-shadow);
}
.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: 14px;
  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: var(--gl-nav-active-bg); color: #fff; font-weight: 700; box-shadow: 0 12px 20px -11px color-mix(in srgb, var(--primary-color) 74%, transparent), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(35,45,60,.2); }
.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: 240px;
  --gl-sidebar-ink: rgba(255,255,255,.85);
  --gl-sidebar-muted: rgba(255,255,255,.64);
  position: fixed;
  left: 0;
  z-index: 2000;
  overflow-y: auto;
  border-radius: 0 32px 32px 0;
  background: #2a1e48;
  color: var(--gl-sidebar-ink);
  box-shadow: 0 22px 38px -20px rgba(17,10,35,.5);
}
.admin-shell .gl-sidebar .gl-app-nav-link { color: rgba(255,255,255,.85); }
.admin-shell .gl-sidebar .gl-app-nav-link:hover,
.admin-shell .gl-sidebar .gl-app-nav-link:focus-visible { color: #fff; background: color-mix(in srgb, var(--primary-color) 18%, transparent); }
.admin-shell .gl-sidebar .gl-app-nav-link.active { color: #fff; }

[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: 32px 0 0 32px; }

@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: 240px; min-width: 240px; }
}