:root { --sidebar-width: 280px; --app-primary: #1b4d89; --app-primary-dark: #143a66; --app-surface: #ffffff; --app-surface-muted: #f4f6fb; --app-border: #e2e8f0; --app-sidebar-bg: #0f172a; --app-sidebar-surface: #111c34; --app-sidebar-text: #e2e8f0; --app-sidebar-muted: #94a3b8; --app-sidebar-hover: #1f2a44; --app-sidebar-active: #223159; }

html,
body { height: 100%; }

body { background-color: var(--app-surface-muted); color: #1f2937; }

.app-shell { min-height: 100vh; }

.sidebar { width: var(--sidebar-width); min-height: 100vh; height: 100vh; border-right: 1px solid var(--app-border); background-color: var(--app-sidebar-bg); position: sticky; top: 0; overflow: hidden; display: flex; flex-direction: column; }

    .sidebar .nav-scroll { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; }

    .sidebar .sidebar-brand { background-color: var(--app-sidebar-surface); color: var(--app-sidebar-text); }

        .sidebar .sidebar-brand small { color: var(--app-sidebar-muted); }

    .sidebar .nav-link { color: var(--app-sidebar-text); border-radius: 0.5rem; padding: 0.5rem 0.75rem; transition: background-color 0.2s ease, color 0.2s ease; }

        .sidebar .nav-link:hover,
        .sidebar .nav-link:focus { background-color: var(--app-sidebar-hover); color: #ffffff; }

    .sidebar .nav > .nav-item > .nav-link { font-weight: 600; }

    .sidebar .nav .list-unstyled .nav-link { font-size: 0.9rem; color: var(--app-sidebar-muted); padding-left: 0.75rem; }

        .sidebar .nav .list-unstyled .nav-link:hover,
        .sidebar .nav .list-unstyled .nav-link:focus { color: #ffffff; background-color: transparent; }

    .sidebar .text-uppercase { color: var(--app-sidebar-muted); letter-spacing: 0.08em; }

.content-shell { width: 100%; }

.top-header { position: sticky; top: 0; z-index: 1020; background-color: var(--app-surface); border-bottom: 1px solid var(--app-border); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04); }

    .top-header .btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); --bs-btn-hover-color: #ffffff; }

    .top-header .btn-outline-secondary { --bs-btn-color: #475569; --bs-btn-border-color: #cbd5f5; --bs-btn-hover-bg: #e2e8f0; --bs-btn-hover-border-color: #cbd5f5; }

.dropdown-menu { border-radius: 0.75rem; border: 1px solid var(--app-border); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12); padding: 0.5rem; }

.dropdown-item { border-radius: 0.5rem; font-weight: 350; color: #1f2937; }

    .dropdown-item:hover,
    .dropdown-item:focus { background-color: var(--app-surface-muted); color: var(--app-primary-dark); }

.dropdown-item-text { color: #1f2937; }

    .dropdown-item-text.bg-light { background-color: #eef2ff !important; }

.list-group-item-action { color: #1f2937; }

    .list-group-item-action:hover,
    .list-group-item-action:focus { background-color: var(--app-surface-muted); color: var(--app-primary-dark); }

.main-content { max-width: 100%; }

.task-column { min-height: 360px; }

.task-item { border-left: 3px solid transparent; background-color: #eef3ff; }

    .task-item[data-has-open-issue="true"] { border-left-color: var(--bs-warning); }

.issue-flag { display: inline-flex; }

.task-item[data-has-open-issue="false"] .issue-flag { display: none; }

.login-shell { background: linear-gradient(180deg, #f8fafc 0%, var(--app-surface-muted) 100%); }

#mobileProfilePanel .offcanvas-header { background-color: var(--app-surface); border-bottom: 1px solid var(--app-border); }

#mobileProfilePanel .offcanvas-title { font-weight: 600; color: #0f172a; }

#mobileProfilePanel .list-group { border-radius: 0.75rem; overflow: hidden; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08); border: 1px solid var(--app-border); }

#mobileProfilePanel .list-group-item { border: 0; padding: 0.9rem 1rem; font-weight: 500; }

    #mobileProfilePanel .list-group-item + .list-group-item { border-top: 1px solid var(--app-border); }

#mobileProfilePanel .list-group-item-action:hover,
#mobileProfilePanel .list-group-item-action:focus { background-color: var(--app-surface-muted); color: var(--app-primary-dark); }

#mobileProfilePanel .list-group-item-action:active { background-color: #e0e7ff; }

.profile-dropdown { width: 280px; padding: 0.75rem; border-radius: 1rem; border: 1px solid var(--app-border); box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18); }

.profile-summary { background-color: #eef3ff; border-radius: 0.85rem; padding: 0.9rem; margin-bottom: 0.75rem; }

.profile-avatar { width: 44px; height: 44px; border-radius: 50%; background-color: #ffffff; border: 2px solid #2563eb; color: #2563eb; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }

.profile-name { font-size: 1.05rem; }

.profile-logout { border-radius: 0.6rem; border-color: #c7d2fe; color: #1e3a8a; background-color: #eef2ff; }

    .profile-logout:hover,
    .profile-logout:focus { background-color: #dbe4ff; border-color: #c7d2fe; color: #1e3a8a; }

.profile-dropdown .dropdown-item { padding: 0.65rem 0.75rem; font-size: 1.02rem; }

.profile-dropdown .dropdown-divider { margin: 0.4rem 0.75rem; }

#mobileSidebar .offcanvas-header { background-color: var(--app-sidebar-surface); color: var(--app-sidebar-text); border-bottom: 1px solid rgba(226, 232, 240, 0.15); }

#mobileSidebar .offcanvas-title { color: var(--app-sidebar-text); font-weight: 600; }

#mobileSidebar .btn-close { filter: invert(1); }

#mobileSidebar .offcanvas-body { background-color: var(--app-sidebar-bg); }

#mobileSidebar .nav-link { color: var(--app-sidebar-text); border-radius: 0.5rem; padding: 0.5rem 0.75rem; transition: background-color 0.2s ease, color 0.2s ease; }

    #mobileSidebar .nav-link:hover,
    #mobileSidebar .nav-link:focus { background-color: var(--app-sidebar-hover); color: #ffffff; }

#mobileSidebar .nav > .nav-item > .nav-link { font-weight: 600; }

#mobileSidebar .list-unstyled .nav-link { font-size: 0.9rem; color: var(--app-sidebar-muted); padding-left: 0.75rem; }

    #mobileSidebar .list-unstyled .nav-link:hover,
    #mobileSidebar .list-unstyled .nav-link:focus { color: #ffffff; background-color: transparent; }

#mobileSidebar .text-uppercase,
#mobileSidebar .text-body-secondary { color: var(--app-sidebar-muted) !important; letter-spacing: 0.08em; }

#mobileSidebar .nav-item.px-3.small { color: var(--app-sidebar-muted) !important; }

.offcanvas-body { background-color: #eef3ff; }

.task-item .task-check:not(:checked) { border: 2px solid var(--app-primary); box-shadow: 0 0 0 2px rgba(27, 77, 137, 0.15); }

@media (min-width: 992px) {
    .app-shell { display: flex; }
}

.text-bg-purple { color: #FFFFFF !important; background-color: #563d7c !important; }