/* PMO Custom Styles - Phoenix Theme Extensions */

/* ─── Loading Animation ────────────────────────────────────────────────────── */
@keyframes blazor-loading {
    to { stroke-dashoffset: 0; }
}

#pmo-loading {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #0f1b2d 0%, #1e3a5f 100%);
}

/* ─── Blazor Error UI ────────────────────────────────────────────────────────── */
#blazor-error-ui {
    background: #e63757;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: white;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }
#blazor-error-ui a { color: white; font-weight: 700; }

/* ─── Stat Cards ─────────────────────────────────────────────────────────────── */
.pmo-stat-card {
    border-radius: 0.75rem;
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: default;
}
.pmo-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(44, 123, 229, 0.15) !important;
}
.pmo-stat-icon {
    width: 48px; height: 48px;
    border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
}

/* ─── Progress Bar Colors ───────────────────────────────────────────────────── */
.progress-bar-todo      { background-color: #6c757d; }
.progress-bar-inprogress { background-color: #2c7be5; }
.progress-bar-done      { background-color: #00d27a; }
.progress-bar-overdue   { background-color: #e63757; }

/* ─── Project Card ───────────────────────────────────────────────────────────── */
.pmo-project-card {
    border-radius: 1rem;
    border: 1px solid var(--phoenix-border-color, rgba(0,0,0,0.12));
    transition: all 0.25s ease;
}
.pmo-project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

/* ─── Kanban Board ───────────────────────────────────────────────────────────── */
.kanban-column {
    min-height: 400px;
    border-radius: 0.75rem;
    padding: 1rem;
}
.kanban-column-todo      { background-color: rgba(108,117,125,0.08); }
.kanban-column-inprogress { background-color: rgba(44,123,229,0.08); }
.kanban-column-done      { background-color: rgba(0,210,122,0.08); }
.kanban-card {
    background: var(--phoenix-card-bg, #fff);
    border-radius: 0.5rem;
    border: 1px solid var(--phoenix-border-color, rgba(0,0,0,0.1));
    margin-bottom: 0.75rem;
    padding: 0.875rem;
    cursor: grab;
    transition: box-shadow 0.2s;
}
.kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.kanban-drop-zone { min-height: 60px; }

/* ─── Status Badges ──────────────────────────────────────────────────────────── */
.badge-todo         { background-color: rgba(108,117,125,0.15); color: #6c757d; }
.badge-inprogress   { background-color: rgba(44,123,229,0.15);  color: #2c7be5; }
.badge-done         { background-color: rgba(0,210,122,0.15);   color: #00a65e; }
.badge-active       { background-color: rgba(0,210,122,0.15);   color: #00a65e; }
.badge-onhold       { background-color: rgba(255,182,0,0.15);   color: #c98a00; }
.badge-completed    { background-color: rgba(92,96,245,0.15);   color: #5c60f5; }
.badge-cancelled    { background-color: rgba(230,55,87,0.15);   color: #e63757; }

/* ─── PMO Sidebar Brand ─────────────────────────────────────────────────────── */
.pmo-brand {
    font-size: 1.35rem;
    font-weight: 800;
    color: #2c7be5;
    letter-spacing: -0.5px;
}
.pmo-brand span { color: var(--phoenix-body-color, #344050); }

/* Sidebar Collapse Transitions */
.navbar-vertical {
    transition: width 0.2s ease, margin 0.2s ease;
}

.navbar-vertical-collapsed.navbar-vertical {
    width: 4.625rem !important;
}

.navbar-vertical-collapsed.navbar-vertical .nav-link-text,
.navbar-vertical-collapsed.navbar-vertical .navbar-vertical-label,
.navbar-vertical-collapsed.navbar-vertical .navbar-vertical-footer-text,
.navbar-vertical-collapsed.navbar-vertical .pmo-brand,
.navbar-vertical-collapsed.navbar-vertical .dropdown-indicator-icon,
.navbar-vertical-collapsed.navbar-vertical .navbar-vertical-line {
    display: none !important;
}

.navbar-vertical-collapsed.navbar-vertical .navbar-brand {
    justify-content: center !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.navbar-vertical-collapsed.navbar-vertical .navbar-brand .me-2 {
    margin-right: 0 !important;
}

.navbar-vertical-collapsed.navbar-vertical .navbar-vertical-content {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.navbar-vertical-collapsed.navbar-vertical .nav-item {
    width: 100% !important;
    display: flex;
    justify-content: center;
}

.navbar-vertical-collapsed.navbar-vertical .nav-link {
    justify-content: center !important;
    padding: 0.625rem 0 !important;
    width: 3rem !important;
    border-radius: 0.375rem !important;
}

.navbar-vertical-collapsed.navbar-vertical .nav-link-icon {
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide submenus in collapsed mode to prevent layout breaks */
.navbar-vertical-collapsed.navbar-vertical .parent-wrapper {
    display: none !important;
}

/* Center and adjust collapsed footer toggle button */
.navbar-vertical-collapsed.navbar-vertical .navbar-vertical-footer {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.navbar-vertical-collapsed.navbar-vertical .navbar-vertical-toggle {
    justify-content: center !important;
    padding: 0.5rem 0 !important;
}

.navbar-vertical-collapsed.navbar-vertical .navbar-vertical-toggle span {
    margin: 0 !important;
}

/* ─── White Theme Contrast Fixes ────────────────────────────────────────────── */
:root {
    --phoenix-text-900: #0f172a;
    --phoenix-text-700: #334155;
    --phoenix-text-600: #475569;
}

body.light {
    color: var(--phoenix-text-700);
}

.text-900 { color: var(--phoenix-text-900) !important; }
.text-700 { color: var(--phoenix-text-700) !important; }
.text-600 { color: var(--phoenix-text-600) !important; }

/* Fix white text on light elements */
.btn-light, .btn-phoenix-secondary {
    color: var(--phoenix-text-700) !important;
}

/* ─── Avatar ─────────────────────────────────────────────────────────────────── */
.avatar-circle {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700;
    background: linear-gradient(135deg, #2c7be5, #5c60f5);
    color: white !important;
}

/* ─── Table Tweaks ───────────────────────────────────────────────────────────── */
.pmo-table th { 
    font-size: 0.78rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    padding-left: 1.5rem !important; 
    padding-right: 1.5rem !important;
    background-color: #f8fafc;
    color: var(--phoenix-text-900);
}
.pmo-table td { 
    vertical-align: middle; 
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    color: var(--phoenix-text-700);
}

/* ─── Form focus glow ────────────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(44, 123, 229, 0.25);
}

/* ─── Responsive Sidebar ─────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .navbar-vertical {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .navbar-vertical.show {
        transform: translateX(0);
    }
}

/* ─── Global Layout Fixes ────────────────────────────────────────────────────── */
.card-body {
    padding: 1.5rem !important;
}
.card {
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.form-label {
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--phoenix-text-900);
}
.content {
    padding-bottom: 2rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}
.blazor-error-boundary {
    z-index: 1050;
}
.mb-4 {
    margin-bottom: 1.5rem !important;
}
.gap-2 {
    gap: 0.5rem !important;
}
.gap-3 { gap: 1rem !important; }
.table-responsive { margin-top: 1rem; }