/* TraLa Application Styles */

body {
    font-family: 'Roboto', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.logo-font {
    font-family: 'Roboto Slab', serif;
}

#api-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #f59e0b;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    z-index: 9999;
    opacity: 0;
}

#api-loading-bar.loading {
    transform: scaleX(1);
    opacity: 1;
}

#refresh-progress-bar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: rgba(107, 114, 128, 0.2);
    z-index: 9998;
}

#refresh-progress-bar {
    width: 0%;
    height: 100%;
    background-color: #3b82f6;
    transition: width linear;
}

.fallback-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.5rem;
    color: white;
}

#service-grid > a {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.sort-btn {
    transition: background-color 0.2s, color 0.2s;
}

.sort-btn.active {
    background-color: #3b82f6;
    color: white;
}

.search-icon-greyscale {
    filter: grayscale(100%);
}

/* Homelab portal theme. Keep upstream behaviour; hide optional launcher controls. */
:root { color-scheme: dark; --portal-bg:#0b1220; --portal-tile:#151f32; --portal-line:#26334a; --portal-ink:#eef4ff; --portal-muted:#91a1ba; --portal-accent:#6dd6ed; }
html, body { min-height:100%; background:var(--portal-bg) !important; color:var(--portal-ink) !important; }
body { margin:0; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif !important; background:radial-gradient(ellipse at 12% 0%,#172b43 0,transparent 55%),var(--portal-bg) !important; }
body > div.absolute { display:none !important; }
body > .container { width:min(1180px,100%) !important; max-width:1180px !important; margin:0 auto !important; padding:40px 32px 64px !important; }
body > .container > header { display:none !important; }
#greeting, #clock, #search-form, #sort-controls, #group-controls { display:none !important; }
body > .container > div:has(> #search-form) { display:none !important; }
#service-grid.grid, #service-grid .group-content { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important; gap:20px !important; }
#service-grid a { display:block; min-width:0; padding:30px 20px 24px !important; border:1px solid var(--portal-line); border-radius:20px !important; background:linear-gradient(145deg,#1a273b,#131c2c) !important; box-shadow:0 8px 24px #00000018 !important; color:var(--portal-ink); text-decoration:none; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease !important; }
#service-grid a:hover { transform:translateY(-4px); border-color:#4c8ba6; box-shadow:0 14px 30px #00000030 !important; }
#service-grid a:focus-visible { outline:3px solid var(--portal-accent); outline-offset:5px; }
#service-grid a > div > div:first-child { width:68px !important; height:68px !important; margin:0 auto 22px !important; border-radius:18px !important; }
#service-grid a p.font-semibold { font-size:16px; font-weight:650; letter-spacing:.1px; color:var(--portal-ink); }
#service-grid a p.text-xs { margin-top:9px; font-size:11px; color:var(--portal-muted) !important; }
#service-grid .fallback-icon { border-radius:18px; font-weight:650; font-size:26px; }
#service-grid h2 { font-size:14px; color:var(--portal-muted); border-color:var(--portal-line) !important; }
#refresh-progress-bar-container { display:none !important; }
#api-loading-bar { background:var(--portal-accent) !important; }
footer { position:static !important; justify-content:center; padding:20px !important; opacity:.55; }
footer a { color:var(--portal-muted) !important; }
#error-page { color:var(--portal-ink); }
#error-message { color:var(--portal-muted) !important; }
@media (max-width:600px) {
  body > .container { padding:24px 20px 48px !important; }
  #service-grid.grid, #service-grid .group-content { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  #service-grid a { padding:24px 12px 20px !important; border-radius:16px !important; }
  #service-grid a p.font-semibold { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { #service-grid a { transition:none !important; } #service-grid a:hover { transform:none; } }