/* CMC visual reskin (trial on ui.installed-right).
   Loaded after modern.css / blue.css / custom.css and only overrides their
   look - no layout mechanics (sidebar width, collapse, fixed header) change,
   so modern.js and the collapsed/touch flyout logic keep working as-is.
   Remove the <link> in header.inc/header2.inc to fall back to the old theme. */

:root {
    --ir-accent: #2F5BD3;
    --ir-accent-dark: #2449AE;
    --ir-accent-soft: #EEF2FF;
    --ir-ink: #101828;
    --ir-text: #344054;
    --ir-muted: #5D6B82;
    --ir-border: #E4E7EC;
    --ir-border-strong: #D0D5DD;
    --ir-bg: #F5F6F8;
    --ir-surface: #FFFFFF;
    /* page background behind the panels = Installed Right logo navy; --ir-bg
       stays the light hover/tint grey used inside white surfaces */
    --ir-page: #14284B;
    --ir-on-page: #FFFFFF;
    --ir-on-page-muted: rgba(255, 255, 255, 0.72);
    --ir-on-page-line: rgba(255, 255, 255, 0.16);
    --ir-amber-bg: #FEF0C7;
    --ir-amber-text: #7A4A00;
    --ir-amber-dot: #DC8A0E;
    --ir-red-bg: #FDE4E1;
    --ir-red-text: #A3241A;
    --ir-red-dot: #D92D20;
    --ir-radius: 12px;
}

/* Base ------------------------------------------------------------------ */

body {
    font-family: 'IBM Plex Sans', 'Open Sans', system-ui, sans-serif;
    font-size: 14px;
    color: var(--ir-text);
    background: var(--ir-page);
}

h1, h2, h3, h4, h5, h6,
.panel-title,
.top-menu .navbar-nav > li > a > .badge {
    font-family: 'IBM Plex Sans', 'Open Sans', system-ui, sans-serif;
}

a { color: var(--ir-accent); }
a:hover, a:focus { color: var(--ir-accent-dark); }

.page-content {
    background: var(--ir-page);
    box-shadow: none;
}

.page-inner {
    background: var(--ir-page);
}

/* Top bar --------------------------------------------------------------- */

