@import url("concerns/table.css");
@import url("concerns/create-new-form.css");

:root {
  --page-bg: #d3cbc0;
  --page-bg-accent: #d3cbc0;
  --ink: #1f2937;
  --muted: #5f6b7a;
  --panel: rgba(255, 251, 245, 0.88);
  --panel-border: rgba(148, 163, 184, 0.18);
  --green-accent-start: #183a37;
  --green-accent-end: #315c56;
  --primary: #b85c38;
  --primary-hover: #9f4f30;
}

body {
  min-height: 100vh;
  color: var(--ink);
  background: var(--page-bg);
}

::placeholder {
  color: rgba(95, 107, 122, 0.5) !important;
}

.page-shell {
  min-height: 100vh;
}

.panel-card {
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 45px rgba(15, 23, 42, 0.2);
}

.table-panel,
.form-panel {
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.14),
    0 4px 14px rgba(15, 23, 42, 0.08);
}

.panel-header {
  background: #ffffff;
}

.btn-primary {
  border-color: var(--primary);
  background-color: var(--primary);
  box-shadow: 0 12px 24px rgba(184, 92, 56, 0.2);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.btn-primary:active.focus,
.btn-primary.active.focus {
  border-color: var(--primary-hover) !important;
  background-color: var(--primary-hover) !important;
}

.form-panel .btn-primary,
.form-panel .btn-primary.disabled,
.form-panel .btn-primary[disabled] {
  border-color: var(--green-accent-end);
  background-color: var(--green-accent-end);
  box-shadow: 0 12px 24px rgba(24, 58, 55, 0.22);
}

.form-panel .btn-primary:hover,
.btn-primary:focus,
.form-panel .btn-primary.focus,
.form-panel .btn-primary:active,
.form-panel .btn-primary.active,
.form-panel .open > .dropdown-toggle.btn-primary,
.form-panel .btn-primary:active:hover,
.form-panel .btn-primary.active:hover,
.form-panel .btn-primary:active:focus,
.form-panel .btn-primary.active:focus,
.form-panel .btn-primary:active.focus,
.form-panel .btn-primary.active.focus,
.form-panel .btn-primary.disabled:hover,
.form-panel .btn-primary[disabled]:hover {
  border-color: var(--green-accent-start) !important;
  background-color: var(--green-accent-start) !important;
}

.form-panel .btn-primary:focus,
.form-panel .btn-primary.focus,
.form-panel .btn-primary:active:focus,
.form-panel .btn-primary.active:focus,
.form-panel .btn-primary:active.focus,
.form-panel .btn-primary.active.focus {
  box-shadow:
    0 12px 24px rgba(24, 58, 55, 0.22),
    0 0 0 0.25rem rgba(49, 92, 86, 0.22) !important;
}

.table-modern tbody tr {
  transition:
    background-color 1.6s ease,
    box-shadow 1.6s ease;
}

.table-modern tbody tr.table-row-new {
  background-color: rgba(184, 92, 56, 0.14);
  box-shadow: inset 0 0 0 9999px rgba(255, 244, 214, 0.55);
}

@media (max-width: 767.98px) {
  .panel-card .card-body {
    border-radius: 1.5rem;
  }
}