* {
    box-sizing: border-box;
}

:root {
    --bg: #f4f7fb;
    --panel: rgba(255,255,255,.96);
    --panel-soft: #f8faff;

    --text: #172033;
    --muted: #768092;

    --blue: #2878e5;
    --blue-soft: #edf5ff;

    --border: #e2e8f0;

    --radius: 18px;
    --radius-lg: 24px;

    --shadow:
        0 10px 35px rgba(25,40,70,.065);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Segoe UI",
        Arial,
        sans-serif;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(
            circle at 70% -15%,
            rgba(255,255,255,1) 0,
            rgba(255,255,255,0) 34%
        ),
        var(--bg);

    color: var(--text);
}

body {
    min-height: 100vh;
}

a {
    color: inherit;
}


/* ========================================
   TOPBAR
======================================== */

.ec-topbar {
    height: 72px;

    display: flex;
    align-items: center;

    padding:
        0 30px;

    position: sticky;
    top: 0;

    z-index: 1000;

    background:
        rgba(255,255,255,.91);

    backdrop-filter:
        blur(26px);

    border-bottom:
        1px solid rgba(20,35,55,.07);
}

.ec-brand {
    width: 112px;

    display: flex;
    align-items: center;

    margin-right: 25px;
}

.ec-brand img {
    display: block;

    max-width: 100px;
    max-height: 42px;

    object-fit: contain;
}

.ec-nav {
    display: flex;
    align-items: center;

    gap: 4px;
}

.ec-nav a {
    display: block;

    text-decoration: none;

    padding:
        9px
        13px;

    border-radius: 11px;

    font-size: 14px;
    font-weight: 600;

    color: #596477;

    transition:
        color .15s ease,
        background .15s ease;
}

.ec-nav a:hover {
    color: var(--blue);
    background: #f1f5fa;
}

.ec-nav a.active {
    color: var(--blue);
    background: var(--blue-soft);
}

.ec-top-right {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 15px;
}

.ec-sdi {
    color: #828b99;

    font-size: 12px;
    font-weight: 500;
}

.ec-top-right form {
    margin: 0;
}

.ec-logout {
    font: inherit;

    border:
        1px solid #d7dee8;

    border-radius: 9px;

    background: white;

    padding:
        7px
        12px;

    color: #5e6878;

    cursor: pointer;
}


/* ========================================
   MAIN
======================================== */

.ec-main {
    width:
        min(1450px, calc(100% - 48px));

    margin:
        0 auto;

    padding:
        38px 0
        70px;
}

.ec-eyebrow {
    margin-bottom: 7px;

    color: #8992a0;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .14em;
}

.ec-heading {
    margin-bottom: 29px;
}

.ec-heading h1,
.ec-page-head h1 {
    margin:
        0 0
        6px;

    font-size:
        clamp(28px, 2.5vw, 38px);

    line-height: 1.08;

    letter-spacing: -.035em;
}

.ec-heading p,
.ec-page-head p {
    margin: 0;

    color: var(--muted);

    font-size: 15px;
}


/* ========================================
   DASHBOARD STATS
======================================== */

.ec-stats {
    display: grid;

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

    gap: 16px;

    margin-bottom: 38px;
}

.ec-stat {
    display: block;

    min-width: 0;

    padding: 20px;

    text-decoration: none;

    background: var(--panel);

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

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.ec-stat:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 14px 38px rgba(25,40,70,.10);
}

.ec-stat-label {
    color: #6199ea;

    font-size: 13px;
    font-weight: 500;
}

.ec-stat-value {
    display: block;

    margin:
        13px 0
        8px;

    font-size: 39px;
    font-weight: 760;

    line-height: 1;

    letter-spacing: -.04em;
}

.ec-stat-help {
    color: #8a94a4;

    font-size: 12px;
}


/* ========================================
   MODULES
======================================== */

.ec-section-title {
    margin:
        0 0
        16px;

    font-size: 23px;
}

.ec-modules {
    display: grid;

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

    gap: 18px;
}

.ec-module {
    min-height: 240px;

    display: flex;
    flex-direction: column;

    padding: 24px;

    position: relative;

    text-decoration: none;

    background: var(--panel);

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

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow);

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.ec-module:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 17px 42px rgba(25,40,70,.11);
}

.ec-module-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ec-module-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    color: var(--blue);

    background: var(--blue-soft);

    font-size: 17px;
    font-weight: 800;
}

.ec-module-arrow {
    color: #9cc0f2;

    font-size: 26px;
    font-weight: 300;
}

.ec-module h2 {
    margin:
        25px 0
        7px;

    color: var(--blue);

    font-size: 22px;
}

