:root{
	--bg:#eaf2f6;
	--card:#f7fbfd;
	--muted:#6b7280;
	--primary:#0b7a5f;
	--primary-600:#0a6b53;
	--accent:#06a;
	--radius:10px;
}

*{box-sizing:border-box}
body{font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; padding:0; background:#F8F7EB url('/assets/img/bg-all-other-pages.png') no-repeat top center; background-size: 100% auto; color:#0f172a}

.container{max-width:1100px; margin:24px auto; padding:0 16px}

header{background:transparent; padding:12px 0}
.site-header{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px; background:#ffffff; padding:12px 16px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.brand h1{margin:0; font-size:1.15rem}
.brand a{color:var(--primary); text-decoration:none; font-weight:600}
.header-logo{height:50px; display:block}

nav.site-nav{display:flex; gap:12px; align-items:center; background:#ffffff; padding:12px 16px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.08)}
nav.site-nav a, nav.site-nav form button{background:transparent; border:none; color:var(--muted); padding:8px 12px; border-radius:8px; text-decoration:none; cursor:pointer}
nav.site-nav a:hover, nav.site-nav form button:hover{background:rgba(11,122,95,0.08); color:var(--primary-600)}

main .card{background:#ffffff; border-radius:var(--radius); padding:20px; box-shadow:0 10px 24px rgba(15,23,42,0.06); border:1px solid rgba(2,6,23,0.03)}

form label{display:block; margin-bottom:8px; font-weight:600; color:#0f172a}
input, select, textarea{padding:12px 14px; width:100%; max-width:380px; border:1px solid #e2e8ef; border-radius:6px; background:#ffffff; margin-bottom:12px; box-shadow: inset 0 1px 2px rgba(2,6,23,0.03)}
input:focus, select:focus, textarea:focus{outline:none; box-shadow:0 0 0 6px rgba(11,122,95,0.08); border-color:var(--primary-600)}

/* Inline inputs (for grids/compact layouts) */
.form-inline { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.form-inline input, .form-inline select { margin-bottom: 0; flex: 0 1 auto; width: auto; min-width: 80px; }
.form-inline label { margin-bottom: 0; flex: 0 0 auto; white-space: nowrap; padding-top: 12px; }

button, .btn-primary{display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background:linear-gradient(#86bf3e, #5a872c); color:white; border:none; border-radius:6px; cursor:pointer; text-decoration:none; font-weight:bold}
button.secondary, .btn-secondary{background:#f2f4f2; color:#2f3a24; border:none; text-decoration:none; display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:6px; cursor:pointer}
.btn-gray{display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background:#f2f4f2; color:#2f3a24; border:none; border-radius:6px; cursor:pointer; text-decoration:none}
button:hover{background:linear-gradient(#76af2e, #4a771c)}
button.secondary:hover, .btn-secondary:hover{background:#e2e4e2}
.btn-gray:hover{background:#e2e4e2}

.error{color:#b00020; padding:12px; background:#fff5f6; border-radius:8px; margin-bottom:12px; border-left:4px solid #b00020}
.message{color:#166534; padding:12px; background:#f0fdf4; border-radius:8px; margin-bottom:12px; border-left:4px solid #4caf50}

.appointments-table{width:100%; border-collapse:collapse; margin-top:20px; font-size:0.8rem}
.appointments-table thead th{padding:10px 8px; text-align:left; font-weight:700; color:var(--muted); font-size:0.75rem}
.appointments-table tbody tr:nth-child(odd){background:#ffffff}
.appointments-table tbody tr:nth-child(even){background:#f9f9f9}
.appointments-table td{padding:10px 8px; border-bottom:1px solid #eef2f7; font-size:0.8rem}
.appointments-table a{color:var(--primary)}
.appointments-table button{font-size:0.75rem; padding:6px 10px}

.table-wrap{overflow:auto; border-radius:8px}

/* Responsive layout */
@media (max-width:800px){
	.site-header{flex-direction:column; align-items:flex-start}
	nav.site-nav{width:100%; display:flex; gap:8px; flex-wrap:wrap}
	.brand h1{font-size:1rem}
	.container{padding:0 12px}
}

/* Small helpers */
.muted{color:var(--muted)}
.small{font-size:0.9rem}

.page-actions{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}

.form-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
@media (max-width:800px){.form-grid{grid-template-columns:1fr}}

/* Make footer spacing */
footer{margin-top:28px; color:var(--muted); font-size:0.9rem; text-align:center; padding:18px 0}

/* Radio buttons and checkboxes */
input[type="radio"], input[type="checkbox"]{width:auto; max-width:none; margin-right:8px; margin-bottom:0; padding:0; cursor:pointer; vertical-align:middle}

/* Container for radio/checkbox groups */
.form-check-group{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:12px; align-items:center; max-width:380px}
.form-check-item{display:flex; align-items:center; gap:6px; margin-bottom:12px}
.form-check-item label{margin-bottom:0; font-weight:400; color:#0f172a}

/* Table action buttons (small, no gradient) */
.table-action-btn{display:inline-flex; align-items:center; gap:4px; padding:6px 12px; background:#f2f4f2; color:#2f3a24; border:none; border-radius:6px; cursor:pointer; text-decoration:none; font-size:0.75rem; font-weight:normal}
.table-action-btn:hover{background:#e2e4e2}
.table-action-btn.danger{color:#b00020}
.table-action-btn.danger:hover{background:#fff5f6}

/* Standard form field spacing to keep vertical rhythm consistent */
.form-field{margin-bottom:12px}

/* Indented fields use same horizontal alignment as other inputs (avoid inline margin-left) */
.field-indent{margin-left:0; padding-left:0}

/* Category buttons for appointment type selection */
.category-btn{padding:14px 18px; min-width:140px; border-radius:10px; border:1px solid #e2e8ef; background:#fff; cursor:pointer; display:inline-flex; flex-direction:column; align-items:flex-start; gap:6px}
.category-btn small{font-weight:400; color:var(--muted)}
.category-btn.selected{background:var(--primary); color:#fff; border-color:var(--primary-600)}
.category-btn:disabled{opacity:0.5; cursor:not-allowed}

/* Category selection page */
.category-selection{display:flex; flex-direction:column; gap:16px; margin-bottom:24px; max-width:600px}
.category-card{display:block; padding:24px 28px; background:#fff; border:1px solid #e2e8ef; border-radius:10px; text-decoration:none; cursor:pointer; transition:all 0.2s ease}
.category-card:hover{border-color:var(--primary); box-shadow:0 4px 12px rgba(11,122,95,0.12)}
.category-title{font-size:1.25rem; font-weight:700; color:#0f172a; margin-bottom:6px}
.category-subtitle{font-size:0.95rem; color:var(--muted); line-height:1.4}