/*
 * Stylesheet for the Kingdom Ops PWA.  Defines a clean, responsive
 * layout with a header, navigation bar and main content area.  Colour
 * values are defined via CSS variables so that users can customise
 * their themes (primary colour, background, accent, font size).
 */

:root {
  --primary-color: #324376;
  --primary-contrast: #ffffff;
  --secondary-color: #ffffff;
  --secondary-border: #dddddd;
  --accent-color: #4caf50;
  --background-color: #f4f4f4;
  --text-color: #324376;
  /* Increase the base font size slightly for improved readability */
  --font-size-base: 17px;
  /* Card styling variables for consistent visual polish */
  --card-background: #ffffff;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Dark mode variables.  When the root element has the dark-mode class,
   override the default colours to provide a high-contrast dark theme.
   These values are chosen to improve accessibility and reduce eye strain. */
:root.dark-mode {
  --primary-color: #3f51b5;
  --primary-contrast: #ffffff;
  --secondary-color: #1e1e1e;
  --secondary-border: #444444;
  --accent-color: #8bc34a;
  --background-color: #121212;
  --text-color: #f0f0f0;

  /* Dark mode card styling */
  --card-background: #1e1e1e;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Style for the toggle icons on settings section titles */
.toggle-icon {
  display: inline-block;
  transition: transform 0.2s;
}

/* Style for help icons with tooltips.  Provide an understated
   appearance with a dotted underline and pointer cursor. */
.help-icon {
  display: inline-block;
  margin-left: 0.25rem;
  cursor: help;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--background-color);
  font-size: var(--font-size-base);
}

header {
  background: var(--primary-color);
  color: var(--primary-contrast);
  padding: 1rem;
  text-align: center;
}

/* Tagline styling.  The tagline appears underneath the header title and
   uses a smaller font size and italic style.  It inherits the
   primary contrast colour. */
.tagline {
  margin: 0.25rem 0 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--primary-contrast);
}

/* Release information styling.  Displayed below the main title in
   the header.  Uses a small font size to differentiate from the
   title while retaining contrast colours. */
.release-info {
  font-size: 0.7rem;
  margin-top: 0.25rem;
  color: var(--primary-contrast);
}

/* Style the footer to match the header’s background and contrast
   colours.  Center the text and provide padding for spacing. */
footer {
  background: var(--primary-color);
  color: var(--primary-contrast);
  text-align: center;
  padding: 1rem;
}
footer p {
  margin: 0.25rem 0;
}

nav {
  background: var(--secondary-color);
  border-bottom: 1px solid var(--secondary-border);
  /* Add a subtle shadow under the navigation bar for depth */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0.5rem;
}

nav button {
  background: transparent;
  border: none;
  margin-right: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-color);
  /* Slightly larger radius on navigation buttons */
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}

nav button:hover {
  background: rgba(0, 0, 0, 0.05);
}

nav button.active {
  background: var(--primary-color);
  color: var(--primary-contrast);
  /* Match border radius with other buttons */
  border-radius: 6px;
}

main {
  flex: 1;
  /* Increase padding for more breathing room and better visual separation */
  padding: 1.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Form styles */
.form-group {
  margin-bottom: 0.75rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  /* Align with button rounding */
  border-radius: 6px;
  box-sizing: border-box;
}

.btn {
  background: var(--primary-color);
  color: var(--primary-contrast);
  border: none;
  padding: 0.5rem 1rem;
  /* Use a slightly larger corner radius for a softer appearance */
  border-radius: 6px;
  cursor: pointer;
  /* Increase font-weight to improve button readability */
  font-weight: 600;
  transition: background 0.2s;
}

.btn:hover {
  background: rgba(0, 0, 0, 0.25);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background: var(--secondary-color);
}

th, td {
  border: 1px solid var(--secondary-border);
  padding: 0.5rem;
  text-align: left;
  /* Prevent long text from overflowing table cells */
  overflow-wrap: anywhere;
}

/* Loading overlay styles.  The overlay covers the entire viewport
   with a semi-transparent backdrop and a centered spinner.  The
   .hidden class hides the overlay until showLoading() removes it. */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.loading-overlay.hidden {
  display: none;
}
.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

th {
  background: rgba(0, 0, 0, 0.04);
  font-weight: 600;
}

/* Small buttons for user admin actions.  These use reduced padding and
   font size compared to the primary `.btn` class.  They inherit the
   primary colour and contrast for consistency. */
.btn-small {
  background: var(--primary-color);
  color: var(--primary-contrast);
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 0.8rem;
  margin-right: 0.25rem;
}
.btn-small:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* Muted text for module placeholders */
.muted {
  color: #666;
  font-style: italic;
}

/* Modal overlay for module editor.  Provides a darkened
   backdrop that covers the full viewport when editing modules.
   The modal itself is centered and scrollable if its contents
   exceed the available space. */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: var(--card-background);
  padding: 1rem;
  /* Slightly larger radius for consistency */
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  overflow-y: auto;
  /* Apply card shadow for depth */
  box-shadow: var(--card-shadow);
}

/* Fine-tune the layout of the module editor form.  Ensure
   checkboxes and labels align neatly with minimal spacing. */
/* Module editor form groups.  Align each checkbox to the left of its label,
   remove excessive spacing and ensure the items are clearly associated.
   Flexbox is used to align items horizontally; gap creates space between
   the checkbox and its label without pushing the label to the far right. */
/* Layout adjustments for the module editor.  Each module row uses the
   .module-item class instead of the generic .form-group.  This allows
   us to tighten spacing and align the checkbox immediately to the left
   of its label without inheriting the global form-group styles.  The
   gap property creates a small space between the checkbox and label.
 */
