/* ===================================
   MODERN DARK THEME FOR BULMA
   Based on bulmaswatch dark theme
   =================================== */

/* Import Lato font */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;700&display=swap");

/* ===================================
   COLOR VARIABLES
   =================================== */
:root {
	/* Background colors */
	--dark-bg-primary: #1f2424;
	--dark-bg-secondary: #282f2f;
	--dark-bg-tertiary: #343c3d;

	/* Text colors */
	--dark-text-primary: #ffffff;
	--dark-text-secondary: #f2f2f2;
	--dark-text-muted: #8c9b9d;
	--dark-text-light: #dbdee0;

	/* Border colors */
	--dark-border: #5e6d6f;
	--dark-border-light: #8c9b9d;

	/* Accent colors */
	--dark-primary: #375a7f;
	--dark-link: #1abc9c;
	--dark-link-hover: #1dd2af;
	--dark-info: #3298dc;
	--dark-success: #2ecc71;
	--dark-warning: #f1b70e;
	--dark-danger: #e74c3c;
}

/* ===================================
   BASE STYLES
   =================================== */
html {
	background-color: var(--dark-bg-primary);
	/* font-size: 15px; */
}

body {
	font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
	color: var(--dark-text-primary);
	background-color: var(--dark-bg-primary);
}

/* ===================================
   TYPOGRAPHY
   =================================== */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.subtitle {
	color: var(--dark-text-secondary);
}

h6 {
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

strong {
	color: var(--dark-text-secondary);
}

a {
	color: var(--dark-link);
	transition: all 200ms ease;
}

a:hover {
	color: var(--dark-link-hover);
}

code {
	background-color: var(--dark-bg-secondary);
	color: var(--dark-danger);
	/* padding: 0.25em 0.5em; */
}

pre {
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-primary);
}

hr {
	background-color: var(--dark-bg-tertiary);
}

/* ===================================
   BUTTONS
   =================================== */
.button {
	/* transition: all 200ms ease;
	border-width: 2px;
	color: var(--dark-text-primary);
	background-color: var(--dark-bg-secondary);
	border-color: var(--dark-border); */
}

.button:hover {
	/* border-color: var(--dark-border-light);
	color: var(--dark-text-secondary); */
}

.button:focus,
.button.is-focused,
.button:active,
.button.is-active {
	/* box-shadow: 0 0 0 2px rgba(140, 155, 157, 0.5);
	border-color: var(--dark-border-light); */
}

/* Colored buttons */
.button.is-primary {
	background-color: var(--dark-primary);
	border-color: transparent;
	color: var(--dark-text-primary);
}

.button.is-primary:hover {
	background-color: #436d9a;
}

.button.is-primary[disabled] {
	background-color: #3e5b7a;
}

.button.is-link {
	background-color: var(--dark-link);
	border-color: transparent;
	color: var(--dark-text-primary);
}

.button.is-link:hover {
	background-color: #1fdeb8;
}

.button.is-info {
	background-color: var(--dark-info);
	border-color: transparent;
}

.button.is-success {
	background-color: var(--dark-success);
	border-color: transparent;
}

.button.is-warning {
	background-color: var(--dark-warning);
	border-color: transparent;
	color: rgba(0, 0, 0, 0.7);
}

.button.is-danger {
	/* background-color: var(--dark-danger); */
	/* border-color: transparent; */
}

/* ===================================
   FORMS
   =================================== */
.input,
.textarea,
.select select {
	/* transition: all 200ms ease; */
	background-color: #fff;
	border-color: var(--dark-border);
	/* border-width: 2px; */
	color: var(--dark-bg-secondary);
}

/* Inputs keep a white background above, but Bulma derives the placeholder from
   the dark scheme's text colour -- near-white, so it is invisible here. A muted
   version of the input's own text colour instead. */
.input::placeholder,
.textarea::placeholder {
	color: rgba(40, 47, 47, 0.6);
}

