/* ========================================
   Design System — HiPrivacy
   Figma 1:1 mapping
   ======================================== */

/* ---- Design Tokens ---- */
/* Source of truth for colors, spacing, radius and typography.
   New code should use var(--token-name) instead of raw hex values. */

:root {
    /* Brand */
    --color-brand-primary: #2A2F6F;
    --color-brand-accent: #2563EB;
    --color-brand-accent-soft: rgba(89, 155, 255, 0.12);

    /* Text */
    --color-text-primary: #111827;
    --color-text-secondary: #6B7280;
    --color-text-muted: #71717B;
    --color-text-inverse: #FFFFFF;
    --color-text-subtle: #9CA3AF;
    --color-text-accent: #0D111F;

    /* Backgrounds */
    --color-bg-white: #FFFFFF;
    --color-bg-surface: #FAFAFA;
    --color-bg-subtle: #F4F4F5;
    --color-bg-muted: #F1F3F8;
    --color-bg-soft: #F6F7FB;
    --color-bg-dark: #18181B;
    --color-bg-darker: #0D111F;

    /* Borders */
    --color-border: #E5E7EB;
    --color-border-strong: #D1D5DB;
    --color-border-muted: #DCDFE4;
    --color-border-dark: #27272A;
    --color-border-brand-subtle: rgba(59, 130, 246, 0.06);

    /* Semantic */
    --color-success: #059669;
    --color-success-soft: #ECFDF5;
    --color-success-emerald: #10B981;
    --color-danger: #DC2626;
    --color-danger-bright: #F44336;
    --color-warning: #D97706;
    --color-info: #2196F3;

    /* Spacing */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 19.25px;
    --radius-full: 9999px;

    /* Typography */
    --font-sans: 'DM Sans', sans-serif;
    --font-display: 'Plus Jakarta Sans', sans-serif;

    /* Font sizes */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* ---- Self-hosted Fonts (GDPR-compliant, no external requests) ---- */

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 500 600 700;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2'),
         url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/dm-sans-latin.woff2') format('woff2'),
         url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
}

/* ---- Layout ---- */

.layout {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
    background: linear-gradient(112.66deg, #0B0D15 3.07%, #10182C 71.57%);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow: hidden;
    gap: 0;
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
    gap: 0;
}

.sidebar ~ .main {
    padding-left: 0;
}

.right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-soft);
    border-radius: 16px;
    overflow: clip;
    min-height: 0;
    box-shadow: none;
    padding: 0;
}

.content {
    flex: 1;
    overflow-y: auto;
    padding: 64px 56px 0;
    gap: 0;
}

/* ---- Sidebar (Drawer) ---- */
/* Figma: Drawer, padding 36px 20px, width 240px */

.sidebar {
    width: 240px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 36px 20px;
    overflow: hidden;
    gap: 0;
}

/* DrawerTop */
.sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* DrawerHeader: border-bottom rgba(59,130,246,0.06), padding 0 0 24px 14px */
.sidebar-header {
    display: flex;
    align-items: center;
    padding: 0 0 24px 14px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.06);
    min-height: 57px;
    gap: 0;
}

/* Logo2.0: gap 8px */
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}

/* Logo icon: 32x32, gradient bg, blue border + glow */
.sidebar-logo-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: linear-gradient(40.46deg, rgba(114, 137, 188, 0.15) -27.61%, rgba(22, 22, 36, 0.45) 85.6%);
    border: 1.3125px solid rgba(89, 155, 255, 0.37);
    box-shadow: 0 0 19.69px rgba(89, 155, 255, 0.25), inset 0 1.31px 1.31px rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* "Hi" text inside logo icon */
.sidebar-logo-hi {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.5px;
    color: var(--color-text-inverse);
}

/* "Privacy" text next to logo */
.sidebar-logo-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.5px;
    color: var(--color-text-inverse);
}

/* NavMenu: padding 12px 0, gap 4px */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
}

/* DrawerBottom */
.sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Bottom NavMenu: padding 4px 0, gap 4px */
.sidebar-bottom-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
}

