/* ============================================================
   PORASHONA — Mobile & Touch Devices Optimization (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {
  /* 1. Global Page Visibility Priority */
  [data-page].page-hidden,
  .page-hidden {
    display: none !important;
  }

  /* 2. Viewport & Body */
  html, body {
    overflow-x: hidden;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  /* 3. Sleek Fixed Bottom Navigation Bar */
  .sidebar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 0 !important;
    padding: 4px 6px max(4px, env(safe-area-inset-bottom, 4px)) !important;
    background: var(--card-bg) !important;
    border-right: none !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    z-index: 1500 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
  }

  .sidebar .brand,
  .sidebar .side-tip {
    display: none !important;
  }

  .sidebar nav {
    display: flex !important;
    width: 100% !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 2px !important;
  }

  .sidebar nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 6px 1px !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    letter-spacing: -0.2px !important;
    line-height: 1 !important;
    color: var(--muted) !important;
    border-radius: 10px !important;
    flex: 1 !important;
    text-align: center !important;
    min-width: 0 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }

  .sidebar nav a span {
    font-size: 19px !important;
    width: auto !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1 !important;
  }

  .sidebar nav a.active {
    color: var(--purple) !important;
    font-weight: 700 !important;
    background: var(--purple-soft) !important;
  }

  .sidebar nav a.active:after {
    display: none !important;
  }

  /* 4. Main Content Spacing */
  main {
    margin: 0 !important;
    padding: 16px 14px 84px 14px !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* 5. Header Layout */
  header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 18px !important;
    gap: 10px !important;
  }

  header h1 {
    font-size: clamp(19px, 5.2vw, 24px) !important;
    line-height: 1.2 !important;
    margin: 2px 0 !important;
  }

  header .subtle {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  .icon-btn, .avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 12px !important;
  }

  .notification-panel {
    right: -40px !important;
    min-width: min(290px, calc(100vw - 32px)) !important;
  }

  /* 6. Dashboard Grid & Cards */
  .hero-grid:not(.page-hidden),
  .two-col:not(.page-hidden),
  .utility-grid:not(.page-hidden) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .focus-card {
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }

  .focus-card h2 {
    font-size: 20px !important;
    margin: 6px 0 3px !important;
  }

  .focus-card p {
    font-size: 13px !important;
  }

  .focus-bottom {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-top: 16px !important;
  }

  .focus-bottom > div {
    width: 100% !important;
  }

  .focus-bottom .dark-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
  }

  .streak-card {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
  }

  .streak-card p {
    font-size: 13px !important;
    margin: 0 !important;
  }

  .streak-card strong {
    font-size: 28px !important;
  }

  .mini-week {
    display: flex !important;
    gap: 4px !important;
  }

  .streak-card small {
    display: none !important;
  }

  /* 7. Metrics Cards */
  .metrics:not(.page-hidden) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  .metrics article {
    padding: 14px 16px !important;
    border-radius: 14px !important;
  }

  /* 8. Focus Room Timer & Countdown */
  .timer-card {
    padding: 18px 16px !important;
    border-radius: 16px !important;
    text-align: center !important;
  }

  .timer-card h2 {
    font-size: 20px !important;
  }

  .timer-face b {
    font-size: clamp(36px, 11vw, 44px) !important;
  }

  .timer-actions {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .timer-start, .timer-reset {
    flex: 1 !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .countdown-card {
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }

  .countdown-card h2 {
    font-size: 20px !important;
  }

  .date-btn {
    width: 100% !important;
    text-align: center !important;
    margin-top: 12px !important;
    padding: 12px !important;
  }

  /* 9. My Syllabus Subject Cards */
  .subject-grid:not(.page-hidden) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .subject {
    padding: 16px 16px !important;
    border-radius: 16px !important;
  }

  .subject h3 {
    font-size: 17.5px !important;
  }

  .subject p {
    font-size: 12.5px !important;
  }

  /* 10. Dedicated Subject Detail View */
  .subject-detail-view:not(.page-hidden) {
    display: block !important;
  }

  .subject-detail-topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .back-to-subjects-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
    font-size: 13.5px !important;
  }

  .subject-switcher-select {
    width: 100% !important;
    padding: 12px !important;
    font-size: 13.5px !important;
    text-align: center !important;
  }

  .matrix-card {
    border-radius: 16px !important;
    margin-bottom: 24px !important;
  }

  .matrix-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px 16px !important;
  }

  .matrix-card-title-group {
    gap: 12px !important;
  }

  .matrix-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    border-radius: 12px !important;
  }

  .matrix-subject-title {
    font-size: 19px !important;
  }

  .matrix-subject-meta {
    font-size: 12px !important;
  }

  .matrix-progress-widget {
    width: 100% !important;
    min-width: 0 !important;
  }

  .matrix-table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 0 10px !important;
    position: relative !important;
    border-radius: 12px !important;
    will-change: scroll-position !important;
    transform: translateZ(0) !important;
    contain: layout paint !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
  }

  .matrix-table {
    min-width: 740px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    transform: translateZ(0) !important;
  }

  .th-chapter, .td-chapter {
    min-width: 145px !important;
    max-width: 160px !important;
    padding: 10px 12px !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 20 !important;
    background: var(--card-bg) !important;
    border-right: 2px solid var(--line) !important;
    box-shadow: none !important;
  }

  .chapter-bn {
    font-size: 13px !important;
  }

  .chapter-en {
    font-size: 10.5px !important;
  }

  .th-progress, .td-progress {
    min-width: 85px !important;
    padding: 8px 8px !important;
  }

  .mini-prog-track {
    max-width: 40px !important;
  }

  .th-task {
    min-width: 105px !important;
    font-size: 9.5px !important;
    padding: 10px 6px !important;
  }

  .matrix-pill-btn {
    min-width: 70px !important;
    max-width: 95px !important;
    height: 38px !important;
    border-radius: 8px !important;
  }

  .pill-badge {
    width: 22px !important;
    height: 22px !important;
  }

  .pill-badge .badge-icon {
    font-size: 12px !important;
  }

  /* 11. Subject Detail Analytics */
  .subject-detail-analytics {
    margin-top: 24px !important;
  }

  .subject-detail-analytics .analytics-cards,
  .analytics-page:not(.page-hidden) .analytics-cards,
  .syllabus-summary-section .analytics-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .analytics-cards article {
    padding: 14px 12px !important;
    gap: 10px !important;
  }

  .analytics-cards article span {
    font-size: 20px !important;
  }

  .analytics-cards article b {
    font-size: 18px !important;
  }

  .analytics-cards article p {
    font-size: 11px !important;
  }

  .deep-analytics-grid:not(.page-hidden),
  .chart-grid:not(.page-hidden) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .pipeline-card, .priority-card, .growth-card, .chart-card, .session-history {
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }

  .growth-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .growth-metric-controls {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .growth-metrics-footer {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 12. Study Tasks Checklist */
  .task-panel, .plan-panel {
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }

  #taskForm {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 14px !important;
  }

  #taskInput {
    flex: 1 !important;
    height: 44px !important;
    font-size: 14px !important;
    padding: 0 14px !important;
  }

  #taskForm button {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
  }

  .task {
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
  }

  /* 13. Study Planner Board */
  .planner-intro {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 18px 16px !important;
  }

  .planner-controls {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .planner-tabs {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
  }

  .planner-tabs button {
    flex: 1 !important;
    text-align: center !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
  }

  .period-nav {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .period-nav b {
    min-width: 0 !important;
    font-size: 13px !important;
  }

  .planner-content {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 18px 16px !important;
  }

  .plan-form {
    padding: 16px !important;
    border-radius: 14px !important;
  }

  .plan-form input, .plan-form select {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 0 12px !important;
  }

  .plan-form button {
    min-height: 44px !important;
    font-size: 14px !important;
  }

  /* 14. Activity Logs Page */
  .logs-page:not(.page-hidden) {
    display: grid !important;
    gap: 16px !important;
  }

  .logs-header-card {
    padding: 18px 16px !important;
    border-radius: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .logs-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .log-filter-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
  }

  .log-filter-btn {
    flex-shrink: 0 !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
  }

  .log-search-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }

  .log-search-input {
    width: 100% !important;
    height: 42px !important;
    font-size: 13.5px !important;
    box-sizing: border-box !important;
  }

  .clear-logs-btn {
    width: 100% !important;
    padding: 10px !important;
    text-align: center !important;
  }

  .log-item {
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 12px !important;
  }

  .log-icon-badge {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }

  .log-title {
    font-size: 13px !important;
  }

  .log-detail {
    font-size: 12px !important;
  }

  /* 15. Responsive Modals */
  .modal-backdrop {
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  .date-modal, .profile-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 22px 18px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  .profile-fields {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .profile-fields input,
  .profile-fields select,
  .profile-submit-btn,
  .logout-btn {
    min-height: 44px !important;
    font-size: 14px !important;
  }

  /* 16. Auth Screen */
  .auth-screen {
    padding: 16px !important;
  }

  .auth-theme-toggle {
    top: 14px !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }

  .auth-card {
    width: 100% !important;
    padding: 26px 20px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  .auth-card input,
  .google-auth-btn,
  #authSubmit,
  .auth-switch {
    min-height: 44px !important;
    font-size: 14px !important;
  }

  /* 17. NUCLEAR page-hidden — covers every layout class that uses display */
  [data-page].page-hidden,
  section.page-hidden,
  .hero-grid.page-hidden,
  .metrics.page-hidden,
  .utility-grid.page-hidden,
  .section-head.page-hidden,
  .subject-grid.page-hidden,
  .syllabus-summary-section.page-hidden,
  .subject-detail-view.page-hidden,
  .two-col.page-hidden,
  .planner-board.page-hidden,
  .analytics-page.page-hidden,
  .logs-page.page-hidden,
  .admin-page.page-hidden,
  .page-hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
}