/* static/style.css — minimal, clean stylesheet */

/* ------------------------------------------------------------------ */
/* Reset & base                                                          */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  background: #f3f4f6;
  color: #1f2937;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Navigation                                                            */
/* ------------------------------------------------------------------ */
.navbar {
  background: #1e3a5f;
  color: #fff;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.navbar-brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  flex: 1;
}
.navbar-brand:hover { text-decoration: none; color: #93c5fd; }
.navbar-user { font-size: 0.9rem; color: #93c5fd; }
.navbar-link { color: #fbbf24; font-size: 0.9rem; }

/* ------------------------------------------------------------------ */
/* Flash messages                                                        */
/* ------------------------------------------------------------------ */
.flash-container { padding: 0.5rem 1.5rem; }
.alert {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.alert-success  { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.alert-danger   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-warning  { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.alert-info     { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }

/* ------------------------------------------------------------------ */
/* Layout                                                                */
/* ------------------------------------------------------------------ */
.main-content {
  flex: 1;
  max-width: 960px;
  width: 100%;
  margin: 1.5rem auto;
  padding: 0 1.5rem;
}
.footer {
  text-align: center;
  padding: 1rem;
  color: #9ca3af;
  font-size: 0.8rem;
}

/* ------------------------------------------------------------------ */
/* Cards                                                                 */
/* ------------------------------------------------------------------ */
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.card-narrow { max-width: 420px; margin: 2rem auto; }
.card-title  { margin-bottom: 1.25rem; font-size: 1.4rem; color: #1e3a5f; }

.school-card h2 { font-size: 1.2rem; color: #1e3a5f; }
.school-header  { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.badge {
  background: #dbeafe; color: #1e40af;
  padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem;
}

/* ------------------------------------------------------------------ */
/* Forms                                                                 */
/* ------------------------------------------------------------------ */
fieldset.form-section {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
fieldset.form-section legend {
  font-weight: 600;
  color: #1e3a5f;
  padding: 0 0.4rem;
  font-size: 1rem;
}

.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.3rem;
  color: #374151;
}
.form-control {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 0.95rem;
  color: #1f2937;
  background: #fff;
  transition: border-color 0.15s;
}
.form-control:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.form-check { display: flex; align-items: center; gap: 0.5rem; }
.form-check-input { width: 1rem; height: 1rem; cursor: pointer; }
.form-error { color: #dc2626; font-size: 0.85rem; display: block; margin-top: 0.2rem; }

.form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                               */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border-radius: 5px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
  text-decoration: none;
}
.btn-primary  { background: #2563eb; color: #fff; }
.btn-primary:hover  { background: #1d4ed8; text-decoration: none; }
.btn-secondary { background: #e5e7eb; color: #1f2937; }
.btn-secondary:hover { background: #d1d5db; text-decoration: none; }
.btn-full { width: 100%; text-align: center; }

/* ------------------------------------------------------------------ */
/* Tables                                                                */
/* ------------------------------------------------------------------ */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  font-size: 0.9rem;
}
.table th, .table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}
.table thead th {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
}
.table-detail th { width: 40%; color: #374151; font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Misc                                                                  */
/* ------------------------------------------------------------------ */
.muted { color: #9ca3af; font-style: italic; }
h1 { font-size: 1.6rem; margin-bottom: 0.75rem; color: #1e3a5f; }
h2 { font-size: 1.2rem; margin: 1rem 0 0.5rem; color: #374151; }
h3 { font-size: 1rem; margin: 0.75rem 0 0.4rem; color: #374151; }

.form-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.nowrap { white-space: nowrap; }
.required { color: #dc2626; }
.inline-form { display: inline; }

/* Wide layout for the table pages (employees, reported changes) */
.main-content-wide { max-width: min(1800px, 98vw); }

/* ------------------------------------------------------------------ */
/* Badges (employee states, counters)                                    */
/* ------------------------------------------------------------------ */
.badge-green  { background: #d1fae5; color: #065f46; }
.badge-orange { background: #fef3c7; color: #92400e; }
.badge-red    { background: #fee2e2; color: #991b1b; }
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-grey   { background: #e5e7eb; color: #374151; }

.btn-count {
  display: inline-block;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 0 0.5rem;
  margin-left: 0.35rem;
  font-size: 0.85em;
}
.btn-secondary .btn-count { background: rgba(0,0,0,0.08); }

.state-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.85rem; }

/* Quick-filter chips above the table */
.btn-chip {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
  border-radius: 999px;
}
.btn-chip:hover { background: #f3f4f6; }
.btn-chip.is-active { background: #1e3a5f; border-color: #1e3a5f; color: #fff; }

/* Journal preview */
.journal {
  background: #111827;
  color: #e5e7eb;
  padding: 0.9rem 1rem;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

/* ------------------------------------------------------------------ */
/* Interactive tables — DataTables (static/vendor/datatables/)            */
/* + our column filters (static/js/tables.js)                            */
/* ------------------------------------------------------------------ */
.table-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.table-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.table-search { width: auto; min-width: 240px; flex: 0 1 320px; }

.table-wrap { overflow-x: auto; }

/* DataTables theming.
   The library is fully driven by CSS variables and its stylesheet is loaded
   before this file, so overriding the variables here is enough — no need to
   fight its selectors. */
:root {
  --dt-header_padding: 0.55rem 0.75rem;
  --dt-header_border: 1px solid #e5e7eb;
  --dt-body_padding: 0.55rem 0.75rem;
  --dt-paging-button_padding: 0.25rem 0.7rem;
  --dt-paging-button_border-radius: 5px;
  --dt-paging-button_background-current: #1e3a5f;
  --dt-paging-button_border-current: 1px solid #1e3a5f;
  --dt-paging-button_color-current: #fff;
  --dt-paging-button_background-current-hover: #16304f;
  --dt-paging-button_border-current-hover: 1px solid #16304f;
  --dt-paging-button_color-current-hover: #fff;
}

/* The few structural bits that are not variables */
table.table.dataTable {
  width: 100%;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  border-collapse: collapse;
}
table.table.dataTable > thead > tr > th {
  background: #f9fafb;
  color: #374151;
  font-weight: 600;
  /* let long Czech column titles wrap instead of widening the whole table —
     the sort arrow and the filter funnel already take room in the header */
  white-space: normal;
  min-width: 5.5rem;
}
table.table.dataTable > tbody > tr > td { border-bottom: 1px solid #e5e7eb; }
table.table.dataTable > tbody > tr:hover > td { background: #f9fafb; }
table.table.dataTable > thead > tr > th div.dt-column-header { align-items: center; }

/* Paging below the table */
div.dt-container div.dt-layout-row { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
div.dt-container .dt-paging .dt-paging-button { font-size: 0.85rem; }

/* Column filter dropdown (funnel in the header + panel appended to <body>) */
.filter-funnel {
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0 0.2rem;
  line-height: 1;
}
.filter-funnel:hover { color: #2563eb; }
.filter-funnel.is-active { color: #2563eb; }
.filter-funnel.is-active::after { content: "•"; }

.filter-panel {
  /* fixed, so no scroll container can clip it;
     the exact top/left is set by tables.js when the panel opens */
  position: fixed;
  z-index: 50;
  width: 240px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  padding: 0.6rem;
  font-weight: 400;
  font-size: 15px;
  white-space: normal;
  text-align: left;
}
.filter-panel-search {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.filter-panel-list { max-height: 220px; overflow-y: auto; }
.filter-item {
  display: block;
  padding: 0.15rem 0.1rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.filter-item:hover { background: #f3f4f6; }
.filter-item-all { border-bottom: 1px solid #e5e7eb; margin-bottom: 0.25rem; padding-bottom: 0.3rem; }
.filter-panel-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; }

/* State dropdown inside the table */
.state-form { display: flex; align-items: center; gap: 0.3rem; }
.state-select {
  border: 1px solid #d1d5db;
  border-radius: 5px;
  padding: 0.2rem 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.state-select.state-green  { background: #d1fae5; color: #065f46; }
.state-select.state-orange { background: #fef3c7; color: #92400e; }
.state-select.state-red    { background: #fee2e2; color: #991b1b; }
.state-select.state-blue   { background: #dbeafe; color: #1e40af; }
.state-select.state-grey   { background: #e5e7eb; color: #374151; }

/* ------------------------------------------------------------------ */
/* Dialog ("Nahlásit změnu")                                             */
/* ------------------------------------------------------------------ */
.dialog {
  border: none;
  border-radius: 8px;
  padding: 1.5rem;
  width: min(480px, 92vw);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  color: #1f2937;
}
.dialog::backdrop { background: rgba(17, 24, 39, 0.45); }
.dialog h2 { margin-top: 0; color: #1e3a5f; }

/* ------------------------------------------------------------------ */
/* Questionnaire (templates/_fields.html)                                */
/* ------------------------------------------------------------------ */
.main-content-form { max-width: 1100px; }
.card-form { padding-bottom: 1rem; }
.card-message { text-align: center; padding: 2.5rem 1.5rem; }
.card-message h1 { color: #1e3a5f; }

/* two columns of fields on wide screens, one on narrow ones */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 1.25rem;
}
.form-grid .form-group { min-width: 0; }

/* the section filled in by the headmaster stands out from the rest */
.form-section-headmaster {
  border-color: #1e3a5f;
  background: #f8fafc;
}
.form-section-headmaster legend { color: #1e3a5f; }

.section-help {
  color: #6b7280;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
/* the part the reader must not change (headmaster section on the employee link) */
.section-help-locked {
  color: #b91c1c;
  font-weight: 700;
  font-size: 0.9rem;
}
.field-help {
  display: block;
  color: #6b7280;
  font-size: 0.8rem;
  margin-top: 0.2rem;
}
.form-group.has-error .form-control { border-color: #dc2626; }

/* fields somebody else owns (the headmaster part on the employee's link) */
.form-control[readonly],
.form-control[disabled] {
  background: #eef1f5;
  color: #4b5563;
  cursor: not-allowed;
}
.form-control[readonly]:focus,
.form-control[disabled]:focus { border-color: #d1d5db; box-shadow: none; }

/* repeating sections (děti, vzdělání, …) */
.repeat-table { margin-bottom: 0.5rem; }
.repeat-table th { font-size: 0.8rem; }
.repeat-table td { padding: 0.3rem 0.35rem; }
.repeat-table .form-control { font-size: 0.9rem; padding: 0.35rem 0.5rem; }
.repeat-remove-col { width: 2.2rem; text-align: center; }
.btn-remove-row {
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}
.btn-remove-row:hover { color: #dc2626; }

/* action bar that stays reachable on a long questionnaire */
.form-actions-sticky {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 0.75rem 0;
  margin-top: 1rem;
}

/* link for the employee */
.public-link {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  padding: 0.9rem 1rem;
  margin: 1rem 0;
}
.public-link p { margin: 0.25rem 0 0.6rem; }
.public-link-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.public-link-row .form-control { flex: 1 1 320px; font-family: monospace; font-size: 0.85rem; }

/* detail of a card */
.detail-section { margin-bottom: 1.5rem; }
.detail-section h2 { color: #1e3a5f; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.3rem; }

/* a link that looks like a link but is a button (row actions) */
.btn-link {
  border: none;
  background: transparent;
  color: #2563eb;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.btn-link:hover { text-decoration: underline; }
.row-actions > * + * { margin-left: 0.6rem; }

/* ------------------------------------------------------------------ */
/* Tasks                                                                 */
/* ------------------------------------------------------------------ */
.dashboard-filter { margin-bottom: 0.75rem; }
tr.task-overdue td { background: #fef2f2; }
tr.task-alert td { background: #fffbeb; }