/* =============================================================================
   MentoraPro — Premium Mobile UX Foundation
   Küresel tipografi, kaydırma, dokunma, yüzey ve geçiş sistemi.
   Parça parça yama yerine tüm paneller bu katmanı paylaşır.
   ============================================================================= */

:root {
    /* —— Akışkan tipografi ölçeği —— */
    --mp-fs-xs: clamp(0.68rem, 0.62rem + 0.28vw, 0.75rem);
    --mp-fs-sm: clamp(0.78rem, 0.72rem + 0.32vw, 0.875rem);
    --mp-fs-base: clamp(0.9rem, 0.84rem + 0.35vw, 1rem);
    --mp-fs-lg: clamp(1rem, 0.92rem + 0.45vw, 1.125rem);
    --mp-fs-xl: clamp(1.12rem, 1rem + 0.6vw, 1.35rem);
    --mp-fs-2xl: clamp(1.3rem, 1.08rem + 0.95vw, 1.65rem);
    --mp-fs-3xl: clamp(1.48rem, 1.18rem + 1.2vw, 2rem);

    /* —— Boşluk —— */
    --mp-gap-tight: clamp(0.35rem, 0.28rem + 0.35vw, 0.5rem);
    --mp-gap-normal: clamp(0.55rem, 0.42rem + 0.55vw, 0.85rem);
    --mp-gap-loose: clamp(0.85rem, 0.65rem + 0.85vw, 1.35rem);

    /* —— Premium yüzey —— */
    --mp-border-subtle: rgba(148, 163, 184, 0.22);
    --mp-border-strong: rgba(148, 163, 184, 0.35);
    --mp-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.05);
    --mp-shadow-card-hover: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);

    /* —— Hareket —— */
    --mp-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --mp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --mp-duration: 300ms;
    --mp-duration-fast: 180ms;

    /* —— Dokunma (≥44px) —— */
    --mp-touch: 2.75rem;
    --mp-touch-sm: 2.5rem;
}

/* —— Yatay taşma koruması —— */
html {
    overflow-x: hidden;
    max-width: 100%;
}

body.mp-app {
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
}

.mp-panel,
#student-panel,
#teacher-panel,
#rehberlik-panel {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    /* display:flex → HTML sınıflarından gelir; burada verilirse .hidden ezilir */
}

/* Tailwind .hidden'dan daha güçlü — panel çakışmasını önler */
#student-panel.hidden,
#teacher-panel.hidden,
#rehberlik-panel.hidden,
.mp-panel.hidden {
    display: none !important;
}

#login-screen {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

/* —— Ana kaydırma bölgeleri —— */
.mp-scroll-y,
#student-panel main,
#teacher-panel main,
#rehberlik-panel main {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    min-width: 0;
    min-height: 0;
    touch-action: pan-y;
}

.mp-scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
}

/* İç içe kaydırma: dış gövde sabit, içerik kayar */
.mp-scroll-lock {
    overflow: hidden !important;
    touch-action: none;
}

.mp-scroll-nested {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
    min-width: 0;
}

/* Panel içi genişlik sınırı */
#student-panel main > *,
#teacher-panel main > *,
#rehberlik-panel main > * {
    min-width: 0;
    max-width: 100%;
}

img, video, canvas, svg, iframe, table, pre {
    max-width: 100%;
}

/* —— Akışkan tipografi yardımcıları —— */
.mp-text-xs { font-size: var(--mp-fs-xs); line-height: 1.4; }
.mp-text-sm { font-size: var(--mp-fs-sm); line-height: 1.45; }
.mp-text-base { font-size: var(--mp-fs-base); line-height: 1.5; }
.mp-text-lg { font-size: var(--mp-fs-lg); line-height: 1.45; }
.mp-text-xl { font-size: var(--mp-fs-xl); line-height: 1.35; }
.mp-text-2xl { font-size: var(--mp-fs-2xl); line-height: 1.25; }
.mp-text-3xl { font-size: var(--mp-fs-3xl); line-height: 1.2; }

/* ===== Küresel tipografi standardı (tüm ekranlar) ===== */
#student-panel,
#teacher-panel,
#rehberlik-panel {
    font-family: 'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--mp-fs-base);
    line-height: 1.5;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tailwind mikro boyutları → akışkan ölçek (mobil + masaüstü) */
