/*
 * DBSS Dashboard — Tabler integration layer.
 * Loaded AFTER tabler.css. Pure-Tabler shell + small behavioral helpers.
 */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Softer green (softer tone across buttons/status) ---------- */
:root {
    --tblr-green: #3fa06b;
    --tblr-green-rgb: 63, 160, 107;
    --tblr-success: #3fa06b;
    --tblr-success-rgb: 63, 160, 107;
}

/* ---------- White text on all status badges ---------- */
.badge {
    --tblr-badge-color: #fff;
}

/* ---------- White text on all solid (filled) buttons ---------- */
.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger,
.btn-dark, .btn-muted, .btn-blue, .btn-azure, .btn-indigo, .btn-purple, .btn-pink,
.btn-red, .btn-orange, .btn-yellow, .btn-lime, .btn-green, .btn-teal, .btn-cyan,
.btn-twitter, .btn-facebook, .btn-google, .btn-black {
    color: #fff !important;
}

/* ---------- Card header title <-> tools spacing ---------- */
.card-header {
    gap: 0.75rem;
}

.card-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Toastr (Fix Tabler .toast color clash ---------- */
/* Tabler sets .toast-success/.toast-error text color equal to the toast
   background, which makes toastr messages invisible. Force white text. */
#toast-container .toast,
#toast-container .toast-title,
#toast-container .toast-message {
    color: #fff !important;
}

#toast-container .toast-close-button {
    color: #fff !important;
    opacity: 0.85;
}

#toast-container .toast-info .toast-close-button,
#toast-container .toast-warning .toast-close-button {
    color: #fff !important;
}

#toast-container .toast-message,
#toast-container .toast-title {
    word-wrap: break-word;
    white-space: normal;
}

/* ---------- Layout shell overrides ---------- */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-header {
    padding-top: 1.25rem;
    padding-bottom: 1rem;
}

.page-body {
    flex: 1;
    padding-bottom: calc(2rem + var(--app-footer-h, 30px));
}

.app-footer {
    --app-footer-h: 30px;
    position: sticky;
    bottom: 0;
    z-index: 1035;
    height: var(--app-footer-h);
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    border-top: var(--tblr-border-width) solid var(--tblr-border-color);
    background: var(--tblr-bg-surface-tertiary, #f6f8fb);
    color: var(--tblr-secondary-color, #667382);
}

.app-footer a {
    color: var(--tblr-link-color);
    text-decoration: none;
}

.app-footer a:hover {
    text-decoration: underline;
}

.app-footer-left {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-footer-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-width: 0;
}

.app-footer-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    color: inherit;
    cursor: help;
    position: relative;
}

.app-footer-stat .icon {
    width: 13px;
    height: 13px;
    stroke-width: 2;
    flex: none;
}

.app-footer-version {
    font-weight: 600;
    color: var(--tblr-primary-color, #0054a6);
}

.app-footer-stat .is-ok {
    color: inherit;
}

.app-footer-stat .is-warn {
    color: #f76707;
}

.app-footer-stat .is-danger {
    color: #d63939;
    font-weight: 600;
}

/* ---------- Utility helpers referenced by JS ---------- */
.hidden { display: none !important; }

/* ---------- Tables ---------- */
.table thead th {
    background: var(--tblr-table-head-bg, var(--tblr-bg-surface-tertiary));
    text-transform: none;
    letter-spacing: normal;
    color: var(--tblr-muted-color, #667382);
    font-size: inherit;
    border-bottom-width: 1px;
}

.table td,
.table th {
    padding: var(--tblr-table-cell-padding-y, 0.75rem) var(--tblr-table-cell-padding-x, 0.75rem);
}

/* Column sizing for DataTables columnDefs */
.col-time {
    white-space: nowrap;
    width: 1%;
}

.col-wrap {
    white-space: nowrap;
    width: 1%;
}

/* Scroll-synced table wrapper (FM / dashboards) */
.table-scroll {
    max-height: 360px;
}

.table-scroll-top {
    overflow-x: auto;
    overflow-y: hidden;
    height: 12px;
    margin-bottom: 6px;
}

.table-scroll-top .table-scroll-top-inner {
    height: 1px;
}

.dashboard-table-scroll {
    max-height: 280px;
    min-height: 280px;
}

@media (max-width: 767px) {
    .table-scroll-top {
        height: 10px;
    }
    .table-scroll {
        max-height: 280px;
    }
}

/* ---------- DataTables polish inside Tabler cards ---------- */
.card .dataTables_wrapper {
    width: 100%;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--tblr-border-radius, 0.5rem);
    padding: 0.375rem 0.75rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent;
}

/* ---------- File manager ---------- */
.fm-loading-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2060;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(24, 36, 51, 0.4);
}

.fm-crumb {
    background: transparent;
    border: 0;
    padding: 0.375rem 0.75rem;
    margin-right: 0.25rem;
    border-radius: var(--tblr-border-radius, 0.375rem);
    font-weight: 600;
    color: var(--tblr-secondary-color, #667382);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.fm-crumb:hover {
    color: var(--tblr-primary, #0054a6);
    background: rgba(var(--tblr-primary-rgb), 0.08);
}

.fm-entry {
    cursor: pointer;
}

.fm-entry td {
    vertical-align: middle;
}

.fm-entry:hover td {
    background: rgba(var(--tblr-primary-rgb), 0.04);
}

.file-entry-icon {
    padding-left: 0.25rem;
}

.fm-delete-entry {
    white-space: nowrap;
}

.fm-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.fm-sort.desc::after {
    content: " \2193";
}

.fm-sort:not(.desc)::after {
    content: " \21C5";
    opacity: 0.4;
}

.file-manager-meta {
    font-size: 0.8125rem;
    color: var(--tblr-secondary-color, #667382);
}

.file-manager-message {
    font-size: 0.875rem;
}

.file-manager-editor .CodeMirror {
    height: auto;
    min-height: 12rem;
    border: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #e2e5e9);
    border-radius: var(--tblr-border-radius, 0.5rem);
}

.file-manager-code pre {
    margin: 0;
}

.file-manager-backup-result {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---------- Device hostname button ---------- */
.device-hostname-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.device-hostname-btn:focus {
    outline: none;
}

/* ---------- Access reason popover (device status refresh) ---------- */
.access-reason-popover {
    max-width: 20rem;
}

.access-reason-text {
    line-height: 1.5;
    word-break: break-word;
}

.access-reason-copy {
    width: 100%;
}

/* ---------- POP table layout ---------- */
.dash2-pop-table {
    width: 100%;
    table-layout: fixed;
}

.dash2-pop-table td {
    overflow-wrap: anywhere;
}

/* ---------- Recent backup file list items (dashboard) ---------- */
.dash2-backup-file {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.dash2-backup-file:hover {
    background-color: var(--tblr-secondary-bg-subtle) !important;
    border-color: var(--tblr-border-color-translucent);
}

/* ---------- Path status marks (system management) ---------- */
.path-status {
    font-size: 14px;
    opacity: 0.35;
    vertical-align: middle;
}

.path-status.is-valid {
    color: #22c55e;
    opacity: 1;
}

.path-status.is-invalid {
    color: #ef4444;
    opacity: 1;
}

.path-status.is-warning {
    color: #f59e0b;
    opacity: 1;
}

/* ---------- Live indicator refresh spinner ---------- */
.spin {
    animation: spin-fast 1s linear infinite !important;
    transform-origin: center;
}

#dash2-live-pill.refreshing .icon {
    animation: spin-fast 1s linear infinite;
}

@keyframes spin-fast {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------- Scroll-to-top ---------- */
.scroll-top-btn {
    position: fixed;
    right: 1.5rem;
    bottom: calc(var(--app-footer-h, 30px) + 1rem);
    z-index: 1040;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
}

/* Black icon in its resting state; the global solid-button rule forces white,
   so override it here (this rule comes later in the cascade). White on hover. */
.scroll-top-btn {
    color: #000 !important;
}

.scroll-top-btn:hover {
    color: #fff !important;
}

/* ---------- Load History button: black in resting state, white on hover ---------- */
#device-history-load {
    color: #000 !important;
}

#device-history-load:hover {
    color: #fff !important;
}

/* ---------- Import CSV button: black in resting state, white on hover ---------- */
#devices-import-btn {
    color: #000 !important;
}

#devices-import-btn:hover {
    color: #fff !important;
}

/* ---------- Search Backup button: black in resting state, white on hover ---------- */
#fm-backup-search {
    color: #000 !important;
}

#fm-backup-search:hover {
    color: #fff !important;
}

