/* =========================================================
   DWIVO PREMIUM UI - GLOBAL DESIGN SYSTEM
   ========================================================= */

:root {
/*     ---------- Colors ---------- */

    --dwivo-bg: #f3f6fb;
    --dwivo-card: rgba(255, 255, 255, 0.88);
    --dwivo-ink: #14213d;
    --dwivo-muted: #71809d;
    --dwivo-line: #e4e9f2;
    --dwivo-blue: #2854dd;
    --dwivo-indigo: #513bd9;
    --dwivo-cyan: #18b8df;
    --dwivo-green: #0c9d68;
    --dwivo-red: #d83b48;
    --dwivo-amber: #e89a19;
/*     ---------- Radius ---------- */

    --dwivo-radius-sm: 10px;
    --dwivo-radius-md: 14px;
    --dwivo-radius-lg: 17px;
    --dwivo-radius-xl: 20px;
    --dwivo-radius-hero: 27px;
/*     ---------- Shadows ---------- */

    --dwivo-shadow: 0 16px 44px rgba(38, 51, 98, 0.09);
    --dwivo-shadow-sm: 0 7px 28px rgba(50, 65, 105, 0.05);
    --dwivo-shadow-lg: 0 23px 50px rgba(54, 66, 177, 0.22);
/*     ---------- Layout ---------- */

    --dwivo-sidebar-width: 248px;
/*     ---------- Typography ---------- */

    --dwivo-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
/*     New: semantic shell-bg vars so rgba values can flip */
    --dwivo-appbar-bg: rgba(255, 255, 255, 0.88);
    --dwivo-drawer-bg: rgba(255, 255, 255, 0.90);
    --dwivo-version-bg: rgba(255, 255, 255, 0.60);
    --dwivo-nav-hover-bg: #f2f5fb;
    --dwivo-nav-hover-text: var(--dwivo-ink);
}

/* =========================================================
   DARK THEME OVERRIDES
   ========================================================= */

html.dark {
/*     Palette — navy-tinted blacks instead of flat grey */
    --dwivo-bg: #0d0f1a;
    --dwivo-card: rgba(19, 22, 38, 0.90);
    --dwivo-ink: #e8edf5;
    --dwivo-muted: #8a96b0;
    --dwivo-line: rgba(60, 80, 160, 0.18);
    --dwivo-shadow: 0 16px 44px rgba(0, 6, 40, 0.50);
    --dwivo-shadow-sm: 0 7px 28px rgba(0, 6, 40, 0.35);
    --dwivo-shadow-lg: 0 23px 60px rgba(10, 20, 100, 0.55);
/*     Shell backgrounds */
    --dwivo-appbar-bg: rgba(13, 15, 27, 0.88);
    --dwivo-drawer-bg: rgba(11, 13, 24, 0.96);
    --dwivo-version-bg: rgba(255, 255, 255, 0.03);
    --dwivo-nav-hover-bg: rgba(40, 84, 221, 0.10);
    --dwivo-nav-hover-text: #e8edf5;
}

/*     ─── Logo ─────────────────────────────────────────────── */
    html.dark .dwivo-logo img {
/*         brightens a coloured logo + adds a soft blue glow */
        filter: brightness(1.18) drop-shadow(0 0 10px rgba(40, 84, 221, 0.45));
        transition: filter 0.3s ease;
    }
/*     If your logo is a dark/black mark on a transparent bg,
   swap the line above for this instead:*/
   filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(40,84,221,0.5)); 

/*     ─── App background ────────────────────────────────────── */
    html.dark .dwivo-app-background {
        background: radial-gradient(ellipse at 12% 8%, rgba(40, 84, 221, 0.22), transparent 32%), radial-gradient(ellipse at 88% 6%, rgba(24, 184, 223, 0.14), transparent 30%), radial-gradient(ellipse at 50% 85%, rgba(81, 59, 217, 0.12), transparent 38%), linear-gradient(165deg, #0a0c18 0%, #0d0f1c 55%, #090b16 100%);
    }

/*     ─── App bar ───────────────────────────────────────────── */
    html.dark .dwivo-appbar {
        background: rgba(11, 13, 24, 0.88) !important;
        border-bottom: 1px solid rgba(60, 90, 200, 0.18) !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.50), inset 0 -1px 0 rgba(60, 90, 200, 0.12) !important;
    }

        html.dark .dwivo-appbar .mud-icon-button {
            color: #c8d0e4 !important;
        }

            html.dark .dwivo-appbar .mud-icon-button:hover {
                background: rgba(40, 84, 221, 0.14) !important;
            }

