/* ═══════════════ Fortochka — Shared Styles ═══════════════ */
/* Constructivist + Nostromo — Lissitzky-inspired cream theme */
/* Fonts loaded via <link> in HTML: Russo One, PT Sans, JetBrains Mono */

/* ═══════════════ UTILITY ═══════════════ */
.hidden { display: none !important; }

/* ═══════════════ THEME VARIABLES ═══════════════ */
:root {
  /* Base — dark parchment */
  --bg: #e2d9c5;
  --bg-subtle: #dbd1be;
  --bg-card: rgba(240, 232, 216, 0.5);
  --bg-card-hover: rgba(240, 232, 216, 0.75);
  --bg-input: transparent;
  --bg-dark: #2e2c28;
  --bg-dark-warm: #3d3a34;

  /* Text — dark warm */
  --text: #1a1a18;
  --text-muted: #6b6860;
  --text-dim: #9a958a;

  /* Borders */
  --border: rgba(26, 26, 24, 0.12);
  --border-hover: rgba(26, 26, 24, 0.25);

  /* Accent — constructivist red */
  --accent: #cc1a1a;
  --accent-light: #e02222;
  --accent-glow: rgba(204, 26, 26, 0.15);

  /* Status */
  --green: #2a7a52;
  --green-bg: rgba(42, 122, 82, 0.08);
  --green-text: #2a7a52;
  --amber: #a07828;
  --amber-bg: rgba(160, 120, 40, 0.08);
  --amber-text: #a07828;
  --red-bg: rgba(204, 26, 26, 0.06);
  --red-text: #cc1a1a;
  --yellow-bg: rgba(160, 120, 40, 0.08);
  --yellow-text: #a07828;

  /* Misc */
  --overlay: rgba(46, 44, 40, 0.6);
  --code-bg: rgba(46, 44, 40, 0.06);
  --row-hover: rgba(204, 26, 26, 0.04);
  --noise-opacity: 0.04;

  /* Legacy aliases (for admin compatibility) */
  --orange: var(--accent);
  --orange-light: var(--accent-light);
  --orange-glow: var(--accent-glow);
  --glass: rgba(240, 232, 216, 0.7);
  --glass-border: rgba(26, 26, 24, 0.08);
}

/* ═══════════════ BASE ═══════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'PT Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: 'Russo One', sans-serif;
  letter-spacing: 0.04em;
}

/* ═══════════════ PAPER TEXTURE — aged Lissitzky-era paper ═══════════════ */
/* Layer 1: organic mottling (uneven color) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* SVG noise for mottled base */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 2048 2048' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.08'/%3E%3C/svg%3E"),
    /* SVG noise for fine dust specks */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0.1 0.18'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 2048px, 1024px;
}
/* Layer 2: fiber lines + age stains */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Paper fiber lines — thin, slightly angled */
    linear-gradient(2deg, transparent 49.5%, rgba(90,65,30,0.025) 49.5%, rgba(90,65,30,0.025) 50%, transparent 50%) 0 0 / 100% 8px,
    linear-gradient(-1deg, transparent 49.5%, rgba(80,55,25,0.02) 49.5%, rgba(80,55,25,0.02) 50%, transparent 50%) 0 0 / 100% 12px,
    linear-gradient(1.5deg, transparent 49.5%, rgba(100,70,35,0.02) 49.5%, rgba(100,70,35,0.02) 50%, transparent 50%) 0 0 / 100% 18px,
    /* Age stains — irregular warm patches */
    radial-gradient(ellipse 300px 200px at 15% 20%, rgba(140,105,45,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 250px 350px at 80% 65%, rgba(130,95,40,0.06) 0%, transparent 100%),
    radial-gradient(ellipse 400px 250px at 50% 85%, rgba(120,85,35,0.06) 0%, transparent 100%),
    radial-gradient(ellipse 200px 150px at 65% 15%, rgba(135,100,42,0.05) 0%, transparent 100%);
}

/* ═══════════════ CARD ═══════════════ */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  transition: border-color 0.2s ease;
}
.card:hover {
  border-color: var(--border-hover);
  border-left-color: var(--accent);
}

