/* ---------------------------------------------------------------
   MikroFleet — papildu stili virs Bootstrap 5.3

   Šeit ir tikai tas, ko Bootstrap nenodrošina: ierīču režģis,
   statusa krāsas un dažas lapām specifiskas detaļas. Krāsas ņemtas
   no Bootstrap mainīgajiem (--bs-*), tāpēc tās automātiski mainās
   līdz ar gaišo/tumšo tēmu (data-bs-theme).
   --------------------------------------------------------------- */

:root {
    --accent: #0284c7;
}

[data-bs-theme="dark"] {
    --accent: #38bdf8;
}

/* ---------- Koplietojamā navigācijas josla ---------- */

/* Izvēlne ir vienā vietā - assets/nav.js; lapā ir tikai <app-nav>.
   Nezināms elements pēc noklusējuma ir inline, tāpēc jāpadara par bloku. */
app-nav {
    display: block;
}

/* ---------- Logo ----------

   Logo ir divos variantos: viens paredzēts tumšajai tēmai (gaišs tēls), otrs
   gaišajai (tumšs tēls). Abi tiek ielādēti, bet redzams ir tikai viens, tāpēc
   pēc tēmas pārslēgšanas logo ir salasāms uzreiz, bez lapas pārlādes. */

.brand-logo-on-light {
    display: none;
}

[data-bs-theme="light"] .brand-logo-on-dark {
    display: none;
}

[data-bs-theme="light"] .brand-logo-on-light {
    display: inline-block;
}

/* ---------- Sākumlapas kopsavilkums ----------

   Kartīšu uzbūve (card + stats-card + stats-icon) ir tieši tāda kā
   Metis demo lapā, tāpēc tālāk ir tikai tas, ko veidne nenodrošina. */

/* Kopsavilkuma kartīte ir saite uz filtrētu ierīču sarakstu. Hover
   izskatās tāpat kā veidnes .card-interactive. */
.stat-link {
    color: inherit;
    text-decoration: none;
}

.stat-link:hover {
    border-color: var(--bs-border-color-translucent);
    background-color: var(--surface-hover);
}

/* Ja vērtība nav zināma, kartīte vairs nav klikšķināma */
.stat-link-disabled {
    pointer-events: none;
}

/* Veidnes .stats-icon ir vienkrāsaina gan gaišajā, gan tumšajā tēmā
   (tumšajā tēmā veidnes CSS to ar !important krāso pelēku), tāpēc ikonas
   krāsa netiek mainīta — nozīmi rāda pats skaitlis (skatīt index.html JS). */

/* ---------- Notikumu žurnāls ---------- */

/* Bootstrap 5.3 definē --bs-orange, bet gatavas .text-bg-orange klases nav */
.text-bg-orange {
    color: #fff;
    background-color: var(--bs-orange);
}

/* ---------- Ierīču saraksts ----------

   Kartītes tiek liktas Bootstrap režģī (row/col), tāpēc šeit ir tikai
   tas, ko pati veidne nenodrošina: klikšķināmība un datu rindas. */

.device-card {
    cursor: pointer;
}