/*     ─── Drawer ────────────────────────────────────────────── */
    html.dark .dwivo-drawer {
        background: rgba(11, 13, 24, 0.96) !important;
        border-right: 1px solid rgba(60, 90, 200, 0.16) !important;
        box-shadow: 6px 0 48px rgba(0, 0, 0, 0.55), inset -1px 0 0 rgba(60, 90, 200, 0.10) !important;
    }

/*     ─── Drawer header ─────────────────────────────────────── */
    html.dark .dwivo-drawer-header {
        border-bottom: 1px solid rgba(60, 90, 200, 0.14);
        background: linear-gradient( 180deg, rgba(20, 24, 50, 0.60) 0%, transparent 100% ) !important;
    }

/*     ─── Nav links ─────────────────────────────────────────── */
    html.dark .dwivo-nav-menu .mud-nav-link {
        color: #8a96b0;
    }

        html.dark .dwivo-nav-menu .mud-nav-link .mud-nav-link-icon {
            color: #5d6a88;
        }

        html.dark .dwivo-nav-menu .mud-nav-link:hover {
            background: rgba(40, 84, 221, 0.10);
            color: #e8edf5;
        }

            html.dark .dwivo-nav-menu .mud-nav-link:hover .mud-nav-link-icon {
                color: #a0aacc;
            }

        html.dark .dwivo-nav-menu .mud-nav-link.active {
            background: linear-gradient(135deg, rgba(40, 84, 221, 0.88), rgba(81, 59, 217, 0.88) ) !important;
            color: #fff !important;
            box-shadow: 0 4px 22px rgba(40, 84, 221, 0.40), 0 0 0 1px rgba(40, 84, 221, 0.25) !important;
        }

            html.dark .dwivo-nav-menu .mud-nav-link.active .mud-nav-link-icon {
                color: #fff !important;
            }

/*     Scrollbar in dark nav */
    html.dark .dwivo-nav-menu::-webkit-scrollbar-thumb {
        background: rgba(60, 80, 160, 0.30);
    }