.input:hover,
.textarea:hover,
.select select:hover {
	border-color: var(--dark-border-light);
}

.input:focus,
.input.is-focused,
.textarea:focus,
.textarea.is-focused,
.select select:focus {
	border-color: var(--dark-link);
	box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
}

.label {
	color: var(--dark-text-light);
}

.select:not(.is-multiple):not(.is-loading)::after {
	border-color: var(--dark-link);
}

.checkbox {
	accent-color: hsl(141, 71%, 48%);
	margin-right: 8px;
	min-width: 20px;
	min-height: 20px;
}

.input.is-success {
	background: #defff0;
	color: #035530;
	border: 2px solid #2ba76f;
}

.input.is-warning {
	background: #fff3d8;
	color: #674905;
	border: 2px solid #ffb70f;
}

.input.is-danger {
	background: #ffd5de;
	color: #4d0212;
	border: 2px solid #ff6685;
}

/* ===================================
   CARDS AND BOXES
   =================================== */
.box {
	background-color: var(--dark-bg-tertiary);
	box-shadow: none;
	color: var(--dark-text-primary);
	border-radius: 8px;
}

.card {
	background-color: var(--dark-bg-secondary);
	border: 2px solid var(--dark-bg-tertiary);
	box-shadow: none;
	border-radius: 0.4em;
}

.card-header {
	background-color: rgba(18, 18, 18, 0.2);
	box-shadow: none;
	border-radius: 0.4em 0.4em 0 0;
}

.card-footer,
.card-footer-item {
	background-color: rgba(18, 18, 18, 0.2);
	border-width: 2px;
	border-color: var(--dark-bg-tertiary);
}

.card-header-title {
	color: var(--dark-text-secondary);
}

/* ===================================
   NOTIFICATIONS
   =================================== */
.notification {
	background-color: var(--dark-bg-tertiary);
	border-radius: 0.4em;
}

.notification.is-primary {
	background-color: var(--dark-primary);
	color: var(--dark-text-primary);
}

.notification.is-link {
	background-color: var(--dark-link);
	color: var(--dark-text-primary);
}

.notification.is-info {
	background-color: var(--dark-info);
	color: var(--dark-text-primary);
}

.notification.is-success {
	background-color: var(--dark-success);
	color: var(--dark-text-primary);
}

.notification.is-warning {
	background-color: var(--dark-warning);
	color: rgba(0, 0, 0, 0.7);
}

.notification.is-danger {
	background-color: var(--dark-danger);
	color: var(--dark-text-primary);
}

/* ===================================
   TABLES
   =================================== */
.table {
	background-color: var(--dark-bg-tertiary);
	color: var(--dark-text-primary);
}

.table td,
.table th {
	border: 1px solid var(--dark-border);
	border-width: 0 0 1px;
}

.table th {
	color: var(--dark-text-secondary);
}

.table thead td,
.table thead th {
	border-width: 0 0 2px;
	color: var(--dark-text-secondary);
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
	background-color: var(--dark-bg-secondary);
}

.table.is-hoverable tbody tr:not(.is-selected):hover {
	background-color: var(--dark-bg-secondary);
}

/* ===================================
   NAVIGATION
   =================================== */
.navbar {
	background-color: var(--dark-primary);
	border-radius: 0.4em;
}

.navbar-item,
.navbar-link {
	color: var(--dark-text-primary);
}

.navbar-item:hover,
.navbar-item.is-active,
.navbar-link:hover {
	background-color: transparent;
	color: var(--dark-link);
}

.navbar-burger {
	color: var(--dark-text-primary);
}

@media screen and (max-width: 1023px) {
	.navbar-menu {
		background-color: var(--dark-primary);
		border-radius: 0 0 0.4em 0.4em;
		/* The dropdown flattens into this menu and is its last child, so without
		   clipping its square corners paint over the rounded ones and leave a
		   dark sliver at each bottom edge. */
		overflow: hidden;
	}
}

