/**
 * Mobile Site Navigation - iOS Drill-Down Style
 * Navigation for site detail pages with back button
 * Uses CSS Variables from mobile-core.css
 */

/* ============================================
   ADMIN PAGE - HIDE DESKTOP ELEMENTS ON MOBILE
   ============================================ */

@media (max-width: 768px) {
  /* Hide Admin page header, info cards, and tabs on mobile */
  html body .admin-container > .page-header,
  html body .admin-info-container,
  html body .admin-container .tab-container {
    display: none;
  }

  /* Remove container padding on admin pages to match site pages */
  html body .container-limited-width {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================
   HIDE ON DESKTOP (default)
   ============================================ */

.mobile-site-nav {
  display: none;
}

/* Hide bottom sheets on desktop */
html body #statusOverlay,
html body #statusSheet,
html body #siteInfoOverlay,
html body #siteInfoSheet {
  display: none;
}

@media (max-width: 768px) {
  /* Allow bottom sheets on mobile */
  html body #statusOverlay,
  html body #siteInfoOverlay {
    display: block;
    opacity: 0;
    visibility: hidden;
  }

  html body #statusOverlay.visible,
  html body #siteInfoOverlay.visible {
    opacity: 1;
    visibility: visible;
  }

  html body #statusSheet,
  html body #siteInfoSheet {
    display: block;
  }
}

/* ============================================
   MOBILE SITE NAVIGATION
   ============================================ */

