/*
 * Light mode — agentic-solutions theme.
 *
 * Light canvas (--color-bg-light), light borders, blue primary, white sidebar.
 * Tokens come from variables.css; this file carries no hex value of its own.
 */

:root {
    --theme-canvas: var(--color-bg-light);
    --theme-surface: var(--color-white);
    --theme-card: var(--color-white);
    --theme-card-header: var(--color-white);
    --theme-border: var(--color-border-light);
    --theme-text: var(--color-text-dark);
    --theme-text-sub: var(--color-text-muted);
    --theme-heading: var(--color-text-dark);
    --theme-link: var(--color-primary);
    --theme-link-hover: var(--color-primary-dark);
    --theme-hover: var(--color-hover-light);
    --theme-shadow: var(--color-shadow-light);
    --theme-input-bg: var(--color-white);
    --theme-input-border: var(--color-border-light);
    --theme-table-head: var(--color-bg-light);
    --theme-table-stripe: var(--color-bg-light);

    --theme-sidebar-bg: var(--color-white);
    --theme-sidebar-sub-bg: var(--color-bg-light);
    --theme-sidebar-text: var(--color-text-muted);
    --theme-sidebar-hover-bg: var(--color-hover-light);
    --theme-sidebar-hover-text: var(--color-primary-dark);
    --theme-sidebar-active-bg: var(--color-primary-wash);
    --theme-sidebar-active-text: var(--color-primary-dark);
    --theme-sidebar-border: var(--color-border-light);

    --theme-topbar-bg: var(--color-white);
    --theme-topbar-text: var(--color-text-muted);

    color-scheme: light;
}

/* ---------------------------------------------------------------------------
 * Everything below is identical in light.css, dark.css and blue.css — only the
 * token mapping above differs. Change a rule here, change it in all three.
 * ------------------------------------------------------------------------- */

/* Canvas, text, links */

body {
    background-color: var(--theme-sidebar-bg);
    color: var(--theme-text-sub);
}

a {
    color: var(--theme-link);
}

a:hover,
a:focus {
    color: var(--theme-link-hover);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--theme-heading);
}

.text-muted {
    color: var(--theme-text-sub);
}

hr {
    border-top-color: var(--theme-border);
}

.gray-bg,
#page-wrapper {
    background-color: var(--theme-canvas);
}

.white-bg {
    background-color: var(--theme-surface);
}

#page-wrapper {
    border-left: 1px solid var(--theme-sidebar-border);
}

/* Sidebar */

.navbar-default {
    border-color: var(--theme-sidebar-border);
}

.navbar-static-side {
    background-color: var(--theme-sidebar-bg);
}

.nav-header {
    background: transparent;
}

.nav-header a,
.profile-element strong {
    color: var(--theme-sidebar-active-text);
}

.nav-header .text-muted {
    color: var(--theme-sidebar-text);
}

.navbar-static-side .nav > li > a {
    color: var(--theme-sidebar-text);
}

.navbar-static-side .nav > li.active,
.navbar-static-side .nav > li:focus {
    background: none repeat scroll 0 0 var(--theme-sidebar-active-bg);
    border-left: 0;
    outline: none;
}

.navbar-static-side .nav > li.active > a {
    color: var(--theme-sidebar-active-text);
}

.navbar-static-side .nav > li.active > ul,
.navbar-static-side .nav-second-level,
.mini-navbar .nav-second-level {
    background: none repeat scroll 0 0 var(--theme-sidebar-sub-bg);
}

.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
    background-color: var(--theme-sidebar-hover-bg);
    color: var(--theme-sidebar-hover-text);
}

.navbar-static-side .nav.nav-second-level > li > a {
    color: var(--theme-sidebar-text);
}

.navbar-static-side .nav.nav-second-level > li.active > a,
.navbar-static-side .nav.nav-second-level > li > a:hover {
    color: var(--theme-sidebar-hover-text);
}

/* Top bar and page heading */

.navbar-fixed-top,
.navbar-static-top,
.navbar.white-bg {
    background-color: var(--theme-topbar-bg);
    border-bottom: 1px solid var(--theme-border);
}

.border-bottom {
    border-bottom: 0;
}

.nav.navbar-right > li > a,
.navbar-top-links > li > a {
    color: var(--theme-topbar-text);
}