.modal .module-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.modal .module-item input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}
.modal .module-item label {
  margin: 0;
  flex: 1 1 auto;
  font-weight: normal;
  cursor: pointer;
  white-space: nowrap;
}

/* Refund meter */
.meter {
  background: #e6e6e6;
  border-radius: 8px;
  height: 16px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.meter span {
  display: block;
  height: 100%;
  background: var(--accent-color);
}

.alert {
  padding: 0.5rem;
  margin-top: 0.5rem;
  background: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 4px;
  color: #856404;
}

/* Status indicators for Backblaze connectivity.  Use green text
   for connected and red for disconnected to provide a quick visual cue. */
.status-connected {
  color: #2e7d32;
  font-weight: 600;
}
.status-disconnected {
  color: #c62828;
  font-weight: 600;
}

/* Donation recipient grid.  Displays frequent recipients as cards
   with their logo (if available) and name underneath.  Cards are
   inline-block and wrap when the container is too narrow. */
.recipient-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
/*
 * Frequent recipient cards: display donation recipients as small cards
 * with a logo and name.  To improve mobile usability, the card and
 * logo sizes are intentionally conservative.  The logo never grows
 * beyond its maximum size and scales down on small screens.  The
 * card’s width also adapts to fit within narrow viewports.
 */
.recipient-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  width: 72px;                 /* default width on larger screens */
  text-align: center;
  padding: 0.25rem;
  border: 1px solid #ccc;
  /* Use larger radius matching buttons and inputs */
  border-radius: 6px;
  /* Use card background and shadow variables for consistency */
  background: var(--card-background);
  box-shadow: var(--card-shadow);
  transition: background 0.2s, box-shadow 0.2s;
}
.recipient-card:hover {
  background: rgba(0,0,0,0.05);
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.recipient-logo {
  width: 40px;                 /* cap the logo size */
  height: 40px;
  max-width: 100%;             /* ensure the image never exceeds its container */
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 0.25rem;
}
.recipient-logo.placeholder {
  background: #eee;
  border: 1px dashed #ccc;
}
.recipient-name {
  font-size: 0.75rem;
  word-wrap: break-word;
}

/* Mobile adjustments: use relative widths so cards and logos scale
   naturally within the available space.  Cards occupy roughly one
   third of the row (30%) and logos fill most of the card’s width.
   Font size is slightly reduced to fit better on small screens. */
@media (max-width: 600px) {
  .recipient-card {
    width: 30%;        /* allow ~3 cards per row */
    flex: 1 0 30%;     /* ensure flex-basis matches width for wrapping */
    box-sizing: border-box;
    max-width: 90px;   /* limit maximum card width on wider phones */
  }
  .recipient-logo {
    width: 80%;        /* logo fills most of the card width */
    height: auto;      /* maintain aspect ratio */
  }
  .recipient-name {
    font-size: 0.65rem;
  }

  /* Cap the height of the donation logos grid on mobile devices.  Many
     logos can cause the page to become exceedingly long, requiring
     unnecessary scrolling to reach the rest of the content.  Limiting
     the height and enabling vertical scrolling keeps the layout tidy
     while still allowing access to all recipients. */
  .recipient-logos {
    max-height: 300px;
    overflow-y: auto;
  }
}

/* Ensure images never overflow their containers.  This global rule
   guarantees that all <img> elements scale down to fit within their
   parent and maintain their aspect ratio.  This improves the user
   experience on smaller screens where large images would otherwise
   force horizontal scrolling. */
img {
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------------------------------------*/
/* Notification badges and attention styling                                 */
/* The navigation bar supports attention indicators when a module needs     */
/* the user's attention (e.g. new notifications).  The `.notif-badge` class */
/* styles a small pill showing the number of unread notifications.  The     */
/* `.attention` class applies a subtle highlight to nav buttons that        */
/* correspond to modules requiring attention.  An `::after` pseudo-element */
/* draws a small exclamation mark on attention buttons to catch the eye.    */

/* Badge showing the number of unread notifications */
.notif-badge {
  display: inline-block;
  background: #d9534f;
  color: #ffffff;
  border-radius: 1rem;
  padding: 0 6px;
  margin-left: 4px;
  font-size: 0.75rem;
  line-height: 1.2rem;
}

/* Highlight nav buttons that need attention */
nav button.attention {
  position: relative;
  background: rgba(255, 193, 7, 0.2);
}

/* Draw an exclamation mark indicator on attention buttons */
nav button.attention::after {
  content: '!';
  position: absolute;
  top: -4px;
  right: -4px;
  background: #d9534f;
  color: #ffffff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  font-size: 0.7rem;
  line-height: 14px;
  text-align: center;
}

/* Attention prompt banner shown at the top of the view when there are
   outstanding notifications */
.attention-prompt {
  background: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 4px;
  color: #856404;
  padding: 0.75rem 1rem;
  margin: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* Secondary button styling used within prompts and secondary actions */
.btn-secondary {
  background: var(--secondary-color);
  color: var(--text-color);
  border: 1px solid var(--secondary-border);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-secondary:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Style section titles to appear as clickable buttons.  These headers
   toggle the visibility of their associated settings sections. */
.section-title {
  display: block;
  font-size: 1.1rem;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
  background: var(--secondary-color);
  border: 1px solid var(--secondary-border);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--primary-color);
  transition: background 0.2s ease;
}

/* Provide a hover effect for section headers to give a button-like feel. */
.section-title:hover {
  background: var(--secondary-hover, #eaeaea);
}

/* Responsive adjustments for mobile devices */
@media (max-width: 600px) {
  html, body {
    font-size: calc(var(--font-size-base) * 1.1);
  }
  nav button {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 1rem;
  }
  table th, table td {
    font-size: 0.9rem;
    padding: 0.4rem;
  }
  .btn {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
  }
}