/* === Motywy (jasny/ciemny) === */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;

  --card:#ffffff;
  --border:#dddddd;

  --navbtn-bg:#ffffff;
  --navbtn-text:#111111;

  --table-head:#fafafa;
  --cell-border:#eeeeee;

  --input-bg:#ffffff;
  --input-text:#111111;

  --accent:#b00020;

  --tab-bg:#f5f5f5;

  --banner-err-bg:#ffecec;
  --banner-err-border:#b00020;
  --banner-err-text:#b00020;

  --banner-ok-bg:#eaffef;
  --banner-ok-border:#0a7a2f;
  --banner-ok-text:#0a7a2f;
}

html[data-theme="dark"]{
  --bg:#0f1115;
  --text:#e9eef5;
  --muted:#a7b0bd;

  --card:#151923;
  --border:#2a3240;

  --navbtn-bg:#151923;
  --navbtn-text:#e9eef5;

  --table-head:#1b2230;
  --cell-border:#2a3240;

  --input-bg:#0f1115;
  --input-text:#e9eef5;

  --accent:#ed1c24;

  --tab-bg:#1b2230;

  --banner-err-bg:#2b1517;
  --banner-err-border:#b24b57;
  --banner-err-text:#ffb7c0;

  --banner-ok-bg:#142319;
  --banner-ok-border:#2c6a3d;
  --banner-ok-text:#b8ffd0;
}

