/* ========================================
   EASY Business - Global Styles (ShowCase)
   ======================================== */

/* CSS Custom Properties / Variables */
:root {
    /* Layout Spacing */
    --eb-header-padding: 0.625rem;
    --eb-content-padding: 1rem;
    --eb-toolbar-margin-bottom: 1rem;
    --eb-card-padding: 1rem;
    /* Icon Sizes */
    --eb-icon-size: 1.25rem;
    --eb-icon-size-small: 1rem;
    --eb-icon-size-large: 1.5rem;
    /* Avatar */
    --eb-avatar-size: 2rem;
    --eb-avatar-margin-left: 0.75rem;
    --dxbl-body-bg: rgb(244, 244, 243);
    --dxbl-body-color: rgb(22, 22, 22);
}

/* Small Size Mode */
.small-size {
    --eb-icon-size: 1rem;
    --eb-avatar-size: 1.5rem;
    --eb-avatar-margin-left: 0.5rem;
    --eb-header-padding: 0.5rem;
    --eb-content-padding: 0.75rem;
}

/* Large Size Mode */
.large-size {
    --eb-icon-size: 1.5rem;
    --eb-avatar-size: 2.5rem;
    --eb-avatar-margin-left: 1rem;
    --eb-header-padding: 0.75rem;
    --eb-content-padding: 1.25rem;
}

/* Base Icon Styles */
.eb-icon {
    opacity: 0.85;
    background-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100% 100%;
    background-color: currentColor;
    display: inline-block;
}

    .eb-icon.medium-icon {
        width: var(--eb-icon-size);
        height: var(--eb-icon-size);
    }

    .eb-icon.small-icon {
        width: var(--eb-icon-size-small);
        height: var(--eb-icon-size-small);
    }

    .eb-icon.large-icon {
        width: var(--eb-icon-size-large);
        height: var(--eb-icon-size-large);
    }

/* Icon Definitions using Font Awesome or inline SVG masks */
/* Hamburger / Navigation */
.eb-icon-hamburger {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");
}

/* Home */
.eb-icon-home {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}

/* Settings / Gear */
.eb-icon-settings {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");
}

