/**
 * more-menu.css — Stiluri dedicate pentru pagina "Mai multe" (F0.2 - meniu nativ de aplicație)
 */

/* Fundal specific pentru meniu nativ (folosim `background` pentru a suprascrie var(--bg-gradient)) */
body.more-page {
    background: #f2f2f7 !important;
}

body.more-page main.more-app-menu-container {
    max-width: 680px;
    margin: 0 auto;
    /* Headerul participă deja la fluxul paginii. Păstrăm același ritm de
       12px folosit de toate suprafețele publice secundare. */
    padding-top: 12px !important;
    padding-bottom: 85px !important;
}

/* La 768px Bootstrap oferă un container de 720px, iar limita istorică de
   680px făcea cardurile cu 40px mai late decât headerul și feedul public.
   Păstrăm lățimea desktop, dar pe tabletă urmăm aceeași coloană de 640px. */
@media (max-width: 991.98px) {
    body.more-page main.more-app-menu-container {
        /* body-ul shellului touch lasă deja 11px sub headerul fix. */
        padding-top: 1px !important;
    }

    body.more-page main.more-app-menu-container {
        max-width: 640px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    body.more-page main.more-app-menu-container {
        max-width: 540px;
    }
}

/* Secțiuni & Grupuri de meniu */
.app-menu-group {
    margin-bottom: 1.5rem;
}

.app-menu-group-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-left: 0.75rem;
    margin-bottom: 0.5rem;
}

.app-menu-group-note {
    font-size: 0.78125rem;
    color: #64748b;
    margin-top: 0.5rem;
    margin-left: 0.75rem;
    margin-bottom: 0;
    line-height: 1.4;
}

.app-menu-card {
    background: #ffffff;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
}

.app-feedback-card {
    border: 1px solid rgba(99, 102, 241, 0.13);
    background: linear-gradient(135deg, #ffffff 0%, #f7f5ff 58%, #eef6ff 100%);
}

.app-feedback-card .app-menu-row {
    min-height: 78px;
}

.app-feedback-card .app-menu-label {
    color: #332a70;
    font-weight: 750;
}

.app-feedback-card .app-menu-sublabel {
    max-width: 470px;
    color: #625d78;
    line-height: 1.4;
}

.app-feedback-card .app-menu-action {
    color: #6254df;
}

/* Rând individual de meniu */
.app-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    color: var(--bs-body-color, #1e293b);
    text-decoration: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: transparent;
    transition: background-color 0.15s ease;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    width: 100%;
    text-align: left;
}

.app-menu-row:last-child {
    border-bottom: none;
}

.app-menu-row:hover,
.app-menu-row:focus-visible {
    background-color: var(--bs-tertiary-bg, rgba(248, 250, 252, 0.8));
    color: var(--bs-body-color, #0f172a);
}

.app-menu-row:active {
    background-color: rgba(226, 232, 240, 0.6);
}

.app-menu-row[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
    background-color: transparent;
}

/* Icon tile */
.app-menu-tile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 0.875rem;
    font-size: 1.1rem;
}

.app-menu-tile i {
    width: 18px;
    height: 18px;
    stroke-width: 2.2px;
}

/* Text */
.app-menu-content {
    flex-grow: 1;
    min-width: 0;
}

.app-menu-label {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--bs-body-color, #0f172a);
}

.app-menu-sublabel {
    display: block;
    font-size: 0.78125rem;
    color: #64748b;
    margin-top: 0.15rem;
    line-height: 1.3;
}

.app-menu-note {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 0.2rem;
}

/* Acțiuni (Chevron, Badge, Switch) */
.app-menu-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: 0.5rem;
    color: #94a3b8;
}

.app-menu-action i {
    width: 18px;
    height: 18px;
    stroke-width: 2.2px;
}

.app-menu-badge-soon {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    background-color: #f1f5f9;
    color: #64748b;
}

/* Cont și comunicări: emailul are voie să se scurteze, acțiunile nu.
   Deconectarea nu mai concurează ca buton text cu adresa pe telefoane mici. */
.app-account-summary {
    min-width: 0;
}

.app-account-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-account-logout {
    border: 0;
    font: inherit;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin-left: 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(225, 29, 72, 0.22);
    border-radius: 10px;
    background: rgba(244, 63, 94, 0.08);
    color: #e11d48;
    text-decoration: none;
}

.app-account-logout:hover,
.app-account-logout:focus-visible {
    border-color: rgba(225, 29, 72, 0.35);
    background: rgba(244, 63, 94, 0.14);
    color: #be123c;
}

.app-account-logout:focus-visible {
    outline: 3px solid rgba(244, 63, 94, 0.18);
    outline-offset: 2px;
}

.app-account-logout .lucide,
.app-account-logout svg {
    width: 17px;
    height: 17px;
}

.app-account-newsletter label {
    cursor: pointer;
}

/* Comutator modern stil iOS/App pentru newsletter */
.app-modern-switch {
    width: 36px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #cbd5e1 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 999px !important;
    position: relative !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
    outline: none !important;
}

.app-modern-switch::after {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-modern-switch:checked {
    background-color: #6366f1 !important;
    background-image: none !important;
}

.app-modern-switch:checked::after {
    transform: translateX(16px) !important;
}

.app-modern-switch:focus-visible {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

.app-modern-switch:disabled {
    opacity: 0.6 !important;
    cursor: wait !important;
}

@media (max-width: 359.98px) {
    .app-menu-row {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .app-menu-tile {
        margin-right: 0.625rem;
    }

    .app-account-logout {
        margin-left: 0.375rem;
    }
}

/* Culori Teme Tile-uri */
.tile-indigo { background: rgba(79, 70, 229, 0.1); color: #4f46e5; }
.tile-rose   { background: rgba(244, 63, 94, 0.1); color: #f43f5e; }
.tile-amber  { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.tile-emerald{ background: rgba(16, 185, 129, 0.1); color: #059669; }
.tile-sky    { background: rgba(14, 165, 233, 0.1); color: #0284c7; }
.tile-slate  { background: rgba(100, 116, 139, 0.1); color: #475569; }

/* Dark mode overrides */
body[data-bs-theme="dark"].more-page {
    background: #000000 !important;
}
[data-bs-theme="dark"] .app-menu-card {
    background: #1c1c1e;
    border: none;
}
[data-bs-theme="dark"] .app-menu-row {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}
[data-bs-theme="dark"] .app-menu-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
[data-bs-theme="dark"] .app-menu-label {
    color: #f8fafc;
}
[data-bs-theme="dark"] .app-menu-sublabel {
    color: #94a3b8;
}
[data-bs-theme="dark"] .app-account-logout {
    border-color: rgba(251, 113, 133, 0.3);
    background: rgba(244, 63, 94, 0.14);
    color: #fda4af;
}

/* Aliniere Newsletter Banner în meniul de aplicație */
.more-app-menu-container .newsletter-banner {
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Caseta de newsletter apărea mai îngustă decât cardurile de meniu de deasupra.
   Cauza: `homepage.css` dă `main.container > .newsletter-banner` un gutter
   lateral de 12px sub 992px — corect pe homepage, unde `main.container` e
   full-bleed, dar `more.php` folosește același `main.container` și încarcă
   același fișier, așa că bannerul primea 12px pe care `.app-menu-card` nu-i are.
   Îl anulăm scoped pe pagina asta (selector cu specificitate mai mare, ca să nu
   fie nevoie de `!important`). */
body.more-page main.container > .newsletter-banner {
    padding-left: 0;
    padding-right: 0;
}