/* app.css — suche-specific overrides.
   Shared theme/reset/layout/components come from web/css/shared/.
   Load order (set in inc/layout.php):
     theme.css → reset.css → layout.css → components.css → app.css
*/

/* Body reserves room for fixed header + fixed footer per design rules §12/§13.
   The two custom properties are declared on :root in shared layout.css. */
body {
  padding-top:    var(--app-header-height);
  padding-bottom: var(--app-footer-height);
}

/* Three-column footer per design rule §13 (overrides shared centered default). */
.app-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-items: stretch;
  align-items: center;
}
.app-footer > :nth-child(1) { justify-self: start; }
.app-footer > :nth-child(2) { justify-self: center; }
.app-footer > :nth-child(3) { justify-self: end;   }

/* ── Shared column width for the three main blocks ───────────────────────── */

:root { --suche-col: min(92vw, 1024px); }

/* ── Search form row ──────────────────────────────────────────────────────── */

.search-forms {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  margin: 1rem auto;
  max-width: var(--suche-col);
  padding-inline: 1rem;
}
.search-form {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
/* All controls share the same height so input/select/button line up. */
.search-form .form-control,
.search-form .form-select,
.search-form .btn {
  height: 2.5rem;
  box-sizing: border-box;
}
/* Fix Safari's non-standard search-input box. */
.search-form input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}
.search-form .search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  flex: 0 0 auto;
  color: var(--color-muted);
}
.search-form .form-control {
  flex: 1 1 auto;
  min-width: 0;
}
.search-form .form-select {
  flex: 0 0 auto;
  width: auto;
  max-width: 10rem;
}
.search-form .btn {
  flex: 0 0 auto;
  min-width: 6.5rem;
}

/* ── Button grid (caged to match search column) ──────────────────────────── */

.button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: var(--suche-col);
  margin: 1rem auto;
  padding-inline: 1rem;
}
.button-grid .btn,
.btn-preview-cell .btn {
  width: 12rem;
  height: 2.5rem;              /* matches search-row controls */
  padding-inline: 0.75rem;
  display: inline-flex;        /* flex centers vertically cleanly */
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  overflow: hidden;            /* clip the ellipsized caption span */
}
.button-grid .btn .btn-label,
.btn-preview-cell .btn .btn-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;                /* let the flex child actually shrink */
}
.btn-preview-cell .btn {
  pointer-events: none;        /* preview, not a real link */
}

/* .btn-default isn't defined in shared/components.css, so the base .btn
   transparent background leaves it visually floating. Give it a grey
   outline so it reads as a button against both light and dark page bg. */
.btn.btn-default {
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn.btn-default:hover {
  background: var(--color-surface-alt);
}

/* ── RSS tabs (caged to match search column) ─────────────────────────────── */

.rss-section { max-width: var(--suche-col); margin: 1rem auto; padding-inline: 1rem; }
.rss-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.rss-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rss-card img { width: 100%; height: auto; display: block; }
.rss-card .rss-body { padding: 0.75rem; font-size: 0.9rem; }
.rss-card .rss-body h3 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}
.rss-card .rss-body h3 a { color: var(--color-text); text-decoration: none; }
.rss-card .rss-body h3 a:hover { text-decoration: underline; }

/* ── Modal visibility (shared components.css uses .modal.show; we toggle .open) */
.modal { z-index: 200; padding: 2rem; }
.modal.open { display: block; }
.modal-dialog { max-width: 560px; margin: 2rem auto; }

/* ── Login page ────────────────────────────────────────────────────────────── */

.login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 60px);
    padding: 2rem;
}
.login-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 360px;
}
.login-card h2 {
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.1rem;
}
.login-card .form-group { margin-bottom: 1rem; }
.login-card .form-group label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: 0.35rem;
}
.login-card .form-group input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 0.95rem;
}
.login-card .form-group input:focus {
    outline: none;
    border-color: var(--color-accent);
}
.btn-login {
    width: 100%;
    padding: 0.65rem;
    background: var(--color-accent);
    color: var(--color-on-accent);
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    margin-top: 0.5rem;
}
.btn-login:hover { opacity: 0.9; }

/* ── Icon picker (Bild dropdown in button modal) ─────────────────────────── */

.icon-picker { position: relative; }

.icon-picker-trigger {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .375rem .75rem;
  color: var(--color-text);
  cursor: pointer;
  font-size: inherit;
}
.icon-picker-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.icon-picker-trigger > .icon-picker-chevron { margin-left: auto; color: var(--color-muted); }

.icon-picker-preview {
  width: 1.2em; height: 1.2em; flex-shrink: 0; display: block;
}
.icon-picker-preview img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

.icon-picker-list {
  position: absolute; bottom: calc(100% + 2px); top: auto; left: 0; right: 0; z-index: 300;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  max-height: 220px; overflow-y: auto;
  box-shadow: 0 -4px 12px rgba(0,0,0,.15);
}

.icon-picker-opt {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .75rem; cursor: pointer;
  color: var(--color-text); font-size: .9rem;
}
.icon-picker-opt:hover { background: var(--color-surface-alt); }
.icon-picker-opt[aria-selected="true"] {
  background: var(--color-surface-alt);
  font-weight: 500;
}

.icon-picker-thumb {
  width: 1.2em; height: 1.2em; object-fit: contain; flex-shrink: 0; display: block;
}
.icon-picker-thumb-gap { width: 1.2em; height: 1.2em; flex-shrink: 0; display: block; }

/* ── TOTP code input and 2FA card helpers ──────────────────────────────────── */

.totp-code-input {
    width: 100%;
    padding: .75rem 1rem;
    font-size: 1.4rem;
    text-align: center;
    letter-spacing: .25em;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
}
.totp-code-input:focus {
    outline: none;
    border-color: var(--color-accent);
}