/* ═══════════════ BUTTONS ═══════════════ */
.btn {
  background: var(--accent);
  color: #f0e8d8;
  border: none;
  padding: 10px 24px;
  cursor: pointer;
  font-family: 'Russo One', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
  transition: background 0.15s ease;
}
.btn:hover {
  background: var(--accent-light);
}
.btn:disabled {
  background: var(--text-dim);
  color: var(--bg);
  cursor: not-allowed;
}

.btn-danger { background: var(--accent); }
.btn-danger:hover { background: var(--accent-light); }

.btn-secondary {
  background: var(--bg-dark);
  color: #f0e8d8;
}
.btn-secondary:hover { background: var(--bg-dark-warm); }

/* ═══════════════ INPUTS ═══════════════ */
.input {
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-size: 15px;
  font-family: 'JetBrains Mono', monospace;
  background: transparent;
  color: var(--text);
  transition: border-color 0.2s ease;
  width: 100%;
}
.input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.input::placeholder {
  color: var(--text-dim);
}

/* ═══════════════ STATUS DOTS ═══════════════ */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.status-ACTIVE { background: var(--green); box-shadow: 0 0 6px rgba(42, 122, 82, 0.4); }
.status-PROVISIONING, .status-BOOTSTRAPPING { background: var(--amber); box-shadow: 0 0 6px rgba(160, 120, 40, 0.4); }
.status-SUSPENDED { background: var(--amber); box-shadow: 0 0 6px rgba(160, 120, 40, 0.4); }
.status-FAILED { background: var(--accent); box-shadow: 0 0 6px rgba(204, 26, 26, 0.4); }
.status-DESTROYED { background: var(--text-dim); }

/* ═══════════════ BADGES ═══════════════ */
.badge-green  { background: var(--green-bg); color: var(--green-text); padding: 2px 8px; font-size: 12px; font-family: 'Russo One', sans-serif; letter-spacing: 0.05em; }
.badge-red    { background: var(--red-bg); color: var(--red-text); padding: 2px 8px; font-size: 12px; font-family: 'Russo One', sans-serif; letter-spacing: 0.05em; }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow-text); padding: 2px 8px; font-size: 12px; font-family: 'Russo One', sans-serif; letter-spacing: 0.05em; }
.badge-gray   { background: var(--code-bg); color: var(--text-dim); padding: 2px 8px; font-size: 12px; font-family: 'Russo One', sans-serif; letter-spacing: 0.05em; }

/* ═══════════════ TABLES ═══════════════ */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--accent);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: 'Russo One', sans-serif;
}
td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
tr.clickable:hover { background: var(--row-hover); cursor: pointer; }

/* ═══════════════ PASSWORD TOGGLE ═══════════════ */
.pw-wrap { position: relative; }
.pw-wrap .input { width: 100%; padding-right: 42px; }
.pw-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 1.1rem; padding: 4px; line-height: 1; }
.pw-eye:hover { color: var(--text-muted); }

/* ═══════════════ SCROLLBAR ═══════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--text-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ═══════════════ UTILITIES ═══════════════ */
.hidden { display: none; }

.mono {
  font-family: 'JetBrains Mono', monospace;
}

.lang-toggle {
  cursor: pointer;
  font-size: 0.8rem;
  white-space: nowrap;
}
.lang-sep { opacity: 0.3; margin: 0 1px; }
.lang-switch {
  opacity: 0.4;
  transition: opacity 0.2s;
  color: var(--text);
  font-size: 0.8rem;
}
.lang-switch:hover { opacity: 0.7; }
.lang-switch.active { opacity: 1; }

/* ═══════════════ SPINNER ═══════════════ */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  animation: spin 1s linear infinite;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
}

/* ═══════════════ LAYOUT ═══════════════ */
.container        { max-width: 640px; margin: 0 auto; padding: 90px 1.5rem 1.5rem; }
.flex-between     { display: flex; justify-content: space-between; align-items: center; }
.flex-center      { display: flex; align-items: center; justify-content: center; }
.flex-col         { display: flex; flex-direction: column; }
.gap-sm           { gap: 0.5rem; }
.gap-md           { gap: 0.75rem; }

