/* =========================
   ĜENERALA STILO
   ========================= */

body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  background: #dadcde;
  color: #1e1e1e;
  /*   line-height: 1.5; */
  margin: 20px;
}

h1 {
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -0.5px;
}

/* Tabeloj */
table {
  border-collapse: separate;
  border-spacing: 5px;
  width: 100%;
  margin-bottom: 60px;
  background: white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

th {
  background: #f3f4f6;
  font-weight: 600;
  padding: 12px;
}

td {
  vertical-align: top;
  border: none;
  padding: 10px;
}

tbody tr:not(:last-child) td {
  /*   border-bottom: 1px solid #eee; */
}

.hora {
  background: #f9fafb;
  font-weight: 600;
  color: #6b7280;
  width: 80px;
}

/* Eventoj */
.evento {
  vertical-align: top;
  padding: 5px;
  margin-bottom: 6px;
  font-size: 0.9em;
  height: 100%;
}

.evento strong {
  font-size: 1em;
}

.evento em {
  /*   color: #333; */
}

/* Lanes / grid de eventoj (opcia se grid estas uzata) */
.eventos-row {
  display: grid;
  gap: 6px;
}

/* =========================
   SUPRA BRETO
   ========================= */

.top-bar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}

/* Komuna stilo por butonoj kaj abonligilo */
/* Unuigi ĉiujn butonojn kaj ligilojn de la supra breto */
.top-bar a,
.top-bar button {
  all: unset; /* Forigas ĉiujn defaŭltajn stilojn de la retumilo */
  display: inline-block; /* Kondutas sin kiel butono */
  padding: 8px 16px;
  border-radius: 999px; /* rondigitaj randoj */
  background: #374151;
  color: white;
  font-size: 0.9em; /* uniforma grandeco */
  font-weight: 500;
  text-align: center;
  cursor: default; /* normala kursoro por butonoj */
  text-decoration: none; /* forigi substrekojn de ligiloj */
  transition: all 0.2s ease;
  line-height: 1.2;
  box-sizing: border-box;
}

.top-bar a:hover,
.top-bar button:hover {
  background: #4b5a6f;
  /*   transform: translateY(-1px); */
}

/* =========================
 * Koloroj                   *
 * ========================= */

.cat-e {
  background-color: #f6bf26;
}

.cat-mangho {
  background-color: #feeeff;
  /*   background-color: #d50000; */
  color: green;
}

.cat-ml {
  background-color: #e67c73;
}

.cat-p {
  background-color: #d50000;
  color: white;
}

.cat-k {
  background-color: #33b679;
}

.cat-d {
  background-color: #f4511e;
  color: white;
}

.cat-m {
  background-color: #039be5;
  color: white;
}

.cat-matena {
  background-color: #ffd685;
}
.cat-s {
  background-color: #8e24aa;
  color: white;
}

.cat-vp {
  background-color: #3f51b5;
  color: white;
}

.cat-ludo {
  background-color: #8e24aa;
  color: white;
}

/* =========================
   MALHELA REĜIMO
   ========================= */

body.dark {
  /*   background: #001c23; */
  background: #0f172a;
  color: #e5e7eb;
}