.navbar {
    background: var(--ir-surface);
    border-bottom: 1px solid var(--ir-border) !important;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.navbar .logo-box,
.topmenu-outer {
    background: var(--ir-surface);
}

.navbar .logo-box {
    border-right: 1px solid var(--ir-border);
    box-sizing: border-box;
}

.top-menu .navbar-nav > li > a {
    color: var(--ir-text);
}

.top-menu .nav > li > a:hover,
.top-menu .nav > li > a:focus,
.top-menu .nav .open > a {
    background: var(--ir-bg) !important;
    color: var(--ir-ink) !important;
}

.top-menu .navbar-nav > li > a > .user-name {
    font-weight: 500;
    color: var(--ir-ink);
}

.top-menu .navbar-nav > li > a > .badge {
    background: var(--ir-red-dot);
    text-shadow: none;
    border-radius: 999px;
}

.navbar .dropdown-menu {
    border: 1px solid var(--ir-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    overflow: hidden;
}

/* Search overlay */
.search-form .form-control.search-input {
    font-size: 16px;
}

/* Sidebar --------------------------------------------------------------- */

.sidebar,
.sidebar-header,
.menu,
.page-sidebar {
    background: var(--ir-surface);
}

.page-sidebar {
    box-sizing: border-box;
}

/* The sidebar is only as tall as its menu, so paint the white column (and its
   divider) on the page behind it - the old theme got away with this by making
   .page-content navy. 160px expanded / 65px collapsed, hidden below 768px. */
@media (min-width: 768px) {
    /* body too: an open submenu can push the menu past the bottom of
       .page-content on short pages */
    body.page-header-fixed,
    .page-content {
        background: linear-gradient(to right,
            var(--ir-surface) 0, var(--ir-surface) 159px,
            var(--ir-border) 159px, var(--ir-border) 160px,
            var(--ir-page) 160px);
        background-attachment: fixed;
    }

    body.small-sidebar.page-header-fixed,
    .small-sidebar .page-content {
        background: linear-gradient(to right,
            var(--ir-surface) 0, var(--ir-surface) 64px,
            var(--ir-border) 64px, var(--ir-border) 65px,
            var(--ir-page) 65px);
        background-attachment: fixed;
    }
}

.menu.accordion-menu {
    padding-top: 10px;
}

.menu.accordion-menu a,
.menu.accordion-menu ul li a {
    color: var(--ir-text);
}

.menu.accordion-menu > li > a:hover,
.menu.accordion-menu ul li a:hover {
    background: var(--ir-bg);
    color: var(--ir-ink);
}

.menu.accordion-menu > li.active > a,
.menu.accordion-menu > li.active.open > a,
.menu.accordion-menu ul li.active a {
    background: var(--ir-accent-soft);
    color: var(--ir-accent);
    font-weight: 600;
}

/* open submenu: soft tint instead of the old teal block */
.menu.accordion-menu ul,
.menu.accordion-menu li.open > a {
    background: #F8F9FB;
    color: var(--ir-ink);
}

/* Expanded sidebar: icon + label in one left-aligned row instead of the
   stacked icon-over-label tiles. Collapsed (.small-sidebar) mode untouched. */
body:not(.page-horizontal-bar):not(.small-sidebar) .menu.accordion-menu > li > a {
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    margin: 1px 6px;
    padding: 8px 8px;
    border-radius: 8px;
    min-height: 40px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
}

body:not(.page-horizontal-bar):not(.small-sidebar) .menu.accordion-menu > li > a span.menu-icon {
    font-size: 15px;
    width: 18px;
    flex: none;
    margin: 0;
    text-align: center;
    color: var(--ir-muted);
}

body:not(.page-horizontal-bar):not(.small-sidebar) .menu.accordion-menu > li.active > a span.menu-icon {
    color: var(--ir-accent);
}

body:not(.page-horizontal-bar):not(.small-sidebar) .menu.accordion-menu > li > a > p {
    flex: 1;
    min-width: 0;
    line-height: 1.3 !important;
}

body:not(.page-horizontal-bar):not(.small-sidebar) .menu.accordion-menu > li > a > .arrow {
    margin-left: auto;
}

body:not(.page-horizontal-bar):not(.small-sidebar) .menu.accordion-menu > li > a > .arrow:before {
    margin-top: 0 !important;
    float: none;
    font-size: 14px;
    color: var(--ir-muted);
}

body:not(.page-horizontal-bar):not(.small-sidebar) .menu.accordion-menu ul.sub-menu {
    padding: 4px 8px 6px;
}

body:not(.page-horizontal-bar):not(.small-sidebar) .menu.accordion-menu ul li a {
    text-align: left;
    padding: 7px 10px 7px 38px;
    border-radius: 6px;
    font-size: 13px;
}

body:not(.page-horizontal-bar):not(.small-sidebar) .menu.accordion-menu ul ul li a {
    padding-left: 50px;
}

/* Collapsed flyout header (overrides custom.css navy) */
.small-sidebar:not(.page-sidebar-fixed) .accordion-menu > li.droplink:hover > a,
.small-sidebar:not(.page-sidebar-fixed) .accordion-menu > li.droplink.touch-open > a {
    background: var(--ir-ink) !important;
    color: #fff !important;
}

.small-sidebar .menu.accordion-menu > li > ul {
    border: 1px solid var(--ir-border);
    border-radius: 0 10px 10px 0;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}

/* Page title ------------------------------------------------------------ */

.page-title {
    background: transparent;
    border-bottom: 0;
    padding: 22px 24px 6px;
}

.page-title h3 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ir-on-page);
    margin-bottom: 6px;
}

.page-title .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13px;
}

.page-title .breadcrumb > li,
.page-title .breadcrumb > li > a,
.page-title .breadcrumb > li + li:before {
    color: var(--ir-on-page-muted);
}

.page-title .breadcrumb > li > a:hover {
    color: var(--ir-on-page);
}

.page-title .breadcrumb select {
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--ir-border-strong);
    border-radius: 8px;
    background: var(--ir-surface);
    color: var(--ir-ink);
    font-weight: 500;
}

/* modern.css gives #main-wrapper a 20px margin on top of this padding, which
   left panels 20px further in than the page title - line them up at 24px */
#main-wrapper {
    margin: 0;
    padding: 8px 24px 0;
}

/* Panels / cards -------------------------------------------------------- */

.panel,
.panel-white {
    background: var(--ir-surface);
    border: 1px solid var(--ir-border) !important;
    border-radius: var(--ir-radius);
    box-shadow: none;
    -webkit-box-shadow: none;
    overflow: hidden;
}

.shadow {
    box-shadow: none;
}

