/* ============================================================
   PLATEGO CLOUD
============================================================ */

:root {

    --navy: #08285a;
    --navy-dark: #062650;

    --blue: #087bf2;
    --blue-dark: #0667cd;
    --blue-light: #eef6ff;

    --green: #0da860;
    --green-light: #e8f9ef;

    --purple: #6642d8;
    --purple-light: #f2eefe;

    --yellow: #ffc21a;

    --page-bg: #f7f9fc;

    --white: #ffffff;

    --border: #e0e8f1;
    --border-soft: #edf2f7;

    --text: #0b244d;
    --muted: #667b9a;

    --danger: #d92d20;
    --danger-bg: #feeceb;

    --success: #0c8a50;
    --success-bg: #e8f8f0;

    --warning: #a66b00;
    --warning-bg: #fff5d7;

    --topbar-height: 110px;
    --sidebar-width: 285px;

    --shadow:
        0 8px 24px
        rgba(20, 53, 92, 0.06);
}


/* ============================================================
   RESET
============================================================ */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    min-height: 100%;
}


body {

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        var(--page-bg);

    color:
        var(--text);

    -webkit-font-smoothing:
        antialiased;
}


body.menu-open {
    overflow: hidden;
}


a {
    text-decoration: none;
    color: inherit;
}


button,
input,
select,
textarea {
    font: inherit;
}


/* ============================================================
   APP
============================================================ */

.app-shell {

    min-height: 100vh;

    background:
        var(--page-bg);
}


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

.topbar {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height:
        var(--topbar-height);

    z-index: 500;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0 42px;

    background:
        #ffffff;

    border-bottom:
        4px solid
        var(--blue);

    box-shadow:
        0 3px 14px
        rgba(10, 42, 86, 0.05);
}


.topbar-left {

    display: flex;
    align-items: center;

    gap: 18px;
}


.topbar-brand {

    display: flex;
    align-items: center;
}


.topbar-logo {

    display: block;

    width: auto;

    max-width: 260px;
    max-height: 72px;

    object-fit: contain;
}


.topbar-actions {

    display: flex;
    align-items: center;

    gap: 22px;
}


.organization-info {

    display: flex;
    flex-direction: column;

    align-items: flex-end;

    min-width: 150px;
}


.organization-info span {

    color:
        var(--blue);

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

    letter-spacing:
        0.08em;
}


.organization-info strong {

    margin-top: 4px;

    color:
        var(--text);

    font-size: 15px;
    font-weight: 750;
}


.logout-arrow {

    margin-left: 5px;

    font-size: 18px;
}


/* ============================================================
   MOBILE MENU BUTTON
============================================================ */

.mobile-menu-button {

    display: none;

    width: 46px;
    height: 46px;

    padding: 0;

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

    border-radius: 9px;

    background:
        #ffffff;

    cursor: pointer;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;
}


.mobile-menu-button span {

    display: block;

    width: 21px;
    height: 2px;

    border-radius: 10px;

    background:
        var(--navy);
}


/* ============================================================
   SIDEBAR
============================================================ */

.sidebar {

    position: fixed;

    top:
        var(--topbar-height);

    left: 0;
    bottom: 0;

    width:
        var(--sidebar-width);

    z-index: 300;

    display: flex;
    flex-direction: column;

    background:
        #ffffff;

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

    box-shadow:
        4px 0 18px
        rgba(13, 45, 84, 0.025);

    transition:
        transform 0.25s ease;
}


.sidebar-mobile-header {
    display: none;
}


/* ============================================================
   SIDEBAR NAV
============================================================ */

.sidebar-nav {

    display: flex;
    flex-direction: column;

    gap: 10px;

    padding:
        28px 18px;
}


.sidebar-link {

    min-height: 58px;

    display: flex;
    align-items: center;

    gap: 17px;

    padding:
        0 20px;

    border-radius:
        11px;

    color:
        #253b5d;

    font-size: 15px;
    font-weight: 650;

    transition:
        all 0.16s ease;
}


