/**
 * Prevents visible "flash" while Tailwind + Material Symbols load.
 * Icon spans show ligature names (e.g. inventory_2, receipt_long) until the icon font is ready.
 */
html.page-loading body {
  visibility: hidden;
}

html.page-ready body {
  visibility: visible;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-smoothing: antialiased;
}

/* Shared dashboard modal shell (matches Settings / Allocate modal) */
.dashboard-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.dashboard-modal.dashboard-modal-top {
  z-index: 1100;
}

.dashboard-modal-panel {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dashboard-modal-panel--sm { max-width: 24rem; }
.dashboard-modal-panel--md { max-width: 32rem; }
.dashboard-modal-panel--lg { max-width: 36rem; }
.dashboard-modal-panel--xl { max-width: 56rem; }
.dashboard-modal-panel--2xl { max-width: 64rem; }

.dashboard-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}

.dashboard-modal-header h2,
.dashboard-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #012d1d;
}

.dashboard-modal-header p {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: #94a3b8;
}

.dashboard-modal-close {
  color: #94a3b8;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.dashboard-modal-close:hover {
  color: #475569;
}

.dashboard-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.dashboard-modal-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
}

.dashboard-modal-footer .btn-modal-cancel {
  flex: 1;
  padding: 0.625rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  background: #fff;
  cursor: pointer;
}

.dashboard-modal-footer .btn-modal-cancel:hover {
  background: #f8fafc;
}

.dashboard-modal-footer .btn-modal-primary {
  flex: 1;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background: #012d1d;
  cursor: pointer;
}

.dashboard-modal-footer .btn-modal-primary:hover {
  background: #1b4332;
}

.dashboard-field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.375rem;
}

.dashboard-field-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  background: #fff;
}

.dashboard-field-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(1, 45, 29, 0.15);
}