:is(#student-panel, #teacher-panel, #rehberlik-panel) :is(.text-\[8px\], .text-\[9px\]) {
    font-size: var(--mp-fs-xs) !important;
    line-height: 1.4 !important;
}
:is(#student-panel, #teacher-panel, #rehberlik-panel) :is(.text-\[10px\], .text-\[11px\], .text-xs) {
    font-size: var(--mp-fs-sm) !important;
    line-height: 1.45 !important;
}
:is(#student-panel, #teacher-panel, #rehberlik-panel) .text-sm {
    font-size: var(--mp-fs-base) !important;
    line-height: 1.5 !important;
}
:is(#student-panel, #teacher-panel, #rehberlik-panel) .text-base {
    font-size: var(--mp-fs-lg) !important;
    line-height: 1.45 !important;
}
:is(#student-panel, #teacher-panel, #rehberlik-panel) .text-lg {
    font-size: var(--mp-fs-xl) !important;
    line-height: 1.35 !important;
}
:is(#student-panel, #teacher-panel, #rehberlik-panel) :is(.text-xl, h3) {
    font-size: var(--mp-fs-2xl) !important;
    line-height: 1.25 !important;
}
:is(#student-panel, #teacher-panel, #rehberlik-panel) :is(h1, h2, .text-2xl, .text-3xl) {
    font-size: var(--mp-fs-3xl) !important;
    line-height: 1.2 !important;
}

/* Kart / kutu — taşma koruması */
:is(#student-panel, #teacher-panel, #rehberlik-panel) :is(
    .mp-card,
    .mp-surface,
    .sdet-card,
    .tdash-card,
    .rh-card,
    .s360-passport,
    .s-bento-card,
    .tsh-data-card,
    .mirror-pane
) {
    min-width: 0;
    max-width: 100%;
}

