* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    background: #f6f8fb;
    color: #172033;
}

a {
    color: inherit;
}

.muted {
    color: #778195;
}

/* =========================================================
   Login
   ========================================================= */

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(135deg, #f4f7fb, #edf3fb);
}

.login-card {
    width: min(430px, 100%);
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 22px;
    padding: 34px;
    box-shadow: 0 20px 60px rgba(30, 50, 80, 0.10);
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 30px;
}

.brand h1,
.brand p {
    margin: 0;
}

.brand p {
    margin-top: 4px;
    color: #778195;
    font-size: 14px;
}

.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: #1769e0;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
}

.login-card h2 {
    margin: 0 0 6px;
}

.login-card form {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.login-card label {
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
}

.login-card input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #dce2ea;
    border-radius: 11px;
    font-size: 16px;
    outline: none;
}

.login-card input:focus {
    border-color: #1769e0;
    box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.12);
}

button {
    border: 0;
    border-radius: 11px;
    padding: 13px;
    background: #1769e0;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
}

.alert {
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff1f1;
    color: #a52a2a;
    margin-top: 18px;
    font-size: 14px;
}

.login-footer {
    display: flex;
    justify-content: space-between;
    color: #9aa3b2;
    font-size: 12px;
    margin-top: 25px;
}

/* =========================================================
   Layout
   ========================================================= */

.app-shell {
    display: grid;
    grid-template-columns: 230px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: #fff;
    border-right: 1px solid #e6eaf0;
    padding: 22px 16px;
}

.brand.compact {
    margin-bottom: 28px;
}

.brand.compact .brand-mark {
    width: 38px;
    height: 38px;
}

.brand.compact small,
.user-box small {
    display: block;
    color: #8a94a5;
    margin-top: 3px;
}

.sidebar nav {
    display: grid;
    gap: 6px;
}

.sidebar nav a {
    text-decoration: none;
    padding: 11px 13px;
    border-radius: 9px;
    color: #5d6778;
}

.sidebar nav a:hover,
.sidebar nav a.active {
    background: #edf4ff;
    color: #1769e0;
    font-weight: 700;
}

.content {
    padding: 28px 32px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.topbar h1,
.topbar p {
    margin: 0;
}

.topbar p {
    margin-top: 5px;
}

.user-box {
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: right;
}

.user-box small {
    display: block;
    color: #8a94a5;
    margin-top: 3px;
}

.logout {
    text-decoration: none;
    color: #1769e0;
    font-weight: 700;
}

/* =========================================================
   Dashboard
   ========================================================= */

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 28px 0;
}

.stats article,
.panel {
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 16px;
    padding: 20px;
}

.stats span,
.stats small {
    display: block;
    color: #7b8595;
}

.stats strong {
    display: block;
    font-size: 30px;
    margin: 10px 0;
}

.panel h2 {
    margin-top: 0;
}

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

