// SPDX-FileCopyrightText: 2025 Max Mehl <https://mehl.mx>
// SPDX-License-Identifier: Apache-2.0

// Import Pico CSS framework with custom theme color
@use "pico" with ($theme-color: "amber");
@use 'sass:list';

/*********************************
 * Custom styles for CastMail2List
 ********************************/
// Flask flash messages
.flashes {

  // Single flash message
  .flash {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;

    &.message {
      background-color: #bebebe;
      color: #3a3a3a;
    }

    &.success {
      background-color: #d4edda;
      color: #155724;
    }

    &.warning {
      background-color: #fff3cd;
      color: #856404;
    }

    &.error {
      background-color: #f8d7da;
      color: #721c24;
    }
  }
}

// Buttons
// Red button variant
a[role="button"], button {
  &.danger {
    --pico-background-color: red;
    --pico-border-color: red;
    --pico-color: white;

    &:hover, &.active, &:focus {
      --pico-background-color: crimson !important;
      --pico-border-color: crimson !important;
    }

    &.outline {
      --pico-background-color: transparent;
      --pico-color: red;
      --pico-border-color: red;

      &:hover, &.active, &:focus {
        --pico-background-color: transparent !important;
        --pico-color: crimson !important;
        --pico-border-color: crimson !important;
      }
    }
  }
}

// Color for theme toggle icon in navbar
span#theme-toggle::before {
  color: var(--pico-primary);
}

/* Forms */
// Only show fields that relate to the selected ML mode
form.list-settings {
  .mode-group, .mode-broadcast {
    display: none;
  }

  &:has(#mode-select #mode-0:checked) .mode-broadcast {
    display: block;
  }

  &:has(#mode-select #mode-1:checked) .mode-group {
    display: block;
  }
}

// Remove bullets points, e.g. for radio button lists
fieldset.list-no-bullets ul {
  list-style-type: none;
  padding-left: 0;

  li {
    list-style: none;
  }
}

// Make description text for switch inputs align properly
input[role="switch"]+small {
  margin-top: 0;
}

/* Icons */
.icon {
  font-family: "Font Awesome 7 Free";

  &.sun::before {
    content: "\f185"; // FontAwesome sun icon
  }

  &.moon::before {
    content: "\f186"; // FontAwesome moon icon
  }
}

/* Field search form */
form.search-form {
  &.fields {
    select {
      width: 40%;
    }
  }
}

/* Tables */
table.fixed {
  table-layout: fixed;
  width: 100%;

  &.message {
    th {
      width: 15%;
      vertical-align: top;
    }
  }

  &.logs {

    // Set column widths for logs table
    @for $i from 1 through 6 {
      th:nth-child(#{$i}), td:nth-child(#{$i}) {
        width: list.nth(15% 10% 10% 40% 15% 10%, $i);
      }
    }
  }
}

/* Dashboard */
.dashboard {
  column-gap: 1rem; // horizontal spacing

  .card {
    display: inline-block; // important for columns
    width: 100%; // fill column width
    margin-bottom: 1rem; // vertical spacing
    break-inside: avoid; // avoid splitting a card across columns

    padding: 1rem;
    box-sizing: border-box;

    // Right-align links in card footer
    p.view-all {
      text-align: right;
      margin-bottom: 0;
    }

    // Make p elements denser
    p:has(+ p:not(.view-all)) {
      margin-bottom: 0;
    }
  }

  @media (min-width: 1024px) {
    column-count: 3;
  }

  @media (min-width: 640px) and (max-width: 1023px) {
    column-count: 2;
  }

  @media (max-width: 639px) {
    column-count: 1;
  }
}
