/*
 * app.css — shared layout styles for the captive portal.
 *
 * Extracted from the inline <style> block that used to live in
 * resources/views/layouts/app.blade.php. Linked from that layout via
 * <link rel="stylesheet" href="/css/app.css">.
 *
 * Draws the common "chrome": teal arc background, logo header, footer, and
 * the centred content column. Each page still adds its own page-specific CSS
 * through @push('styles') in its Blade file.
 *
 * NOTE: the success page (connected.blade.php) deliberately keeps its CSS
 * inline and does NOT use this file, because it renders during the brief gap
 * while the Omada gateway is opening the internet.
 */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
                 "Noto Sans JP", "Segoe UI", Meiryo, sans-serif;
    background: #ffffff;
    color: #1f2937;
    min-height: 100vh;
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
}

/* <x-app-background /> */
.bg { position: fixed; inset: 0; pointer-events: none; user-select: none; overflow: hidden; z-index: 0; }
.bg-tl { position: absolute; top: 0; left: 0; width: 320px; height: 320px; }
.bg-bl { position: absolute; bottom: 0; left: 0; width: 192px; height: 192px; }

/* <x-app-header /> */
.app-header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 16px;
    height: 80px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}
.app-header__inner {
    max-width: 384px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.app-header img { height: 56px; width: auto; object-fit: contain; }
.app-header__spacer { width: 40px; }

/* <x-app-footer /> */
.app-footer {
    border-top: 1px solid #e5e7eb;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.app-footer p { font-size: 12px; color: #9ca3af; margin: 0; }

/* Main content area */
.main { flex: 1; padding: 32px 16px; position: relative; z-index: 1; }
.wrap { max-width: 448px; margin: 0 auto; width: 100%; }