/* ==========================================================
   CODOO ADMIN V3.3
   Modern Admin Dashboard
   ========================================================== */

:root {
    --codoo-primary: #714b67;
    --codoo-primary-dark: #5e3d56;
    --codoo-primary-soft: #f6f0f4;

    --codoo-blue: #4c829b;
    --codoo-blue-soft: #eef6f9;

    --codoo-bg: #f6f7f9;
    --codoo-card: #ffffff;

    --codoo-text: #20252b;
    --codoo-muted: #747d86;

    --codoo-border: #e5e7eb;

    --codoo-radius: 14px;
}


/* ----------------------------------------------------------
   GENERAL
   ---------------------------------------------------------- */

body.codoo-admin-dashboard {
    background: var(--codoo-bg);
}

.codoo-admin-dashboard #content {
    padding: 26px 32px 50px;
}

.codoo-admin-dashboard #content-main {
    width: 100%;
    float: none;
}

.codoo-admin-dashboard .breadcrumbs {
    border: 0;
}

.codoo-dashboard {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.codoo-hero {
    background:
        linear-gradient(
            135deg,
            var(--codoo-primary),
            var(--codoo-blue)
        );

    border-radius: 18px;
    min-height: 130px;

    padding: 26px 30px;

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

    gap: 25px;

    color: #fff;

    box-shadow:
        0 8px 28px rgba(40, 45, 55, .10);

    box-sizing: border-box;
}


.codoo-hero-content {
    display: flex;
    align-items: center;
    gap: 20px;
}


.codoo-hero-icon {
    width: 66px;
    height: 66px;

    border-radius: 17px;

    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.24);

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

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

    flex: 0 0 auto;
}


.codoo-hero h1 {
    color: #fff;
    margin: 0 0 8px;
    font-size: 27px;
    font-weight: 700;
}


.codoo-hero p {
    color: rgba(255,255,255,.87);
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
}


.codoo-hero-badge {
    background: rgba(255,255,255,.14);

    border: 1px solid rgba(255,255,255,.22);

    border-radius: 50px;

    padding: 9px 15px;

    display: flex;
    align-items: center;
    gap: 8px;

    white-space: nowrap;
}


.codoo-status-dot {
    width: 8px;
    height: 8px;
    background: #7ee2a8;
    border-radius: 50%;
}


/* ----------------------------------------------------------
   SUMMARY
   ---------------------------------------------------------- */

.codoo-summary {
    margin-top: 20px;

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

    gap: 16px;
}


.codoo-summary-card {
    background: var(--codoo-card);

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

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

    padding: 18px 20px;

    display: flex;
    align-items: center;

    gap: 14px;

    box-shadow:
        0 2px 10px rgba(30, 40, 50, .035);
}


.codoo-summary-icon {
    width: 44px;
    height: 44px;

    border-radius: 12px;

    background: var(--codoo-primary-soft);
    color: var(--codoo-primary);

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

    font-size: 21px;
}


.codoo-summary-card span {
    display: block;

    color: var(--codoo-muted);

    font-size: 12px;

    margin-bottom: 4px;
}


.codoo-summary-card strong {
    display: block;

    color: var(--codoo-text);

    font-size: 18px;
}


/* ----------------------------------------------------------
   SECTION TITLE
   ---------------------------------------------------------- */

.codoo-section-heading {
    margin: 31px 0 16px;
}


.codoo-section-heading h2 {
    margin: 0 0 5px;

    font-size: 21px;
    font-weight: 700;

    color: var(--codoo-text);
}


.codoo-section-heading p {
    margin: 0;

    color: var(--codoo-muted);

    font-size: 13px;
}


/* ----------------------------------------------------------
   APP GRID
   ---------------------------------------------------------- */

.codoo-app-grid {
    display: grid;

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

    gap: 18px;

    align-items: start;
}


/* ----------------------------------------------------------
   APP CARD
   ---------------------------------------------------------- */

.codoo-app-card {
    background: var(--codoo-card);

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

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

    overflow: hidden;

    box-shadow:
        0 3px 12px rgba(30,40,50,.04);

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


.codoo-app-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(30,40,50,.075);
}


/* ----------------------------------------------------------
   APP HEADER
   ---------------------------------------------------------- */

