/* DSM Frontend Styles */
:root {
  --dsm-bg: #f7f7fa;
  --dsm-bg-sidebar: #0c1522;
  --dsm-bg-main: #ffffff;
  --dsm-primary: #0073aa;
  --dsm-primary-hover: #006799;
  --dsm-text: #222222;
  --dsm-text-light: #ffffff;
  --dsm-border-radius: 8px;
  --dsm-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --dsm-bg: #121d33;
    --dsm-bg-sidebar: #0d1529;
    --dsm-bg-main: #1c2a48;
    --dsm-primary: #56a0d3;
    --dsm-primary-hover: #3e8abf;
    /* Use white text by default in dark mode */
    --dsm-text: #ffffff;
    --dsm-text-light: #ffffff;
  }
}

body .dsm-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-areas: "sidebar main";
  min-height: 80vh;
  background-color: var(--dsm-bg);
  margin: 0;
  padding: 0;
}

.dsm-sidebar {
  grid-area: sidebar;
  background-color: var(--dsm-bg-sidebar);
  color: var(--dsm-text-light);
  padding: 1rem;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}

.dsm-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dsm-nav-item + .dsm-nav-item {
  margin-top: 0.5rem;
}
.dsm-nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--dsm-text-light);
  padding: 0.5rem 0.75rem;
  border-radius: var(--dsm-border-radius);
  transition: background-color 0.2s;
}
.dsm-nav-link[aria-current="true"],
.dsm-nav-link:hover {
  background-color: var(--dsm-primary);
}
.dsm-nav-link .dashicons {
  font-size: 1rem;
}

.dsm-client-selector {
  margin-top: 1rem;
}
/* Select styling for the client/mandant chooser */
/*
 * Use the main background and text colours for the select so that
 * option labels are visible regardless of theme.  A minimum width
 * ensures the names are not clipped and the margin aligns it nicely
 * with other toolbar actions.  The option styling matches the select
 * element itself to avoid dark-on-dark text when the dropdown is
 * expanded.
 */
.dsm-select {
  width: auto;
  min-width: 200px;
  padding: 0.35rem 0.5rem;
  background-color: var(--dsm-bg-main);
  /* Always use black text for the mandant chooser */
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--dsm-border-radius);
  appearance: none;
  margin-right: 0.5rem;
}
.dsm-select option {
  background-color: var(--dsm-bg-main);
  /* Always use black text for dropdown options */
  color: #000;
}

/* Ensure headings and labels in panels use the main text colour (white in dark mode) */
.dsm-panel h3 {
  color: var(--dsm-text);
}
.dsm-panel .dsm-checkbox label,
.dsm-panel-content label {
  color: var(--dsm-text);
}

.dsm-main {
  grid-area: main;
  background-color: var(--dsm-bg-main);
  color: var(--dsm-text);
  padding: 1.5rem;
}
.dsm-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.dsm-title {
  margin: 0;
  font-size: 1.5rem;
  color: var(--dsm-text);
}
.dsm-toolbar-actions .dsm-button {
  margin-left: 0.5rem;
}
.dsm-content {
  background-color: var(--dsm-bg);
  padding: 1rem;
  border-radius: var(--dsm-border-radius);
  box-shadow: var(--dsm-shadow);
  min-height: 400px;
}

/* Auth Styles */
.dsm-auth {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  padding: 2rem;
}
.dsm-auth-card {
  background-color: var(--dsm-bg-main);
  color: var(--dsm-text);
  padding: 2rem;
  border-radius: var(--dsm-border-radius);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--dsm-shadow);
}
.dsm-auth-title {
  margin-top: 0;
  margin-bottom: 1rem;
  text-align: center;
}
.dsm-field {
  margin-bottom: 1rem;
}
.dsm-field label {
  display: block;
  margin-bottom: 0.25rem;
}
.dsm-field input[type="text"],
.dsm-field input[type="password"],
.dsm-field input[type="email"] {
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: 1px solid #ccd0d4;
  border-radius: var(--dsm-border-radius);
}
.dsm-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--dsm-border-radius);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.dsm-button-primary {
  background-color: var(--dsm-primary);
  color: var(--dsm-text-light);
}
.dsm-button-primary:hover {
  background-color: var(--dsm-primary-hover);
}

/* Secondary button style (used for PDF export) */
.dsm-button-secondary {
  background-color: transparent;
  color: var(--dsm-primary);
  border: 1px solid var(--dsm-primary);
}
.dsm-button-secondary:hover {
  background-color: var(--dsm-primary-hover);
  color: var(--dsm-text-light);
}
.dsm-auth-link {
  text-align: center;
  margin-top: 0.5rem;
}
.dsm-auth-link a {
  color: var(--dsm-primary);
  text-decoration: none;
}
.dsm-auth-link a:hover {
  text-decoration: underline;
}

