/**
 * FAMIMS theme — shared (brand red + components using CSS variables).
 * Load famims-theme-dark.css OR famims-theme-light.css after this file.
 */

:root {
  --famims-red: #e74c3c;
  --famims-red-hover: #d44334;
  --famims-red-soft: rgba(231, 76, 60, 0.12);
  --famims-red-soft-strong: rgba(231, 76, 60, 0.18);
}

/* Override AdminDek primary blue with brand red (icons/CTAs stay red-family) */
[data-pc-preset="preset-1"] {
  --bs-primary: #e74c3c;
  --bs-primary-rgb: 231, 76, 60;
  --pc-sidebar-active-color: #e74c3c !important;
}

/* ---------- Shell surfaces ---------- */
body {
  background-color: var(--famims-page-bg, var(--bs-body-bg)) !important;
  color: var(--famims-text, var(--bs-body-color));
}

.pc-container,
.pc-content {
  background-color: var(--famims-page-bg, var(--bs-body-bg));
}

.card {
  background-color: var(--famims-surface, var(--bs-card-bg)) !important;
  border-color: var(--famims-border, var(--bs-border-color)) !important;
  color: var(--famims-text, inherit);
}

.card .card-header,
.card .card-footer {
  background-color: transparent !important;
  border-color: var(--famims-border, var(--bs-border-color)) !important;
  color: var(--famims-text, inherit);
}

.card .card-title,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.famims-page-title,
.page-header .page-header-title h5 {
  color: var(--famims-text) !important;
}

.text-muted,
.famims-page-breadcrumb a,
small.text-muted {
  color: var(--famims-text-muted) !important;
}

.table {
  --bs-table-color: var(--famims-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--famims-border);
  color: var(--famims-text);
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--famims-border);
  color: inherit;
}

.form-control,
.form-select {
  background-color: var(--famims-surface-2, #fff) !important;
  border-color: var(--famims-border) !important;
  color: var(--famims-text) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--famims-red) !important;
  box-shadow: 0 0 0 0.2rem var(--famims-red-soft) !important;
}

.form-control::placeholder {
  color: var(--famims-text-muted) !important;
  opacity: 0.85;
}

.dropdown-menu {
  background-color: var(--famims-surface) !important;
  border-color: var(--famims-border) !important;
  color: var(--famims-text) !important;
}

.dropdown-menu .dropdown-item {
  color: var(--famims-text) !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: var(--famims-red-soft) !important;
  color: var(--famims-red) !important;
}

.dropdown-divider {
  border-color: var(--famims-border) !important;
}

.modal-content {
  background-color: var(--famims-surface) !important;
  color: var(--famims-text) !important;
  border-color: var(--famims-border) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--famims-border) !important;
}

.list-group-item {
  background-color: var(--famims-surface) !important;
  border-color: var(--famims-border) !important;
  color: var(--famims-text) !important;
}

.page-link {
  background-color: var(--famims-surface) !important;
  border-color: var(--famims-border) !important;
  color: var(--famims-text) !important;
}

.page-item.active .page-link {
  background-color: var(--famims-red) !important;
  border-color: var(--famims-red) !important;
  color: #fff !important;
}

.page-item.disabled .page-link {
  background-color: var(--famims-surface-2) !important;
  color: var(--famims-text-muted) !important;
}

/* ---------- Sidebar ---------- */
.pc-sidebar {
  background: var(--pc-sidebar-background) !important;
  box-shadow: var(--pc-sidebar-shadow) !important;
}

.pc-sidebar .navbar-content {
  background: var(--pc-sidebar-background) !important;
}

.pc-sidebar .pc-navbar {
  background: transparent !important;
}

.btn-link {
  color: var(--famims-red);
}

.btn-outline-primary {
  color: var(--famims-red) !important;
  border-color: var(--famims-red) !important;
}

.btn-outline-primary:hover {
  background-color: var(--famims-red) !important;
  border-color: var(--famims-red) !important;
  color: #fff !important;
}

/* Logo header strip follows sidebar surface (dark=#000, light=#fff) */
.pc-sidebar .m-header {
  background: var(--pc-sidebar-background) !important;
  border-bottom-color: var(--famims-border) !important;
}

