/*
 * Skilllok Mobile-First Foundation
 * Loaded after app.css. Targets:
 *   - Global iOS/Android safety (input zoom, tap highlight, safe-areas)
 *   - Mobile-only overrides under @media (max-width: 768px)
 *   - App-feel micro-interactions (active states)
 */

/* -- Global Safe-Area variables -------------------------------------- */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

/* -- iOS zoom-on-focus fix: never let inputs render below 16px ------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
    font-size: max(16px, 1rem);
}

/* -- Remove default tap highlight; we draw our own ------------------- */
* {
    -webkit-tap-highlight-color: transparent;
}

/* -- Brand-consistent text selection ---------------------------------- */
::selection {
    background: var(--color-primary-500, #0ea5e9);
    color: var(--color-on-primary, #ffffff);
}

/* -- App-feel active state on every interactive element ------------- */
@media (hover: none) and (pointer: coarse) {
    button:not(:disabled):active,
    a:not(.no-tap-fx):active,
    [role="button"]:not(:disabled):active,
    .btn:not(:disabled):active,
    .pm-card:active,
    .feedback-type:active {
        transform: scale(0.97);
        transition: transform 80ms ease-out;
    }
}

/* -- Subtle focus-visible ring (a11y) -------------------------------- */
:focus-visible {
    outline: 2px solid var(--color-primary-500, #0ea5e9);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ====================================================================
 * Mobile-only overrides
 * ==================================================================== */
@media (max-width: 768px) {

    /* -- Typography + spacing reset (M05) ---------------------------- */
    :root {
        --fs-h1: clamp(20px, 5.5vw, 24px);
        --fs-h2: 18px;
        --fs-h3: 16px;
        --fs-body: 15px;
        --fs-small: 13px;
        --space-page: 16px;
        --space-section: 20px;
        --radius-card: 12px;
    }

    body {
        font-size: var(--fs-body);
        line-height: 1.55;
        /* Reserve space for bottom-tab-bar when present (Phase C) */
        padding-bottom: calc(56px + var(--safe-bottom));
    }
    body.no-tab-bar {
        padding-bottom: var(--safe-bottom);
    }

    h1 { font-size: var(--fs-h1) !important; line-height: 1.25; }
    h2 { font-size: var(--fs-h2) !important; line-height: 1.3; }
    h3 { font-size: var(--fs-h3) !important; line-height: 1.35; }

    /* Tight container padding */
    main > div.p-4,
    main > div.md\:p-6,
    .container,
    .max-w-7xl {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Wiki content spacing */
    .wiki-content h2 + p,
    .wiki-content h3 + p { margin-top: 8px; }
    .wiki-content > * + * { margin-top: 12px; }
    .wiki-content code {
        font-size: 13px;
    }
    .wiki-content pre {
        font-size: 13px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* -- FAB Feedback-Button (M01): Icon-only, above tab-bar --------- */
    #feedback-btn-open {
        width: 56px !important;
        height: 56px !important;
        padding: 0 !important;
        bottom: calc(72px + var(--safe-bottom)) !important;
        right: 16px !important;
        gap: 0 !important;
        justify-content: center !important;
    }
    #feedback-btn-open .feedback-label {
        display: none !important;
    }
    #feedback-btn-open svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    /* When body has class .no-tab-bar (no Mobile tab-bar present), drop FAB lower */
    body.no-tab-bar #feedback-btn-open {
        bottom: calc(16px + var(--safe-bottom)) !important;
    }

    /* -- Wiki page header (M03) -------------------------------------- */
    .wiki-show-path,
    .wiki-show-version {
        display: none !important;
    }
    /* Star stays in mobile kebab; hide inline duplicate */
    .wiki-show-star.is-inline {
        display: none !important;
    }
    .wiki-show-status-badge {
        white-space: nowrap;
    }
    .wiki-show-tags {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 6px;
    }
    .wiki-show-tags::-webkit-scrollbar { display: none; }

    /* Header action buttons: 44x44 minimum tap target */
    .wiki-show-header button,
    .wiki-show-header a.btn,
    .wiki-show-header a[role="button"] {
        min-width: 44px;
        min-height: 44px;
    }

    /* -- Tables: scroll wrapper with shadow indicator (M02 fallback) - */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    }
    .table-wrapper.no-overflow {
        mask-image: none;
        -webkit-mask-image: none;
    }

    /* Stacked-card rendering for tables marked data-mobile="cards" (M02) */
    table[data-mobile="cards"] thead { display: none; }
    table[data-mobile="cards"],
    table[data-mobile="cards"] tbody,
    table[data-mobile="cards"] tr,
    table[data-mobile="cards"] td {
        display: block;
        width: 100%;
    }
    table[data-mobile="cards"] tr {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 12px;
        background: #ffffff;
    }
    .dark table[data-mobile="cards"] tr {
        border-color: #374151;
        background: #1f2937;
    }
    table[data-mobile="cards"] td {
        padding: 6px 0 !important;
        border: none !important;
    }
    table[data-mobile="cards"] td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        opacity: 0.6;
        margin-bottom: 2px;
        font-weight: 600;
    }

    /* -- Hide desktop sidebar collapse button on mobile -------------- */
    #sidebar-collapse-btn { display: none !important; }

    /* -- Super-admin banner: replaced by pill in header (Phase C) --- */
    .super-admin-banner-desktop { display: none !important; }
}

/* ====================================================================
 * Bottom Tab Bar (Phase C). CSS lives here so all mobile nav is colocated.
 * ==================================================================== */
.bottom-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    height: calc(56px + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: rgba(255, 255, 255, 0.92);
    border-top: 1px solid #e5e7eb;
    z-index: 9997;
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.dark .bottom-tab-bar {
    background: rgba(17, 24, 39, 0.92);
    border-top-color: #374151;
}
@media (max-width: 768px) {
    .bottom-tab-bar { display: grid; }
}
.bottom-tab-bar .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    padding: 6px 4px 4px;
}
.dark .bottom-tab-bar .tab { color: #9ca3af; }
.bottom-tab-bar .tab[aria-current="page"],
.bottom-tab-bar .tab.is-active {
    color: var(--color-primary-500, #0ea5e9);
}
.bottom-tab-bar .tab svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.75;
}
.tab-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
}
.dark .tab-badge { box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.92); }