/* —— Akışkan kutu tipografisi (container query) —— */
.mp-fluid-tile,
.sdet-metric-tile,
.s360-kpi,
.tsh-module-kpi,
.tdash-weekly-metric-row > div {
    container-type: inline-size;
    container-name: mp-tile;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.mp-tile-label,
.sdet-metric-label,
.s360-kpi .lbl,
.tdash-weekly-metric-row .lbl {
    font-size: clamp(0.58rem, 7cqi, 0.72rem);
    line-height: 1.25;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.mp-tile-val,
.sdet-metric-val,
.s360-kpi .val,
.tsh-module-kpi strong,
.tsh-data-card-stat,
.tdash-weekly-metric-row .val {
    font-size: clamp(0.82rem, 12cqi, 1.05rem);
    line-height: 1.2;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    letter-spacing: -0.02em;
}

.mp-tile-sub,
.sdet-metric-sub,
.tdash-weekly-metric-row .lbl + .val {
    font-size: clamp(0.6rem, 6.5cqi, 0.75rem);
    line-height: 1.3;
    font-weight: 600;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-width: 100%;
}

.sdet-metric-trend {
    font-size: clamp(0.58rem, 6cqi, 0.7rem);
    line-height: 1.2;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* —— Premium kart / yüzey —— */
.mp-surface,
.mp-card {
    border: 1px solid var(--mp-border-subtle);
    border-radius: 1rem;
    box-shadow: var(--mp-shadow-card);
    background: #fff;
    transition:
        box-shadow var(--mp-duration) var(--mp-ease),
        border-color var(--mp-duration) var(--mp-ease),
        transform var(--mp-duration-fast) var(--mp-ease);
}

.mp-surface:active,
.mp-card:active {
    transform: scale(0.995);
}

/* —— Dokunma hedefi —— */
.mp-tap {
    min-height: var(--mp-touch);
    min-width: var(--mp-touch-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.mp-tap:active:not(:disabled) {
    transform: scale(0.96);
    transition: transform var(--mp-duration-fast) var(--mp-ease);
}

/* —— Mobil yığılma (flex-row → col) —— */
.mp-stack-mobile {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--mp-gap-normal);
}

/* —— Görünüm geçişleri —— */
@keyframes mpViewEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mpFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mpSheetUp {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.view-block:not(.hidden) {
    animation: mpViewEnter var(--mp-duration) var(--mp-ease-out) forwards;
}

[id$="-modal"]:not(.hidden):not(#login-screen) {
    animation: mpFadeIn var(--mp-duration) var(--mp-ease-out) forwards;
}

[id$="-modal"]:not(.hidden) > div.mp-modal-panel,
[id$="-modal"]:not(.hidden) > div.modal-grow {
    animation: mpSheetUp var(--mp-duration) var(--mp-ease-out) forwards;
}

/* Sidebar mobil kaydır */
#teacher-sidebar,
#rehberlik-sidebar {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* —— Genel aktif basma geri bildirimi —— */
@media (max-width: 767px) {
  button:active:not(:disabled):not(.no-mp-press):not(.s-bento-resize-handle),
  a[href]:active,
  [role="button"]:active:not(:disabled):not(.no-mp-press),
  [role="tab"]:active,
  .tdash-command-cell:active,
  .tdash-filter-chip:active,
  .tdash-nav-item:active {
      transform: scale(0.97);
      transition: transform var(--mp-duration-fast) var(--mp-ease);
  }

  /* Tipografi: Tailwind mikro sınıfları akışkana bağla */
  .text-\[8px\], .text-\[9px\] { font-size: var(--mp-fs-xs) !important; }
  .text-\[10px\], .text-\[11px\] { font-size: var(--mp-fs-sm) !important; }
  .text-xs { font-size: var(--mp-fs-sm) !important; }
  .text-sm { font-size: var(--mp-fs-base) !important; }
  .text-base { font-size: var(--mp-fs-lg) !important; }
  .text-lg { font-size: var(--mp-fs-xl) !important; }
  .text-xl { font-size: var(--mp-fs-2xl) !important; }
  h1, .text-2xl, .text-3xl { font-size: var(--mp-fs-3xl) !important; }
  h2 { font-size: var(--mp-fs-2xl) !important; }
  h3 { font-size: var(--mp-fs-xl) !important; }

  /* Mobil yığılma — yalnızca flex satırları (grid'e display:flex uygulanmaz) */
  .tdash-topbar,
  .mp-stack-mobile.flex,
  .mp-stack-mobile[class*="flex-row"] {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: var(--mp-gap-normal) !important;
  }

  /* Bento: dar gap, taşma yok (grid düzeni panel.css'te kalır) */
  .s-bento-mesh {
      gap: var(--mp-gap-normal) !important;
      overflow-x: hidden !important;
  }

  .s-bento-mesh > [data-widget] {
      min-width: 0 !important;
      max-width: 100% !important;
  }

  /* Premium kart gölgeleri — mobilde yumuşak */
  #teacher-panel .tdash-card,
  #teacher-panel .bg-white.border.rounded-3xl,
  #teacher-panel .bg-white.border.rounded-2xl,
  #student-panel .s-bento-card,
  #student-panel .s-bento-hero,
  #student-panel .wirebound-notepad,
  .sdet-card {
      border: 1px solid var(--mp-border-subtle) !important;
      box-shadow: var(--mp-shadow-card) !important;
  }

  /* Yatay taşma: tablo / geniş içerik sarmalayıcı */
  .mp-table-scroll,
  .sa-monitor-table-wrap,
  #student-detail-view .sdet-exam-list {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      max-width: 100%;
  }

  /* Modallar: alt sayfa hissi */
  .mp-modal-panel {
      transition: transform var(--mp-duration) var(--mp-ease-out);
  }

  /* Sidebar: mpSheetUp transform’u translateX çekmecesini bozuyordu — yok */
}

/* Tablet: orta gap */
@media (min-width: 768px) and (max-width: 1023px) {
  .tdash-context-row {
      gap: var(--mp-gap-loose) !important;
  }
}

/* Masaüstü: kart hover */
@media (min-width: 1024px) and (hover: hover) {
  .mp-card:hover,
  #teacher-panel .tdash-card:hover {
      box-shadow: var(--mp-shadow-card-hover);
      border-color: var(--mp-border-strong);
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .view-block:not(.hidden),
  [id$="-modal"]:not(.hidden),
  [id$="-modal"]:not(.hidden) > div,
  #teacher-sidebar.is-open,
  #rehberlik-sidebar.is-open {
      animation: none !important;
  }

  .mp-tap:active,
  button:active,
  .mp-card:active {
      transform: none !important;
  }
}