/* CİBİM — app shell and page layout */

.shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) 1fr; }
@media (max-width: 1023px) { .shell { grid-template-columns: 1fr; } }

/* ---- concept marker: this is never a live product ---- */
.concept-flag {
  position: fixed; inset: auto var(--s-4) var(--s-4) auto; z-index: 60;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-full);
  background: var(--ink-900); color: var(--white);
  font: var(--t-xs); box-shadow: var(--e-2); opacity: .92;
}
.concept-flag::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan-400); flex: none;
}

/* ---- sidebar ---- */
.sidebar {
  background: var(--bg-surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5) var(--s-3); position: sticky; top: 0; height: 100vh;
}
.sidebar__brand { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-2) var(--s-5); }
.sidebar__brand img { height: 30px; width: auto; }
/* the wordmark is black, so swap to the white lockup on dark surfaces */
.sidebar__brand .logo--dark { display: none; }
:root[data-theme="dark"] .sidebar__brand .logo--light { display: none; }
:root[data-theme="dark"] .sidebar__brand .logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar__brand .logo--light { display: none; }
  :root:not([data-theme="light"]) .sidebar__brand .logo--dark { display: block; }
}
.sidebar__section { font: var(--t-xs); color: var(--text-subtle); padding: var(--s-4) var(--s-2) var(--s-1); }
.navitem {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-md); color: var(--text-muted);
  text-decoration: none; font: var(--t-body); font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  min-height: 44px;
}
.navitem:hover { background: var(--bg-sunken); color: var(--text); }
.navitem[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.navitem svg { flex: none; }
.navitem__tag {
  margin-left: auto; font: var(--t-xs); padding: 2px var(--s-2);
  border-radius: var(--r-full); background: var(--cyan-100); color: var(--cyan-900);
}
:root[data-theme="dark"] .navitem__tag { background: var(--accent-soft); color: var(--accent-text); }

@media (max-width: 1023px) {
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 50;
    transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease);
    box-shadow: var(--e-3);
  }
  .sidebar[data-open="true"] { transform: none; }
  .scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; }
}

/* ---- main ---- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h); display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-6); border-bottom: 1px solid var(--border);
  background: var(--bg-surface); position: sticky; top: 0; z-index: 30;
}
.topbar__spacer { margin-left: auto; }
/* The sidebar goes off-canvas below 1024px, so the toggle must appear there —
   and must NOT appear above it, where the sidebar is already persistent.
   Scoped to .topbar so it outranks .btn{display:inline-flex} in components.css,
   which loads later at equal specificity. */
.topbar .nav-toggle { display: none; }
@media (max-width: 1023px) { .topbar .nav-toggle { display: inline-flex; } }
.content { padding: var(--s-8) var(--s-6) var(--s-16); width: 100%; max-width: var(--content-max); margin: 0 auto; }
@media (max-width: 767px) { .content { padding: var(--s-5) var(--s-4) var(--s-12); } .topbar { padding: 0 var(--s-4); } }

.page-head { display: flex; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap; }
.page-head p { color: var(--text-muted); margin-top: var(--s-1); }
.page-head__actions { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
/* minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr) and its auto minimum
   refuses to shrink below content, which pushes panels past the viewport. */
@media (max-width: 900px) { .grid--2, .grid--3, .grid--sidebar { grid-template-columns: minmax(0, 1fr); } }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--s-4); }
.stack--sm > * + * { margin-top: var(--s-2); }
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* ---- auth (split) layout ---- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth__brandpane {
  background: var(--brand-gradient-diag); color: var(--ink-900);
  padding: var(--s-12); display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-start;   /* without this, flex stretch distorts the logo */
}
.auth__brandpane img { align-self: flex-start; width: auto; }
.auth__formpane { display: grid; place-items: center; padding: var(--s-8) var(--s-6); background: var(--bg-surface); }
.auth__form { width: 100%; max-width: 380px; }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__brandpane { padding: var(--s-6); gap: var(--s-6); }
}

/* ==========================================================================
   MOBILE — same files, phone-appropriate behaviour.
   Below 768px the off-canvas drawer alone is not enough navigation, so a
   bottom tab bar carries the primary destinations and the drawer becomes
   "Daha çox".
   ========================================================================== */

.sidebar__lang { padding: var(--s-2) var(--s-2) var(--s-4); }

.bottomnav { display: none; }

@media (max-width: 767px) {
  .bottomnav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; inset: auto 0 0 0; z-index: 45;
    background: var(--bg-surface); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom); box-shadow: var(--e-2);
  }
  .bottomnav a, .bottomnav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 60px; padding: var(--s-1) 2px;
    border: 0; background: none; cursor: pointer; text-decoration: none;
    color: var(--text-subtle); font: var(--t-xs); line-height: 1.1; text-align: center;
  }
  .bottomnav a[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
  .bottomnav a:focus-visible, .bottomnav button:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
  /* the payment action is the one people come for — give it prominence */
  .bottomnav__ico {
    width: 40px; height: 40px; border-radius: var(--r-full); margin-top: -16px;
    display: grid; place-items: center;
    background: var(--accent); color: var(--text-on-brand); box-shadow: var(--e-2);
  }
  .bottomnav__primary { color: var(--text); font-weight: 600; }

  /* keep content clear of the bar, and respect the home indicator */
  .content { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* compact on phones: a full-width bar here covers real content */
  .concept-flag { bottom: calc(70px + env(safe-area-inset-bottom)); right: var(--s-2); left: auto;
    font-size: 10px; padding: var(--s-1) var(--s-2); opacity: .85; }
  .concept-flag::before { width: 5px; height: 5px; }

  /* the topbar cannot hold the language switcher at this width — it moves
     into the drawer (see .sidebar__lang) */
  .topbar .langswitch { display: none; }
  .topbar { gap: var(--s-2); }
  .topbar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* denser panels so more fits above the fold */
  .panel__head { padding: var(--s-4) var(--s-4) var(--s-2); }
  .panel__body { padding: var(--s-4); }
  .panel__foot { padding: var(--s-3) var(--s-4); }
  h1 { font-size: 24px; line-height: 30px; }
  .amount--display { font-size: 32px; line-height: 38px; }
  .page-head { margin-bottom: var(--s-4); }
  /* hero actions: even 3-up rather than an unbalanced 2 + 1 wrap */
  .hero-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .hero-actions .btn { padding: 0 var(--s-2); font-size: 13px; }
}

@media (max-width: 400px) {
  .content { padding-left: var(--s-3); padding-right: var(--s-3); }
  .panel__head, .panel__body { padding-left: var(--s-3); padding-right: var(--s-3); }
}