/* Kenexis Global Styles
   Professional engineering application theme
*/

:root {
    --kenexis-blue: #2b5b8a;
    --kenexis-blue-hover: #234b72;
    --kenexis-blue-active: #1d3f60;

    /* Override Bootstrap primary color */
    --bs-primary: #2b5b8a;
    --bs-primary-rgb: 43, 91, 138;
    --bs-link-color: #2b5b8a;
    --bs-link-hover-color: #234b72;

    /* Theme colors - Light */
    --bg-primary: #ffffff;
    --bg-secondary: #f4f5f7;
    --bg-tertiary: #e8eaed;
    --bg-header: #f4f5f7;
    --bg-hover: #e3e6ea;
    --bg-selected: #2b5b8a;
    --bg-selected-row: #d6e4f0;
    --bg-input: #ffffff;

    --text-primary: #1a1a1a;
    --text-secondary: #555555;
    --text-muted: #777777;
    --text-on-selected: #ffffff;
    --text-header: #1a1a1a;

    --border-primary: #d0d3d8;
    --border-secondary: #e2e4e8;
    --border-input: #bfc3c9;
    --border-table: #aeb3ba; /* darker than --border-primary so cell gridlines read clearly in light mode */

    --modal-bg: #ffffff;
    --modal-shadow: rgba(0, 0, 0, 0.25);
    --popup-shadow: rgba(0, 0, 0, 0.12);
    --backdrop-bg: rgba(0, 0, 0, 0.45);

    --toolbar-hover-bg: #d5d8dd;
    --toolbar-hover-border: #bfc3c9;
    --toolbar-separator: #c5c8cd;

    --table-header-bg: #e8eaed;
    --table-row-alt: #f8f9fa;

    /* OpenPha/OpenAudit worksheet span (non-editable) cells (KxsTable) */
    --span-cell-bg: color-mix(in srgb, var(--text-secondary) 8%, var(--bg-primary));

    --scrollbar-thumb: #c1c4c9;
    --scrollbar-track: #f0f1f3;

    --accent-green: #2e7d32;
    --accent-red: #c62828;
    --accent-amber: #f57f17;
}

[data-theme="dark"] {
    --kenexis-blue: #5a9fd4;
    --kenexis-blue-hover: #4a8fc4;
    --kenexis-blue-active: #3a7fb4;

    --bs-primary: #5a9fd4;
    --bs-primary-rgb: 90, 159, 212;
    --bs-link-color: #5a9fd4;
    --bs-link-hover-color: #4a8fc4;

    --bg-primary: #1c2028;
    --bg-secondary: #22272e;
    --bg-tertiary: #282d35;
    --bg-header: #1c2028;
    --bg-hover: #2d333b;
    --bg-selected: #2b5b8a;
    --bg-selected-row: #253545;
    --bg-input: #282d35;

    --text-primary: #cdd5de;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --text-on-selected: #ffffff;
    --text-header: #cdd5de;

    --border-primary: #373e47;
    --border-secondary: #30363d;
    --border-input: #444c56;
    --border-table: #373e47; /* dark mode keeps the existing gridline tone */

    --modal-bg: #22272e;
    --modal-shadow: rgba(0, 0, 0, 0.5);
    --popup-shadow: rgba(0, 0, 0, 0.35);
    --backdrop-bg: rgba(0, 0, 0, 0.6);

    --toolbar-hover-bg: #2d333b;
    --toolbar-hover-border: #444c56;
    --toolbar-separator: #373e47;

    --table-header-bg: #282d35;
    --table-row-alt: #252a31;

    /* Span cells need a stronger fill to separate from the dark canvas */
    --span-cell-bg: color-mix(in srgb, var(--text-secondary) 22%, var(--bg-primary));

    --scrollbar-thumb: #444c56;
    --scrollbar-track: #22272e;

    --accent-green: #4caf50;
    --accent-red: #ef5350;
    --accent-amber: #ffb74d;

    color-scheme: dark;
}

/* Dark mode global overrides */
[data-theme="dark"] body,
[data-theme="dark"] {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control {
    background-color: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--kenexis-blue);
    box-shadow: 0 0 0 2px rgba(90, 159, 212, 0.2);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}

/* Disabled inputs: Bootstrap's default disabled fill (#e9ecef) is a light grey
   that looks wrong on the dark canvas, and the enabled --bg-input is too close
   to it to read. Use a darker recessed fill + softer border + muted text so
   disabled fields are clearly distinguishable from enabled ones. */
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select:disabled {
    background-color: var(--bg-primary);
    border-color: var(--border-secondary);
    color: var(--text-muted);
    opacity: 1;
}

[data-theme="dark"] .form-select {
    background-color: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .table {
    --bs-table-bg: var(--bg-primary);
    --bs-table-color: var(--text-primary);
    --bs-table-color-state: var(--text-primary);
    --bs-table-border-color: var(--border-primary);
    --bs-table-striped-bg: var(--table-row-alt);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--bg-hover);
    --bs-table-hover-color: var(--text-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .table tbody tr.row-selected > td,
[data-theme="dark"] .table tbody tr.row-selected > th {
    background-color: var(--bg-selected-row);
}

/* Bootstrap 5.1 hardcodes .card background/border (the --bs-card-* variables
   only arrived in 5.3), so the card stays white on a themed page unless the
   properties are set directly. --bg-secondary matches --modal-bg, keeping a
   card lifted off the --bg-primary page behind it. */
[data-theme="dark"] .card {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .card-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-primary {
    background-color: var(--kenexis-blue);
    border-color: var(--kenexis-blue);
}

[data-theme="dark"] .btn-primary:hover {
    background-color: var(--kenexis-blue-hover);
    border-color: var(--kenexis-blue-hover);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-input);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* Primary buttons */
.btn-primary {
    background-color: #2b5b8a;
    border-color: #2b5b8a;
    color: #fff;
}

.btn-primary:hover {
    background-color: #234b72;
    border-color: #234b72;
    color: #fff;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #1d3f60;
    border-color: #1d3f60;
    color: #fff;
}

.btn-primary:focus {
    box-shadow: 0 0 0 2px rgba(43, 91, 138, 0.3);
}

.btn-primary:disabled {
    background-color: rgba(43, 91, 138, 0.55);
    border-color: rgba(43, 91, 138, 0.55);
}

/* Outline primary buttons */
.btn-outline-primary {
    color: #2b5b8a;
    border-color: #2b5b8a;
}

.btn-outline-primary:hover {
    background-color: #2b5b8a;
    border-color: #2b5b8a;
    color: #fff;
}

/* Links */
a {
    color: #2b5b8a;
}

a:hover {
    color: #234b72;
}

/* Form controls focus state */
.form-control:focus {
    border-color: #2b5b8a;
    box-shadow: 0 0 0 2px rgba(43, 91, 138, 0.15);
}

/* Checkbox and radio */
.form-check-input:checked {
    background-color: #2b5b8a;
    border-color: #2b5b8a;
}

.form-check-input:focus {
    border-color: rgba(43, 91, 138, 0.5);
    box-shadow: 0 0 0 2px rgba(43, 91, 138, 0.15);
}

/* Compact form spacing — reduce Bootstrap defaults for data-dense engineering forms */
.form-control {
    padding: 4px 8px;
    font-size: 13px;
}

.form-select {
    padding: 4px 8px;
    font-size: 13px;
}

.form-label,
label {
    margin-bottom: 2px;
    font-size: 13px;
}

.mb-3 {
    margin-bottom: 0.5rem !important;
}

.form-check {
    margin-bottom: 0.25rem;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}