.pc-sidebar .pc-navbar > .pc-item > .pc-link {
  color: var(--pc-sidebar-color) !important;
}

.pc-sidebar .pc-navbar > .pc-item > .pc-link .pc-micon,
.pc-sidebar .pc-navbar > .pc-item > .pc-link i {
  color: inherit !important;
}

.pc-sidebar .pc-navbar > .pc-item.active > .pc-link,
.pc-sidebar .pc-navbar > .pc-item.pc-trigger > .pc-link,
.pc-sidebar .pc-navbar > .pc-item:hover > .pc-link {
  background: var(--pc-sidebar-active-background) !important;
  color: var(--pc-sidebar-main-active-color) !important;
}

.pc-sidebar .pc-navbar > .pc-item.active > .pc-link::before,
.pc-sidebar .pc-navbar > .pc-item.pc-trigger > .pc-link::before {
  background: var(--famims-red) !important;
}

.pc-sidebar .pc-submenu .pc-item > .pc-link {
  color: var(--pc-sidebar-color) !important;
}

.pc-sidebar .pc-submenu .pc-item.active > .pc-link,
.pc-sidebar .pc-submenu .pc-item:hover > .pc-link {
  color: var(--famims-red) !important;
}

.pc-sidebar .pc-caption,
.pc-sidebar .pc-caption label {
  color: var(--pc-sidebar-caption-color) !important;
}

/* ---------- Header ---------- */
.pc-header {
  background: var(--pc-header-background) !important;
  border-bottom: 1px solid var(--famims-border) !important;
  color: var(--pc-header-color) !important;
}

.pc-header .pc-head-link > i,
.pc-header .pc-head-link > svg {
  color: var(--famims-header-icon) !important;
}

.pc-header .pc-head-link:before {
  background: var(--famims-red-soft) !important;
}

.famims-user-name {
  color: var(--famims-text) !important;
}

.famims-user-role,
.famims-user-caret {
  color: var(--famims-header-muted) !important;
}



/* Theme toggle */
.famims-theme-toggle .pc-head-link {
  position: relative;
}

.famims-theme-toggle .famims-theme-icon-sun,
.famims-theme-toggle .famims-theme-icon-moon {
  font-size: 1.25rem;
  line-height: 1;
}

/* Breadcrumb / page chrome */
.famims-page-breadcrumb .breadcrumb-item.active {
  color: var(--famims-red) !important;
}

.famims-page-breadcrumb a:hover {
  color: var(--famims-red) !important;
}

.famims-page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--famims-text-muted) !important;
}

/* Row actions adapt to theme; danger stays red */
.famims-row-actions .btn-link {
  color: var(--famims-row-action) !important;
}

.famims-row-actions .btn-link:hover {
  background: var(--famims-row-action-hover-bg) !important;
  color: var(--famims-row-action-hover) !important;
}

.famims-row-actions .btn-link.text-danger {
  color: #c0392b !important;
}

.famims-row-actions .btn-link.text-danger:hover {
  background: #fdecea !important;
  color: #a93226 !important;
}

/* Keep brand red utility classes intact */
.btn-primary,
.famims-btn-accent,
.famims-login-btn {
  background-color: var(--famims-red) !important;
  border-color: var(--famims-red) !important;
  color: #fff !important;
}

.btn-primary:hover,
.famims-btn-accent:hover,
.famims-login-btn:hover {
  background-color: var(--famims-red-hover) !important;
  border-color: var(--famims-red-hover) !important;
  color: #fff !important;
}

.bg-danger,
.badge.bg-danger,
.pc-h-badge {
  background-color: var(--famims-red) !important;
}

.text-danger:not(.dropdown-item) {
  color: var(--famims-red) !important;
}

.famims-link-accent,
a.famims-link-accent {
  color: var(--famims-red) !important;
}

.famims-avatar-initials,
.famims-avatar-initials-sm {
  background: var(--famims-red) !important;
  color: #fff !important;
}

.famims-edit-profile-link {
  color: var(--famims-text) !important;
}

.famims-edit-profile-link i {
  color: var(--famims-red) !important;
}

