:root {
    --nhh-orange: #e98b3b;
    --nhh-orange-d: #d97706;
}

/* Target DataTables pagination buttons */
#complaintsTable_paginate .paginate_button {
    font-weight: bold; /* make text bold */
    color: blue !important; /* make text blue */
}

    /* Optional: change color on hover */
    #complaintsTable_paginate .paginate_button:hover {
        color: darkblue !important;
        cursor: pointer;
    }

x
*, ::after, ::before {
    box-sizing: border-box;
}

.header-search {
    background-color: #f5f5f5;
    padding: 10px 0;
}

.breadcrumb {
    margin-bottom: 0;
}

.breadcrumb-item a {
    color: #e67309 !important;
    text-decoration: none;
}

.breadcrumb-item.active {
    color: #6c757d;
}

.btn-warning {
    background-color: #e67309 !important;
    border: none;
    font-weight: 600;
}

    .btn-warning:hover {
        background-color: #d97e1f !important;
    }

.form-control {
    font-size: 14px;
}

.dashboard-btn {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 11px;
    left: 15px;
    max-height: 16px;
    max-width: 20px;
}

.vpipe {
    display: inline-block;
    width: 1px;
    height: 26px;
    background: #e1e1e1; /* light grey */
    border-radius: .5px;
}
/* Pill search container owns the border/radius */
.pill-search {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 42px 0 16px;
    background: #fff;
    border: 1px solid #D0D5DD;
    border-radius: 999px;
    min-width: 420px;
}

/* Borderless input inside the pill */
.pill-input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    line-height: 1.2;
    box-shadow: none !important; /* defeat Bootstrap focus shadow */
}

/* Orange magnifier on the right */
.pill-icon {
    position: absolute;
    right: 14px;
    font-size: 18px;
    color: #D7722F; /* matches your SEARCH button */
    pointer-events: none;
}

/* View / Priority pills */
.btn-view, .btn-priority {
    background: #f5f6f7;
    border: 1px solid #e3e5e8;
    border-radius: 999px;
    font-weight: 500;
}

    .btn-view:hover, .btn-priority:hover {
        background: #f0f2f4;
    }

.dropdown-item.active {
    background-color: #ffcc00 !important;
    font-weight: 600;
}
/* Orange SEARCH */
.btn-nhh {
    background: var(--nhh-orange);
    color: #fff;
    border-color: var(--nhh-orange);
    font-weight: 700;
}

    .btn-nhh:hover {
        background: var(--nhh-orange-d);
        border-color: var(--nhh-orange-d);
        color: #fff;
    }

/* Switch labels */
.switch-label {
    font-weight: 600;
    color: #2f2f2f;
}

.lbl-task.text-muted {
    color: #8a8f98 !important;
}

/* Switch icon “cards” */
.switch-btn {
    width: 42px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e9ecef;
    color: #9aa0a6;
    border: 1px solid #d9dce1;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.04);
    padding: 0;
    margin: 0 2px;
    transition: all .15s ease-in-out;
}

    .switch-btn i {
        font-size: 1.05rem;
        line-height: 1;
    }

    .switch-btn.switch-active {
        background: var(--nhh-orange);
        border-color: var(--nhh-orange);
        color: #fff;
        box-shadow: 0 2px 0 rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.12);
    }

/* Help the grid take full line width under the same container */
#gridHost, .toolbar {
    width: 100%;
}

/* Table niceties */
.urgent-bar {
    border-left: 8px solid #d32f2f !important;
}

.normal-bar {
    border-left: 8px solid #388e3c !important;
}

.border-start {
    padding-left: 10px !important;
    min-height: 55px;
    display: flex;
    align-items: center;
}

table.dataTable tbody td {
    vertical-align: middle;
}
/*  Dashboard Table Header Alignment Fix */
#complaintsTable thead th,
#tasksTable thead th,
.table thead th {
    text-align: center !important;
    vertical-align: middle !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-weight: 600 !important;
}

/*  Optional: align body cells neatly for consistency */
#complaintsTable tbody td,
#tasksTable tbody td {
    vertical-align: middle !important;
    text-align: center !important;
}

#notesModal .modal-dialog {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    margin: 1.5rem auto;
    width: 90%;
    max-width: 800px;
}

#notesModal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
}

#notesModal .modal-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
}

#notesModal .modal-body {
    overflow-y: auto;
    padding: 1rem 1.25rem;
    flex-grow: 1;
    background-color: #fff;
}

#notesModal .modal-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background-color: #fff;
    border-top: 1px solid #dee2e6;
}

/* Make sure the X close button is visible and accessible */
#notesModal .btn-close {
    z-index: 20;
    position: relative;
    opacity: 1 !important;
    filter: none !important;
}

/* Orange Close button */
#notesModal .btn.btn-secondary {
    background-color: rgb(230, 115, 9) !important;
    border-color: rgb(230, 115, 9) !important;
    color: #fff !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

    #notesModal .btn.btn-secondary:hover {
        background-color: rgb(210, 105, 0) !important;
        border-color: rgb(210, 105, 0) !important;
    }