/* DrawerUser: border-top rgba(59,130,246,0.06), padding 20px 0 0 12px, gap 16px */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0 0 12px;
    border-top: 1px solid rgba(59, 130, 246, 0.06);
}

/* Neutral avatar — MudAvatar override already in MudBlazor section */

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* 12px 500wt white */
.sidebar-user-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-inverse);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 10px 400wt #7986A8 */
.sidebar-user-email {
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    color: #7986A8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- NavLink ---- */
/* Inactive: padding 8px 16px, icon #94A3B8, text rgba(255,255,255,0.6) */

.navlink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
    height: 41px;
    box-sizing: border-box;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.navlink:hover {
    color: rgba(255, 255, 255, 0.85);
    background: linear-gradient(90deg, rgba(89, 155, 255, 0.06) 0%, rgba(89, 155, 255, 0) 100%);
}

/* Active */
.navlink--active {
    color: var(--color-text-inverse);
    background: linear-gradient(90deg, rgba(89, 155, 255, 0.12) 0%, rgba(89, 155, 255, 0) 100%);
    border-left: 2px solid #42A5F5;
    border-radius: 12px 0 0 12px;
    padding: 8px 0 8px 16px;
}

/* SVG icon */
.navlink-icon,
.mud-typography.navlink-icon,
.d-inline.navlink-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    transition: color 0.15s ease;
    line-height: 0;
    vertical-align: middle;
}

.navlink--active .navlink-icon {
    color: #42A5F5;
}

.navlink-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
}

.navlink-text {
    white-space: nowrap;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    line-height: 20px;
}

/* ---- TopBar ---- */
/* Figma: 56px height, bg rgba(255,255,255,0.6), radius 16px 16px 0 0 */

/* MudNavMenu/MudNavLink overrides for sidebar */
.sidebar-nav .mud-nav-menu,
.sidebar-bottom-nav .mud-nav-menu {
    padding: 0;
}

.sidebar .mud-navlink {
    padding: 0;
    margin: 0;
    background: transparent;
    min-height: auto;
}

.sidebar .mud-navlink .mud-ripple,
.sidebar .mud-navlink .mud-nav-link-text {
    padding: 0;
    margin: 0;
}

/* MudStack inside navlink — center icon vertically with text */
.navlink .mud-stack {
    align-items: center;
    gap: 10px;
}

.navlink .navlink-icon {
    line-height: 0;
}

/* MudLink override for logo */
.sidebar-logo.mud-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
}

/* MudButton override for hamburger */
.topbar-hamburger {
    width: 35.5px;
    min-width: 35.5px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(228, 228, 231, 0.8);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 2px rgba(83, 97, 120, 0.1);
    color: var(--color-text-accent);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar-hamburger .mud-button-label {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.topbar-hamburger svg {
    width: 14px;
    height: 14px;
}

.topbar-hamburger--flipped svg {
    transform: scaleX(-1);
}

/* MudDivider vertical for topbar separator */
.topbar-separator.mud-divider-vertical {
    height: 28px;
    border: none;
    border-right: 2px solid #E4E4E7;
    border-radius: 0;
}

/* MudAvatar override for sidebar user */
.sidebar-user-avatar-neutral.mud-avatar,
.sidebar-user-avatar-neutral {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: linear-gradient(135deg, #F4F4F5 0%, #FAFAFA 100%);
    border: 1px solid rgba(228, 228, 231, 0.8);
    border-radius: 40px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* User name/email in sidebar — MudText override */
.sidebar-user .sidebar-user-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-inverse);
}

.sidebar-user .sidebar-user-email {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: #7986A8;
    line-height: 16px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    min-height: 56px;
    padding: 0 32px 0 10px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px 16px 0 0;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Separator line after hamburger: 28px vertical, 2px #E4E4E7 */
.topbar-separator {
    width: 0;
    height: 28px;
    border-left: 2px solid #E4E4E7;
}

/* Breadcrumb: border 1px #D1D5DB, radius 8px, padding 4px 6px, gap 4px */
.hp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    height: 24px;
    box-sizing: border-box;
    box-shadow: none;
    background: transparent;
}

.hp-breadcrumb-icon {
    display: flex;
    align-items: center;
    color: #94A3B8;
}

.hp-breadcrumb-icon svg {
    width: 16px;
    height: 16px;
}

/* Breadcrumb text: 12px 400wt #111827 letter-spacing 1px */
.hp-breadcrumb-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 1px;
    color: var(--color-text-primary);
}

.topbar-right {
    display: flex;
    align-items: center;
}

/* Version: 10px 500wt #536178 */
.topbar-version {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 160%;
    color: #536178;
}

/* ---- Status Badges ---- */

.hp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    height: 24px;
    border-radius: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
}