.famims-edit-profile-link:hover {
  background: var(--famims-red-soft) !important;
  color: var(--famims-red) !important;
}

/* Loader track follows theme */
.loader-bg {
  background: var(--famims-page-bg, #12141c);
}

.loader-fill {
  background: var(--famims-red) !important;
}

/* ============================================================
   View alignment — beat page @push('styles') hardcoded light colors
   ============================================================ */

.famims-page-breadcrumb a {
  color: var(--famims-text-muted) !important;
}
.famims-page-breadcrumb a:hover,
.famims-page-breadcrumb .active,
.famims-page-breadcrumb .breadcrumb-item.active {
  color: var(--famims-red) !important;
}
.famims-page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--famims-text-muted) !important;
}

.famims-btn-filter,
.btn.famims-btn-filter {
  background: var(--famims-red) !important;
  border-color: var(--famims-red) !important;
  color: #fff !important;
  font-weight: 600;
}
.famims-btn-filter:hover,
.btn.famims-btn-filter:hover {
  background: var(--famims-red-hover) !important;
  border-color: var(--famims-red-hover) !important;
  color: #fff !important;
}

.famims-invoice-table thead th,
.famims-settings-table thead th,
.famims-customers-table thead th,
.famims-reports-table thead th,
table.table thead th {
  color: var(--famims-text) !important;
  border-color: var(--famims-border) !important;
  background-color: transparent !important;
}

.famims-invoice-table td,
.famims-settings-table td,
.famims-customers-table td,
.famims-reports-table td,
.famims-invoice-table th,
.famims-settings-table th {
  border-color: var(--famims-border) !important;
  color: var(--famims-text);
}

.card-header.bg-white,
.bg-white.card-header {
  background-color: var(--famims-surface) !important;
  color: var(--famims-text) !important;
  border-color: var(--famims-border) !important;
}

.input-group-text,
.input-group-text.bg-white {
  background-color: var(--famims-surface-2) !important;
  border-color: var(--famims-border) !important;
  color: var(--famims-text-muted) !important;
}

/* Status pills — readable on both themes */
.famims-status {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: capitalize;
}
.famims-status-draft,
.famims-status-inactive {
  background: rgba(148, 163, 184, 0.18) !important;
  color: var(--famims-text-muted) !important;
}
.famims-status-issued,
.famims-status-pending {
  background: rgba(230, 126, 34, 0.16) !important;
  color: #e67e22 !important;
}
.famims-status-paid,
.famims-status-active {
  background: rgba(26, 174, 122, 0.16) !important;
  color: #1aae7a !important;
}
.famims-status-cancelled {
  background: rgba(192, 57, 43, 0.16) !important;
  color: #c0392b !important;
}

/* Tom Select / selects used in filters */
.ts-wrapper.form-select,
.ts-wrapper.single .ts-control,
.famims-customer-select-wrap .ts-wrapper.form-select,
.famims-customer-select-wrap .ts-wrapper.form-select .ts-control,
.famims-customer-select-wrap .ts-wrapper.single .ts-control {
  background-color: var(--famims-surface-2) !important;
  border-color: var(--famims-border) !important;
  color: var(--famims-text) !important;
}
.famims-customer-select-wrap .ts-wrapper.single .ts-control .item,
.famims-customer-select-wrap .ts-wrapper.single .ts-control input,
.ts-wrapper.single .ts-control .item,
.ts-wrapper.single .ts-control input {
  color: var(--famims-text) !important;
}
.ts-dropdown,
.famims-customer-select-wrap .ts-wrapper .ts-dropdown {
  background: var(--famims-surface) !important;
  border-color: var(--famims-border) !important;
  color: var(--famims-text) !important;
}
.ts-dropdown .option,
.ts-dropdown .active {
  color: var(--famims-text) !important;
}
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
  background: var(--famims-red-soft) !important;
  color: var(--famims-red) !important;
}
.ts-wrapper.form-select.focus,
.ts-wrapper.form-select.dropdown-active,
.famims-customer-select-wrap .ts-wrapper.form-select.focus,
.famims-customer-select-wrap .ts-wrapper.form-select.dropdown-active {
  border-color: var(--famims-red) !important;
  box-shadow: 0 0 0 0.2rem var(--famims-red-soft) !important;
}

