@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');

:root {
    --veno-green: #0B5D4B;
    --veno-green-dark: #073E34;
    --veno-green-deep: #062E28;
    --veno-gold: #C99A3D;
    --veno-cream: #F7F5EF;
}

/*
|--------------------------------------------------------------------------
| FONT ONLY
|--------------------------------------------------------------------------
| لا نعدل inputs / labels / checkbox هنا.
| Filament يحتفظ بالتصميم الأصلي للفورم.
*/

html,
body,
.fi-body,
.fi-simple-layout,
.fi-sidebar,
.fi-topbar,
.fi-main,
.fi-btn,
.fi-input {
    font-family: "Cairo", Arial, sans-serif !important;
}

/*
|--------------------------------------------------------------------------
| LOGIN BACKGROUND
|--------------------------------------------------------------------------
*/

.fi-simple-layout {
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(201, 154, 61, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(11, 93, 75, 0.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #faf9f5 0%,
            #f1f7f4 100%
        ) !important;
}

/*
|--------------------------------------------------------------------------
| LOGIN CARD
|--------------------------------------------------------------------------
| الشكل الخارجي فقط.
| لا يوجد أي تعديل على label أو input.
*/

.fi-simple-main {
    background: #ffffff !important;

    border:
        1px solid rgba(11, 93, 75, 0.10) !important;

    border-radius:
        20px !important;

    box-shadow:
        0 20px 55px rgba(6, 62, 52, 0.12) !important;
}

.fi-simple-header-heading {
    color: var(--veno-green-dark) !important;
}

.fi-simple-main .fi-logo {
    color: var(--veno-green-dark) !important;
}

/*
|--------------------------------------------------------------------------
| ADMIN SIDEBAR
|--------------------------------------------------------------------------
*/

.fi-sidebar {
    background:
        linear-gradient(
            180deg,
            var(--veno-green-deep) 0%,
            var(--veno-green-dark) 100%
        ) !important;
}

.fi-sidebar-header {
    background: transparent !important;
}

.fi-sidebar-header .fi-logo {
    color: #ffffff !important;
}

.fi-sidebar-group-label {
    color: rgba(255,255,255,.55) !important;
}

.fi-sidebar-item-label {
    color: rgba(255,255,255,.90) !important;
}

.fi-sidebar-item-icon {
    color: rgba(255,255,255,.72) !important;
}

.fi-sidebar-item-button {
    border-radius: 9px !important;
}

.fi-sidebar-item-button:hover {
    background: rgba(255,255,255,.07) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background:
        linear-gradient(
            135deg,
            #C99A3D,
            #D8B15C
        ) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #062E28 !important;
}

/*
|--------------------------------------------------------------------------
| ADMIN CARDS
|--------------------------------------------------------------------------
*/

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: 14px !important;

    border:
        1px solid rgba(11,93,75,.07) !important;

    box-shadow:
        0 5px 20px rgba(6,62,52,.055) !important;
}

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

@media (max-width: 640px) {

    .fi-simple-main {
        border-radius: 15px !important;
    }
}


/* =========================================================
   VENO PHARMACY ERP
   FINAL HOVER / ACTIVE STATE FIX
========================================================= */


/* ---------------------------------------------------------
   SIDEBAR NORMAL ITEM
--------------------------------------------------------- */

.fi-sidebar .fi-sidebar-item-button {
    background-color: transparent !important;
    background-image: none !important;

    transition:
        background-color .16s ease,
        color .16s ease,
        transform .16s ease !important;
}


/* ---------------------------------------------------------
   SIDEBAR HOVER
   Prevent Filament white hover background
--------------------------------------------------------- */

.fi-sidebar .fi-sidebar-item-button:hover,
.fi-sidebar .fi-sidebar-item:hover > .fi-sidebar-item-button,
.fi-sidebar .fi-sidebar-item:hover .fi-sidebar-item-button {

    background-color:
        rgba(255, 255, 255, .09) !important;

    background-image:
        none !important;

    color:
        #FFFFFF !important;
}


/* Hover text */

.fi-sidebar
.fi-sidebar-item:hover
.fi-sidebar-item-label {

    color:
        #FFFFFF !important;
}


/* Hover icons */

.fi-sidebar
.fi-sidebar-item:hover
.fi-sidebar-item-icon {

    color:
        #D8B15C !important;
}