.hp-badge--active { background: rgba(16, 185, 129, 0.06); color: var(--color-success); }
.hp-badge--pending { background: rgba(59, 130, 246, 0.06); color: var(--color-brand-accent); }
.hp-badge--suspended { background: rgba(239, 68, 68, 0.12); color: var(--color-danger); }
.hp-badge--trial { background: rgba(59, 130, 246, 0.06); color: var(--color-brand-accent); }
.hp-badge--enterprise { background: rgba(139, 92, 246, 0.07); color: #6D28D9; }
.hp-badge--professional { background: rgba(42, 47, 111, 0.06); color: #1F245A; }
.hp-badge--growth { background: rgba(16, 185, 129, 0.06); color: var(--color-success); }
.hp-badge--starter { background: rgba(59, 130, 246, 0.06); color: var(--color-brand-accent); }
.hp-badge--expired { background: rgba(17, 24, 39, 0.06); color: var(--color-text-primary); }

/* ---- Page Styles ---- */
/* Content padding from Figma: 64px 56px 0px */

/* Figma: Top — row, space-between, header left + buttons right */
.page-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}

.page-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Icon container: 48x48, bg rgba(89,155,255,0.12), radius 10px */
.page-header-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: rgba(89, 155, 255, 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.page-header-icon svg {
    width: 20px;
    height: 18px;
    color: #599BFF;
}

/* Title: 20px 600wt #0D111F */
.page-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 21px;
    color: var(--color-text-accent);
}

/* Subtitle: 12px 400wt #71717B */
.page-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* ---- Client Management Toolbar ---- */

.cm-toolbar {
    display: flex;
    align-items: center;
    gap: 17px;
}

/* Shared search field — Figma: 183x32, flex row, 12px radius, MudTextField override */
.search-field {
    width: 183px;
    margin: 0 !important;
    cursor: pointer;
}

.search-field .mud-input-outlined .mud-input-outlined-border {
    border-radius: 12px !important;
    border-color: var(--color-border-muted) !important;
    box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.036);
}

.search-field.mud-input-control {
    background: var(--color-bg-white);
    border-radius: 12px;
}

.search-field .mud-input-outlined {
    margin-top: 0;
}

.search-field .mud-input-outlined .mud-input-slot {
    background: var(--color-bg-white);
    border-radius: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    height: 32px;
    box-sizing: border-box;
}

.search-field .mud-input {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.15px;
    color: var(--color-text-primary);
}

.search-field .mud-input::placeholder {
    color: var(--color-text-secondary);
}

.search-field .mud-input-adornment-start .mud-icon-root {
    color: #94A3B8;
    font-size: 24px;
}

.search-field .mud-input-label {
    display: none;
}

/* Figma: Line 1 — separator between toolbar and table */
.cm-separator {
    border: none;
    border-top: 1px solid rgba(83, 97, 120, 0.1);
    margin: 0 0 24px;
    flex-shrink: 0;
    flex-grow: 0;
    height: 0;
}

/* ---- Table ---- */

/* Table Content: Figma 1148px, border-radius 16px 0 0 16px, gap 20px to scrollbar */
.table-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 16px 0 0 16px;
    overflow: hidden;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

/* Client Table v2: Figma 1476px, white bg, radius 16px, padding 10px */
.table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--color-bg-white);
    border-radius: 16px;
    padding: 10px;
    box-shadow: none;
}