.panel-white .panel-heading,
.panel .panel-heading {
    background: transparent;
    border-bottom: 0;
    padding: 14px 16px 4px;
    height: auto;
}

.panel .panel-title,
.panel-white .panel-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ir-text);
    line-height: 1.35;
    white-space: normal;
}

.panel-body {
    padding: 16px;
}

/* Dashboard tiles: equal-height cards in each row, count at the bottom.
   Only rows made purely of cols - pages like wo.asp wrap some cols in a
   <form> and rely on float flow to fill the right column, which flex breaks. */
.page-header-fixed #main-wrapper > .row:has(> [class*="col-"] > .panel):not(:has(> form .panel)) {
    display: flex;
    flex-wrap: wrap;
}

.page-header-fixed #main-wrapper > .row:has(> [class*="col-"] > .panel):not(:has(> form .panel)):before,
.page-header-fixed #main-wrapper > .row:has(> [class*="col-"] > .panel):not(:has(> form .panel)):after {
    display: none;
}

.page-header-fixed #main-wrapper > .row:not(:has(> form .panel)) > [class*="col-"]:has(> .panel) {
    display: flex;
    flex-direction: column;
}

.page-header-fixed #main-wrapper > .row:not(:has(> form .panel)) > [class*="col-"] > .panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.page-header-fixed #main-wrapper > .row > [class*="col-"] > .panel > .panel-counter:not(:has(table)),
.page-header-fixed #main-wrapper > .row > [class*="col-"] > .panel > .panel-caution,
.page-header-fixed #main-wrapper > .row > [class*="col-"] > .panel > .panel-warning {
    margin-top: auto;
}

/* Rows of table panels (Work Orders Summary, Assigned to Me, SFV
   scoreboards) differ wildly in length - don't stretch them to the
   tallest one, let each be its own height. */
.page-header-fixed #main-wrapper > .row:has(.panel-counter table) {
    align-items: flex-start;
}

.page-header-fixed #main-wrapper > .row:has(.panel-counter table) > [class*="col-"] > .panel {
    flex: none;
}

/* Work order (wo.asp): the Actions panel sits alone in a half-width col,
   leaving dead space beside it - run it full width as an action bar. */
@media (min-width: 992px) {
    body:has(#woEditForm) #main-wrapper > .row > .col-md-6:only-child:has(> .panel) {
        width: 100%;
    }
}

/* Below md the bootstrap cols go full width; keep dashboard tiles two-up
   on tablets / phones instead of one giant tile per row. */
@media (max-width: 991px) {
    .page-header-fixed #main-wrapper > .row > .col-md-2:has(> .panel > .panel-heading + div[onclick]) {
        width: 50%;
    }
}

/* The three dashClass looks (panel-counter / panel-caution / panel-warning)
   map to neutral / amber / red. */
.panel .panel-counter,
.panel .panel-caution,
.panel .panel-warning {
    background: transparent;
    color: var(--ir-ink);
    text-align: left;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    padding: 6px 16px 16px;
    transition: background-color 120ms ease;
}

.panel .panel-counter:hover,
.panel .panel-caution:hover,
.panel .panel-warning:hover {
    background: #F8F9FB;
}

.panel .panel-caution {
    color: var(--ir-amber-text);
}

.panel .panel-warning {
    color: var(--ir-red-text);
}

/* coloured edge marker on the card + tinted count, like the mock-up */
.panel:has(> .panel-caution) {
    border-color: #F5D58A !important;
}

.panel:has(> .panel-caution) .panel-heading,
.panel:has(> .panel-warning) .panel-heading {
    padding-left: 30px;
    position: relative;
}

.panel:has(> .panel-caution) .panel-heading:before,
.panel:has(> .panel-warning) .panel-heading:before {
    content: "";
    position: absolute;
    left: 16px;
    top: 19px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ir-amber-dot);
}

.panel:has(> .panel-warning) {
    border-color: #F4B4AC !important;
}

.panel:has(> .panel-warning) .panel-heading:before {
    background: var(--ir-red-dot);
}

.panel:has(> .panel-caution) > .panel-caution {
    background: var(--ir-amber-bg);
    margin: 4px 12px 12px;
    padding: 8px 12px;
    border-radius: 8px;
}

.panel:has(> .panel-warning) > .panel-warning {
    background: var(--ir-red-bg);
    margin: 4px 12px 12px;
    padding: 8px 12px;
    border-radius: 8px;
}