/* ---------------------------------------------------------
   ACTIVE SIDEBAR ITEM
--------------------------------------------------------- */

.fi-sidebar
.fi-sidebar-item.fi-active
.fi-sidebar-item-button {

    background-color:
        #C99A3D !important;

    background-image:
        linear-gradient(
            135deg,
            #C99A3D 0%,
            #DAB45E 100%
        ) !important;

    color:
        #062E28 !important;
}


/* Active item hover must stay gold */

.fi-sidebar
.fi-sidebar-item.fi-active:hover
.fi-sidebar-item-button,

.fi-sidebar
.fi-sidebar-item.fi-active
.fi-sidebar-item-button:hover {

    background-color:
        #C99A3D !important;

    background-image:
        linear-gradient(
            135deg,
            #C99A3D 0%,
            #DAB45E 100%
        ) !important;
}


/* Active text */

.fi-sidebar
.fi-sidebar-item.fi-active
.fi-sidebar-item-label,

.fi-sidebar
.fi-sidebar-item.fi-active:hover
.fi-sidebar-item-label {

    color:
        #062E28 !important;

    font-weight:
        600 !important;
}


/* Active icon */

.fi-sidebar
.fi-sidebar-item.fi-active
.fi-sidebar-item-icon,

.fi-sidebar
.fi-sidebar-item.fi-active:hover
.fi-sidebar-item-icon {

    color:
        #062E28 !important;
}


/* ---------------------------------------------------------
   SIDEBAR GROUP / COLLAPSIBLE BUTTONS
--------------------------------------------------------- */

.fi-sidebar-group-button:hover {

    background-color:
        rgba(255,255,255,.06) !important;

    color:
        #FFFFFF !important;
}


/* ---------------------------------------------------------
   TABLE ROW HOVER
--------------------------------------------------------- */

.fi-ta-row:hover {

    background-color:
        #F1F7F4 !important;
}


/* ---------------------------------------------------------
   TABLE / HEADER ACTION HOVER
--------------------------------------------------------- */

.fi-ta-actions a:hover,
.fi-ta-actions button:hover {

    background-color:
        rgba(11, 93, 75, .07) !important;
}


/* ---------------------------------------------------------
   DROPDOWN ITEM HOVER
--------------------------------------------------------- */

.fi-dropdown-list-item:hover {

    background-color:
        #F1F7F4 !important;
}


/* ---------------------------------------------------------
   GENERAL ICON BUTTON HOVER
--------------------------------------------------------- */

.fi-icon-btn:hover {

    background-color:
        rgba(11, 93, 75, .08) !important;
}


/* ---------------------------------------------------------
   TOPBAR BUTTON HOVER
--------------------------------------------------------- */

.fi-topbar button:hover {

    background-color:
        rgba(11, 93, 75, .06) !important;
}


/* ---------------------------------------------------------
   KEEP PRIMARY BUTTONS GREEN ON HOVER
--------------------------------------------------------- */

.fi-btn.fi-color-primary:hover {

    filter:
        brightness(.94);

    background-color:
        #0B5D4B !important;
}



/* ==========================================================
   VENO PHARMACY ERP - SIDEBAR FINAL V5
========================================================== */


/*
|--------------------------------------------------------------------------
| RESET ALL SIDEBAR ITEM BACKGROUNDS
|--------------------------------------------------------------------------
*/

.fi-sidebar a.fi-sidebar-item-button,
.fi-sidebar button.fi-sidebar-item-button,
.fi-sidebar .fi-sidebar-item-button {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    color: rgba(255,255,255,.90) !important;

    box-shadow: none !important;
}


/*
|--------------------------------------------------------------------------
| NORMAL TEXT + ICON
|--------------------------------------------------------------------------
*/

.fi-sidebar .fi-sidebar-item-label {
    color: rgba(255,255,255,.88) !important;
}

.fi-sidebar .fi-sidebar-item-icon {
    color: rgba(255,255,255,.70) !important;
}


/*
|--------------------------------------------------------------------------
| HOVER
|--------------------------------------------------------------------------
*/