.sidebar-link:hover {

    color:
        var(--blue);

    background:
        #f5f9fe;
}


.sidebar-link.active {

    color:
        var(--blue);

    background:
        linear-gradient(
            90deg,
            #f0f7ff,
            #f7fbff
        );

    box-shadow:
        inset 3px 0 0
        var(--blue);
}


.sidebar-icon {

    width: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color:
        #536b8c;

    font-size: 23px;
    font-weight: 600;
}


.sidebar-link.active
.sidebar-icon {

    color:
        var(--blue);
}


.sidebar-label {
    flex: 1;
}


/* ============================================================
   ACCOUNT SIDEBAR
============================================================ */

.sidebar-account {

    margin:
        auto
        18px
        22px;

    min-height: 88px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 17px;

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

    border-radius: 12px;

    background:
        #ffffff;
}


.sidebar-account-icon {

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        #4c6383;

    font-size: 23px;
}


.sidebar-account-text {

    min-width: 0;

    display: flex;
    flex-direction: column;
}


.sidebar-account-text strong {

    overflow: hidden;

    color:
        var(--text);

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.sidebar-account-text span {

    margin-top: 4px;

    color:
        var(--muted);

    font-size: 12px;
}


/* ============================================================
   SIDEBAR OVERLAY
============================================================ */

.sidebar-overlay {

    position: fixed;

    inset: 0;

    z-index: 700;

    background:
        rgba(
            6,
            24,
            49,
            0.42
        );

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}


.sidebar-overlay.visible {

    opacity: 1;

    visibility: visible;
}


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

.main-shell {

    min-height: 100vh;

    padding-top:
        var(--topbar-height);

    padding-left:
        var(--sidebar-width);
}


.page-content {

    width: 100%;

    min-height:
        calc(
            100vh
            -
            var(--topbar-height)
        );

    padding:
        38px
        42px
        28px;
}


/* ============================================================
   SUPER ADMIN
============================================================ */

.admin-main-shell {

    padding-left: 0;
}


.admin-page-content {

    width: 100%;

    max-width: 1600px;

    margin:
        0 auto;
}


/* ============================================================
   PAGE HEADING
============================================================ */

.page-heading {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;
}


.page-heading h1 {

    margin: 0;

    color:
        #09224a;

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

    letter-spacing:
        -0.025em;

    line-height: 1.15;
}


.page-heading p {

    margin:
        8px
        0
        0;

    color:
        var(--muted);

    font-size: 14px;
    line-height: 1.6;
}


.page-heading-actions {

    display: flex;
    align-items: center;

    gap: 10px;
}


/* ============================================================
   BUTTONS
============================================================ */

.button {

    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0 19px;

    border:
        1px solid
        transparent;

    border-radius: 8px;

    cursor: pointer;

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

    transition:
        transform 0.14s ease,
        background 0.14s ease,
        box-shadow 0.14s ease;
}


.button:hover {
    transform: translateY(-1px);
}


.button-primary {

    color: #ffffff;
    background: var(--blue);
}


.button-primary:hover {
    background: var(--blue-dark);
}


.button-green {

    color: #ffffff;
    background: var(--green);
}


.button-green:hover {
    background: #07894c;
}


.button-purple {

    color: #ffffff;
    background: var(--purple);
}


.button-purple:hover {
    background: #5432bf;
}


.button-yellow {

    color: var(--text);
    background: var(--yellow);
}


.button-secondary {

    color: var(--text);

    background:
        #f4f7fb;

    border-color:
        var(--border);
}


.button-white {

    min-width: 74px;

    color: var(--text);

    background:
        #ffffff;

    border-color:
        var(--border);

    box-shadow:
        0 3px 10px
        rgba(20, 45, 80, 0.03);
}


.button-danger {

    color:
        #b42318;

    background:
        var(--danger-bg);

    border-color:
        #f4c9c6;
}


.button-full {
    width: 100%;
}


/* ============================================================
   STATISTICHE
============================================================ */

.stats-grid {

    display: grid;

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

    gap: 20px;

    margin-bottom: 24px;
}


.stats-grid-three {

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


.stat-card {

    min-height: 126px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        23px 25px;

    background:
        #ffffff;

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

    border-radius: 14px;

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


.stat-card-horizontal {

    flex-direction: row;

    align-items: center;
    justify-content: flex-start;

    gap: 20px;
}


.stat-card-icon {

    width: 58px;
    height: 58px;

    flex:
        0 0 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color:
        #0974e4;

    background:
        #eaf4ff;

    font-size: 27px;
}


.stat-card span {

    display: block;

    color:
        #435c7c;

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


.stat-card strong {

    display: block;

    margin-top: 7px;

    color:
        #08285a;

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

    line-height: 1;
}


/* ============================================================
   DASHBOARD ACTIONS
============================================================ */

.dashboard-actions {

    display: grid;

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

    gap: 20px;
}


.action-card {

    min-height: 315px;

    display: flex;
    flex-direction: column;

    padding: 28px;

    background:
        #ffffff;

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

    border-radius: 15px;

    box-shadow:
        var(--shadow);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


.action-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(20, 53, 92, 0.09);
}


.action-icon {

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    border-radius: 13px;

    font-size: 30px;
}


.action-icon-blue {

    color: var(--blue);
    background: var(--blue-light);
}


.action-icon-green {

    color: var(--green);
    background: var(--green-light);
}


.action-icon-purple {

    color: var(--purple);
    background: var(--purple-light);
}


.action-card h2 {

    margin:
        0
        0
        11px;

    color:
        #091f46;

    font-size: 20px;
    font-weight: 740;
}


.action-card p {

    flex: 1;

    margin:
        0
        0
        28px;

    color:
        var(--muted);

    font-size: 14px;

    line-height: 1.65;
}


.action-card .button {

    align-self:
        flex-start;

    min-width: 120px;
}


/* ============================================================
   CARDS
============================================================ */

.card {

    width: 100%;

    margin-bottom: 22px;

    padding: 25px;

    background:
        #ffffff;

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

    border-radius: 14px;

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


.card h2 {

    margin:
        0
        0
        14px;

    color:
        var(--text);

    font-size: 19px;
}


/* ============================================================
   FORM
============================================================ */

.form-card {
    max-width: 1050px;
}


.form-grid {

    display: grid;

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

    gap:
        20px
        22px;
}


.form-group {

    display: flex;
    flex-direction: column;

    gap: 7px;
}


.form-group-full {
    grid-column: 1 / -1;
}


.form-group label {

    color: var(--text);

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


.form-group input,
.form-group select,
.form-group textarea,
.search-bar input {

    width: 100%;

    min-height: 47px;

    padding:
        10px 13px;

    color: var(--text);

    background:
        #ffffff;

    border:
        1px solid
        #ccd9e8;

    border-radius: 8px;

    outline: none;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.search-bar input:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(8, 123, 242, 0.1);
}


.form-group input:disabled {
    background: #f5f7fa;
}


.form-actions {

    display: flex;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 24px;
}


/* ============================================================
   SEARCH
============================================================ */

.search-bar {

    display: flex;

    gap: 10px;
}


.search-bar input {
    flex: 1;
}


/* ============================================================
   TABLE
============================================================ */

.table-card {

    padding: 0;

    overflow: hidden;
}


.table-header {

    padding:
        21px
        24px;

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


.table-header h2 {
    margin: 0;
}


.table-responsive {
    overflow-x: auto;
}


table {

    width: 100%;

    border-collapse:
        collapse;

    background:
        #ffffff;
}


thead {
    background: #f7f9fc;
}


th {

    padding:
        15px 16px;

    color:
        #526985;

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

    text-align: left;
    text-transform: uppercase;

    letter-spacing:
        0.035em;

    white-space: nowrap;
}


td {

    padding: 16px;

    color:
        var(--text);

    font-size: 13px;

    border-top:
        1px solid
        var(--border-soft);
}


tbody tr:hover {
    background: #fbfdff;
}


.empty-table {

    padding: 42px;

    color:
        var(--muted);

    text-align: center;
}


/* ============================================================
   BADGES
============================================================ */

.badge {

    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding:
        0 10px;

    border-radius: 99px;

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


.badge-success {

    color: #087447;
    background: var(--success-bg);
}


.badge-warning {

    color: #936000;
    background: var(--warning-bg);
}


.badge-danger {

    color: #b42318;
    background: var(--danger-bg);
}


/* ============================================================
   ALERT
============================================================ */

.alert {

    margin-bottom: 20px;

    padding:
        14px
        17px;

    border-radius: 8px;

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


.alert-error {

    color: #a9251b;

    background:
        var(--danger-bg);

    border:
        1px solid
        #f1cac7;
}


.alert-success {

    color: #087447;

    background:
        var(--success-bg);

    border:
        1px solid
        #bfe7d3;
}


/* ============================================================
   SEND
============================================================ */

.send-summary {

    display: grid;

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

    gap: 18px;
}


.send-summary > div {

    padding: 18px;

    background:
        #f8fafc;

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

    border-radius: 10px;
}


.send-summary span {

    display: block;

    margin-bottom: 7px;

    color:
        var(--muted);

    font-size: 11px;
}


.send-summary strong {

    color: var(--text);
    font-size: 18px;
}


.send-button-wrapper {

    display: flex;
    justify-content: flex-end;

    margin-top: 20px;
}


/* ============================================================
   TOKEN
============================================================ */

.token-box {

    margin:
        15px
        0;

    padding: 15px;

    color:
        #16375f;

    background:
        #f4f8fd;

    border:
        1px solid
        #cfdeef;

    border-radius: 8px;

    font-family:
        Consolas,
        monospace;

    font-size: 13px;

    word-break:
        break-all;
}


/* ============================================================
   FOOTER
============================================================ */

.page-footer {

    margin-top: 40px;

    padding:
        24px
        10px
        4px;

    color:
        #526786;

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

    text-align: center;

    font-size: 12px;
}


.page-footer div {
    font-weight: 650;
}


.page-footer span {

    display: block;

    margin-top: 5px;
}


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

.login-page {

    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background:
        linear-gradient(
            145deg,
            #f7f9fc,
            #edf4fc
        );
}


.login-wrapper {

    width: 100%;

    display: flex;
    justify-content: center;
}


.login-card {

    width: 100%;
    max-width: 430px;

    padding: 38px;

    background:
        #ffffff;

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

    border-radius: 15px;

    box-shadow:
        0 16px 40px
        rgba(12, 43, 80, 0.1);
}


.login-logo {

    display: block;

    max-width: 235px;
    max-height: 90px;

    margin:
        0 auto 26px;

    object-fit: contain;
}


.login-card h1 {

    margin:
        0
        0
        8px;

    color:
        var(--text);

    text-align: center;
}


.login-subtitle {

    margin:
        0
        0
        26px;

    color:
        var(--muted);

    text-align: center;

    font-size: 13px;
}


.login-card .form-group {
    margin-bottom: 17px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1150px) {

    .stats-grid,
    .stats-grid-three {

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


    .dashboard-actions {

        grid-template-columns:
            1fr;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 820px) {

    :root {

        --topbar-height:
            82px;
    }


    /* TOPBAR */

    .topbar {

        height:
            var(--topbar-height);

        padding:
            0 14px;

        border-bottom-width:
            3px;
    }


    .topbar-left {

        gap: 11px;
    }


    .topbar-logo {

        max-width: 170px;
        max-height: 55px;
    }


    .organization-info {
        display: none;
    }


    .mobile-menu-button {
        display: flex;
    }


    .logout-button {

        min-width: 65px;

        padding:
            0 12px;
    }


    .logout-arrow {

        display: none;
    }


    /* SIDEBAR MOBILE */

    .sidebar {

        top: 0;

        width:
            min(
                82vw,
                330px
            );

        height: 100vh;

        z-index: 800;

        transform:
            translateX(-105%);

        border-right:
            0;

        box-shadow:
            12px 0 32px
            rgba(8, 30, 60, 0.18);
    }


    .sidebar.mobile-open {

        transform:
            translateX(0);
    }


    .sidebar-mobile-header {

        min-height: 82px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding:
            0 22px;

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


    .sidebar-mobile-header strong {

        color:
            var(--navy);

        font-size: 18px;
    }


    .sidebar-close-button {

        width: 42px;
        height: 42px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        border: 0;

        border-radius: 8px;

        color:
            var(--navy);

        background:
            #f3f7fb;

        cursor: pointer;

        font-size: 27px;
        line-height: 1;
    }


    .sidebar-nav {

        flex-direction:
            column;

        overflow:
            visible;

        padding:
            20px 14px;
    }


    .sidebar-link {

        width: 100%;

        min-width: 0;

        min-height: 56px;
    }


    .sidebar-account {

        display: flex;

        margin:
            auto
            14px
            18px;
    }


    /* MAIN */

    .main-shell {

        padding-top:
            var(--topbar-height);

        padding-left: 0;
    }


    .page-content {

        min-height:
            calc(
                100vh
                -
                var(--topbar-height)
            );

        padding:
            27px
            18px
            24px;
    }


    .admin-main-shell {

        padding-left: 0;
    }


    .admin-page-content {

        max-width: none;
    }


    .page-heading {

        flex-direction:
            column;

        margin-bottom:
            23px;
    }


    .page-heading h1 {

        font-size: 28px;
    }


    .page-heading p {

        font-size: 14px;
    }


    .page-heading-actions {

        width: 100%;
    }


    .page-heading-actions .button {

        width: 100%;
    }


    /* STAT */

    .stats-grid,
    .stats-grid-three {

        grid-template-columns:
            1fr;

        gap: 14px;
    }


    .stat-card {

        min-height: 112px;

        padding:
            19px;
    }


    .stat-card-horizontal {

        gap: 17px;
    }


    .stat-card-icon {

        width: 52px;
        height: 52px;

        flex:
            0 0 52px;
    }


    /* ACTION */

    .dashboard-actions {

        grid-template-columns:
            1fr;

        gap: 16px;
    }


    .action-card {

        min-height: 250px;

        padding: 23px;
    }


    /* FORM */

    .form-grid {

        grid-template-columns:
            1fr;
    }


    .form-group-full {

        grid-column:
            auto;
    }


    .search-bar {

        flex-direction:
            column;
    }


    .send-summary {

        grid-template-columns:
            1fr;
    }


    /* TABLE */

    .table-responsive {

        width:
            calc(
                100vw
                -
                36px
            );
    }

}


/* ============================================================
   MOBILE SMALL
============================================================ */

@media (max-width: 480px) {

    .topbar-logo {

        max-width:
            145px;
    }


    .mobile-menu-button {

        width: 42px;
        height: 42px;
    }


    .button-white {

        min-height:
            42px;
    }


    .page-content {

        padding:
            24px
            14px;
    }


    .page-heading h1 {

        font-size:
            27px;
    }


    .stat-card strong {

        font-size:
            29px;
    }


    .login-card {

        padding:
            27px
            22px;
    }


    .form-actions {

        flex-direction:
            column;
    }


    .form-actions .button {

        width:
            100%;
    }

}
/* ============================================================
   ADMIN / SETTINGS EXTENSIONS
============================================================ */

.admin-settings-card {
    max-width: none;
}

.form-help {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.form-actions-left {
    justify-content: flex-start;
}

.inline-link {
    color: var(--blue);
    font-weight: 700;
}

.inline-link:hover {
    text-decoration: underline;
}

.danger-zone {
    border-color: #f3c4c0;
    background: #fffafa;
}

.danger-zone h2 {
    color: #b42318;
}

.danger-zone p {
    color: #7a4b49;
}

.danger-form {
    max-width: 640px;
}

@media (max-width: 820px) {
    .danger-form {
        max-width: none;
    }
}