/* Mobile responsive adjustments for Prophet Arena */

/* Status variables and smooth transitions */
:root {
  --status-ok-light: var(--bs-success);
  --status-warn-light: var(--bs-warning);
  --status-danger-light: var(--bs-danger);
  /* Slightly deeper tones for dark mode for contrast */
  --status-ok-dark: #157347;      /* close to Bootstrap success dark */
  --status-warn-dark: #b58100;    /* adjusted warning for dark bg */
  --status-danger-dark: #b02a37;  /* close to Bootstrap danger dark */
  --status-transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

@media (max-width: 576px) {
  /* Recovery badge collapsed by default */
  #recovery-badge { right: 0; top: 0; margin: 8px; padding: 6px; }
  #recovery-badge .rb-body { display: none; }
  #recovery-badge .rb-toggle { display: inline-block; }
  #recovery-badge .rb-time-mini { font-size: 0.75rem; opacity: 0.85; }
}

@media (orientation: landscape) and (max-height: 420px) {
  /* Keep badge minimal on short landscape screens */
  #recovery-badge { transform: scale(0.95); transform-origin: top right; }
}

/* High DPI touch devices: increase hit target */
@media (pointer: coarse) {
  #recovery-badge .rb-toggle { padding: 4px 6px; }
}

/* Touch-friendly buttons and loading/error states */
.btn.btn-sm { min-height: 34px; }
.btn-loading { position: relative; pointer-events: none; opacity: 0.8; }
.btn-loading::after { content: ''; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid rgba(0,0,0,0.2); border-top-color: rgba(0,0,0,0.6); border-radius: 50%; animation: spin 1s linear infinite; }
.btn-error { animation: shake 0.4s; }
@keyframes shake { 10%, 90% { transform: translateX(-1px);} 20%, 80% { transform: translateX(2px);} 30%, 50%, 70% { transform: translateX(-4px);} 40%, 60% { transform: translateX(4px);} }

/* Tooltip friendliness */
[data-bs-toggle="tooltip"] { cursor: help; }
.tooltip { pointer-events: none; }
.tooltip .tooltip-inner { background: rgba(0,0,0,0.9); color: #fff; font-size: 0.8rem; }
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { border-bottom-color: rgba(0,0,0,0.9); }
.tooltip.fade { transition: opacity .15s ease-in-out; }

/* Recovery badge status colors and mini time indicator */
.status-ok { background-color: var(--status-ok-light) !important; color: #fff !important; transition: var(--status-transition); }
.status-risk { background-color: var(--status-warn-light) !important; color: #000 !important; transition: var(--status-transition); }
.status-error { background-color: var(--status-danger-light) !important; color: #fff !important; transition: var(--status-transition); }
.rb-time-mini .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; vertical-align: middle; animation: pulse 1.8s ease-in-out infinite; }
.rb-time { font-variant-numeric: tabular-nums; }
@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(1); opacity: .6; } }

/* Touch feedback */
#recovery-badge .rb-toggle:active { transform: scale(0.98); opacity: 0.9; }

/* CSS aliases: map Bootstrap bg-* badges to status-*-like tokens */
.badge.bg-success { background-color: var(--status-ok-light) !important; color: #fff !important; transition: var(--status-transition); }
.badge.bg-warning { background-color: var(--status-warn-light) !important; color: #000 !important; transition: var(--status-transition); }
.badge.bg-danger { background-color: var(--status-danger-light) !important; color: #fff !important; transition: var(--status-transition); }

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .status-ok, .badge.bg-success { background-color: var(--status-ok-dark) !important; color: #fff !important; }
  .status-risk, .badge.bg-warning { background-color: var(--status-warn-dark) !important; color: #000 !important; }
  .status-error, .badge.bg-danger { background-color: var(--status-danger-dark) !important; color: #fff !important; }
}

/* Respect reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .tooltip.fade { transition: none !important; }
  .rb-time-mini .dot { animation: none !important; }
}


/* ===== Sprint 11: Critical mobile fixes (375px viewport) ===== */
/* Apply to all apps that link /shared-static/css/mobile.css */

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}
body {
    overflow-x: hidden;
    max-width: 100vw;
}
@media (max-width: 768px) {
    body { font-size: max(14px, 1rem); }
    /* Touch targets min 44px */
    button, .btn, a.btn, input[type="submit"], input[type="button"],
    .topbar-nav a, .topbar a, nav a, .nav-link {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Prevent horizontal scroll from fixed-width content */
    .container, main, .book-viewer, .calendar-container, .content-wrap {
        max-width: 100% !important;
        overflow-x: hidden;
    }
    /* Stack nav vertically when space is tight */
    .topbar, nav.topbar {
        flex-wrap: wrap;
    }
    .topbar-nav {
        width: 100%;
        order: 3;
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 375px) {
    body { font-size: 14px; }
}