/* ==========================================================================
   SAP Fiori theme overlay (Horizon design tokens on Bootstrap 5)
   Loaded after bootstrap/style/admin css — overrides only, no markup changes.
   ========================================================================== */

/* --- SAP "72" font (served locally from public/fonts) --- */
@font-face {
  font-family: '72';
  src: url('../fonts/72-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: '72';
  src: url('../fonts/72-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: '72';
  src: url('../fonts/72-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fiori Horizon (Morning) tokens */
  --fiori-font: '72', '72full', 'Segoe UI', Arial, Helvetica, sans-serif;
  --fiori-shell-bg: #354a5f;            /* classic Fiori launchpad shell bar */
  --fiori-shell-text: #ffffff;
  --fiori-bg: #f5f6f7;                  /* sapBackgroundColor */
  --fiori-tile-bg: #ffffff;
  --fiori-text: #1d2d3e;                /* sapTextColor */
  --fiori-text-secondary: #556b82;      /* sapContent_LabelColor */
  --fiori-header-text: #475e75;         /* column header text */
  --fiori-brand: #0070f2;               /* sapBrandColor */
  --fiori-brand-dark: #0064d9;
  --fiori-brand-darker: #0057d2;
  --fiori-border: #e4e7ea;
  --fiori-field-border: #89919a;
  --fiori-negative: #d20a0a;
  --fiori-critical: #e76500;
  --fiori-positive: #107e3e;
  --fiori-selected-bg: #e5f0fa;
  --fiori-hover-bg: #f2f6fa;
  --fiori-shadow: 0 0 0.125rem 0 rgba(34, 53, 72, 0.16), 0 0.5rem 1rem 0 rgba(34, 53, 72, 0.08);
  --fiori-radius: 0.5rem;
  --fiori-radius-lg: 0.75rem;
}

/* --- Base --- */
body {
  font-family: var(--fiori-font);
  background-color: var(--fiori-bg);
  color: var(--fiori-text);
  font-size: 0.875rem;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fiori-text);
  font-weight: 400;
}

h4 { font-size: 1.25rem; }

a { color: var(--fiori-brand); text-decoration: none; }
a:hover { color: var(--fiori-brand-dark); }

.text-muted { color: var(--fiori-text-secondary) !important; }

/* --- Shell bar (header/navbar) --- */
header {
  background-color: var(--fiori-shell-bg);
  box-shadow: 0 0 0.25rem 0 rgba(0, 0, 0, 0.15);
}

header .navbar { padding-top: 0.35rem; padding-bottom: 0.35rem; min-height: 2.75rem; }

header .navbar-brand,
header .navbar-brand:hover,
header .nav-link,
header .navbar-nav .nav-link {
  color: var(--fiori-shell-text) !important;
  font-size: 0.875rem;
}

header .navbar-brand { font-size: 1rem; font-weight: 600; }

header .nav-link { opacity: 0.85; border-radius: var(--fiori-radius); padding: 0.35rem 0.75rem; }
header .nav-link:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
header .nav-link.active { opacity: 1; background: rgba(255, 255, 255, 0.15); }

header .navbar-toggler { border-color: rgba(255, 255, 255, 0.4); }
header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

header .dropdown-menu {
  border: none;
  border-radius: var(--fiori-radius-lg);
  box-shadow: var(--fiori-shadow);
  font-size: 0.875rem;
}

/* --- Cards → Fiori panels/tiles --- */
.card {
  border: none;
  border-radius: var(--fiori-radius-lg);
  box-shadow: var(--fiori-shadow);
  background-color: var(--fiori-tile-bg);
  overflow: hidden;
}

.card-header,
.card-header.bg-dark {
  background-color: var(--fiori-tile-bg) !important;
  color: var(--fiori-text) !important;
  font-weight: 600;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--fiori-border);
  padding: 0.75rem 1rem;
}

.card-footer {
  background-color: var(--fiori-tile-bg);
  border-top: 1px solid var(--fiori-border);
  color: var(--fiori-text-secondary);
}

/* --- Sidebar navigation list --- */
.list-group-item {
  border: none;
  border-left: 0.1875rem solid transparent;
  color: var(--fiori-text);
  font-size: 0.875rem;
  padding: 0.55rem 1rem;
}

.list-group-item-action:hover {
  background-color: var(--fiori-hover-bg);
  color: var(--fiori-text);
}

.list-group-item.active,
.list-group-item.active:hover {
  background-color: var(--fiori-selected-bg);
  border-left-color: var(--fiori-brand);
  color: var(--fiori-text);
  font-weight: 600;
}

.list-group-item.active .fas,
.list-group-item.active .far { color: var(--fiori-brand); }

/* --- Tables → Fiori responsive table --- */
.table {
  color: var(--fiori-text);
  font-size: 0.875rem;
  --bs-table-hover-bg: var(--fiori-hover-bg);
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--fiori-border);
  padding: 0.65rem 1rem;
}

.table thead.table-dark,
.table .table-dark,
.table-dark {
  --bs-table-bg: var(--fiori-tile-bg);
  --bs-table-color: var(--fiori-header-text);
  --bs-table-border-color: var(--fiori-border);
  background-color: var(--fiori-tile-bg);
  color: var(--fiori-header-text);
}