/* info icon on tiles - keep long titles clear of it */
.panel-heading:has(> .glyphicon-info-sign) {
    padding-right: 36px;
}

.panel-heading .glyphicon-info-sign {
    color: var(--ir-muted);
    top: 14px !important;
    right: 14px !important;
}

/* Summary tables inside counter panels (Work Orders Summary, Assigned to Me,
   scoreboards) - these reuse .panel-counter, so reset the big-number look. */
.panel .panel-counter table {
    font-size: 13px !important;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ir-text);
}

.panel .panel-counter:has(table) {
    padding: 4px 8px 12px;
    cursor: default;
}

.panel .panel-counter:has(table):hover {
    background: transparent;
}

.panel .panel-counter table th {
    font-size: 12px;
    font-weight: 600;
    color: var(--ir-muted);
    padding: 8px 8px 6px;
}

.panel .panel-counter table td {
    padding: 7px 8px;
    border-top: 1px solid #F2F4F7;
}

.panel .panel-counter table td:last-child {
    font-weight: 600;
    color: var(--ir-ink);
    text-align: right !important;
}

.panel .panel-counter table th:last-child {
    text-align: right;
}

/* main.asp inserts an empty spacer row (<th colspan=2 style="padding-top:15px">&nbsp;)
   on purpose to set the FM jobs apart from the construction groups - draw it
   as a divider instead of a blank gap */
.panel .panel-counter table tr:has(> th[colspan][style*="padding-top:15px"]) > th {
    padding: 12px 0 0 !important;
    font-size: 0;
    line-height: 0;
    border-bottom: 2px solid var(--ir-border-strong);
}

/* source-group headings ("Pre-Construction / Design", "FM - CTG") span both
   columns - read them as left-aligned section labels, not a count header */
.panel .panel-counter table th[colspan] {
    text-align: left;
    padding-top: 14px;
    color: var(--ir-ink);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.panel .panel-counter table tr[onclick] {
    cursor: pointer;
}

.panel .panel-counter table tr[onclick]:hover td {
    background: var(--ir-accent-soft);
}

#main-wrapper tr:nth-child(even) {
    background-color: transparent;
}

/* Buttons --------------------------------------------------------------- */

.btn {
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    padding: 7px 14px;
}

.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-xs { padding: 2px 8px; font-size: 12px; border-radius: 6px; }

.btn-default {
    background: var(--ir-surface);
    border-color: var(--ir-border-strong);
    color: var(--ir-text);
}

.btn-default:hover,
.btn-default:focus {
    background: var(--ir-bg);
    border-color: var(--ir-border-strong);
    color: var(--ir-ink);
}

