/* docket's stylesheet, structured after ../miniflux-v2's
   internal/ui/static/css/{system,common}.css: a :root custom-property
   palette, a prefers-color-scheme override of that same palette, and
   rules below that reference only variables. One file, not
   Miniflux's six-bundle theme matrix — there's no theme picker here,
   so "system" is the only theme there is. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  color-scheme: light dark;

  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --body-color: #333;
  --body-background: #fff;
  --title-color: #333;
  --link-color: #3366cc;
  --link-hover-color: #333;

  --header-border-color: #ddd;
  --header-link-color: #444;
  --header-active-link-color: #444;

  --page-header-title-border-color: #333;

  --table-border-color: #ddd;
  --table-th-background: #fcfcfc;
  --table-tr-hover-background-color: #f9f9f9;

  --button-primary-border-color: #3079ed;
  --button-primary-background: #4d90fe;
  --button-primary-color: #fff;
  --button-primary-focus-border-color: #2f5bb7;
  --button-primary-focus-background: #357ae8;

  --input-border-color: #ccc;
  --input-background: #fff;
  --input-color: #333;
  --input-focus-border-color: rgba(82, 168, 236, 0.8);
  --input-focus-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);

  --alert-error-color: #b94a48;
  --alert-error-background: #f2dede;
  --alert-error-border-color: #eed3d7;

  --panel-background: #fcfcfc;
  --panel-border-color: #ddd;

  --item-border-color: #ddd;
  --item-overdue-background: #fcf8e3;
  --item-overdue-border-color: #f9e883;
  --item-unresolved-background: #fdf0e8;
  --item-unresolved-border-color: #e8b894;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-color: #efefef;
    --body-background: #222;
    --title-color: #efefef;
    --link-color: #aaa;
    --link-hover-color: #fff;

    --header-border-color: #444;
    --header-link-color: #ccc;
    --header-active-link-color: #fff;

    --page-header-title-border-color: #efefef;

    --table-border-color: #444;
    --table-th-background: #2a2a2a;
    --table-tr-hover-background-color: #2a2a2a;

    --button-primary-border-color: #555;
    --button-primary-background: #333;
    --button-primary-color: #efefef;
    --button-primary-focus-border-color: #666;
    --button-primary-focus-background: #444;

    --input-border-color: #555;
    --input-background: #2a2a2a;
    --input-color: #efefef;

    --alert-error-color: #f2b0af;
    --alert-error-background: #4a2a2a;
    --alert-error-border-color: #6a3a3a;

    --panel-background: #2a2a2a;
    --panel-border-color: #444;

    --item-border-color: #444;
    --item-overdue-background: #3a3624;
    --item-overdue-border-color: #6a5e2a;
    --item-unresolved-background: #3a2c22;
    --item-unresolved-border-color: #6a4a30;
  }
}

body {
  font-family: var(--font-family);
  color: var(--body-color);
  background: var(--body-background);
  line-height: 1.5;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

h1, h2, h3 { color: var(--title-color); }
a { color: var(--link-color); }
a:hover { color: var(--link-hover-color); }

.header {
  border-bottom: 1px solid var(--header-border-color);
  margin-bottom: 1.5rem;
}

.header nav {
  max-width: 900px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.header .logo a {
  color: var(--title-color);
  font-weight: 600;
  text-decoration: none;
  font-size: 1.1rem;
}

.header ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  flex: 1;
}

.header a, .header .logout-button {
  color: var(--header-link-color);
  text-decoration: none;
}
.header a:hover, .header .logout-button:hover { color: var(--link-hover-color); }
.header .active a { color: var(--header-active-link-color); font-weight: 600; }

.header .logout-form { display: inline; margin-left: auto; }
.header .logout-button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.page-header { margin-bottom: 1rem; }
.page-header h1 {
  font-weight: 500;
  font-size: 1.5rem;
  border-bottom: 1px dotted var(--page-header-title-border-color);
  padding-bottom: 0.5rem;
}

.login-form {
  margin: 15vh auto 0;
  max-width: 300px;
  text-align: center;
}
.login-form h1 { margin-bottom: 0.5rem; }
.login-form p { margin-bottom: 1.5rem; color: var(--body-color); }

.button {
  display: inline-block;
  appearance: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border: 1px solid;
  text-decoration: none;
  border-radius: 0.25rem;
}

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

.button-danger { border-color: #b0281a; background: #d14836; color: #fff; }
.button-danger:hover { background: #c53727; color: #fff; }

table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
table, th, td { border: 1px solid var(--table-border-color); }
th, td { padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
th { background: var(--table-th-background); font-weight: 500; }
tr:hover { background-color: var(--table-tr-hover-background-color); }

.column-15 { width: 15%; }
.column-20 { width: 20%; }
.column-25 { width: 25%; }
.column-40 { width: 40%; }

.items { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.item {
  border: 1px solid var(--item-border-color);
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
}
.item-overdue { background: var(--item-overdue-background); border-color: var(--item-overdue-border-color); }
.item-unresolved { background: var(--item-unresolved-background); border-color: var(--item-unresolved-border-color); }

.alert {
  padding: 0.75rem 1rem;
  border: 1px solid;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}
.alert-error {
  color: var(--alert-error-color);
  background: var(--alert-error-background);
  border-color: var(--alert-error-border-color);
}

.panel {
  background: var(--panel-background);
  border: 1px solid var(--panel-border-color);
  border-radius: 0.375rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* internal/correspond.RenderHTML's own markup — real block-level
   paragraphs and a Word-export-shaped table, not preformatted text
   (that was the pre-v0.6.0 shape; the follow-up ladder's compose/
   review/history views on contact.html are still the only templates
   that render one). A light border/background sets the message's own
   content apart from the surrounding page chrome without touching its
   Word-export inline styles, which have to stay exactly as they are
   for a paste into Outlook to survive intact. */
.mail-preview {
  border: 1px solid var(--panel-border-color);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  overflow-x: auto;
}

/* Two adjacent action forms (e.g. "I sent this" / "Discard draft")
   that should sit side by side rather than stack as separate blocks —
   <form> has no display:inline default the way <button> does. */
.inline-form { display: inline; }

label { cursor: pointer; display: block; margin-bottom: 0.25rem; }

input[type="text"], input[type="number"], input[type="search"], textarea {
  color: var(--input-color);
  background: var(--input-background);
  border: 1px solid var(--input-border-color);
  padding: 0.4rem;
  border-radius: 0.25rem;
}
input:focus, textarea:focus {
  outline: 0;
  border-color: var(--input-focus-border-color);
  box-shadow: var(--input-focus-box-shadow);
}

.pagination {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.pagination .disabled { opacity: 0.35; pointer-events: none; }

@media (max-width: 620px) {
  .header nav { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .header ul { flex-wrap: wrap; }
  .header .logout-form { margin-left: 0; }
}