/**
 * Custom Styles for CORCET Technical Assistance Management
 * Extends Bootstrap 5 with brand-specific styling
 */

/* ==========================================================================
   Brand Colors
   ========================================================================== */
:root {
    --corcet-primary: #667eea;
    --corcet-primary-dark: #5568d3;
    --corcet-secondary: #764ba2;
    --corcet-accent: #dc143c;
    --corcet-success: #28a745;
    --corcet-info: #17a2b8;
    --corcet-warning: #ffc107;
    --corcet-danger: #dc3545;

    /* Status Colors */
    --status-pending: #6c757d;
    --status-assigned: #0d6efd;
    --status-in-progress: #0dcaf0;
    --status-completed: #198754;
    --status-closed: #212529;

    /* Priority Colors */
    --priority-low: #6c757d;
    --priority-normal: #0dcaf0;
    --priority-high: #ffc107;
    --priority-urgent: #dc3545;
}

/* ==========================================================================
   Global Styles
   ========================================================================== */
/* Explicit color-scheme prevents the browser from inheriting the OS dark mode
   for native widgets (select popups, scrollbars, inputs) before the page CSS
   settles. Without this, Chromium on Windows with OS dark mode briefly shows
   native dropdowns with a black background while the page loads. */
:root {
    color-scheme: light;
}
:root[data-theme="dark"] {
    color-scheme: dark;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   Gradient Backgrounds
   ========================================================================== */
.gradient-primary {
    background: linear-gradient(135deg, var(--corcet-primary) 0%, var(--corcet-secondary) 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, var(--corcet-accent) 0%, #c41230 100%);
}

/* ==========================================================================
   Custom Buttons
   ========================================================================== */
.btn-corcet {
    background: linear-gradient(135deg, var(--corcet-primary) 0%, var(--corcet-secondary) 100%);
    border: none;
    color: white;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-corcet:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    color: white;
}

.btn-crimson {
    background: var(--corcet-accent);
    border: none;
    color: white;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-crimson:hover {
    background: #c41230;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(220, 20, 60, 0.4);
    color: white;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Um transform num ancestral torna-o o referencial de position:fixed. Cards
   que contêm menus dropdown ficam SEMPRE sem o lift do hover — se o transform
   alternasse (hover ou abertura do menu), o menu era calculado num referencial
   e reinterpretado noutro, saltando/piscando. */
.card:has([data-bs-toggle="dropdown"]),
.card:has([data-bs-toggle="dropdown"]):hover {
    transform: none;
}

.card-header {
    border-radius: 12px 12px 0 0 !important;
    font-weight: 600;
}

/* O gradiente do cabecalho e um background-image: as classes bg-* do Bootstrap
   so mudam a background-color, por isso nao conseguiam apaga-lo e o cabecalho
   saia sempre no gradiente. Quem pede um fundo proprio (bg-light, bg-transparent,
   bg-warning bg-opacity-10, ...) fica com ele e com a cor de texto normal. */
.card-header:not([class*="bg-"]) {
    background: linear-gradient(135deg, var(--corcet-primary) 0%, var(--corcet-secondary) 100%);
    color: white;
}

/* ==========================================================================
   Badges
   ========================================================================== */
.badge {
    padding: 0.5em 0.75em;
    font-weight: 500;
    border-radius: 6px;
}

.badge-status-pending {
    background-color: var(--status-pending);
    color: white;
}

.badge-status-assigned {
    background-color: var(--status-assigned);
    color: white;
}

.badge-status-inprogress {
    background-color: var(--status-in-progress);
    color: #000;
}

.badge-status-completed {
    background-color: var(--status-completed);
    color: white;
}

.badge-priority-low {
    background-color: var(--priority-low);
    color: white;
}

.badge-priority-normal {
    background-color: var(--priority-normal);
    color: #000;
}

.badge-priority-high {
    background-color: var(--priority-high);
    color: #000;
}

.badge-priority-urgent {
    background-color: var(--priority-urgent);
    color: white;
}

/* Custom Role Badge Colors */
.badge-purple { background-color: #7c3aed; color: #fff; }
.badge-orange { background-color: #ea580c; color: #fff; }
.badge-pink { background-color: #db2777; color: #fff; }
.badge-teal { background-color: #0d9488; color: #fff; }
.badge-indigo { background-color: #4f46e5; color: #fff; }
.badge-lime { background-color: #65a30d; color: #fff; }
.badge-brown { background-color: #78350f; color: #fff; }
.badge-navy { background-color: #1e3a5f; color: #fff; }
.badge-coral { background-color: #ef6351; color: #fff; }
.badge-slate { background-color: #475569; color: #fff; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-control:focus,
.form-select:focus {
    border-color: var(--corcet-primary);
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
}

/* Ensure native <option> elements always have legible foreground/background.
   Some OS dropdowns (notably Windows 11 + Chromium) render with inherited
   dark colors before the page CSS settles, causing a "black dropdown" flash.
   Forcing explicit colors prevents the flash and speeds up perceived rendering. */
.form-select option,
select option {
    background: #fff;
    color: #212529;
}

.form-label {
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table {
    border-radius: 8px;
    overflow: hidden;
}

.table thead {
    background: linear-gradient(135deg, var(--corcet-primary) 0%, var(--corcet-secondary) 100%);
    color: white;
}

.table thead th {
    border: none;
    font-weight: 600;
    padding: 1rem;
}

.table tbody tr {
    transition: background-color 0.2s;
}

.table tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.05);
}

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Cabeçalho de modal limpo (2026-07): neutro, sem gradiente — a cor do
   departamento/ação vive no chip de ícone (.mc-chip, ver hub-polish.css). */
.modal-header {
    background: var(--bg-secondary, #fff);
    color: var(--text-primary, #212529);
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    padding: 14px 22px;
}

.modal-header .modal-title {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 11px;
}

[data-theme="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ==========================================================================
   Navigation Tabs
   ========================================================================== */
.nav-tabs {
    border-bottom: 2px solid #dee2e6;
}

.nav-tabs .nav-link {
    color: #6c757d;
    font-weight: 500;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
}

.nav-tabs .nav-link:hover {
    color: var(--corcet-primary);
    border-bottom-color: var(--corcet-primary);
}

.nav-tabs .nav-link.active {
    color: var(--corcet-primary);
    background: none;
    border-bottom-color: var(--corcet-primary);
}

/* ==========================================================================
   Loading Overlay
   ========================================================================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.spinner-border-custom {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
    border-color: white;
    border-right-color: transparent;
}

/* ==========================================================================
   Signature Canvas
   ========================================================================== */
.signature-canvas {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    cursor: crosshair;
    touch-action: none;
    background: #f8f9fa;
}

.signature-canvas:active {
    border-color: var(--corcet-primary);
}

/* ==========================================================================
   Alert Toasts
   ========================================================================== */
.toast {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.toast-header {
    border-radius: 10px 10px 0 0;
    font-weight: 600;
}

/* ==========================================================================
   Statistics Cards
   ========================================================================== */
.stat-card {
    border-radius: 12px;
    padding: 1.5rem;
    color: white;
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-4px);
}

.stat-card-icon {
    font-size: 2.5rem;
    opacity: 0.8;
}

.stat-card-value {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.stat-card-label {
    font-size: 0.9rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   Responsive Utilities
   ========================================================================== */
@media (max-width: 768px) {
    .table {
        font-size: 0.875rem;
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    .card {
        margin-bottom: 1rem;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .no-print {
        display: none !important;
    }

    .card {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.cursor-pointer {
    cursor: pointer;
}

.text-gradient {
    background: linear-gradient(135deg, var(--corcet-primary) 0%, var(--corcet-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hover-scale {
    transition: transform 0.2s;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-shadow {
    transition: box-shadow 0.2s;
}

.hover-shadow:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}