/* Shared UI for AI SALON app shell (top bar store selector + settings menu) */
:root {
  --border-shared: #eaddd7;
  --text-shared: #4a4542;
  --primary-shared: #806b64;
  --primary-700-shared: #695851;
  /* Navigation / header theme */
  --nav-gradient-start: #f4ede8;
  --nav-gradient-end: #efe8e3;
  --nav-link-hover-bg: #f0e9e4;
  --nav-link-active-bg: #806b64;
  --nav-link-active-text: #ffffff;
  --topbar-bg-start: #ffffff;
  --topbar-bg-end: #fbfbfa;
}

/* Global top bar (GCP-like) */
.global-topbar { background: linear-gradient(180deg, var(--topbar-bg-start) 0%, var(--topbar-bg-end) 100%); border-bottom: 1px solid var(--border-shared); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.topbar-inner { max-width: none; margin: 0; padding: 0.5rem 0.5rem 0.5rem 1.25rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 1.25rem; }
.topbar-left { justify-self: start; font-weight: 800; color: var(--text-shared); font-size: 1.375rem; display: flex; align-items: center; gap: 12px; }
.topbar-center { justify-self: start; }
.topbar-right { justify-self: end; padding-right: 0.25rem; }

.store-select {
  background: #fff;
  border: 1px solid var(--border-shared);
  border-radius: 9999px;
  padding: 0.375rem 0.75rem;
  color: var(--text-shared);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.store-select:hover { border-color: var(--primary-shared); box-shadow: 0 2px 6px rgba(128,107,100,.12); }

.btn-ghost { color: var(--primary-shared); transition: color .2s ease, transform .2s ease; }
.btn-ghost:hover { color: var(--primary-700-shared); transform: translateY(-1px); }

.modern-select { border: 1px solid var(--border-shared); background: #fff; box-shadow: 0 1px 1px rgba(16,24,40,.04); outline: none; }
.modern-select:focus { border-color: var(--primary-shared); box-shadow: 0 0 0 3px rgba(128,107,100,.35); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 60; }
.modal-panel { width: 100%; max-width: 720px; background: #fff; border: 1px solid var(--border-shared); border-radius: 12px; box-shadow: 0 24px 48px rgba(0,0,0,.12); }
.hidden { display: none; }

/* Dropdown container basic */
.dropdown-menu { background: #fff; border: 1px solid var(--border-shared); border-radius: 0.5rem; box-shadow: 0 12px 24px rgba(0,0,0,.10); }

.gear-icon { width: 28px; height: 28px; display: inline-block; }


/* Unified sidebar/nav styling across pages */
aside.ui-modern { background: linear-gradient(180deg, var(--nav-gradient-start) 0%, var(--nav-gradient-end) 100%) !important; box-shadow: inset -1px 0 0 var(--border-shared) !important; }

.nav-link { color: var(--text-shared) !important; transition: background-color .2s ease, color .2s ease; }
.nav-link:hover { background-color: var(--nav-link-hover-bg) !important; color: var(--text-shared) !important; }
.nav-link.active { background-color: var(--nav-link-active-bg) !important; color: var(--nav-link-active-text) !important; font-weight: 600 !important; }