body.dark table {
  background: #334155;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

body.dark th {
  background: #283343;
}

body.dark .hora {
  background: #283343;
  color: #94a3b8;
}

/* Supra breto malhela (butono toggle + abonligilo) */
body.dark .top-bar a,
body.dark .top-bar button {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border-color: #555;
}

body.dark .top-bar a:hover,
body.dark .top-bar button:hover {
  background-color: #3a3a3a;
}

tbody {
  border: 1px solid #333;
}

body.dark tbody {
  outline: 1px solid #555;
}
.solo-evento {
  /*   border-right: none; */
}
.malplena-dekstra {
  border: none;
}

.malplena {
  /*  border-right: none;
  border-left: none;
  border-top: none;*/
  border: none;
}

/* =========================
 * KOLOROJ Malhela reĝimo
 *  ========================= */

body.dark .cat-e {
  background-color: #a37c1a;
  color: #d0d0d0;
}

body.dark .cat-mangho {
  background-color: #5a505a;
  color: #ffffff;
}

body.dark .cat-ml {
  background-color: #a0514a;
  color: #d0d0d0;
}

body.dark .cat-p {
  background-color: #7a0000;
  color: #d0d0d0;
}

body.dark .cat-k {
  background-color: #1f6d48;
  color: #d0d0d0;
}

body.dark .cat-d {
  background-color: #993010;
  color: #d0d0d0;
}

body.dark .cat-m {
  background-color: #02608f;
  color: #d0d0d0;
}

body.dark .cat-matena {
  background-color: #a37d45;
  color: #d0d0d0;
}

body.dark .cat-s {
  background-color: #5b176f;
  color: #d0d0d0;
}

body.dark .cat-vp {
  background-color: #2a3675;
  color: #d0d0d0;
}

body.dark .cat-ludo {
  background-color: #5b176f;
  color: #d0d0d0;
}

/* =========================
 *   REGULOJ POR PRESADO (A4, 1 tago je folio)
 *   ========================= */
@media print {
  /* Devigi A4 landscape */
  @page {
    size: A4 landscape;
    margin: 5mm;
  }

  /* Kaŝi kontrolojn kaj elementojn ne necesajn dum presado */
  .top-bar,
  #icsFile,
  #toggleTheme,
  #subscribeICS,
  h1 {
    display: none !important;
  }

  /* Devigi kolorojn de "hela reĝimo" dum presado */
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 13px !important;
    /* margin: 0 !important;
    padding: 0 !important; */
  }

  /* Tabeloj - baza stilo */
  table {
    /* border-collapse: collapse !important; */
    border: 1px solid #333 !important;
    width: 100% !important;
    /* page-break-after: always !important; */ /* FORIGITA - tio kaŭzis la problemon */
  }

  th,
  td {
    border: 1px solid #333 !important;
    padding: 2px !important;
    vertical-align: top !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  th {
    background-color: #e0e0e0 !important;
    color: #000 !important;
    font-size: 13px !important;
  }

  /* Kolono de horo */
  .hora {
    background-color: #f7f7f7 !important;
    color: #000 !important;
    font-size: 13px !important;
    padding: 2px !important;
  }

  /* Eventoj */
  .evento {
    vertical-align: top !important;
    padding: 2px !important;
    margin: 0 !important;
    font-size: 12px !important; /* más compacta */
    line-height: 1.2 !important;
  }

  .evento strong {
    font-size: 12px !important;
  }

  .evento em {
    font-size: 11px !important;
    color: #333 !important;
  }

  /* kaŝi priskribojn */
  .evento .desc {
    display: none !important;
  }

  /* Por ke la vicoj okupu la tutan alton,
   oni simple lasas la retumilon distribui
   la spacon aŭtomate */
  table.day-table {
    height: 180mm !important; /* Alteco totala disponebla (210mm - 2*10mm de margen) */
    max-height: 180mm !important;
    display: table !important; /* Oni certigu ke ĝi estu normala tabelo */
    page-break-after: always;
    page-break-before: auto;
  }

  /* La vicoj aŭtomate streĉiĝos por plenigi la alton */
  table.day-table tbody {
    height: 100% !important;
    display: table-row-group !important;
  }

  table.day-table tr {
    height: auto !important; /* Ni lasas la retumilon kalkuli */
  }

  /* Tio ĉi estas kio igas la vicojn okupi la disponeblan spacon */
  table.day-table tbody:after {
    content: "" !important;
    display: none !important; /* Ni ne bezonas trukojn */
  }

  /* Eviti ke vicoj disiĝu inter paĝoj */
  table,
  thead,
  tbody,
  tr,
  td,
  .evento {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* ALDONITA - Devigi ke la thead montriĝu kompleta en ĉiu paĝo */
  thead {
    display: table-header-group !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  /* ALDONITA - Certigi ke la unua vico de thead ĉiam estu videbla */
  thead tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  /* Ĉiu tabelo (ĉiu tago) en sia propra paĝo */
  table.day-table {
    /* page-break-after: always; */ /* Ĝi jam estas supre */
    /* break-after: page; */
    width: 100% !important;
  }

  .malplena,
  .malplena-dekstra {
    padding: 0 !important;
  }

  .malplena-dekstra,
  .malplena {
    border: none !important;
  }
}