.table-scroll::-webkit-scrollbar {
    height: 4px;
}

.table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.table-scroll::-webkit-scrollbar-thumb {
    background: #C4C4C4;
    border-radius: 2px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Column min-widths from Figma — table stretches to full width, columns share extra space equally */
.hp-th--name, .hp-td--name { min-width: 240px; }
.hp-th--sub, .hp-td--sub { min-width: 148px; }
.hp-th--company, .hp-td--company { min-width: 178px; }
.hp-th--address, .hp-td--address { min-width: 240px; }
.hp-th--industry, .hp-td--industry { min-width: 148px; }
.hp-th--size, .hp-td--size { min-width: 110px; }
.hp-th--users, .hp-td--users { min-width: 110px; }
.hp-th--activity, .hp-td--activity { min-width: 174px; }
.hp-th--status, .hp-td--status { min-width: 160px; }

/* Header */
.hp-th {
    padding: 0 12px;
    height: 40px;
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 1px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.hp-th .mud-typography {
    display: inline !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    color: inherit !important;
    line-height: 40px !important;
}

.hp-th svg {
    vertical-align: middle !important;
}

.hp-th:hover {
    background: var(--color-bg-surface);
}

.hp-th--sorted {
    color: var(--color-text-primary);
    font-weight: 600;
}


/* Sort/filter icons float right, gap via margin. Order: filter first in HTML (renders rightmost), sort second */
.hp-th-sort,
.hp-th-filter {
    float: right;
    margin-left: 4px;
    color: #434956;
    cursor: pointer;
    display: inline-block;
    height: 40px;
    line-height: 40px;
}

/* Sort ASC: upper-left arrow green */
.hp-th-sort--asc .sort-up {
    stroke: var(--color-success);
}

/* Sort DESC: lower-right arrow red */
.hp-th-sort--desc .sort-down {
    stroke: var(--color-danger);
}

.hp-th-filter--active {
    color: var(--color-brand-primary);
}

.hp-th-filter:hover,
.hp-th-sort:hover {
    color: var(--color-text-primary);
}

/* Filter bar */
.cm-filters {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    flex-wrap: wrap;
}

.cm-filters .dialog-field {
    min-width: 160px;
    max-width: 200px;
}

.cm-filters .dialog-input {
    height: 32px;
    font-size: 13px;
}

.hp-th span {
    vertical-align: middle;
}



.hp-td {
    padding: 6px 12px;
    height: 64px;
    vertical-align: middle;
    white-space: nowrap;
}

.hp-td--name,
.hp-table .hp-td--name {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
}

.hp-td--center {
    text-align: center;
}

.hp-td-avatar-mud.mud-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    background: linear-gradient(135deg, #F4F4F5 0%, #FAFAFA 100%) !important;
    border: 1px solid rgba(228, 228, 231, 0.8);
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-text-secondary) !important;
}

.hp-td-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 40px;
    background: linear-gradient(135deg, #F4F4F5 0%, #FAFAFA 100%);
    border: 1px solid rgba(228, 228, 231, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--color-text-secondary);
}

.hp-td-nameblock {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.hp-td-primary {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--color-text-primary);
}

.hp-td-secondary {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 1px;
    color: var(--color-text-secondary);
}

/* ---- Pagination ---- */
/* Figma: Frame 6, gap 10px, height 26px */

.hp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    gap: 10px;
    height: 26px;
    margin-top: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Figma: 13px 400wt #6B7280, flex-grow 1 */
.hp-pagination-info {
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    color: var(--color-text-secondary);
    flex: 1;
}



.hp-td-date {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
    white-space: nowrap;
}

/* ---- Buttons ---- */

/* Figma: 32px height, 4px 10px padding, 12px radius, 13px 400wt, icon 18px, gap 8px */
.btn-primary {
    height: 32px !important;
    padding: 4px 10px !important;
    gap: 8px !important;
    background: var(--color-brand-primary) !important;
    color: var(--color-text-inverse) !important;
    border-radius: 12px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.2) !important;
}