/* ====================================================================
 * Mobile bottom-sheet (used by Drawer-as-Sheet, Search overlay)
 * ==================================================================== */
.mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}
.mobile-sheet-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.mobile-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 90vh;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    padding-bottom: var(--safe-bottom);
}
.dark .mobile-sheet { background: #1f2937; color: #f3f4f6; }
.mobile-sheet.is-open { transform: translateY(0); }
.mobile-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
    margin: 8px auto 4px;
    flex-shrink: 0;
}
.dark .mobile-sheet-handle { background: #4b5563; }
.mobile-sheet-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex: 1;
    padding: 8px 16px 16px;
}

/* ====================================================================
 * Skeleton screens (Phase G)
 * ==================================================================== */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton-line,
.skeleton-card {
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s linear infinite;
    border-radius: 6px;
}
.dark .skeleton-line,
.dark .skeleton-card {
    background: linear-gradient(90deg, #374151 0%, #4b5563 50%, #374151 100%);
    background-size: 800px 100%;
}
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-line.w-full { width: 100%; }
.skeleton-line.w-3-4 { width: 75%; }
.skeleton-line.w-1-2 { width: 50%; }
.skeleton-card { height: 80px; margin-bottom: 12px; border-radius: 12px; }

/* ====================================================================
 * Pull-to-refresh indicator (standalone PWA only)
 * ==================================================================== */
#sk-ptr {
    position: fixed;
    top: calc(8px + var(--safe-top));
    left: 50%;
    transform: translateY(-40px) rotate(0deg);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--color-primary-500, #0ea5e9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -18px;
    opacity: 0;
    z-index: 10001;
    pointer-events: none;
    will-change: transform, opacity;
}
.dark #sk-ptr {
    background: #1f2937;
}