.navbar-dropdown {
	background-color: var(--dark-primary);
	border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Below the desktop breakpoint the dropdown is not a floating panel: it sits
   inline in the burger menu, in the same blue. The border that frames it above
   only draws a box around part of a menu down here, its square corners cutting
   across the rounded ones below it.

   Must follow the rule above rather than join the other mobile rules earlier in
   this file: a media query adds no specificity, so an override placed before
   the declaration it overrides simply loses. */
@media screen and (max-width: 1023px) {
	.navbar-dropdown {
		border: none;
	}
}

/* Bulma gives every dropdown item its own background and colour, which paints
   over the panel colour above. Keep them transparent so the navbar blue shows
   through and dropdown items match the top-level ones. */
.navbar-dropdown a.navbar-item:not(.is-active, .is-selected) {
	background-color: transparent;
	color: var(--dark-text-primary);
}

.navbar-dropdown a.navbar-item:hover,
.navbar-dropdown a.navbar-item.is-active {
	background-color: transparent;
	color: var(--dark-link);
}

/* Bulma hides the divider below its desktop breakpoint, where the dropdown
   flattens into the burger menu -- which is exactly where a group separator is
   needed most, the items having lost the panel that framed them. */
.navbar-dropdown .navbar-divider {
	display: block;
	background-color: rgba(255, 255, 255, 0.2);
}

/* The dropdown arrow defaults to the link colour, which reads as a stray blue
   mark floating beside the white navbar text rather than part of it. Bulma
   paints it via --bulma-navbar-dropdown-arrow, not --bulma-arrow-color. */
.navbar-link:not(.is-arrowless)::after {
	--bulma-navbar-dropdown-arrow: var(--dark-text-primary);
}

.navbar-link:hover:not(.is-arrowless)::after {
	--bulma-navbar-dropdown-arrow: var(--dark-link);
}

/* ===================================
   TABS
   =================================== */
.tabs a {
	color: var(--dark-text-primary);
	border-bottom-width: 2px;
	margin-bottom: -2px;
}

.tabs a:hover {
	border-bottom-color: var(--dark-text-secondary);
	color: var(--dark-text-secondary);
}

.tabs li.is-active a {
	border-bottom-color: var(--dark-link);
	color: var(--dark-link);
}

.tabs.is-boxed a {
	border-width: 2px;
}

.tabs.is-boxed li.is-active a {
	background-color: var(--dark-bg-primary);
	border-color: var(--dark-border);
	border-bottom-color: transparent !important;
}

.tabs.is-toggle a {
	border-color: var(--dark-border);
	border-width: 2px;
}

.tabs.is-toggle li.is-active a {
	background-color: var(--dark-link);
	border-color: var(--dark-link);
	color: var(--dark-text-primary);
}

/* ===================================
   MESSAGES
   =================================== */
.message {
	/* background-color: var(--dark-bg-secondary);
	border-radius: 0.4em; */
}

.message-header {
	/* background-color: var(--dark-bg-tertiary);
	color: var(--dark-text-primary);
	font-weight: 700; */
}

.message-body {
	/* border-width: 2px;
	border-color: var(--dark-bg-tertiary);
	color: var(--dark-text-primary); */
}

/* ===================================
   MODAL
   =================================== */
.modal-background {
	background-color: rgba(10, 10, 10, 0.86);
}

.modal-card-head,
.modal-card-foot {
	background-color: var(--dark-bg-secondary);
	border-color: var(--dark-bg-tertiary);
}

.modal-card-body {
	background-color: var(--dark-bg-secondary);
}

.modal-card-title {
	color: var(--dark-text-secondary);
}

/* ===================================
   MENU
   =================================== */
.menu-list a {
	color: var(--dark-text-primary);
	transition: all 300ms ease;
	border-radius: 3px;
}

.menu-list a:hover {
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-secondary);
}

.menu-list a.is-active {
	background-color: var(--dark-link);
	color: var(--dark-text-primary);
}

