/**
 * Main stylesheet for JamboQR Frontend
 */

/* ===== Base Styles ===== */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
}

/* ===== Typography ===== */

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-md);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
    margin-bottom: var(--space-md);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-hover);
}

/* ===== Buttons ===== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    color: white;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

.btn-secondary {
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-bg-hover);
}

.btn-danger {
    color: white;
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--color-danger-hover);
}

.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-lg);
}

/* ===== Form Controls ===== */

.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--space-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.form-control {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
    font-family: inherit;
    line-height: 1.5;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    padding-right: calc(var(--space-md) * 2 + 12px);
}

/* ===== Cards ===== */

.card {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border-primary);
    background-color: var(--color-bg-secondary);
}

.card-body {
    padding: var(--space-lg);
}

.card-footer {
    padding: var(--space-lg);
    border-top: 1px solid var(--color-border-primary);
    background-color: var(--color-bg-secondary);
}

/* ===== Container & Layout ===== */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--space-lg);
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--space-md) * -1);
}

.col {
    flex: 1;
    padding: 0 var(--space-md);
}

/* ===== Navigation ===== */


/* "Get the app" button in the top bar. Compact, and icon-only on narrow
   screens so it never pushes the brand or the hamburger out of the bar.
   Temporary: remove with js/components/apk-button.js once the app is on Play. */
.help-navbar-btn { margin-right: var(--space-sm); white-space: nowrap; }
@media (max-width: 480px) {
    .help-navbar-label { display: none; }
}
.apk-navbar-btn { margin-left: auto; margin-right: var(--space-sm); white-space: nowrap; }
@media (max-width: 480px) {
    .apk-navbar-label { display: none; }
}

.navbar {
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-primary);
    /* Top padding absorbs the status bar. From targetSdk 36 (Android 16) an app
       is drawn edge-to-edge and cannot opt out, so the WebView starts BEHIND the
       clock — without this the brand and the hamburger sit under it.
       env() resolves to 0 everywhere else (browsers, older Android), so the
       desktop and web layouts are untouched. Needs viewport-fit=cover on the
       viewport meta, or the inset is always reported as 0. */
    padding: calc(var(--space-md) + env(safe-area-inset-top, 0px)) 0 var(--space-md);
    box-shadow: var(--shadow-sm);
}

/* The navbar spans the full width (page content stays in the 1200px container)
   so the inline menu has room to lay out on one line on wide desktops. */
.navbar > .container { max-width: none; }

.navbar-brand {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    list-style: none;
}

.nav-link {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-text-primary);
}

.nav-link.active {
    color: var(--color-primary);
}

/* Icon affordances before each nav entry (kept in CSS so i18n's textContent
   re-renders never wipe them). Shown on desktop too: text + icon. */
.nav-link[data-route="/"]::before          { content: "🏠 "; }
.nav-link[data-route="/items"]::before     { content: "📦 "; }
.nav-link[data-route="/stores"]::before    { content: "🏪 "; }
.nav-link[data-route="/propanel"]::before  { content: "📊 "; }
.nav-link[data-route="/my-stores"]::before { content: "🏬 "; }
.nav-link[data-route="/profile"]::before   { content: "👤 "; }
.nav-link[data-route="/profile/public"]::before { content: "🌐 "; }
.nav-link[data-route="/settings"]::before  { content: "⚙️ "; }
.nav-link[data-route="/admin"]::before     { content: "🛡️ "; }
.nav-link[data-route="/login"]::before     { content: "🔑 "; }
.navbar-nav button[data-i18n="nav.logout"]::before { content: "🚪 "; }

/* Notification dropdown default width (overridden inside the mobile drawer). */
.notif-panel { width: 320px; }

/* Hamburger toggle — hidden on desktop, revealed in the drawer media query. */
.navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 9px;
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.navbar-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-text-primary);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}
/* Morph the three bars into an X while the drawer is open. */
.navbar-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggle.open span:nth-child(2) { opacity: 0; }
.navbar-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dimmed backdrop behind the open drawer. */
.navbar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 940;
    background: rgba(0, 0, 0, 0.45);
}
.navbar-backdrop.open { display: block; }

/* ===== Alert ===== */

.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    border: 1px solid transparent;
}

.alert-info {
    color: var(--color-info);
    background-color: var(--color-info-light);
    border-color: var(--color-info);
}

.alert-success {
    color: var(--color-secondary);
    background-color: var(--color-secondary-light);
    border-color: var(--color-secondary);
}

.alert-warning {
    color: var(--color-warning);
    background-color: var(--color-warning-light);
    border-color: var(--color-warning);
}