@font-face {
    font-family: 'Gotham';
    src: url('/static/fonts/GothamRounded-Book.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Gotham';
    src: url('/static/fonts/GothamRounded-Bold.ttf') format('truetype');
    font-weight: 700;
}

/* === Global === */
body{
  font-family: 'Gotham', Arial, sans-serif;
  margin: 24px;
  background: var(--bg);
  color: var(--text);
}

.muted{
  color: var(--muted);
  font-size: 13px;
}

/* Linki jak zwykły tekst (globalnie) */
a{
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a:hover{
  text-decoration: underline;
  opacity: 0.85;
}

/* === Header / Nawigacja === */
.top{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 18px;
  margin-left: 20px;
  margin-bottom: 50px;
  margin-top: -40px;
}

.top-inner {
    display: flex;
    align-items: center;
    align-items: flex-end;
    gap: 20px;          /* odstęp między logo a tekstem */
    margin-left: 25px;
}

.top-login{
  display:flex;
  justify-content: center;
  align-items:flex-start;
  gap: 18px;
  margin-left: 20px;
  margin-bottom: 20px;
}

.top-inner-login {
    display: flex;
    justify-content: center;
    align-items: center;
}

.version {
    font-size: 10px;
    opacity: 0.7;
    margin-top: 4px;
}

.nav{
  margin-top: 4px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* ===== NAVBTN: gradient + kolory per zakładka + 50% wysokości ===== */
.navbtn{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:10px;

  text-decoration:none;
  color: var(--navbtn-text);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;

  /* brak zaznaczania tekstu */
  -webkit-user-select: none;
  user-select: none;

  /* fallback */
  --tab-accent: var(--accent, #b00020);
}

/* nie podkreślaj / nie zmieniaj opacity na hover dla nav */
.nav .navbtn:hover{
  text-decoration:none;
  opacity: 1;
}

/* bazowe tło przycisku */
.navbtn::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--navbtn-bg);
  z-index:-2;
}

/* === NAV: kolory daltonisto-friendly (Okabe–Ito) === */
.navbtn.nav-home{ --tab-accent:#56B4E9; }      /* SKY BLUE */
.navbtn.nav-assets{ --tab-accent:#009E73; }    /* BLUISH GREEN */
.navbtn.nav-locations{ --tab-accent:#E69F00; } /* ORANGE */
.navbtn.nav-service{ --tab-accent:#D55E00; }   /* VERMILLION */
.navbtn.nav-tasks{ --tab-accent:#CC79A7; }     /* PURPLE */
.navbtn.nav-reports{ --tab-accent:#0072B2; }   /* BLUE (ciemniejszy dla kontrastu) */
.navbtn.nav-admin{ --tab-accent:#6A6A6A; }     /* GREY */
.navbtn.nav-changelog{ --tab-accent:#F0E442; } /* YELLOW (czytelny jako akcent) */
.navbtn.nav-acc{ --tab-accent:#9acc79; } /* Akcesoria */
.navbtn.nav-parts{ --tab-accent:#ac247e; } /* Części */
/* akcje */
.navbtn.nav-logout{ --tab-accent:#D55E00; }    /* VERMILLION */
.navbtn.nav-theme{ --tab-accent:#6A6A6A; }     /* GREY */
.navbtn.navdrop-btn{ --tab-accent:#6A1B9A; } /* albo inny */


/* ===== Dropdown w nawigacji ===== */
.navdrop{
  position: relative;
  display: inline-block;
}

/* menu schowane */
.navdrop-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;                 /* u Ciebie nav jest do prawej */
  min-width: 220px;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index: 999;
}

/* pokaż po najechaniu */
.navdrop:hover .navdrop-menu{
  display: flex;
}

/* żeby po najechaniu dropdown się nie zamykał "po drodze" */
.navdrop-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:10px;
}

/* opcjonalnie: w dropdownie nie chcemy 50% gradientu na całej liście? (możesz zostawić) */
.navdrop-menu .navbtn{
  width: 100%;
}



/* wypełnienie od dołu (bez color-mix, działa wszędzie) */
.navbtn::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:0%;
  z-index:-1;
  transition: height 0.25s ease;

  background: linear-gradient(to top, var(--tab-accent) 0%, transparent 100%);
  opacity: 0.55;
}

/* hover i active: do połowy */
.navbtn:hover::before,
.navbtn.active::before{
  height:50%;
}

/* === Kolor tekstu zależny od motywu === */

/* jasny motyw – tekst zostaje ciemny */
html:not([data-theme="dark"]) .navbtn:hover,
html:not([data-theme="dark"]) .navbtn.active{
  color: var(--navbtn-text);
}

/* ciemny motyw – tekst biały */
html[data-theme="dark"] .navbtn:hover,
html[data-theme="dark"] .navbtn.active{
  color: #ffffff;
}


/* === Banner === */
.banner{
  margin:10px 0;
  padding:10px;
  border-radius:6px;
  border:1px solid;
}
.banner.err{
  border-color: var(--banner-err-border);
  background: var(--banner-err-bg);
  color: var(--banner-err-text);
}
.banner.ok{
  border-color: var(--banner-ok-border);
  background: var(--banner-ok-bg);
  color: var(--banner-ok-text);
}

/* === Layout cards/rows === */
.row{
  display:flex;
  gap:18px;
  flex-wrap: wrap;
  align-items:flex-start;
}
.row-top{
  display:flex;
  gap:18px;
  width:100%;
  align-items:flex-start;
}

.card{
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  background: var(--card);
  min-width: 320px;
}
.card.full{ width:100%; }

.card.ops{ flex: 2 1 auto; padding-left: 25px }
.card.issue{ flex: 1 1 360px; }

/* === Formularze === */
input, select{
  padding: 8px;
  margin: 6px 0;
  width: 100%;
  box-sizing:border-box;
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border);
  border-radius: 8px;
}

button{
  padding:8px 12px;
  margin-top: 8px;
  cursor:pointer;
  margin-right: 12px;
}

/* === Tabele === */
table{
  border-collapse: collapse;
  width: 100%;
  margin-top: 12px;
}
th, td{
  border:1px solid var(--cell-border);
  padding: 8px;
  text-align:left;
  vertical-align:top;
}
th{ background: var(--table-head); }

/* ===== STATUSY – JEDNOLITY WYGLĄD ===== */
.pill{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 0;
  border: 1px solid;
  white-space: nowrap;
}
.pill.status-do { background: #fff7e6; border-color: #f1d39a; color: #8a5a00; } /* DO_SERWISU */
.pill.status-wt { background: #e9f2ff; border-color: #b6d2ff; color: #0b4db3; } /* W_TRAKCIE_SERWISU */
.pill.status-po { background: #e9fff0; border-color: #a7e0b7; color: #0a6b2d; } /* PO_SERWISIE */
.pill.status-wy { background: #f1f1f1; border-color: #d5d5d5; color: #555; }     /* WYDANE_NA_MAGAZYN */
.pill.status-kw { background: #ffecec; border-color: #d32f2f; color: #b00020; font-weight: 600; } /* KWARANTANNA */
.pill.status-ws { background: #fff3e0; border-color: #ffcc80; color: #a14b00; font-weight: 600; } /* WSTRZYMANE */

/* === Zakładki / taby wewnątrz stron === */
.tabs{ margin-top:10px; }
.tab-buttons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:25px;
}
.tab-btn{
  border: 1px solid var(--border);
  background: var(--tab-bg);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
  color: var(--text);
}
.tab-btn.active{
  background: var(--card);
  border-color: var(--text);
  font-weight:600;
}
.tab-panel{ display:none; margin-top:10px; }
.tab-panel.active{ display:block; }

.cols{ display:flex; gap:18px; flex-wrap:wrap; }
.col{ flex: 1 1 520px; }

@media (max-width: 980px){
  .row-top{ flex-direction: column; }
  .card.ops, .card.issue{ flex: 1 1 auto; }
}

/* === Logo / nagłówek === */
.app-header{
  padding: 12px 18px;
  display: flex;
  align-items: flex-start;
}
.app-logo{
  max-width: 180px;   /* ≈ 45 mm */
  max-height: auto;   /* ≈ 18 mm */
  width: auto;
  height: auto;
  object-fit: contain;
}

.logo-wrap {
    display: flex;
    align-items: center;
    gap: 14px;     /* odstęp między logotypami */
    text-decoration: none;
}

.app-logo-small {
    height: 28px;
    opacity: 0.9;
    margin-left: -45px;
    margin-top: 200px;
}

.app-logo-small-login {
    height: 28px;
    opacity: 0.9;
    margin-left: -35px;
    margin-top: 200px;
}

/* === Tooltip checklist === */
.chk-label{
  cursor: help;
}
.tooltip{
  position: fixed;
  max-width: 320px;
  padding: 8px 10px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  z-index: 9999;
  display: none;
  pointer-events: none;
}
/* === Tab box (kolorowe tło pod elementem) === */
.tab-box{
  position: relative;
  border-radius: 12px;
  padding: 16px;
  z-index: 0;
}

/* 1) kolorowy box POD spodem */
.tab-box::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--tab-accent, #424242);
  z-index: -2;
  transform: translateX(-10px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

/* 2) górny box (jasny/ciemny) NAD kolorem, ale POD treścią */
.tab-box::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  z-index: -1;
}

/* treść zawsze na wierzchu */
.tab-box > *{
  position: relative;
  z-index: 1;
}

/* warstwy koloru (jak miałeś) */
.layer-return     { --tab-accent:#E69F00; } /* ORANGE */
.layer-start      { --tab-accent:#56B4E9; } /* SKY BLUE */
.layer-finish     { --tab-accent:#009E73; } /* BLUISH GREEN */
.layer-quarantine { --tab-accent:#D55E00; } /* VERMILLION */
.layer-edit       { --tab-accent:#6A6A6A; } /* NEUTRAL GREY */
.layer-receive    { --tab-accent:#9acc79; } /* PURPLE */
.layer-zasoby     { --tab-accent:#ac247e; } /* PINK */
.layer-locations  { --tab-accent:#0072B2; } /* BLUE */
.layer-requirements { --tab-accent:#6A1B9A; } /* DARK PURPLE */


/* =========================
   DASHBOARD IT (KPI/ALERTY)
   ========================= */
.dash-grid{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.dash-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.dash-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap:12px;
  margin-top:12px;
}

@media (max-width: 980px){
  .kpi-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 620px){
  .kpi-grid{ grid-template-columns: 1fr; }
}

.kpi{
  display:block;
  text-decoration:none;
  color: var(--text);
  border:1px solid var(--border);
  background: var(--card);
  border-radius:12px;
  padding:12px;
  transition: transform .08s ease, border-color .08s ease;
}
.kpi:hover{
  transform: translateY(-1px);
  border-color: var(--text);
}

.kpi-ghost{ cursor: default; }

.kpi-title{ font-size: 12px; letter-spacing: .2px; opacity:.9; }
.kpi-value{ font-size: 28px; font-weight: 700; margin-top: 4px; }
.kpi-sub{ font-size: 12px; margin-top: 6px; }

.kpi-warn{ border-left: 4px solid #ffcc80; }
.kpi-danger{ border-left: 4px solid var(--accent); }
.kpi-good{ border-left: 4px solid #6A6A6A; }
.kpi-service{ border-left: 4px solid #E69F00; }
.kpi-done{ border-left: 4px solid #009E73; }
.kpi-start{ border-left: 4px solid #56B4E9; }

.dash-2col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}
@media (max-width: 980px){
  .dash-2col{ grid-template-columns: 1fr; }
}

.tbl{ margin-top: 0; }

.alert-box{
  display:block;
  text-decoration:none;
  color: var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background: var(--card);
}
.alert-box.warn{ border-left: 4px solid #ffcc80; }
.alert-box.danger{ border-left: 4px solid var(--accent); }
.alert-box:hover{ border-color: var(--text); }

/* szybkie "OK" pille (używane w dashboardzie) */
.pill.ok{ background: var(--banner-ok-bg); border-color: var(--banner-ok-border); color: var(--banner-ok-text); font-weight:600; }
.pill.warn{ background: #fff3e0; border-color: #ffcc80; color: #a14b00; font-weight:600; }
.pill.err{ background: var(--banner-err-bg); border-color: var(--banner-err-border); color: var(--banner-err-text); font-weight:600; }


/* =========================================
   BUTTON tab-box: zrób z ::before tylko WĄSKI PASEK
   ========================================= */

/* upewniamy się, że button ma kontekst dla pseudo-elementów */
button.tab-btn.tab-box{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 8px 12px; /* tab-btn, a nie 16px z tab-box */
}

/* Pasek: tylko po lewej, bez przykrywania całej szerokości */
button.tab-btn.tab-box::before{
  content:"";
  position:absolute;
  left:-10px;            /* lekko “wystaje” jak u Ciebie */
  top:0;
  height:100%;
  width:20px;            /* <-- GRUBOŚĆ PASKA (zmień na 10/14) */
  border-radius: 12px;
  background: var(--tab-accent, #424242);
  z-index: 0;            /* nad tłem, pod tekstem */
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  transform: none;       /* wyłącz stare translateX */
}

/* Wyłączamy stare „pełne” tło buttona z ::after (bo chcemy animować background buttona) */
button.tab-btn.tab-box::after{
  content:none !important;
}
/* =========================================
   Animacja: wypełnij tło buttona od lewej do prawej (75%)
   ========================================= */

button.tab-btn.tab-box{
  --fill-w: 0%;
  background:
    linear-gradient(to right, var(--tab-accent) 0%, var(--tab-accent) 100%)
      0 0 / var(--fill-w) 100% no-repeat,
    var(--card);

  transition: background-size 0.25s ease, color 0.25s ease;
}

button.tab-btn.tab-box:hover,
button.tab-btn.tab-box.active{
  --fill-w: 100%;
}

/* Tekst czytelny zależnie od motywu */
html[data-theme="dark"] button.tab-btn.tab-box:hover,
html[data-theme="dark"] button.tab-btn.tab-box.active{
  color:#fff;
}
html:not([data-theme="dark"]) button.tab-btn.tab-box:hover,
html:not([data-theme="dark"]) button.tab-btn.tab-box.active{
  color: var(--text);
}
/* sortowanie tabel: dodaj kursor wskazujący na możliwość sortowania */
th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable::after {
  content: " ↕";
  font-size: 12px;
  color: #999;
}

th.sortable.asc::after {
  content: " ▲";
  color: #b00020;
}

th.sortable.desc::after {
  content: " ▼";
  color: #b00020;
}
thead th.sortable {
  cursor: pointer;
  user-select: none;
}

thead th.sortable::after {
  content: " ↕";
  font-size: 12px;
  opacity: 0.6;
}

thead th.sortable.asc::after {
  content: " ▲";
  opacity: 1;
}

thead th.sortable.desc::after {
  content: " ▼";
  opacity: 1;
}
.ui-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.ui-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

.ui-modal__box{
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 24px));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.ui-modal__header{
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.ui-modal__title{
  font-weight: 700;
}

.ui-modal__body{
  padding: 16px;
}

.ui-modal__footer{
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* input w prompt */
.ui-modal__input{
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--input-text);
  margin-top: 10px;
}


/* === Pills (status badges) === */
.pill{ color: var(--text); border-color: var(--border); background: transparent; }
.pill.ok{ border-color: var(--banner-ok-border); color: var(--banner-ok-text); background: var(--banner-ok-bg); }
.pill.warn{ border-color: #f2b700; color: #8a5a00; background: #fff4cc; }
html[data-theme="dark"] .pill.warn{ border-color: #f2b700; color: #ffd27a; background: rgba(242,183,0,0.15); }
.pill.err{ border-color: var(--banner-err-border); color: var(--banner-err-text); background: var(--banner-err-bg); }

.index-grid{
  display:grid;
  grid-template-columns: 2fr 1fr; /* 2/3 i 1/3 */
  gap:12px;
  align-items:start;
  margin-top:12px;
}

.index-left, .index-right{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Mobile */
@media (max-width: 980px){
  .index-grid{
    grid-template-columns: 1fr;
  }
}
.index-bottom{
  margin-top: 14px;
}

.inline-filters{
  display:flex;
  gap:14px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.filter-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:140px;
}

.filter-field label{
  font-size:12px;
  opacity:.8;
}

.filter-btn{
  min-width:auto;
}

/* mobile */
@media (max-width: 900px){
  .inline-filters{
    flex-direction:column;
    align-items:stretch;
  }
}
.kpi-wide{
  grid-column: span 2;
}

body {
    position: relative;
    min-height: 100vh;
    background-color: var(--bg);
}

/* FULLSCREEN WATERMARK */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("/static/apps-portal-tlo.png") center center no-repeat;
    background-size: cover;     /* 🔥 wypełnia całą stronę */
    opacity: 0.06;              /* delikatność */
    pointer-events: none;
    z-index: 0;
}

/* ====== PORTAL APP TILE ====== */

.app-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 220px;
    position: relative;
    text-decoration: none;
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}

.app-tile img {
    width: 100%;
    height: auto;
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1),
                filter 0.35s ease;
}

/* Hover animation */
.app-tile:hover img {
    transform: scale(1.15);
    filter: drop-shadow(0 0 25px rgba(255,120,0,0.6));
}

/* lekki efekt kliknięcia */
.app-tile:active img {
    transform: scale(1.05);
}

.app-tile {
    width: 260px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.app-tile img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1),
                filter 0.35s ease;
}

/* ===== IT ===== */
.app-tile.it:hover img {
    transform: scale(1.15);
    filter: drop-shadow(0 0 30px rgba(0, 170, 255, 0.8));
}

/* ===== LED ===== */
.app-tile.led:hover img {
    transform: scale(1.15);
    filter: drop-shadow(0 0 30px rgba(255, 80, 0, 0.85));
}

/* ===== MAG ===== */
.app-tile.mag:hover img {
    transform: scale(1.15);
    filter: drop-shadow(0 0 30px rgba(255, 180, 0, 0.85));
}

/* klik */
.app-tile:active img {
    transform: scale(1.05);
}

.theme-btn {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.25s ease;
}

.theme-btn:hover {
    transform: scale(1.05);
}

/* ===== PORTAL HEADER ===== */

.portal-card {
    padding-top: 30px;
    padding-bottom: 40px;
}

.portal-header {
    position: relative;
    display: flex;
    justify-content: center;   /* wyśrodkowanie napisu */
    align-items: center;
    margin-bottom: 30px;
}

.portal-title {
    margin: 0;
    text-align: center;
}

/* przycisk motywu po prawej */
.portal-header .theme-btn {
    position: absolute;
    right: 0;
}

.portal-apps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}
/* ===== PORTAL SIZE FIX ===== */
.portal-apps {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 50px !important;
    flex-wrap: wrap !important;
}

.portal-apps .app-tile {
    width: 240px !important;
    height: 240px !important;
    flex: 0 0 240px !important;
}

.portal-apps .app-tile img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 210px !important;
    max-height: 210px !important;
    object-fit: contain !important;
}