/* ============================================================
   APP SHELL the dashboard chrome shared by the Royalties,
   Analytics and Publishing pages: fixed app bar, sub-tab strip
   and footer, plus the mobile rules for all three.

   Pages set --appbar-h themselves if they need a different one.
   ============================================================ */

.app-body {
  --appbar-h: 72px;
  background: #1c1c20;
  padding-top: var(--appbar-h);
  color-scheme: dark;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(255, 107, 53, 0.18);
  -webkit-text-size-adjust: 100%;
}

.app-body button,
.app-body a,
.app-body input,
.app-body select,
.app-body label { touch-action: manipulation; }

.app-body img, .app-body svg { max-width: 100%; }

/* ---------- App bar ---------- */
.dash-nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 900;
  height: var(--appbar-h);
  display: flex;
  align-items: center;
  background: #050506;
  border-bottom: 1px solid var(--surface-border);
}

.dash-nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 28px;
}

.dash-logo .logo-img { height: 44px; }
.dash-tabs { display: flex; align-items: center; gap: 28px; list-style: none; flex: 1; }

.dash-tabs a {
  position: relative;
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #d1d5db;
  padding: 24px 0;
  transition: color var(--transition-fast);
}

.dash-tabs a:hover { color: #fff; }
.dash-tabs a.is-active { color: var(--accent-coral); }

.dash-tabs a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  height: 2px;
  background: var(--accent-cyan);
  border-radius: 2px;
}

.dash-nav-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }

.dash-create {
  display: flex; align-items: center; gap: 6px;
  color: var(--accent-coral);
  font-weight: 700; font-size: 15px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body);
}

.dash-icon-btn {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  color: #cbd0d6;
  background: none; border: none; cursor: pointer;
  border-radius: 50%;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.dash-icon-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.dash-icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.dash-avatar { display: flex; align-items: center; gap: 6px; background: none; border: none; color: #cbd0d6; }

.dash-avatar-circle {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-coral));
  color: #000; font-weight: 800; font-size: 15px;
  font-family: var(--font-heading);
}

/* ---------- Sub-tab strip ---------- */
.sub-bar {
  position: sticky;
  top: var(--appbar-h);
  z-index: 860;
  background: #000;
  border-bottom: 1px solid var(--surface-border);
}

.sub-bar-inner {
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 28px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sub-bar-inner::-webkit-scrollbar { display: none; }

.sub-tab {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: #d1d5db;
  padding: 18px 0;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.sub-tab:hover { color: #fff; }
.sub-tab.is-active { color: var(--accent-coral); }

.sub-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent-cyan);
}

.sub-bar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; padding: 10px 0; }

/* ---------- Shared page bits ---------- */
.app-wrap {
  max-width: 1560px;
  margin: 0 auto;
  padding: 40px 28px calc(74px + env(safe-area-inset-bottom, 0px));
}

.app-panel { display: none; }
.app-panel.is-active { display: block; animation: appFade 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes appFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.app-h1 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.app-h2 {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.015em;
}

.app-lede { color: var(--text-muted); font-size: 16px; line-height: 1.7; margin-top: 12px; }

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 26px;
  border-radius: 100px;
  border: 1px solid var(--accent-cyan);
  background: none;
  color: var(--accent-coral);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.app-btn:hover { background: var(--accent-cyan); color: #04303a; transform: translateY(-1px); }
.app-btn--solid { background: var(--accent-cyan); color: #04303a; }
.app-btn--solid:hover { background: var(--accent-cyan-bright); }
.app-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; }

.app-empty {
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  background: #26272d;
  border-radius: var(--radius-lg);
  padding: 84px 24px;
}

.app-empty[hidden] { display: none; }   /* hidden attribute ko display:grid override kar raha tha */
.app-empty h3 { font-family: var(--font-heading); font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; }
.app-empty p { color: var(--text-muted); font-size: 15.5px; }

/* ---------- Footer ---------- */
.dash-footer { border-top: 1px solid var(--surface-border); background: #050506; padding: 52px 28px 0; }
.dash-footer-inner { max-width: 1560px; margin: 0 auto; }

.dash-footer-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--surface-border);
}

.dash-footer-top .logo-img { height: 52px; }
.dash-footer-cards { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 15px; }

.dash-footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 36px 0 44px;
}

