:root {
    --color-primary: #1e2745;
    --color-primary-hover: #171f38;
    --color-text-dark: #333;
    --color-text-medium: #666;
    --color-text-light: #f7f7f7;
    --color-bg-light: #f7f7f7;
    --color-bg-white: #fff;
    --color-bg-modal-footer: #f8f8f8;
    --color-border-light: #e0e0e0;
    --color-border-medium: #d0d0d0;
    --color-separator: #eee;
    --shadow-light: rgba(0,0,0,0.05);
    --shadow-medium: rgba(0,0,0,0.08);
    --shadow-card: rgba(0,0,0,0.04);
    --shadow-modal: rgba(0,0,0,0.15);

    --status-not-bg: #f0f0f0;
    --status-not-text: #777;
    --status-not-border: #e0e0e0;
    --status-progress-bg: #fff8e1;
    --status-progress-text: #a07a00;
    --status-progress-border: #ffebbc;
    --status-done-bg: #e6ffe6;
    --status-done-text: #28a745;
    --status-done-border: #c9e9c9;
    --priority-high: #dc3545;
    --priority-medium: #fd7e14;
    --priority-low: #28a745;

    --xs: 6px;
    --sm: 8px;
    --md: 10px;
    --lg: 12px;
    --xl: 15px;
    --xxl: 20px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 8px;
    --f-xs: 11px;
    --f-sm: 12px;
    --f-md: 13px;
    --f-lg: 14px;
    --f-xl: 16px;
    --f-xxl: 17px;
    --ease: all 0.2s ease-in-out;
}

body {
    background: var(--color-bg-light);
    font: 400 var(--f-lg)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: var(--color-text-dark);
    -webkit-font-smoothing: antialiased;
}

/* Header */
.ns-header {
    background: rgba(255,255,255,0.9);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: var(--lg) var(--xxl);
    box-shadow: 0 1px 3px var(--shadow-light);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 1000;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Buttons - consistent across all modals */
.btn {
    border-radius: var(--r-md);
    font-weight: 500;
    font-size: var(--f-md);
    padding: var(--sm) var(--lg);
    transition: var(--ease);
    display: inline-flex;
    align-items: center;
    gap: var(--xs);
    -webkit-appearance: none;
    appearance: none;
}
.btn-ns-primary {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-bg-white);
}
.btn-ns-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-bg-white);
    box-shadow: 0 2px 8px rgba(0,122,255,0.2);
    transform: translateY(-1px);
}
.btn-ns-secondary {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border-light);
    color: var(--color-text-dark);
}
.btn-ns-secondary:hover {
    background: var(--color-border-light);
    border-color: var(--color-border-medium);
    color: var(--color-text-dark);
    box-shadow: 0 1px 3px var(--shadow-medium);
}

/* Modals - unified look, buttons stay consistent */
.modal-content {
    border-radius: var(--r-lg);
    box-shadow: 0 8px 20px var(--shadow-modal);
    border: none;
    background: var(--color-bg-white);
    overflow: hidden;
}
.modal-header {
    background: var(--color-primary);
    border-bottom: 1px solid var(--color-separator);
    padding: var(--xl) var(--xxl);
    border-radius: 0;
}
.modal-title {
    color: var(--color-text-light);
    font-weight: 600;
    font-size: var(--f-xl);
}
.modal-header .btn-close {
    --bs-btn-close-color: var(--color-text-light);
    filter: brightness(0) invert(1);
}
.modal-body {
    padding: var(--xxl);
    background: var(--color-bg-white);
}
.modal-footer {
    background: var(--color-bg-modal-footer);
    border-top: 1px solid var(--color-separator);
    padding: var(--xl) var(--xxl);
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-footer .btn-outline-danger {
    color: var(--priority-high);
    border: 1px solid var(--priority-high);
    background: transparent;
}
.modal-footer .btn-outline-danger:hover {
    background: var(--priority-high);
    color: var(--color-bg-white);
}
.modal-footer .btn {
    border-radius: var(--r-md);
}

/* Card */
.ns-grid-card {
    border: 1px solid var(--color-border-light);
    border-radius: var(--r-lg);
    background: var(--color-bg-white);
    box-shadow: 0 4px 10px var(--shadow-card);
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: -webkit-radial-gradient(white, black);
}

/* Tabs - Floating UI Configuration with Horizontal Base Rule */
.nav-tabs {
    z-index: 10;
    margin-bottom: 0px;
    display: flex;
    width: 100%;
    overflow: hidden;
    touch-action: none;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

.nav-tabs::-webkit-scrollbar {
    display: none !important;
}

.nav-link.ns-tab-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-medium);
    font-weight: 500;
    padding: var(--md) var(--xxl);
    font-size: var(--f-md);
    border-radius: var(--r-md) var(--r-md) 0 0;
    white-space: nowrap;
    transition: var(--ease);
    margin-bottom: -1px; /* Keeps the bottom border interaction matching bootstrap layout */
}
.nav-link.ns-tab-btn:hover {
    background: rgba(0,0,0,0.03);
    color: var(--color-text-dark);
}
.nav-link.ns-tab-btn.active {
    background: var(--color-bg-white);
    color: var(--color-primary);
    border: 1px solid var(--color-border-light);
    border-bottom-color: var(--color-bg-white); /* Masks baseline segment directly under active tab */
    font-weight: 600;
    z-index: 11;
    box-shadow: none;
}

