/* TIE Professional Layout Theme - Inspired by logo.jpg */
:root {
  --tie-primary: #1e647d;         /* Teal from Logo */
  --tie-primary-hover: #1a5c74;   /* Darker Teal */
  --tie-primary-soft: rgba(30, 100, 125, 0.1);
  --tie-sidebar: #192241;         /* Deep Navy from Logo */
  --tie-sidebar-hover: #212c52;   /* Slightly lighter Navy */
  --tie-text-light: #e2e8f0;
}

/* Global Overrides for Spruko Template */
.bg-primary { background-color: var(--tie-primary) !important; }
.bg-primary-transparent { background-color: var(--tie-primary-soft) !important; }
.text-primary { color: var(--tie-primary) !important; }

.btn-primary, .btn-main-primary {
    background-color: var(--tie-primary) !important;
    border-color: var(--tie-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--tie-primary-hover) !important;
    border-color: var(--tie-primary-hover) !important;
}

/* Sidebar & Header Styling */
.app-sidebar, .app-sidebar__overlay {
    background: var(--tie-sidebar) !important;
    border-right: none !important;
}

/* Integrate logo background perfectly */
.main-sidebar-header {
    background: var(--tie-sidebar) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.main-sidebar-header img {
    border-radius: 5px; /* Clean up any harsh edges of the logo */
}

/* --- Sidebar Menu Text Visibility Fix --- */
.side-menu__item {
    color: rgba(255, 255, 255, 0.6) !important;
    border-bottom: 1px solid rgba(255,255,255,0.02);
}
.side-menu__label, .side-menu__icon, .side-menu__item .angle {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Active State & Hover */
.side-menu__item.active, 
.side-menu__item:hover, 
.side-menu__item:focus {
    background: var(--tie-sidebar-hover) !important;
    color: #fff !important;
    border-radius: 0;
}
.side-menu__item.active .side-menu__label, 
.side-menu__item:hover .side-menu__label,
.side-menu__item.active .side-menu__icon, 
.side-menu__item:hover .side-menu__icon {
    color: #fff !important;
    font-weight: 600 !important;
}

/* Highlight Active Menu elegantly */
.side-menu__item.active {
    background: var(--tie-primary) !important;
    border-radius: 6px;
    margin: 4px 8px;
    box-shadow: 0 4px 10px rgba(30, 100, 125, 0.3);
}

/* Category Headers */
.side-item.side-item-category {
    color: rgba(255,255,255,0.4) !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-top: 10px;
}

/* Top Header adjustments */
.main-header {
    border-bottom: 2px solid var(--tie-primary-soft) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
    background: #ffffff !important;
}
.main-header-profile {
    background-color: var(--tie-primary) !important;
}

/* General Layout Tweaks for Coordination */
body {
    background-color: #f4f7fb !important; /* Soft backdrop */
}
.card {
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}
.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}