/* =========================

   Base

========================= */

* {

    box-sizing: border-box;

    font-family: 'Segoe UI', Roboto, Arial, sans-serif;

}



:root {

    --bg: #ffffff;

    --text: #202124;

    --muted: #5f6368;

    --border: #e0e0e0;

    --border-strong: #dadce0;

    --primary: #1a73e8;

    --primary-soft: #e8f0fe;

    --hover: #f8f9fa;

}



body {

    margin: 0;

    background: var(--bg);

    color: var(--text);

}



a {

    color: inherit;

}



/* =========================

   Top bar

========================= */

.topbar {

    height: 56px;

    border-bottom: 1px solid var(--border);

    display: flex;

    align-items: center;

    padding: 0 16px;

    background: var(--bg);

}



.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--primary);

    user-select: none;

}



    .brand .icon {

        font-size: 22px;

        line-height: 1;

    }



    .brand .title {

        font-weight: 600;

        font-size: 16px;

        color: var(--primary);

    }



    .brand .subtitle {

        font-size: 13px;

        color: var(--muted);

        margin-top: 1px;

    }



    /* Se vuoi usare una scritta unica senza title/subtitle */

    .brand .single {

        font-weight: 600;

        font-size: 16px;

        color: var(--primary);

    }



/* =========================

   Main layout

========================= */

.container {

    display: flex;

    height: calc(100vh - 56px);

}



/* =========================

   Sidebar

========================= */

.sidebar {

    width: 72px;

    border-right: 1px solid var(--border);

    background: #fafafa;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding-top: 12px;

}



    .sidebar a {

        width: 48px;

        height: 48px;

        margin-bottom: 8px;

        border-radius: 50%;

        text-decoration: none;

        color: var(--muted);

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 20px;

        transition: background 0.12s ease, color 0.12s ease;

    }



        .sidebar a:hover {

            background: var(--primary-soft);

            color: var(--primary);

        }



        .sidebar a.active {

            background: var(--primary-soft);

            color: var(--primary);

        }



/* =========================

   Content area

========================= */

.content {

    flex: 1;

    padding: 24px;

    overflow-y: auto;

}



/* =========================

   Typography

========================= */

h1, h2, h3 {

    margin: 0 0 12px 0;

    font-weight: 600;

}



p {

    margin: 0 0 10px 0;

    color: var(--text);

}



/* =========================

   Cards

========================= */

.card {

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 16px;

    margin-bottom: 16px;

    background: var(--bg);

    max-width: 720px;

}



/* =========================

   Forms (generic)

========================= */

.form-row {

    margin-bottom: 14px;

}



.label {

    display: block;

    font-size: 13px;

    color: var(--muted);

    margin-bottom: 6px;

}



.input {

    width: 100%;

    height: 40px;

    padding: 0 12px;

    border: 1px solid var(--border-strong);

    border-radius: 8px;

    outline: none;

    background: var(--bg);

    color: var(--text);

}



    .input::placeholder {

        color: #9aa0a6;

    }



    .input:focus {

        border-color: var(--primary);

        box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);

    }



/* =========================

   Buttons & links

========================= */

.actions {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: 16px;

}



.btn-primary {

    height: 40px;

    padding: 0 14px;

    border: 1px solid var(--primary);

    background: var(--primary);

    color: #fff;

    border-radius: 8px;

    cursor: pointer;

    transition: filter 0.12s ease;

}



    .btn-primary:hover {

        filter: brightness(0.96);

    }



    .btn-primary:active {

        filter: brightness(0.92);

    }



.link {

    color: var(--primary);

    text-decoration: none;

    font-size: 13px;

}



    .link:hover {

        text-decoration: underline;

    }



.small {

    font-size: 12px;

    color: var(--muted);

    margin-top: 16px;

}



/* =========================

   Auth (Login/Registrazione)

========================= */

.auth-wrap {

    height: calc(100vh - 56px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

}



.auth-card {

    width: 100%;

    max-width: 420px;

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 24px;

    background: var(--bg);

}



.auth-title {

    margin: 0 0 6px 0;

    font-size: 20px;

    font-weight: 600;

}



.auth-subtitle {

    margin: 0 0 18px 0;

    color: var(--muted);

    font-size: 14px;

}



/* =========================

   Social login

========================= */

.social-stack {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.btn-outline {

    width: 100%;

    height: 40px;

    padding: 0 14px;

    border: 1px solid var(--border-strong);

    background: var(--bg);

    color: var(--text);

    border-radius: 8px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    transition: background 0.12s ease;

}



    .btn-outline:hover {

        background: var(--hover);

    }



.svg-icon {

    width: 18px;

    height: 18px;

    display: inline-block;

}



.divider {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 18px 0;

    color: var(--muted);

    font-size: 12px;

}



    .divider::before,

    .divider::after {

        content: "";

        flex: 1;

        height: 1px;

        background: var(--border);

    }



/* =========================

   Responsive

========================= */

@media (max-width: 520px) {

    .content {

        padding: 16px;

    }



    .auth-card {

        padding: 18px;

        border-radius: 10px;

    }



    .brand .title {

        font-size: 15px;

    }



    .brand .subtitle {

        display: none; /* su mobile lascia solo titolo */

    }

}

.row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}



.row-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}



.btn-danger {

    height: 32px;

    padding: 0 10px;

    border: 1px solid #d93025;

    background: #d93025;

    color: #fff;

    border-radius: 8px;

    cursor: pointer;

    font-size: 13px;

}



    .btn-danger:hover {

        filter: brightness(0.96);

    }



.btn-small {

    height: 32px;

    padding: 0 10px;

    border-radius: 8px;

    font-size: 13px;

}

.pay-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-top: 10px;

}



.pay-item {

    border: 1px solid #e0e0e0;

    border-radius: 10px;

    padding: 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    background: #fff;

}



    .pay-item svg {

        width: 26px;

        height: 26px;

    }



.badge {

    display: inline-flex;

    align-items: center;

    padding: 4px 10px;

    border-radius: 999px;

    border: 1px solid #dadce0;

    background: #e8f0fe;

    color: #1a73e8;

    font-size: 12px;

    font-weight: 600;

}