.btn-primary .mud-icon-root {
    font-size: 18px !important;
}

.btn-primary .mud-button-icon-start {
    margin: 0 8px 0 0 !important;
}

.btn-primary.mud-disabled,
.btn-primary[disabled] {
    background-color: #E0E0E0 !important;
    color: #9E9E9E !important;
    box-shadow: none !important;
}

.btn-ghost {
    background: transparent !important;
    color: var(--color-text-primary) !important;
    border-radius: 12px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

/* ---- Dialog ---- */
/* Figma: overlay rgba(0,0,0,0.64) blur(2px), dialog 540px, radius ~19px */

/* Warning text inside ConfirmDialog / delete dialog — matches Figma inline style */
.confirm-dialog-warning {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--color-text-secondary) !important;
    line-height: 160% !important;
}

/* Error list inside AppDialog — needs horizontal padding to match dialog-body */
.app-dialog-errors {
    padding: 4px 20px 8px;
}

.app-dialog-errors .mud-alert {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Title+subtitle grouping wrapper used by AppDialog — mirrors edit-groups-heading layout */
.app-dialog-title-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 1;
}

.dialog-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.4px;
    color: var(--color-text-primary);
    text-transform: none;
}

.dialog-body {
    padding: 20px 20px 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dialog-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--color-text-secondary);
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    display: block;
    position: relative;
    z-index: 1;
}

.dialog-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
    margin-top: 8px;
    border-top: 0.8px solid #F4F4F5;
}

.dialog-section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.23px;
    font-weight: 500;
    line-height: 16px;
    color: var(--color-text-primary);
    text-transform: none;
}

/* ---- Success Toast ---- */
/* Figma: MudAlert — 264x50, padding 6px 16px, bg #10B981, radius 4px */

.hp-toast {
    position: fixed;
    top: 76px;
    right: 68px;
    z-index: 999;
    display: flex;
    align-items: center;
    min-width: 264px;
    height: 50px;
    min-height: 50px;
    padding: 6px 16px;
    background: var(--color-success-emerald);
    border-radius: 4px;
    color: var(--color-text-inverse);
    font-family: 'Plus Jakarta Sans', sans-serif;
    animation: hp-toast-in 0.3s ease;
}

.hp-toast--error {
    background: var(--color-danger);
}

@keyframes hp-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.hp-toast-icon {
    display: flex;
    align-items: center;
    padding: 7px 12px 7px 0;
    opacity: 0.9;
    flex-shrink: 0;
}

.hp-toast-icon svg {
    width: 24px;
    height: 24px;
}

.hp-toast-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    flex: 1;
}

.hp-toast-close-wrap {
    display: flex;
    align-items: center;
    padding: 0 0 0 8px;
    flex-shrink: 0;
}