@media (max-width: 768px) {

  /* Hide desktop navigation elements */
  html body .tab-container,
  html body .site-content-container-two-columns .sidebar,
  html body .admin-content-container-two-columns .sidebar {
    display: none;
  }

  /* Hide content on mobile - only show navigation menu */
  html body .site-content-container.site-content-container-two-columns,
  html body .admin-content-container-two-columns {
    display: none;
  }

  /* Hide admin info cards on mobile */
  html body .admin-info-container,
  html body .page-header {
    display: none;
  }

  /* Hide admin tabs on mobile */
  html body .admin-content-container > .tab-container {
    display: none;
  }

  /* Admin content: hide ONLY when mobile navigation is present (sibling selector)
     This allows content to show on pages without navigation (users, etc.) */
  html body .admin-content-container > #mobileAdminNav ~ .card,
  html body .admin-content-container > #mobileAdminNav ~ .table-responsive,
  html body .admin-content-container > #mobileAdminNav ~ form,
  html body .admin-content-container > #mobileAdminNav ~ .admin-content-container {
    display: none;
  }

  /* Padding for admin content pages (users, hetzner-cloud, etc.) */
  html body .admin-content-container > .admin-content-container {
    padding: 0 var(--spacing-md);
  }

  /* Proper spacing for cards in admin content */
  html body .admin-content-container > .admin-content-container > .card {
    margin-top: var(--spacing-md);
  }

  /* ============================================
     MOBILE CONTENT VIEW (when section is selected)
     ============================================ */

  /* When viewing content: show desktop content wrapper */
  html body.mobile-show-content .desktop-content {
    display: block;
  }

  /* When viewing content: show content, hide navigation */
  html body.mobile-show-content .site-content-container.site-content-container-two-columns,
  html body.mobile-show-content .admin-content-container-two-columns {
    display: flex;
  }

  /* Show admin content when in content view */
  html body.mobile-show-content .admin-content-container > .card,
  html body.mobile-show-content .admin-content-container > .table-responsive,
  html body.mobile-show-content .admin-content-container > form {
    display: block;
  }

  html body.mobile-show-content .site-content-container-two-columns .right-pane,
  html body.mobile-show-content .admin-content-container-two-columns .right-pane {
    flex: 1;
    width: 100%;
    padding: 0;
  }

  html body.mobile-show-content .mobile-site-nav-card {
    display: none;
  }

  /* Keep domain label visible in content view */
  html body.mobile-show-content .mobile-site-nav-domain-label {
    display: block;
  }

  /* Hide site info cards in content view */
  html body.mobile-show-content .site-info-container {
    display: none;
  }

  /* ============================================
     MOBILE FORM STYLING (iOS-Style)
     ============================================ */

  /* Stack form columns vertically */
  html body.mobile-show-content .card-form .row {
    flex-direction: column;
    gap: 0;
  }

  html body.mobile-show-content .card-form .col-6,
  html body.mobile-show-content .card-form .col {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* Form inputs - ensure proper sizing */
  html body.mobile-show-content .card-form .form-control,
  html body.mobile-show-content .card-form .form-select {
    font-size: var(--font-size-md);
    min-height: var(--touch-target-lg);
  }

  /* Form labels */
  html body.mobile-show-content .card-form .col-form-label {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
  }

  /* Button row - stack vertically, Save first then Delete */
  html body.mobile-show-content .card-form .row:last-child {
    flex-direction: column;
    gap: 12px;
    margin-top: var(--spacing-sm);
  }

  html body.mobile-show-content .card-form .row:last-child .col {
    width: 100%;
    text-align: center;
    padding: 0;
  }

  /* Reorder: text-end (Save) first, text-start (Delete) second */
  html body.mobile-show-content .card-form .row:last-child .col.text-end {
    order: 1;
  }

  html body.mobile-show-content .card-form .row:last-child .col.text-start {
    order: 2;
  }

  /* Hide card header on mobile - redundant with domain label */
  html body.mobile-show-content .card > .card-header {
    display: none;
  }

  /* Card body adjustments */
  html body.mobile-show-content .card > .card-body {
    padding-top: 20px;
  }

  /* Helper text - more subtle */
  html body.mobile-show-content .form-text {
    font-size: var(--font-size-sm);
    color: var(--color-icon);
    margin-top: var(--spacing-sm);
  }

  /* Save button - full width, primary action */
  html body.mobile-show-content .card-form .btn-primary {
    width: 100%;
    min-height: var(--touch-target-lg);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-lg);
  }

  /* Delete button - text link style, outside card feel */
  html body.mobile-show-content .card-form .btn-danger,
  html body.mobile-show-content .card-form a.btn-danger {
    width: 100%;
    min-height: var(--touch-target-lg);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    background: transparent;
    border: none;
    color: #DC2626;
    margin-top: var(--spacing-md);
  }

  html body.mobile-show-content .card-form .btn-danger:hover,
  html body.mobile-show-content .card-form a.btn-danger:hover {
    background: rgba(220, 38, 38, 0.08);
  }

  html.dark body.mobile-show-content .card-form .btn-danger,
  html.dark body.mobile-show-content .card-form a.btn-danger {
    color: #EF4444;
  }

  html.dark body.mobile-show-content .card-form .btn-danger:hover,
  html.dark body.mobile-show-content .card-form a.btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
  }

  /* Button row spacing */
  html body.mobile-show-content .card-form .row:last-child {
    margin-top: var(--spacing-md);
    gap: 0;
  }

  /* ============================================
     NESTED CARD/TABLE FIX (Domain Aliases etc.)
     ============================================ */

  /* Remove nested card styling on mobile */
  html body.mobile-show-content .card-body > .card {
    border: none;
    background: transparent;
    box-shadow: none;
  }

  html body.mobile-show-content .card-body > .card > .card-body {
    padding: 0;
  }

  /* Table adjustments */
  html body.mobile-show-content .table {
    margin-bottom: 0;
    min-width: 0;
    width: 100%;
  }

  /* Force proper table display - override Bootstrap responsive tables */
  /* NOTE: !important is REQUIRED here because Bootstrap's .table-responsive uses
     !important to set display:block on table elements for mobile responsiveness.
     We need to override that to keep proper table structure. */
  html body.mobile-show-content table.table {
    display: table !important;
    table-layout: auto;
    width: 100%;
  }

  html body.mobile-show-content table.table thead {
    display: table-header-group !important;
  }

  html body.mobile-show-content table.table tbody {
    display: table-row-group !important;
  }

  html body.mobile-show-content table.table tr {
    display: table-row !important;
  }

  html body.mobile-show-content table.table th,
  html body.mobile-show-content table.table td {
    display: table-cell !important;
    padding: 14px var(--spacing-sm);
    vertical-align: middle;
  }

  html body.mobile-show-content table.table th:first-child,
  html body.mobile-show-content table.table td:first-child {
    padding-left: 0;
  }

  /* Action column - right aligned */
  /* NOTE: !important needed to override Bootstrap's text utilities */
  html body.mobile-show-content table.table td.text-end {
    text-align: right !important;
    padding-right: 0;
    white-space: nowrap;
  }

  /* Fix vertical alignment of table cell content */
  html body.mobile-show-content table.table td a.row-link {
    display: flex;
    align-items: center;
    min-height: var(--touch-target);
  }

  html body.mobile-show-content table.table td .btn-link-danger {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
  }

  /* ============================================
     TRAFFIC STATS CARDS - Keep in row on mobile
     ============================================ */

  /* Reset Bootstrap row negative margins */
  html body.mobile-show-content .row:has(> .col-md-4) {
    margin-left: 0;
    margin-right: 0;
  }

  html body.mobile-show-content .row > .col-md-4 {
    flex: 1 1 0;
    max-width: none;
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
  }

  html body.mobile-show-content .row > .col-md-4:first-child {
    padding-left: 0;
  }

  html body.mobile-show-content .row > .col-md-4:last-child {
    padding-right: 0;
  }

  /* Compact card styling for traffic stats */
  html body.mobile-show-content .col-md-4 .card .card-body {
    padding: 12px var(--spacing-sm);
  }

  html body.mobile-show-content .col-md-4 .card h6 {
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-xs);
  }

  html body.mobile-show-content .col-md-4 .card h3 {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
  }

  html body.mobile-show-content .table th:first-child,
  html body.mobile-show-content .table td:first-child {
    padding-left: 0;
  }

  html body.mobile-show-content .table th:last-child,
  html body.mobile-show-content .table td:last-child {
    padding-right: 0;
  }

  /* Mobile Site Navigation Container */
  .mobile-site-nav {
    display: block;
    margin-top: 20px;
    margin-bottom: var(--spacing-sm);
  }

  /* Navigation Group */
  .mobile-site-nav-group {
    margin-bottom: 20px;
  }

  .mobile-site-nav-group:last-child {
    margin-bottom: 0;
  }

  /* Group Label */
  .mobile-site-nav-group-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 var(--spacing-md) var(--spacing-sm) var(--spacing-md);
  }

  /* ============================================
     DOMAIN LABEL (simple text)
     ============================================ */

  .mobile-site-nav-domain-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 var(--spacing-md) 12px var(--spacing-md);
  }

  html.dark .mobile-site-nav-domain-label {
    margin-top: 2px;
  }

  /* Navigation Card */
  .mobile-site-nav-card {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    margin: 0 var(--spacing-md);
  }

  /* Navigation List */
  .mobile-site-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Section Divider inside card */
  .mobile-site-nav-section-divider {
    padding: 20px var(--spacing-md) var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background-color: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border-light);
  }

  /* Navigation Item */
  .mobile-site-nav-item {
    border-bottom: 1px solid var(--color-border-light);
  }

  .mobile-site-nav-item:last-child {
    border-bottom: none;
  }

  /* Navigation Link */
  .mobile-site-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--spacing-md);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-tight);
    background: transparent;
    transition: background-color var(--transition-fast);
    cursor: pointer;
    min-height: var(--touch-target-lg);
  }

  .mobile-site-nav-link:hover,
  .mobile-site-nav-link:active {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
    text-decoration: none;
  }

  /* Active state - current page */
  .mobile-site-nav-link.active {
    color: var(--color-link);
  }

  /* Navigation Icons (chevron) */
  .mobile-site-nav-icon {
    font-size: 14px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
  }

  .mobile-site-nav-link.active .mobile-site-nav-icon {
    color: var(--color-link);
  }

  /* ============================================
     DRILL-DOWN NAVIGATION VIEWS
     ============================================ */

  /* Main view - top level items */
  .mobile-site-nav-main {
    display: block;
  }

  /* Sub view - hidden by default */
  .mobile-site-nav-sub {
    display: none;
  }

  /* When in sub-menu state (via JS class) - only hide main, JS shows specific submenu via inline style */
  .mobile-site-nav.in-submenu .mobile-site-nav-main {
    display: none;
  }

  /* Submenus are shown via JavaScript inline style (display: block)
     This prevents showing ALL submenus at once */

  /* Sub-menu items - no indentation in drill-down */
  .mobile-site-nav-sub .mobile-site-nav-link {
    padding-left: var(--spacing-md);
  }

  /* ============================================
     HEADER BACK BUTTON (on site-* pages)
     ============================================ */

  /* Back button - always visible on site pages */
  .mobile-header-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: 22px;
    text-decoration: none;
  }

  .mobile-header-back:hover,
  .mobile-header-back:active {
    color: var(--color-text-muted);
    text-decoration: none;
  }

  /* Update header title when in submenu */
  body.site-nav-submenu .mobile-header-title {
    /* Title will be updated via JS */
  }

  /* ============================================
     STATUS BOTTOM SHEET OPTIONS
     Base styles are in mobile-core.css
     ============================================ */

  .status-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: var(--spacing-md) 20px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    min-height: 64px;
  }

  .status-option:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 54px;
    right: 20px;
    height: 0.5px;
    background-color: var(--color-separator-alpha);
  }

  .status-option:active {
    background-color: var(--color-hover);
  }

  /* Status Dot in Options */
  .status-option-dot {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }

  .status-option-dot.status-online {
    background-color: var(--color-success);
  }

  .status-option-dot.status-maintenance {
    background-color: var(--color-warning);
  }

  .status-option-dot.status-offline {
    background-color: var(--color-danger);
  }

  /* Status Option Info */
  .status-option-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .status-option-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
  }

  .status-option-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    letter-spacing: var(--letter-spacing-tight);
  }

  /* Checkmark (shown when active) */
  .status-option-check {
    font-size: 20px;
    color: var(--color-primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
  }

  .status-option.active .status-option-check {
    opacity: 1;
  }

  /* ============================================
     SITE INFO BOTTOM SHEET
     ============================================ */

  .info-list {
    padding: var(--spacing-sm) 0;
  }

  .info-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    position: relative;
    min-height: 50px;
  }

  .info-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 0.5px;
    background-color: var(--color-separator-alpha);
  }

  .info-label {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
  }

  .info-value {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    letter-spacing: var(--letter-spacing-tight);
    text-align: right;
  }

  /* Domain item - prominent styling */
  .info-item-domain {
    background-color: var(--color-bg-tertiary);
  }

  .info-value-domain {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
  }

}