.fi-sidebar a.fi-sidebar-item-button:hover,
.fi-sidebar button.fi-sidebar-item-button:hover,
.fi-sidebar .fi-sidebar-item-button:hover,
.fi-sidebar .fi-sidebar-item:hover > .fi-sidebar-item-button {

    background:
        rgba(255,255,255,.085) !important;

    background-color:
        rgba(255,255,255,.085) !important;

    background-image:
        none !important;

    color:
        #ffffff !important;

    box-shadow:
        none !important;
}


/*
|--------------------------------------------------------------------------
| HOVER LABEL
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item:hover
.fi-sidebar-item-label,

.fi-sidebar
.fi-sidebar-item-button:hover
.fi-sidebar-item-label {

    color:
        #ffffff !important;
}


/*
|--------------------------------------------------------------------------
| HOVER ICON
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item:hover
.fi-sidebar-item-icon,

.fi-sidebar
.fi-sidebar-item-button:hover
.fi-sidebar-item-icon {

    color:
        #D9B45F !important;
}


/*
|--------------------------------------------------------------------------
| ACTIVE - FILAMENT CLASS
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item.fi-active
> .fi-sidebar-item-button,

.fi-sidebar
.fi-sidebar-item.fi-active
.fi-sidebar-item-button {

    background:
        linear-gradient(
            135deg,
            #C99A3D 0%,
            #DFBA67 100%
        ) !important;

    background-color:
        #C99A3D !important;

    color:
        #062E28 !important;

    box-shadow:
        0 5px 14px
        rgba(201,154,61,.18) !important;
}


/*
|--------------------------------------------------------------------------
| ACTIVE - ARIA CURRENT
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item-button[aria-current="page"],

.fi-sidebar
a[aria-current="page"].fi-sidebar-item-button,

.fi-sidebar
a.fi-sidebar-item-button[aria-current="page"] {

    background:
        linear-gradient(
            135deg,
            #C99A3D 0%,
            #DFBA67 100%
        ) !important;

    background-color:
        #C99A3D !important;

    color:
        #062E28 !important;

    box-shadow:
        0 5px 14px
        rgba(201,154,61,.18) !important;
}


/*
|--------------------------------------------------------------------------
| ACTIVE TEXT
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item.fi-active
.fi-sidebar-item-label,

.fi-sidebar
.fi-sidebar-item-button[aria-current="page"]
.fi-sidebar-item-label {

    color:
        #062E28 !important;

    font-weight:
        700 !important;
}


/*
|--------------------------------------------------------------------------
| ACTIVE ICON
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item.fi-active
.fi-sidebar-item-icon,

.fi-sidebar
.fi-sidebar-item-button[aria-current="page"]
.fi-sidebar-item-icon {

    color:
        #062E28 !important;
}


/*
|--------------------------------------------------------------------------
| ACTIVE HOVER MUST STAY GOLD
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item.fi-active
.fi-sidebar-item-button:hover,

.fi-sidebar
.fi-sidebar-item-button[aria-current="page"]:hover {

    background:
        linear-gradient(
            135deg,
            #C99A3D 0%,
            #DFBA67 100%
        ) !important;

    background-color:
        #C99A3D !important;

    color:
        #062E28 !important;
}


/*
|--------------------------------------------------------------------------
| GROUP BUTTON
|--------------------------------------------------------------------------
*/

.fi-sidebar .fi-sidebar-group-button:hover {

    background:
        rgba(255,255,255,.06) !important;

    background-color:
        rgba(255,255,255,.06) !important;

    color:
        #ffffff !important;
}


/*
|--------------------------------------------------------------------------
| KILL WHITE BACKGROUND FROM ANY FILAMENT STATE
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item
:is(
    a,
    button
):hover {

    --tw-bg-opacity: 0 !important;
}


/*
|--------------------------------------------------------------------------
| SIDEBAR FOCUS
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item-button:focus-visible {

    outline:
        2px solid
        rgba(201,154,61,.55) !important;

    outline-offset:
        2px !important;
}



/* ==========================================================
   VENO PHARMACY ERP
   FILAMENT 4 REAL SIDEBAR CLASS FIX
   Actual class: .fi-sidebar-item-btn
========================================================== */


