/*------------------------------------------------
background and primary font
------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');


*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

*:focus {
  outline: none;
  box-shadow: none;
}

body {
  background: var(--background-body);
  color: var(--color-primary);
  font-family: 'Open Sans', sans-serif;
  min-height: 100%;
}

/* On mobile the cards run edge to edge, so the page behind them takes
   their colour rather than showing as a darker band between them. The
   home page keeps its padding, and its own background with it. */
@media (max-width: 991.98px) {
  body:not([data-page="home"]) {
    background: var(--background-section);
  }

  /* and with no page behind them to rest on, the cards cast no shadow */
  body:not([data-page="home"]) .card {
    box-shadow: none;
  }
}

.page-vertical-centered {
  overflow: hidden;
  position: absolute;
  width: 100%;
  align-items: center;
  display: flex;
  height: 80%;
  justify-content: center;

}

.page-horizontal-centered {
	margin: 1rem auto;
  width: 31.25rem;
}

/* flow-root keeps the last card's bottom margin inside the content, or
   it escapes through <body> past the full-height <html> and the page
   ends flush with the last card */
.content {
  display: flow-root;
  padding-top: 1.5rem;
}

/* On mobile the content runs edge to edge, except on the home page; the
   cards carry their own padding. The row's gutter is dropped with it, or
   its negative margins would push the page wider than the screen. */
@media (max-width: 991.98px) {
  body:not([data-page="home"]) .container.content {
    padding-left: 0;
    padding-right: 0;
  }

  body:not([data-page="home"]) .content .row {
    margin-left: 0;
    margin-right: 0;
  }

  body:not([data-page="home"]) .content .row > [class*="col"] {
    padding-left: 0;
    padding-right: 0;
  }
}


/*------------------------------------------------
 * links
 * ------------------------------------------------*/

a,
a:hover {
  color: var(--link);
  outline: none;
  text-decoration: none;
}


/*------------------------------------------------
 * cards
 * ------------------------------------------------*/

.card {
  background: var(--background-section);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow, none);
  margin-bottom: 1.5rem;
  padding: 1rem;
  padding-bottom: 1.5rem;
}

.card-close {
  float: right;
}

.card-title {
  margin-bottom: 1rem;
}

