/* ============================================================================
   PCS - BOOTSTRAP OVERRIDES
   Minimal Bootstrap customization + Professional Layout
   ============================================================================ */

/* ============================================================================
   BOOTSTRAP COMPONENT OVERRIDES
   ============================================================================ */

/* Button improvements */
.btn {
    font-weight: var(--pcs-weight-medium);
    border-radius: var(--pcs-radius-sm);
    transition: all var(--pcs-transition-fast);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

/* Icon-only button helper */
.btn.btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn.btn-icon.btn-sm {
    width: 2rem;
    height: 2rem;
}

.btn.btn-icon.btn-lg {
    width: 3rem;
    height: 3rem;
}

/* Badge improvements */
.badge {
    font-weight: var(--pcs-weight-medium);
    border-radius: var(--pcs-radius-full);
}

/* Dropdown improvements */
.dropdown-menu {
    border-radius: var(--pcs-radius-md);
    border: 1px solid var(--pcs-border);
    box-shadow: var(--pcs-shadow-lg);
    padding: var(--pcs-space-sm);
}

.dropdown-item {
    border-radius: var(--pcs-radius-sm);
    transition: all var(--pcs-transition-fast);
}

.dropdown-item:hover {
    background: var(--pcs-surface-secondary);
}

/* Offcanvas */
.offcanvas-footer {
    flex-shrink: 0;
    box-shadow: var(--pcs-shadow-md);
}

/* ============================================================================
   PROFESSIONAL LAYOUT - Navbar + Sidebar
   ============================================================================ */

/* Professional Navbar */
.professional-navbar {
    position: sticky;
    top: 0;
    z-index: var(--pcs-z-sticky);
    height: var(--pcs-navbar-height);
    border-bottom: 1px solid var(--pcs-border);
    backdrop-filter: var(--pcs-glass-blur);
    -webkit-backdrop-filter: var(--pcs-glass-blur);
    background: var(--pcs-glass-bg);
    box-shadow: var(--pcs-shadow-sm);
}

.navbar-container {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--pcs-space-lg);
    padding: 0 var(--pcs-space-lg);
}

.navbar-left,
.navbar-center,
.navbar-right {
    display: flex;
    align-items: center;
    gap: var(--pcs-space-md);
}

.navbar-left {
    min-width: 320px;
}

.navbar-center {
    flex: 1;
    justify-content: center;
}

.navbar-right {
    justify-content: flex-end;
}

/* Navbar Brand */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--pcs-space-sm);
    font-weight: var(--pcs-weight-bold);
    font-size: var(--pcs-font-xl);
    color: var(--pcs-primary);
    letter-spacing: var(--pcs-tracking-tight);
}

.navbar-brand small {
    font-size: var(--pcs-font-sm);
    font-weight: var(--pcs-weight-normal);
    color: var(--pcs-text-secondary);
}

/* Menu Toggle Button */
.menu-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--pcs-radius-sm);
    background: transparent;
    border: 1px solid var(--pcs-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--pcs-transition-fast);
    color: var(--pcs-text-primary);
    font-size: var(--pcs-font-xl);
}

.menu-toggle-btn:hover {
    background: var(--pcs-surface-secondary);
    border-color: var(--pcs-primary);
}

/* Status Panel in Navbar */
.status-panel {
    display: flex;
    align-items: center;
    gap: var(--pcs-space-md);
    padding: var(--pcs-space-sm) var(--pcs-space-lg);
    background: var(--pcs-surface);
    border-radius: var(--pcs-radius-lg);
    border: 1px solid var(--pcs-border);
    box-shadow: var(--pcs-shadow-xs);
}

.status-item {
    display: flex;
    align-items: center;
    gap: var(--pcs-space-sm);
    padding: var(--pcs-space-sm) var(--pcs-space-md);
    border-radius: var(--pcs-radius-sm);
    cursor: pointer;
    transition: all var(--pcs-transition-fast);
    background: transparent;
    border: none;
    color: var(--pcs-text-primary);
}

.status-item:hover {
    background: var(--pcs-surface-secondary);
    transform: scale(1.05);
}

.status-count {
    font-weight: var(--pcs-weight-semibold);
    font-size: var(--pcs-font-lg);
}

.status-separator {
    width: 1px;
    height: 24px;
    background: var(--pcs-border);
}

/* Status Colors */
.status-normal { color: var(--pcs-status-normal); }
.status-inspection { color: var(--pcs-status-inspection); }
.status-failure { color: var(--pcs-status-failure); }
.status-offline { color: var(--pcs-status-offline); }

/* Connection Indicator */
.connection-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--pcs-radius-sm);
    font-size: var(--pcs-font-lg);
}

.connection-indicator.connected {
    color: var(--pcs-status-normal);
}

.connection-indicator.disconnected {
    color: var(--pcs-status-failure);
}

/* Icon Button */
.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--pcs-radius-sm);
    background: transparent;
    border: 1px solid var(--pcs-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--pcs-transition-fast);
    color: var(--pcs-text-primary);
}

.icon-btn:hover {
    background: var(--pcs-surface-secondary);
    border-color: var(--pcs-primary);
    transform: translateY(-1px);
}

/* User Button */
.user-btn {
    display: flex;
    align-items: center;
    gap: var(--pcs-space-sm);
    padding: var(--pcs-space-sm) var(--pcs-space-md);
    border-radius: var(--pcs-radius-sm);
    background: transparent;
    border: 1px solid var(--pcs-border);
    cursor: pointer;
    transition: all var(--pcs-transition-fast);
}

