@charset "UTF-8";
@import url("./ass-style.css");

/* ---------------------------------------------------------
   STYLE.CSS - COMPATIBILITY WRAPPER FOR ASS-STYLE.CSS + BOOTSTRAP
   --------------------------------------------------------- */

/* This css file imports the style from ASS then includes some 
styling rules from Star Admin 2.*/

/* ---------------------------------------------------------
   2. Light / Dark Mode Variable Overrides
   --------------------------------------------------------- */
/* LIGHT MODE */
:root[data-theme="light"] {
    --bg: #ffffff;
    --panel: #f5f7fa;
    --panel-alt: #ffffff;
    --border: #d0d5dd;
    --text: #111827;
    --text-muted: #6b7280;
    --accent: #2563eb;
    --accent-soft: rgba(37, 99, 235, 0.15);
    --footer-bg: #f1f1f1;
    --footer-text: var(--text);
    --footer-bg: #f1f1f1;
    --footer-text: var(--text);
}

:root {
    /* Light mode colors (override for Bootstrap variables) */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-border-color: var(--border);
    --bs-primary: var(--accent);
    --bs-secondary: var(--text-muted);
    --bs-light: #ffffff;
    --bs-dark: #000000;
    --chart-bg: #ffffff;
    --chart-text: #000000;
    --chart-grid: #000000;
}

:root {
    --success: #4caf50;
    --danger: #ff4d4d;
}

[data-theme="dark"] {
    --success: #7dff7d;
    --danger: #ff6b6b;
}

/* DARK MODE */
:root[data-theme="dark"] {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-border-color: var(--border);
    --bs-primary: var(--accent);
    --bs-secondary: var(--text-muted);
    --chart-bg: #1e1e1e;
    --chart-text: #e5e5e5;
    --chart-grid: #888888;
    --footer-bg: #0b1120;
    /* matches your navbar */
    --footer-text: #e5e7eb;
    /* readable light grey */
}

/* ---------------------------------------------------------
   3. Apply design system to Bootstrap core elements
   --------------------------------------------------------- */

body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* links */
a {
    color: var(--accent);
}

a:hover {
    color: var(--accent);
    opacity: 0.8;
}

/* cards */
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    box-shadow: var(--shadow-soft);
}

/* tables */
.table {
    background: var(--panel);
    color: var(--text);
}

.table thead {
    background: var(--panel-alt);
}

/* buttons */
.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #0b1120;
}

.btn-primary:hover {
    background: var(--accent);
    filter: brightness(1.2);
}

/* forms */
.form-control,
select,
textarea {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
}

.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* alerts */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

/* navbar */
.navbar,
.navbar-light,
.navbar-dark {
    background: var(--panel) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border);
}

.nav-link {
    color: var(--text-muted) !important;
}

.nav-link:hover {
    color: var(--text) !important;
}

/* ---------------------------------------------------------
   4. Optional – Mutation of Bootstrap spacing to match new look
   --------------------------------------------------------- */
.container,
.container-fluid {
    padding-left: 20px;
    padding-right: 20px;
}

/* ---------------------------------------------------------
   5. Overriding Bootstrap badges/pills to match accent color
   --------------------------------------------------------- */
.badge-primary {
    background: var(--accent);
    color: #0b1120;
}

/* ---------------------------------------------------------
   Styling for SVG elements (used for site diagrams)
   --------------------------------------------------------- */

.svg-box {
    color: var(--text);
    background: var(--panel);
    border: 2px solid var(--border);
    padding: 1px;
}

.svg-line {
    stroke: var(--text);
    stroke-width: 2;
}

.svg-valve-open {
    fill: var(--success);
    stroke: var(--text);
    stroke-width: 3;
}

.svg-valve-closed {
    fill: var(--danger);
    stroke: var(--text);
    stroke-width: 3;
}

.svg-text {
    color: var(--text);
}

/* ============================================
   REMOVE BOOTSTRAP TABLE STYLING COMPLETELY
   ============================================ */

.app-table,
.app-table th,
.app-table td,
.app-table thead th,
.app-table tbody td {
    all: unset;
    /* Remove ALL Bootstrap influence */
    display: table-cell;
    /* Restore table layout */
    padding: 10px;
    border: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.app-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    background: var(--bg);
}

/* Header */
.app-table thead th {
    background: var(--bg-secondary);
    font-weight: bold;
    color: var(--text);
}

/* Zebra striping */
.app-table tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}

.app-table tbody tr:nth-child(odd) {
    background: var(--bg);
}

#warning {
    color: var(--danger);
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    /* pushes footer to the bottom */
}

.footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    border-top: 1px solid var(--border);
    padding: 10px;
    text-align: left;
}