/*
===============================================================================
AHO Management & Analytics
Global Design System
Datei: public/assets/css/app.css
===============================================================================
*/


/* ============================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {

    /* Brand */
    --color-primary: #5b67f1;
    --color-primary-hover: #4854e2;
    --color-primary-soft: #eef0ff;

    --color-secondary: #7c3aed;
    --color-secondary-soft: #f3e8ff;

    /* Functional colors */
    --color-success: #16a34a;
    --color-success-soft: #ecfdf3;

    --color-warning: #f59e0b;
    --color-warning-soft: #fff7e6;

    --color-danger: #dc2626;
    --color-danger-soft: #fff1f2;

    --color-info: #0284c7;
    --color-info-soft: #eff8ff;

    /* Module accents */
    --module-social: #5b67f1;
    --module-social-soft: #eef0ff;

    --module-lab: #7c3aed;
    --module-lab-soft: #f5f0ff;

    --module-event: #14b8a6;
    --module-event-soft: #ecfdf9;

    --module-exchange: #f59e0b;
    --module-exchange-soft: #fff8e8;

    --module-inventory: #0ea5e9;
    --module-inventory-soft: #edf9ff;

    /* Background */
    --bg-app: #f7f8fc;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-muted: #f8fafc;
    --bg-hover: #f4f6fb;

    /* Text */
    --text-primary: #182033;
    --text-secondary: #667085;
    --text-muted: #98a2b3;
    --text-inverse: #ffffff;

    /* Border */
    --border-color: #e7eaf0;
    --border-strong: #d8dde8;

    /* Shadows */
    --shadow-xs:
        0 1px 2px rgba(16, 24, 40, 0.04);

    --shadow-sm:
        0 4px 16px rgba(16, 24, 40, 0.05);

    --shadow-md:
        0 12px 34px rgba(16, 24, 40, 0.08);

    --shadow-lg:
        0 24px 60px rgba(16, 24, 40, 0.12);

    /* Radius */
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-2xl: 28px;
    --radius-round: 999px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 40px;
    --space-10: 48px;

    /* Layout */
    --sidebar-width: 272px;
    --topbar-height: 76px;
    --content-max-width: 1800px;

    /* Animation */
    --transition-fast: 150ms ease;
    --transition-normal: 220ms ease;
    --transition-slow: 320ms ease;

}


/* ============================================================================
   2. RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    min-height: 100%;

    font-size: 16px;

    scroll-behavior: smooth;
}


body {
    margin: 0;

    min-width: 320px;
    min-height: 100vh;

    background:
        var(--bg-app);

    color:
        var(--text-primary);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 15px;

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


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


button,
a {
    -webkit-tap-highlight-color: transparent;
}


a {
    color: inherit;

    text-decoration: none;
}


button {
    color: inherit;
}


img,
svg {
    display: block;
}


svg {
    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


::selection {
    background:
        rgba(91, 103, 241, 0.16);

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


/* ============================================================================
   3. APP LAYOUT
   ========================================================================== */

.app-shell {
    display: flex;

    min-height: 100vh;
}


.app-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    min-width: 0;
    min-height: 100vh;

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


.content {
    width: 100%;
    max-width:
        var(--content-max-width);

    margin:
        0 auto;

    padding:
        30px 34px 54px;
}


/* ============================================================================
   4. SIDEBAR
   ========================================================================== */

.sidebar {
    position: fixed;
    z-index: 100;

    top: 0;
    bottom: 0;
    left: 0;

    display: flex;
    flex-direction: column;

    width:
        var(--sidebar-width);

    background:
        var(--bg-sidebar);

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

    transition:
        transform var(--transition-normal);
}


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

    min-height:
        var(--topbar-height);

    padding:
        0 20px;

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


.brand {
    display: inline-flex;
    align-items: center;

    min-width: 0;

    gap: 12px;
}


.brand__mark {
    display: grid;
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #6874f8,
            #514ce9
        );

    color:
        #ffffff;

    box-shadow:
        0 8px 20px
        rgba(91, 103, 241, 0.28);

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


.brand__text {
    display: flex;
    flex-direction: column;

    min-width: 0;

    line-height: 1.2;
}


.brand__text strong {
    font-size: 18px;
    font-weight: 800;

    letter-spacing: -0.02em;
}


