:root {
  --bg: #f7f7fb;
  --fg: #1b1b1f;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #e5e7eb;
  --accent: #2563eb;
}

* { box-sizing: border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif; }
body { margin:0; background: var(--bg); color: var(--fg); }
.container { max-width: 980px; margin: 24px auto; background: var(--card); border:1px solid var(--border); border-radius:16px; padding:24px; box-shadow: 0 8px 30px rgba(0,0,0,0.04); }
h1 { margin: 0 0 6px 0; font-size: 26px; }
h2 { margin-top: 24px; font-size: 20px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.muted { color: var(--muted); margin-top: 4px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid > div { display: flex; flex-direction: column; gap: 6px; }

label { font-size: 12px; color: var(--muted); }
input[type="text"], input[type="date"], input[type="tel"], input[type="number"], textarea, input[type="file"] {
  padding: 10px 12px; border:1px solid var(--border); border-radius: 12px; background: #fff;
}
textarea { resize: vertical; }

table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th, td { border: 1px solid var(--border); padding: 8px; text-align: left; }
th { background: #f1f5f9; }

button { appearance: none; border:0; background: var(--accent); color:#fff; padding: 10px 16px; border-radius: 12px; cursor:pointer; }
button.link { background: transparent; color: #ef4444; padding: 4px 8px; }
.actions { display: flex; justify-content: flex-end; margin-top: 20px; }

.sig-wrap { border:1px dashed var(--border); border-radius: 12px; padding: 8px; background: #fff; width: 100%; max-width: 620px; }
#sig { width: 100%; display: block; border-radius: 8px; background: #fafafa; }
.sig-tools { margin-top: 8px; }
@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
}

/* Flash messages */
.flash-messages {
    margin: 10px 0;
}

.alert {
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error, .alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}
.nav-button, .action-button {
    padding: 12px 24px;
    font-size: 16px;
    min-width: 120px;
    height: 45px;
}

/* Specific styles for different buttons */
.dashboard-btn {
    background-color: #4CAF50;
    color: white;
}

.change-btn {
    background-color: #2196F3;
    color: white;
}

.logout-btn {
    background-color: #f44336;
    color: white;
}

.add-btn {
    background-color: #FF9800;
    color: white;
}