/* Person / User */
.eb-icon-person {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

/* Person Add */
.eb-icon-person-add {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

/* Sign Out / Logout */
.eb-icon-sign-out {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z'/%3E%3C/svg%3E");
}

/* Sun (Light Theme) */
.eb-icon-sun {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z'/%3E%3C/svg%3E");
}

/* Moon (Dark Theme) */
.eb-icon-moon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2c-1.05 0-2.05.16-3 .46 4.06 1.27 7 5.06 7 9.54 0 4.48-2.94 8.27-7 9.54.95.3 1.95.46 3 .46 5.52 0 10-4.48 10-10S14.52 2 9 2z'/%3E%3C/svg%3E");
}

/* Bell / Notifications */
.eb-icon-bell {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E");
}

/* Sales / Money */
.eb-icon-sales {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z'/%3E%3C/svg%3E");
}

/* People / Group */
.eb-icon-people {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}

/* Warehouse / Storage */
.eb-icon-warehouse {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z'/%3E%3C/svg%3E");
}

/* Clock / Time */
.eb-icon-clock {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

/* Inventory / Box */
.eb-icon-inventory {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1 0-2 .9-2 2v3.01c0 .72.43 1.34 1 1.69V20c0 1.1 1.1 2 2 2h14c.9 0 2-.9 2-2V8.7c.57-.35 1-.97 1-1.69V4c0-1.1-1-2-2-2zm-5 12H9v-2h6v2zm5-7H4V4h16v3z'/%3E%3C/svg%3E");
}

/* Database */
.eb-icon-database {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C7.58 3 4 4.79 4 7v10c0 2.21 3.59 4 8 4s8-1.79 8-4V7c0-2.21-3.58-4-8-4zm0 2c3.87 0 6 1.5 6 2s-2.13 2-6 2-6-1.5-6-2 2.13-2 6-2zM6 17v-2.42c1.23.74 3.14 1.42 6 1.42s4.77-.68 6-1.42V17c0 .5-2.13 2-6 2s-6-1.5-6-2zm0-5v-2.42c1.23.74 3.14 1.42 6 1.42s4.77-.68 6-1.42V12c0 .5-2.13 2-6 2s-6-1.5-6-2z'/%3E%3C/svg%3E");
}

/* Chart / Analytics */
.eb-icon-chart {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z'/%3E%3C/svg%3E");
}

/* Back Arrow */
.eb-icon-back {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E");
}

/* Refresh */
.eb-icon-refresh {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}

/* Copy */
.eb-icon-copy {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E");
}

/* Add / Plus */
.eb-icon-add {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}

/* Edit / Pencil */
.eb-icon-edit {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}

/* Delete / Trash */
.eb-icon-delete {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}

/* Export */
.eb-icon-export {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z'/%3E%3C/svg%3E");
}

/* Column Chooser */
.eb-icon-columns {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z'/%3E%3C/svg%3E");
}

/* ========================================
   Card Component Styles
   ======================================== */
.eb-card {
    background-color: var(--dxds-color-surface-neutral-default-rest);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: var(--eb-card-padding);
}

.eb-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
    margin-bottom: 1rem;
}

.eb-card-title {
    font-size: var(--dxds-font-size-title-sm, 1.125rem);
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
    margin: 0;
}

/* ========================================
   Page Toolbar Styles (ShowCase-Pattern)
   ======================================== */
.eb-page-toolbar {
    margin-bottom: var(--eb-toolbar-margin-bottom);
}

    .eb-page-toolbar .eb-card {
        padding: 0.5rem 0.75rem;
    }

::deep .eb-page-toolbar .dxbl-toolbar-title {
    font-weight: 600;
    font-size: var(--dxds-font-size-title-sm, 1.125rem);
}

/* ========================================
   Side Menu Drawer Styles (Classic Layout)
   ======================================== */
.side-menu-drawer {
    background-color: #fff;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    width: 280px !important;
    z-index: 100;
}

    .side-menu-drawer .mdc-drawer__content {
        padding: 0;
    }

.side-menu-content {
    height: 100%;
    overflow-y: auto;
    padding: 0.5rem;
    padding-top: 64px; /* Platz für die AppBar */
}

.menu-toggle-btn {
    margin-right: 0.5rem;
    color: inherit;
}

/* TreeView im Seitenmenü anpassen */
.side-menu-content .dxbl-treeview {
    font-size: 0.9rem;
}

.side-menu-content .dxbl-treeview-item-container {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    margin: 0.125rem 0;
}

    .side-menu-content .dxbl-treeview-item-container:hover {
        background-color: var(--eb-hover-bg, rgba(0, 0, 0, 0.04));
    }

    .side-menu-content .dxbl-treeview-item-container.dxbl-selected {
        background-color: var(--bs-primary, #f97316);
        color: white;
    }

        .side-menu-content .dxbl-treeview-item-container.dxbl-selected i {
            color: white;
        }

/* Top-Level Items fett */
.side-menu-content [role="treeitem"][aria-level="1"] > .dxbl-treeview-item-container {
    font-weight: 600;
}

/* Icon-Spacing */
.side-menu-content .dxbl-treeview-item-container i {
    margin-right: 0.5rem;
    width: 1.25rem;
    text-align: center;
}

/* Drawer-Container Anpassung */
.mdc-drawer--dismissible.mdc-drawer--open + .mdc-drawer-app-content {
    margin-left: 280px;
}

/* ========================================
   Classic Layout with DxDrawer Styles
   ======================================== */
.main-layout-classic {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.classic-header {
    flex-shrink: 0;
    background-color: var(--dxbl-surface-color, #fff);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 0 0.5rem;
    height: 48px;
}

    .classic-header .header-content {
        display: flex;
        align-items: center;
        height: 100%;
        gap: 0.5rem;
    }

    .classic-header .menu-toggle-btn {
        flex-shrink: 0;
    }

    .classic-header .logo-img {
        height: 2rem;
        width: auto;
        flex-shrink: 0;
    }

    .classic-header .nav-menu-wrapper {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

        .classic-header .nav-menu-wrapper .dxbl-menu {
            flex-wrap: nowrap !important;
        }

    .classic-header .header-right-menu {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        flex-shrink: 0;
        margin-left: auto;
    }

    .classic-header .user-profile-btn {
        padding: 0.25rem;
    }

.main-content-wrapper {
    flex: 1;
    overflow: hidden;
    display: flex;
}

.classic-drawer {
    height: 100%;
}

    .classic-drawer .dxbl-drawer-panel {
        border-right: 1px solid rgba(0, 0, 0, 0.08);
        background-color: #fff;
    }

.side-menu-content {
    height: 100%;
    overflow-y: auto;
    padding: 0.5rem;
}

.main-content-area {
    flex: 1;
    overflow: auto;
    padding: 1rem;
    background-color: rgb(244, 244, 243);
}

/* TreeView im Seitenmenü */
.side-menu-content .dxbl-treeview {
    font-size: 0.9rem;
}

.side-menu-content .dxbl-treeview-item-container {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    margin: 0.125rem 0;
}

    .side-menu-content .dxbl-treeview-item-container:hover {
        background-color: rgba(0, 0, 0, 0.04);
    }

    .side-menu-content .dxbl-treeview-item-container.dxbl-selected {
        background-color: #f97316;
        color: white;
    }

        .side-menu-content .dxbl-treeview-item-container.dxbl-selected i {
            color: white;
        }

.side-menu-content [role="treeitem"][aria-level="1"] > .dxbl-treeview-item-container {
    font-weight: 600;
}

.side-menu-content .dxbl-treeview-item-container i {
    margin-right: 0.5rem;
    width: 1.25rem;
    text-align: center;
}

/* ================================================
   TICKET SYSTEM STYLES
   ================================================ */

/* Status Badges */
.ticket-status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.ticket-status-compact {
    padding: 0.15rem 0.35rem;
    font-size: 0.65rem;
}

.ticket-status-new {
    background: #17a2b8;
    color: white;
}

.ticket-status-assigned {
    background: #007bff;
    color: white;
}

.ticket-status-inprogress {
    background: #ffc107;
    color: black;
}

.ticket-status-waiting {
    background: #6c757d;
    color: white;
}

.ticket-status-onhold {
    background: #fd7e14;
    color: white;
}

.ticket-status-resolved {
    background: #28a745;
    color: white;
}

.ticket-status-closed {
    background: #343a40;
    color: white;
}

/* Priority Badges */
.ticket-priority {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.ticket-priority-low {
    color: #28a745;
}

.ticket-priority-medium {
    color: #ffc107;
}

.ticket-priority-high {
    color: #dc3545;
}

.ticket-priority-critical {
    color: #dc3545;
    animation: pulse 1s infinite;
}

/* SLA Warning */
.ticket-sla-warning {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
}

.ticket-sla-breached {
    background: #f8d7da !important;
    border-left: 4px solid #dc3545;
}

/* Kanban Board */
.kanban-board {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 1rem;
    min-height: 70vh;
}

.kanban-column {
    min-width: 280px;
    max-width: 320px;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.75rem;
    flex-shrink: 0;
}

.kanban-column-header {
    font-weight: 600;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-column-count {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.kanban-cards {
    min-height: 200px;
}

.kanban-card {
    background: white;
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: grab;
    transition: box-shadow 0.2s, transform 0.2s;
}

    .kanban-card:hover {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

    .kanban-card.dragging {
        opacity: 0.5;
        cursor: grabbing;
    }

.kanban-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.kanban-card-title {
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.kanban-card-meta {
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-number {
    font-family: monospace;
    font-size: 0.75rem;
}

/* Comment Thread */
.comment-thread {
    max-height: 500px;
    overflow-y: auto;
}

.comment-item {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}

    .comment-item:last-child {
        border-bottom: none;
    }

    .comment-item.internal {
        background: #fff3cd;
        border-left: 3px solid #ffc107;
    }

    .comment-item.system {
        background: #e9ecef;
        font-style: italic;
    }

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.comment-author {
    font-weight: 600;
}

.comment-date {
    color: #6c757d;
}

.comment-body {
    line-height: 1.5;
}

.comment-actions {
    font-size: 0.75rem;
}

.comment-editor {
    background: #f8f9fa;
}

/* History Timeline */
.history-timeline {
    position: relative;
    padding-left: 2rem;
}

    .history-timeline::before {
        content: '';
        position: absolute;
        left: 0.5rem;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #dee2e6;
    }

.history-item {
    position: relative;
    padding-bottom: 1rem;
    font-size: 0.875rem;
}

    .history-item::before {
        content: '';
        position: absolute;
        left: -1.5rem;
        top: 0.25rem;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #007bff;
        border: 2px solid white;
        box-shadow: 0 0 0 2px #dee2e6;
    }

    .history-item.created::before {
        background: #28a745;
    }

    .history-item.status-change::before {
        background: #17a2b8;
    }

    .history-item.assignment::before {
        background: #ffc107;
    }

    .history-item.priority::before {
        background: #dc3545;
    }

    .history-item.comment::before {
        background: #6c757d;
    }

.history-author {
    color: #6c757d;
}

.old-value {
    text-decoration: line-through;
}

/* Dashboard Cards */
.ticket-stat-card {
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    color: white;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .ticket-stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .ticket-stat-card.open {
        background: linear-gradient(135deg, #007bff, #0056b3);
    }

    .ticket-stat-card.new {
        background: linear-gradient(135deg, #17a2b8, #117a8b);
    }

    .ticket-stat-card.overdue {
        background: linear-gradient(135deg, #dc3545, #a71d2a);
    }

    .ticket-stat-card.resolved {
        background: linear-gradient(135deg, #28a745, #19692c);
    }

.ticket-stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.ticket-stat-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-top: 0.5rem;
}

/* Ticket Grid */
.ticket-grid .dxbl-grid-table tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Animations */
@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}