/* ===== Xerox Sans @font-face declarations ===== */
@font-face {
  font-family: "Xerox Sans";
  src: url("../xerox-fonts/XeroxSans-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Xerox Sans";
  src: url("../xerox-fonts/XeroxSans-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Xerox Sans";
  src: url("../xerox-fonts/XeroxSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Xerox Sans";
  src: url("../xerox-fonts/XeroxSans-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Xerox Sans";
  src: url("../xerox-fonts/XeroxSans.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Xerox Sans";
  src: url("../xerox-fonts/XeroxSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Xerox Sans";
  src: url("../xerox-fonts/XeroxSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Xerox Sans";
  src: url("../xerox-fonts/XeroxSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Xerox Sans Expert — display/heading use */
@font-face {
  font-family: "Xerox Sans Expert";
  src: url("../xerox-fonts/Xerox Sans Expert-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Xerox Sans Expert";
  src: url("../xerox-fonts/Xerox Sans Expert-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== CSS Custom Properties ===== */
:root {
  --xerox-red: #D92231;
  --xerox-red-dark: #B91C29;
  --xerox-red-light: #F2DEE0;
  --xerox-black: #000000;
  --xerox-white: #FFFFFF;
  --xerox-blue: #1A6FC5;
  --xerox-blue-dark: #155BA3;
  --xerox-blue-light: #E1EEF9;
  --xerox-green: #27800E;
  --xerox-green-dark: #1F660B;
  --xerox-green-light: #E0F0DB;
  --xerox-orange: #C34400;
  --xerox-gold: #F67E00;
  --xerox-gold-light: #FEF3E0;
  --xerox-violet: #9B2583;
  --xerox-gray: #737373;
  --xerox-gray-light: #EBEBEB;
  --xerox-gray-medium: #C1C1C1;
  --xerox-gray-dark: #333333;
  --xerox-cosmic-blue: #454D58;
  --xerox-quartz-white: #E5E4E4;
  --xerox-font: "Xerox Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --xerox-font-expert: "Xerox Sans Expert", "Xerox Sans", Arial, sans-serif;
}

/* ===== Global Xerox Sans font + weight bump ===== */
html {
  font-family: var(--xerox-font) !important;
}

body,
button,
input,
optgroup,
select,
textarea {
  font-family: var(--xerox-font) !important;
  font-weight: 500;
}

h1, h2, h3, h4, h5, h6,
.title,
.subtitle {
  font-family: var(--xerox-font) !important;
  font-weight: 700 !important;
}

.button,
.input,
.textarea,
.select select,
.label,
.notification,
.navbar,
.navbar-item,
.navbar-link,
.modal-card-title,
.tag,
.tabs a,
.pagination-link,
.pagination-previous,
.pagination-next,
table,
th,
td {
  font-family: var(--xerox-font) !important;
}

/* Weight bump: normal(400) → 500, bold(700) → 800 */
.navbar-link b,
.navbar-item b,
strong,
b,
th {
  font-weight: 700 !important;
}

.button {
  font-weight: 600 !important;
}

.label {
  font-weight: 600 !important;
}

/* ===== is-primary → Xerox Red ===== */
/* ===== is-primary → Xerox Blue (for buttons, to differentiate from is-danger Red) ===== */
.button.is-primary {
  background-color: var(--xerox-blue) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.button.is-primary:hover,
.button.is-primary.is-hovered {
  background-color: var(--xerox-blue-dark) !important;
}
.button.is-primary.is-outlined {
  background-color: transparent !important;
  border-color: var(--xerox-blue) !important;
  color: var(--xerox-blue) !important;
}
.button.is-primary.is-outlined:hover {
  background-color: var(--xerox-blue) !important;
  color: #fff !important;
}
/* Non-button is-primary elements stay Xerox Red (brand identity) */
.notification.is-primary {
  background-color: var(--xerox-red) !important;
  color: #fff !important;
}
.tag.is-primary {
  background-color: var(--xerox-red) !important;
  color: #fff !important;
}
.progress.is-primary::-webkit-progress-value {
  background-color: var(--xerox-red) !important;
}
.progress.is-primary::-moz-progress-bar {
  background-color: var(--xerox-red) !important;
}
.hero.is-primary {
  background-color: var(--xerox-red) !important;
  color: #fff !important;
}
.has-text-primary {
  color: var(--xerox-red) !important;
}
.has-background-primary {
  background-color: var(--xerox-red) !important;
}

/* ===== is-link → Xerox Blue ===== */
.button.is-link {
  background-color: var(--xerox-blue) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.button.is-link:hover,
.button.is-link.is-hovered {
  background-color: var(--xerox-blue-dark) !important;
}
.button.is-link.is-outlined {
  background-color: transparent !important;
  border-color: var(--xerox-blue) !important;
  color: var(--xerox-blue) !important;
}
.button.is-link.is-outlined:hover {
  background-color: var(--xerox-blue) !important;
  color: #fff !important;
}
.notification.is-link {
  background-color: var(--xerox-blue) !important;
  color: #fff !important;
}
.progress.is-link::-webkit-progress-value {
  background-color: var(--xerox-blue) !important;
}
.progress.is-link::-moz-progress-bar {
  background-color: var(--xerox-blue) !important;
}
.has-text-link {
  color: var(--xerox-blue) !important;
}
.has-background-link {
  background-color: var(--xerox-blue) !important;
}

/* ===== is-info → Xerox Cosmic Blue ===== */
.button.is-info {
  background-color: var(--xerox-cosmic-blue) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.button.is-info:hover,
.button.is-info.is-hovered {
  background-color: #3a424c !important;
}
.button.is-info.is-outlined {
  background-color: transparent !important;
  border-color: var(--xerox-cosmic-blue) !important;
  color: var(--xerox-cosmic-blue) !important;
}
.button.is-info.is-outlined:hover {
  background-color: var(--xerox-cosmic-blue) !important;
  color: #fff !important;
}
.notification.is-info {
  background-color: var(--xerox-cosmic-blue) !important;
  color: #fff !important;
}
.tag.is-info {
  background-color: var(--xerox-cosmic-blue) !important;
  color: #fff !important;
}
.has-text-info {
  color: var(--xerox-cosmic-blue) !important;
}
.has-background-info {
  background-color: var(--xerox-cosmic-blue) !important;
}

.button.is-success {
  background-color: var(--xerox-green) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.button.is-success:hover,
.button.is-success.is-hovered {
  background-color: var(--xerox-green-dark) !important;
}
.button.is-success.is-outlined {
  background-color: transparent !important;
  border-color: var(--xerox-green) !important;
  color: var(--xerox-green) !important;
}
.button.is-success.is-outlined:hover {
  background-color: var(--xerox-green) !important;
  color: #fff !important;
}
.notification.is-success {
  background-color: var(--xerox-green) !important;
  color: #fff !important;
}
.tag.is-success {
  background-color: var(--xerox-green) !important;
  color: #fff !important;
}
.progress.is-success::-webkit-progress-value {
  background-color: var(--xerox-green) !important;
}
.progress.is-success::-moz-progress-bar {
  background-color: var(--xerox-green) !important;
}
.has-text-success {
  color: var(--xerox-green) !important;
}
.has-background-success {
  background-color: var(--xerox-green) !important;
}

/* ===== is-warning → Xerox Gold ===== */
.button.is-warning {
  background-color: var(--xerox-gold) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.button.is-warning:hover,
.button.is-warning.is-hovered {
  background-color: #d96e00 !important;
}
.button.is-warning.is-outlined {
  background-color: transparent !important;
  border-color: var(--xerox-gold) !important;
  color: var(--xerox-gold) !important;
}
.notification.is-warning {
  background-color: var(--xerox-gold) !important;
  color: #fff !important;
}
.tag.is-warning {
  background-color: var(--xerox-gold) !important;
  color: #fff !important;
}
.progress.is-warning::-webkit-progress-value {
  background-color: var(--xerox-gold) !important;
}
.progress.is-warning::-moz-progress-bar {
  background-color: var(--xerox-gold) !important;
}
.has-text-warning {
  color: var(--xerox-gold) !important;
}
.has-background-warning {
  background-color: var(--xerox-gold) !important;
}

/* ===== is-danger → Xerox Red (same as primary, intentional) ===== */
.button.is-danger {
  background-color: var(--xerox-red) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.button.is-danger:hover,
.button.is-danger.is-hovered {
  background-color: var(--xerox-red-dark) !important;
}
.button.is-danger.is-outlined {
  background-color: transparent !important;
  border-color: var(--xerox-red) !important;
  color: var(--xerox-red) !important;
}
.button.is-danger.is-outlined:hover {
  background-color: var(--xerox-red) !important;
  color: #fff !important;
}
.notification.is-danger {
  background-color: var(--xerox-red) !important;
  color: #fff !important;
}
.tag.is-danger {
  background-color: var(--xerox-red) !important;
  color: #fff !important;
}
.has-text-danger {
  color: var(--xerox-red) !important;
}
.has-background-danger {
  background-color: var(--xerox-red) !important;
}

.button.is-black {
  background-color: var(--xerox-black) !important;
  color: #fff !important;
}
.button.is-black:hover,
.button.is-black.is-hovered {
  background-color: var(--xerox-gray-dark) !important;
}

.navbar {
  background-color: var(--xerox-white);
}
.navbar-link:not(.is-arrowless)::after {
  border-color: var(--xerox-blue);
}
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-dropdown a.navbar-item:hover {
  background-color: var(--xerox-gray-light);
  color: var(--xerox-red);
}
.navbar-link:hover,
.navbar-item:hover {
  color: var(--xerox-red);
}

a {
  color: var(--xerox-blue);
}
a:hover {
  color: var(--xerox-blue-dark);
}

.modal-card-head {
  background-color: var(--xerox-cosmic-blue);
  border-bottom: 3px solid var(--xerox-red);
}
.modal-card-head .modal-card-title {
  color: var(--xerox-white);
}
.modal-card-foot {
  border-top: 1px solid var(--xerox-gray-light);
}

.table thead th {
  color: var(--xerox-cosmic-blue);
  border-bottom-color: var(--xerox-gray-medium);
}
.table.is-striped tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.tabs a {
  color: var(--xerox-gray);
}
.tabs a:hover {
  color: var(--xerox-red);
  border-bottom-color: var(--xerox-red);
}
.tabs li.is-active a {
  color: var(--xerox-red);
  border-bottom-color: var(--xerox-red);
}

.pagination-link.is-current {
  background-color: var(--xerox-blue) !important;
  border-color: var(--xerox-blue) !important;
  color: #fff !important;
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--xerox-blue);
  box-shadow: 0 0 0 0.125em rgba(26, 111, 197, 0.25);
}

.button {
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.button:active {
  transform: scale(0.97);
}

.card {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.25s ease;
  border: 1px solid var(--xerox-gray-light);
}
.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.box {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--xerox-gray-light);
}

.navbar-dropdown {
  border-top: 2px solid var(--xerox-red);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  padding: 0.25rem 0;
}
.navbar-dropdown .navbar-item {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
.navbar-dropdown .navbar-item:hover {
  padding-left: 1.25rem;
}

.modal-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}
.modal-card-head {
  padding: 1rem 1.5rem;
}
.modal-card-head .delete {
  background-color: rgba(255, 255, 255, 0.3);
}
.modal-card-head .delete:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.modal-card-body {
  padding: 1.5rem;
}
.modal-card-foot {
  padding: 1rem 1.5rem;
  justify-content: flex-end;
  gap: 0.5rem;
}
.modal-background {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.table {
  border-radius: 6px;
  overflow: hidden;
}
.table thead th {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--xerox-gray-light);
}
.table td {
  padding: 0.4rem 0.75rem;
  vertical-align: middle;
}
.table tbody tr {
  transition: background-color 0.15s ease;
}
.table tbody tr:hover {
  background-color: rgba(26, 111, 197, 0.04);
}

.notification {
  border-radius: 6px;
  padding: 1rem 1.5rem;
  font-weight: 500;
}

.tag {
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 4px;
}

.input,
.textarea,
.select select {
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--xerox-gray-light, #EBEBEB);
}
::-webkit-scrollbar-thumb {
  background: var(--xerox-gray, #737373);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--xerox-cosmic-blue, #454D58);
}

::selection {
  background-color: rgba(217, 34, 49, 0.15);
  color: inherit;
}