.btn-primary,
.btn-success,
.btn-info {
    background-color: var(--ir-accent);
    border-color: var(--ir-accent);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus,
.btn-info:hover, .btn-info:focus {
    background-color: var(--ir-accent-dark);
    border-color: var(--ir-accent-dark);
    color: #fff;
}

/* Save Changes (wo.asp #save1/#save2 and same-pattern buttons elsewhere):
   dark so it stands apart from the blue action buttons. When the form is
   dirty wo.asp sets an inline style.background='red' - that still wins
   (inline beats this), and the rule below refines that red. */
.btn#save1, .btn#save2,
.btn[onclick*="save your changes"] {
    background-color: var(--ir-ink);
    border-color: var(--ir-ink);
    color: #fff;
}

.btn#save1:hover, .btn#save2:hover,
.btn[onclick*="save your changes"]:hover {
    background-color: #2B3445;
    border-color: #2B3445;
    color: #fff;
}

.btn#save1[style*="red"], .btn#save2[style*="red"],
.btn[onclick*="save your changes"][style*="red"] {
    background: #D92D20 !important;
    border-color: #D92D20 !important;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.2);
}

.btn-warning {
    background-color: #DC8A0E;
    color: #fff;
}

.btn-danger {
    background-color: #C9372C;
    color: #fff;
}

/* Forms ----------------------------------------------------------------- */

.form-control {
    border: 1px solid var(--ir-border-strong);
    border-radius: 8px;
    box-shadow: none;
    color: var(--ir-ink);
}

.form-control:focus {
    border-color: var(--ir-accent);
    box-shadow: 0 0 0 3px rgba(47, 91, 211, 0.15);
}

/* Tables (data tables, reports) ----------------------------------------- */

.table > thead > tr > th {
    font-size: 12px;
    font-weight: 600;
    color: var(--ir-muted);
    border-bottom: 1px solid var(--ir-border);
}

.table > tbody > tr > td {
    border-top: 1px solid #F2F4F7;
}

/* DataTables (search results modal, openReport3 reports) ---------------- */

table.dataTable thead th,
table.dataTable thead td {
    font-size: 12px;
    font-weight: 600;
    color: var(--ir-muted);
    padding: 10px 24px 10px 12px;
    border-bottom: 1px solid var(--ir-border) !important;
    background-color: var(--ir-surface);
}

table.dataTable tbody td {
    padding: 8px 12px;
    border-top: 1px solid #F2F4F7;
    color: var(--ir-text);
}

/* no striping or sorted-column band - just hairlines */
table.dataTable tbody tr,
table.dataTable.display tbody tr.odd,
table.dataTable.display tbody tr.even,
table.dataTable.stripe tbody tr.odd {
    background-color: var(--ir-surface);
}

table.dataTable tbody tr > .sorting_1,
table.dataTable tbody tr > .sorting_2,
table.dataTable tbody tr > .sorting_3 {
    background-color: transparent !important;
}

table.dataTable tbody tr[onclick] {
    cursor: pointer;
}

table.dataTable tbody tr:hover > td,
table.dataTable tbody tr:hover > .sorting_1 {
    background-color: var(--ir-accent-soft) !important;
}

table.dataTable.no-footer {
    border-bottom: 1px solid var(--ir-border);
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info {
    font-size: 13px;
    color: var(--ir-muted);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--ir-border-strong);
    border-radius: 8px;
    background: var(--ir-surface);
    color: var(--ir-ink);
    font-size: 14px;
    outline: none;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ir-accent);
    box-shadow: 0 0 0 3px rgba(47, 91, 211, 0.15);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid transparent !important;
    border-radius: 6px;
    padding: 4px 10px;
    color: var(--ir-text) !important;
    background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--ir-bg) !important;
    border-color: var(--ir-border) !important;
    color: var(--ir-ink) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ir-accent) !important;
    border-color: var(--ir-accent) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #98A2B3 !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* openReport3 adds spreadsheet-style #ddd cell borders in an inline <style>
   (after this file) - keep the grid, just lighter. body prefix wins on specificity. */
body table.dataTable.display tbody td,
body table.dataTable.display tbody th,
body table.dataTable thead th,
body table.dataTable thead td {
    border-left-color: #EEF0F3;
    border-top-color: #EEF0F3;
}

body table.dataTable thead th,
body table.dataTable thead td {
    border-bottom-color: var(--ir-border) !important;
    padding: 10px 24px 10px 12px;
}

/* Report viewer page: even 24px of grey around the card. openReport3 has
   no page title and pulls .page-inner up to 45px top padding, so the top gap
   was 17px while #main-wrapper's 20px margin + 24px padding gave 44px sides. */
body:has(#outer) #main-wrapper {
    margin: 0;
    padding: 39px 24px 0;
}

/* Chart viewer (openReportC.asp): normal 60px .page-inner top, so 24px all round. */
body:has(#myChart) #main-wrapper {
    margin: 0;
    padding: 24px 24px 0;
}

/* Report viewer card: the page sets style="padding:8px" on the panel-body,
   which leaves the table hugging the card border. */
.panel-body:has(> #outer),
.panel-body:has(> .table-responsive .dataTables_wrapper) {
    padding: 16px 20px 20px !important;
}

table.dataTable thead th u {
    text-decoration: none;
}

/* report totals: keep the emphasis, lose the harsh black rule */
tr.total-row td {
    border-top: 1px solid var(--ir-border-strong) !important;
    color: var(--ir-ink);
}

/* Modals ---------------------------------------------------------------- */

.modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.18);
    overflow: hidden;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ir-border);
}

.modal-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ir-ink);
}

.modal-header .close {
    font-size: 24px;
    opacity: 0.5;
}

.modal-header .close:hover {
    opacity: 0.9;
}

.modal-body {
    padding: 16px 20px;
}

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--ir-border);
}

.modal-backdrop.in {
    opacity: 0.35;
}

/* wo.asp File Attachments: Bootstrap accordion (#accordion > .panel) shown
   as a folder list. Folder glyphs are FontAwesome 4 (already loaded):
   filled manila folder = has files (body contains the file table),
   outline grey folder = empty; open/closed follows the toggle's .collapsed. */
#accordion.panel-group {
    margin-bottom: 0;
}

#accordion > .panel {
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    margin: 0 !important;
    overflow: visible;
}

