/* Titan: page-specific styles, on top of Tabler and css/shell.css. */

/* Bootstrap's d-flex/d-block utilities use !important and would override the
   hidden attribute; make hidden always win so JS can toggle elements safely. */
[hidden] { display: none !important; }

/* ---- brand ---------------------------------------------------------- */
.sm-logo { display: inline-flex; align-items: center; gap: 8px; }
.sm-logo img { display: block; }
.sm-logo .sm-portal-tag { align-self: center; line-height: 1.5; }
/* Titan wordmark: white on dark surfaces (the sidebar, dark theme), navy on light ones. */
.sm-logo-on-light { display: none !important; }
[data-bs-theme=light] .sm-logo-on-light { display: inline-block !important; }
[data-bs-theme=light] .sm-logo-on-dark { display: none !important; }
[data-bs-theme=light] [data-bs-theme=dark] .sm-logo-on-light { display: none !important; }
[data-bs-theme=light] [data-bs-theme=dark] .sm-logo-on-dark { display: inline-block !important; }

/* ---- topbar live indicator ----------------------------------------- */
.sm-live { align-items: center; font-size: 13px; padding: 4px 10px; border-radius: 20px; background: rgba(47, 179, 68, .12); color: #2fb344; white-space: nowrap; }
.sm-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fb344; margin-right: 6px; animation: sm-pulse 2s infinite; }
@keyframes sm-pulse {
    0% { box-shadow: 0 0 0 0 rgba(47, 179, 68, .6); }
    70% { box-shadow: 0 0 0 8px rgba(47, 179, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 179, 68, 0); }
}

/* ---- sidebar fleet bar --------------------------------------------- */
.sm-fleet-bar { height: 8px; border-radius: 4px; overflow: hidden; }
.sm-fleet-bar span { display: block; height: 100%; }
.sm-soon { opacity: .55; }
.sm-soon::after { content: "soon"; font-size: 10px; margin-left: 6px; padding: 1px 5px; border-radius: 3px; border: 1px solid currentColor; }