.dash-footer-cols h4 {
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 700;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--accent-coral);
  display: inline-block;
}

.dash-footer-cols p, .dash-footer-cols a { color: var(--text-muted); font-size: 15px; line-height: 2; }
.dash-footer-cols a:hover { color: var(--accent-coral); }
.dash-footer-cols ul { list-style: none; }

.dash-footer-social { display: flex; gap: 14px; margin-top: 6px; }

.dash-footer-social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #d1d5db;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.dash-footer-social a:hover { background: var(--accent-cyan); color: #000; transform: translateY(-2px); }
.dash-footer-social svg { width: 18px; height: 18px; fill: currentColor; }

.dash-footer-legal {
  display: flex; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 22px 0 calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--surface-border);
  color: var(--text-dim); font-size: 13.5px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .dash-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .dash-tabs { display: none; }
  .dash-nav-right { margin-left: auto; }
}

@media (max-width: 700px) {
  .app-body { --appbar-h: 60px; }

  .dash-nav-inner { padding: 0 16px; gap: 12px; }
  .dash-logo .logo-img { height: 34px; }
  .dash-nav-right { gap: 10px; }
  .dash-create span { display: none; }
  .dash-create::before { content: "+"; font-size: 22px; line-height: 1; }
  .dash-avatar-circle { width: 34px; height: 34px; font-size: 13px; }
  .dash-icon-btn { width: 32px; height: 32px; }

  .sub-bar-inner { padding: 0 16px; gap: 20px; }
  .sub-tab { font-size: 14.5px; padding: 15px 0; }
  .sub-bar-right { width: 100%; }

  .app-wrap { padding: 26px 16px 56px; }
  .app-empty { padding: 54px 18px; border-radius: var(--radius-md); }
  .app-btn { width: 100%; min-height: 50px; }

  .dash-footer { padding: 38px 16px 0; }
  .dash-footer-cols { grid-template-columns: 1fr; gap: 26px; padding: 26px 0 30px; }
}

/* ============================================================
   SIDEBAR SHELL dashboard jaisa left rail, ab har app page par.
   ------------------------------------------------------------
   app-shell.js ye markup inject karta hai:

     .ds-shell > .ds-scrim + .ds-side + .ds-main > .ds-topbar + page

   1000px se neeche rail drawer ban jaati hai, jise topbar ke
   burger se kholte hain.
   ============================================================ */

.ds-shell-body {
  --ds-side-w: 300px;
  /* Desktop par topbar chhupa hua hai, is liye uski height 0 */
  --ds-topbar-h: 0px;
  padding-top: 0 !important;
  background: #1c1c20;
  color-scheme: dark;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(255, 107, 53, 0.18);
  -webkit-text-size-adjust: 100%;
}

/* Purane fixed app bar ab nahi chahiye rail unki jagah le
   chuki hai. Markup DOM mein rehta hai taaki purani page-JS
   jo un ids ko chhooti hai wo na toote. */
.ds-shell-body .dash-nav,
.ds-shell-body .acc-bar { display: none; }

.ds-shell { display: grid; grid-template-columns: var(--ds-side-w) minmax(0, 1fr); }

