.app-shell {
    min-height: 100vh;
}

/* Light / dark overall background */
.app-shell.light-theme {
    background-color: #ffffff;
    color: #212529;
}

.app-shell.dark-theme {
    background-color: #121212;
    color: #f5f5f5;
}

    .app-shell.dark-theme .navbar {
        background-color: #1f1f1f !important;
    }

/* Sidebar styles */
.sidebar {
    width: 220px;
    background-color: #343a40;
    color: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
    transition: width 0.2s ease-in-out;
}

    .sidebar.collapsed {
        width: 64px;
    }

.sidebar-header {
    color: #fff;
    margin-bottom: 0.75rem;
}

.sidebar-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.sidebar-nav {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.sidebar .nav-link {
    color: #ced4da;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0;
}

    .sidebar .nav-link.active,
    .sidebar .nav-link:hover {
        color: #ffffff;
        background-color: #495057;
    }

.sidebar-icon {
    width: 1.5rem;
    text-align: center;
}

.sidebar-section {
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.7;
    padding: 0.75rem 0.75rem 0.25rem;
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-section-header:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.section-toggle-icon {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}

.sidebar.collapsed .nav-text,
.sidebar.collapsed .sidebar-section {
    display: none;
}

.sidebar-toggle {
    font-size: 0.9rem;
    padding: 0.15rem 0.4rem;
}

/* Base dialog tweaks */
.my-dialog.e-dialog {
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  overflow: hidden;
}

/* Header styling */
.my-dialog .e-dlg-header-content {
  background: linear-gradient(90deg, #0d6efd, #6610f2);
  color: #fff;
  padding: 12px 16px;
}

/* Content area */
.my-dialog .e-dlg-content {
  padding: 16px;
}

/* Footer area */
.my-dialog .e-footer-content {
  background: #f8f9fa;
  padding: 12px 16px;
}

/* Custom input look */
.classy-dialog .qty-input .e-input-group {
  border-color: #0d6efd;
}
.classy-dialog .qty-input .e-input-group input {
  font-weight: 600;
}

/* Kanban card job type badges */
.jobtype-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}

.badge-label   { background-color: #0d6efd; }  /* blue */
.badge-preprint{ background-color: #6f42c1; }  /* purple */
.badge-rewind  { background-color: #198754; }  /* green */
.badge-core    { background-color: #fd7e14; }  /* orange */
.badge-default { background-color: #6c757d; }  /* gray */

.completed-qty-input .e-input {
    padding: 0 4px;
    text-align: right;
}

.compact-card {
    padding: 0;                    /* padding now on .tight-card */
    font-size: 0.8rem;
}

.e-kanban .e-card {
    margin: 2px 2px;
    padding: 4px 6px;              /* shrink card padding */
}

.kanban-card-body.tight-card {
    padding: 4px 4px;              /* inner padding */
}

.kanban-card-body.tight-card .mb-1 {
    margin-bottom: 0.1rem;         /* smaller vertical gaps */
}

.kanban-card-body.tight-card .small {
    line-height: 1.1;              /* denser lines */
}

.save-produced-btn {
    min-width: 90px;
    font-weight: 700;
    text-transform: uppercase;
}

.priority-chip {
    display: inline-block;
    margin-bottom: 0.25rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #fff4e0;
    color: #b45309;
}

.detail-lines {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.72rem;
}

.detail-lines li {
    line-height: 1.2;
}

.app-shell.dark-theme .jobtype-badge {
    background-color: #8dbbff;
    color: #0a223f;
}

.app-shell.dark-theme .priority-chip {
    background: rgba(255, 210, 140, 0.25);
    color: #ffe4b8;
    border: 1px solid rgba(255, 210, 140, 0.55);
}

.app-shell.dark-theme .text-muted,
.app-shell.dark-theme .priority-chip .text-muted {
    color: #d4d7dd !important;
}

.kanban-tabs-container {
    height: calc(100vh - 220px); /* adjust to match your header/filter height */
    display: flex;
    flex-direction: column;
}

.kanban-tabs-container .e-tab {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.kanban-tabs-container .e-tab .e-content {
    flex: 1 1 auto;
}

.tab-pane-body {
    height: 100%;
    overflow: auto;
    padding: 0.5rem 0.25rem 0.75rem;
}

.badge.bg-success {
    background-color: #198754 !important;
}

.badge.bg-warning.text-dark {
    background-color: #ffc107 !important;
    color: #212529 !important;
}
/* Dark mode form input fixes */
body.dark-mode input[type="text"],
body.dark-mode input[type="date"],
body.dark-mode input[type="number"],
body.dark-mode input[type="email"],
body.dark-mode select,
body.dark-mode textarea {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
    border: 1px solid #555 !important;
}

    body.dark-mode input[type="text"]:focus,
    body.dark-mode input[type="date"]:focus,
    body.dark-mode input[type="number"]:focus,
    body.dark-mode input[type="email"]:focus,
    body.dark-mode select:focus,
    body.dark-mode textarea:focus {
        background-color: #404040 !important;
        border-color: #777 !important;
        outline: none;
    }

    /* Ensure placeholder text is visible */
    body.dark-mode input::placeholder,
    body.dark-mode textarea::placeholder {
        color: #999 !important;
    }

    /* Fix for disabled/readonly inputs */
    body.dark-mode input:disabled,
    body.dark-mode input:read-only,
    body.dark-mode textarea:disabled,
    body.dark-mode textarea:read-only {
        background-color: #2b2b2b !important;
        color: #888 !important;
        cursor: not-allowed;
    }

    /* Date picker calendar icon visibility */
    body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }

    /* Select dropdown arrow */
body.dark-mode select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e0e0e0' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* Syncfusion input overrides for dark mode */
body.dark-mode .e-input-group input.e-input,
body.dark-mode .e-input-group.e-control-wrapper input.e-input,
body.dark-mode .e-float-input input,
body.dark-mode .e-float-input.e-control-wrapper input {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
}

body.dark-mode .e-input-group,
body.dark-mode .e-input-group.e-control-wrapper {
    background-color: #3a3a3a !important;
    border-color: #555 !important;
}

body.dark-mode .e-float-input .e-float-line::before,
body.dark-mode .e-float-input .e-float-line::after {
    background-color: #777 !important;
}

/* Syncfusion dropdown list */
body.dark-mode .e-dropdownbase .e-list-item {
    color: #e0e0e0 !important;
}

body.dark-mode .e-dropdownbase {
    background-color: #2b2b2b !important;
}

/* Animation for expanding/collapsing */
.sidebar-nav .nav-item {
    animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Collapsed sidebar adjustments */
.sidebar.collapsed .sidebar-section-header .nav-text {
    display: none;
}

.sidebar.collapsed .section-toggle-icon {
    display: none;
}

/* ========================================
   DARK THEME FORM CONTROLS
   ======================================== */

/* Base input, select, and textarea styling for dark theme */
.dark-theme input[type="text"],
.dark-theme input[type="email"],
.dark-theme input[type="number"],
.dark-theme input[type="date"],
.dark-theme input[type="datetime-local"],
.dark-theme input[type="time"],
.dark-theme input[type="search"],
.dark-theme select,
.dark-theme textarea {
    background-color: #3a3a3a !important;
    color: #e8e8e8 !important;
    border: 1px solid #555 !important;
}

/* Focus states */
.dark-theme input:focus,
.dark-theme select:focus,
.dark-theme textarea:focus {
    background-color: #404040 !important;
    border-color: #0d6efd !important;
    color: #e8e8e8 !important;
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Placeholder text */
.dark-theme input::placeholder,
.dark-theme textarea::placeholder {
    color: #aaa !important;
    opacity: 1;
}

/* Disabled/readonly states */
.dark-theme input:disabled,
.dark-theme input:read-only,
.dark-theme select:disabled,
.dark-theme textarea:disabled,
.dark-theme textarea:read-only {
    background-color: #2b2b2b !important;
    color: #888 !important;
    border-color: #444 !important;
    cursor: not-allowed;
}

/* Date picker calendar icon - make it visible */
.dark-theme input[type="date"]::-webkit-calendar-picker-indicator,
.dark-theme input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    cursor: pointer;
}

/* Select dropdown styling */
.dark-theme select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e8e8e8' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

/* Select options */
.dark-theme select option {
    background-color: #2b2b2b;
    color: #e8e8e8;
}

/* Form labels */
.dark-theme label {
    color: #e8e8e8;
}

/* Textareas - ensure proper sizing */
.dark-theme textarea {
    min-height: 80px;
    resize: vertical;
}

/* ========================================
   SYNCFUSION COMPONENT OVERRIDES
   ======================================== */

/* Syncfusion Input Groups */
.dark-theme .e-input-group,
.dark-theme .e-input-group.e-control-wrapper,
.dark-theme .e-float-input,
.dark-theme .e-float-input.e-control-wrapper {
    background-color: #3a3a3a !important;
    border-color: #555 !important;
}

.dark-theme .e-input-group input.e-input,
.dark-theme .e-input-group.e-control-wrapper input.e-input,
.dark-theme .e-float-input input,
.dark-theme .e-float-input.e-control-wrapper input {
    background-color: #3a3a3a !important;
    color: #e8e8e8 !important;
}

/* Syncfusion float labels */
.dark-theme .e-float-input .e-float-line::before,
.dark-theme .e-float-input .e-float-line::after {
    background-color: #555 !important;
}

.dark-theme .e-float-input.e-input-focus .e-float-line::before,
.dark-theme .e-float-input.e-input-focus .e-float-line::after {
    background-color: #0d6efd !important;
}

.dark-theme .e-float-input label.e-float-text,
.dark-theme .e-float-input.e-control-wrapper label.e-float-text {
    color: #aaa !important;
}

.dark-theme .e-float-input.e-input-focus label.e-float-text,
.dark-theme .e-float-input.e-control-wrapper.e-input-focus label.e-float-text {
    color: #0d6efd !important;
}

/* Syncfusion Dropdown Lists */
.dark-theme .e-ddl.e-input-group,
.dark-theme .e-ddl.e-input-group.e-control-wrapper {
    background-color: #3a3a3a !important;
    border-color: #555 !important;
}

.dark-theme .e-ddl .e-input-group-icon,
.dark-theme .e-ddl .e-input-group-icon.e-ddl-icon {
    color: #e8e8e8 !important;
}

.dark-theme .e-ddl input.e-input {
    background-color: #3a3a3a !important;
    color: #e8e8e8 !important;
}

/* Dropdown popup */
.dark-theme .e-dropdownbase,
.dark-theme .e-dropdownbase .e-list-parent {
    background-color: #2b2b2b !important;
    border-color: #555 !important;
}

.dark-theme .e-dropdownbase .e-list-item {
    color: #e8e8e8 !important;
}

.dark-theme .e-dropdownbase .e-list-item:hover,
.dark-theme .e-dropdownbase .e-list-item.e-hover {
    background-color: #404040 !important;
}

.dark-theme .e-dropdownbase .e-list-item.e-active {
    background-color: #0d6efd !important;
    color: #fff !important;
}

/* Syncfusion DatePicker */
.dark-theme .e-datepicker.e-input-group,
.dark-theme .e-datepicker.e-input-group.e-control-wrapper {
    background-color: #3a3a3a !important;
    border-color: #555 !important;
}

.dark-theme .e-datepicker .e-input-group-icon,
.dark-theme .e-datepicker .e-input-group-icon.e-date-icon {
    color: #e8e8e8 !important;
}

/* DatePicker calendar popup */
.dark-theme .e-calendar,
.dark-theme .e-calendar .e-content {
    background-color: #2b2b2b !important;
    color: #e8e8e8 !important;
}

.dark-theme .e-calendar .e-header,
.dark-theme .e-calendar .e-footer-container {
    background-color: #1f1f1f !important;
    border-color: #555 !important;
}

.dark-theme .e-calendar .e-header .e-title,
.dark-theme .e-calendar .e-header .e-prev,
.dark-theme .e-calendar .e-header .e-next {
    color: #e8e8e8 !important;
}

.dark-theme .e-calendar .e-content td {
    color: #e8e8e8 !important;
}

.dark-theme .e-calendar .e-content td:hover,
.dark-theme .e-calendar .e-content td.e-hover {
    background-color: #404040 !important;
}

.dark-theme .e-calendar .e-content td.e-selected {
    background-color: #0d6efd !important;
    color: #fff !important;
}

/* Syncfusion TextArea */
.dark-theme .e-input-group.e-control-wrapper.e-multi-line-input,
.dark-theme .e-input-group.e-multi-line-input {
    background-color: #3a3a3a !important;
    border-color: #555 !important;
}

.dark-theme .e-input-group.e-multi-line-input textarea.e-input,
.dark-theme .e-input-group.e-control-wrapper.e-multi-line-input textarea.e-input {
    background-color: #3a3a3a !important;
    color: #e8e8e8 !important;
}

/* ========================================
   GRID STYLING FOR DARK MODE
   ======================================== */

.dark-theme .e-grid {
    background-color: #2b2b2b !important;
    color: #e8e8e8 !important;
}

.dark-theme .e-grid .e-gridheader,
.dark-theme .e-grid .e-headercell {
    background-color: #1f1f1f !important;
    color: #e8e8e8 !important;
    border-color: #444 !important;
}

.dark-theme .e-grid .e-gridcontent,
.dark-theme .e-grid .e-row,
.dark-theme .e-grid .e-altrow {
    background-color: #2b2b2b !important;
    color: #e8e8e8 !important;
    border-color: #444 !important;
}

.dark-theme .e-grid .e-row:hover,
.dark-theme .e-grid .e-altrow:hover {
    background-color: #353535 !important;
}

.dark-theme .e-grid .e-rowcell {
    border-color: #444 !important;
    color: #e8e8e8 !important;
}

/* ========================================
   BUTTON STYLING
   ======================================== */

.dark-theme .e-btn {
    color: #e8e8e8;
}

.dark-theme .e-btn.e-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

/* ========================================
   GENERAL FORM GROUPS
   ======================================== */

.dark-theme .form-control {
    background-color: #3a3a3a !important;
    color: #e8e8e8 !important;
    border-color: #555 !important;
}

.dark-theme .form-control:focus {
    background-color: #404040 !important;
    color: #e8e8e8 !important;
    border-color: #0d6efd !important;
}

.dark-theme .form-select {
    background-color: #3a3a3a !important;
    color: #e8e8e8 !important;
    border-color: #555 !important;
}

.dark-theme .form-label {
    color: #e8e8e8;
}
/* ===================================
   Dark Mode Fixes for Syncfusion Components
   =================================== */

/* Force dark theme on all Syncfusion components */
body.dark-mode {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

    /* Fix Syncfusion Grid backgrounds in dark mode */
    body.dark-mode .e-grid,
    body.dark-mode .e-grid .e-gridheader,
    body.dark-mode .e-grid .e-gridcontent,
    body.dark-mode .e-grid .e-content,
    body.dark-mode .e-grid .e-table,
    body.dark-mode .e-grid .e-gridpager {
        background-color: #2d2d30 !important;
        color: #e0e0e0 !important;
    }

        /* Fix grid rows */
        body.dark-mode .e-grid .e-row,
        body.dark-mode .e-grid .e-altrow {
            background-color: #2d2d30 !important;
            color: #e0e0e0 !important;
        }

            /* Fix grid row hover */
            body.dark-mode .e-grid .e-row:hover,
            body.dark-mode .e-grid .e-altrow:hover {
                background-color: #3e3e42 !important;
            }

        /* Fix grid headers */
        body.dark-mode .e-grid .e-headercell,
        body.dark-mode .e-grid .e-headercelldiv {
            background-color: #252526 !important;
            color: #e0e0e0 !important;
            border-color: #3e3e42 !important;
        }

        /* Fix grid cells */
        body.dark-mode .e-grid .e-rowcell {
            border-color: #3e3e42 !important;
            color: #e0e0e0 !important;
        }

        /* Fix grid pager */
        body.dark-mode .e-grid .e-pager,
        body.dark-mode .e-pager {
            background-color: #252526 !important;
            color: #e0e0e0 !important;
            border-color: #3e3e42 !important;
        }

            body.dark-mode .e-pager .e-numericcontainer,
            body.dark-mode .e-pager .e-pagercontainer {
                background-color: #252526 !important;
            }

                /* Fix pager links and buttons */
                body.dark-mode .e-pager .e-link,
                body.dark-mode .e-pager .e-numericitem,
                body.dark-mode .e-pager .e-currentitem,
                body.dark-mode .e-pager .e-pagercontainer .e-link {
                    color: #e0e0e0 !important;
                    background-color: transparent !important;
                }

            body.dark-mode .e-pager .e-currentitem {
                background-color: #3e3e42 !important;
                border-color: #007acc !important;
            }

    /* Fix Syncfusion Cards */
    body.dark-mode .e-card,
    body.dark-mode .e-card .e-card-header,
    body.dark-mode .e-card .e-card-content {
        background-color: #252526 !important;
        color: #e0e0e0 !important;
        border-color: #3e3e42 !important;
    }

    /* Fix Syncfusion Dropdowns */
    body.dark-mode .e-dropdownbase,
    body.dark-mode .e-ddl,
    body.dark-mode .e-input-group,
    body.dark-mode .e-float-input {
        background-color: #3c3c3c !important;
        color: #e0e0e0 !important;
        border-color: #3e3e42 !important;
    }

        body.dark-mode .e-input-group input,
        body.dark-mode .e-float-input input {
            background-color: #3c3c3c !important;
            color: #e0e0e0 !important;
        }

        /* Fix dropdown popup */
        body.dark-mode .e-popup,
        body.dark-mode .e-ddl.e-popup,
        body.dark-mode .e-dropdownbase .e-list-parent {
            background-color: #252526 !important;
            border-color: #3e3e42 !important;
        }

    body.dark-mode .e-list-item {
        color: #e0e0e0 !important;
        background-color: #252526 !important;
    }

        body.dark-mode .e-list-item:hover,
        body.dark-mode .e-list-item.e-hover {
            background-color: #3e3e42 !important;
        }

        body.dark-mode .e-list-item.e-active {
            background-color: #007acc !important;
            color: #ffffff !important;
        }

    /* Fix buttons */
    body.dark-mode .e-btn,
    body.dark-mode .btn {
        background-color: #0e639c !important;
        color: #ffffff !important;
        border-color: #007acc !important;
    }

        body.dark-mode .e-btn:hover,
        body.dark-mode .btn:hover {
            background-color: #1177bb !important;
        }

    body.dark-mode .btn-secondary {
        background-color: #3e3e42 !important;
        border-color: #555555 !important;
    }

    /* Fix DatePicker */
    body.dark-mode .e-datepicker,
    body.dark-mode .e-calendar {
        background-color: #252526 !important;
        color: #e0e0e0 !important;
    }

        body.dark-mode .e-calendar .e-content,
        body.dark-mode .e-calendar .e-header {
            background-color: #252526 !important;
            color: #e0e0e0 !important;
        }

        body.dark-mode .e-calendar .e-cell {
            color: #e0e0e0 !important;
        }

            body.dark-mode .e-calendar .e-cell:hover {
                background-color: #3e3e42 !important;
            }

    /* Fix TextBox */
    body.dark-mode .e-textbox,
    body.dark-mode .e-multiline,
    body.dark-mode textarea.e-input,
    body.dark-mode input.e-input {
        background-color: #3c3c3c !important;
        color: #e0e0e0 !important;
        border-color: #3e3e42 !important;
    }

    /* Fix form controls */
    body.dark-mode .form-control,
    body.dark-mode .form-select {
        background-color: #3c3c3c !important;
        color: #e0e0e0 !important;
        border-color: #3e3e42 !important;
    }

    /* Fix alerts */
    body.dark-mode .alert {
        background-color: #252526 !important;
        border-color: #3e3e42 !important;
    }

    body.dark-mode .alert-danger {
        background-color: #5a1d1d !important;
        color: #f48771 !important;
        border-color: #8b0000 !important;
    }

    body.dark-mode .alert-success {
        background-color: #1a5c1a !important;
        color: #75f475 !important;
        border-color: #006400 !important;
    }

    body.dark-mode .alert-info {
        background-color: #1a3c5c !important;
        color: #71d4f4 !important;
        border-color: #004080 !important;
    }

    /* Fix tables */
    body.dark-mode .table {
        color: #e0e0e0 !important;
        background-color: #2d2d30 !important;
    }

    body.dark-mode .table-sm td,
    body.dark-mode .table-sm th {
        border-color: #3e3e42 !important;
    }

    body.dark-mode .table-active {
        background-color: #3e3e42 !important;
    }

    /* Fix toolbar */
    body.dark-mode .e-toolbar,
    body.dark-mode .e-toolbar .e-toolbar-items {
        background-color: #252526 !important;
        border-color: #3e3e42 !important;
    }

        body.dark-mode .e-toolbar .e-toolbar-item .e-tbar-btn {
            color: #e0e0e0 !important;
        }

    /* Fix search box */
    body.dark-mode .e-search,
    body.dark-mode .e-searchbox {
        background-color: #3c3c3c !important;
        color: #e0e0e0 !important;
        border-color: #3e3e42 !important;
    }

    /* Fix any remaining white backgrounds */
    body.dark-mode .e-control,
    body.dark-mode .e-lib {
        background-color: transparent !important;
    }

    /* Ensure main content area is dark */
    body.dark-mode main,
    body.dark-mode .content,
    body.dark-mode .main-content {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
    }

/* Logo styles */
.company-logo {
    object-fit: contain;
    max-width: 100%;
    height: auto;
}

.sidebar-logo {
    max-height: 32px;
    max-width: 32px;
}

.navbar-logo {
    max-height: 40px;
}

.dashboard-logo {
    max-height: 80px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 5px;
    background: white;
}

.logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border-radius: 4px;
    color: #999;
}

.logo-placeholder i {
    font-size: 1.5rem;
}

/* Dark theme adjustments */
.dark-theme .dashboard-logo {
    background: #2d2d2d;
}

.dark-theme .logo-placeholder {
    background: #3d3d3d;
    color: #666;
}

/* New slideout AI panel styles */
.ai-slideout {
    position: fixed;
    top: 0;
    right: -420px; /* hidden by default */
    width: 400px;
    height: 100vh;
    background-color: #ffffff;
    border-left: 1px solid #dee2e6;
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.ai-slideout.open {
    right: 0;
}

.ai-slideout-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
}

.ai-slideout-body {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}

.ai-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.ai-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}