/* Audit sticky header for save button */
.dsm-audit-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: flex-end;
  background-color: var(--dsm-bg-main);
  padding: 0.5rem 0;
  z-index: 2;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Collapsible panels for Audit and other sections */
.dsm-panel {
  background-color: var(--dsm-bg-main);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--dsm-border-radius);
  margin-bottom: 1rem;
  box-shadow: var(--dsm-shadow);
}
.dsm-panel-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  background-color: var(--dsm-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--dsm-border-radius) var(--dsm-border-radius) 0 0;
}
.dsm-panel-header h3 {
  margin: 0;
  font-size: 1rem;
  flex: 1;
  color: var(--dsm-text);
}
.dsm-panel-header .dashicons {
  transition: transform 0.3s;
  font-size: 1rem;
  color: var(--dsm-primary);
}
.dsm-panel.collapsed .dsm-panel-header .dashicons {
  transform: rotate(-90deg);
}
.dsm-panel-content {
  padding: 1rem;
  border-radius: 0 0 var(--dsm-border-radius) var(--dsm-border-radius);
}
.dsm-panel.collapsed .dsm-panel-content {
  display: none;
}
/* Save button inside panel header */
.dsm-panel-save {
  margin-left: auto;
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
}

/* Table styling for staff module */
table.dsm-table {
  width: 100%;
  border-collapse: collapse;
}
table.dsm-table th, table.dsm-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
}
table.dsm-table thead th {
  background-color: var(--dsm-bg-sidebar);
  color: var(--dsm-text-light);
  font-weight: 600;
}
table.dsm-table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
  table.dsm-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
  }
}
table.dsm-table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: dark) {
  table.dsm-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
}

/* Staff table specific styling: ensure contrast on light backgrounds */
table.dsm-staff-table tbody td {
  color: var(--dsm-text);
}
table.dsm-staff-table tbody tr:nth-child(even) {
  background-color: var(--dsm-bg);
}

/* VVT table styling: ensure that entries in the Verarbeitungsverzeichnis
 * module use the same contrast and alternating row colours as the staff
 * listing. Without this, some themes may render dark text on dark rows. */
table.dsm-vvz-table tbody td {
  color: var(--dsm-text);
}
table.dsm-vvz-table tbody tr:nth-child(even) {
  background-color: var(--dsm-bg);
}
@media (prefers-color-scheme: dark) {
  table.dsm-staff-table tbody tr:nth-child(even) {
    /* slightly lighter row colour for dark mode */
    background-color: rgba(255, 255, 255, 0.04);
  }
}

/* VVT table styling similar to staff table for consistency */
table.dsm-vvz-table tbody td {
  color: var(--dsm-text);
}
table.dsm-vvz-table tbody tr:nth-child(even) {
  background-color: var(--dsm-bg);
}
@media (prefers-color-scheme: dark) {
  table.dsm-vvz-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.04);
  }
}
.dsm-error, .dsm-message {
  background-color: #fbeaea;
  border-left: 4px solid #dc3232;
  margin-bottom: 1rem;
  padding: 0.5rem;
  color: #a00;
}
.dsm-message {
  background-color: #e7f5e7;
  border-left-color: #46b450;
  color: #248323;
}

/* Icon buttons used in staff module */
.dsm-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.35rem;
}
.dsm-icon-button .dashicons {
  margin: 0;
  font-size: 1rem;
}

/*
 * Shrink the action buttons in the staff table.
 * The default padding and icon size of .dsm-icon-button can make the buttons
 * appear oversized in the context of table rows. We override these values
 * specifically for the staff module to create a more balanced appearance.
 */
table.dsm-staff-table .dsm-icon-button {
  padding: 0.15rem 0.3rem;
}
table.dsm-staff-table .dsm-icon-button .dashicons {
  font-size: 0.8rem;
}

/* Specific styling for the training button in the staff module */
/* Adjust the training button size so that it is more compact and does not distort table layout */
/* The training marker button should be very compact so it doesn't distort the
 * table layout.  Reduce padding and icon size even further. */