.codoo-app-header {
    padding: 17px 18px;

    background:
        linear-gradient(
            90deg,
            #fafbfc,
            #fff
        );

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


.codoo-app-title {
    display: flex;
    align-items: center;

    gap: 12px;
}


.codoo-app-symbol {
    width: 42px;
    height: 42px;

    border-radius: 11px;

    background: var(--codoo-blue-soft);

    color: var(--codoo-blue);

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

    font-size: 21px;

    flex: 0 0 auto;
}


.codoo-app-title h3 {
    margin: 0 0 3px;

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


.codoo-app-title h3 a {
    color: var(--codoo-text);
    text-decoration: none;
}


.codoo-app-title small {
    color: var(--codoo-muted);

    font-size: 11px;
}


/* ----------------------------------------------------------
   MODELS
   ---------------------------------------------------------- */

.codoo-model-list {
    padding: 4px 0;
}


.codoo-model-row {
    min-height: 48px;

    padding: 7px 16px;

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

    gap: 12px;

    border-bottom: 1px solid #f0f1f3;

    box-sizing: border-box;
}


.codoo-model-row:last-child {
    border-bottom: 0;
}


.codoo-model-row:hover {
    background: #fafbfc;
}


.codoo-model-name {
    min-width: 0;

    font-weight: 600;

    font-size: 13px;
}


.codoo-model-name a {
    color: #315f76;

    text-decoration: none;
}


.codoo-model-name a:hover {
    color: var(--codoo-primary);
}


/* ----------------------------------------------------------
   ACTION BUTTONS
   ---------------------------------------------------------- */

.codoo-model-actions {
    display: flex;
    align-items: center;

    gap: 6px;

    flex: 0 0 auto;
}


.codoo-action {
    padding: 5px 8px;

    border-radius: 6px;

    text-decoration: none !important;

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

    white-space: nowrap;

    transition: background .15s ease;
}


.codoo-action-add {
    color: #26734d !important;

    background: #edf8f2;
}


.codoo-action-add:hover {
    background: #dff2e8;
}


.codoo-action-change {
    color: #5d5060 !important;

    background: #f3eff2;
}


.codoo-action-change:hover {
    background: #e9e0e6;
}


/* ----------------------------------------------------------
   HEADER CLEANUP
   ---------------------------------------------------------- */

#header {
    box-shadow:
        0 2px 8px rgba(0,0,0,.06);
}


#site-name a {
    font-weight: 500;
}


.codoo-admin-global {
    box-shadow:
        0 2px 8px rgba(0,0,0,.05);
}


/* ----------------------------------------------------------
   RTL
   ---------------------------------------------------------- */

html[dir="rtl"] .codoo-dashboard,
html[dir="rtl"] .codoo-app-card,
html[dir="rtl"] .codoo-summary-card {
    direction: rtl;
}


html[dir="rtl"] .codoo-section-heading,
html[dir="rtl"] .codoo-app-title,
html[dir="rtl"] .codoo-model-name {
    text-align: right;
}


/* ----------------------------------------------------------
   LTR
   ---------------------------------------------------------- */

html[dir="ltr"] .codoo-dashboard,
html[dir="ltr"] .codoo-app-card,
html[dir="ltr"] .codoo-summary-card {
    direction: ltr;
}


html[dir="ltr"] .codoo-section-heading,
html[dir="ltr"] .codoo-app-title,
html[dir="ltr"] .codoo-model-name {
    text-align: left;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 1050px) {

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

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    .codoo-admin-dashboard #content {
        padding: 14px;
    }


    .codoo-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
    }


    .codoo-hero h1 {
        font-size: 22px;
    }


    .codoo-summary {
        grid-template-columns: 1fr;
    }


    .codoo-model-row {
        align-items: flex-start;
        flex-direction: column;
    }


    .codoo-model-actions {
        width: 100%;
    }


    .codoo-action {
        flex: 1;
        text-align: center;
    }

}


/* ----------------------------------------------------------
   VERY SMALL
   ---------------------------------------------------------- */

@media (max-width: 480px) {

    .codoo-hero-content {
        align-items: flex-start;
    }


    .codoo-hero-icon {
        width: 48px;
        height: 48px;

        font-size: 22px;
    }

}