/*     ─── Main content ──────────────────────────────────────── */
    html.dark .dwivo-main-content {
        background: radial-gradient(ellipse at 8% 4%, rgba(40, 84, 221, 0.09), transparent 28%), radial-gradient(ellipse at 92% 6%, rgba(24, 184, 223, 0.06), transparent 26%), linear-gradient(#0d0f1a, #0b0d18);
    }

/*     ─── Cards / Paper ─────────────────────────────────────── */
    html.dark .mud-card {
        background: rgba(17, 20, 36, 0.92);
        border: 1px solid rgba(60, 80, 160, 0.16);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    html.dark .mud-paper {
        background: rgba(17, 20, 36, 0.88);
    }

    html.dark .dwivo-card {
        background: rgba(17, 20, 36, 0.92);
        border-color: rgba(60, 80, 160, 0.16);
    }

/*     ─── Table ─────────────────────────────────────────────── */
    html.dark .mud-table thead {
        background: rgba(14, 16, 30, 0.90);
    }

        html.dark .mud-table thead th {
            color: #5d6a88;
            border-bottom: 1px solid rgba(60, 80, 160, 0.18);
        }

    html.dark .mud-table tbody td {
        color: #c8d0e4;
        border-bottom: 1px solid rgba(40, 50, 100, 0.18);
    }

    html.dark .mud-table tbody tr:hover {
        background: rgba(40, 84, 221, 0.06);
    }

    html.dark .mud-table-pagination-toolbar {
        background: rgba(14, 16, 30, 0.80);
        border-top: 1px solid rgba(60, 80, 160, 0.14);
    }

/*     dwivo-table-card */
    html.dark .dwivo-table-card {
        background: rgba(17, 20, 36, 0.90);
        border-color: rgba(60, 80, 160, 0.16);
    }

        html.dark .dwivo-table-card th {
            background: rgba(14, 16, 30, 0.90);
            color: #5d6a88;
            border-color: rgba(60, 80, 160, 0.16);
        }

        html.dark .dwivo-table-card td {
            color: #b8c2d8;
            border-bottom-color: rgba(40, 50, 100, 0.18);
        }

/*     ─── Buttons ───────────────────────────────────────────── */
    html.dark .mud-button-outlined {
        border-color: rgba(60, 80, 160, 0.28) !important;
        color: #8a96b0 !important;
        background: rgba(255, 255, 255, 0.02);
    }

        html.dark .mud-button-outlined:hover {
            background: rgba(40, 84, 221, 0.08) !important;
            border-color: rgba(40, 84, 221, 0.40) !important;
            color: #c8d0e4 !important;
        }

    html.dark .dwivo-secondary {
        color: #8a96b0 !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border-color: rgba(60, 80, 160, 0.25) !important;
    }

/*     ─── Icon buttons ──────────────────────────────────────── */
    html.dark .mud-icon-button:hover {
        background: rgba(40, 84, 221, 0.12);
    }

/*     ─── Inputs ────────────────────────────────────────────── */
    html.dark .mud-input-outlined-border {
        border-color: rgba(60, 80, 160, 0.28) !important;
    }

    html.dark .mud-input-outlined:hover .mud-input-outlined-border {
        border-color: rgba(40, 84, 221, 0.45) !important;
    }

    html.dark .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
        border-color: var(--dwivo-blue) !important;
        box-shadow: 0 0 0 3px rgba(40, 84, 221, 0.15);
    }

    html.dark .mud-input-label {
        color: #5d6a88;
    }

 /*     ─── Select / Popover ──────────────────────────────────── */
    html.dark .mud-popover {
        background: rgba(15, 17, 32, 0.98);
        border: 1px solid rgba(60, 80, 160, 0.20);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.60);
    }

    html.dark .mud-list-item:hover {
        background: rgba(40, 84, 221, 0.10);
    }

/*     ─── Dialog ────────────────────────────────────────────── */
    html.dark .mud-dialog {
        background: rgba(15, 17, 32, 0.98);
        border: 1px solid rgba(60, 80, 160, 0.18);
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.70);
    }

    html.dark .mud-dialog-content {
        color: #8a96b0;
    }

/*     ─── Workspace card ────────────────────────────────────── */
    html.dark .dwivo-workspace-card {
        background: linear-gradient( 135deg, rgba(28, 56, 180, 0.90) 0%, rgba(65, 45, 185, 0.90) 100% ) !important;
        border: 1px solid rgba(80, 110, 220, 0.30);
        box-shadow: 0 10px 30px rgba(20, 40, 160, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    }

/*     ─── Version footer ────────────────────────────────────── */
    html.dark .dwivo-version {
        background: rgba(255, 255, 255, 0.02);
        border-top: 1px solid rgba(60, 80, 160, 0.14);
    }

/*     ─── Dashboard stat / card ─────────────────────────────── */
    html.dark .stat,
    html.dark .card {
        background: rgba(17, 20, 36, 0.90);
        border-color: rgba(60, 80, 160, 0.16);
    }

        html.dark .stat .bubble {
            background: rgba(40, 84, 221, 0.18);
            color: #6e9aff;
        }

/*     ─── Chips ─────────────────────────────────────────────── */
    html.dark .dwivo-badge-blue {
        color: #6e9aff;
        background: rgba(40, 84, 221, 0.18);
    }

    html.dark .dwivo-badge-green {
        color: #3dd68c;
        background: rgba(12, 157, 104, 0.18);
    }

    html.dark .dwivo-badge-red {
        color: #f07078;
        background: rgba(216, 59, 72, 0.18);
    }

    html.dark .dwivo-badge-gray {
        color: #8a96b0;
        background: rgba(255, 255, 255, 0.08);
    }

    html.dark .dwivo-badge-amber {
        color: #ffc55a;
        background: rgba(232, 154, 25, 0.18);
    }

/*     ─── Smooth global transition ──────────────────────────── */
    html.dark *,
    html.dark *::before,
    html.dark *::after {
        transition: background-color 0.25s ease, border-color 0.25s ease, color 0.20s ease, box-shadow 0.25s ease;
    }
/*     Don't transition things that shouldn't animate */
    html.dark .mud-nav-link,
    html.dark .mud-button-root,
    html.dark img {
        transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, filter 0.25s ease;
    }


/* =========================================================
   GLOBAL DOCUMENT
   ========================================================= */

html, body {
    margin: 0;
    min-height: 100%;
    font-family: var(--dwivo-font);
    color: var(--dwivo-ink);  /*← was already here, good*/ 
    background: var(--dwivo-bg);  /*← was already here, good*/ 
    transition: background 0.25s ease, color 0.25s ease;  /*← ADD smooth transition */ 
}


/* Prevent MudBlazor/app containers from introducing*/
/*   unwanted horizontal overflow */

html,
body,
#app {
    min-height: 100%;
}