.dsm-training-button {
  padding: 0.05rem 0.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dsm-training-button .dashicons {
  font-size: 0.6rem;
}

/* Ensure form labels and inputs in DSM forms are readable in both light and dark modes */
.dsm-form .form-table th,
.dsm-form .form-table th label {
  color: var(--dsm-text);
}
.dsm-form .form-table input,
.dsm-form .form-table select,
.dsm-form .form-table textarea {
  /* Force colours for text fields to avoid WordPress styles overriding them */
  color: var(--dsm-text) !important;
  background-color: var(--dsm-bg-main) !important;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.35rem 0.5rem;
  border-radius: var(--dsm-border-radius);
}
.dsm-form .form-table input:focus,
.dsm-form .form-table select:focus,
.dsm-form .form-table textarea:focus {
  outline: none;
  border-color: var(--dsm-primary);
  box-shadow: 0 0 0 1px var(--dsm-primary);
  /* Preserve background and text colour on focus */
  background-color: var(--dsm-bg-main) !important;
  color: var(--dsm-text) !important;
}

/* Override default WordPress styles for regular and large text inputs in DSM forms */
.dsm-form .regular-text,
.dsm-form .large-text {
  background-color: var(--dsm-bg-main);
  color: var(--dsm-text);
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.35rem 0.5rem;
  border-radius: var(--dsm-border-radius);
}
.dsm-form .regular-text:focus,
.dsm-form .large-text:focus {
  background-color: var(--dsm-bg-main);
  color: var(--dsm-text);
  border-color: var(--dsm-primary);
  box-shadow: 0 0 0 1px var(--dsm-primary);
  outline: none;
}

/* Ensure textarea elements in panels and forms follow theme colours */
.dsm-panel-content textarea,
.dsm-form textarea {
  background-color: var(--dsm-bg-main);
  color: var(--dsm-text);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--dsm-border-radius);
  padding: 0.35rem 0.5rem;
}
.dsm-panel-content textarea:focus,
.dsm-form textarea:focus {
  outline: none;
  border-color: var(--dsm-primary);
  box-shadow: 0 0 0 1px var(--dsm-primary);
  background-color: var(--dsm-bg-main);
  color: var(--dsm-text);
}

/* Hint text styling for audit module */
.dsm-hint {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--dsm-text);
  opacity: 0.8;
}

/* Styling for note textareas in audit module */
.dsm-note textarea,
.dsm-note-textarea {
  /* Force the background and text colour even when WordPress applies its own styles on focus */
  background-color: var(--dsm-bg-main) !important;
  color: var(--dsm-text) !important;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.35rem 0.5rem;
  border-radius: var(--dsm-border-radius);
  width: 100%;
}
.dsm-note textarea:focus,
.dsm-note-textarea:focus {
  outline: none;
  border-color: var(--dsm-primary);
  box-shadow: 0 0 0 1px var(--dsm-primary);
  /* Preserve colours on focus */
  background-color: var(--dsm-bg-main) !important;
  color: var(--dsm-text) !important;
}

/* Style multi-select boxes used in VVT and other forms */
.dsm-form select[multiple] {
  /* Force theme colours for multi-select boxes */
  background-color: var(--dsm-bg-main) !important;
  color: var(--dsm-text) !important;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.35rem 0.5rem;
  border-radius: var(--dsm-border-radius);
  min-width: 250px;
  /* Ensure full width in narrow layouts */
  width: 100%;
  height: auto;
  max-height: 160px;
}
.dsm-form select[multiple] option {
  background-color: var(--dsm-bg-main) !important;
  color: var(--dsm-text) !important;
}
.dsm-form select[multiple] option:checked {
  background-color: var(--dsm-primary);
  color: var(--dsm-text-light);
}

/*
 * Ensure table heading backgrounds and text colours in DSM forms are consistent with
 * the overall theme. Without this, some themes may apply a white background to
 * <th> elements, making the text invisible when dark mode is active. The
 * background colour here follows the main panel background and the text uses
 * the primary text colour.
 */
.dsm-form .form-table th {
  background-color: var(--dsm-bg-main);
  color: var(--dsm-text);
}

/*
 * Inputs, selects and textareas inside DSM forms and panels should always
 * respect the theme colours, even when focused. These rules override
 * WordPress defaults that can switch the background to white on focus. By
 * matching the background to var(--dsm-bg-main) and text to var(--dsm-text),
 * the content remains legible in both light and dark modes.
 */
.dsm-form .form-table input,
.dsm-form .form-table select,
.dsm-form .form-table textarea,
.dsm-panel-content input,
.dsm-panel-content select,
.dsm-panel-content textarea {
  background-color: var(--dsm-bg-main);
  color: var(--dsm-text);
}
.dsm-form .form-table input:focus,
.dsm-form .form-table select:focus,
.dsm-form .form-table textarea:focus,
.dsm-panel-content input:focus,
.dsm-panel-content select:focus,
.dsm-panel-content textarea:focus {
  background-color: var(--dsm-bg-main);
  color: var(--dsm-text);
  border-color: var(--dsm-primary);
  box-shadow: 0 0 0 1px var(--dsm-primary);
  outline: none;
}

/* Override input and textarea colours in DSM forms and panels more aggressively to prevent
   external themes or WordPress default styles from forcing white backgrounds. */
.dsm-form input[type="text"],
.dsm-form textarea,
.dsm-panel-content input[type="text"],
.dsm-panel-content textarea {
  background-color: var(--dsm-bg-main) !important;
  color: var(--dsm-text) !important;
}
.dsm-form input[type="text"]:focus,
.dsm-form textarea:focus,
.dsm-panel-content input[type="text"]:focus,
.dsm-panel-content textarea:focus {
  background-color: var(--dsm-bg-main) !important;
  color: var(--dsm-text) !important;
  border-color: var(--dsm-primary);
  box-shadow: 0 0 0 1px var(--dsm-primary);
  outline: none;
}