@media (max-width: 850px) {

    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .content {
        padding: 20px;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 520px) {

    .stats {
        grid-template-columns: 1fr;
    }

    .topbar {
        align-items: flex-start;
    }

    .user-box {
        flex-direction: column;
        gap: 5px;
        align-items: flex-end;
    }

}


/* =========================================================
   e-Recipisa 5.2A.2 - componente generale
   ========================================================= */
.er-panel{background:#fff;border:1px solid #e5e9ef;border-radius:16px;padding:20px;margin-top:24px}
.er-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px}
.er-panel-head h2{margin:0 0 5px;font-size:20px}
.er-subtitle{margin:0;color:#778195;font-size:14px;line-height:1.45}
.er-btn,.er-btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 15px;border-radius:10px;text-decoration:none;font-size:14px;font-weight:700;cursor:pointer}
.er-btn{background:#1769e0;color:#fff;border:1px solid #1769e0}
.er-btn:hover{background:#125bc4}
.er-btn-secondary{background:#fff;color:#1769e0;border:1px solid #d8e1ee}
.er-btn-secondary:hover{background:#f3f7fd}
.er-input,.er-select{width:100%;min-height:42px;padding:10px 12px;border:1px solid #dce2ea;border-radius:10px;background:#fff;color:#172033;font:inherit;outline:none}
.er-input:focus,.er-select:focus{border-color:#1769e0;box-shadow:0 0 0 3px rgba(23,105,224,.10)}
.er-label{display:grid;gap:7px;font-size:13px;font-weight:700;color:#4d586a}
.er-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.er-form-grid .full{grid-column:1/-1}
.er-page-actions{display:flex;gap:10px;align-items:center}
.er-alert{padding:12px 14px;border-radius:10px;margin:0 0 18px;font-size:14px}
.er-alert.error{background:#fff0f0;color:#a52a2a;border:1px solid #f5d3d3}
.er-table{width:100%;border-collapse:collapse;font-size:14px}
.er-table th,.er-table td{padding:12px 13px;border-bottom:1px solid #edf0f4;text-align:left;vertical-align:top}
.er-table th{color:#687386;font-size:12px;text-transform:uppercase;letter-spacing:.03em;background:#fafbfd}
.er-table tbody tr:hover{background:#fafcff}

/* =========================================================
   Lista Firme
   ========================================================= */
.er-company-search{display:flex;gap:10px;max-width:650px;margin:0 0 18px}
.er-company-search .er-input{flex:1}
.er-company-search button{margin:0}
.er-company-list{display:grid;gap:12px}
.er-company-card{display:grid;grid-template-columns:minmax(230px,1.35fr) minmax(280px,1fr) minmax(260px,1.15fr) auto;gap:20px;align-items:center;padding:18px 20px;border:1px solid #e5eaf1;border-radius:15px;background:#fff;box-shadow:0 4px 16px rgba(20,36,70,.035)}
.er-company-card:hover{border-color:#d7e0ec;box-shadow:0 7px 22px rgba(20,36,70,.065)}
.er-company-main{display:flex;align-items:center;gap:13px;min-width:0}
.er-company-icon{flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#edf4ff;color:#1769e0;display:grid;place-items:center;font-weight:800}
.er-company-main h3{margin:0 0 5px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.er-company-cui{font-size:13px;color:#687386;font-weight:700}
.er-company-flags{display:flex;align-items:flex-start;gap:18px}
.er-company-flags>div{display:grid;gap:5px}
.er-company-flags span{font-size:10px;color:#7b8494;text-transform:uppercase;letter-spacing:.045em;white-space:nowrap}
.er-yn,.er-status{display:inline-flex;align-items:center;justify-content:center;width:max-content;min-width:38px;padding:5px 9px;border-radius:999px;font-size:11px;line-height:1;font-weight:800}
.er-yn.yes,.er-status-valid{background:#e9f8ef;color:#18763b}
.er-yn.no,.er-status-neutral,.er-status-received{background:#f0f2f5;color:#687386}
.er-yn.danger,.er-status-error,.er-status-rejected{background:#fff0f0;color:#b52a2a}
.er-status-processing{background:#fff6df;color:#916000}
.er-company-anaf{font-size:12px;color:#586273;line-height:1.4;min-width:0}
.er-company-anaf strong{color:#303b4d}
.er-company-anaf small{display:block;margin-top:6px;color:#7b8494;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.er-dot-ok,.er-dot-warn{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 4px;vertical-align:1px}
.er-dot-ok{background:#28a45c}
.er-dot-warn{background:#e3a11b}
.er-company-actions{display:flex;align-items:center;justify-content:flex-end;gap:11px;white-space:nowrap}
.er-company-actions>a:not(.er-btn-secondary){color:#1769e0;font-size:13px;font-weight:700;text-decoration:none}
.er-company-actions>a:not(.er-btn-secondary):hover{text-decoration:underline}
.er-empty{padding:28px;text-align:center;color:#7b8494;border:1px dashed #dce2ea;border-radius:12px;background:#fafbfd}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:1200px){
 .er-company-card{grid-template-columns:minmax(220px,1.2fr) minmax(250px,1fr) auto}
 .er-company-anaf{grid-column:1/3}
}
@media(max-width:900px){
 .er-company-card{grid-template-columns:1fr 1fr}
 .er-company-anaf{grid-column:1/-1}
 .er-company-actions{justify-content:flex-start}
}
@media(max-width:650px){
 .er-panel{padding:16px}
 .er-panel-head{flex-direction:column}
 .er-form-grid{grid-template-columns:1fr}
 .er-company-search{display:grid}
 .er-company-card{grid-template-columns:1fr;padding:16px}
 .er-company-flags{flex-wrap:wrap}
 .er-company-anaf{grid-column:auto}
 .er-company-actions{justify-content:flex-start;flex-wrap:wrap}
}