/**
 * Filename: public/stylesheets/layout.css
 * Revision: 2025-12-18-02 - Fix header positioning (fixed, z-index)
 * Description: Layout styles - header, page wrapper, account avatar
 */

/* ===== PAGE WRAPPER ===== */
.page-wrapper {
  min-height: 100vh;
  padding-top: 56px; /* Space for fixed header */
  background: #f0f4f8;
}

[data-theme="dark"] .page-wrapper {
  background: #0f172a;
}

/* ===== TOP HEADER ===== */
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  z-index: 200;
}

[data-theme="dark"] .top-header {
  background: #162231;
  border-bottom-color: #334155;
}

/* ===== HEADER BRAND ===== */
.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* ===== HEADER RIGHT ===== */
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background: #f1f5f9;
}

.theme-icon-light {
  display: inline;
}

.theme-icon-dark {
  display: none;
}

[data-theme="dark"] .theme-icon-light {
  display: none;
}

[data-theme="dark"] .theme-icon-dark {
  display: inline;
}

[data-theme="dark"] .theme-toggle {
  border-color: #334155;
}

[data-theme="dark"] .theme-toggle:hover {
  background: #1e293b;
}

/* ===== LOGO SWAP ===== */
.theme-logo-light {
  display: inline-block;
  height: 48px;
}

.theme-logo-dark {
  display: none;
  height: 48px;
}

[data-theme="dark"] .theme-logo-light {
  display: none;
}

[data-theme="dark"] .theme-logo-dark {
  display: inline-block;
}

/* ===== ACCOUNT AVATAR ===== */
.account-avatar {
  width: 36px;
  height: 36px;
  background: #2563eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.account-avatar:hover {
  transform: scale(1.05);
}

.avatar-letter {
  color: white;
  font-weight: 600;
  font-size: 14px;
}

[data-theme="dark"] .account-avatar {
  background: #3b82f6;
}