/* ---- KPI tiles ----------------------------------------------------- */
.sm-kpi .sm-kpi-value { font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sm-kpi .sm-kpi-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.sm-badge { font-weight: 500; padding: .4em .65em; }
.sm-badge i { font-size: 8px; vertical-align: middle; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---- fleet heat grid (overview) ------------------------------------ */
.sm-heat-legend span { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; font-size: 12px; }
.sm-heat-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
/* Racks side by side, each a row of slots A–D; the map scrolls inside its card. */
.sm-heat-scroll { max-height: 560px; overflow-y: auto; padding-right: 4px; }
.sm-heat-room { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin: 4px 0 8px; }
.sm-heat-racks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; margin-bottom: 14px; }
.sm-heat-racks:last-child { margin-bottom: 0; }
.sm-heat-rack { min-width: 0; }
.sm-heat-rack-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.sm-heat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.sm-heat-cell {
    position: relative; height: 46px; border-radius: 5px; color: #fff; text-decoration: none;
    font-size: 11px; padding: 4px 6px; line-height: 1.25; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease;
}
.sm-heat-cell.is-empty { background: transparent; border: 1px dashed rgba(133, 144, 165, .35); color: var(--tblr-secondary); }
.sm-heat-cell .h b { opacity: .75; }
.sm-heat-cell.is-empty:hover { transform: none; box-shadow: none; }
.sm-heat-cell:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .25); color: #fff; }
.sm-heat-cell .h { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-heat-cell .v { opacity: .85; font-variant-numeric: tabular-nums; }
.sm-heat-cell.is-critical { animation: sm-blink 1.6s ease-in-out infinite; }
@keyframes sm-blink { 50% { box-shadow: 0 0 0 3px rgba(214, 57, 57, .45); } }


/* ---- rack elevation (server room) ---------------------------------- */
.sm-rack { border-radius: 8px; padding: 10px 10px 12px; background: rgba(0, 0, 0, .18); border: 1px solid rgba(133, 144, 165, .2); }
[data-sm-theme=light] .sm-rack { background: #f1f3f7; }
.sm-rack-units { display: flex; flex-direction: column; gap: 2px; }
.sm-u { height: 13px; border-radius: 2px; background: rgba(133, 144, 165, .08); }
.sm-u-server {
    display: flex; align-items: center; justify-content: space-between; height: 28px; border-radius: 3px; padding: 0 8px;
    font-size: 11px; color: #fff; text-decoration: none; border-left: 4px solid rgba(0, 0, 0, .25); font-variant-numeric: tabular-nums;
}
.sm-u-server:hover { filter: brightness(1.12); color: #fff; }
.sm-u-server .leds i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .8); margin-left: 3px; }
.sm-u-net { height: 13px; border-radius: 2px; background: repeating-linear-gradient(90deg, #3b4760 0 6px, #2c3549 6px 9px); }
.sm-u-pdu { height: 13px; border-radius: 2px; background: #4a3b2a; }

/* ---- server detail ------------------------------------------------- */
.sm-spec dt { font-weight: 400; color: #8590a5; font-size: 12px; }
.sm-spec dd { margin-bottom: 10px; font-weight: 500; }
.sm-range .btn { padding: .2rem .6rem; font-size: 12px; }

/* ---- tables -------------------------------------------------------- */
table.dataTable tbody tr { cursor: pointer; }
.sm-host { font-weight: 600; }

/* ---- firmware ------------------------------------------------------ */
.sm-fw-cell { font-family: var(--tblr-font-monospace, monospace); font-size: 12px; white-space: nowrap; }
.sm-fw-cell > i:first-child, .sm-fw-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.sm-fw-legend span { margin-left: 14px; }

/* ---- documentation ------------------------------------------------- */
.sm-doc-nav .list-group-item { color: inherit; padding-top: .55rem; padding-bottom: .55rem; }
.sm-doc-nav .list-group-item.active { background: rgba(6, 111, 209, .12) !important; color: #066fd1; }
.sm-doc-card { transition: border-color .12s ease, transform .12s ease; }
.sm-doc-card:hover { border-color: #066fd1 !important; transform: translateY(-2px); }
.sm-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sm-doc #r-body { font-size: 14.5px; line-height: 1.7; max-width: 820px; }
.sm-doc #r-body h5 { margin-top: 1.4rem; font-size: 16px; }
.sm-doc #r-body code { padding: 1px 5px; border-radius: 4px; background: rgba(133, 144, 165, .15); }
.sm-bundle { background: rgba(6, 111, 209, .06); border: 1px dashed rgba(6, 111, 209, .35); }

/* ---- tickets (WHMCS-style) ----------------------------------------- */
.sm-tk-views .nav-link { padding: .4rem .8rem; font-size: 13px; }
.sm-tk-status { font-weight: 500; letter-spacing: .2px; }
.sm-tk-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sm-tk-table tbody tr { cursor: pointer; }
.sm-tk-row td:first-child { border-left: 3px solid transparent; }
.sm-tk-row.sm-prio-danger td:first-child { border-left-color: #d63939; }
.sm-tk-row.sm-prio-warning td:first-child { border-left-color: #f76707; }
.sm-tk-row.sm-prio-info td:first-child { border-left-color: #4299e1; }
.sm-tk-row.sm-prio-secondary td:first-child { border-left-color: rgba(133, 144, 165, .4); }
.sm-tk-subject { font-weight: 500; }
.sm-tk-unread .sm-tk-subject { font-weight: 700; }
.sm-tk-title { font-size: 18px !important; text-transform: none !important; }
.sm-msg { border-left: 3px solid transparent; }
.sm-msg-staff { border-left-color: #066fd1; }
.sm-msg-client { border-left-color: #f76707; }
.sm-msg-system { border-left-color: rgba(133, 144, 165, .5); }
.sm-msg-note { border-left-color: #f76707; background: rgba(247, 103, 7, .08) !important; }
.sm-msg-body { font-size: 14px; line-height: 1.65; white-space: normal; word-wrap: break-word; }
.sm-note { background: rgba(247, 103, 7, .1); color: #f76707; border: 0; }

/* ---- production portal --------------------------------------------- */
.sm-portal-tag { font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 4px; background: rgba(247, 103, 7, .18); color: #f76707; margin-left: 4px; vertical-align: middle; }
.sm-preview-banner { padding: 6px 24px; font-size: 13px; background: rgba(247, 103, 7, .15); color: #f76707; text-align: center; }
.sm-dept-card { transition: border-color .12s ease, transform .12s ease; border: 1px solid rgba(133, 144, 165, .2) !important; }
.sm-dept-card:hover { border-color: #066fd1 !important; transform: translateY(-2px); }
.sm-stopped { background: rgba(214, 57, 57, .08); border: 1px solid rgba(214, 57, 57, .25); }
.sm-u-server.is-static { cursor: default; }
.sm-u-server.is-static:hover { filter: none; }

/* ---- login --------------------------------------------------------- */
.sm-login-logo { display: flex; justify-content: center; }
.sm-demo { background: rgba(6, 111, 209, .07); border: 1px dashed rgba(6, 111, 209, .35); }
.sm-tk-views .nav-link.active .badge { background: rgba(255, 255, 255, .85) !important; color: #066fd1 !important; }

/* ---- tester room: rack → slots A–D ------------------------------------ */
.sm-slots { grid-template-columns: minmax(0, 1fr); }
.sm-slot { min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; font-size: 12px; line-height: 1.2;
    color: inherit; text-decoration: none; border-left: 4px solid var(--slot, #6c757d); background: color-mix(in srgb, var(--slot, #6c757d) 14%, transparent); }
a.sm-slot:hover { background: color-mix(in srgb, var(--slot, #6c757d) 26%, transparent); color: inherit; }
.sm-slot-key { font-weight: 700; width: 12px; opacity: .7; }
.sm-slot-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-slot-name small { display: block; font-weight: 400; opacity: .75; }
.sm-slot-sub { font-size: 11px; opacity: .85; text-align: right; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-slot-empty { border-left-style: dashed; background: transparent; opacity: .6; }
.sm-slot.is-static { cursor: default; }
.sm-uncertain td { background: rgba(247, 103, 7, .06); }

/* Part pictures */
.sm-part-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; }
.sm-part-thumb-empty { background: rgba(128,128,128,.1); color: rgba(128,128,128,.6); font-size: 18px; }
.sm-part-image { width: 72px; height: 72px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: rgba(128,128,128,.1);
    display: flex; align-items: center; justify-content: center; color: rgba(128,128,128,.6); font-size: 26px; }
.sm-part-image img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }

/* Room layout designer */
.sm-layout-stage { color: var(--tblr-body-color); }
.sm-layout-stage:focus { outline: 2px solid rgba(84,56,220,.35); }
.sm-layout text { user-select: none; }

/* Searchable dropdowns (js/searchable.js) */
.select2-container .select2-selection--single { min-height: 38px; }
.sm-select2-sm .select2-selection--single { min-height: 31px !important; height: 31px !important; font-size: .875rem; }
.sm-select2-sm .select2-selection--single .select2-selection__rendered { line-height: 29px !important; padding-left: .5rem; }
.sm-select2-sm .select2-selection--single .select2-selection__arrow { height: 29px !important; }
.is-invalid + .select2-container .select2-selection { border-color: var(--tblr-danger, #d63939) !important; }
.select2-results__option { font-size: .875rem; }

/* Unread rows on the profile page. */
.sm-unread { border-left: 3px solid var(--tblr-primary, #066fd1); }
/* Alerts page */
.sm-alert-id { font-family: var(--tblr-font-monospace, monospace); font-size: 12px; color: #8590a5; }
tr.sm-alert-focus > td { background: rgba(6, 111, 209, .10) !important; }