/* ============================================================================
   ALZAR LOGIC — MODULAR CSS ENTRY POINT
   Import Order: Base → Layout → Components → Modules
   ============================================================================ */

/* --- BASE --- */
@import url('./base/variables.css');
@import url('./base/reset.css');
@import url('./phosphor-fix.css');
@import url('./base/utilities.css');

/* --- LAYOUT --- */
@import url('./layout/shell.css');
@import url('./layout/grid.css');

/* --- COMPONENTS --- */
@import url('./components/buttons.css');
@import url('./components/forms.css');
@import url('./components/cards.css');
@import url('./components/dashboard-core.css');
@import url('./components/modals.css');
@import url('./components/tables.css');

/* --- MODULES --- */
@import url('./modules/login.css');
@import url('./modules/estimator.css');
@import url('./modules/cfo.css');
@import url('./modules/report.css');
@import url('./modules/production.css');
@import url('./modules/pos.css');
@import url('./modules/permit.css');
@import url('./modules/dashboard.css');
@import url('./modules/dashboard-roles.css');
@import url('./modules/settings.css');
@import url('./modules/web-leads.css');
@import url('./modules/alzar-chat.css');
@import url('./modules/crm-split-view.css');
@import url('./modules/ai-analyzer.css');
@import url('./modules/automation.css');
@import url('./modules/csv-import.css');
@import url('./modules/job-hub.css');
@import url('./modules/material-catalog.css');
@import url('./modules/notepad-widget.css');
@import url('./modules/platform-ai.css');
@import url('./modules/platform-assemblies.css');
@import url('./modules/platform-cfo.css');
@import url('./modules/platform-management.css');
@import url('./predictor.css');

/* --- BRANDING & THEMES (must be last to win the cascade) --- */
@import url('./unified.css');
@import url('./themes.css');
/* NOTE: electron.css is injected via JS only in Electron desktop context — do not import here */

#feedback-panel {
    position: fixed;
    bottom: 88px;
    right: 24px;
    z-index: 9499;
    width: 340px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-ui);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    display: none;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#feedback-panel.fbk-open {
    display: flex;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.fbk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--color-info-dim);
    border-bottom: 1px solid var(--color-border);
}
.fbk-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-main);
}
.fbk-title i { color: var(--color-active); font-size: 18px; }
.fbk-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 2px;
    line-height: 1;
    transition: color 0.15s;
}
.fbk-close:hover { color: var(--color-text-main); }

.fbk-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.fbk-hint  { font-size: 0.75rem; color: var(--color-text-muted); margin: 0 0 4px; line-height: 1.5; }
.fbk-label { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 500; }

/* Category chips */
.fbk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.fbk-chip {
    background: var(--overlay-active);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-ui);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-family: inherit;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.fbk-chip:hover { background: var(--color-active-dim); border-color: rgba(59,130,246,0.4); color: var(--color-text-main); }
.fbk-chip.active { background: rgba(59,130,246,0.22); border-color: var(--color-active); color: #bfdbfe; font-weight: 600; }

html[data-brightness="light"] .fbk-chip {
    background: rgba(0,0,0,0.04);
}

/* Log toggle */
.fbk-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
}
.fbk-toggle input[type="checkbox"] {
    accent-color: var(--color-active);
    width: 14px; height: 14px;
    margin: 0;
    cursor: pointer;
}
.fbk-toggle i { font-size: 0.85rem; }
.fbk-input,
.fbk-textarea {
    width: 100%;
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-ui);
    padding: 8px 10px;
    color: var(--color-text-main);
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.fbk-input:focus,
.fbk-textarea:focus {
    outline: none;
    border-color: var(--color-active);
}

.fbk-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--color-border);
}
.fbk-status { font-size: 0.75rem; color: var(--color-text-muted); flex: 1; }
.fbk-status.success { color: var(--color-primary); }
.fbk-status.error   { color: #f87171; }

@media (max-width: 480px) {
    #feedback-panel {
        width: calc(100vw - 32px);
        right: 16px;
    }
}