@media (max-width: 991.98px) {
  .card-title.flex-center-space {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* A long title (a folder name) is cut with an ellipsis rather than
     wrapping under the buttons beside it */
  .card-title.flex-center-space > h1 {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-title.flex-center-space > .filter-input {
    order: 3;
    width: 100%;
  }
}

.card-text {
  margin-bottom: 1rem;
}

.card > .list-group {
  border: none;
}


/*------------------------------------------------
 * typography
 * ------------------------------------------------*/

.page-vertical-centered h1 {
  color: var(--link);
  font-size: 1.5em;
}

.page-vertical-centered h1,
.page-vertical-centered p {
  text-align: center;
}

h1 {
  font-weight: normal;
  font-size: 1.2rem;
  margin-bottom: 0;
}

h2 {
  font-weight: normal;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

strong{
  font-weight: 600;
}

.strong {
	font-weight: 600;
}

.mh-alert {
  color: var(--color-danger);
}

.soon {
  color: var(--color-accent-strong);
}


/*------------------------------------------------
 * tables
 * ------------------------------------------------*/

/* A table is ruled horizontally only: a line above the header and one
   under each row. No side borders, and no rules between the cells. */
.table {
  border-collapse: collapse;
  color: inherit;
  width: 100%;
}

/* A row, and the head with it, has a little more air above and below
   its text than beside it, and is an easy tap on a phone */
.table th,
.table td {
  border-bottom: solid 1px var(--border-medium);
  padding: 0.75rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.table th {
  background: var(--background-table-header, var(--background-control));
  border-top: solid 1px var(--border-medium);
  vertical-align: middle;
}

th {
  font-weight: 500;
}

.table-container {
  max-width: 100%;
  overflow-x: auto;
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}


/*------------------------------------------------
 * pagination
 * ------------------------------------------------*/

.pagination-row {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-top: 1rem;
  padding-left: 0.25rem;
}

.pagination-row p {
  margin: 0;
}

.pagination-row a {
  align-items: center;
  background: var(--background-control);
  border: solid 1px var(--border-medium);
  border-radius: 50%;
  color: var(--link);
  display: flex;
  height: 1.7rem;
  justify-content: center;
  width: 1.7rem;
}

.pagination-row a:hover {
  color: var(--link-hover);
}

.pagination-disabled {
  color: var(--color-muted) !important;
  pointer-events: none;
}

.pagination-compact {
  gap: 0.5rem;
  justify-content: center;
  padding-left: 0;
}


/*------------------------------------------------
 * lists
 * ------------------------------------------------*/

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
	list-style-type: none;
}

.list-group {
  border: none;
  display: flex;
  flex-direction: column;
}

.list-group-item {
  background: none;
  border-bottom: solid 1px var(--border-medium);
  color: inherit;
  padding: 0.75rem 0 0.75rem 0.5rem;
}

.list-group-item:first-child {
  border-top: solid 1px var(--border-medium);
}

/* On a phone the rows, and the heads with them, stand taller still:
   16px above and below, air for a thumb */
@media (max-width: 768px) {
  .table th,
  .table td,
  .list-group-item {
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
}


/*------------------------------------------------
 * buttons
 * ------------------------------------------------*/

.btn {
  border: solid 1px transparent;
  border-radius: var(--radius-md);
  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  /* the inputs' line height, so a button beside one stands as tall */
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  text-align: center;
  text-decoration: none;
}

.btn:focus,
.btn:focus-visible {
  box-shadow: none;
}

.btn-sm {
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
}

.btn-danger {
  background: var(--button-danger-bg, var(--red-100));
  border-color: var(--border-medium);
  box-shadow: none;
  color: var(--button-danger-color, var(--color-primary));
}

.btn-success {
  background: var(--button-success-bg, var(--lime-100));
  border-color: var(--border-medium);
  box-shadow: none;
  color: var(--button-success-color, var(--color-primary));
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  background: var(--button-success-bg, var(--lime-100));
  border-color: var(--border-medium);
  box-shadow: none;
  color: var(--button-success-color, var(--color-primary));
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--button-secondary-background);
  border-color: var(--border-medium);
  box-shadow: none;
  color: var(--button-secondary-color);
}

.btn-secondary i {
  color: inherit;
}

.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: transparent;
  border: solid 1px var(--border-dark);
  box-shadow: none;
  color: var(--color-primary);
}

.btn-outline-danger {
  color: var(--urgent);
  background-color: var(--background-section);
  border-color: var(--urgent);
}

.btn-icon {
  background: none;
  border: none;
  padding: 0;
}

.btn-sort {
  background: none;
  border: none;
  color: var(--color-muted);
  font-weight: 600;
}

.btn-sort:hover {
  color: var(--color-secondary);
}

.btn-sort.active {
  color: var(--color-accent-strong);
}

.button-link {
  background: none;
  border: none;
  color: var(--link);
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.button-link:hover {
  color: var(--link-hover);
}

.square-button {
  background: var(--background-control);
  border: solid 1px var(--border-medium);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  color: var(--link);
  display: inline-flex;
  align-items: center;
  font-size: 1.1rem;
  line-height: 1.25;
  outline: none;
  padding: 0.438rem 0.625rem;
}

.square-button:hover {
  color: var(--link-hover);
}

/* An add or close button in a card's heading is a bare icon: no fill,
   no border */
.square-button.add-button,
.square-button.close-button {
  background: none;
  border: none;
}

/* A close button sits on the heading's line, with no padding to drop it,
   in the heading's muted gray (the calendar card's chevrons are close
   buttons too), darkening to the text colour when hovered */
.square-button.close-button {
  color: var(--color-secondary);
  padding: 0;
}

.square-button.close-button:hover {
  color: var(--color-primary);
}

.square-button.filter-button {
  color: var(--color-primary);
}

.square-button.toggle-active {
  background: var(--selected-background);
  border: solid 1px var(--selected-border);
  color: var(--selected-color);
}



/*------------------------------------------------
 * toolbar
 * ------------------------------------------------*/

.toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 0 1.25rem;
}

.toolbar a:not(.dropdown-menu *),
.toolbar button:not(.dropdown-menu *) {
  align-items: center;
  background: var(--background-control);
  border: solid 1px var(--border-medium);
  border-radius: var(--radius-md);
  display: inline-flex;
  line-height: 1.25;
  padding: 0.5rem 0.75rem;
}

.toolbar-left {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.toolbar-right {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  justify-content: right;
}

.toggle-active,
.toolbar button.toggle-active,
.toolbar a.toggle-active {
  background: var(--selected-background);
  border: solid 1px var(--selected-border);
  color: var(--selected-color);
}

/* bulk toolbar */

.bulk-toolbar {
  align-items: center;
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bulk-toolbar .toolbar-left {
  gap: 1rem;
  width: 100%;
}

.bulk-count {
  background: var(--selected-background);
  border: 1px solid var(--selected-border);
  border-radius: var(--radius-md);
  color: var(--selected-color);
  padding: 0.375rem 0.625rem;
  white-space: nowrap;
}

.bulk-actions {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.bulk-actions button i {
  margin-right: 0.5rem;
}

/* Hidden on desktop, shown on mobile as icon-only replacement for text */
.bulk-icon-mobile {
  display: none;
}

@media (max-width: 991.98px) {
  .bulk-label {
    display: none;
  }

  .bulk-icon-mobile {
    display: inline;
  }

  /* Remove margin-right on icons when labels are hidden */
  .bulk-actions button i {
    margin-right: 0;
  }

  .bulk-toolbar .toolbar-left {
    gap: 0.5rem;
  }

  .bulk-actions {
    gap: 0.5rem;
  }
}

/*------------------------------------------------
 * filter inputs
 * ------------------------------------------------*/

.filter-input {
  background: var(--background-light);
  border: solid 1px var(--border-medium);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-family: inherit;
  font-size: 1rem;
  height: calc(2.25rem + 2px);
  line-height: 1.25rem;
  outline: none;
  padding: 0.5rem 0.75rem;
}

.filter-input:focus {
  border-color: var(--border-dark);
}

.filter-input::placeholder {
  color: var(--color-muted);
  opacity: 0.6;
}

.keyword-input {
  width: 16rem;
}

@media (width <= 1000px) {
  .keyword-input {
    min-width: 7.5rem;
    width: auto;
  }
}

/*------------------------------------------------
 * dropdowns
 * ------------------------------------------------*/

.menu-icon {
  color: var(--color-muted);
  padding: 0;
}



/*------------------------------------------------
 * utilities
 * ------------------------------------------------*/

.flex-start-space {
  align-items: start;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex-start-left {
  align-items: start;
  display: flex;
  flex-direction: row;
}

.flex-center-space {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex-center-left {
  align-items: center;
  display: flex;
  flex-direction: row;
}

.flex-end-space {
  align-items: end;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.mh-bottom-right {
  margin-top: 1rem;
  text-align: right;
}


/*------------------------------------------------
 * dev banner
 * ------------------------------------------------*/

/* Exactly 1.25rem tall, which the phone's band under the floating
   buttons takes back (drawer.css) */
.dev-banner {
  background: var(--orange-800);
  color: var(--stone-100);
  font-size: 0.75rem;
  font-weight: bold;
  height: 1.25rem;
  letter-spacing: 0.2rem;
  line-height: 1.05rem;
  overflow: hidden;
  padding: 0.1rem 0.5rem;
  text-align: center;
}


/* alerts */

.alert-info {
  background-color: var(--background-light);
  color: var(--color-strong);
  border-color: var(--border-medium);
}


/*------------------------------------------------
 * utility classes
 * ------------------------------------------------*/

/* display */
.hidden {
  display: none;
}

/* text styles */
.text-bold {
  font-weight: bold;
}

.text-semibold {
  font-weight: 600;
}

.text-completed {
  color: var(--color-muted);
}

/* colors */
.text-negative {
  color: var(--alert-danger-color);
}

.text-positive {
  color: var(--color-success);
}

.text-warning {
  color: var(--alert-danger-color);
}

.text-lime {
  color: var(--lime-600);
}

/* borders */
.border-bottom-none {
  border-bottom: none;
}

/* margins */
.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

/* active/selected items */
.active-item {
  background: var(--hl-gray);
}


/*------------------------------------------------
 * layout (Bootstrap grid replacement)
 * ------------------------------------------------*/

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 2000px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
}

/* The home page keeps its narrower layout. Only its content is held in:
   the nav bar's container stays full width, so the nav does not shift
   between pages. */
body[data-page="home"] .container.content {
  /* the favorites board's five columns and gaps, plus the padding, so the
     board fills the container and what sits at its edges lines up */
  max-width: 73rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.row > [class*="col"] {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col {
  flex: 1;
}

/* Default: stack columns on small screens */
.col-lg,
.col-lg-3,
.col-lg-4,
.col-lg-6,
.col-lg-8,
.col-lg-9,
.col-md-6,
.col-md-8 {
  width: 100%;
  min-width: 0;
}

/* Large screens: multi-column layout */
@media (min-width: 992px) {
  .col-lg { flex: 1; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-8 { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; }
  .order-lg-3 { order: 3; }
}

@media (min-width: 768px) {
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; }
}


/*------------------------------------------------
 * Bootstrap utility class replacements
 * ------------------------------------------------*/

/* spacing */
.mb-3 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.me-1 { margin-right: 0.25rem; }
.me-2 { margin-right: 0.5rem; }
.ms-2 { margin-left: 0.5rem; }

/* display / flex */
.d-flex { display: flex; }
.d-none { display: none; }
.d-block { display: block; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.align-items-start { align-items: start; }

/* text */
.text-muted { color: var(--color-muted); }
.text-danger { color: var(--color-danger); }
.text-center { text-align: center; }
.small { font-size: 0.875rem; }


/*------------------------------------------------
 * forms (Bootstrap replacement)
 * ------------------------------------------------*/

.form-control,
.form-select {
  background-color: var(--background-light);
  border: solid 1px var(--border-medium);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  color: inherit;
  display: block;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
  width: 100%;
}

.form-label {
  display: inline-block;
  margin-bottom: 0.3rem;
}

.form-text {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0;
}

.form-check-input {
  height: 1rem;
  margin: 0;
  width: 1rem;
}

.form-check-label {
  margin-bottom: 0;
}

.input-group {
  display: flex;
  width: 100%;
}

.input-group > .form-control,
.input-group > .form-select {
  flex: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}


/*------------------------------------------------
 * alerts (Bootstrap replacement)
 * ------------------------------------------------*/

.alert {
  border: solid 1px transparent;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
}

.alert-success {
  background: var(--alert-success-bg);
  border-color: var(--alert-success-border);
  color: var(--alert-success-color);
}

.alert-danger {
  background: var(--alert-danger-bg);
  border-color: var(--alert-danger-border);
  color: var(--alert-danger-color);
}