/* Hover izskatās tāpat kā veidnes .card-interactive */
.device-card:hover {
    border-color: var(--bs-border-color-translucent);
    background-color: var(--surface-hover);
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.info-label { color: var(--bs-secondary-color); }
.info-val { font-weight: 600; }

/* Vērtība ar statusa ikonu: tā rāda gan versiju, gan rezerves kopiju stāvokli */
.version-display { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.version-display.yellow { color: var(--bs-warning); }
.version-display.orange { color: var(--bs-orange); }
.version-display.red { color: var(--bs-danger); }

/* Bootstrap 5.3 definē --bs-orange, bet gatavas .text-orange klases nav */
.text-orange { color: var(--bs-orange); }

.uptime-badge { font-weight: 700; color: var(--accent); }

/* ---------- Ierīces detalizētā lapa ---------- */

.table-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }

/* Lietotāju sarakstā klikšķis uz rindas atver lietotāja skatu */
.user-row { cursor: pointer; }

/* ---------- Etiķetes ----------
   Stāvokļu un lomu krāsas tagad dod Bootstrap palīgklases (text-bg-*),
   tāpēc šeit paliek tikai lietotāja birku etiķete. */

.badge.tag { background-color: #3730a3; color: #c7d2fe; }

/* ---------- Profils un iestatījumi ---------- */

.info-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}

.info-list dt {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.info-list dd {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0.2rem 0 0;
    word-break: break-word;
}

/* QR kods vienmēr uz balta fona — citādi tumšajā tēmā to nevar noskenēt */
.qr-box {
    background: #ffffff;
    padding: 0.75rem;
    border-radius: 0.5rem;
    line-height: 0;
    display: inline-block;
}

.secret-code {
    font-family: var(--bs-font-monospace);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    background: var(--bs-tertiary-bg);
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
    word-break: break-all;
}

.code-input {
    max-width: 12rem;
    font-family: var(--bs-font-monospace);
    font-size: 1.3rem;
    letter-spacing: 0.3em;
    text-align: center;
}

/* Gatavā MikroTik uzstādīšanas komanda (viena gara rinda) */
.command-box {
    font-family: var(--bs-font-monospace);
    font-size: 0.78rem;
    line-height: 1.55;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin: 0 0 0.75rem;
    color: var(--bs-body-color);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 16rem;
    overflow: auto;
}

/* ---------- Pieslēgšanās lapa ----------

   Izkārtojums nāk no veidnes (auth-layout, auth-topbar, auth-body,
   auth-heading, nav-tabs), tāpēc savi stili šeit nav vajadzīgi. */

/* Veidne darbvirsmas izmēros sadala lapu DIVĀS kolonnās (otrajā ir veidnes
   reklāmas bloks .auth-aside, kura mums nav), tāpēc atstājam vienu kolonnu -
   citādi pieslēgšanās forma izskatās nobīdīta pa kreisi. */
@media (min-width: 992px) {
    .auth-layout {
        grid-template-columns: 1fr;
    }
}

/* ---------- Rezerves kopiju salīdzinājums ----------

   Diffs tiek rādīts kā GitHub: divas rindu numuru kolonnas, zīme un rinda. */

/* Rinda ar .rsc kopiju ir klikšķināma - tā atver salīdzināšanas logu */
.backup-row-diff {
    cursor: pointer;
}

.diff-view {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--surface-sunken);
    font-family: var(--bs-font-monospace);
    font-size: 0.8125rem;
    overflow-x: auto;
}

.diff-line {
    display: flex;
    align-items: flex-start;
    min-height: 1.4rem;
    line-height: 1.4rem;
    white-space: pre;
}

.diff-num {
    flex: 0 0 4rem;
    padding: 0 0.5rem;
    text-align: right;
    color: var(--bs-secondary-color);
    border-right: 1px solid var(--bs-border-color);
    user-select: none;
}

.diff-sign {
    flex: 0 0 1.5rem;
    text-align: center;
    color: var(--bs-secondary-color);
    user-select: none;
}

.diff-text {
    padding-right: 0.75rem;
}

/* Pievienotās un dzēstās rindas - tāpat kā Git diff skatā */
.diff-line-add {
    background-color: rgba(var(--bs-success-rgb), 0.14);
}

.diff-line-del {
    background-color: rgba(var(--bs-danger-rgb), 0.14);
}

.diff-line-add .diff-sign {
    color: var(--bs-success);
    font-weight: 700;
}

.diff-line-del .diff-sign {
    color: var(--bs-danger);
    font-weight: 700;
}

/* Izmaiņu grupas galvene (@@ ... @@) */
.diff-line-hunk {
    background-color: var(--surface-hover);
    color: var(--bs-secondary-color);
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.diff-line-hunk .diff-text {
    padding-left: 0.5rem;
}

/* ---------- Palīgklase ----------
   JS to lieto, lai paslēptu/parādītu sadaļas. */

.hidden { display: none !important; }