/* Focus ring + color */
.pill-search:focus-within {
    border-color: #D7722F;
    box-shadow: 0 0 0 2px rgba(215,114,47,.18);
}

#searchBtn {
    margin-bottom: 12px !important;
    margin-left: 10px !important;
}

.bi {
    margin-right: 5px !important;
}

.bi-exclamation-square, .bi-clipboard2 {
    margin-right: 0px !important;
}
/*
   Header & Navigation */
header {
    border-bottom: 1px solid #eee;
}

.breadcrumb-item a {
    color: #e67309 !important; /* orange link for Dashboard */
}

/*Buttons */
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button, input {
    overflow: visible;
}

button, select {
    text-transform: none;
}

button {
    -webkit-appearance: button;
    border-radius: 0;
    cursor: pointer;
}

/* Primary Orange Button */
.btn-orange {
    background-color: rgb(230, 115, 9);
    font-size: 14px;
    font-weight: 700;
    display: block;
    position: relative;
    width: 186px;
    border-radius: 5px;
    border: 1px solid rgb(230, 115, 9);
    color: rgb(255, 255, 255);
    box-shadow: none;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    padding: 8px;
    cursor: pointer;
}

    .btn-orange:hover {
        background: #d87f1c;
    }

/* Secondary Dashboard Button */
.btn-dashboard {
    background: #444;
    color: #fff;
    border: none;
    padding: 6px 15px;
    border-radius: 3px;
}

.nhh-header {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nhh-logo {
    height: 95px;
}

.nhh-search {
    display: flex;
    align-items: center;
    border-left: 1px solid #ccc;
    padding-left: 10px;
}

    .nhh-search input {
        border: none;
        outline: none;
        margin-left: 5px;
        font-size: 14px;
        color: #666;
    }

        .nhh-search input::placeholder {
            color: #999;
        }

    .nhh-search i {
        color: green;
        font-size: 16px;
    }

/* Navbar */
.nhh-navbar {
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

    .nhh-navbar .nav-link {
        color: #333 !important;
        font-weight: 500;
    }

        .nhh-navbar .nav-link:hover {
            color: #006400 !important; /* Dark green hover */
        }

/* Button Focus Styles */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/*  Layout & Components */
.container .nhg-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.nhg-container {
    margin-top: 20px;
}

.page-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
}

.actions-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    gap: 10px;
}

.nhg-card {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.search-bar {
    display: flex;
    gap: 10px;
    margin: 20px 0;
}

.search-input {
    flex: 1;
}

.table-wrapper {
    background: #fff;
    border-radius: 6px;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    width: 100%;
}

.complaints-table {
    margin: 0;
    font-size: 14px;
    width: 100%;
    border-collapse: collapse;
}

    .complaints-table th {
        background: #f4f4f4;
        font-weight: 600;
    }

    .complaints-table td,
    .complaints-table th {
        padding: 12px;
        vertical-align: middle;
        white-space: nowrap;
    }

/* 
   Priority Labels
 */
.priority-urgent {
    border-left: 6px solid #d32f2f;
}

.priority-normal {
    border-left: 6px solid #388e3c;
}

/* 
   Form Controls
 */
.form-select-sm {
    font-size: 13px;
    padding: 3px 6px;
}

/* 
   Responsive Adjustments
 */
@media (max-width: 992px) {
    .actions-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-orange {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .page-title {
        font-size: 18px;
        text-align: center;
    }

    .actions-bar {
        flex-direction: column;
        gap: 5px;
    }

    .search-bar {
        flex-direction: column;
    }

    .search-input {
        width: 100%;
    }

    .complaints-table th,
    .complaints-table td {
        padding: 8px;
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .page-title {
        font-size: 16px;
    }

    .btn-dashboard {
        width: 100%;
        text-align: center;
    }

    .complaints-table th,
    .complaints-table td {
        font-size: 12px;
    }
}

#dueDateModal #applyDateFilter {
    color: #fff !important;
    background-color: #e98b3b !important;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease;
}

    #dueDateModal #applyDateFilter:hover,
    #dueDateModal #applyDateFilter:focus {
        background-color: #d97706 !important;
        color: #fff !important;
        text-decoration: none;
    }
/* Container alignment */
.button-wrapper {
    text-align: right;
    margin-top: 1rem;
}

/* Keep forms side by side */
#saveDraft,
#generateForm {
    display: inline-block;
    margin-left: 8px;
}

    /* Button color */
    #saveDraft .btn,
    #generateForm .btn {
        background-color: #E67309;
        border-color: #E67309;
        color: #fff;
    }

        /* Hover effect */
        #saveDraft .btn:hover,
        #generateForm .btn:hover {
            background-color: #cf6508;
            border-color: #cf6508;
            color: #fff;
        }