/* ====================================================================
 * View-Transition fallback fade (Chromium only)
 * ==================================================================== */
@media (prefers-reduced-motion: no-preference) {
    @keyframes sk-fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes sk-fade-out { from { opacity: 1; } to { opacity: 0; } }
    ::view-transition-old(root) { animation: sk-fade-out 120ms ease both; }
    ::view-transition-new(root) { animation: sk-fade-in 180ms ease both; }
}

/* ====================================================================
 * Toasts (Skillog.toast)
 * ==================================================================== */
#sk-toasts {
    position: fixed;
    left: 50%;
    bottom: calc(80px + var(--safe-bottom));
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 32px);
}
.sk-toast {
    background: rgba(17, 24, 39, 0.94);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
}
.sk-toast.is-visible { opacity: 1; transform: translateY(0); }
.sk-toast-error { background: rgba(220, 38, 38, 0.96); }
@media (min-width: 769px) {
    #sk-toasts { bottom: 24px; }
}

/* ====================================================================
 * Interactive Markdown checklists (M04)
 * ==================================================================== */
.wiki-checklist-item {
    list-style: none;
    margin-left: -1.4em;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background-color 120ms ease;
}
.wiki-checklist-item input.wiki-checklist-checkbox {
    width: 22px;
    height: 22px;
    margin: 0 10px 0 0;
    cursor: pointer;
    vertical-align: middle;
    accent-color: var(--color-primary-500, #0ea5e9);
}
.wiki-checklist-item[data-checked="1"] {
    color: #6b7280;
}
.dark .wiki-checklist-item[data-checked="1"] { color: #9ca3af; }
.wiki-checklist-item[data-checked="1"] > * {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.wiki-checklist-item.is-locked {
    opacity: 0.7;
}
@media (max-width: 768px) {
    .wiki-checklist-item {
        padding: 10px 8px;
        min-height: 44px;
    }
    .wiki-checklist-item input.wiki-checklist-checkbox {
        width: 24px;
        height: 24px;
    }
}

/* ====================================================================
 * Super-admin pill (mobile replacement for the full-width banner)
 * ==================================================================== */
.super-admin-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #b91c1c;
    color: #fff;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.super-admin-pill:active { transform: scale(0.94); transition: transform 80ms ease-out; }

#super-admin-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
#super-admin-modal.is-open { display: flex; }
.super-admin-modal-panel {
    background: #fff;
    color: #111827;
    border-radius: 14px;
    padding: 18px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}
.dark .super-admin-modal-panel {
    background: #1f2937;
    color: #f3f4f6;
}

/* ====================================================================
 * PWA install hint banner (Phase A)
 * ==================================================================== */
#pwa-install-hint {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(72px + var(--safe-bottom));
    z-index: 9996;
    background: #ffffff;
    color: #111827;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 14px 14px 12px;
    display: none;
    transform: translateY(8px);
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
    border: 1px solid #e5e7eb;
}
.dark #pwa-install-hint {
    background: #1f2937;
    color: #f3f4f6;
    border-color: #374151;
}
#pwa-install-hint.is-visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
#pwa-install-hint .pih-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
#pwa-install-hint .pih-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-primary-500, #0ea5e9);
    color: var(--color-on-primary, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
}
#pwa-install-hint .pih-body { flex: 1; min-width: 0; }
#pwa-install-hint .pih-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}
#pwa-install-hint .pih-text {
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.85;
}
#pwa-install-hint .pih-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
#pwa-install-hint .pih-btn {
    flex: 1;
    height: 36px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
}
#pwa-install-hint .pih-btn-primary {
    background: var(--color-primary-500, #0ea5e9);
    color: var(--color-on-primary, #fff);
}
#pwa-install-hint .pih-btn-secondary {
    background: transparent;
    color: #6b7280;
}
.dark #pwa-install-hint .pih-btn-secondary { color: #9ca3af; }