/*
|--------------------------------------------------------------------------
| NORMAL ITEM
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item
> .fi-sidebar-item-btn {

    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    box-shadow:
        none !important;

    color:
        rgba(255,255,255,.90) !important;

    border-radius:
        9px !important;

    transition:
        background-color .15s ease,
        color .15s ease !important;
}


/*
|--------------------------------------------------------------------------
| NORMAL TEXT
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item
> .fi-sidebar-item-btn
.fi-sidebar-item-label {

    color:
        rgba(255,255,255,.88) !important;
}


/*
|--------------------------------------------------------------------------
| NORMAL ICON
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item
> .fi-sidebar-item-btn
.fi-sidebar-item-icon {

    color:
        rgba(255,255,255,.72) !important;
}


/*
|--------------------------------------------------------------------------
| HOVER - ONLY NON ACTIVE ITEMS
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item:not(.fi-active)
> .fi-sidebar-item-btn:hover {

    background:
        rgba(255,255,255,.10) !important;

    background-color:
        rgba(255,255,255,.10) !important;

    background-image:
        none !important;

    box-shadow:
        none !important;

    color:
        #FFFFFF !important;
}


/*
|--------------------------------------------------------------------------
| HOVER TEXT
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item:not(.fi-active)
> .fi-sidebar-item-btn:hover
.fi-sidebar-item-label {

    color:
        #FFFFFF !important;
}


/*
|--------------------------------------------------------------------------
| HOVER ICON
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item:not(.fi-active)
> .fi-sidebar-item-btn:hover
.fi-sidebar-item-icon {

    color:
        #DDB85E !important;
}


/*
|--------------------------------------------------------------------------
| ACTIVE ITEM
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item.fi-active
> .fi-sidebar-item-btn {

    background:
        linear-gradient(
            135deg,
            #C99A3D 0%,
            #DDB85E 100%
        ) !important;

    background-color:
        #C99A3D !important;

    background-image:
        linear-gradient(
            135deg,
            #C99A3D 0%,
            #DDB85E 100%
        ) !important;

    box-shadow:
        0 5px 15px
        rgba(201,154,61,.22) !important;

    color:
        #062E28 !important;
}


/*
|--------------------------------------------------------------------------
| ACTIVE USING ARIA-CURRENT
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item-btn[aria-current="page"] {

    background:
        linear-gradient(
            135deg,
            #C99A3D 0%,
            #DDB85E 100%
        ) !important;

    background-color:
        #C99A3D !important;

    background-image:
        linear-gradient(
            135deg,
            #C99A3D 0%,
            #DDB85E 100%
        ) !important;

    box-shadow:
        0 5px 15px
        rgba(201,154,61,.22) !important;

    color:
        #062E28 !important;
}


/*
|--------------------------------------------------------------------------
| ACTIVE TEXT
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item.fi-active
> .fi-sidebar-item-btn
.fi-sidebar-item-label,

.fi-sidebar
.fi-sidebar-item-btn[aria-current="page"]
.fi-sidebar-item-label {

    color:
        #062E28 !important;

    font-weight:
        700 !important;
}


/*
|--------------------------------------------------------------------------
| ACTIVE ICON
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item.fi-active
> .fi-sidebar-item-btn
.fi-sidebar-item-icon,

.fi-sidebar
.fi-sidebar-item-btn[aria-current="page"]
.fi-sidebar-item-icon {

    color:
        #062E28 !important;
}


/*
|--------------------------------------------------------------------------
| ACTIVE ITEM HOVER
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item.fi-active
> .fi-sidebar-item-btn:hover,

.fi-sidebar
.fi-sidebar-item-btn[aria-current="page"]:hover {

    background:
        linear-gradient(
            135deg,
            #C99A3D 0%,
            #DDB85E 100%
        ) !important;

    background-color:
        #C99A3D !important;

    background-image:
        linear-gradient(
            135deg,
            #C99A3D 0%,
            #DDB85E 100%
        ) !important;

    color:
        #062E28 !important;
}


/*
|--------------------------------------------------------------------------
| REMOVE FILAMENT WHITE HOVER COMPLETELY
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item
> a.fi-sidebar-item-btn:hover,

.fi-sidebar
.fi-sidebar-item
> a.fi-sidebar-item-btn:focus,

.fi-sidebar
.fi-sidebar-item
> a.fi-sidebar-item-btn:focus-visible {

    --tw-bg-opacity:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| ACTIVE FOCUS
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-item.fi-active
> .fi-sidebar-item-btn:focus,

.fi-sidebar
.fi-sidebar-item.fi-active
> .fi-sidebar-item-btn:focus-visible {

    background:
        linear-gradient(
            135deg,
            #C99A3D,
            #DDB85E
        ) !important;
}


/*
|--------------------------------------------------------------------------
| GROUP BUTTON
|--------------------------------------------------------------------------
*/

