/* ============================================================
   CSS Custom Properties (Brand Design Tokens)
   ============================================================ */
:root {
    --color-primary:        hsl(214, 60%, 10%);   /* #0a1628 deep navy */
    --color-navy-deep:      hsl(212, 62%, 16%);   /* #0f2440 header */
    --color-navy-mid:       hsl(212, 55%, 19%);   /* #162a42 */
    --color-orange:         hsl(210, 55%, 62%);   /* #6a9ecf pale steel blue */
    --color-orange-hover:   hsl(210, 50%, 54%);   /* #5a8dbf */
    --color-bg:             hsl(36, 20%, 96%);    /* #f7f4f0 warm page bg */
    --color-text:           hsl(0, 0%, 17%);      /* #2b2b2b foreground text */
    --color-cream:          hsl(48, 23%, 97%);    /* #f9f7f3 card surface */
    --color-warm-grey:      hsl(43, 18%, 93%);    /* #efece6 */
    --color-border:         hsl(36, 14%, 86%);    /* #dedad3 */
    --color-gold:           hsl(43, 52%, 54%);    /* #c9a84c */
    --color-text-muted:     hsl(0, 0%, 42%);      /* #6b6b6b */
    --color-text-lighter:   hsl(0, 0%, 60%);      /* #999999 */

    /* Navigation section colours */
    --color-nav-root:       hsl(212, 55%, 19%);   /* #162a42 navy-mid */
    --color-nav-directory:  hsl(210, 55%, 62%);   /* #6a9ecf pale steel blue */
    --color-nav-clients:    hsl(148, 32%, 64%);   /* #7db891 soft sage green */
    --color-nav-invoices:   hsl(0, 0%, 60%);      /* #999999 neutral grey */

    --radius-sm:            4px;
    --radius-md:            8px;
    --shadow-card:          0 2px 6px rgba(10, 22, 40, 0.10), 0 0 1px rgba(10, 22, 40, 0.06);
    --shadow-card-hover:    0 4px 14px rgba(10, 22, 40, 0.14), 0 0 1px rgba(10, 22, 40, 0.08);
    --transition-fast:      0.15s ease;
}

/* ============================================================
   Global Resets / Base
   ============================================================ */
* {
    box-sizing: border-box;
    margin: 0;
}

:root {
    /* …existing tokens… */
    --z-content: 1;
    --z-dropdown: 100;
    --z-bug-report: 1000;
    --z-modal: 2000;
    --z-modal-overlay: 1999;
    --z-tooltip: 3000;
}

html, body {
    height: 100vh;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Calibri, sans-serif;
    font-size: 13px;
    color: var(--color-text);
    background-color: var(--color-bg);
    background-size: cover;
    margin: 0;
    padding: 0;
}

.ui-widget {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Calibri, sans-serif !important;
}

p {
    margin: 0;
}

/* ============================================================
   Header
   ============================================================ */          
header {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    background-color: var(--color-navy-deep);
    flex-wrap: wrap;
    height: 2vh;
    border-bottom: 2px solid var(--color-orange);
}

/* ============================================================
   Navigation Links
   ============================================================ */
nav a:visited,
nav a:link {
    color: #fff;
    text-decoration: none;
}

nav > ul {
    display: inline;
    padding: 0;
}

nav > ul > li {
    display: inline-block;
    list-style: none;
    margin: 0 5px 0 5px;
}

/* ============================================================
   Navigation List (tab bar) — flat, underline-style like reference
   ============================================================ */
.navigationList {
    list-style: none;
    text-align: center;
    font-size: 1.5vh;
    display: grid;
    height: 3.5vh;
    grid-template-columns: repeat(7, 1fr);
    background-color: var(--color-navy-deep);
    border-bottom: 1px solid hsl(212, 40%, 26%);
}

.navigationList li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-bottom: 3px solid transparent;
    height: 100%;
    width: 10.5vw;
    margin-right: 3.66vw;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

    .navigationList li:hover {
        border-bottom-color: var(--color-orange);
        background-color: hsl(212, 50%, 22%);
    }