.ec-module p {
    max-width: 340px;

    margin: 0;

    color: #718098;

    line-height: 1.48;

    font-size: 14px;
}

.ec-module-badge {
    align-self: flex-start;

    margin-top: auto;

    padding:
        6px
        9px;

    border-radius: 999px;

    background: var(--blue-soft);

    color: var(--blue);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 11px;
    font-weight: 700;
}


/* ========================================
   FATTURE
======================================== */

.ec-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}

.ec-back {
    padding:
        9px
        13px;

    border-radius: 11px;

    text-decoration: none;

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

    background: white;

    color: #667286;

    font-size: 13px;
    font-weight: 650;
}

.ec-search {
    display: flex;

    gap: 10px;

    padding: 8px;

    margin-bottom: 17px;

    background: white;

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

    border-radius: 16px;

    box-shadow: var(--shadow);
}

.ec-search input {
    flex: 1;

    min-width: 0;

    border: 0;
    outline: 0;

    padding:
        10px
        12px;

    background: transparent;

    color: var(--text);

    font: inherit;
}

.ec-search button {
    border: 0;

    padding:
        10px
        18px;

    border-radius: 11px;

    background: var(--blue);

    color: white;

    font: inherit;
    font-weight: 650;

    cursor: pointer;
}

.ec-table-wrap {
    overflow-x: auto;

    background: white;

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

    border-radius: 19px;

    box-shadow: var(--shadow);
}

.ec-table {
    width: 100%;

    border-collapse: collapse;
}

.ec-table th,
.ec-table td {
    padding:
        14px
        15px;

    text-align: left;

    border-bottom:
        1px solid #edf0f4;
}

.ec-table th {
    color: #8992a0;

    font-size: 11px;
    font-weight: 750;

    letter-spacing: .05em;

    text-transform: uppercase;
}

.ec-table td {
    color: #465166;

    font-size: 13px;
}

.ec-table tbody tr:hover {
    background: #fafcff;
}

.ec-mono {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 11px !important;
}

.ec-xml {
    color: var(--blue);

    font-weight: 700;

    text-decoration: none;
}

.ec-empty {
    padding: 55px !important;

    text-align: center !important;

    color: #8a94a4 !important;
}


/* ========================================
   LOGIN
======================================== */

.ec-login-body {
    display: grid;

    min-height: 100vh;

    place-items: center;

    padding: 25px;
}

.ec-login-card {
    width:
        min(430px, 100%);

    padding: 36px;

    background:
        rgba(255,255,255,.94);

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

    border-radius: 27px;

    box-shadow:
        0 24px 75px rgba(25,40,70,.11);
}

.ec-login-logo {
    display: block;

    max-width: 140px;
    max-height: 65px;

    margin:
        0 auto
        25px;
}

.ec-login-card h1 {
    margin:
        0 0
        5px;

    text-align: center;

    font-size: 27px;
}

.ec-login-subtitle {
    margin:
        0 0
        25px;

    text-align: center;

    color: var(--muted);
}

.ec-login-card form {
    display: grid;

    gap: 8px;
}

.ec-login-card label {
    margin-top: 8px;

    color: #687488;

    font-size: 12px;
    font-weight: 650;
}

.ec-login-card input {
    width: 100%;

    padding:
        13px
        14px;

    border:
        1px solid #d9e0e9;

    border-radius: 11px;

    outline: 0;

    background: #fff;

    color: var(--text);

    font: inherit;
}

.ec-login-card input:focus {
    border-color: #8ab8f8;

    box-shadow:
        0 0 0 3px rgba(40,120,229,.1);
}

.ec-login-submit {
    margin-top: 14px;

    padding: 12px;

    border: 0;

    border-radius: 11px;

    background: var(--blue);

    color: white;

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}

.ec-alert {
    margin-bottom: 18px;

    padding:
        12px
        14px;

    border-radius: 12px;

    background: #fff4f4;

    color: #b33a3a;
}


/* ========================================
   RESPONSIVE
======================================== */

@media(max-width:1050px) {

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

    .ec-modules {
        grid-template-columns: 1fr;
    }

}

@media(max-width:760px) {

    .ec-topbar {
        padding:
            0 13px;

        height: 62px;
    }

    .ec-brand {
        width: 66px;
        margin-right: 4px;
    }

    .ec-brand img {
        max-width: 58px;
    }

    .ec-nav {
        overflow-x: auto;
    }

    .ec-nav a {
        padding:
            8px
            9px;

        white-space: nowrap;

        font-size: 12px;
    }

    .ec-sdi {
        display: none;
    }

    .ec-main {
        width:
            calc(100% - 24px);

        padding-top: 24px;
    }

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

    .ec-page-head {
        align-items: flex-start;
        flex-direction: column;
    }

}