.alert-danger {
    color: var(--color-danger);
    background-color: var(--color-danger-light);
    border-color: var(--color-danger);
}

/* ===== Badge ===== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    border-radius: var(--radius-full);
}

.badge-primary {
    color: white;
    background-color: var(--color-primary);
}

.badge-secondary {
    color: var(--color-text-primary);
    background-color: var(--color-bg-tertiary);
}

.badge-success {
    color: white;
    background-color: var(--color-secondary);
}

.badge-danger {
    color: white;
    background-color: var(--color-danger);
}

.badge-warning {
    color: #1a1a1a;
    background-color: var(--color-warning, #f59e0b);
}

/* ===== Loading Spinner ===== */

.spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--color-border-primary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== Theme Toggle Button ===== */

.theme-toggle {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.theme-toggle:hover {
    background: var(--color-bg-hover);
    transform: translateY(-1px);
}

.theme-toggle .icon {
    font-size: var(--font-size-lg);
    margin-right: var(--space-xs);
}

/* ===== Utility Classes ===== */

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }

.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.w-full { width: 100%; }
.h-full { height: 100%; }

/* ===== Responsive ===== */

@media (max-width: 768px) {
    .container {
        padding: 0 var(--space-md);
    }

    .row {
        flex-direction: column;
    }

    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
    h3 { font-size: var(--font-size-xl); }
}

/* ===== Off-canvas drawer: everything up to 1320px =====
   The authenticated menu (~1225px of links) never fits the 1200px content
   container, so on phones, tablets (any orientation) and small/medium laptops
   it collapses into the hamburger drawer — making the browser look like the
   Capacitor app. Only genuinely wide desktops (>1320px) keep the inline menu,
   where the full-width navbar (below) gives it room. */
@media (max-width: 1320px) {
    .navbar-toggle { display: flex; }

    .navbar-nav {
        position: fixed;
        top: 0;
        right: 0;
        /* 100dvh y no 100vh: en Android de borde a borde, 100vh es la altura
           del hueco ENTERO, recortes incluidos, así que el cajón se extendía
           por debajo de las dos barras. dvh sigue al hueco visible —y también
           al teclado, que es la otra vez que esto se nota. */
        height: 100dvh;
        width: 80vw;
        min-width: 260px;
        max-width: 330px;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-md);
        /* Los recortes de pantalla, arriba y abajo.

           A partir de targetSdk 36 la aplicación se dibuja de borde a borde y
           no puede renunciar a ello, así que este cajón empieza DETRÁS del
           reloj y termina DETRÁS de la barra de gestos. Antes se apoyaba en que
           --space-3xl fuera mayor que la barra de estado, lo cual funcionaba
           por casualidad y no por diseño; y el borde inferior no contemplaba
           nada, de modo que la última opción del menú quedaba bajo la barra de
           gestos, que es justo donde un dedo no puede pulsarla.

           env() vale 0 en el navegador y en Android antiguos, así que la web y
           el escritorio no cambian. */
        padding: calc(var(--space-3xl) + env(safe-area-inset-top, 0px))
                 var(--space-lg)
                 calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
        background-color: var(--color-bg-primary);
        border-left: 1px solid var(--color-border-primary);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        transition: transform var(--transition-base);
        z-index: 950;
        overflow-y: auto;
    }
    .navbar-nav.open { transform: translateX(0); }

    .navbar-nav > li { width: 100%; }

    .nav-link {
        display: block;
        padding: var(--space-sm) 0;
        font-size: var(--font-size-lg);
    }

    /* The auth area is a horizontal d-flex on desktop — stack it in the drawer. */
    .navbar-nav .d-flex {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
        width: 100%;
    }
    /* Full-width Logout (direct child). */
    .navbar-nav .d-flex > .btn { width: 100%; justify-content: center; }

    /* The bell wrap spans the drawer so its dropdown can anchor to the full
       width, but the bell button itself stays a compact left-aligned icon. */
    .navbar-nav .notif-bell { align-self: stretch; width: 100%; text-align: left; }
    .navbar-nav .notif-bell > .btn { width: auto; }
    .navbar-nav .notif-panel {
        width: 100%;
        right: 0;
        left: auto;
        max-height: 60vh;
        overflow-y: auto;
    }
    /* Narrow panel: let the header wrap so "Mark all read" never clips. */
    .navbar-nav .notif-panel .notif-panel-head { flex-wrap: wrap; }

    /* Prevent body scroll-through while the drawer is open. */
    body.drawer-open { overflow: hidden; }
}