.navListText {
    text-decoration: none;
    color: #fff;
    margin-top: 0;
}

.navListLink {
    text-decoration: none;
}

.navListLink:visited {
    color: #fff;
}

/* Section colours */
.nLRootLink {
    background-color: transparent;
    color: #fff;
}

    .nLRootLink .navListText,
    .nLRootLink .navListLink,
    .nLRootLink .navListLink:visited {
        color: #fff;
    }

.nLDirectoryLink {
    background-color: transparent;
}

    .nLDirectoryLink .navListText,
    .nLDirectoryLink .navListLink,
    .nLDirectoryLink .navListLink:visited {
        color: #fff;
    }

.nLClientsLink {
    background-color: transparent;
}

    .nLClientsLink .navListText,
    .nLClientsLink .navListLink,
    .nLClientsLink .navListLink:visited {
        color: #fff;
    }

.navigationList .currentPage {
    border-bottom-color: var(--color-orange) !important;
    background-color: hsl(212, 50%, 22%);
}

    .navigationList .currentPage .navListText {
        color: #fff;
    }

.navigationList .underConstruction {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ============================================================
   Navigation Section Boxes (sidebar panels)
   ============================================================ */
.navigationListRootBox {
    height: 96.4vh;
    background-color: var(--color-bg);
    border-top: 0.1vh solid hsl(212, 40%, 26%);
}

.navigationListDirectoryBox {
    height: 92.8vh;
    background-color: var(--color-bg);
    border-top: 0.1vh solid hsl(212, 40%, 26%);
}

.navigationListClientsBox {
    height: 92.8vh;
    background-color: var(--color-nav-clients);
    border-top: 0.1vh solid var(--color-border);
}

.navigationListInvoicesBox {
    height: 89.2vh;
    background-color: var(--color-nav-invoices);
    border-top: 0.1vh solid var(--color-border);
}

/* ============================================================
   Sidebar Nav Links (navbar-nav inside section boxes)
   ============================================================ */
.navigationListRootBox .navbar-nav a:link,
.navigationListRootBox .navbar-nav a:visited {
    color: var(--color-text);
}

    .navigationListRootBox .navbar-nav a:hover {
        color: var(--color-orange);
    }

/* ============================================================
   Dropdown Checklist
   ============================================================ */
.dropdown-check-list {
    display: inline-block;
}

.dropdown-check-list .anchor {
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 5px 50px 5px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-cream);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .dropdown-check-list .anchor:hover {
        border-color: var(--color-orange);
        box-shadow: 0 0 0 2px hsla(210, 55%, 62%, 0.20);
    }

.dropdown-check-list .anchor:after {
    position: absolute;
    content: "";
    border-left: 2px solid var(--color-text-muted);
    border-top: 2px solid var(--color-text-muted);
    padding: 5px;
    right: 10px;
    top: 20%;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
    right: 8px;
    top: 21%;
}

.dropdown-check-list ul.items {
    padding: 2px;
    display: none;
    margin: 0;
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background-color: var(--color-cream);
    box-shadow: var(--shadow-card);
}

.dropdown-check-list ul.items li {
    list-style: none;
}

.dropdown-check-list.visible .anchor {
    color: var(--color-orange);
    border-color: var(--color-orange);
}

.dropdown-check-list.visible .items {
    display: block;
}

.dropdownUl {
    overflow-y: scroll;
}

/* ============================================================
   White Box Card
   ============================================================ */
.whiteBox {
    background-color: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow-y: auto;
    transition: box-shadow var(--transition-fast);
}

    .whiteBox:hover {
        box-shadow: var(--shadow-card-hover);
    }

/* ============================================================
   Disabled / No Access Rows
   ============================================================ */
.noAccess > td {
    color: var(--color-text-lighter);
}

/* ============================================================
   Link Text Utility
   ============================================================ */
.linkText {
    color: var(--color-navy-deep);
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--transition-fast);
}

    .linkText:hover {
        color: var(--color-orange);
    }

/* ============================================================
   Visibility Utilities
   ============================================================ */
.showcss {
    display: block;
}

.hidecss {
    display: none !important;
}