/* ---------- Rail ---------- */
.ds-side {
  position: fixed;
  top: 0; left: 0;
  z-index: 1000;
  width: var(--ds-side-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #08090c;
  border-right: 1px solid var(--surface-border);
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Scroll chalta hai, par patti nahi dikhti */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* purana Edge/IE */
}

.ds-side::-webkit-scrollbar { width: 0; height: 0; display: none; }

.ds-side .logo-img { height: 40px; }
/* Sirf logo par click chale. Pehle ye block tha aur .ds-side flex column
   hai, is liye link poori 300px chaudai le leta tha, aur logo ke bagal
   ki khaali jagah par click karne se bhi page chala jaata tha. */
.ds-logo {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  margin-bottom: 14px;
}

.ds-user {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #101218;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  margin-bottom: 14px;
}

.ds-user-circle {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-coral));
  color: #000;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
}

.ds-user-circle img { width: 100%; height: 100%; object-fit: cover; }

.ds-user-text { min-width: 0; }
.ds-user-text strong { display: block; font-size: 15.5px; font-weight: 700; }
.ds-user-text span { display: block; font-size: 13px; color: var(--accent-coral); margin-top: 2px; word-break: break-all; }

.ds-nav { display: grid; gap: 4px; }

.ds-link {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  color: #d1d5db;
  font-size: 15.5px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  width: 100%;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ds-link:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.ds-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.ds-link.is-active { background: rgba(255, 107, 53, 0.12); color: var(--accent-coral); }
.ds-link .caret { margin-left: auto; transition: transform var(--transition-fast); }

.ds-group.is-open .ds-link .caret { transform: rotate(180deg); }
.ds-sub { display: none; padding: 2px 0 6px 18px; }
.ds-group.is-open .ds-sub { display: block; }

.ds-sub a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 36px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14.5px;
  font-weight: 600;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ds-sub a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.ds-sub a.is-active { color: var(--accent-coral); }
.ds-sub svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }

.ds-side-foot { margin-top: auto; padding-top: 12px; }