/* =========================================================
   GLOBAL BACKGROUND
   ========================================================= */

.dwivo-app-background {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: radial-gradient( circle at 8% 4%, rgba(75, 78, 230, 0.13), transparent 26% ), radial-gradient( circle at 92% 7%, rgba(24, 184, 223, 0.12), transparent 24% ), linear-gradient( #fbfcff, #f2f5fa );
}


/* =========================================================
   COMMON CARD
   ========================================================= */

.dwivo-card {
    background: var(--dwivo-card);
    border: 1px solid rgba(223, 228, 239, 0.94);
    box-shadow: var(--dwivo-shadow);
    border-radius: var(--dwivo-radius-xl);
}


/* =========================================================
   COMMON PAGE CONTAINER
   ========================================================= */

.dwivo-content {
    min-width: 0;
    padding: 16px 22px 38px;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.dwivo-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 12px 0 18px;
}

    .dwivo-page-header h1 {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.7px;
        color: var(--dwivo-ink);
    }

    .dwivo-page-header p {
        margin: 6px 0 0;
        color: var(--dwivo-muted);
        font-size: 13px;
    }

/*
 =========================================================
   ACTION GROUP
   ========================================================= */

.dwivo-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}


/* =========================================================
   DWIVO PRIMARY BUTTON
   ========================================================= */

.dwivo-primary {
    color: #fff !important;
    background: linear-gradient( 135deg, var(--dwivo-blue), var(--dwivo-indigo) ) !important;
    box-shadow: 0 8px 18px rgba(52, 68, 216, 0.20);
}


/* =========================================================
   DWIVO SECONDARY BUTTON
   ========================================================= */

.dwivo-secondary {
    color: #50607e !important;
    background: #fff !important;
    border: 1px solid var(--dwivo-line) !important;
}


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

.dwivo-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 9px;
}

.dwivo-badge-blue {
    color: #2453d5;
    background: #e7edff;
}

.dwivo-badge-green {
    color: #087c51;
    background: #def7ec;
}

.dwivo-badge-red {
    color: #bd343f;
    background: #fde6e8;
}

.dwivo-badge-gray {
    color: #6f788a;
    background: #ebedf2;
}

.dwivo-badge-amber {
    color: #a86c0d;
    background: #fff1d7;
}


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

.dwivo-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .dwivo-field label {
        font-size: 11px;
        color: #66748f;
        font-weight: 700;
    }


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

@media (max-width: 800px) {

    .dwivo-content {
        padding: 12px;
    }

    .dwivo-page-header {
        align-items: flex-start;
        gap: 12px;
    }
}


@media (max-width: 520px) {

    .dwivo-page-header {
        flex-direction: column;
    }

    .dwivo-actions {
        flex-wrap: wrap;
    }
}

/* =========================================================
   DWIVO APPLICATION SHELL
   ========================================================= */

.dwivo-layout {
    min-height: 100vh;
    background: var(--dwivo-bg);
}


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

