/*
 * Flowbite foundation layer
 *
 * This file is intentionally small and namespaced. Existing portal styles can
 * continue to render during migration, while shared controls receive one
 * predictable responsive contract.
 */
:root {
  --ui-focus: 0 0 0 3px rgba(37, 99, 235, .24);
  --ui-control-height: 2.75rem;
  --ui-radius: .5rem;
}

.btn,
.form-input,
.form-select,
.form-textarea,
.form-checkbox,
.form-radio {
  box-sizing: border-box;
}

.btn {
  min-height: var(--ui-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: var(--ui-radius);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn { border-radius: var(--ui-radius) !important; }

.btn:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.app-sidebar-link:focus-visible,
.portal-bottom-nav__item:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus);
}

.btn-primary { background: #2563eb; color: #fff; border: 1px solid #2563eb; }
.btn-primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }
.btn-secondary { background: #fff; color: #1e293b; border: 1px solid #cbd5e1; }
.btn-secondary:hover:not(:disabled) { background: #f8fafc; border-color: #94a3b8; }
.btn-danger { background: #dc2626; color: #fff; border: 1px solid #dc2626; }
.btn-danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }
.btn-success { background: #16a34a; color: #fff; border: 1px solid #16a34a; }
.btn-success:hover:not(:disabled) { background: #15803d; border-color: #15803d; }
.btn-ghost { background: transparent; color: #475569; border: 1px solid transparent; }
.btn-ghost:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; }
.btn-link { background: transparent; color: #2563eb; border: 0; padding-inline: 0; }
.btn-outline { background: transparent; color: #2563eb; border: 1px solid #93c5fd; }
.btn-outline:hover:not(:disabled) { background: #eff6ff; }
.btn:disabled { cursor: not-allowed; opacity: .55; }
.btn-sm { min-height: 2.25rem; padding: .5rem .75rem; font-size: .8125rem; }
.btn-lg { min-height: 3rem; padding: .75rem 1.25rem; }
.btn-icon { width: var(--ui-control-height); min-width: var(--ui-control-height); padding: 0; }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: var(--ui-radius);
  background: #fff;
  color: #0f172a;
  font-size: .875rem;
  line-height: 1.25rem;
}
.form-input,
.form-select,
.form-textarea,
.form-file { border-radius: var(--ui-radius) !important; }
.form-input, .form-select { min-height: var(--ui-control-height); padding: .625rem .75rem; }
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1rem;
  padding-right: 2.5rem !important;
}
.list-search-field__input { padding-left: 2.75rem !important; }
.list-search-field__icon { left: .75rem; z-index: 1; }
.form-textarea { min-height: 6rem; padding: .625rem .75rem; }
.form-input::placeholder, .form-textarea::placeholder { color: #94a3b8; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #3b82f6; box-shadow: var(--ui-focus); outline: none; }
.form-input.error, .form-select.error, .form-textarea.error { border-color: #ef4444; }
.form-label { display: block; margin-bottom: .375rem; color: #334155; font-size: .8125rem; font-weight: 600; line-height: 1.25rem; }
.form-help { margin-top: .375rem; color: #64748b; font-size: .75rem; line-height: 1rem; }
.form-error { margin-top: .375rem; color: #dc2626; font-size: .75rem; line-height: 1rem; }
.field-group { min-width: 0; }
.field-group--search > .form-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form-file { min-height: var(--ui-control-height); padding: .6rem .75rem; }
.form-file--brand { cursor: pointer; border: 1px solid #bfd4f4; background: #f4f8ff; color: #38557f; box-shadow: 0 1px 2px rgba(15, 23, 42, .03); }
.form-file--brand:hover { border-color: #80aef4; background: #eef5ff; }
.form-file--brand:focus { border-color: #1764e8; outline: 0; box-shadow: 0 0 0 3px rgba(23, 100, 232, .14); }
.form-file--brand::file-selector-button { margin: -.6rem .75rem -.6rem -.75rem; padding: .6rem .85rem; border: 0; border-right: 1px solid #bfd4f4; border-radius: var(--ui-radius) 0 0 var(--ui-radius); background: #e5f0ff; color: #0754cf; font-weight: 700; cursor: pointer; }
.form-file--brand:hover::file-selector-button { background: #d9eaff; }

.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; border-top: 1px solid #e2e8f0; padding-top: 1rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border-radius: 9999px;
  padding: .25rem .625rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1rem;
  white-space: nowrap;
}
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-info { background: #dbeafe; color: #1e40af; }
.badge-neutral { background: #f1f5f9; color: #475569; }

.card,
.app-card,
.app-panel,
.lux-card {
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card-header { padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; }
.card-body { min-width: 0; padding: 1rem 1.25rem; }
.card-footer { padding: 1rem 1.25rem; border-top: 1px solid #e2e8f0; }
.empty-state-card { width: 100%; min-width: 0; padding: 2rem 1rem; text-align: center; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-width: 0;
  border: 1px solid;
  border-radius: .75rem;
  padding: .875rem 1rem;
}
.alert-content { min-width: 0; flex: 1 1 auto; }
.alert-title, .alert-message { overflow-wrap: anywhere; }
.alert-icon { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; }
.alert-icon svg { width: 100%; height: 100%; }
.alert-success { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.alert-warning { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.alert-danger { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.alert-info { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }

.app-sidebar--mobile-open,
.app-sidebar-shell.app-sidebar--mobile-open { transform: translateX(0); }
.app-sidebar-shell { transform: translateX(-100%); }
.portal-bottom-nav { display: none !important; }
@media (min-width: 1024px) { .app-sidebar-shell { transform: translateX(0); } }
@media (max-width: 1023px) {
  .portal-bottom-nav { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; inset-inline: 0; bottom: 0; z-index: 35; min-height: 4.25rem; gap: .25rem; padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom)); border-top: 1px solid #e2e8f0; background: rgba(255,255,255,.96); box-shadow: 0 -8px 24px rgba(15,23,42,.08); backdrop-filter: blur(16px); }
  .portal-bottom-nav__item { min-width: 0; min-height: 3.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; border: 0; border-radius: .75rem; color: #64748b; background: transparent; cursor: pointer; font: inherit; font-size: .6875rem; font-weight: 600; line-height: 1.1; text-align: center; text-decoration: none; }
  .portal-bottom-nav__item.is-active { color: #1d4ed8; background: #eff6ff; }
  .portal-bottom-nav__item span:last-child { max-width: 5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .portal-bottom-nav__icon { position: relative; display: inline-flex; }
  .portal-bottom-nav__icon svg { width: 1.2rem; height: 1.2rem; stroke-width: 1.8; }
  .portal-bottom-nav__badge { position: absolute; top: -.45rem; right: -.7rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: 999px; background: #dc2626; color: #fff; font-size: .62rem; line-height: 1.05rem; text-align: center; }
  .portal-bottom-nav__dot { position: absolute; top: -.25rem; right: -.3rem; width: .55rem; height: .55rem; border: 2px solid #fff; border-radius: 999px; background: #f97316; }
}
html.dark .portal-bottom-nav { border-color: #374151; background: rgba(17,24,39,.96); }
html.dark .portal-bottom-nav__item { color: #94a3b8; }
html.dark .portal-bottom-nav__item.is-active { color: #93c5fd; background: rgba(30,64,175,.25); }
html.dark .portal-bottom-nav__dot { border-color: #0f172a; }

html.dark .btn-secondary { background: #1f2937; color: #f8fafc; border-color: #475569; }
html.dark .btn-ghost { color: #cbd5e1; }
html.dark .btn-ghost:hover:not(:disabled) { background: #374151; color: #fff; }
html.dark .form-input, html.dark .form-select, html.dark .form-textarea { border-color: #475569; background: #1f2937; color: #f8fafc; }
html.dark .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); }
html.dark .form-file { border-color: #475569; background: #374151; color: #cbd5e1; }
html.dark .form-actions { border-color: #374151; }
html.dark .form-label { color: #cbd5e1; }
html.dark .form-help { color: #94a3b8; }
html.dark .card, html.dark .app-card, html.dark .app-panel, html.dark .lux-card { border-color: #374151; background: #1f2937; }
html.dark .card-header, html.dark .card-footer { border-color: #374151; }
html.dark .badge-neutral { background: #374151; color: #cbd5e1; }
html.dark .badge-success { background: rgba(22, 101, 52, .35); color: #bbf7d0; }
html.dark .badge-warning { background: rgba(146, 64, 14, .35); color: #fde68a; }
html.dark .badge-danger { background: rgba(153, 27, 27, .35); color: #fecaca; }
html.dark .badge-info { background: rgba(30, 64, 175, .35); color: #bfdbfe; }

@media (max-width: 639px) {
  .btn:not(.btn-sm) { min-height: 2.75rem; }
  .card-header, .card-body, .card-footer { padding: .875rem 1rem; }
  .alert { padding: .75rem; }
  .form-actions--sticky-mobile { position: sticky; bottom: 0; z-index: 20; margin-inline: -1rem; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, #fff 94%, transparent); backdrop-filter: blur(12px); }
  html.dark .form-actions--sticky-mobile { background: color-mix(in srgb, #111827 94%, transparent); }
  .form-actions--sticky-mobile > * { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .app-sidebar-shell { transition: none; }
}