.table thead th {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--fiori-header-text);
  border-bottom: 1px solid #d9d9d9;
}

/* keep row action buttons on one line (last column = Actions) */
.table td:last-child {
  white-space: nowrap;
}

/* --- Buttons --- */
.btn {
  border-radius: var(--fiori-radius);
  font-family: var(--fiori-font);
  font-size: 0.875rem;
  padding: 0.35rem 0.85rem;
}

.btn-primary {
  background-color: var(--fiori-brand);
  border-color: var(--fiori-brand);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--fiori-brand-dark);
  border-color: var(--fiori-brand-dark);
}
.btn-primary:active { background-color: var(--fiori-brand-darker) !important; }

/* Fiori default (ghost) buttons */
.btn-outline-primary,
.btn-outline-secondary {
  color: var(--fiori-brand);
  border-color: #bcc3ca;
  background-color: var(--fiori-tile-bg);
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  color: var(--fiori-brand-dark);
  background-color: var(--fiori-hover-bg);
  border-color: #bcc3ca;
}

.btn-outline-danger {
  color: var(--fiori-negative);
  border-color: #bcc3ca;
  background-color: var(--fiori-tile-bg);
}
.btn-outline-danger:hover {
  color: #ffffff;
  background-color: var(--fiori-negative);
  border-color: var(--fiori-negative);
}

.btn-danger { background-color: var(--fiori-negative); border-color: var(--fiori-negative); }
.btn-danger:hover { background-color: #b00909; border-color: #b00909; }

.btn-warning {
  background-color: var(--fiori-critical);
  border-color: var(--fiori-critical);
  color: #ffffff;
}
.btn-warning:hover { background-color: #c65a00; border-color: #c65a00; color: #ffffff; }

.btn-success { background-color: var(--fiori-positive); border-color: var(--fiori-positive); }

.btn-secondary {
  color: var(--fiori-brand);
  background-color: var(--fiori-tile-bg);
  border-color: #bcc3ca;
}
.btn-secondary:hover {
  color: var(--fiori-brand-dark);
  background-color: var(--fiori-hover-bg);
  border-color: #bcc3ca;
}

.btn:focus, .btn:focus-visible {
  box-shadow: 0 0 0 0.125rem rgba(0, 112, 242, 0.35);
}

/* --- Forms --- */
.form-control, .form-select {
  border-radius: var(--fiori-radius);
  border-color: var(--fiori-field-border);
  color: var(--fiori-text);
  font-size: 0.875rem;
  font-family: var(--fiori-font);
}

.form-control:hover, .form-select:hover { border-color: var(--fiori-brand); }

.form-control:focus, .form-select:focus {
  border-color: var(--fiori-brand);
  box-shadow: 0 0 0 0.125rem rgba(0, 112, 242, 0.25);
}

.form-control::placeholder { color: #8396a8; font-style: italic; }

.form-label {
  color: var(--fiori-text-secondary);
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
}

.input-group .btn { border-color: var(--fiori-field-border); }

/* --- Modals → Fiori dialogs --- */
.modal-content {
  border: none;
  border-radius: var(--fiori-radius-lg);
  box-shadow: 0 0.25rem 2rem 0 rgba(34, 53, 72, 0.25);
}

.modal-header,
.modal-header.bg-primary,
.modal-header.bg-warning,
.modal-header.bg-danger {
  background-color: var(--fiori-tile-bg) !important;
  color: var(--fiori-text) !important;
  border-bottom: 1px solid var(--fiori-border);
  padding: 0.9rem 1.25rem;
}

.modal-header.bg-danger .modal-title { color: var(--fiori-negative); }
.modal-header.bg-warning .modal-title { color: var(--fiori-critical); }

.modal-title { font-size: 1rem; font-weight: 400; }

.modal-header .btn-close-white {
  filter: none; /* header is light again, restore dark close icon */
}

.modal-footer { border-top: 1px solid var(--fiori-border); }

/* --- Alerts → Fiori message strips --- */
.alert { border-radius: var(--fiori-radius); font-size: 0.875rem; }

.alert-danger {
  background-color: #fceaea;
  border: 1px solid var(--fiori-negative);
  color: var(--fiori-negative);
}

.alert-success {
  background-color: #f0f8f2;
  border: 1px solid var(--fiori-positive);
  color: var(--fiori-positive);
}

/* --- Badges → Fiori object status --- */
.badge { font-weight: 600; border-radius: 0.375rem; }
.badge.bg-primary { background-color: var(--fiori-brand) !important; }
.badge.bg-success { background-color: var(--fiori-positive) !important; }
.badge.bg-danger { background-color: var(--fiori-negative) !important; }
.badge.bg-warning { background-color: var(--fiori-critical) !important; }

/* --- Footer --- */
footer, footer.bg-light {
  background-color: transparent !important;
  border-top: 1px solid var(--fiori-border);
  color: var(--fiori-text-secondary);
}

/* --- Spinner --- */
.spinner-border.text-primary { color: var(--fiori-brand) !important; }

/* --- Login/registration card headers keep brand color as Fiori uses accent headers sparingly --- */
.card > .card-header.bg-primary {
  background-color: var(--fiori-tile-bg) !important;
  color: var(--fiori-text) !important;
}