/* Invoice form / settings panels */
.famims-invoice-panel,
.famims-form-panel,
.famims-section-card,
.famims-upload-zone,
.famims-perm-card,
.famims-status-field {
  background: var(--famims-surface) !important;
  border-color: var(--famims-border) !important;
  color: var(--famims-text) !important;
}

.famims-section-title,
.famims-field-label,
.form-label,
label.form-label {
  color: var(--famims-text) !important;
}

.famims-muted,
.famims-help-text,
.famims-hint,
.form-text {
  color: var(--famims-text-muted) !important;
}

.famims-section-head,
.famims-lines-toolbar,
.famims-subtotal-row {
  border-color: var(--famims-border) !important;
  color: var(--famims-text-muted);
}

.famims-line-row,
.famims-item-row,
.famims-bank-block,
.famims-preview-shell {
  background: var(--famims-surface-2) !important;
  border-color: var(--famims-border) !important;
}

/* Role permission cards — red soft instead of blue tint */
.famims-perm-card.is-checked,
.famims-permission-item.active,
.famims-perm-check:checked + label,
label.famims-perm-label:has(input:checked) {
  background: var(--famims-red-soft) !important;
  border-color: rgba(231, 76, 60, 0.35) !important;
}

.famims-role-badge {
  background: var(--famims-red-soft) !important;
  color: var(--famims-red) !important;
}

/* Invoice preview chrome (not PDF document ink) */
.famims-invoice-view .card-header,
.invoice-preview-toolbar,
.famims-preview-wrap {
  background: var(--famims-surface) !important;
  border-color: var(--famims-border) !important;
  color: var(--famims-text) !important;
}

.famims-specimen-card {
  background: var(--famims-surface) !important;
  color: var(--famims-text) !important;
  border-color: var(--famims-border) !important;
}

/* Definition lists / customer detail */
.famims-detail-list dt,
dl dt.text-muted {
  color: var(--famims-text-muted) !important;
}
.famims-detail-list dd,
dl dd {
  color: var(--famims-text) !important;
}

/* Avatar rings */
.famims-avatar-ring,
.famims-customer-avatar {
  border-color: var(--famims-border) !important;
}

/* Pagination — theme aligned */
.pagination {
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0;
}
.pagination .page-item .page-link {
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 0.55rem !important;
  border: 1px solid var(--famims-border) !important;
  background: var(--famims-surface) !important;
  color: var(--famims-text) !important;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pagination .page-item + .page-item .page-link,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  margin-left: 0;
  border-radius: 0.55rem !important;
}
.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus {
  background: var(--famims-red-soft) !important;
  border-color: var(--famims-red) !important;
  color: var(--famims-red) !important;
  box-shadow: none;
  z-index: 1;
}
.pagination .page-item.active .page-link {
  background: var(--famims-red) !important;
  border-color: var(--famims-red) !important;
  color: #fff !important;
}
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
  background: var(--famims-red-hover) !important;
  border-color: var(--famims-red-hover) !important;
  color: #fff !important;
}
.pagination .page-item.disabled .page-link {
  background: var(--famims-surface-2) !important;
  border-color: var(--famims-border) !important;
  color: var(--famims-text-muted) !important;
  opacity: 0.7;
}

/* Table footer notes */
.card .card-body,
.card .table-responsive {
  color: var(--famims-text);
}

h1, h2, h3, h4, h5, h6,
.pc-content h5,
.pc-content .h5 {
  color: var(--famims-text);
}

.famims-preview-status--paid {
  background: rgba(26, 174, 122, 0.16) !important;
  color: #0f8a5f !important;
}
.famims-preview-status--issued {
  background: rgba(230, 126, 34, 0.16) !important;
  color: #c45c12 !important;
}
.famims-preview-status--draft {
  background: rgba(148, 163, 184, 0.18) !important;
  color: var(--famims-text-muted) !important;
}
.famims-preview-status--cancelled {
  background: rgba(192, 57, 43, 0.16) !important;
  color: #c0392b !important;
}