/* ---------- Toast notifications (brand palette, overrides Tabler .toast) ---------- */
.toast {
    color: #fff !important;
    border: 0;
    box-shadow: 0 0.5rem 1rem rgba(24, 36, 51, 0.18);
}

.toast-success {
    background-color: #2fb344 !important;
}

.toast-error {
    background-color: #d63939 !important;
}

.toast-warning {
    background-color: #f76707 !important;
}

.toast-info {
    background-color: #0054a6 !important;
}

.toast-title,
.toast-message {
    color: #fff !important;
}

.toast-title {
    font-weight: 600;
}

.toast-close-button {
    color: #fff !important;
    text-shadow: none;
    opacity: 0.7;
}

.toast-close-button:hover,
.toast-close-button:focus {
    opacity: 1;
}

.toast-message a {
    color: #fff;
    text-decoration: underline;
}

.toast .progress {
    height: 3px;
    opacity: 0.25;
}

.toast .progress-bar {
    background-color: #fff;
}

/* ---------- Active KPI filter cards (toggle filters applied to a table) ---------- */
.kpi-filter-active {
    border-color: var(--tblr-blue, #0054a6) !important;
    background-color: rgba(59, 130, 246, 0.08) !important;
}

.kpi-filter-active-success {
    border-color: var(--tblr-green, #2fb344) !important;
    background-color: rgba(47, 179, 68, 0.08) !important;
}

.kpi-filter-active-danger {
    border-color: var(--tblr-red, #d63939) !important;
    background-color: rgba(214, 57, 57, 0.08) !important;
}

.kpi-filter-active-teal {
    border-color: var(--tblr-teal, #0ca678) !important;
    background-color: rgba(12, 166, 120, 0.08) !important;
}

.kpi-filter-active-muted {
    border-color: var(--tblr-secondary, #667382) !important;
    background-color: rgba(102, 115, 130, 0.08) !important;
}

/* ---------- Disabled device rows styled as inactive ---------- */
.table > tbody > tr.device-row-disabled td {
    color: var(--tblr-secondary-color, #667382);
}

.table > tbody > tr.device-row-disabled .badge,
.table > tbody > tr.device-row-disabled .form-switch,
.table > tbody > tr.device-row-disabled .btn {
    opacity: 0.5;
}

/* ---------- App loading overlay (modal-like backdrop) ---------- */
#app-loading {
    z-index: 1060;
    background: rgba(24, 36, 51, 0.56);
    backdrop-filter: blur(2px);
}

/* ---------- Sidebar submenu expand/retract animation ---------- */
.navbar-vertical .navbar-collapse .dropdown-menu {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease;
}

.navbar-vertical .navbar-collapse .dropdown-menu.show {
    max-height: var(--submenu-h, 500px);
    opacity: 1;
    transform: translateY(0);
}