.nav.navbar-top-links > li > a:hover,
.nav.navbar-top-links > li > a:focus {
    background-color: var(--theme-hover);
    color: var(--theme-link-hover);
}

.page-heading {
    background-color: var(--theme-surface);
    border-bottom: 1px solid var(--theme-border);
    border-left: 0;
    box-shadow: none;
}

.page-heading-title {
    color: var(--theme-heading);
}

.footer {
    background: var(--theme-surface);
    border-top: 1px solid var(--theme-border);
    color: var(--theme-text-sub);
}

/* Cards */

.ibox {
    box-shadow: 0 1px 3px var(--theme-shadow);
}

.ibox-title,
.ibox-content,
.ibox-footer {
    background-color: var(--theme-card);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

.ibox-title {
    background-color: var(--theme-card-header);
    border-bottom: 1px solid var(--theme-border);
}

.ibox-heading {
    background-color: var(--theme-table-head);
}

.panel {
    background-color: var(--theme-card);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

.panel-default > .panel-heading,
.panel-heading,
.panel-footer {
    background-color: var(--theme-card-header);
    border-color: var(--theme-border);
    color: var(--theme-heading);
}

.panel-body {
    border-color: var(--theme-border);
}

.well {
    background-color: var(--theme-table-head);
    border-color: var(--theme-border);
    color: var(--theme-text);
    box-shadow: none;
}

.list-group-item {
    background-color: var(--theme-card);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

/* Tables */

.table {
    color: var(--theme-text);
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td,
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border-color: var(--theme-border);
}

.table > thead > tr > th,
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
    background-color: var(--theme-table-head);
    color: var(--theme-heading);
}

.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: var(--theme-table-stripe);
}

/* Legacy header gradient (component.css .sys_table) and FooTable stripes
   paint over the tokens above unless reset here. */

.sys_table > thead > tr > th,
.sys_table > thead > tr > td {
    background-color: var(--theme-table-head);
    background-image: none;
    color: var(--theme-heading);
}

.table > tbody > tr.footable-odd,
.footable-odd {
    background-color: var(--theme-table-stripe);
}

.footable.breakpoint > tbody > tr > td.footable-cell-detail {
    background: var(--theme-table-stripe);
}

/* Group rows (e.g. ledger sections) use Bootstrap's .active row */

.table > thead > tr > td.active, .table > tbody > tr > td.active, .table > tfoot > tr > td.active,
.table > thead > tr > th.active, .table > tbody > tr > th.active, .table > tfoot > tr > th.active,
.table > thead > tr.active > td, .table > tbody > tr.active > td, .table > tfoot > tr.active > td,
.table > thead > tr.active > th, .table > tbody > tr.active > th, .table > tfoot > tr.active > th,
.table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr.active:hover > th {
    background-color: var(--theme-table-head);
    color: var(--theme-heading);
}

/* Contextual rows: a tint of the status colour, readable on either canvas */

.table > thead > tr > td.success, .table > tbody > tr > td.success, .table > tfoot > tr > td.success,
.table > thead > tr.success > td, .table > tbody > tr.success > td, .table > tfoot > tr.success > td,
.table > tbody > tr.success > th {
    background-color: color-mix(in srgb, var(--color-success) 14%, var(--theme-card));
    color: var(--theme-text);
}

.table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot > tr > td.warning,
.table > thead > tr.warning > td, .table > tbody > tr.warning > td, .table > tfoot > tr.warning > td,
.table > tbody > tr.warning > th {
    background-color: color-mix(in srgb, var(--color-warn) 14%, var(--theme-card));
    color: var(--theme-text);
}

.table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger,
.table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td,
.table > tbody > tr.danger > th {
    background-color: color-mix(in srgb, var(--color-danger) 14%, var(--theme-card));
    color: var(--theme-text);
}

.table > thead > tr > td.info, .table > tbody > tr > td.info, .table > tfoot > tr > td.info,
.table > thead > tr.info > td, .table > tbody > tr.info > td, .table > tfoot > tr.info > td,
.table > tbody > tr.info > th {
    background-color: color-mix(in srgb, var(--color-primary) 14%, var(--theme-card));
    color: var(--theme-text);
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: var(--theme-hover);
}

/* Forms */

.form-control,
.input-group-addon {
    background-color: var(--theme-input-bg);
    border-color: var(--theme-input-border);
    color: var(--theme-text);
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.form-control::placeholder {
    color: var(--color-text-muted);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--theme-table-head);
}

/* select2, redactor and the datepicker load their own CSS after this file, hence the body prefix */

body .select2-container .select2-selection {
    background-color: var(--theme-input-bg);
    border-color: var(--theme-input-border);
}

body .select2-container .select2-selection__rendered,
body .select2-container .select2-selection__choice {
    color: var(--theme-text);
}

body .select2-container .select2-selection__placeholder {
    color: var(--theme-text-sub);
}

body .select2-container .select2-selection__choice {
    background-color: var(--theme-table-head);
    border-color: var(--theme-border);
}

body .select2-dropdown,
body .select2-container .select2-search__field {
    background-color: var(--theme-input-bg);
    border-color: var(--theme-input-border);
    color: var(--theme-text);
}

body .select2-container .select2-results__option[aria-selected=true] {
    background-color: var(--theme-hover);
}

body .select2-container .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary);
    color: var(--color-white);
}