/* ═══════════════ TYPOGRAPHY ═══════════════ */
.heading          { font-family: 'Russo One', sans-serif; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; }
.heading-sm       { font-family: 'Russo One', sans-serif; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem; }
.heading-lg       { font-family: 'Russo One', sans-serif; font-size: 1.3rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.brand-text       { font-family: 'Russo One', sans-serif; font-size: 1.05rem; letter-spacing: 0.2em; color: #f0e8d8; }
.label            { font-family: 'Russo One', sans-serif; font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 0.3rem; }
.text-error       { color: var(--accent); }
.text-success     { color: var(--green); }

/* ═══════════════ SPACING ═══════════════ */
.mb-sm            { margin-bottom: 0.75rem; }
.mb-md            { margin-bottom: 1rem; }
.mb-lg            { margin-bottom: 1.25rem; }

/* ═══════════════ COMPONENTS ═══════════════ */
.header-bar       { background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); padding: 0.8rem 1.5rem; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.btn-full         { width: 100%; }
.btn-sm           { padding: 6px 14px; font-size: 0.7rem; }
.card-pad         { padding: 1.5rem; }
.card-section     { padding: 1.5rem; margin-bottom: 1rem; }
.modal-overlay    { position: fixed; inset: 0; background: var(--overlay); z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-card       { padding: 1.5rem; max-width: 400px; width: 90%; background: var(--bg); }
.modal-cancel-btn { padding: 8px 16px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-family: 'Russo One', sans-serif; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.auth-card        { padding: 2.5rem; max-width: 380px; margin: 4rem auto 0; position: relative; z-index: 1; }
.error-msg        { color: var(--accent); font-size: 0.875rem; margin-bottom: 0.75rem; }
.hint-text        { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.75rem; line-height: 1.5; }
.balance-text     { font-family: 'Russo One', sans-serif; font-size: 0.9rem; letter-spacing: 0.05em; }

/* ═══════════════ ACCORDION ═══════════════ */
.accordion-header { padding: 1rem 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.accordion-body   { padding: 0 1.25rem 1rem; border-top: 1px solid var(--border); }
.accordion-arrow  { color: var(--text-dim); transition: transform 0.3s; font-size: 0.8rem; }

/* ═══════════════ DASHBOARD GRID ═══════════════ */
.grid-actions     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.action-card      { padding: 1.25rem; text-align: center; cursor: pointer; }
.action-icon      { font-size: 1.5rem; margin-bottom: 0.4rem; }
.action-label     { font-size: 0.8rem; font-weight: 500; }

/* ═══════════════ TRANSACTIONS ═══════════════ */
.tx-row           { padding: 0.75rem 1.25rem; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; }
.tx-amount        { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.95rem; }

/* ═══════════════ ALERTS ═══════════════ */
.alert            { padding: 0.75rem 1rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.75rem; border-left: 3px solid var(--accent); }
.alert-icon       { font-size: 1.2rem; }
.alert-text       { font-size: 0.9rem; }

/* ═══════════════ PAGINATION ═══════════════ */
.pagination       { margin-top: 1rem; display: flex; justify-content: center; gap: 0.5rem; }

/* ═══════════════ APP SHELL LAYOUT ═══════════════ */
.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.app-topbar {
  grid-column: 1 / -1;
}
.main-area {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ═══════════════ SIDEBAR (admin only now) ═══════════════ */
.sidebar {
  position: sticky;
  top: 0;
  height: calc(100vh - 53px);
  overflow-y: auto;
  z-index: 40;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  flex: 1;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 10px 16px;
  color: var(--text-muted);
  cursor: pointer;
  margin: 2px 8px;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
}
.sidebar-item:hover {
  background: var(--row-hover);
  color: var(--text);
}
.sidebar-item.active {
  color: var(--accent);
  background: var(--accent-glow);
  border-left: 3px solid var(--accent);
}
.sidebar-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
}

/* ═══════════════ TOPBAR ═══════════════ */
.topbar {
  display: flex;
  align-items: stretch;
  height: 52px;
  border-bottom: 1px solid var(--border);
  background: rgba(240, 232, 216, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 30;
  position: relative;
}
.topbar-brand {
  display: flex;
  align-items: stretch;
}

/* Red clip-path logo block */
.logo-block {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 2.2rem 0 1.5rem;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
  cursor: pointer;
}
.logo-block svg { color: #f0e8d8; flex-shrink: 0; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-left: auto;
  padding-right: 1.5rem;
}

/* ═══════════════ TOPBAR NAV (user) ═══════════════ */
.topbar-nav {
  display: flex;
  align-items: stretch;
  margin-left: 0.5rem;
}
.topbar-nav-item {
  display: flex;
  align-items: center;
  padding: 0 1.3rem;
  font-family: 'Russo One', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
}
.topbar-nav-item:hover { color: var(--text); }
.topbar-nav-item.active { color: var(--accent); }
.topbar-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
}

/* ═══════════════ CONTENT AREA ═══════════════ */
.content-area {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  position: relative;
  z-index: 1;
}

/* ═══════════════ METRIC DISPLAY ═══════════════ */
.metric-value {
  font-family: 'Russo One', sans-serif;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.metric-label {
  font-family: 'Russo One', sans-serif;
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.25rem;
}

/* ═══════════════ SUMMARY CARDS ═══════════════ */
.summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ═══════════════ EMPTY STATE ═══════════════ */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}
.empty-state-icon {
  margin: 0 auto 1rem;
  opacity: 0.5;
}
.empty-state-title {
  font-family: 'Russo One', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.empty-state-text {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════ TWO COLUMN LAYOUT ═══════════════ */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* ═══════════════ HAMBURGER (mobile) ═══════════════ */
.hamburger-btn {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
  display: none;
  font-size: 1.25rem;
}

/* ═══════════════ SECTION LABEL (constructivist) ═══════════════ */
.section-label {
  font-family: 'Russo One', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f0e8d8;
  background: var(--accent);
  display: inline-block;
  padding: 0.35rem 1.5rem 0.35rem 0.75rem;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
  margin-bottom: 1rem;
}

/* ═══════════════ DARK CARD VARIANT ═══════════════ */
.card-dark {
  background: var(--bg-dark);
  color: #f0e8d8;
  border: none;
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  padding: 1.5rem;
}
.card-dark h3 { color: #f0e8d8; }
.card-dark p { color: #c4b89e; }
.card-dark .label { color: #9a958a; }
.card-dark .input {
  color: #f0e8d8;
  border-bottom-color: rgba(240, 232, 216, 0.12);
}
.card-dark .input:focus { border-bottom-color: var(--accent); }
.card-dark .input::placeholder { color: #6b6860; }

/* ═══════════════ PAGE TRANSITIONS ═══════════════ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter {
  animation: fade-up 0.3s ease both;
}
.stagger-item {
  animation: fade-up 0.35s ease both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
/* After animations finish, clear them so the browser's frozen-tab snapshot
   shows visible content (animation-fill-mode: both starts at opacity:0). */
.page-enter.anim-done,
.stagger-item.anim-done {
  animation: none;
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 1023px) {
  .content-area {
    padding: 1rem 1.25rem;
  }
  .app-shell {
    grid-template-columns: 1fr;
  }
  /* Admin sidebar mobile */
  .sidebar {
    position: fixed;
    left: 0;
    top: 53px;
    bottom: 0;
    height: auto;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 60;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .sidebar-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }
  .hamburger-btn {
    display: block;
  }
  .topbar-nav {
    display: none;
  }
  .topbar {
    overflow: hidden;
  }
  .topbar-right {
    gap: 0.6rem;
    padding-right: 0.75rem;
  }
  .logo-block {
    padding: 0 1.5rem 0 0.75rem;
  }
  .brand-text {
    font-size: 0.9rem;
  }
  .balance-text {
    font-size: 0.8rem;
  }
  .two-col {
    grid-template-columns: 1fr;
  }
}