/* Phone/tablet presentation. Desktop layout remains in style.css. */
.mobile-header, .mobile-discord-invite, .mobile-cell-label, .mobile-hero-intro, .server-mobile-summary { display: none; }
body .mobile-nav-menu { display: none; }
.mobile-disclosure > summary { display: none; }
.mobile-table-scroll { max-width: 100%; overflow-x: auto; }

@media (max-width: 980px) {
    html { scroll-padding-top: 80px; }
    html.standalone-root { display: block; width: 100%; height: auto; min-height: 100%; }
    body.page-standalone { display: flex; flex-direction: column; justify-content: center; width: 100%; height: auto; min-height: 100vh; min-height: 100svh; padding: 20px 16px; overflow: visible; }
    body.page-standalone .container { width: 100%; max-width: 560px; padding: 24px 16px; }
    body.page-standalone .copyright { position: static; transform: none; padding: 20px 0 0; font-size: 12px; }
    body.page-standalone .discord-icon { display: none; }
    body.page-standalone .pg-404 { min-height: 0; padding: 0; }
    body { font-size: 16px; line-height: 1.55; }
    body *, body *::before, body *::after { box-sizing: border-box; }
    body img { max-width: 100%; }
    body :is(h1, h2, h3, p, td, code, .user-info, .package-left) { overflow-wrap: anywhere; }
    body :is(.container, .user-list-container, .profile-page-container, .page-container, .content-container) {
        width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 16px;
    }
    body :is(h1, .user-list-container h1) { font-size: clamp(1.65rem, 6vw, 2.1rem); line-height: 1.2; letter-spacing: 0; }
    body :is(h2, .sektion-titel) { font-size: 1.6rem; line-height: 1.25; letter-spacing: 0; }
    body .sektion-titel { text-align: left; margin: 0 0 22px; }
    body :is(h3, .profile-tab-pane h3) { font-size: 1.15rem; }
    body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
        min-width: 0; max-width: 100%; min-height: 46px; font-size: 16px !important;
    }
    body textarea { width: 100%; resize: vertical; }
    body :is(button, .button, .button-secondary, .button-danger, .back-link, .pagination a, summary) {
        min-height: 44px; touch-action: manipulation;
    }
    body :is(.button, .button-secondary, .button-danger) { padding: 11px 16px; line-height: 1.35; white-space: normal; }
    body :is(.button, .button-secondary, .server-kort, .user-card):hover { transform: none; }
    body :is(.top-info-banner, .corner-links, .main-nav, .hero-baggrund-video, .staff-baggrund-video) { display: none; }
    body > :is(.admin-bar, .language-switcher) { display: none; }
    body .global-flash { width: calc(100% - 24px); z-index: auto; margin: 12px; }
    body .global-flash-close { width: 44px; height: 44px; }

    /* One compact header with a complete, scrollable navigation panel. */
    body .mobile-header {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        position: sticky; top: 0; z-index: 4000; padding: 10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
        min-height: 68px; background: #171b18; border-bottom: 1px solid #344037;
    }
    body .mobile-brand { display: flex; gap: 8px; align-items: center; text-decoration: none; color: #f3f8f3; min-height: 44px; }
    body .mobile-brand img { width: 40px; height: 40px; object-fit: contain; }
    body .mobile-brand span { font-weight: 900; font-size: 14px; letter-spacing: .08em; line-height: 1.15; }
    body .mobile-brand small { display: block; font-size: 10px; color: #a9b9ac; letter-spacing: .2em; margin-top: 4px; }
    body .mobile-header-actions { display: flex; gap: 8px; align-items: center; }
    body .mobile-account-link { display: flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 700; color: #acf5b4; text-decoration: none; padding: 8px; }
    body .mobile-nav-toggle { display: flex; position: static; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #46554a; border-radius: 8px; color: #f3f8f3; background: #242d26; font: 700 13px Roboto, sans-serif; }
    body .hamburger-icon { width: 17px; height: 14px; }
    body .hamburger-icon .line { height: 2px; }
    body .mobile-nav-menu {
        display: none; inset: 0; width: 100%; height: 100%; height: 100dvh; overflow-y: auto;
        padding: max(20px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
        z-index: 4100; transform: none; transition: none; background: #171c18; backdrop-filter: none;
        overscroll-behavior: contain; align-items: stretch;
    }
    body .mobile-nav-menu.is-active { display: block; }
    body.mobile-menu-open { overflow: hidden; }
    body .mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
    body .mobile-menu-heading h2 { margin: 0; color: #fff; }
    body .mobile-menu-close { width: 44px; border: 1px solid #4a5b4e; border-radius: 8px; color: #fff; background: #242d26; font-size: 26px; cursor: pointer; }
    body .mobile-nav-menu :is(a, button:not(.mobile-menu-close), summary) { font-family: Roboto, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #edf4ee; }
    body .mobile-nav-menu a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; text-decoration: none; border-radius: 8px; }
    body .mobile-nav-menu a:hover { background: #29392d; }
    body .mobile-primary-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; text-align: left; }
    body .mobile-primary-links li { margin: 0; border: 1px solid #35453a; border-radius: 8px; }
    body :is(.mobile-account-section, .mobile-admin-section, .mobile-language-section) { margin-top: 24px; padding: 20px 0 0; border-top: 1px solid #35453a; }
    body .mobile-menu-label { color: #a6b4aa; font-size: 13px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .07em; }
    body .mobile-nav-menu .mobile-steam-login { margin-top: 24px; background: #32cd32; color: #101910; justify-content: center; }
    body .mobile-account-section button { background: transparent; border: 0; padding: 10px 12px; text-align: left; width: 100%; cursor: pointer; }
    body .mobile-admin-section summary { cursor: pointer; padding: 8px 0; color: #96e4a4; }
    body .mobile-nav-menu .admin-bar { display: block; position: static; padding: 8px 0; background: none; border: 0; }
    body .mobile-nav-menu .admin-bar-container { width: 100%; display: grid; grid-template-columns: 1fr; gap: 4px; }
    body .mobile-nav-menu .admin-label { display: none; }
    body .mobile-nav-menu .admin-link-disabled { opacity: .55; padding: 12px; }
    body .mobile-nav-menu .language-switcher { position: static; display: flex; gap: 12px; }
    body .mobile-nav-menu .language-switcher a { border: 1px solid #46554a; gap: 10px; min-width: 92px; justify-content: center; }
    body .mobile-nav-menu .language-switcher a::after { content: attr(title); font-size: 12px; }
    body .mobile-nav-menu .language-switcher img { width: 26px; opacity: 1; }

    /* A shorter home page, with optional details and no heavy background media. */
    body .hero { min-height: 0; height: auto; padding: 38px 0 30px; background: radial-gradient(ellipse at top right, #20432b, transparent 75%), #19201b; }
    body .hero::after { display: none; }
    body .hero .container { padding: 8px 20px; text-align: left; }
    body .hero-title { font-size: clamp(2rem, 9vw, 3.5rem); line-height: 1.05; margin: 0 0 18px; letter-spacing: -.02em; text-shadow: none; }
    body .hero-text { font-size: 16px; margin: 0; max-width: 520px; text-shadow: none; }
    body .hero-text p { margin: 0 0 8px; }
    body .hero .container:hover :is(.hero-title, .hero-text) { animation: none; transform: none; }
    body .hero-text > .bounce-on-hover { display: none; }
    body .mobile-hero-intro, body .server-mobile-summary { display: block; }
    body .server-description:has(details[open]) .server-mobile-summary { display: none; }
    body .hero-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
    body .hero-buttons .button-secondary { width: 100%; margin: 0; font-size: 14px; padding: 12px 8px; }
    body .hero-buttons .button-secondary:first-child { color: #132018; background: #32cd32; }
    body :is(.image-background-wrapper, .servers-sektion, .vip-sektion, .om-os-sektion, .staff-sektion, .discord-sektion) { padding: 0; background: #1a1f1b; }
    body :is(.vip-sektion, .staff-sektion) { background: #222923; border-block: 1px solid #344037; }
    body :is(.servers-sektion, .vip-sektion, .om-os-sektion, .staff-sektion, .discord-sektion) > .container { padding-block: 30px; }
    body .server-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
    body .server-kort { width: 100%; border-radius: 12px; background: #242c26; box-shadow: none; }
    body .server-banner { width: 100%; height: 112px; max-height: 112px; object-fit: contain; }
    body .server-kort:hover .server-banner { transform: none; }
    body .server-info { padding: 18px; }
    body .server-info h3 { margin: 0 0 8px; font-size: 1.2rem; }
    body .server-info p { font-size: 15px; margin: 0; }
    body .server-info .button-secondary { width: 100%; margin-top: 18px; }
    body .vip-indhold { text-align: left; }
    body .vip-indhold .button { width: 100%; text-align: center; }
    body .payment-icons { justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
    body .payment-icons img { max-width: 52px; max-height: 28px; }
    body .om-os-tekst { padding: 0; text-align: left; }
    body .mobile-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; color: #a4eab0; font-weight: 700; cursor: pointer; list-style: none; }
    body .mobile-disclosure > summary::-webkit-details-marker { display: none; }
    body .mobile-disclosure > summary::after { content: '+'; font-size: 24px; }
    body .mobile-disclosure[open] > summary::after { content: '−'; }
    body .mobile-disclosure-content { padding-top: 8px; }
    body .staff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    body .staff-medlem { padding: 16px 8px; margin: 0; min-width: 0; background: #19201b; border: 1px solid #344037; border-radius: 10px; }
    body .staff-avatar { width: 68px; height: 68px; margin: 0 auto 12px; }
    body .staff-avatar img { width: 68px; height: 68px; }
    body .staff-navn { margin: 0; }
    body .staff-rolle { font-size: 13px; margin: 6px 0 0; }
    body .discord-content { display: none; }
    body .mobile-discord-invite { display: block; }
    body .mobile-discord-invite .button { width: 100%; text-align: center; }
    body .fade-in-on-scroll { opacity: 1; transform: none; transition: none; }

    /* Profiles and administrative forms: one clear column, no fixed-width rows. */
    body :is(.profile-header, .user-info-box, .role-card, .connected-account-row) { flex-wrap: wrap; gap: 14px; }
    body .profile-header { padding: 18px; margin-bottom: 20px; }
    body .profile-avatar { width: 64px; height: 64px; flex: 0 0 64px; margin: 0; }
    body .profile-info { flex: 1 1 180px; min-width: 0; }
    body .profile-name-line { flex-wrap: wrap; gap: 8px; }
    body .profile-info h1 { font-size: 1.4rem; }
    body .profile-info p { font-size: 12px; }
    body .profile-header-actions { width: 100%; }
    body .profile-header-actions :is(button, .button) { width: 100%; margin: 0; }
    body .profile-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; border: 0; }
    body .profile-tab-button { padding: 12px 8px; font-size: 14px; border: 1px solid #45534a; border-radius: 7px; }
    body .profile-tab-button.active { background: #233f29; border-color: #32cd32; }
    body .profile-tab-pane { padding: 16px; }
    body :is(.package-row, .package-left) { flex-wrap: wrap; min-width: 0; gap: 10px; }
    body .package-row { padding: 14px 0; }
    body .reputation-section { padding: 18px; }
    body .reputation-header { flex-wrap: wrap; gap: 12px; }
    body .reputation-status { font-size: 1.2rem; }
    body .user-grid { grid-template-columns: 1fr; }
    body :is(.admin-section, .permission-editor-section, .assignment-section) { padding: 16px !important; margin-top: 18px; }
    body .user-list-container > h1 { text-align: left; margin: 0 0 18px; }
    body :is(.admin-form, .user-filters, .filter-form, .filters) { max-width: 100%; }
    body :is(.admin-form[style*="display: flex"], .user-filters, .user-filters .filter-group, .filter-form, .filters) { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 12px; }
    body .admin-form > div { min-width: 0; flex-basis: auto !important; }
    body .admin-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { width: 100%; padding: 12px; background: #1a1a1a; color: #eee; border: 1px solid #58625a; border-radius: 6px; }
    body .admin-form :is(input[type="checkbox"], input[type="radio"]) { width: 22px; height: 22px; }
    body .user-filters { margin-bottom: 20px; padding: 16px; }
    body .role-card { padding: 14px; }
    body .role-card .role-info { flex: 1 1 100%; }
    body .role-card :is(.button-secondary, .button-disabled) { width: 100%; text-align: center; }
    body :is(.role-policy-heading, .section-heading-row, .policy-save-bar) { flex-direction: column; align-items: stretch; gap: 16px; }
    body .policy-summary-card { align-self: flex-start; min-width: 105px; padding: 10px 14px; }
    body .permissions-grid { grid-template-columns: minmax(0, 1fr); padding: 8px; }
    body .permission-group > summary { flex-wrap: wrap; padding: 14px; }
    body .permission-search-label { min-width: 0; width: 100%; }
    body .permission-title-row { display: block; padding-right: 40px; }
    body .permission-title-row .risk-badge { display: inline-block; margin-top: 6px; }
    body .permission-help-button { width: 44px; height: 44px; top: 6px; right: 6px; font-size: 18px; }
    body .permission-checkbox .checkbox-content { padding-left: 42px; }
    body .permission-checkbox .checkbox-content::before { left: 12px; }
    body .permission-checkbox .checkbox-content::after { left: 17px; }
    body .policy-save-bar { position: static; padding: 16px; margin-top: 18px; }
    body .policy-save-bar > div { display: flex; flex-direction: column-reverse; }
    body .policy-save-bar a { text-align: center; }
    body .pagination { display: flex; flex-wrap: wrap; gap: 6px; }
    body .pagination :is(a, span) { padding: 10px 14px; margin: 0; }

    /* Tables keep their semantic headers while presenting records as cards. */
    body table { max-width: 100%; }
    body .mobile-card-table { display: block; width: 100% !important; min-width: 0 !important; border: 0; }
    body .mobile-card-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    body .mobile-card-table tbody { display: block; }
    body .mobile-card-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 12px; margin-bottom: 14px; border: 1px solid #465249; border-radius: 10px; background: #202622; }
    body .mobile-card-table tbody td { display: block; width: auto !important; min-width: 0; padding: 8px 0; text-align: left; white-space: normal !important; border: 0; word-break: normal; }
    body .mobile-cell-label { display: block; color: #a8bbac; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
    body .mobile-card-table td :is(a, button) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
    body .mobile-card-table :is(pre, code) { max-width: 100%; white-space: pre-wrap; word-break: break-word; }
    body .mobile-card-table :is(.actions, .action-buttons) { display: flex; flex-wrap: wrap; gap: 8px; }
    body .log-entry { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
    body .log-entry > * { width: auto; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

    /* Dialogs stay inside the viewport, including with the on-screen keyboard. */
    body :is(.modal, .vip-modal, .discord-modal) { padding: 12px; }
    body :is(.modal-content, .shop-content) { width: 100%; max-width: 600px; min-width: 0; padding: 24px 16px; max-height: calc(100dvh - 24px); overflow-y: auto; border-radius: 12px; }
    body :is(.modal-close, .shop-close-btn) { width: 44px; height: 44px; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; }
    body :is(.modal-content, .shop-content) > h2 { padding-right: 36px; font-size: 1.5rem; }
    body .modal-steps { flex-direction: column; gap: 16px; }
    body .modal-step { min-width: 0; }
    body .modal-connect-input { width: 100%; }
    body .shop-server-selection { display: flex; flex-wrap: wrap; gap: 8px; }
    body .shop-server-option { flex: 1 1 120px; min-width: 0; padding: 10px; }
    body .shop-server-logo { width: 32px; height: 32px; }
    body .shop-server-name { font-size: 13px; }
    body .shop-packages-container.active { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
    body .shop-package-card { min-width: 0; width: 100%; padding: 16px; }
    body .shop-package-header { padding: 0; flex-wrap: wrap; }
    body .shop-package-price { font-size: 1.4rem; }
    body .shop-package-body { padding: 12px 0; margin-bottom: 8px; }
    body .shop-package-card:not(.features-expanded) .feature-hidden { display: none; }
    body .shop-package-card.features-expanded .feature-hidden { max-height: none; }
    body .shop-buy-button { min-height: 44px; }
    body .toggle-features-btn { min-height: 44px; padding: 10px 0; }
    body .cron-run-card { flex-direction: column; align-items: stretch; gap: 12px; }
    body .side-fod { padding: 24px 16px; font-size: 12px; }
    body .footer-links { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    body .footer-links > span { display: none; }
    body .footer-links a { display: flex; align-items: center; min-height: 44px; }
    body .bl-wrap { padding: 24px 16px; }
    body .bl-hero { padding: 20px 16px; }
    body .bl-hero-title { font-size: 1.7rem; }
    body .bl-hero-logo { max-width: 120px; }
    body :is(.legal-content, .page-content, .bl-panel) { padding: 18px; }
}

@media (max-width: 360px) {
    body .mobile-brand img { width: 32px; height: 32px; }
    body .mobile-brand span { font-size: 12px; }
    body .mobile-account-link { padding: 4px; font-size: 12px; }
    body .mobile-header-actions { gap: 4px; }
    body .mobile-nav-toggle { padding: 10px 8px; }
}