.menu-label {
	color: var(--dark-text-primary);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ===================================
   PANEL
   =================================== */
.panel {
	border-radius: 8px;
	box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
}

.panel-heading {
	background-color: var(--dark-bg-tertiary);
	color: var(--dark-text-secondary);
	border-radius: 8px 8px 0 0;
	font-weight: 700;
}

.panel-tabs {
	border-width: 2px;
}

.panel-tabs a {
	border-width: 2px;
	border-bottom: 1px solid var(--dark-border);
}

.panel-tabs a.is-active {
	color: var(--dark-link-hover);
	border-bottom-color: var(--dark-link-hover);
}

.panel-block {
	border-width: 2px;
	color: var(--dark-text-secondary);
}

.panel-block:hover {
	color: var(--dark-link-hover);
}

.panel-block.is-active {
	border-left-color: var(--dark-link);
	color: var(--dark-link-hover);
}

.panel-icon {
	color: var(--dark-text-primary);
}

/* ===================================
   TAGS
   =================================== */
.tag:not(body) {
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-primary);
	border-radius: 0.4em;
}

.tag.is-primary {
	background-color: var(--dark-primary);
}

.tag.is-link {
	background-color: var(--dark-link);
}

.tag.is-info {
	background-color: var(--dark-info);
}

.tag.is-success {
	background-color: var(--dark-success);
}

.tag.is-warning {
	background-color: var(--dark-warning);
	color: rgba(0, 0, 0, 0.7);
}

.tag.is-danger {
	background-color: var(--dark-danger);
}

/* ===================================
   HERO
   =================================== */
.hero {
	background-color: var(--dark-bg-tertiary);
}

.hero.is-primary {
	background-color: var(--dark-primary);
}

.hero.is-link {
	background-color: var(--dark-link);
}

.hero.is-info {
	background-color: var(--dark-info);
}

.hero.is-success {
	background-color: var(--dark-success);
}

.hero.is-warning {
	background-color: var(--dark-warning);
}

.hero.is-danger {
	background-color: var(--dark-danger);
}

/* ===================================
   PROGRESS BAR
   =================================== */
.progress {
	border-radius: 290486px;
}

.progress::-webkit-progress-bar {
	background-color: var(--dark-bg-tertiary);
}

.progress::-webkit-progress-value {
	background-color: var(--dark-text-light);
}

.progress::-moz-progress-bar {
	background-color: var(--dark-text-light);
}

/* ===================================
   PAGINATION
   =================================== */
.pagination-previous,
.pagination-next,
.pagination-link {
	border-color: var(--dark-border);
	border-width: 2px;
	color: var(--dark-link);
}

.pagination-previous:hover,
.pagination-next:hover,
.pagination-link:hover {
	border-color: var(--dark-border-light);
	color: var(--dark-link-hover);
}

.pagination-link.is-current {
	background-color: var(--dark-link);
	border-color: var(--dark-link);
	color: var(--dark-text-primary);
}

/* ===================================
   FOOTER
   =================================== */
.footer {
	background-color: var(--dark-bg-secondary);
	padding: 3rem 1.5rem 6rem;
}

/* ===================================
   DROPDOWN
   =================================== */
.dropdown-content {
	background-color: var(--dark-bg-secondary);
	border-radius: 0.4em;
}

.dropdown-item {
	color: var(--dark-text-primary);
}

.dropdown-item:hover,
button.dropdown-item:hover {
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-light);
}

.dropdown-item.is-active,
button.dropdown-item.is-active {
	background-color: var(--dark-link);
	color: var(--dark-text-primary);
}

.dropdown-divider {
	background-color: var(--dark-border);
}

/* ===================================
   BREADCRUMB
   =================================== */
.breadcrumb a {
	color: var(--dark-link);
}

.breadcrumb a:hover {
	color: var(--dark-link-hover);
}

.breadcrumb li.is-active a {
	color: var(--dark-text-secondary);
}

.breadcrumb li + li::before {
	color: var(--dark-text-muted);
}