.hp-toast-close {
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    border-radius: 100px;
    color: var(--color-text-inverse);
    cursor: pointer;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-toast-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ---- MudBlazor Global Overrides ---- */

.content .mud-button,
.content .mud-chip,
.content .mud-input,
.content .mud-select,
.content .mud-text,
.content .mud-typography {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.content .mud-button {
    text-transform: none !important;
}

.dialog .mud-input,
.dialog .mud-select {
    font-family: 'DM Sans', sans-serif !important;
}



.cm-filters .mud-select {
    min-width: 160px !important;
}

.hp-pagination .mud-button {
    font-size: 12px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    text-transform: none !important;
    min-width: auto !important;
    height: 26px !important;
    padding: 0 6px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--color-text-secondary) !important;
}

.pn-active {
    color: var(--color-text-secondary);
    opacity: 0.5;
    background: transparent;
    box-shadow: none;
}

.pn-inactive {
    color: var(--color-text-secondary);
    opacity: 1;
    background: transparent;
    box-shadow: none;
}

.pn-inactive:hover {
    background: var(--color-bg-soft);
}

.hp-pagination .mud-button:disabled {
    opacity: 0.4 !important;
}

.hp-pagination-controls {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.hp-toast .mud-icon-button {
    color: white !important;
}

/* ---- MudBlazor Table Overrides ---- */

.hp-table .mud-table-container {
    overflow-x: auto;
}

/* MudSimpleTable th/td — same styles as MudTable overrides */
.hp-table th.hp-th {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    color: var(--color-text-secondary) !important;
    border-bottom: 1px solid var(--color-border) !important;
    background: var(--color-bg-white) !important;
    padding: 0 12px !important;
    height: 40px !important;
    line-height: 40px !important;
    white-space: nowrap !important;
}

.hp-table td.hp-td {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    color: var(--color-text-primary) !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: 6px 12px !important;
    height: 64px !important;
    white-space: nowrap !important;
}

.hp-table .mud-table-root {
    background: transparent !important;
}

.hp-table .mud-table-head .mud-table-cell {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    color: var(--color-text-secondary) !important;
    border-bottom: 1px solid var(--color-border) !important;
    background: var(--color-bg-white) !important;
    padding: 0 12px !important;
    height: 40px !important;
    white-space: nowrap !important;
}

.hp-table .mud-table-body .mud-table-cell {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    color: var(--color-text-primary) !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: 6px 12px !important;
    height: 64px !important;
    white-space: nowrap !important;
}

.hp-table .mud-table-container .mud-table-root .mud-table-body .mud-table-row {
    transition: background 0.1s ease;
}

.hp-table .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
    background: var(--color-bg-subtle) !important;
}

/* MudChip override for badges */
.hp-badge.mud-chip {
    height: 24px !important;
    border-radius: 12px !important;
    font-weight: 400 !important;
}

.hp-badge--active.mud-chip { background: rgba(16, 185, 129, 0.06) !important; color: var(--color-success) !important; }
.hp-badge--pending.mud-chip { background: rgba(59, 130, 246, 0.06) !important; color: var(--color-brand-accent) !important; }
.hp-badge--suspended.mud-chip { background: rgba(239, 68, 68, 0.12) !important; color: var(--color-danger) !important; }
.hp-badge--expired.mud-chip { background: rgba(17, 24, 39, 0.06) !important; color: var(--color-text-primary) !important; }
.hp-badge--starter.mud-chip { background: rgba(59, 130, 246, 0.06) !important; color: var(--color-brand-accent) !important; }
.hp-badge--professional.mud-chip { background: rgba(42, 47, 111, 0.06) !important; color: #1F245A !important; }
.hp-badge--enterprise.mud-chip { background: rgba(139, 92, 246, 0.07) !important; color: #6D28D9 !important; }
.hp-badge--growth.mud-chip { background: rgba(16, 185, 129, 0.06) !important; color: var(--color-success) !important; }



.page-top .mud-input,
.cm-filters .mud-input {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.cm-filters .mud-select .mud-input-outlined .mud-input-outlined-border {
    border-radius: 12px !important;
    border-color: var(--color-border-muted) !important;
}

/* ---- Scrollbar ---- */

.content::-webkit-scrollbar {
    width: 4px;
}

.content::-webkit-scrollbar-track {
    background: transparent;
}

.content::-webkit-scrollbar-thumb {
    background: #C4C4C4;
    border-radius: 2px;
}

/* Reset MudPaper/MudChip/MudAvatar/MudLink defaults so v2 classes control appearance */

/* MudPaper: kill default background, border-radius, transition */
.mud-paper.ov-banner {
    background: var(--color-bg-dark) !important;
    border: 1px solid var(--color-border-dark) !important;
    box-shadow: 0px 17px 34px -8px rgba(0, 0, 0, 0.25) !important;
    border-radius: 22px !important;
    color: var(--color-text-inverse) !important;
    transition: none !important;
}

.mud-paper.ov-stat {
    background: var(--color-bg-white) !important;
    border: 0.7px solid rgba(228, 228, 231, 0.6) !important;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.04) !important;
    border-radius: 22px !important;
    transition: none !important;
}

.mud-paper.ov-actions {
    background: var(--color-bg-white) !important;
    border: 0.7px solid rgba(228, 228, 231, 0.6) !important;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.04) !important;
    border-radius: 22px !important;
    transition: none !important;
}

.mud-paper.ov-activity {
    background: var(--color-bg-white) !important;
    border: 0.7px solid rgba(228, 228, 231, 0.6) !important;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.04) !important;
    border-radius: 22px !important;
    transition: none !important;
}

/* MudChip: full reset — kill default bg, border, margin, padding, min-height */
.mud-chip.ov-banner__plan {
    background: rgba(59, 130, 246, 0.06) !important;
    color: var(--color-brand-accent) !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    height: 24px !important;
    min-height: 0 !important;
    padding: 0 8px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.mud-chip.ov-banner__plan .mud-chip-content {
    padding: 0 !important;
}

.mud-chip.ov-banner__badge {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 11px !important;
    color: var(--color-text-inverse) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    height: 31px !important;
    min-height: 0 !important;
    padding: 0 14px !important;
    margin: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

.mud-chip.ov-banner__badge .mud-chip-content {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
}

.mud-chip.ov-stat__change {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 9999px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 1;
}

.mud-chip.ov-stat__change .mud-chip-content {
    padding: 0 !important;
}

.mud-chip.ov-stat__change--positive {
    color: #009966 !important;
    background: var(--color-success-soft) !important;
}

.mud-chip.ov-stat__change--neutral {
    color: #009966 !important;
    background: var(--color-success-soft) !important;
}

.mud-chip.ov-stat__change--negative {
    color: #dc2626 !important;
    background: #fef2f2 !important;
}

/* MudText: ensure custom classes override MudBlazor typography colors */
.mud-typography.ov-banner__greeting {
    font-size: 33px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.8px !important;
    color: var(--color-text-inverse) !important;
    margin: 0 0 11px 0 !important;
}

.mud-typography.ov-banner__desc {
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #9F9FA9 !important;
    line-height: 17px !important;
    max-width: 340px !important;
    margin: 0 !important;
}

.mud-typography.ov-panel-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #18181B !important;
    letter-spacing: -0.4px !important;
    margin: 0 0 20px 0 !important;
    line-height: normal !important;
}

.mud-typography.ov-stat__value {
    font-size: 32px !important;
    font-weight: 500 !important;
    color: #1a1a2e !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
}

.mud-typography.ov-stat__title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
}

.mud-typography.ov-stat__subtitle {
    font-size: 11px !important;
    color: #9ca3af !important;
    line-height: 1.3 !important;
}

.mud-typography.ov-action-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #18181B !important;
    margin-bottom: 3px !important;
}

