/* ---------------------------------------------------------------
   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);
}

/* Pieejamības punkts kartītes labajā augšējā stūrī (devices.html).
   Teksta etiķetes ("Tiešsaistē", "Bezsaistē", "Nav monitora") vietā ir
   krāsains punkts, jo sarakstā pārskats ir svarīgāks par uzrakstu:
   zaļš pulsējošs - ierīce tiešsaistē, sarkans pulsējošs - bezsaistē,
   pelēks (bez pulsācijas) - ierīcei nav Uptime Kuma monitora, tāpēc
   pieejamības datu nav.

   Pulsācija ir tikai tad, kad statuss tiešām kaut ko nozīmē (ir/ nav
   sasniedzama). Tā ir ::after gredzens, kas aug un izgaist, tāpēc pats
   punkts paliek nemainīga izmēra un nepārklāj blakus esošo tekstu.

   Krāsa vien nav informācija tiem, kas to neredz (ekrāna lasītājs) vai
   neatšķir (daltonisms): tāpēc punktam ir arī title (kursora paskaidrojums)
   un aria-label, ko ieliek renderStatusDot(). */
.status-dot {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background-color: var(--bs-secondary-color);
}

.status-dot.online { background-color: var(--bs-success); }
.status-dot.offline { background-color: var(--bs-danger); }

.status-dot.online::after,
.status-dot.offline::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: inherit;
    animation: status-pulse 1.8s ease-out infinite;
}

@keyframes status-pulse {
    0%   { transform: scale(1);   opacity: 0.65; }
    70%  { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Ja lietotājs ir lūdzis mazāk kustību, pulsācija tiek izslēgta - statuss
   paliek saprotams pēc krāsas. */
@media (prefers-reduced-motion: reduce) {
    .status-dot.online::after,
    .status-dot.offline::after {
        animation: none;
        opacity: 0;
    }
}

.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. */

/* Birkas krāsu nosaka lietotājs, tāpēc tā nāk kā inline stils no tagBadge()
   (assets/app.js). Šī ir rezerve: vecāki ieraksti bez krāsas un gadījums, ja
   migrācija sql/tags_color.sql vēl nav izpildīta. */
.badge.tag { background-color: #3730a3; color: #c7d2fe; }

/* Krāsas aplītis blakus birkas nosaukumam (piemēram, atzīmju sarakstā
   ierīces skatā). */
.tag-dot {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---------- Birkas krāsas izvēle (tags.html) ----------

   Krāsu aplīši modālajā logā. Katrs ir radio poga ar vizuālu apli, tāpēc
   izvēle ir redzama uzreiz, un to var izdarīt arī ar tastatūru.

   Palete (lib/tags.php, TAG_COLORS) ir 20 krāsu, un tās aizpilda tieši
   divas pilnas rindas pa desmit. Tāpēc tas ir režģis, nevis plūstošs
   saraksts: kolonnu skaitu nosaka renderColorPicker() (tags.html) kā pusi no
   paletes krāsu skaits, un 10 šeit ir tikai rezerve, ja skripts vēl nav
   izpildījies.

   Kolonnas platums ir ierobežots (2.25rem) un pati palete ir centrēta, tāpēc
   aplīši izvietojas vienmērīgi: atstarpes pa horizontāli un vertikāli ir
   līdzīgas (2.25rem kolonna ar 2rem apli + 0.5rem atstarpe), un desmit
   kolonnas (10 x 2.25rem + 9 x 0.5rem = 27rem) joprojām saiet modālā loga
   platumā, tāpēc nekas nav jāsamazina.

   Uz šaura ekrāna (telefonā) divas rindas pa desmit neietilpst - tur ir
   piecas kolonnas, tāpēc aplīši paliek ērti uzklikšķināmi (nevis sīki). */

.tag-colors {
    display: grid;
    grid-template-columns: repeat(var(--tag-color-cols, 10), minmax(0, 2.25rem));
    justify-content: center;
    justify-items: center;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .tag-colors {
        grid-template-columns: repeat(5, minmax(0, 2.25rem));
    }
}

.tag-color {
    cursor: pointer;
    margin: 0;
}

/* Radio poga paliek funkcionāla (tastatūra, formas), bet nav redzama -
   tās vietā ir krāsas aplis. */
.tag-color input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tag-color-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    transition: border-color 0.15s ease-in-out;
}

.tag-color-dot i {
    font-size: 0.9rem;
    opacity: 0;
}

.tag-color:hover .tag-color-dot {
    border-color: var(--bs-secondary-color);
}

.tag-color input:checked + .tag-color-dot {
    border-color: var(--bs-body-color);
}

.tag-color input:checked + .tag-color-dot i {
    opacity: 1;
}

.tag-color input:focus-visible + .tag-color-dot {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ---------- Paroles lauki (pieslēgšanās, parole, profils) ----------

   Paroles lauki ar acs pogu un stipruma joslām ir trīs vietās: pieslēgšanās
   un paroles atiestatīšanas lapās (tur izkārtojums nāk no veidnes:
   .auth-layout, .auth-main, .auth-aside, .auth-points u.c.) un profila
   lapas kartītē *Mainīt paroli*. Tāpēc lauku ietvars ir veidnes klase
   .auth-password (tā ir tikai "lauks ar pogu stūrī", bez saites uz
   autorizācijas izkārtojumu), un loģiku zīmē assets/app.js
   (initAuthPasswordFields()).

   Šeit pašiem ir tikai stipruma joslu krāsas - pārējo dod veidne. */

/* Stipruma joslas: aizpildītās joslas iegūst level-N klasi, kur N ir
   novērtējums (1 = vāja ... 4 = stipra). Krāsas ir Bootstrap mainīgie,
   tāpēc tās mainās līdz ar tēmu. Novērtējums ir arī tekstā (aria-live),
   tāpēc tas nav atkarīgs tikai no krāsas. */
.auth-strength span.level-1 { background-color: var(--bs-danger); }
.auth-strength span.level-2 { background-color: var(--bs-warning); }
.auth-strength span.level-3 { background-color: var(--bs-info); }
.auth-strength span.level-4 { background-color: var(--bs-success); }

/* ---------- 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 un paroles atjaunošanas lapa ----------

   Izkārtojums nāk no veidnes (auth-layout, auth-main, auth-aside,
   auth-topbar, auth-body, auth-heading, auth-points, nav-tabs), tāpēc savi
   stili šeit nav vajadzīgi - izņemot paroles stipruma joslu krāsas augstāk.

   Veidne darbvirsmas izmēros sadala lapu DIVĀS kolonnās: formā pa kreisi un
   informatīvajā panelī pa labi (.auth-aside). Panelī ir īss apraksts par to,
   ko panelis dara (vai, paroles lapā, ar ko šī saite strādā) - tā labā puse
   nepaliek tukša, un lapa izskatās līdzsvarota. Uz šaura ekrāna (zem 992px)
   panelis pazūd, un paliek tikai forma - to nosaka pati veidne. */

/* ---------- 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; }