.fi-sidebar
.fi-sidebar-group-button:hover {

    background:
        rgba(255,255,255,.05) !important;

    color:
        #FFFFFF !important;
}



/* =========================================================
   VENO PHARMACY ERP - PROFESSIONAL COMPACT DASHBOARD V7
========================================================= */

.veno-brand-lockup {
    display:flex;
    align-items:center;
    gap:8px;
    height:100%;
    white-space:nowrap;
}

.veno-brand-lockup-icon {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    flex: 0 0 2.75rem;
    object-fit: contain;
    object-position: center;
}

.veno-brand-lockup-copy {
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.veno-brand-lockup-copy strong {
    color:#073E34;
    font-size:13px;
    font-weight:700;
}

.veno-brand-lockup-copy small {
    margin-top:3px;
    color:#87948F;
    font-size:7px;
}


/* COMPACT FILAMENT */

.fi-topbar nav {
    min-height:50px !important;
}

.fi-sidebar-header {
    min-height:50px !important;
    padding-top:4px !important;
    padding-bottom:4px !important;
}

.fi-main {
    max-width:none !important;
}

.fi-main-ctn {
    padding:
        9px
        11px
        12px !important;
}

.fi-page {
    gap:6px !important;
}


/* ROOT */

.veno-dashboard {
    --vd-green:#0B5D4B;
    --vd-deep:#073E34;
    --vd-gold:#C99A3D;
    --vd-border:#E3EAE7;
    --vd-muted:#77827E;

    width:100%;
    color:#18231F;
}


/* HEADER */

.vd-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.vd-heading {
    display:flex;
    align-items:center;
    gap:9px;
}

.vd-heading-icon {
    width:35px;
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:var(--vd-green);
    background:#E9F4F0;
}

.vd-heading-icon svg {
    width:19px;
    height:19px;
}

.vd-heading h1 {
    margin:0;
    font-size:23px;
    line-height:1.15;
    font-weight:700;
}

.vd-heading p {
    margin:2px 0 0;
    color:var(--vd-muted);
    font-size:9px;
}

.vd-header-actions {
    display:flex;
    align-items:center;
    gap:6px;
}

.vd-small-btn,
.vd-date {
    min-height:31px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:0 9px;
    border:1px solid var(--vd-border);
    border-radius:8px;
    background:#fff;
    color:#495650;
    text-decoration:none;
    font-size:9px;
}

.vd-small-btn {
    color:var(--vd-green);
    font-weight:600;
}

.vd-small-btn:hover {
    background:#EDF6F2;
}

.vd-date svg {
    width:13px;
    height:13px;
    color:var(--vd-green);
}


/* KPI */

.vd-kpis {
    display:grid;
    grid-template-columns:
        repeat(6,minmax(0,1fr));
    gap:7px;
    margin-bottom:7px;
}

.vd-kpi {
    min-width:0;
    min-height:91px;
    display:flex;
    gap:8px;
    padding:11px 10px;
    border:1px solid var(--vd-border);
    border-radius:11px;
    background:#fff;
    box-shadow:
        0 2px 9px
        rgba(7,62,52,.035);
}

.vd-icon {
    width:31px;
    height:31px;
    flex:0 0 31px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    font-size:15px;
}

.vd-icon.green {
    background:#E6F3EE;
    color:#087558;
}

.vd-icon.gold {
    background:#FFF3D8;
    color:#B67A03;
}

.vd-icon.amber {
    background:#FFF2DF;
    color:#CE8500;
}

.vd-kpi > div {
    min-width:0;
    display:flex;
    flex-direction:column;
}

.vd-kpi label {
    min-height:25px;
    color:#59645F;
    font-size:8px;
    line-height:1.35;
    font-weight:600;
}

.vd-kpi strong {
    margin-top:1px;
    color:#101714;
    font-size:19px;
    line-height:1;
}

.vd-kpi small {
    margin-top:5px;
    color:#7D8883;
    font-size:7px;
}

.vd-danger {
    color:#D84C56 !important;
}

.vd-warning {
    color:#AA7200 !important;
}


/* PANELS */

.vd-panel {
    min-width:0;
    overflow:hidden;
    border:1px solid var(--vd-border);
    border-radius:11px;
    background:#fff;
    box-shadow:
        0 2px 9px
        rgba(7,62,52,.03);
}

.vd-panel > header {
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:7px 10px;
    border-bottom:1px solid #EEF2F0;
}

.vd-panel > header > div {
    display:flex;
    flex-direction:column;
}

.vd-panel header strong {
    font-size:11px;
    font-weight:700;
}

.vd-panel header small {
    margin-top:1px;
    color:#8B9591;
    font-size:7px;
}

.vd-chip {
    padding:3px 6px;
    border:1px solid #DEE7E3;
    border-radius:6px;
    color:#6E7975;
    background:#FAFBFA;
    font-size:7px;
}


/* MIDDLE */

.vd-middle {
    display:grid;
    grid-template-columns:
        minmax(210px,.82fr)
        minmax(390px,1.6fr)
        minmax(230px,.95fr);
    gap:7px;
    margin-bottom:7px;
}


/* ALERTS */

.vd-alerts {
    min-height:183px;
    padding:3px 8px 6px;
}

.vd-alert {
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:7px;
    padding:7px 2px;
    border-bottom:1px solid #EFF2F0;
}

.vd-alert > div {
    display:flex;
    flex-direction:column;
}

.vd-alert strong {
    font-size:8px;
}

.vd-alert small {
    margin-top:2px;
    color:#89938F;
    font-size:7px;
}

.vd-alert-badge {
    padding:3px 5px;
    border-radius:999px;
    font-size:6px;
    font-weight:600;
}

.vd-alert-badge.danger {
    color:#B6333D;
    background:#FCE7E9;
}

.vd-alert-badge.warning {
    color:#986500;
    background:#FFF0C9;
}

.vd-empty {
    min-height:178px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.vd-empty > span {
    width:29px;
    height:29px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:6px;
    border-radius:50%;
    color:#087558;
    background:#E9F5F0;
    font-weight:700;
}

.vd-empty strong {
    font-size:9px;
}

.vd-empty small {
    max-width:170px;
    margin-top:3px;
    color:#949E9A;
    font-size:6px;
}


/* BARS */

.vd-bars {
    height:183px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px;
    padding:
        12px
        12px
        7px;
}

.vd-bar-item {
    height:100%;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
}

.vd-bar-track {
    width:100%;
    height:145px;
    display:flex;
    align-items:flex-end;
    border-bottom:1px solid #DDE5E2;
    background:
        repeating-linear-gradient(
            to top,
            transparent 0,
            transparent 35px,
            #EFF3F1 36px
        );
}

.vd-bar {
    width:58%;
    max-width:28px;
    margin:auto auto 0;
    border-radius:5px 5px 1px 1px;
    background:
        linear-gradient(
            180deg,
            #0B8060,
            #0B5D4B
        );
    transition:height .2s ease;
}

.vd-bar-item small {
    color:#76827D;
    font-size:6px;
}


/* DISTRIBUTION */

.vd-distribution {
    min-height:183px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    padding:10px;
}

.vd-donut {
    width:107px;
    height:107px;
    flex:0 0 107px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    position:relative;
}

.vd-donut::after {
    content:"";
    position:absolute;
    width:63px;
    height:63px;
    border-radius:50%;
    background:#fff;
}

.vd-donut > div {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.vd-donut strong {
    font-size:16px;
}

.vd-donut small {
    color:#7E8985;
    font-size:7px;
}

.vd-legend {
    min-width:95px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.vd-legend > div {
    display:grid;
    grid-template-columns:
        7px
        1fr
        auto;
    align-items:center;
    gap:4px;
    font-size:7px;
}

.vd-legend label {
    color:#58645F;
}

.dot {
    width:6px;
    height:6px;
    border-radius:50%;
}

.dot.green {
    background:#0B5D4B;
}

.dot.soft {
    background:#6AAF96;
}

.dot.gold {
    background:#D7A538;
}


/* BOTTOM */

.vd-bottom {
    display:grid;
    grid-template-columns:
        minmax(230px,.7fr)
        minmax(550px,2.3fr);
    gap:7px;
}

.vd-summary {
    display:grid;
    grid-template-columns:
        repeat(2,1fr);
    gap:6px;
    padding:8px;
}

.vd-summary-box {
    min-height:76px;
    padding:9px;
    border:1px solid #E6ECE9;
    border-radius:9px;
    position:relative;
}

.vd-summary-box::after {
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:3px;
}

.vd-summary-box.green::after {
    background:#0B8161;
}

.vd-summary-box.gold::after {
    background:#D39A1B;
}

.vd-summary-box label {
    color:#4D5954;
    font-size:8px;
}

.vd-summary-box strong {
    display:block;
    margin-top:8px;
    font-size:18px;
}

.vd-summary-box small {
    color:#808B86;
    font-size:6px;
}

.vd-summary-line {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:5px 7px;
    border-radius:7px;
    background:#F7F9F8;
    color:#65716C;
    font-size:7px;
}

.vd-summary-line strong {
    color:#15201C;
    font-size:9px;
}


/* TABLE */

.vd-table-wrap {
    overflow:auto;
}

.vd-operations table {
    width:100%;
    border-collapse:collapse;
    font-size:7px;
}

.vd-operations th {
    padding:7px 8px;
    color:#58645F;
    background:#F7F9F8;
    border-bottom:1px solid #E8EEEB;
    text-align:right;
    font-weight:600;
}

.vd-operations td {
    padding:7px 8px;
    color:#4D5954;
    border-bottom:1px solid #EFF2F0;
    white-space:nowrap;
}

.green-text {
    color:#08775A !important;
}

.vd-success {
    padding:2px 5px;
    border-radius:999px;
    color:#087558;
    background:#E8F5F0;
    font-size:6px;
}

.vd-no-data {
    height:93px;
    color:#909B96 !important;
    text-align:center !important;
    white-space:normal !important;
}


/* RESPONSIVE */

@media (max-width:1250px) {

    .vd-kpis {
        grid-template-columns:
            repeat(3,1fr);
    }

    .vd-middle {
        grid-template-columns:
            1fr
            1.5fr;
    }

    .vd-middle .vd-panel:last-child {
        grid-column:
            span 2;
    }
}

@media (max-width:850px) {

    .vd-header {
        align-items:flex-start;
        flex-direction:column;
    }

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

    .vd-middle,
    .vd-bottom {
        grid-template-columns:
            1fr;
    }

    .vd-middle .vd-panel:last-child {
        grid-column:auto;
    }
}

@media (max-width:520px) {

    .fi-main-ctn {
        padding:7px !important;
    }

    .vd-kpis {
        grid-template-columns:
            1fr;
    }

    .vd-header-actions {
        flex-wrap:wrap;
    }

    .vd-distribution {
        flex-direction:column;
    }
}


/* ==========================================================
   VENO PHARMACY ERP
   TYPOGRAPHY / READABILITY V8
   Bigger text while keeping Compact Dashboard
========================================================== */


/* ----------------------------------------------------------
   MAIN DASHBOARD TITLE
---------------------------------------------------------- */

.vd-heading h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
}

.vd-heading p {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   HEADER BUTTONS + DATE
---------------------------------------------------------- */

.vd-small-btn,
.vd-date {
    min-height: 33px !important;

    padding-left: 11px !important;
    padding-right: 11px !important;

    font-size: 10.5px !important;
}


/* ----------------------------------------------------------
   KPI CARDS
---------------------------------------------------------- */

.vd-kpi {
    min-height: 96px !important;

    padding:
        12px
        11px !important;
}

.vd-kpi label {
    min-height: 28px !important;

    font-size: 10px !important;

    line-height: 1.45 !important;

    font-weight: 600 !important;
}

.vd-kpi strong {
    margin-top: 2px !important;

    font-size: 23px !important;

    line-height: 1.05 !important;

    font-weight: 700 !important;
}

.vd-kpi small {
    margin-top: 5px !important;

    font-size: 8.5px !important;

    line-height: 1.4 !important;
}

.vd-icon {
    width: 34px !important;
    height: 34px !important;

    flex-basis: 34px !important;

    font-size: 17px !important;
}


/* ----------------------------------------------------------
   PANEL TITLES
---------------------------------------------------------- */

.vd-panel > header {
    min-height: 45px !important;

    padding:
        8px
        11px !important;
}

.vd-panel header strong {
    font-size: 13px !important;

    line-height: 1.4 !important;

    font-weight: 700 !important;
}

.vd-panel header small {
    margin-top: 2px !important;

    font-size: 8.5px !important;

    line-height: 1.4 !important;
}

.vd-chip {
    font-size: 8.5px !important;

    padding:
        4px
        7px !important;
}


/* ----------------------------------------------------------
   ALERTS
---------------------------------------------------------- */

.vd-alert strong {
    font-size: 10px !important;

    line-height: 1.4 !important;
}

.vd-alert small {
    margin-top: 3px !important;

    font-size: 8px !important;

    line-height: 1.4 !important;
}

.vd-alert-badge {
    font-size: 7.5px !important;

    padding:
        4px
        7px !important;
}

.vd-empty strong {
    font-size: 10.5px !important;
}

.vd-empty small {
    margin-top: 4px !important;

    font-size: 7.5px !important;

    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   SALES CHART
---------------------------------------------------------- */

.vd-bar-item small {
    font-size: 8px !important;

    font-weight: 500 !important;
}


/* ----------------------------------------------------------
   PRODUCT DISTRIBUTION
---------------------------------------------------------- */

.vd-donut strong {
    font-size: 20px !important;

    font-weight: 700 !important;
}

.vd-donut small {
    font-size: 8.5px !important;
}

.vd-legend > div {
    font-size: 8.5px !important;
}

.vd-legend label {
    font-size: 8.5px !important;
}

.vd-legend strong {
    font-size: 9px !important;
}


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

.vd-summary-box label {
    font-size: 9.5px !important;

    font-weight: 600 !important;
}

.vd-summary-box strong {
    margin-top: 7px !important;

    font-size: 21px !important;
}

.vd-summary-box small {
    font-size: 8px !important;
}

.vd-summary-line {
    font-size: 8.5px !important;

    padding:
        6px
        8px !important;
}

.vd-summary-line strong {
    font-size: 10px !important;
}


/* ----------------------------------------------------------
   RECENT OPERATIONS TABLE
---------------------------------------------------------- */

.vd-operations table {
    font-size: 9px !important;
}

.vd-operations th {
    padding:
        8px
        9px !important;

    font-size: 9px !important;

    font-weight: 600 !important;
}

.vd-operations td {
    padding:
        8px
        9px !important;

    font-size: 9px !important;

    line-height: 1.45 !important;
}

.vd-success {
    padding:
        3px
        6px !important;

    font-size: 7.5px !important;
}

.vd-no-data {
    font-size: 9px !important;
}


/* ----------------------------------------------------------
   FILAMENT SIDEBAR
---------------------------------------------------------- */

.fi-sidebar-item-label {
    font-size: 13px !important;

    line-height: 1.4 !important;

    font-weight: 500 !important;
}

.fi-sidebar-group-label {
    font-size: 11px !important;

    font-weight: 500 !important;
}


/* navigation item vertical space */

.fi-sidebar-item-btn {
    min-height: 39px !important;
}


/* ----------------------------------------------------------
   BRAND
---------------------------------------------------------- */

.veno-brand-lockup-copy strong {
    font-size: 14px !important;

    font-weight: 700 !important;
}

.veno-brand-lockup-copy small {
    font-size: 8px !important;
}


/* ----------------------------------------------------------
   FILAMENT TOP SEARCH / GENERAL
---------------------------------------------------------- */

.fi-global-search-field input {
    font-size: 12px !important;
}


/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media (max-width: 1250px) {

    .vd-heading h1 {
        font-size: 25px !important;
    }

    .vd-kpi label {
        font-size: 10.5px !important;
    }

    .vd-kpi strong {
        font-size: 24px !important;
    }
}


@media (max-width: 600px) {

    .vd-heading h1 {
        font-size: 23px !important;
    }

    .vd-heading p {
        font-size: 10px !important;
    }

    .vd-kpi label {
        font-size: 11px !important;
    }

    .vd-kpi strong {
        font-size: 24px !important;
    }

    .vd-panel header strong {
        font-size: 13px !important;
    }
}