.ds-logout {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px;
  border: 1px solid var(--surface-border-bright);
  border-radius: var(--radius-md);
  background: #101218;
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ds-logout:hover { background: #171a22; border-color: var(--accent-cyan); }

/* ---------- Content column ---------- */
.ds-main { grid-column: 2; min-width: 0; }

/* Desktop par topbar mein ab kuch nahi bacha (back button hata diya,
   burger sirf mobile par), is liye poori patti hi chhupa dete hain. */
.ds-topbar {
  position: sticky;
  top: 0;
  z-index: 890;
  display: none;
  align-items: center;
  gap: 16px;
  min-height: var(--ds-topbar-h);
  background: rgba(11, 11, 15, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--surface-border);
  padding: 16px 28px;
}

.ds-topbar h1 {
  flex: 1;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ds-burger {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
}

.ds-burger:hover { background: rgba(255, 255, 255, 0.08); }
.ds-burger svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }

.ds-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.ds-create {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 22px;
  border: none;
  border-radius: 100px;
  background: var(--accent-coral);
  color: #150800;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.ds-create:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ds-create svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; }

.ds-scrim {
  position: fixed;
  inset: 0;
  z-index: 990;
  background: rgba(6, 6, 9, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.ds-scrim.is-open { opacity: 1; visibility: visible; }

/* Sub-tab strip ab topbar ke neeche chipakti hai, page ke top par nahi */
.ds-shell-body .sub-bar { top: var(--ds-topbar-h); }

/* ---------- Drawer mode ---------- */
@media (max-width: 1000px) {
  .ds-shell { grid-template-columns: 1fr; }
  .ds-main { grid-column: 1; }
  /* Phone/tablet par topbar wapas, kyunki burger yahin rehta hai */
  .ds-shell-body { --ds-topbar-h: 84px; }
  .ds-topbar { display: flex; }
  .ds-burger { display: grid; }

  .ds-side {
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  }

  .ds-side.is-open { transform: none; }
}

@media (max-width: 700px) {
  .ds-shell-body { --ds-topbar-h: 68px; }
  .ds-topbar { padding: 12px 16px; gap: 8px; }
  .ds-topbar h1 { font-size: 19px; }
  .ds-create { padding: 11px 16px; font-size: 13.5px; }
  .ds-create svg { display: none; }
}

/* ============================================================
   SLIDE RAIL, sidebar khud khulti aur band hoti hai
   ------------------------------------------------------------
   Pehle sidebar hamesha 300px ghere rehti thi. Ab desktop par
   sirf icon wali patli patti dikhti hai. Maus us par jaate hi
   poori panel slide hokar khul jaati hai, aur maus hatate hi
   wapas simat jaati hai.

   Page ka content khiskta nahi: rail `position: fixed` hai aur
   grid mein jagah utni hi (patti jitni) reserved rehti hai,
   isliye khuli panel content ke upar aati hai.

   `hover: hover` ki shart: jin screens par maus hai hi nahi
   (touch wale bade screen), wahan panel pehle jaisi poori khuli
   rehti hai, warna naam kabhi dikhte hi nahi. 1000px se neeche
   pehle jaisa hi drawer + burger chalta hai.
   ============================================================ */
@media (min-width: 1001px) and (hover: hover) {
  .ds-shell-body { --ds-rail-w: 88px; }

  .ds-shell { grid-template-columns: var(--ds-rail-w) minmax(0, 1fr); }

  .ds-side {
    width: var(--ds-rail-w);
    overflow-x: hidden;
    transition: width var(--transition-normal), box-shadow var(--transition-normal);
  }

  /* Khuli haalat: maus upar ho, ya keyboard se andar koi cheez
     focus ho (Tab se chalne wale users ke liye zaroori). */
  .ds-side:is(:hover, :focus-within) {
    width: var(--ds-side-w);
    box-shadow: 26px 0 64px rgba(0, 0, 0, 0.55);
  }

  /* Link ka naam apna alag element nahi hai, seedha text hai,
     isliye use font-size: 0 se chhupate hain. Icon ki naap
     width/height se aati hai, font-size se nahi, to wo apni
     jagah waise ka waisa rehta hai, hilta bhi nahi. */
  .ds-side .ds-link   { font-size: 0; }
  .ds-side .ds-sub    { padding-left: 0; }
  .ds-side .ds-sub a  { font-size: 0; }
  .ds-side .ds-link .caret { display: none; }

  .ds-side:is(:hover, :focus-within) .ds-link  { font-size: 15.5px; }
  .ds-side:is(:hover, :focus-within) .ds-sub   { padding-left: 18px; }
  .ds-side:is(:hover, :focus-within) .ds-sub a { font-size: 14.5px; }
  .ds-side:is(:hover, :focus-within) .ds-link .caret { display: block; }

  /* Logo patti mein chhota, khulne par poora */
  .ds-side .logo-img { height: 26px; transition: height var(--transition-normal); }
  .ds-side:is(:hover, :focus-within) .logo-img { height: 40px; }

  /* Avatar ka dabba patti mein sirf gola reh jaata hai */
  .ds-side .ds-user {
    padding: 0;
    background: none;
    border-color: transparent;
    transition: padding var(--transition-normal),
                background var(--transition-normal),
                border-color var(--transition-normal);
  }
  .ds-side:is(:hover, :focus-within) .ds-user {
    padding: 16px;
    background: #101218;
    border-color: var(--surface-border);
  }

  /* Jo cheezein patti mein aa hi nahi sakti wo fade ho jaati
     hain. Inki jagah wahi rehti hai, isliye khulte waqt kuch
     upar-neeche nahi kudta. */
  .ds-side .ds-user-text,
  .ds-side .ds-side-foot {
    opacity: 0;
    transition: opacity var(--transition-fast);
  }
  .ds-side .ds-side-foot { pointer-events: none; }

  .ds-side:is(:hover, :focus-within) .ds-user-text { opacity: 1; }
  .ds-side:is(:hover, :focus-within) .ds-side-foot { opacity: 1; pointer-events: auto; }
}