/* Skeuomorphic overlay — loads AFTER style.css.
   To fall back to the flat navy/gold theme, delete the <link rel="stylesheet" href="css/skeu.css"> line in index.html. */

/* Warmer backdrop with soft radial glow */
html, body {
  background:
    radial-gradient(ellipse at 25% -10%, #FFF3B0 0%, transparent 55%),
    radial-gradient(ellipse at 85% 110%, #FFE680 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Header — glossy navy with gold rim */
header {
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.10) 0,
      rgba(255, 255, 255, 0) 45%),
    linear-gradient(to bottom, #003566 0%, #001D3D 100%);
  border-bottom: 1px solid #000814;
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 10, 0.28),
    inset 0 -1px 0 rgba(255, 214, 10, 0.12),
    0 2px 6px rgba(0, 8, 20, 0.35);
}

header h1 {
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 0 12px rgba(255, 195, 0, 0.18);
  letter-spacing: 0.01em;
}

/* Bottom nav — chunky bar with gold hairline */
nav {
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.07) 0,
      rgba(255, 255, 255, 0) 45%),
    linear-gradient(to bottom, #002651 0%, #000814 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 10, 0.22),
    0 -4px 14px rgba(0, 8, 20, 0.28);
}

.nav-item {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.nav-item.active {
  background: linear-gradient(to bottom,
    rgba(255, 195, 0, 0.20) 0%,
    rgba(255, 195, 0, 0.04) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 10, 0.35),
    inset 0 -2px 6px rgba(0, 0, 0, 0.32);
  border-top-color: var(--accent-bright);
  text-shadow: 0 0 10px rgba(255, 195, 0, 0.55);
}

/* Cards — soft paper with subtle top highlight */
.card {
  background: linear-gradient(to bottom, #FFFFFF 0%, #FBF8EF 100%);
  border: 1px solid #E3DCC3;
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(0, 8, 20, 0.06),
    0 4px 12px rgba(0, 8, 20, 0.08);
}

/* Buttons — convex in rest, concave on press */
button, .btn {
  background-image: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.08) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px rgba(0, 8, 20, 0.20);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  transition: transform 0.05s, box-shadow 0.1s, background 0.15s;
}

button:active, .btn:active {
  background-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0) 70%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.32),
    0 0 0 rgba(0, 0, 0, 0);
  transform: translateY(1px);
}

.btn-primary {
  background:
    linear-gradient(to bottom, #004A8C 0%, #003566 50%, #002246 100%);
  border: 1px solid #001D3D;
}
.btn-primary:hover {
  background:
    linear-gradient(to bottom, #00579F 0%, #003D75 50%, #002651 100%);
}

.btn-success {
  background:
    linear-gradient(to bottom, #3D9A6D 0%, #2F855A 50%, #276749 100%);
  border: 1px solid #1F5C3A;
}
.btn-success:hover {
  background:
    linear-gradient(to bottom, #48AB7C 0%, #36956A 50%, #2D7553 100%);
}

.btn-danger {
  background:
    linear-gradient(to bottom, #C94940 0%, #B5322B 50%, #922620 100%);
  border: 1px solid #7A2019;
}
.btn-danger:hover {
  background:
    linear-gradient(to bottom, #D55A50 0%, #C33C34 50%, #A12B24 100%);
}

.btn-warning, header .btn-secondary {
  background:
    linear-gradient(to bottom, #FFDB4F 0%, #FFC300 50%, #E6AF00 100%);
  border: 1px solid #CC9A00;
  color: #000814;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-warning:hover, header .btn-secondary:hover {
  background:
    linear-gradient(to bottom, #FFE47F 0%, #FFD60A 50%, #FFC300 100%);
}

.btn-secondary {
  background: linear-gradient(to bottom, #FFFFFF 0%, #F4EFE1 100%);
  border: 1px solid #C9C2A8;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn-secondary:hover {
  background: linear-gradient(to bottom, #FBF8EF 0%, #EBE4CC 100%);
}

/* Inputs — recessed into the card */
input, select, textarea {
  background: linear-gradient(to bottom, #F6F2E4 0%, #FFFFFF 10%);
  box-shadow:
    inset 0 2px 3px rgba(0, 8, 20, 0.09),
    inset 0 1px 1px rgba(0, 8, 20, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid #C9C2A8;
}

input:focus, select:focus, textarea:focus {
  background: linear-gradient(to bottom, #FFFBE5 0%, #FFFFFF 12%);
  box-shadow:
    inset 0 2px 3px rgba(0, 8, 20, 0.09),
    0 0 0 3px rgba(255, 195, 0, 0.45);
}

/* Checkbox tiles — raised cards that glow gold on hover */
.checkbox {
  background: linear-gradient(to bottom, #FFFFFF 0%, #F9F4E4 100%);
  border: 1px solid #E3DCC3;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(0, 8, 20, 0.08);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.checkbox:hover {
  background: linear-gradient(to bottom, #FFFDF4 0%, #FFF1C2 100%);
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(0, 8, 20, 0.08),
    0 0 0 2px rgba(255, 195, 0, 0.25);
}

/* Badges — gel pills */
.badge {
  background-image: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0) 55%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.10);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.badge-warning {
  background: linear-gradient(to bottom, #FFE47F 0%, #FFC300 100%);
}
.badge-success {
  background: linear-gradient(to bottom, #CFE9DB 0%, #A5D3B9 100%);
}
.badge-danger {
  background: linear-gradient(to bottom, #F4CDC7 0%, #E4A59E 100%);
}
.badge-info {
  background: linear-gradient(to bottom, #D7DFEE 0%, #B5C2DA 100%);
}

/* Alerts — card-like sheen */
.alert {
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(0, 8, 20, 0.06);
}

/* Tab bar — physical switch */
.tab-bar {
  background: linear-gradient(to bottom, #EBE4CC 0%, #F4EFE1 100%);
  border: 1px solid #C9C2A8;
  box-shadow:
    inset 0 1px 2px rgba(0, 8, 20, 0.10);
}

.tab-btn {
  background: transparent;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  color: var(--ink-muted);
}

.tab-btn.active {
  background:
    linear-gradient(to bottom, #004A8C 0%, #003566 100%);
  color: var(--accent-bright);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.22),
    0 0 0 1px #001D3D;
}

/* List items — subtle separators that feel engraved */
.list-item {
  border-bottom: 1px solid;
  border-image: linear-gradient(to right,
    transparent,
    rgba(0, 8, 20, 0.12),
    transparent) 1;
}

.history-date-header {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Collapsible cards — drawer feel */
.collapsible-header:hover {
  background: linear-gradient(to bottom, #FFFDF4 0%, #F9F1D4 100%);
}

.collapsible:not(.collapsed) .collapsible-header {
  border-bottom: 1px solid #E3DCC3;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.9);
}

.collapsible-chevron {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}