.brand__text small {
    margin-top: 3px;

    overflow: hidden;

    color:
        var(--text-muted);

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

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


.sidebar__close {
    display: none;

    width: 38px;
    height: 38px;

    border: 0;

    border-radius:
        10px;

    background:
        transparent;

    color:
        var(--text-secondary);

    cursor: pointer;
}


.sidebar__close:hover {
    background:
        var(--bg-hover);
}


.sidebar__navigation {
    flex: 1 1 auto;

    overflow-y: auto;

    padding:
        18px 14px 26px;
}


.nav-section + .nav-section {
    margin-top:
        24px;
}


.nav-section__title {
    padding:
        0 12px;

    margin-bottom:
        8px;

    color:
        var(--text-muted);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.nav-section__items {
    display: grid;

    gap: 4px;
}


.nav-item {
    display: flex;
    align-items: center;

    min-height:
        46px;

    padding:
        0 12px;

    border-radius:
        12px;

    color:
        #4b5565;

    gap: 12px;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}


.nav-item:hover {
    background:
        var(--bg-hover);

    color:
        var(--text-primary);

    transform:
        translateX(2px);
}


.nav-item.is-active {
    background:
        var(--color-primary-soft);

    color:
        var(--color-primary);

    font-weight:
        700;
}


.nav-item__icon {
    display: grid;
    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    place-items: center;
}


.nav-item__icon svg {
    width: 20px;
    height: 20px;
}


.nav-item__label {
    overflow: hidden;

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


.sidebar__footer {
    padding:
        14px;

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


.system-indicator {
    display: flex;
    align-items: center;

    min-height:
        56px;

    padding:
        10px 12px;

    border-radius:
        14px;

    background:
        #f8fafc;

    gap: 11px;
}


.system-indicator__dot {
    width: 9px;
    height: 9px;

    border-radius:
        50%;

    background:
        var(--color-success);

    box-shadow:
        0 0 0 5px
        rgba(22, 163, 74, 0.10);
}


.system-indicator div {
    display: flex;
    flex-direction: column;
}


.system-indicator strong {
    font-size: 12px;
}


.system-indicator small {
    margin-top: 2px;

    color:
        var(--text-muted);

    font-size: 10px;
}


/* ============================================================================
   5. TOPBAR
   ========================================================================== */

.topbar {
    position: sticky;
    z-index: 80;

    top: 0;

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

    min-height:
        var(--topbar-height);

    padding:
        0 32px;

    background:
        rgba(255, 255, 255, 0.88);

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

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.topbar__left,
.topbar__actions {
    display: flex;
    align-items: center;
}


.topbar__left {
    min-width: 0;

    gap: 14px;
}


.topbar__actions {
    gap: 8px;
}


.topbar__title {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.topbar__eyebrow {
    margin-bottom: 2px;

    color:
        var(--text-muted);

    font-size: 10px;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.topbar__title strong {
    overflow: hidden;

    font-size: 16px;

    font-weight: 750;

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


.topbar__menu {
    display: none;
}


/* ============================================================================
   6. ICON BUTTON
   ========================================================================== */

.icon-button {
    position: relative;

    display: grid;
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    padding: 0;

    place-items: center;

    border:
        1px solid transparent;

    border-radius:
        12px;

    background:
        transparent;

    color:
        #667085;

    cursor: pointer;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}


.icon-button:hover {
    background:
        #f5f7fb;

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

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


.icon-button svg {
    width: 20px;
    height: 20px;
}


.notification-button__badge {
    position: absolute;

    top: 4px;
    right: 3px;

    display: grid;

    min-width: 17px;
    height: 17px;

    padding:
        0 4px;

    place-items: center;

    border:
        2px solid #ffffff;

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

    background:
        var(--color-danger);

    color:
        #ffffff;

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


/* ============================================================================
   7. USER MENU
   ========================================================================== */

.user-menu {
    display: flex;
    align-items: center;

    min-height: 48px;

    margin-left: 4px;

    padding:
        5px 8px 5px 6px;

    border:
        1px solid transparent;

    border-radius:
        14px;

    background:
        transparent;

    cursor: pointer;

    gap: 10px;
}


.user-menu:hover {
    background:
        var(--bg-hover);

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


.user-menu__avatar {
    display: grid;
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    place-items: center;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #f1f2ff,
            #e3e6ff
        );

    color:
        var(--color-primary);

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


.user-menu__avatar--large {
    width: 44px;
    height: 44px;

    font-size: 14px;
}


.user-menu__details {
    display: flex;
    flex-direction: column;

    min-width: 0;

    text-align: left;
}


.user-menu__details strong {
    max-width: 150px;

    overflow: hidden;

    font-size: 12px;

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


.user-menu__details small {
    margin-top: 2px;

    color:
        var(--text-muted);

    font-size: 10px;
}


.user-menu__chevron {
    width: 16px;
    height: 16px;

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


/* ============================================================================
   8. PROFILE DROPDOWN
   ========================================================================== */

.profile-dropdown {
    position: fixed;
    z-index: 120;

    top: 68px;
    right: 24px;

    width: 260px;

    padding:
        8px;

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

    border-radius:
        18px;

    background:
        #ffffff;

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


.profile-dropdown[hidden] {
    display: none;
}


.profile-dropdown__header {
    display: flex;
    align-items: center;

    padding:
        12px;

    gap: 12px;
}


.profile-dropdown__header div {
    display: flex;
    flex-direction: column;
}


.profile-dropdown__header strong {
    font-size: 13px;
}


.profile-dropdown__header small {
    margin-top: 2px;

    color:
        var(--text-muted);

    font-size: 11px;
}


.profile-dropdown__divider {
    height: 1px;

    margin:
        6px 4px;

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


.profile-dropdown > a {
    display: flex;
    align-items: center;

    min-height:
        42px;

    padding:
        0 12px;

    border-radius:
        10px;

    color:
        var(--text-secondary);

    font-size: 13px;

    font-weight: 600;
}


.profile-dropdown > a:hover {
    background:
        var(--bg-hover);

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


.profile-dropdown__logout {
    color:
        var(--color-danger) !important;
}


/* ============================================================================
   9. PAGE HEADER
   ========================================================================== */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom:
        28px;

    gap: 24px;
}


.page-header__eyebrow {
    display: block;

    margin-bottom: 6px;

    color:
        var(--color-primary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing:
        0.08em;

    text-transform: uppercase;
}


.page-header h1 {
    margin: 0;

    font-size:
        clamp(
            26px,
            3vw,
            38px
        );

    font-weight: 800;

    letter-spacing:
        -0.035em;

    line-height: 1.15;
}


.page-header p {
    max-width: 760px;

    margin:
        9px 0 0;

    color:
        var(--text-secondary);

    line-height: 1.65;
}


.page-header__actions {
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 10px;
}


/* ============================================================================
   10. CARD SYSTEM
   ========================================================================== */

.card {
    position: relative;

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

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

    background:
        var(--bg-card);

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


.card--interactive {
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}


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

    border-color:
        #dfe3eb;

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


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

    padding:
        22px 24px 0;

    gap: 16px;
}


.card__body {
    padding:
        22px 24px 24px;
}


.card__footer {
    padding:
        0 24px 22px;
}


.card__title {
    margin: 0;

    font-size: 15px;

    font-weight: 760;

    letter-spacing:
        -0.01em;
}


.card__subtitle {
    margin-top: 4px;

    color:
        var(--text-muted);

    font-size: 11px;
}


/* ============================================================================
   11. GRID SYSTEM
   ========================================================================== */

.grid {
    display: grid;

    gap: 18px;
}


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


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


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


.grid--5 {
    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );
}


.grid--6 {
    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );
}


/* ============================================================================
   12. KPI CARDS
   ========================================================================== */

.kpi-grid {
    display: grid;

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

    gap: 16px;

    margin-bottom:
        22px;
}


.kpi-card {
    position: relative;

    overflow: hidden;

    min-height:
        142px;

    padding:
        22px;

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

    border-radius:
        20px;

    background:
        #ffffff;

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


.kpi-card::after {
    position: absolute;

    width: 105px;
    height: 105px;

    top: -42px;
    right: -36px;

    border-radius:
        50%;

    background:
        var(--kpi-soft, #eef0ff);

    content: "";
}


.kpi-card__top {
    position: relative;
    z-index: 1;

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

    gap: 12px;
}


.kpi-card__icon {
    display: grid;

    width: 38px;
    height: 38px;

    place-items: center;

    border-radius:
        12px;

    background:
        var(--kpi-soft, #eef0ff);

    color:
        var(--kpi-color, var(--color-primary));
}


.kpi-card__icon svg {
    width: 20px;
    height: 20px;
}


.kpi-card__label {
    color:
        var(--text-secondary);

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


.kpi-card__value {
    position: relative;
    z-index: 1;

    margin-top: 15px;

    font-size:
        clamp(
            28px,
            3vw,
            36px
        );

    font-weight: 820;

    letter-spacing:
        -0.045em;

    line-height: 1;
}


.kpi-card__footer {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    margin-top: 12px;

    gap: 6px;
}


.kpi-card__change {
    display: inline-flex;
    align-items: center;

    padding:
        4px 7px;

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

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


.kpi-card__change--positive {
    background:
        var(--color-success-soft);

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


.kpi-card__change--negative {
    background:
        var(--color-danger-soft);

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


.kpi-card__comparison {
    color:
        var(--text-muted);

    font-size: 10px;
}


/* KPI Variants */

.kpi-card--social {
    --kpi-color:
        var(--module-social);

    --kpi-soft:
        var(--module-social-soft);
}


.kpi-card--lab {
    --kpi-color:
        var(--module-lab);

    --kpi-soft:
        var(--module-lab-soft);
}


.kpi-card--event {
    --kpi-color:
        var(--module-event);

    --kpi-soft:
        var(--module-event-soft);
}


.kpi-card--exchange {
    --kpi-color:
        var(--module-exchange);

    --kpi-soft:
        var(--module-exchange-soft);
}


.kpi-card--inventory {
    --kpi-color:
        var(--module-inventory);

    --kpi-soft:
        var(--module-inventory-soft);
}


/* ============================================================================
   13. BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height:
        42px;

    padding:
        0 16px;

    border:
        1px solid transparent;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        var(--text-primary);

    cursor: pointer;

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

    gap: 8px;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}


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


.btn:active {
    transform:
        translateY(0);
}


.btn--primary {
    background:
        var(--color-primary);

    color:
        #ffffff;

    box-shadow:
        0 7px 18px
        rgba(91, 103, 241, 0.20);
}


.btn--primary:hover {
    background:
        var(--color-primary-hover);
}


.btn--secondary {
    border-color:
        var(--border-color);

    background:
        #ffffff;
}


.btn--secondary:hover {
    background:
        var(--bg-hover);
}


.btn--danger {
    background:
        var(--color-danger);

    color:
        #ffffff;
}


.btn--success {
    background:
        var(--color-success);

    color:
        #ffffff;
}


.btn--ghost {
    background:
        transparent;

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


.btn--ghost:hover {
    background:
        var(--bg-hover);

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


.btn--sm {
    min-height: 34px;

    padding:
        0 12px;

    font-size: 11px;
}


.btn--lg {
    min-height: 48px;

    padding:
        0 20px;

    font-size: 14px;
}


.btn svg {
    width: 18px;
    height: 18px;
}


/* ============================================================================
   14. FORMS
   ========================================================================== */

.form-grid {
    display: grid;

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

    gap: 18px;
}


.form-group {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


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


.form-label {
    color:
        #344054;

    font-size: 12px;

    font-weight: 700;
}


.form-help {
    color:
        var(--text-muted);

    font-size: 10px;

    line-height: 1.5;
}


.form-control,
.form-select,
.form-textarea {
    width: 100%;

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

    border-radius:
        12px;

    background:
        #ffffff;

    color:
        var(--text-primary);

    outline: none;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}


.form-control,
.form-select {
    min-height:
        44px;

    padding:
        0 13px;
}


.form-textarea {
    min-height:
        120px;

    padding:
        12px 13px;

    resize: vertical;
}


.form-control::placeholder,
.form-textarea::placeholder {
    color:
        #b0b7c3;
}


.form-control:focus,
.form-select:focus,
.form-textarea:focus {
    border-color:
        var(--color-primary);

    box-shadow:
        0 0 0 4px
        rgba(91, 103, 241, 0.10);
}


.form-control:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background:
        #f7f8fa;

    color:
        var(--text-muted);

    cursor: not-allowed;
}


.form-error {
    color:
        var(--color-danger);

    font-size: 10px;
}


/* ============================================================================
   15. CHOICE PILLS / MULTI SELECT
   ========================================================================== */

.choice-grid {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


.choice {
    position: relative;
}


.choice input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.choice label {
    display: inline-flex;
    align-items: center;

    min-height: 38px;

    padding:
        0 13px;

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

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        var(--text-secondary);

    cursor: pointer;

    font-size: 12px;

    font-weight: 650;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}


.choice label:hover {
    border-color:
        #cfd5df;

    background:
        #fafbfc;
}


.choice input:checked + label {
    border-color:
        rgba(91, 103, 241, 0.35);

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

    color:
        var(--color-primary);

    box-shadow:
        inset 0 0 0 1px
        rgba(91, 103, 241, 0.08);
}


/* ============================================================================
   16. FORM SECTIONS
   ========================================================================== */

.form-section {
    padding:
        24px;

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

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

    background:
        #ffffff;

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


.form-section + .form-section {
    margin-top:
        18px;
}


.form-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom:
        22px;

    gap: 20px;
}


.form-section__header h2 {
    margin: 0;

    font-size: 17px;

    font-weight: 800;

    letter-spacing:
        -0.02em;
}


.form-section__header p {
    margin:
        5px 0 0;

    color:
        var(--text-secondary);

    font-size: 12px;
}


/* ============================================================================
   17. TABLES
   ========================================================================== */

.table-card {
    overflow: hidden;

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

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

    background:
        #ffffff;

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


.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        16px 18px;

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

    gap: 16px;
}


.table-toolbar__left,
.table-toolbar__right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
}


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


.data-table {
    width: 100%;

    border-collapse: collapse;
}


.data-table th,
.data-table td {
    padding:
        14px 18px;

    border-bottom:
        1px solid #edf0f4;

    text-align: left;

    vertical-align: middle;
}


.data-table th {
    position: sticky;

    z-index: 1;

    top: 0;

    background:
        #fafbfc;

    color:
        #667085;

    font-size: 10px;

    font-weight: 800;

    letter-spacing:
        0.055em;

    text-transform: uppercase;
}


.data-table td {
    color:
        #344054;

    font-size: 12px;
}


.data-table tbody tr {
    transition:
        background var(--transition-fast);
}


.data-table tbody tr:hover {
    background:
        #fafbff;
}


.data-table tbody tr:last-child td {
    border-bottom: 0;
}


/* ============================================================================
   18. BADGES
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;

    min-height:
        25px;

    padding:
        0 9px;

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

    background:
        #f2f4f7;

    color:
        #475467;

    font-size: 10px;

    font-weight: 750;
}


.badge--success {
    background:
        var(--color-success-soft);

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


.badge--warning {
    background:
        var(--color-warning-soft);

    color:
        #b36b00;
}


.badge--danger {
    background:
        var(--color-danger-soft);

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


.badge--info {
    background:
        var(--color-info-soft);

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


.badge--primary {
    background:
        var(--color-primary-soft);

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


/* ============================================================================
   19. ALERTS
   ========================================================================== */

.alert {
    display: flex;
    align-items: flex-start;

    margin-bottom:
        18px;

    padding:
        14px 16px;

    border:
        1px solid transparent;

    border-radius:
        14px;

    gap: 10px;
}


.alert strong {
    flex: 0 0 auto;

    font-size: 12px;
}


.alert span {
    font-size: 12px;

    line-height: 1.55;
}


.alert--success {
    border-color:
        #ccebd7;

    background:
        var(--color-success-soft);

    color:
        #166534;
}


.alert--danger {
    border-color:
        #ffd5d8;

    background:
        var(--color-danger-soft);

    color:
        #b42318;
}


.alert--warning {
    border-color:
        #fde6b5;

    background:
        var(--color-warning-soft);

    color:
        #92400e;
}


.alert--info {
    border-color:
        #caeafa;

    background:
        var(--color-info-soft);

    color:
        #075985;
}


/* ============================================================================
   20. DASHBOARD BLOCKS
   ========================================================================== */

.dashboard-grid {
    display: grid;

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

    gap: 18px;
}


.dashboard-stack {
    display: grid;

    gap: 18px;
}


.dashboard-panel {
    min-height:
        300px;
}


/* ============================================================================
   21. CHART PLACEHOLDERS
   ========================================================================== */

.chart-container {
    position: relative;

    min-height:
        280px;
}


.chart-empty {
    display: grid;

    min-height:
        280px;

    place-items: center;

    border:
        1px dashed #d9dee8;

    border-radius:
        14px;

    background:
        #fafbfc;

    color:
        var(--text-muted);

    text-align: center;
}


.chart-empty strong {
    display: block;

    margin-bottom: 4px;

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


/* ============================================================================
   22. LISTS / RECENT ACTIVITY
   ========================================================================== */

.activity-list {
    display: grid;
}


.activity-item {
    display: grid;

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

    align-items: center;

    padding:
        13px 0;

    border-bottom:
        1px solid #edf0f4;

    gap: 12px;
}


.activity-item:last-child {
    border-bottom: 0;
}


.activity-item__icon {
    display: grid;

    width: 36px;
    height: 36px;

    place-items: center;

    border-radius:
        11px;

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

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


.activity-item__icon svg {
    width: 18px;
    height: 18px;
}


.activity-item__content {
    min-width: 0;
}


.activity-item__content strong {
    display: block;

    overflow: hidden;

    font-size: 12px;

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


.activity-item__content small {
    display: block;

    margin-top: 3px;

    color:
        var(--text-muted);

    font-size: 10px;
}


.activity-item__time {
    color:
        var(--text-muted);

    font-size: 10px;
}


/* ============================================================================
   23. WARNING CARDS
   ========================================================================== */

.warning-list {
    display: grid;

    gap: 10px;
}


.warning-card {
    display: flex;
    align-items: flex-start;

    padding:
        14px;

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

    border-radius:
        14px;

    background:
        #ffffff;

    gap: 11px;
}


.warning-card__icon {
    display: grid;
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    place-items: center;

    border-radius:
        10px;

    background:
        var(--color-warning-soft);

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


.warning-card--critical
.warning-card__icon {
    background:
        var(--color-danger-soft);

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


.warning-card__content {
    flex: 1;

    min-width: 0;
}


.warning-card__content strong {
    display: block;

    font-size: 12px;
}


.warning-card__content p {
    margin:
        4px 0 0;

    color:
        var(--text-secondary);

    font-size: 10px;

    line-height: 1.5;
}


/* ============================================================================
   24. TABS
   ========================================================================== */

.tabs {
    display: flex;
    align-items: center;

    overflow-x: auto;

    padding:
        4px;

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

    border-radius:
        13px;

    background:
        #ffffff;

    gap: 3px;
}


.tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height:
        36px;

    padding:
        0 13px;

    border-radius:
        9px;

    color:
        var(--text-secondary);

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;
}


.tab:hover {
    background:
        var(--bg-hover);
}


.tab.is-active {
    background:
        var(--color-primary-soft);

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


/* ============================================================================
   25. FILTER BAR
   ========================================================================== */

.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    padding:
        12px;

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

    border-radius:
        15px;

    background:
        #ffffff;

    gap: 9px;
}


.filter-control {
    min-height:
        38px;

    padding:
        0 11px;

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

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        var(--text-secondary);

    outline: none;

    font-size: 11px;
}


.filter-control:focus {
    border-color:
        var(--color-primary);

    box-shadow:
        0 0 0 3px
        rgba(91, 103, 241, 0.08);
}


/* ============================================================================
   26. EMPTY STATES
   ========================================================================== */

.empty-state {
    display: grid;

    min-height:
        280px;

    padding:
        34px;

    place-items: center;

    text-align: center;
}


.empty-state__inner {
    max-width:
        420px;
}


.empty-state__icon {
    display: grid;

    width: 54px;
    height: 54px;

    margin:
        0 auto 16px;

    place-items: center;

    border-radius:
        16px;

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

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


.empty-state h3 {
    margin:
        0;

    font-size: 17px;
}


.empty-state p {
    margin:
        8px 0 18px;

    color:
        var(--text-secondary);

    font-size: 12px;

    line-height: 1.6;
}


/* ============================================================================
   27. LOADING SKELETON
   ========================================================================== */

.skeleton {
    position: relative;

    overflow: hidden;

    border-radius:
        8px;

    background:
        #eef1f5;
}


.skeleton::after {
    position: absolute;

    inset: 0;

    transform:
        translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.62),
            transparent
        );

    animation:
        aho-skeleton 1.5s infinite;

    content: "";
}


@keyframes aho-skeleton {

    100% {
        transform:
            translateX(100%);
    }

}


/* ============================================================================
   28. MODAL
   ========================================================================== */

.modal-backdrop {
    position: fixed;
    z-index: 200;

    inset: 0;

    display: grid;

    padding: 24px;

    place-items: center;

    background:
        rgba(17, 24, 39, 0.38);

    backdrop-filter:
        blur(4px);
}


.modal {
    width:
        min(
            100%,
            680px
        );

    max-height:
        calc(100vh - 48px);

    overflow-y: auto;

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

    border-radius:
        24px;

    background:
        #ffffff;

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


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

    padding:
        20px 22px;

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


.modal__body {
    padding:
        22px;
}


.modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding:
        16px 22px;

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

    gap: 10px;
}


/* ============================================================================
   29. TOASTS
   ========================================================================== */

.toast-container {
    position: fixed;
    z-index: 300;

    right: 22px;
    bottom: 22px;

    display: grid;

    width:
        min(
            390px,
            calc(100vw - 44px)
        );

    gap: 10px;
}


.toast {
    padding:
        14px 16px;

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

    border-radius:
        14px;

    background:
        #ffffff;

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


/* ============================================================================
   30. FOOTER
   ========================================================================== */

.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    max-width:
        var(--content-max-width);

    margin:
        auto auto 0;

    padding:
        20px 34px;

    color:
        var(--text-muted);

    font-size: 10px;

    gap: 12px;
}


/* ============================================================================
   31. MOBILE SIDEBAR OVERLAY
   ========================================================================== */

.sidebar-overlay {
    position: fixed;
    z-index: 90;

    inset: 0;

    display: none;

    border: 0;

    background:
        rgba(17, 24, 39, 0.36);

    backdrop-filter:
        blur(2px);
}


/* ============================================================================
   32. RESPONSIVE
   ========================================================================== */

@media (
    max-width: 1300px
) {

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


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

}


@media (
    max-width: 1080px
) {

    .sidebar {
        transform:
            translateX(-100%);

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


    body.sidebar-open
    .sidebar {
        transform:
            translateX(0);
    }


    body.sidebar-open
    .sidebar-overlay {
        display: block;
    }


    .sidebar__close {
        display: grid;

        place-items: center;
    }


    .app-main {
        margin-left: 0;
    }


    .topbar__menu {
        display: grid;
    }


    .dashboard-grid {
        grid-template-columns:
            1fr;
    }


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

}


@media (
    max-width: 760px
) {

    :root {
        --topbar-height: 66px;
    }


    .content {
        padding:
            22px 16px 40px;
    }


    .topbar {
        padding:
            0 14px;
    }


    .topbar__eyebrow {
        display: none;
    }


    .topbar__title strong {
        font-size: 14px;
    }


    .user-menu {
        padding: 4px;
    }


    .user-menu__details,
    .user-menu__chevron {
        display: none;
    }


    .page-header {
        align-items: stretch;
        flex-direction: column;

        margin-bottom: 20px;
    }


    .page-header__actions {
        justify-content: flex-start;
    }


    .kpi-grid {
        grid-template-columns:
            1fr 1fr;

        gap: 12px;
    }


    .kpi-card {
        min-height: 125px;

        padding: 18px;
    }


    .kpi-card__value {
        font-size: 28px;
    }


    .grid--2,
    .grid--3,
    .grid--4,
    .grid--5,
    .grid--6 {
        grid-template-columns:
            1fr;
    }


    .form-grid {
        grid-template-columns:
            1fr;
    }


    .table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }


    .table-toolbar__left,
    .table-toolbar__right {
        width: 100%;
    }


    .app-footer {
        align-items: flex-start;
        flex-direction: column;

        padding:
            18px 16px;
    }


    .profile-dropdown {
        top: 62px;
        right: 12px;
    }

}


@media (
    max-width: 520px
) {

    .kpi-grid {
        grid-template-columns:
            1fr;
    }


    .kpi-card {
        min-height: 120px;
    }


    .page-header h1 {
        font-size: 26px;
    }


    .form-section {
        padding: 18px;
    }


    .card__header {
        padding:
            18px 18px 0;
    }


    .card__body {
        padding:
            18px;
    }


    .icon-button {
        width: 38px;
        height: 38px;
    }

}


/* ============================================================================
   33. ACCESSIBILITY
   ========================================================================== */

:focus-visible {
    outline:
        3px solid
        rgba(91, 103, 241, 0.28);

    outline-offset:
        2px;
}


@media (
    prefers-reduced-motion: reduce
) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}


/* ============================================================================
   34. PRINT
   ========================================================================== */

@media print {

    body {
        background:
            #ffffff;
    }


    .sidebar,
    .topbar,
    .app-footer,
    .sidebar-overlay,
    .btn,
    .profile-dropdown {
        display:
            none !important;
    }


    .app-main {
        margin-left: 0;
    }


    .content {
        max-width: none;

        padding: 0;
    }


    .card,
    .table-card,
    .form-section {
        box-shadow: none;

        break-inside: avoid;
    }

}