.user-btn:hover {
    background: var(--pcs-surface-secondary);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--pcs-radius-full);
    background: var(--pcs-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--pcs-weight-semibold);
    font-size: var(--pcs-font-sm);
}

.user-name {
    font-weight: var(--pcs-weight-medium);
    color: var(--pcs-text-primary);
}

/* Professional Dropdown */
.professional-dropdown {
    min-width: 200px;
}

.professional-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--pcs-space-sm);
}

.professional-dropdown .dropdown-item i {
    width: 20px;
}

/* ============================================================================
   PROFESSIONAL SIDEBAR
   ============================================================================ */

.professional-sidebar {
    position: fixed;
    left: 0;
    top: var(--pcs-navbar-height);
    bottom: 0;
    width: var(--pcs-sidebar-width);
    background: var(--pcs-glass-bg);
    backdrop-filter: var(--pcs-glass-blur);
    -webkit-backdrop-filter: var(--pcs-glass-blur);
    border-right: 1px solid var(--pcs-border);
    transition: transform var(--pcs-transition-base);
    transform: translateX(-100%);
    z-index: var(--pcs-z-fixed);
    overflow-y: auto;
}

.professional-sidebar.open {
    transform: translateX(0);
}

/* Sidebar Navigation */
.professional-nav-menu {
    padding: var(--pcs-space-lg);
}

.nav-header {
    margin-bottom: var(--pcs-space-xl);
    padding-bottom: var(--pcs-space-lg);
    border-bottom: 1px solid var(--pcs-border);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: var(--pcs-space-md);
}

.logo-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--pcs-radius-md);
    background: var(--pcs-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pcs-font-2xl);
}

.logo-title {
    font-size: var(--pcs-font-xl);
    font-weight: var(--pcs-weight-bold);
    color: var(--pcs-text-primary);
}

.logo-subtitle {
    font-size: var(--pcs-font-sm);
    color: var(--pcs-text-secondary);
}

/* Nav Sections */
.nav-section {
    margin-bottom: var(--pcs-space-xl);
}

.section-title {
    font-size: var(--pcs-font-xs);
    font-weight: var(--pcs-weight-semibold);
    color: var(--pcs-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--pcs-tracking-wide);
    margin-bottom: var(--pcs-space-md);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--pcs-space-md);
    padding: var(--pcs-space-md);
    border-radius: var(--pcs-radius-sm);
    color: var(--pcs-text-secondary);
    text-decoration: none;
    font-weight: var(--pcs-weight-medium);
    transition: all var(--pcs-transition-fast);
    margin-bottom: var(--pcs-space-xs);
}

.nav-item:hover {
    background: var(--pcs-surface-secondary);
    color: var(--pcs-primary);
    transform: translateX(4px);
}

.nav-item.active {
    background: var(--pcs-primary-light);
    color: var(--pcs-primary);
    font-weight: var(--pcs-weight-semibold);
}

.nav-item i {
    width: 20px;
    font-size: var(--pcs-font-lg);
}

/* Nav Category (Collapsible) */
.nav-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px; /* Explicit padding for better visibility */
    border-radius: var(--pcs-radius-sm);
    color: var(--pcs-text-secondary);
    font-weight: 500; /* Medium weight */
    font-size: 0.875rem; /* 14px - same as nav-item */
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 4px;
    user-select: none;
}

.nav-category:hover {
    background: var(--pcs-surface-secondary);
    color: var(--pcs-text-primary);
}

.category-icon {
    font-size: 0.875rem; /* 14px - more visible */
    color: var(--pcs-text-tertiary);
    opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-category:hover .category-icon {
    opacity: 1; /* Full opacity on hover */
}

.category-icon.expanded {
    transform: rotate(90deg);
    opacity: 1; /* Always visible when expanded */
}

/* Nav Items Group (Collapsible Content) */
.nav-items-group {
    padding-left: var(--pcs-space-lg);
    margin-bottom: var(--pcs-space-sm);
}

.nav-items-group .nav-item {
    font-size: var(--pcs-font-sm);
    padding: var(--pcs-space-sm) var(--pcs-space-md);
}

/* ============================================================================
   MAIN CONTENT AREA
   ============================================================================ */

.professional-content {
    margin-left: 0;
    margin-top: var(--pcs-navbar-height);
    min-height: calc(100vh - var(--pcs-navbar-height));
    transition: margin-left var(--pcs-transition-base);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* Desktop: Sidebar toggleable */
@media (min-width: 993px) {
    .professional-content.sidebar-open {
        margin-left: var(--pcs-sidebar-width);
    }
}

/* Mobile/Tablet: Sidebar hidden by default, shows with .open class */
@media (max-width: 992px) {
    .navbar-stats {
        display: none;
    }
    
    .professional-sidebar {
        box-shadow: var(--pcs-shadow-xl);
    }
    
    .professional-content,
    .professional-content.sidebar-open {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .navbar-left {
        min-width: auto;
    }
    
    .navbar-brand small {
        display: none;
    }
    
    .status-panel {
        gap: var(--pcs-space-sm);
        padding: var(--pcs-space-xs) var(--pcs-space-md);
    }
    
    .status-count {
        font-size: var(--pcs-font-base);
    }
}

@media (max-width: 576px) {
    .offcanvas-end {
        width: 90vw !important;
        max-width: 90vw !important;
    }
}