#accordion > .panel + .panel {
    border-top: 1px solid #F2F4F7 !important;
}

#accordion > .panel > .panel-heading {
    padding: 0;
    background: transparent;
}

#accordion > .panel > .panel-heading .panel-title {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}

#accordion > .panel > .panel-heading .panel-title > a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--ir-ink);
    text-decoration: none;
}

#accordion > .panel > .panel-heading .panel-title > a:hover {
    background: var(--ir-bg);
}

/* folder glyph */
#accordion > .panel > .panel-heading .panel-title > a:before {
    font-family: FontAwesome;
    font-size: 22px;
    line-height: 1;
    width: 26px;
    flex: none;
    text-align: center;
    content: "\f114";               /* fa-folder-o (empty, closed) */
    color: #98A2B3;
}

#accordion > .panel > .panel-heading .panel-title > a:not(.collapsed):before {
    content: "\f115";               /* fa-folder-open-o (empty, open) */
}

#accordion > .panel:has(.panel-body table) > .panel-heading .panel-title > a:before {
    content: "\f07b";               /* fa-folder (has files, closed) */
    color: #E3A008;
}

#accordion > .panel:has(.panel-body table) > .panel-heading .panel-title > a:not(.collapsed):before {
    content: "\f07c";               /* fa-folder-open (has files, open) */
}

/* wo.asp turns some folder names red (inline) when they hold files - the
   filled folder icon now says that for every folder, so drop the red */
#accordion > .panel > .panel-heading .panel-title > a[style*="red"] {
    color: var(--ir-ink) !important;
}

/* empty folders read quieter */
#accordion > .panel:not(:has(.panel-body table)) > .panel-heading .panel-title > a {
    color: var(--ir-muted);
}

/* chevron */
#accordion > .panel > .panel-heading .panel-title > a:after {
    font-family: FontAwesome;
    content: "\f107";               /* fa-angle-down */
    margin-left: auto;
    font-size: 16px;
    color: #98A2B3;
    transition: transform 150ms ease;
}

#accordion > .panel > .panel-heading .panel-title > a:not(.collapsed):after {
    transform: rotate(180deg);
}

#accordion > .panel > .panel-heading .panel-title > a:not(.collapsed) {
    background: var(--ir-accent-soft);
}

/* folder contents */
#accordion > .panel > .panel-collapse > .panel-body {
    border-top: 0 !important;
    margin: 0 0 8px 50px;
    padding: 0 12px 4px 0;
    background: transparent;
    color: var(--ir-muted);
    font-size: 13px;
}

#accordion .panel-body table {
    width: 100%;
    font-size: 13px;
}

#accordion .panel-body table th {
    padding: 6px 8px !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--ir-muted);
}

#accordion .panel-body table tr[style] {
    background-color: transparent !important;
}

#accordion .panel-body table td {
    padding: 7px 8px !important;
    border-top: 1px solid var(--ir-border);
    color: var(--ir-text);
}

#accordion .panel-body table td[onclick]:hover {
    color: var(--ir-accent);
}

#accordion .panel-body .fa-trash {
    color: #C9372C !important;
}

/* Badges / labels ------------------------------------------------------- */

.label, .badge {
    border-radius: 999px;
    font-weight: 600;
}

/* Login ----------------------------------------------------------------- */

.page-login .page-content,
.page-login .page-inner {
    background: var(--ir-page);
}

.page-login #main-wrapper {
    padding-top: 12vh;
}

.page-login #main-wrapper .col-md-3.center {
    float: none;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.page-login .panel {
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
}

.page-login .panel-body {
    padding: 32px 28px 24px;
}

.page-login .logo-name {
    display: block;
    color: var(--ir-ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.page-login .logo-name span {
    font-size: 13px;
    font-weight: 600;
    color: var(--ir-red-text) !important;
}

.page-login .login-box p {
    color: var(--ir-muted);
}

.page-login .form-control {
    height: 44px;
    font-size: 15px;
}

.page-login .btn-block {
    min-height: 44px;
    font-weight: 600;
}

/* Footer ---------------------------------------------------------------- */

.page-footer {
    background: transparent;
    border-top: 1px solid var(--ir-on-page-line);
    color: var(--ir-on-page-muted);
}

.page-footer a {
    color: var(--ir-on-page);
}

/* inline color:red "(Development)" tag - lighter red so it reads on navy */
.page-footer span[style*="red"] {
    color: #FF8A80 !important;
}