/* ============================================================================
   custom-fixes.css — overrides & additions for Metronic 9.5.0
   ============================================================================

   WHY THIS FILE EXISTS
   --------------------
   Metronic 9.5.0 ships a *pre-compiled* `styles.css` (Tailwind CSS v4.2.0)
   built from Metronic's own templates. Any utility class used ONLY in the
   game's markup (app.html / gapp.js) and not in those templates is ABSENT
   from the build, so it needs to be declared here.

   RULES (important — prevent cascade bugs)
   ----------------------------------------
   1. Add here ONLY classes that are genuinely MISSING from `styles.css`.
   2. NEVER re-declare a class that already exists in `styles.css`.
      This file is loaded AFTER `styles.css`, and equal-specificity rules
      are resolved by source order — so a redundant `.lg:grid-cols-2` here
      silently overrides the correct `.xl:grid-cols-3` in `styles.css`
      (that is exactly the "3 columns became 2" regression we hit).
   3. Before adding a class, verify it is absent:
          grep -F '.<escaped-selector>' www/www/assets/css/styles.css
      (Tailwind escapes special chars: `:` -> `\:`, `[` -> `\[`, `/` -> `\/`,
       `.` -> `\.`, `%` -> `\%`.)
   4. Keep breakpoints in sync with `styles.css` theme vars:
          sm = 40rem (640px)   md = 48rem (768px)
          lg = 64rem (1024px)  xl = 80rem (1280px)   xxl = 87.5rem (1400px)
   ============================================================================ */


/* --- arbitrary values (not generated in the static build) --- */
.max-w-\[1200px\] { max-width: 1200px; }
.max-w-\[1000px\] { max-width: 1000px; }
.max-w-\[900px\]  { max-width: 900px; }
.h-\[72px\]       { height: 72px; }
.h-\[64px\]       { height: 64px; }
.w-\[72px\]       { width: 72px; }


/* --- responsive variants missing from the static build --- */
@media (width >= 48rem) {
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
@media (width >= 64rem) {
  .lg\:mb-2        { margin-bottom: calc(var(--spacing) * 2); }
  .lg\:mb-1\.5     { margin-bottom: calc(var(--spacing) * 1.5); }
  .lg\:top-\[5\%\] { top: 5%; }
}


/* --- custom utility that disappeared from the new build (27 usages) --- */
.flex-center { display: flex; align-items: center; justify-content: center; }


/* --- xxl breakpoint (custom Metronic, absent from this build) --- */
@media (width >= 87.5rem) {
  .xxl\:bg-center { background-position: center; }
}


/* --- Building card: photo fills the card width at natural aspect ratio --- */
#tplBuildingItem .lvgCardIcon {
    width: 100%;
    height: 200px;
    object-fit: contain;
}
/* AI chanks database overview window */
.lvgChanksOverviewGridList { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lvgChankPosterList { height: 40px; width: 56px; }
.lvgChankDeleteBtn { top: 4px; right: 4px; }


/* Красная отключённая кнопка (нет свободного учёного для исследования) */
.kt-btn.kt-btn-danger {
    background-color: var(--color-red-600);
    color: var(--color-white);
}
.kt-btn.kt-btn-danger:disabled,
.kt-btn.kt-btn-danger[disabled] {
    background-color: var(--color-red-600);
    color: var(--color-white);
    opacity: 0.75;
    cursor: not-allowed;
}

/* Premium (off-hours) raid button — outlined warning look (no .kt-btn-warning in compiled Metronic) */
.kt-btn.kt-btn-outline.kt-btn-warning {
    border-color: var(--color-yellow-500);
    background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
    color: var(--color-yellow-600);
}
.kt-btn.kt-btn-outline.kt-btn-warning i,
.kt-btn.kt-btn-outline.kt-btn-warning svg {
    color: var(--color-yellow-600);
}
.kt-btn.kt-btn-outline.kt-btn-warning:hover,
.kt-btn.kt-btn-outline.kt-btn-warning.active {
    background-color: var(--color-yellow-400);
    border-color: var(--color-yellow-400);
    color: var(--color-white);
}
.kt-btn.kt-btn-outline.kt-btn-warning:hover i,
.kt-btn.kt-btn-outline.kt-btn-warning.active i,
.kt-btn.kt-btn-outline.kt-btn-warning:hover svg,
.kt-btn.kt-btn-outline.kt-btn-warning.active svg {
    color: var(--color-white);
}