/* Tables */
.table-ns {
    margin-bottom: 0;
    border-collapse: collapse;
}
.table-ns th {
    background: var(--color-bg-light);
    color: var(--color-text-medium);
    font-weight: 600;
    border-bottom: 1px solid var(--color-separator);
    padding: var(--lg) var(--xl);
    font-size: var(--f-sm);
    text-transform: capitalize;
}
.table-ns td {
    padding: var(--lg) var(--xl);
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    color: var(--color-text-dark);
}
.table-ns tbody tr { transition: var(--ease); }
.table-ns tbody tr:hover { background: #f5fafd; }

th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th.sortable i {
    font-size: 0.8em;
    transition: transform 0.2s ease-in-out;
    color: var(--color-text-light);
}
th.sortable:hover i { color: var(--color-text-medium); }
th.sortable .bi-caret-up-fill { transform: translateY(-2px); }
th.sortable .bi-caret-down-fill { transform: translateY(2px); }

/* Status & Priority */
.status-badge {
    font-size: var(--f-xs);
    font-weight: 600;
    padding: 5px var(--md);
    border-radius: var(--r-sm);
    text-transform: capitalize;
    display: inline-block;
    min-width: 90px;
    text-align: center;
    border: 1px solid transparent;
}
.status-not-started { background: var(--status-not-bg); color: var(--status-not-text); border-color: var(--status-not-border); }
.status-in-progress { background: var(--status-progress-bg); color: var(--status-progress-text); border-color: var(--status-progress-border); }
.status-completed { background: var(--status-done-bg); color: var(--status-done-text); border-color: var(--status-done-border); }
.priority-high, .priority-medium, .priority-low { font-weight: 600; }
.priority-high { color: var(--priority-high); }
.priority-medium { color: var(--priority-medium); }
.priority-low { color: var(--priority-low); }

/* Forms */
.form-label {
    font-weight: 500;
    color: var(--color-text-medium);
    font-size: var(--f-md);
    margin-bottom: var(--xs);
}
.form-control, .form-select {
    border-radius: var(--r-sm);
    border: 1px solid var(--color-border-medium);
    padding: var(--sm) var(--lg);
    font-size: var(--f-md);
    transition: var(--ease);
    -webkit-appearance: none;
    appearance: none;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0,122,255,0.2);
}

/* Print */
.print-header-info { border-bottom: 1px solid var(--color-border-medium); }
.print-header-info h4, .print-table th, .print-table td, .print-footer { color: #000; }
.print-table th { background: #efefef; font-weight: 600; }
.date-range-badge { background: var(--color-bg-light); color: var(--color-text-medium); border: 1px solid var(--color-border-medium); }

/* Mobile Responsive */
@media (max-width: 575px) {
    /* Table - Task and Notes columns don't squish */
    #trackerTable th:nth-child(2),
    #trackerTable td:nth-child(2),
    #trackerTable th:nth-child(8),
    #trackerTable td:nth-child(8) {
        min-width: 100px;
        word-break: break-word;
        white-space: normal;
    }

    /* Keep compact columns from wrapping */
    #trackerTable th:nth-child(4),
    #trackerTable td:nth-child(4),
    #trackerTable th:nth-child(7),
    #trackerTable td:nth-child(7) {
        white-space: nowrap;
    }

    /* Department column - allow truncation */
    #trackerTable th:nth-child(1),
    #trackerTable td:nth-child(1) {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Smaller table cells on mobile */
    .table-ns th,
    .table-ns td {
        padding: 6px 8px;
        font-size: var(--f-sm);
    }
}