/* ═══════════════════════════════════════════════════════════════════════════
   SilverSHELL Controls - Premium Component Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   DynamicList Component
   ───────────────────────────────────────────────────────────────────────────── */
.silvershell-dynamiclist {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--ss-bg-surface, #ffffff);
    border: 1px solid var(--ss-border-subtle, #f1f5f9);
    border-radius: var(--ss-radius-xl, 1rem);
    box-shadow: var(--ss-shadow-card, 0 1px 3px rgb(0 0 0 / 0.04), 0 6px 16px rgb(0 0 0 / 0.04));
    overflow: hidden;
}

.silvershell-dynamiclist.compact {
    font-size: 0.95em;
}

.dynamiclist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ss-space-5, 1.25rem) var(--ss-space-6, 1.5rem);
    border-bottom: 1px solid var(--ss-border-subtle, #f1f5f9);
    background: var(--ss-bg-subtle, #f8fafc);
}

[data-theme="dark"] .dynamiclist-header {
    background: var(--ss-bg-muted, #1e293b);
}

.dynamiclist-title {
    margin: 0;
    font-family: var(--ss-font-display, inherit);
    font-size: var(--ss-font-size-lg, 1.125rem);
    font-weight: 600;
    color: var(--ss-text-primary, #0f172a);
    letter-spacing: -0.01em;
}

.dynamiclist-header-actions {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3, 0.75rem);
}

.rz-datatable-data td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DataGrid Component
   ───────────────────────────────────────────────────────────────────────────── */
.silvershell-datagrid {
    width: 100%;
    background: var(--ss-bg-surface, #ffffff);
    border: 1px solid var(--ss-border-subtle, #f1f5f9);
    border-radius: var(--ss-radius-xl, 1rem);
    box-shadow: var(--ss-shadow-card, 0 1px 3px rgb(0 0 0 / 0.04), 0 6px 16px rgb(0 0 0 / 0.04));
    overflow: hidden;
}

.datagrid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ss-space-5, 1.25rem) var(--ss-space-6, 1.5rem);
    background: var(--ss-bg-subtle, #f8fafc);
    border-bottom: 2px solid var(--ss-accent-500, #f59e0b);
}

[data-theme="dark"] .datagrid-header {
    background: var(--ss-bg-muted, #1e293b);
}

.datagrid-header h4 {
    margin: 0;
    font-family: var(--ss-font-display, inherit);
    font-weight: 600;
    color: var(--ss-text-primary, #0f172a);
}

.datagrid-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ss-space-4, 1rem) var(--ss-space-6, 1.5rem);
    background: var(--ss-bg-surface, #ffffff);
    border-bottom: 1px solid var(--ss-border-subtle, #f1f5f9);
    gap: var(--ss-space-4, 1rem);
}

.datagrid-toolbar .search-box {
    flex: 1;
    max-width: 320px;
}

.datagrid-toolbar .search-box .rz-textbox {
    width: 100%;
}

.datagrid-toolbar .toolbar-actions {
    display: flex;
    gap: var(--ss-space-2, 0.5rem);
}

.datagrid-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ss-space-4, 1rem) var(--ss-space-6, 1.5rem);
    background: var(--ss-bg-subtle, #f8fafc);
    border-top: 1px solid var(--ss-border-subtle, #f1f5f9);
}

[data-theme="dark"] .datagrid-pagination {
    background: var(--ss-bg-muted, #1e293b);
}

.pagination-info {
    color: var(--ss-text-tertiary, #64748b);
    font-size: var(--ss-font-size-sm, 0.875rem);
    font-family: var(--ss-font-display, inherit);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Settings Panel Component
   ───────────────────────────────────────────────────────────────────────────── */
.settings-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--ss-z-modal-backdrop, 400);
    animation: ss-fade-in 0.2s ease-out;
}

.settings-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 100vw;
    height: 100vh;
    background: var(--ss-bg-surface, #ffffff);
    box-shadow: var(--ss-shadow-2xl, 0 25px 50px -12px rgb(0 0 0 / 0.15));
    z-index: var(--ss-z-modal, 500);
    display: flex;
    flex-direction: column;
    animation: ss-slide-in-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 1px solid var(--ss-border-subtle, #f1f5f9);
}

.settings-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ss-space-5, 1.25rem) var(--ss-space-6, 1.5rem);
    border-bottom: 1px solid var(--ss-border-subtle, #f1f5f9);
    background: var(--ss-bg-subtle, #f8fafc);
}

[data-theme="dark"] .settings-panel-header {
    background: var(--ss-bg-muted, #1e293b);
}

.settings-panel-header h4 {
    margin: 0;
    font-family: var(--ss-font-display, inherit);
    font-size: var(--ss-font-size-lg, 1.125rem);
    font-weight: 600;
    color: var(--ss-text-primary, #0f172a);
}

.settings-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--ss-space-4, 1rem);
}

.settings-section {
    padding: var(--ss-space-4, 1rem) var(--ss-space-2, 0.5rem);
}

.column-item {
    display: flex;
    align-items: center;
    padding: var(--ss-space-3, 0.75rem) var(--ss-space-2, 0.5rem);
    gap: var(--ss-space-3, 0.75rem);
    border-radius: var(--ss-radius-md, 0.5rem);
    transition: all var(--ss-transition-fast, 150ms);
}

.column-item:hover {
    background: var(--ss-bg-muted, #f1f5f9);
}

.column-item label {
    cursor: pointer;
    user-select: none;
    flex: 1;
    font-family: var(--ss-font-display, inherit);
    font-size: var(--ss-font-size-sm, 0.875rem);
    color: var(--ss-text-secondary, #475569);
    transition: color var(--ss-transition-fast, 150ms);
}

.column-item label:hover {
    color: var(--ss-accent-600, #d97706);
}

[data-theme="dark"] .column-item label:hover {
    color: var(--ss-accent-400, #fbbf24);
}

/* ─────────────────────────────────────────────────────────────────────────────
   View Manager Component
   ───────────────────────────────────────────────────────────────────────────── */
.view-manager-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--ss-z-modal-backdrop, 400);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ss-fade-in 0.2s ease-out;
}

.view-manager-dialog {
    width: 480px;
    max-width: 95vw;
    max-height: 85vh;
    background: var(--ss-bg-surface, #ffffff);
    border-radius: var(--ss-radius-2xl, 1.5rem);
    box-shadow: var(--ss-shadow-2xl, 0 25px 50px -12px rgb(0 0 0 / 0.15));
    border: 1px solid var(--ss-border-subtle, #f1f5f9);
    display: flex;
    flex-direction: column;
    animation: ss-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.view-manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ss-space-5, 1.25rem) var(--ss-space-6, 1.5rem);
    border-bottom: 1px solid var(--ss-border-subtle, #f1f5f9);
}

.view-manager-header h3 {
    margin: 0;
    font-family: var(--ss-font-display, inherit);
    font-size: var(--ss-font-size-xl, 1.25rem);
    font-weight: 600;
    color: var(--ss-text-primary, #0f172a);
}

.view-manager-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--ss-space-6, 1.5rem);
}

.view-manager-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--ss-space-3, 0.75rem);
    padding: var(--ss-space-4, 1rem) var(--ss-space-6, 1.5rem);
    border-top: 1px solid var(--ss-border-subtle, #f1f5f9);
    background: var(--ss-bg-subtle, #f8fafc);
}

[data-theme="dark"] .view-manager-footer {
    background: var(--ss-bg-muted, #1e293b);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RealTime Notification Component
   ───────────────────────────────────────────────────────────────────────────── */
.realtime-notification-container {
    width: 100%;
}

.notification-list {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-3, 0.75rem);
    margin-top: var(--ss-space-4, 1rem);
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ss-space-3, 0.75rem);
    padding: var(--ss-space-4, 1rem);
    background: var(--ss-bg-surface, #ffffff);
    border: 1px solid var(--ss-border-subtle, #f1f5f9);
    border-radius: var(--ss-radius-lg, 0.75rem);
    box-shadow: var(--ss-shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.06));
    transition: all var(--ss-transition-fast, 150ms);
    animation: ss-fade-up 0.3s ease-out;
}

.notification-item:hover {
    border-color: var(--ss-border-default, #e2e8f0);
    box-shadow: var(--ss-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.07));
}

.notification-item .material-icons {
    font-size: 20px;
    color: var(--ss-accent-500, #f59e0b);
}

.notification-item-content {
    flex: 1;
}

.notification-item-title {
    font-family: var(--ss-font-display, inherit);
    font-weight: 600;
    font-size: var(--ss-font-size-sm, 0.875rem);
    color: var(--ss-text-primary, #0f172a);
    margin-bottom: var(--ss-space-1, 0.25rem);
}

.notification-item-message {
    font-size: var(--ss-font-size-sm, 0.875rem);
    color: var(--ss-text-secondary, #475569);
}

.notification-item-time {
    font-size: var(--ss-font-size-xs, 0.75rem);
    color: var(--ss-text-muted, #94a3b8);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Premium Empty States
   ───────────────────────────────────────────────────────────────────────────── */
.ss-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ss-space-16, 4rem) var(--ss-space-8, 2rem);
    text-align: center;
}

.ss-empty-state-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--ss-space-4, 1rem);
    color: var(--ss-text-muted, #94a3b8);
}

.ss-empty-state-title {
    font-family: var(--ss-font-display, inherit);
    font-size: var(--ss-font-size-lg, 1.125rem);
    font-weight: 600;
    color: var(--ss-text-primary, #0f172a);
    margin-bottom: var(--ss-space-2, 0.5rem);
}

.ss-empty-state-description {
    font-size: var(--ss-font-size-sm, 0.875rem);
    color: var(--ss-text-tertiary, #64748b);
    max-width: 320px;
    margin-bottom: var(--ss-space-6, 1.5rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive Overrides
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .dynamiclist-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ss-space-3, 0.75rem);
        padding: var(--ss-space-4, 1rem);
    }

    .dynamiclist-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .settings-panel {
        width: 100% !important;
        border-left: none;
    }

    .view-manager-dialog {
        width: 95vw !important;
        border-radius: var(--ss-radius-xl, 1rem);
    }

    .datagrid-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ss-space-2, 0.5rem);
        padding: var(--ss-space-4, 1rem);
    }

    .datagrid-toolbar {
        flex-direction: column;
        gap: var(--ss-space-3, 0.75rem);
        padding: var(--ss-space-4, 1rem);
    }

    .datagrid-toolbar .search-box {
        max-width: 100%;
        width: 100%;
    }

    .datagrid-toolbar .toolbar-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .datagrid-pagination {
        flex-direction: column;
        gap: var(--ss-space-3, 0.75rem);
        text-align: center;
        padding: var(--ss-space-4, 1rem);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Animation Keyframes (fallbacks if not using main CSS)
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes ss-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ss-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ss-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ss-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}