/* Perpetual Adoration - site stylesheet (served from resources/public). */

:root {
  --primary: #8B0000;
  --primary-hover: #A52A2A;
  --success: #28a745;
  --success-hover: #218838;
  --success-light: #E8F5E8;
  --warning: #ffc107;
  --warning-light: #FFFFE0;
  --danger: #dc3545;
  --danger-light: #FFCCCB;
  --info-hover: #0056b3;
  --light-blue: #ADD8E6;
  --secondary: #6c757d;
  --secondary-hover: #545b62;
  --light: #f8f9fa;
  --white: #ffffff;
  --gold: #FFD700;
  --background: #f6f6f6;
  --border: #ddd;
  --text: #333;
  --text-muted: #666;
  --disabled: #CCCCCC;
  --font: Arial, sans-serif;
}

/* ---- Page ------------------------------------------------------------- */

body {
  font-family: var(--font);
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--background);
  color: var(--text);
}

main {
  background: var(--white);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.clearfix { clear: both; }

.dev-banner {
  background-color: #ff6b6b;
  color: white;
  padding: 24px;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  margin-bottom: 18px;
}

header {
  background: var(--primary);
  color: var(--white);
  padding: 25px;
  margin-bottom: 20px;
  border-radius: 8px;
}

header h1 { margin: 0; font-size: 28px; }

nav { margin: 15px 0 0; }

nav a {
  margin-right: 15px;
  text-decoration: none;
  color: var(--gold);
  font-weight: bold;
}

nav a:hover { text-decoration: underline; color: var(--white); }

nav .login { float: right; }

.user-info {
  float: right;
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info span,
.user-info a { color: var(--gold); }

.lang-switch {
  float: right;
  margin-left: 15px;
  color: var(--gold);
}

.lang-switch a { color: var(--gold); }

footer {
  margin-top: 40px;
  padding-top: 20px;
  text-align: center;
  color: var(--text-muted);
}

footer img { max-width: 100%; margin-bottom: 10px; }

footer p { color: var(--text-muted); margin: 5px 0; }

.section { margin: 20px 0; }

.section h3 { color: var(--primary); }

.muted { color: var(--text-muted); }

.hint {
  color: var(--text-muted);
  display: block;
  margin-top: 4px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

/* ---- Buttons ---------------------------------------------------------- */

.button {
  border: none;
  padding: 10px 25px;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
  font-size: 16px;
  border-radius: 4px;
  display: inline-block;
  transition: background-color 0.2s ease;
  background-color: var(--primary);
  color: var(--white);
}

.button:hover { background-color: var(--primary-hover); }

.button-success { background-color: var(--success); }
.button-success:hover { background-color: var(--success-hover); }

.button-danger { background-color: var(--danger); }
.button-danger:hover { background-color: var(--primary); }

.button-secondary { background-color: var(--secondary); }
.button-secondary:hover { background-color: var(--secondary-hover); }

.button-small { padding: 4px 8px; font-size: 14px; }

.button:disabled,
.button:disabled:hover {
  background-color: var(--disabled);
  color: var(--text-muted);
  cursor: not-allowed;
}

.button-block { width: 100%; }

form.inline { margin: 0; display: inline; }

/* ---- Messages --------------------------------------------------------- */

.message {
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border: 1px solid;
}

.message-success { background: #d4edda; color: #155724; border-color: #c3e6cb; }
.message-error { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.message-warning { background: #fff3cd; color: #856404; border-color: #ffeaa7; }

.message-warning h3 { color: var(--warning); margin-top: 0; }
.message-warning a { color: var(--warning); font-weight: bold; }

/* Flash message container (layout); stays visible after an in-place submit
   on a scrolled page. */
.flash { position: sticky; top: 0; z-index: 10; }

/* ---- Forms ------------------------------------------------------------ */

.form-group { margin-bottom: 15px; }

.form-label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: var(--text);
}

.required { color: var(--danger); }

.form-input {
  width: 300px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.form-input[readonly] { background-color: var(--light); }
.form-input:disabled { background-color: var(--light); color: var(--text-muted); cursor: not-allowed; }
.form-input-date { width: 200px; }
.form-input-hour { width: 90px; }
.form-input-wide { width: 100%; max-width: 500px; }

.form-textarea {
  width: 100%;
  max-width: 500px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font);
  resize: vertical;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-label input { margin-right: 8px; }

/* A radio button with a title and a description, in a coloured box. */
.choice {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 15px;
  text-align: left;
  flex: 1;
  min-width: 220px;
}

.choice label { display: flex; align-items: flex-start; cursor: pointer; }
.choice input { margin: 5px 10px 0 0; }
.choice small { color: var(--text-muted); }

.choice-warning { background: #fff3cd; border-color: #ffeaa7; }
.choice-warning small { color: #856404; }
.choice-danger { background: #f8d7da; border-color: #f5c6cb; }
.choice-danger small { color: #721c24; }

.form-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.danger-zone {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--danger);
}

.danger-zone h3 { color: var(--danger); }
.danger-zone p { color: var(--text-muted); }

/* ---- Tables ----------------------------------------------------------- */

.table {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 10px;
  border: 1px solid var(--border);
}

.table th {
  background-color: var(--primary);
  color: var(--white);
  font-weight: bold;
}

/* ---- Schedule --------------------------------------------------------- */

.week-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
  padding: 10px;
  background: var(--light);
  border-radius: 5px;
}

.week-nav > div { display: flex; align-items: center; gap: 10px; }
.week-nav h3 { margin: 0; color: var(--text); }

.schedule-scroll { overflow-x: auto; }

.schedule {
  width: 100%;
  min-width: 820px;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 20px 0;
}

.schedule col.hour-col { width: 70px; }

.schedule th,
.schedule td { border: 1px solid var(--border); }

.schedule th {
  padding: 10px;
  background-color: var(--primary);
  color: var(--white);
  font-weight: bold;
}

.schedule th.weekend { background-color: var(--secondary); }
.schedule th .date { font-size: 0.9em; font-weight: normal; }

.schedule td { padding: 4px; text-align: center; vertical-align: middle; }
.schedule td.hour { padding: 8px; font-weight: bold; }
.schedule td.closed { background: #f0f0f0; padding: 8px; }

/* A cell is a link (to /slot) that opens the slot's <dialog>. */
.cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.2;
}

a.cell:hover,
a.cell:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }

.cell-short { display: none; }

.cell-empty { background: #e53935; color: var(--white); border-color: #b71c1c; }
.cell-one { background: #ffe0b2; color: #a04000; border-color: #fb8c00; }
.cell-ok { background: var(--success-light); color: #1b5e20; border-color: var(--success); }
.cell-user { background: var(--light-blue); color: var(--info-hover); border-color: var(--info-hover); }
.cell-past { background: #eee; color: #999; border-color: var(--border); font-weight: normal; }
.cell-break { background: #F5F5F5; color: var(--text-muted); border-color: #999; font-weight: normal; }

.slot-break-reason {
  font-size: 12px;
  margin-top: 2px;
  font-style: italic;
}

.schedule th.today { background-color: #c62828; box-shadow: inset 0 -4px 0 var(--gold); }
.schedule th .day-short,
.schedule th .date-short { display: none; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; margin: 10px 0 0; }
.legend .swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  vertical-align: middle;
  border: 2px solid;
  border-radius: 3px;
}

/* ---- Slot dialog / page ------------------------------------------------ */

.slot-dialog {
  border: none;
  border-radius: 10px;
  padding: 0;
  width: min(440px, 94vw);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  text-align: left;
  font-weight: normal;
}

.slot-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }

.slot-page { max-width: 480px; margin: 0 auto; border: 1px solid var(--border); border-radius: 10px; }

.slot-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--border);
}

.slot-panel-head h3 { margin: 0; font-size: 18px; color: var(--primary); }
.slot-panel-head .sub { margin-top: 4px; font-size: 14px; color: var(--text-muted); }

.dialog-close { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; }

.slot-panel-body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.slot-panel-body .message { margin: 0; }

.panel-form { display: flex; flex-direction: column; gap: 10px; }
.panel-form p { margin: 0; }

.dialog-hint { margin: -6px 0 0; font-size: 13px; color: var(--text-muted); text-align: center; }

.button-outline { background: var(--white); color: var(--success); border: 2px solid var(--success); }
.button-outline:hover { background: var(--success-light); }
.button-outline-danger { background: var(--white); color: var(--danger); border: 2px solid var(--danger); }
.button-outline-danger:hover { background: var(--danger-light); }

.slot-adorers { background: var(--light); border-radius: 5px; padding: 8px 12px; font-size: 14px; }
.slot-adorers ul { margin: 6px 0 0; padding-left: 18px; }
.slot-adorers li { margin: 4px 0; }
.slot-adorers li form { margin-left: 8px; }
.slot-adorers p { margin: 6px 0 0; }

.slot-panel-foot { display: flex; justify-content: flex-end; }

/* ---- Cancel recurring booking ----------------------------------------- */

.cancel-card-wrapper { max-width: 600px; margin: 0 auto; padding: 20px; }

.cancel-card {
  border: 2px solid;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
}

.cancel-card h2 { margin-bottom: 15px; }

.slot-details { padding: 15px; border-radius: 5px; margin: 15px 0; }
.slot-details .label { margin: 0; font-size: 1.1em; font-weight: bold; }
.slot-details .value { margin: 5px 0 0 0; font-size: 1.2em; color: var(--primary); }

.cancel-card .instructions { margin: 15px 0; line-height: 1.5; }

.choices { display: flex; flex-direction: column; gap: 15px; margin: 30px 0; }

.actions { display: flex; gap: 15px; justify-content: center; margin-top: 30px; }

/* ---- Admin ------------------------------------------------------------ */

.admin-links { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px; }

hr.spacious { margin: 30px 0; }

/* ---- Small screens ---------------------------------------------------- */

@media (max-width: 768px) {
  .table { font-size: 12px; }
  .table th, .table td { padding: 5px; }
  .form-input { width: 100%; max-width: none; }
  body { padding: 10px; }
  main { padding: 20px; }
}

/* Phones: symbol-only cells so the week fits without scrolling sideways,
   and the dialog becomes a bottom sheet. */
@media (max-width: 600px) {
  body { padding: 6px; }
  main { padding: 10px; }
  main h2 { font-size: 20px; margin: 4px 0 8px; }
  .dev-banner { padding: 8px; font-size: 13px; margin-bottom: 8px; }
  header { padding: 12px; margin-bottom: 10px; }
  header h1 { font-size: 22px; }
  header h5 { margin: 4px 0; }
  .user-info, .lang-switch { float: none; display: inline-flex; gap: 8px; margin: 0 12px 6px 0; font-size: 13px; }
  nav { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
  nav a { margin-right: 0; }
  nav .nav-sep { display: none; }
  .week-nav { flex-direction: column; align-items: stretch; gap: 8px; }
  .week-nav > div { justify-content: space-between; flex-wrap: wrap; }
  .week-nav > div:last-child { flex-direction: column; align-items: stretch; text-align: center; gap: 6px; }
  .week-nav h3 { font-size: 16px; }
  .week-nav .button { padding: 8px 10px; font-size: 14px; text-align: center; }
  .legend { font-size: 12px; gap: 4px 10px; }
  .schedule { min-width: 0; font-size: 12px; }
  .schedule col.hour-col { width: 42px; }
  .schedule th { padding: 4px 0; font-size: 12px; }
  .schedule td { padding: 2px; }
  .schedule td.hour { padding: 2px; font-size: 11px; }
  .schedule th .day-long,
  .schedule th .date-long { display: none; }
  .schedule th .day-short,
  .schedule th .date-short { display: block; }
  .cell { min-height: 40px; padding: 2px; font-size: 15px; }
  .cell-long { display: none; }
  .cell-short { display: inline; }
  .cell-break { font-size: 10px; }
  .slot-dialog {
    width: 100vw;
    max-width: 100vw;
    margin: auto 0 0 0;
    border-radius: 16px 16px 0 0;
  }
  .slot-dialog .button { padding: 14px; font-size: 17px; }
}

.pending-note { color: var(--warning); font-style: italic; }