/* IPA Filezone shared visual system.
   Loaded after page styles so every public page uses the same accessible
   action, link, focus, and form states. */
:root {
  --site-primary: #0b5ed7;
  --site-primary-hover: #094cae;
  --site-primary-active: #073b87;
  --site-link: #075bb5;
  --site-link-hover: #06458a;
  --site-success: #198754;
  --site-info: #0f6674;
  --site-danger: #c82333;
  --site-secondary: #5c636a;
  --site-muted: #5f6870;
  --site-border: #7a858f;
  --site-code: #a61e4d;
  --site-focus: #0b5ed7;
}

a { color: var(--site-link); }
a:hover { color: var(--site-link-hover); }
.text-primary { color: var(--site-link) !important; }
a.text-primary:hover,
a.text-primary:focus,
.btn-link.text-primary:hover,
.btn-link.text-primary:focus { color: var(--site-link-hover) !important; }
.text-muted { color: var(--site-muted) !important; }
.bc-item,
.bc-item a,
.site-footer,
.breadcrumb-item.active { color: var(--site-muted); }
code { color: var(--site-code); }

.navbar-toggler {
  border: 1px solid var(--site-border) !important;
  border-radius: .5rem;
  color: #343a40;
}
.navbar-toggler-icon {
  width: 24px;
  height: 18px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-position: center top, center center, center bottom;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}

.btn {
  border-radius: .5rem;
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .15s ease;
}
.btn:hover { text-decoration: none; }
:focus-visible {
  outline: 3px solid var(--site-focus) !important;
  outline-offset: 3px !important;
}
.bootstrap-select .dropdown-toggle:focus-visible {
  outline: 3px solid var(--site-focus) !important;
  outline-offset: 3px !important;
}

/* Filled controls always use white text on a sufficiently dark background. */
.btn-primary,
.btn-primary-custom,
.btn-action.btn-get,
.btn-get,
.btn-view-app {
  background-color: var(--site-primary) !important;
  border-color: var(--site-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary-custom:hover,
.btn-action.btn-get:hover,
.btn-get:hover,
.btn-view-app:hover,
.btn-primary:focus,
.btn-primary-custom:focus,
.btn-action.btn-get:focus,
.btn-get:focus,
.btn-view-app:focus {
  background-color: var(--site-primary-hover) !important;
  border-color: var(--site-primary-hover) !important;
  color: #fff !important;
}
.btn-primary:active,
.btn-primary-custom:active,
.btn-action.btn-get:active,
.btn-get:active,
.btn-view-app:active {
  background-color: var(--site-primary-active) !important;
  border-color: var(--site-primary-active) !important;
  color: #fff !important;
}
.btn-success { background-color: var(--site-success) !important; border-color: var(--site-success) !important; color: #fff !important; }
.btn-info { background-color: var(--site-info) !important; border-color: var(--site-info) !important; color: #fff !important; }
.btn-danger { background-color: var(--site-danger) !important; border-color: var(--site-danger) !important; color: #fff !important; }
.btn-secondary { background-color: var(--site-secondary) !important; border-color: var(--site-secondary) !important; color: #fff !important; }
.btn-success:hover,
.btn-success:focus { background-color: #146c43 !important; border-color: #146c43 !important; color: #fff !important; }
.btn-info:hover,
.btn-info:focus { background-color: #0b5360 !important; border-color: #0b5360 !important; color: #fff !important; }
.btn-danger:hover,
.btn-danger:focus { background-color: #a71d2a !important; border-color: #a71d2a !important; color: #fff !important; }
.btn-secondary:hover,
.btn-secondary:focus { background-color: #484e53 !important; border-color: #484e53 !important; color: #fff !important; }
.btn-warning { color: #212529 !important; }

.btn-outline-primary { color: var(--site-primary) !important; border-color: var(--site-primary); }
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--site-primary) !important;
  border-color: var(--site-primary) !important;
  color: #fff !important;
}
.btn-outline-secondary { color: #495057; border-color: #6c757d; }
.btn-outline-dark { color: #343a40; border-color: #495057; }
.btn-outline-danger { color: var(--site-danger); border-color: var(--site-danger); }
.btn-outline-success { color: #146c43; border-color: var(--site-success); }
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
  background-color: #146c43 !important;
  border-color: #146c43 !important;
  color: #fff !important;
}
.btn-link { color: var(--site-link); }
.btn-link:hover { color: var(--site-link-hover); }

/* Filled badges use the same contrast-safe palette as buttons. */
.badge-primary { background-color: var(--site-primary) !important; color: #fff !important; }
.badge-secondary { background-color: var(--site-secondary) !important; color: #fff !important; }
.badge-success { background-color: var(--site-success) !important; color: #fff !important; }
.badge-info { background-color: var(--site-info) !important; color: #fff !important; }
.badge-danger { background-color: var(--site-danger) !important; color: #fff !important; }
.badge-warning { background-color: #ffc107 !important; color: #212529 !important; }
.badge-light { background-color: #f8f9fa !important; color: #212529 !important; }
.badge-dark { background-color: #343a40 !important; color: #fff !important; }

.form-control,
input,
select,
textarea,
.bootstrap-select .dropdown-toggle,
.dm-toggle,
.chart-tab,
.pagination-wrap a,
.pagination-wrap span,
.dt-input {
  border-color: var(--site-border) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--site-primary);
  box-shadow: 0 0 0 .2rem rgba(11, 94, 215, .16);
}

/* Secondary labels remain readable at the small sizes used on data pages. */
.genre-info .count,
.section-label,
.dev-link .sub,
.metric-updated { color: var(--site-muted); }

.pagination-wrap .disabled { color: var(--site-muted); }
.stars-bg { color: #767676; }
.stars-fill { color: #8a6100; }

/* Keep narrow listing cards and app-analysis labels inside the viewport. */
.app-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
.app-card-header .app-info { min-width: 0; overflow-wrap: anywhere; }
.app-card { min-width: 0; }
.dev-header h1,
.search-header h1,
.chart-title,
.chart-meta,
.chart-card-title { overflow-wrap: anywhere; }
.chart-card-head .min-w-0 { min-width: 0; }
.chart-country-picker { min-width: 0; max-width: 100%; }
.chart-country-picker select { min-width: 0; max-width: 100%; }
.chart-header details nav { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.chart-header details nav a { margin-right: 0 !important; overflow-wrap: anywhere; }
.app-card-header .app-info h3,
.app-card-header .app-info h3 a { overflow-wrap: anywhere; }
.analysis-source-badge {
  display: inline;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.7;
}

/* Custom active chart/pagination controls are filled buttons too. */
.chart-tab.active,
.pagination-wrap .active {
  background-color: var(--site-primary) !important;
  border-color: var(--site-primary) !important;
  color: #fff !important;
}

.chart-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.meta-value-devices {
  max-width: 65% !important;
  word-break: normal !important;
  overflow-wrap: break-word;
}

/* Complete homepage surfaces for both the system theme and manual toggle. */
body.dark-mode main.main-container,
body.dark-mode header.logo-section {
  background: transparent !important;
  border-color: transparent !important;
}
body.dark-mode .logo-section h1 { color: #e8e8e8; }