* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #f6f7fb; color: #1f2937; }
.container { max-width: 1200px; margin: 0 auto; padding: 24px; }
.site-header, .site-footer { background: #ffffff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 10; }
.site-footer { border-top: 1px solid #e5e7eb; border-bottom: none; margin-top: 48px; }
.site-header .container, .site-footer .container { display: flex; align-items: center; justify-content: space-between; }
.brand { font-weight: 600; color: #111827; text-decoration: none; }
.welcome { margin-right: 12px; color: #6b7280; }
.btn { display: inline-block; padding: 8px 12px; border-radius: 6px; text-decoration: none; background: #e5e7eb; color: #111827; }
.btn.primary { background: #2563eb; color: #ffffff; }
.btn.small { padding: 6px 8px; font-size: 12px; }
.btn.danger { background: #ef4444; color: #ffffff; }
.card { background: #ffffff; padding: 24px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.form-row { margin-bottom: 16px; display: flex; flex-direction: column; }
label { font-weight: 600; margin-bottom: 6px; }
input { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; }
select { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; background: #fff; }
.form-actions { margin-top: 12px; }
.flash { list-style: none; padding: 0; margin: 0 0 16px; }
.flash li { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; padding: 10px 12px; border-radius: 8px; }
/* Dashboard layout */
.layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 24px; align-items: start; }
.sidebar { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; min-height: calc(100vh - 140px); position: sticky; top: 88px; }
.sidebar-title { font-weight: 600; margin-bottom: 8px; color: #374151; }
.sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sidebar-item { }
.sidebar-link { display: block; padding: 10px 12px; border-radius: 8px; color: #374151; text-decoration: none; }
.sidebar-link:hover { background: #eef2ff; color: #1e40af; }
.sidebar-link.active { background: #e0e7ff; color: #1e3a8a; font-weight: 600; }

/* Content area alignment */
.content { min-width: 0; }
.content .card { margin: 0; }

/* Card header */
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

/* Table */
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #e5e7eb; }
.table thead th { font-weight: 600; color: #374151; background: #f9fafb; }
.table tbody tr:hover { background: #f9fafb; }
.actions-cell { white-space: nowrap; }
.actions { display: inline-flex; gap: 6px; align-items: center; }

/* Modal */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: #ffffff; margin: 5% auto; padding: 0; border-radius: 12px; width: 90%; max-width: 600px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #e5e7eb; }
.modal-header h2 { margin: 0; }
.close { color: #6b7280; font-size: 28px; font-weight: bold; cursor: pointer; }
.close:hover { color: #374151; }
.modal form { padding: 24px; }
textarea { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical; }

/* Tweak card spacing on large screens */
@media (min-width: 1200px) {
  .container { max-width: 1280px; }
}

/* Center login card */
.login-wrap { display: grid; place-items: center; min-height: calc(100vh - 160px); }
.login-card { width: 100%; max-width: 420px; }

/* Toggle Switch */
.toggle-container { display: flex; align-items: center; gap: 12px; }
.toggle-switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #d1d5db; transition: 0.3s; border-radius: 26px; }
.toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; }
.toggle-switch input:checked + .toggle-slider { background-color: #2563eb; }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(24px); }
.toggle-label { font-weight: 600; margin-bottom: 0; }

/* Responsive */
@media (max-width: 768px) {
  .container { padding: 16px; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: relative; top: 0; min-height: auto; }
}