/* CHANGE: .dwivo-appbar — swap hardcoded white for the new variable */
.dwivo-appbar {
    height: 64px !important;
    background: var(--dwivo-appbar-bg) !important;  /*← was rgba(255,255,255,0.88)*/ 
    color: var(--dwivo-ink) !important;
    border-bottom: 1px solid var(--dwivo-line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 4px 20px rgba(38, 51, 98, 0.04) !important;
    transition: background 0.25s ease, color 0.25s ease;
}

    .dwivo-appbar .mud-icon-button {
        color: var(--dwivo-ink) !important;
    }

    .dwivo-appbar .mud-typography {
        font-weight: 700;
        letter-spacing: -0.2px;
    }


/* =========================================================
   DRAWER
   ========================================================= */

/* CHANGE: .dwivo-drawer — swap hardcoded white for the new variable */
.dwivo-drawer {
    width: 248px !important;
    background: var(--dwivo-drawer-bg) !important;  /*← was rgba(255,255,255,0.90)*/
    border-right: 1px solid var(--dwivo-line) !important;
    box-shadow: 10px 0 35px rgba(38, 51, 98, 0.05) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    display: flex !important;
    flex-direction: column !important;
    transition: background 0.25s ease;
}


/* =========================================================
   DRAWER HEADER
   ========================================================= */

.dwivo-drawer-header {
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 18px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--dwivo-line);
}

.dwivo-logo {
    display: flex;
    align-items: center;
}

    .dwivo-logo img {
        object-fit: contain;
        max-width: 160px;
    }


/* =========================================================
   NAVIGATION
   ========================================================= */

.dwivo-nav-menu {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 14px 10px 10px !important;
}

    .dwivo-nav-menu::-webkit-scrollbar {
        width: 5px;
    }

    .dwivo-nav-menu::-webkit-scrollbar-thumb {
        background: #d9deea;
        border-radius: 999px;
    }