.mud-typography.ov-action-desc {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--color-text-muted) !important;
    line-height: 1.6 !important;
}

.mud-typography.ov-empty__title {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #18181B !important;
    margin-bottom: 4px !important;
}

.mud-typography.ov-empty__desc {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--color-text-muted) !important;
    line-height: 1.5 !important;
    max-width: 240px !important;
}

.mud-typography.ov-activity-item__title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
}

.mud-typography.ov-activity-item__desc {
    font-size: 12px !important;
    color: #94a3b8 !important;
}

.mud-typography.ov-activity-item__time {
    font-size: 11px !important;
    color: #9ca3af !important;
    white-space: nowrap !important;
    flex-shrink: 0;
}

/* MudLink: reset for action items */
.mud-link.ov-action-item,
.mud-link.ov-action-item:hover {
    color: inherit !important;
    display: flex !important;
    text-decoration: none !important;
}

/* MudAvatar: reset dimensions, bg, border */
.mud-avatar.ov-activity-item__icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    background: #f8f9fa !important;
    color: #64748b !important;
    border: none !important;
    font-size: inherit !important;
}

.mud-avatar.ov-empty__icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 9999px !important;
    background: var(--color-bg-white) !important;
    border: 0.7px solid #F4F4F5 !important;
    box-shadow: 0px 0.7px 2px rgba(0, 0, 0, 0.1), 0px 0.7px 1.4px -0.7px rgba(0, 0, 0, 0.1) !important;
    color: #D4D4D8 !important;
    font-size: inherit !important;
    margin-bottom: 12px !important;
}