/* ============================================================
   Apple Polish Progressive Enhancement — Phase 2c (Track A)
   Loads AFTER apple-polish.css. Lights up the existing dashboard
   classes (.btn, .card, .toast, .modal, .tab-pill) with the new
   Apple aesthetic so the polish is visible without requiring any
   per-component opt-in.

   Design rule: NEVER break existing layout. Only override what is
   purely visual (background, border, shadow, transition). Spacing,
   sizing, and flow stay untouched.
   ============================================================ */

/* ── BUTTONS ─────────────────────────────────────────────────
   Existing .btn already has scale(0.97) on :active. Swap the
   easing curve for the iOS spring and lift on hover. */
.btn {
  transition: transform 160ms var(--apl-spring-snappy, cubic-bezier(0.34,1.56,0.64,1)),
              background 200ms var(--apl-ease-out, cubic-bezier(0.16,1,0.3,1)),
              border-color 200ms var(--apl-ease-out, cubic-bezier(0.16,1,0.3,1)),
              box-shadow 220ms var(--apl-ease-out, cubic-bezier(0.16,1,0.3,1)) !important;
}
.btn:hover {
  transform: translateY(-0.5px);
}
.btn:active {
  transform: scale(0.97);
}

/* Primary buttons get a subtle glow on hover */
.btn.btn-primary:hover,
.btn[class*="btn-primary"]:hover {
  box-shadow: 0 0 0 1px var(--accent-glow, rgba(47, 92, 168,0.20)),
              0 4px 14px -4px var(--accent-glow, rgba(47, 92, 168,0.30));
}

/* ── CARDS ─────────────────────────────────────────────────
   Add hover lift + glow border to surface that something is
   interactive. Glass refraction sheen added via ::before pseudo. */
.card {
  transition: transform 220ms var(--apl-ease-out, cubic-bezier(0.16,1,0.3,1)),
              border-color 220ms var(--apl-ease-out, cubic-bezier(0.16,1,0.3,1)),
              box-shadow 240ms var(--apl-ease-out, cubic-bezier(0.16,1,0.3,1));
}
.card:hover {
  border-color: var(--border-hover, rgba(63, 111, 187,0.22));
  box-shadow: 0 0 0 1px var(--lg-border-glow, rgba(47, 92, 168,0.20)),
              0 12px 28px -8px rgba(0,0,0,0.5);
}

/* Optional: opt-in interactive card hover-lift */
.card[data-clickable="true"]:hover,
.card.is-interactive:hover {
  transform: translateY(-2px);
}

/* ── TOAST ────────────────────────────────────────────────
   The dashboard's existing toast is solid black. Replace it
   with frosted glass so it matches the new aesthetic.
   We only override visual properties — position, slide-in
   animation, and width all stay the same. */
.toast {
  background: rgba(20, 9, 10, 0.72) !important;
  backdrop-filter: var(--lg-blur, saturate(180%) blur(18px));
  -webkit-backdrop-filter: var(--lg-blur, saturate(180%) blur(18px));
  border: 1px solid var(--lg-border, rgba(255,255,255,0.08)) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset,
              0 16px 32px -8px rgba(0,0,0,0.55) !important;
  font-family: var(--apl-font-sans);
  letter-spacing: -0.005em;
}
.toast::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lg-refraction,
    linear-gradient(135deg, rgba(255,255,255,0.10) 0%,
                            rgba(255,255,255,0.02) 30%,
                            rgba(255,255,255,0.00) 60%));
  pointer-events: none;
  border-radius: inherit;
}

/* Light theme toast gets the same treatment with a warmer tint */
[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(0,0,0,0.06) !important;
  color: #1a1a24;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset,
              0 12px 28px -8px rgba(0,0,0,0.15) !important;
}

/* ── MODALS — modal overlays already have backdrop-filter blur ─
   Just match the apple geometry (radius + shadow) */
.modal,
[class*="modal-content"],
[class*="modal-body"] {
  border-radius: 18px !important;
  box-shadow: var(--lg-shadow-2,
              0 1px 0 rgba(255,255,255,0.08) inset,
              0 16px 32px -8px rgba(0,0,0,0.55));
  font-family: var(--apl-font-sans);
}

/* ── TAB PILLS — sub-tabs that aren't the main hub tabs ─
   These are scattered all over Insta Studio, Vault, etc.
   Give them the segmented-control press feedback. */
.tab-pill,
[class*="tab-pill"]:not(.lg-glass-button) {
  transition: background 200ms var(--apl-ease-out, cubic-bezier(0.16,1,0.3,1)),
              color 200ms var(--apl-ease-out, cubic-bezier(0.16,1,0.3,1)),
              transform 140ms var(--apl-spring-snappy, cubic-bezier(0.34,1.56,0.64,1));
}
.tab-pill:active,
[class*="tab-pill"]:active {
  transform: scale(0.97);
}

/* ── SF Pro for everything by default ──────────────────────
   Body inherits the SF Pro stack. The original main.css already
   has -apple-system as the first fallback, so Apple devices
   were already getting it — we just hoist it to the variable
   so the whole dashboard tunes the same way. */
body {
  font-family: var(--apl-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01", "cv02";
  letter-spacing: -0.005em;
}

/* Respect reduced-motion: kill the spring transforms but keep
   the visual aesthetic */
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .tab-pill, [class*="tab-pill"] {
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease !important;
    transform: none !important;
  }
}


/* ============================================================
   VAULT FLOATING LAUNCHER (Phase A · sidebar 8→5 regroup)
   Demoted from the main sidebar. Sits in the top-right corner,
   liquid-glass pill with the vault graph icon. Stays out of the
   way until you reach for it.
   ============================================================ */