/*     Regular MudNavLink */

    .dwivo-nav-menu .mud-nav-link {
        min-height: 42px;
        margin: 4px 0;
        padding: 9px 12px;
        border-radius: 11px;
        color: var(--dwivo-muted);
        font-size: 13px;
        font-weight: 600;
        transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

/*         CHANGE: .dwivo-nav-menu .mud-nav-link:hover — swap hardcoded colour for variable */
        .dwivo-nav-menu .mud-nav-link:hover {
            background: var(--dwivo-nav-hover-bg);  /*← was #f2f5fb */
            color: var(--dwivo-nav-hover-text);  /*← was var(--dwivo-ink) */
        }

        .dwivo-nav-menu .mud-nav-link .mud-nav-link-icon {
            color: #8793aa;
            margin-right: 12px;
        }

        .dwivo-nav-menu .mud-nav-link.active {
            color: #fff !important;
            background: linear-gradient( 135deg, var(--dwivo-blue), var(--dwivo-indigo) ) !important;
            box-shadow: 0 8px 20px rgba(52, 68, 216, 0.18);
        }

            .dwivo-nav-menu .mud-nav-link.active .mud-nav-link-icon {
                color: #fff !important;
            }


/*     =========================================================
   NAVIGATION GROUPS
   ========================================================= */

    .dwivo-nav-menu .mud-nav-group {
        margin-top: 5px;
    }

        .dwivo-nav-menu .mud-nav-group > .mud-nav-link {
            font-weight: 700;
        }

        .dwivo-nav-menu .mud-nav-group .mud-nav-link {
            padding-left: 14px;
        }


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

.dwivo-drawer-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.dwivo-workspace-wrapper {
    padding: 12px;
}

.dwivo-workspace-card {
    padding: 15px;
    color: #fff !important;
    background: linear-gradient( 135deg, #2854dd 0%, #513bd9 100% ) !important;
    border-radius: 17px;
    box-shadow: 0 12px 28px rgba(52, 68, 216, 0.20);
}

.dwivo-workspace-label {
    display: block;
    color: rgba(255, 255, 255, 0.68) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-bottom: 3px;
}

.dwivo-workspace-name {
    display: block;
    margin-bottom: 12px;
    color: #fff !important;
    font-weight: 700 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   UPDATED WORKSPACE BUTTON
   ========================================================= */

.dwivo-workspace-button {
    width: 100%;
    color: var(--dwivo-blue) !important;  /* Changes text to Dwivo Blue for contrast */
    background: #ffffff !important;  /* Solid white background */
    border: none !important;  /* Removes the transparent border */
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 700 !important;  /* Makes the text a bit bolder */ 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;  /* Adds a soft drop shadow */
}

    .dwivo-workspace-button:hover {
        background: #f3f6fb !important;  /* Slight grey/blue tint on hover */
        transform: translateY(-1px);  /* Subtle lift effect */
        transition: all 0.2s ease;
    }


/* =========================================================
   VERSION
   ========================================================= */

/* CHANGE: .dwivo-version — swap hardcoded white for variable */
.dwivo-version {
    padding: 10px;
    border-top: 1px solid var(--dwivo-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--dwivo-version-bg);  /* was rgba(255,255,255,0.60) */
}

.dwivo-version-number {
    color: var(--dwivo-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.15;
}

.dwivo-version-label {
    color: #9aa4b5 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.1;
}


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

.dwivo-main-content {
    min-height: calc(100vh - 64px);
    background: radial-gradient( circle at 8% 4%, rgba(75, 78, 230, 0.08), transparent 25% ), radial-gradient( circle at 92% 7%, rgba(24, 184, 223, 0.07), transparent 24% ), linear-gradient( #fbfcff, #f3f6fb );
}


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

@media (max-width: 800px) {

    .dwivo-drawer {
        width: 248px !important;
    }

    .dwivo-main-content {
        min-height: calc(100vh - 56px);
    }

    .dwivo-appbar {
        height: 56px !important;
    }
}


/* =========================================================
   DWIVO - COMMON MUDBLAZOR COMPONENTS
   ========================================================= */


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

.mud-paper {
    border-radius: var(--dwivo-radius-lg);
}

.mud-card {
    border-radius: var(--dwivo-radius-xl);
    border: 1px solid rgba(228, 233, 242, 0.95);
    box-shadow: var(--dwivo-shadow);
    background: rgba(255, 255, 255, 0.90);
}


/* Cards that explicitly use elevation */

.mud-elevation-1,
.mud-elevation-2,
.mud-elevation-3 {
    box-shadow: var(--dwivo-shadow-sm);
}


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

.mud-button-root {
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.01em;
}


/* Filled primary buttons */

.mud-button-filled.mud-button-filled-primary {
    color: #fff !important;
    background: linear-gradient( 135deg, var(--dwivo-blue), var(--dwivo-indigo) ) !important;
    box-shadow: 0 7px 18px rgba(52, 68, 216, 0.18);
}

    .mud-button-filled.mud-button-filled-primary:hover {
        box-shadow: 0 10px 23px rgba(52, 68, 216, 0.25);
    }


/* Outlined buttons */

.mud-button-outlined {
    border-color: var(--dwivo-line) !important;
    color: #50607e !important;
    background: #fff;
}

    .mud-button-outlined:hover {
        background: #f7f9fc !important;
    }


/* Text buttons */

.mud-button-text {
    color: var(--dwivo-blue);
}


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

.mud-icon-button {
    border-radius: 10px !important;
}

    .mud-icon-button:hover {
        background: #eef2f9;
    }


/* =========================================================
   INPUTS
   ========================================================= */

.mud-input-control {
    border-radius: 10px;
}

.mud-input-outlined-border {
    border-color: var(--dwivo-line) !important;
    border-radius: 10px !important;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #cbd4e4 !important;
}

.mud-input-outlined.mud-input-focused
.mud-input-outlined-border {
    border-color: var(--dwivo-blue) !important;
}


/* Input labels */

.mud-input-label {
    color: #66748f;
    font-weight: 600;
}


/* =========================================================
   SELECT / AUTOCOMPLETE
   ========================================================= */

.mud-select {
    border-radius: 10px;
}

.mud-popover {
    border-radius: 12px !important;
    border: 1px solid var(--dwivo-line);
    box-shadow: 0 18px 45px rgba(38, 51, 98, 0.14);
}

.mud-list {
    padding: 6px;
}

.mud-list-item {
    border-radius: 8px;
}

    .mud-list-item:hover {
        background: #f3f6fb;
    }


/* =========================================================
   TABLES
   ========================================================= */

.mud-table-container {
    border-radius: var(--dwivo-radius-xl);
}

.mud-table {
    background: transparent;
}

    .mud-table thead {
        background: #f7f9fc;
    }

        .mud-table thead th {
            color: #66748f;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 1px solid var(--dwivo-line);
        }

    .mud-table tbody td {
        color: var(--dwivo-ink);
        border-bottom: 1px solid #eef1f6;
    }

    .mud-table tbody tr:hover {
        background: #f8faff;
    }


/* =========================================================
   PAGINATION
   ========================================================= */

.mud-table-pagination-toolbar {
    border-top: 1px solid var(--dwivo-line);
    background: #fff;
}

.mud-pagination-item {
    border-radius: 8px !important;
}


/* =========================================================
   CHIPS
   ========================================================= */

.mud-chip {
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/*
 =========================================================
   ALERTS
   ========================================================= */

.mud-alert {
    border-radius: 12px !important;
    box-shadow: none !important;
}


/* =========================================================
   DIALOGS
   ========================================================= */

.mud-dialog {
    border-radius: 20px !important;
    box-shadow: 0 25px 70px rgba(38, 51, 98, 0.20);
}

.mud-dialog-title {
    color: var(--dwivo-ink);
    font-weight: 700;
}

.mud-dialog-content {
    color: #596780;
}


/* =========================================================
   EXPANSION PANELS
   ========================================================= */

.mud-expansion-panels {
    border-radius: var(--dwivo-radius-lg);
}

.mud-expansion-panel {
    border-bottom: 1px solid var(--dwivo-line);
}

.mud-expansion-panel-header {
    font-weight: 700;
}


/* =========================================================
   TABS
   ========================================================= */

.mud-tabs {
    border-bottom: 1px solid var(--dwivo-line);
}

.mud-tab {
    min-height: 46px;
    color: var(--dwivo-muted);
    font-weight: 600;
    text-transform: none;
}

    .mud-tab.mud-tab-active {
        color: var(--dwivo-blue);
    }


/* =========================================================
   TOOLBAR
   ========================================================= */

.mud-toolbar {
    min-height: 56px;
    border-radius: var(--dwivo-radius-lg);
}


/* =========================================================
   TOOLTIP
   ========================================================= */

.mud-tooltip {
    border-radius: 8px !important;
    font-size: 11px !important;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.mud-progress-linear {
    border-radius: 999px;
}

.mud-progress-circular {
    color: var(--dwivo-blue);
}

/* Paste this into dwivo-theme.css */
.hero {
    padding: 29px 31px;
    border-radius: 27px;
    color: #fff;
    background: linear-gradient(115deg,#203a9b,#4a40d4 53%,#148dbc);
    box-shadow: 0 23px 50px rgba(54,66,177,.22);
    position: relative;
    overflow: hidden;
}

    .hero:after {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 50%;
        right: -65px;
        top: -165px;
    }

    .hero h1 {
        margin: 0 0 8px;
        font-size: 31px;
        font-weight: 700;
    }

    .hero p {
        max-width: 660px;
        color: rgba(255,255,255,.78);
        line-height: 1.6;
        margin: 0;
    }

    .hero .mud-button {
        background-color: #ffffff !important;
        color: var(--dwivo-blue) !important;  /* Uses your theme's primary blue */
        border-radius: 9px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        padding: 8px 18px !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    }

        .hero .mud-button:hover {
            background-color: #f2f5fb !important;  /* Slight tint on hover */
            transform: translateY(-1px);
            transition: all 0.2s ease;
        }

.stat, .card {
    background: var(--dwivo-card);
    border: 1px solid rgba(223,228,239,.94);
    box-shadow: var(--dwivo-shadow);
    border-radius: var(--dwivo-radius-xl);
}

.stat {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
}

    .stat .bubble {
        width: 43px;
        height: 43px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        background: #e9eeff;
        color: var(--dwivo-blue);
        font-size: 20px;
    }

    .stat small {
        color: var(--dwivo-muted);
        font-size: 11px;
    }

    .stat strong {
        display: block;
        font-size: 22px;
        margin-top: 3px;
        font-weight: 700;
    }

.card-head {
    padding: 19px 20px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .card-head h2 {
        font-size: 17px;
        margin: 0;
        font-weight: 700;
    }

    .card-head p {
        margin: 4px 0 0;
        font-size: 12px;
        color: var(--dwivo-muted);
    }

.donut-wrap {
    padding: 8px 20px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live {
    padding: 20px;
}

.live-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 9px;
    color: #087c51;
    background: #e1f8ed;
}

.feed-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    border-top: 1px solid var(--dwivo-line);
}

    .feed-item:first-child {
        border: 0;
    }

    .feed-item .avatar {
        width: 33px;
        height: 33px;
        border-radius: 10px;
        font-size: 11px;
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 800;
        background: linear-gradient(135deg,#3760ef,#793de0);
    }

    .feed-item div:nth-child(2) {
        flex: 1;
    }

    .feed-item b {
        font-size: 12px;
    }

    .feed-item small {
        display: block;
        color: var(--dwivo-muted);
        margin-top: 3px;
        font-size: 11px;
    }

    .feed-item time {
        font-size: 10px;
        color: var(--dwivo-green);
    }
/*
 =========================================================
   TOPBAR PROFILE WIDGET
   ========================================================= */

.dwivo-top-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dwivo-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dwivo-user-details {
    display: flex;
    flex-direction: column;
}

    .dwivo-user-details b {
        font-size: 12px;
        font-weight: 700;
        color: var(--dwivo-ink);
        line-height: 1.2;
    }

    .dwivo-user-details span {
        font-size: 11px;
        color: var(--dwivo-muted);
        line-height: 1.2;
    }

.dwivo-avatar-custom {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    background: linear-gradient(135deg, #3760ef, #793de0);
}

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

.dwivo-table-card {
    background: var(--dwivo-card);
    border: 1px solid var(--dwivo-line);
    border-radius: var(--dwivo-radius-xl);
    box-shadow: var(--dwivo-shadow);
    overflow: hidden;
}

/*     Forces MudBlazor DataGrid to inherit the prototype design */
    .dwivo-table-card .mud-table-container {
        border-radius: 0 0 var(--dwivo-radius-xl) var(--dwivo-radius-xl);
    }

    .dwivo-table-card th {
        font-size: 10px;
        color: #9099ad;
        text-transform: uppercase;
        letter-spacing: .75px;
        background: #f7f8fc;
        font-weight: 700;
        padding: 16px;
        border-top: 1px solid var(--dwivo-line);
        border-bottom: 1px solid var(--dwivo-line);
    }

    .dwivo-table-card td {
        font-size: 13px;
        padding: 16px;
        border-bottom: 1px solid #edf0f5;
        color: #33405a;
    }

    .dwivo-table-card tr:last-child td {
        border-bottom: 0;
    }

/* =========================================================
   SUBSCRIPTION PAGE
   ========================================================= */

.sub-toggle-pill {
    background: #eef2f6;
    border: 1px solid transparent;
}

html.dark .sub-toggle-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(60, 80, 160, 0.18);
}

/* Plan card hover lift */
.sub-plan-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

    .sub-plan-card:hover {
        transform: translateY(-3px);
    }

html.dark .sub-plan-card:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

/* Top-Up plan card in dark */
html.dark .mud-paper .mud-text[color="Warning"] {
     already handled by MudBlazor palette 
}

/* Inactive plan card overlay in dark */
html.dark [style*="grayscale(60%)"] {
    opacity: 0.45 !important;
}

/* =========================================================
   RADZEN SCHEDULER — DARK MODE
   ========================================================= */

html.dark .rz-scheduler-nav-prev-next,
html.dark .rz-scheduler-nav-views {
    background: rgba(19, 22, 38, 0.90) !important;
    border-color: rgba(60, 80, 160, 0.18) !important;
}

html.dark .rz-scheduler-nav-title {
    color: var(--dwivo-ink) !important;
}

html.dark .rz-button {
    color: var(--dwivo-ink) !important;
}

html.dark .rz-state-active {
    background: rgba(40, 84, 221, 0.15) !important;
    color: #6e9aff !important;
}

/* Scheduler body — time grid lines and headers */
html.dark .rz-scheduler,
html.dark .rz-scheduler-body,
html.dark .rz-slots-header,
html.dark .rz-slot-header {
    background: var(--dwivo-card) !important;
    border-color: rgba(60, 80, 160, 0.12) !important;
    color: var(--dwivo-ink) !important;
}

html.dark .rz-slot-row,
html.dark .rz-slot {
    border-color: rgba(60, 80, 160, 0.10) !important;
}

html.dark .rz-scheduler-month-view .rz-event-more {
    color: #6e9aff !important;
}