body .redactor-box,
body .redactor-editor,
body .redactor-box textarea {
    background-color: var(--theme-input-bg);
    border-color: var(--theme-input-border);
    color: var(--theme-text);
}

body .redactor-toolbar {
    background-color: var(--theme-card-header);
    box-shadow: 0 1px 0 var(--theme-border);
}

body .redactor-toolbar li a {
    color: var(--theme-text-sub);
}

body .redactor-toolbar li a:hover {
    background-color: var(--theme-hover);
    color: var(--theme-link-hover);
}

body .redactor-placeholder:after {
    color: var(--color-text-muted);
}

body .datepicker-content,
body .datepicker-content li,
body .datepicker-week li,
body .datepicker-week li:hover {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

body .datepicker-content li:hover {
    background-color: var(--theme-hover);
}

body .datepicker-content .disabled,
body .datepicker-content .disabled:hover {
    color: var(--theme-text-sub);
}

body .datepicker-arrow:after {
    border-bottom-color: var(--theme-surface);
}

label,
.control-label {
    color: var(--theme-text);
}

/* Buttons */

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    background-color: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
    color: var(--color-white);
}

.btn-default,
.btn-white {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

.btn-default:hover,
.btn-default:focus,
.btn-white:hover,
.btn-white:focus {
    background-color: var(--theme-hover);
    border-color: var(--theme-border);
    color: var(--theme-link-hover);
}

.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-warning {
    background-color: var(--color-warn);
    border-color: var(--color-warn);
}

/* Menus, dialogs, tabs */

.dropdown-menu {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: 0 6px 16px var(--theme-shadow);
}

.dropdown-menu > li > a {
    color: var(--theme-text);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--theme-hover);
    color: var(--theme-link-hover);
}

.dropdown-menu .divider {
    background-color: var(--theme-border);
}

.modal-content {
    background-color: var(--theme-card);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

.modal-header,
.modal-footer {
    border-color: var(--theme-border);
}

.close {
    color: var(--theme-heading);
}

.nav-tabs {
    border-bottom-color: var(--theme-border);
}

.nav-tabs > li > a {
    color: var(--theme-text-sub);
}

.nav-tabs > li > a:hover {
    background-color: var(--theme-hover);
    border-color: var(--theme-border);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: var(--theme-card);
    border-color: var(--theme-border);
    border-bottom-color: transparent;
    color: var(--theme-heading);
}

.tab-content > .tab-pane,
.tabs-container .panel-body {
    background-color: var(--theme-card);
    border-color: var(--theme-border);
}

body .pagination > li > a,
body .pagination > li > span,
body .pagination > .disabled > a,
body .pagination > .disabled > span,
body .pagination > .disabled > a:hover,
body .pagination > .disabled > span:hover {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-link);
}

body .pagination > .active > a,
body .pagination > .active > span,
body .pagination > .active > a:hover,
body .pagination > .active > span:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.label,
.badge {
    background-color: var(--theme-table-head);
    color: var(--theme-text-sub);
}

.label-primary,
.badge-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.label-success,
.badge-success {
    background-color: var(--color-success);
    color: var(--color-white);
}

.label-danger,
.badge-danger {
    background-color: var(--color-danger);
    color: var(--color-white);
}

.label-warning,
.badge-warning {
    background-color: var(--color-warn);
    color: var(--color-white);
}

/* Theme toggle in the top bar */

.theme-toggle i {
    font-size: 15px;
}