.vault-floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  background: var(--lg-tint, rgba(255,255,255,0.04));
  backdrop-filter: var(--lg-blur, saturate(180%) blur(18px));
  -webkit-backdrop-filter: var(--lg-blur, saturate(180%) blur(18px));
  border: 1px solid var(--lg-border, rgba(255,255,255,0.08));
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset,
              0 8px 20px -6px rgba(0,0,0,0.45);
  color: var(--text-secondary, #a3acbd);
  font: 600 12.5px/1 var(--apl-font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 160ms var(--apl-spring-snappy, cubic-bezier(0.34,1.56,0.64,1)),
              border-color 200ms var(--apl-ease-out, cubic-bezier(0.16,1,0.3,1)),
              color 200ms ease,
              box-shadow 220ms ease;
}
.vault-floating svg {
  width: 18px; height: 18px;
  color: var(--accent, #2f5ca8);
  flex-shrink: 0;
}
.vault-floating:hover {
  border-color: var(--lg-border-glow, rgba(47, 92, 168,0.20));
  color: var(--text-primary, #e8ebf2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset,
              0 10px 24px -6px rgba(0,0,0,0.5),
              0 0 0 1px var(--lg-border-glow, rgba(47, 92, 168,0.20));
}
.vault-floating:active { transform: scale(0.96); }

/* On the Vault page itself, hide the launcher so it doesn't compete
   with the page content. */
body:has(#page-vault-explorer.active) .vault-floating { display: none; }

/* Phone narrow: hide the label so the icon alone floats */
@media (max-width: 640px) {
  .vault-floating { padding: 9px 11px; }
  .vault-floating__label { display: none; }
}

/* Hide the now-redundant sidebar Vault item (Phase A demotion) */
.nav-item[data-page="vault-explorer"][hidden] { display: none !important; }

/* ============================================================
   İLETİŞİM INBOX — Phase C.2 (2026-05-29)
   Dedicated /page-inbox surface. Compact feed view, liquid-glass
   rows, type-colored avatars. Each row links to the existing
   page that already handles its type — discovery surface, not
   replacement.
   ============================================================ */

.inbox-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-family: var(--apl-font-sans);
}
.inbox-chip {
  appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lg-tint, rgba(255,255,255,0.04));
  border: 1px solid var(--lg-border, rgba(255,255,255,0.08));
  color: var(--text-secondary, #a3acbd);
  font: 600 12.5px/1 var(--apl-font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease,
              border-color 200ms ease, transform 140ms var(--apl-spring-snappy, cubic-bezier(0.34,1.56,0.64,1));
}
.inbox-chip:hover { color: var(--text-primary, #e8ebf2); }
.inbox-chip.is-active {
  background: var(--accent, #2f5ca8);
  color: #fff;
  border-color: var(--accent, #2f5ca8);
  box-shadow: 0 2px 8px -2px var(--accent-glow, rgba(47, 92, 168,0.30));
}
.inbox-chip__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.inbox-chip.is-active .inbox-chip__count {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

.inbox-list {
  display: flex; flex-direction: column;
  gap: 6px;
  font-family: var(--apl-font-sans);
}
.inbox-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, #69727f);
  border: 1px dashed var(--border, rgba(63, 111, 187,0.12));
  border-radius: 14px;
  background: var(--lg-tint, rgba(255,255,255,0.03));
}

.inbox-row {
  appearance: none; text-align: left; width: 100%;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-card, rgba(28,16,16,0.5));
  backdrop-filter: var(--lg-blur, saturate(180%) blur(18px));
  -webkit-backdrop-filter: var(--lg-blur, saturate(180%) blur(18px));
  border: 1px solid var(--border, rgba(63, 111, 187,0.12));
  color: var(--text-primary, #e8ebf2);
  cursor: pointer;
  transition: transform 200ms var(--apl-ease-out, cubic-bezier(0.16,1,0.3,1)),
              border-color 200ms ease,
              box-shadow 220ms ease;
  position: relative;
}
.inbox-row:hover {
  border-color: var(--border-hover, rgba(63, 111, 187,0.22));
  box-shadow: 0 0 0 1px var(--lg-border-glow, rgba(47, 92, 168,0.20)),
              0 6px 16px -8px rgba(0,0,0,0.45);
  transform: translateY(-1px);
}
.inbox-row:active { transform: scale(0.995); }

.inbox-row__avatar {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.inbox-row__avatar svg { width: 18px; height: 18px; }

.inbox-row__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.inbox-row__line1 {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.inbox-row__title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-primary, #e8ebf2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.inbox-row__type-chip {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
}
.inbox-row__snippet {
  font-size: 12px;
  color: var(--text-secondary, #a3acbd);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.inbox-row__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: var(--text-muted, #69727f);
  flex-wrap: wrap;
}
.inbox-row__meta > span:not(.inbox-row__priority):not(.inbox-row__when) {
  font-variant-numeric: tabular-nums;
}
.inbox-row__priority {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.inbox-row__priority.priority-high   { background: rgba(239,68,68,0.14);  color: #ef4444; }
.inbox-row__priority.priority-medium { background: rgba(47, 92, 168,0.14);  color: #2f5ca8; }
.inbox-row__priority.priority-low    { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.inbox-row__when { margin-left: auto; }

.inbox-row__dot {
  position: absolute;
  top: 14px; right: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent, #2f5ca8);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(47, 92, 168,0.20));
}
.inbox-row.is-unread { border-color: var(--lg-border-glow, rgba(47, 92, 168,0.20)); }