/*
 * Moko Consulting — Mobile Responsive Overrides
 * Enhances Gitea's default responsive behavior for better
 * usability on phones and tablets.
 */

/* ═══════════════════════════════════════════════
   Tablet & below (≤ 992px)
   ═══════════════════════════════════════════════ */
@media screen and (max-width: 992px) {
  /* Reduce container padding */
  .ui.container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Stack repo header metadata */
  .repo-header .repo-header-meta {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Stack action buttons in repo header */
  .repo-buttons {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  /* Make file tree scroll horizontally */
  .repo-file-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Side-by-side diff → unified on tablet */
  .diff-file-box .diff-file-body .file-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Stack issue/PR sidebar below content */
  .issue-content-right {
    width: 100% !important;
    padding-left: 0 !important;
    margin-top: 1rem;
  }

  /* Footer: stack columns */
  .page-footer {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
    padding: 1rem;
  }

  .page-footer .left-links,
  .page-footer .right-links {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ═══════════════════════════════════════════════
   Phone (≤ 768px)
   ═══════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
  /* ── Navbar ──────────────────────────────────── */
  #navbar {
    padding: 0.25rem 0.5rem;
  }

  #navbar .navbar-left,
  #navbar .navbar-right {
    gap: 0.25rem;
  }

  /* Larger touch targets for navbar items */
  #navbar .item {
    padding: 0.6rem 0.5rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Mobile expanded menu styling */
  #navbar .navbar-collapse {
    background-color: #001B4C;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  #navbar .navbar-collapse .item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* ── Search bar ──────────────────────────────── */
  #navbar .ui.search {
    width: 100%;
  }

  #navbar .ui.search input {
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  /* ── Content area ────────────────────────────── */
  .ui.container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .page-content {
    padding-top: 0.75rem;
    padding-bottom: 1rem;
  }

  /* ── Repository list ─────────────────────────── */
  .ui.repository.list .item {
    padding: 0.75rem 0;
  }

  .ui.repository.list .item .header {
    font-size: 1rem;
    word-break: break-word;
  }

  .ui.repository.list .item .description {
    font-size: 0.85rem;
  }

  /* Repo topic tags: wrap properly */
  .ui.repository.list .item .topic-tags {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  /* ── Repo file browser ───────────────────────── */
  .repo-file-table td {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
  }

  /* Truncate long filenames */
  .repo-file-table td.name {
    max-width: 55vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Commit message column: hide on narrow screens */
  .repo-file-table td.message {
    display: none;
  }

  /* Age column: abbreviate */
  .repo-file-table td.age {
    white-space: nowrap;
    font-size: 0.8rem;
  }

  /* ── Code view ───────────────────────────────── */
  .code-view,
  .file-view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .code-view td.lines-code pre,
  .file-view pre {
    font-size: 0.8rem;
    tab-size: 4;
  }

  /* Line numbers: tighter */
  .code-view td.lines-num {
    padding: 0 0.3rem;
    min-width: 2.5rem;
  }

  /* ── Diff view ───────────────────────────────── */
  .diff-file-box .diff-file-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    font-size: 0.85rem;
  }

  .diff-file-box .diff-file-header .file {
    word-break: break-all;
  }

  .diff-file-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Issues / PRs list ───────────────────────── */
  .issue.list > .item {
    padding: 0.6rem 0;
  }

  .issue.list > .item .title {
    font-size: 0.95rem;
  }

  .issue.list > .item .labels-list {
    flex-wrap: wrap;
    gap: 0.2rem;
  }

  /* ── Issue detail page ───────────────────────── */
  .issue-content-left {
    width: 100% !important;
  }

  .comment .content {
    padding: 0.75rem;
  }

  .timeline-item .comment-header {
    flex-wrap: wrap;
    font-size: 0.85rem;
  }

  /* ── Buttons ─────────────────────────────────── */
  .ui.button {
    min-height: 44px;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }

  .ui.mini.button,
  .ui.tiny.button {
    min-height: 36px;
    padding: 0.4rem 0.7rem;
  }

  /* Button groups: wrap instead of overflow */
  .ui.buttons {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  /* ── Forms ───────────────────────────────────── */
  .ui.form input[type="text"],
  .ui.form input[type="password"],
  .ui.form input[type="email"],
  .ui.form input[type="url"],
  .ui.form textarea,
  .ui.form select {
    font-size: 16px; /* prevents iOS auto-zoom */
    padding: 0.6rem 0.75rem;
  }

  .ui.form .field > label {
    font-size: 0.9rem;
  }

  /* ── Pagination ──────────────────────────────── */
  .ui.pagination.menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem;
  }

  .ui.pagination.menu .item {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    font-size: 0.9rem;
  }

  /* ── Tabs (repo tabs, settings tabs) ─────────── */
  .ui.secondary.pointing.menu {
    flex-wrap: wrap;
    gap: 0;
  }

  .ui.secondary.pointing.menu .item {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
  }

  /* ── Dropdown menus ──────────────────────────── */
  .ui.dropdown .menu {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ui.dropdown .menu .item {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.9rem;
  }

  /* ── Tables (admin, org, etc.) ───────────────── */
  .ui.table:not(.repo-file-table) {
    font-size: 0.85rem;
  }

  .ui.table:not(.repo-file-table) td,
  .ui.table:not(.repo-file-table) th {
    padding: 0.5rem;
  }

  /* ── Markdown content ────────────────────────── */
  .markdown img {
    max-width: 100%;
    height: auto;
  }

  .markdown pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.8rem;
    padding: 0.75rem;
  }

  .markdown table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .markdown h1 { font-size: 1.5rem; }
  .markdown h2 { font-size: 1.3rem; }
  .markdown h3 { font-size: 1.15rem; }

  /* ── Modals ──────────────────────────────────── */
  .ui.modal {
    width: 95% !important;
    margin: 0.5rem auto !important;
  }

  .ui.modal > .content {
    padding: 1rem;
  }

  /* ── Labels / topics ─────────────────────────── */
  .ui.label {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
  }

  /* ── User / org cards ────────────────────────── */
  .ui.cards > .card {
    width: 100% !important;
  }

  /* ── Commit list ─────────────────────────────── */
  .commits-table td.sha {
    font-size: 0.75rem;
  }

  .commits-table td.message {
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════
   Small phone (≤ 480px)
   ═══════════════════════════════════════════════ */
@media screen and (max-width: 480px) {
  /* Even tighter padding */
  .ui.container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Stack repo action buttons vertically */
  .repo-buttons {
    flex-direction: column;
    width: 100%;
  }

  .repo-buttons .ui.button {
    width: 100%;
    justify-content: center;
  }

  /* Repo breadcrumb: allow wrapping */
  .breadcrumb {
    flex-wrap: wrap;
    word-break: break-word;
  }

  /* Hide less-important table columns */
  .repo-file-table td.age {
    display: none;
  }

  /* Simplify file header on diff */
  .diff-file-box .diff-file-header .file {
    font-size: 0.8rem;
  }

  /* Pagination: fewer visible pages */
  .ui.pagination.menu .item {
    min-width: 36px;
    min-height: 36px;
    font-size: 0.8rem;
  }

  /* Sign-in form: full width */
  .page-content.user.signin .ui.form {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem;
  }

  /* Error pages */
  .moko-error-page {
    padding: 1.5rem 1rem;
  }

  .moko-error-code {
    font-size: 4rem;
  }

  .moko-error-title {
    font-size: 1.2rem;
  }

  .moko-error-logo img {
    width: 150px;
  }
}

/* ═══════════════════════════════════════════════
   Touch-friendly universal improvements
   ═══════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Ensure minimum touch target size (44x44px per Apple HIG) */
  a, button, .item, .ui.button, [role="button"] {
    min-height: 44px;
  }

  /* Disable hover-only interactions */
  .ui.dropdown:hover > .menu {
    display: none;
  }

  .ui.dropdown.active > .menu,
  .ui.dropdown.visible > .menu {
    display: block;
  }

  /* Smoother scrolling */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent text selection on double-tap */
  .ui.button,
  .ui.menu .item {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Larger checkbox/radio targets */
  .ui.checkbox input[type="checkbox"],
  .ui.checkbox input[type="radio"] {
    width: 20px;
    height: 20px;
  }

  .ui.checkbox label {
    padding-left: 1.75rem;
  }
}

/* ═══════════════════════════════════════════════
   Landscape phone adjustments
   ═══════════════════════════════════════════════ */
@media screen and (max-height: 500px) and (orientation: landscape) {
  /* Reduce navbar height in landscape */
  #navbar .item {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    min-height: 36px;
  }

  /* Compact footer */
  .page-footer {
    padding: 0.5rem;
    font-size: 0.75rem;
  }
}