/* ==============================================
   global.css — Materialize brand overrides
   Only override specific properties that differ
   from Materialize defaults. Let Materialize
   handle layout, sizing, and structure.
   ============================================== */

/* ---------- Typography ---------- */

html {
	font-family: var(--brand-font-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--brand-font-heading);
}

/* ---------- Buttons ---------- */

.btn,
.btn-large {
	text-decoration: none;
	background-color: var(--brand-primary);
	color: #fff;
}

.btn:hover,
.btn-large:hover,
.btn-small:hover {
	background-color: var(--brand-primary);
}

.btn-floating {
	background-color: var(--brand-primary);
}

.btn-floating:hover {
	background-color: var(--brand-primary);
}

.btn:focus,
.btn-large:focus,
.btn-small:focus,
.btn-floating:focus {
	background-color: var(--brand-primary);
	outline: none;
}

.btn-flat:hover,
.btn-flat.btn-small:hover,
.btn-flat:focus,
.btn-flat.btn-small:focus {
	background-color: transparent;
	outline: none;
}

button:focus {
	outline: none;
	background-color: inherit;
}

.btn.disabled,
.disabled.btn-large,
.disabled.btn-small,
.btn-floating.disabled,
.btn-large.disabled,
.btn-small.disabled,
.btn-flat.disabled,
.btn:disabled,
.btn-large:disabled,
.btn-small:disabled,
.btn-floating:disabled,
.btn-large:disabled,
.btn-small:disabled,
.btn-flat:disabled,
.btn[disabled],
.btn-large[disabled],
.btn-small[disabled],
.btn-floating[disabled],
.btn-large[disabled],
.btn-small[disabled],
.btn-flat[disabled] {
	background-color: transparent !important;
}

/* ---------- Forms ---------- */

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
	border-bottom: 1px solid var(--brand-form-focus);
	-webkit-box-shadow: 0 1px 0 0 var(--brand-form-focus);
	box-shadow: 0 1px 0 0 var(--brand-form-focus);
}

input:not([type]):focus:not([readonly])+label,
input[type=text]:not(.browser-default):focus:not([readonly])+label,
input[type=password]:not(.browser-default):focus:not([readonly])+label,
input[type=email]:not(.browser-default):focus:not([readonly])+label,
input[type=url]:not(.browser-default):focus:not([readonly])+label,
input[type=time]:not(.browser-default):focus:not([readonly])+label,
input[type=date]:not(.browser-default):focus:not([readonly])+label,
input[type=datetime]:not(.browser-default):focus:not([readonly])+label,
input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label,
input[type=tel]:not(.browser-default):focus:not([readonly])+label,
input[type=number]:not(.browser-default):focus:not([readonly])+label,
input[type=search]:not(.browser-default):focus:not([readonly])+label,
textarea.materialize-textarea:focus:not([readonly])+label {
	color: var(--brand-form-focus);
}

.select-wrapper input.select-dropdown:focus {
	border-bottom: 1px solid var(--brand-primary);
}

input[type=range]+.thumb {
	background-color: var(--brand-primary);
}

.datepicker-modal input[type=text]:not(.browser-default) {
	border-bottom: none;
}

/* ---------- Tabs ---------- */

.tabs .tab a {
	color: rgba(117, 117, 117, 0.7);
}

.tabs .tab a:hover,
.tabs .tab a.active {
	color: var(--brand-primary);
}

.tabs .tab a:focus,
.tabs .tab a:focus.active {
	background-color: rgba(233, 233, 233, 0.30);
}

.tabs .indicator {
	background-color: var(--brand-primary);
}

/* ---------- Cards ---------- */

.card {
	border-radius: 12px;
}

.card .card-content {
	padding: 16px;
}

/* Overview-style card links */
.app-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	text-decoration: none;
	border: 1px solid var(--brand-border);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	position: relative;
}

.app-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(78, 44, 112, 0.08);
}

.app-card .card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.app-card .nav-icon {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 10px;
	margin-bottom: 12px;
}

.app-card .nav-icon i {
	font-size: 20px;
}

.app-card .card-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 4px;
}

.app-card:hover .card-title {
	color: var(--brand-primary);
}

.app-card p {
	font-size: 12px;
	color: #8a8fa3;
	margin: 0;
	line-height: 1.5;
}

.app-card {
	height: 180px;
}


.card .card-content {
	border-radius: 12px 12px 0 0;
}

.card .card-action:last-child {
	border-radius: 0 0 12px 12px;
}

.card-panel {
	border-radius: 12px;
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
	color: var(--brand-primary-accent);
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating):hover {
	color: var(--brand-primary);
}

.dark-card {
	background-color: var(--brand-dark-card);
}

.dark-card .card-title,
.dark-card .card-content,
.dark-card .card-content p,
.dark-card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
	color: #fff;
}

/* ---------- Collection ---------- */

.collection .collection-item.active {
	background-color: var(--brand-primary);
	color: #fff;
}

/* ---------- Dropdown ---------- */

.dropdown-content li>a,
.dropdown-content li>span {
	color: var(--brand-primary);
}

/* ---------- Datepicker ---------- */

.datepicker-date-display {
	background-color: var(--brand-datepicker-display);
}

.datepicker-table td.is-today {
	color: var(--brand-form-focus);
}

.datepicker-table td.is-selected {
	background-color: var(--brand-primary);
	color: #fff;
}

.datepicker-day-button:focus {
	background-color: rgba(100, 100, 160, 0.231);
}

.datepicker-cancel,
.datepicker-clear,
.datepicker-today,
.datepicker-done {
	color: var(--brand-form-focus);
	padding: 0 1rem;
}

/* ---------- Materialize accent color overrides ---------- */
/* Materialize defaults to #ee6e73 (red) and #ffab40 (orange). */
/* These override the remaining instances not already patched in materialize.css. */

blockquote {
	border-left: 5px solid var(--brand-primary);
}

.pagination li.active {
	background-color: var(--brand-primary);
}

.page-footer {
	background-color: var(--brand-primary);
}

.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
	color: rgba(78, 44, 112, 0.4);
}

.table-of-contents a:hover {
	border-left-color: var(--brand-primary);
}

.table-of-contents a.active {
	border-left-color: var(--brand-primary);
}

.sidenav .collapsible-body > ul:not(.collapsible) > li.active,
.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
	background-color: var(--brand-primary);
}

.sidenav li > a.btn:hover,
.sidenav li > a.btn-large:hover,
.sidenav li > a.btn-small:hover {
	background-color: var(--brand-primary);
}

.tap-target {
	background-color: var(--brand-primary);
}

.modal .modal-content {
	padding: 8px 24px 16px 24px;
}

.modal .modal-content.datepicker-container,
.modal .modal-content.timepicker-container {
	padding: 0;
}

.timepicker-tick.active {
	color: #fff;
}

.modal.modal-fixed-footer .modal-footer {
	border-top: none;
}

.modal.bottom-sheet {
	max-width: 100%;
}

/* ---------- Breadcrumbs ---------- */

.breadcrumb {
	color: var(--brand-primary);
}

.breadcrumb:before {
	color: var(--brand-primary);
}

.breadcrumb:last-child {
	color: var(--brand-primary);
}

/* ---------- Switch ---------- */

.switch label .lever {
	width: 44px;
	height: 24px;
	border-radius: 12px;
	background-color: #e0e0e0;
}

.switch label .lever:before {
	display: none;
}

.switch label .lever:after {
	width: 18px;
	height: 18px;
	top: 3px;
	left: 3px;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.switch label input[type=checkbox]:checked + .lever {
	background-color: var(--brand-primary);
}

.switch label input[type=checkbox]:checked + .lever:after {
	background-color: #fff;
	left: 23px;
}

.switch label input[type=checkbox]:checked + .lever:before,
.switch label input[type=checkbox]:checked + .lever:after {
	left: 23px;
}

input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before,
input[type=checkbox]:not(:disabled) ~ .lever:active:before,
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
	transform: none;
	background-color: transparent;
}

.switch input[type=checkbox][disabled] + .lever {
	background-color: #f0f0f0;
}

.switch label input[type=checkbox][disabled] + .lever:after,
.switch label input[type=checkbox][disabled]:checked + .lever:after {
	background-color: #ccc;
}

/* ---------- Preloader ---------- */

.spinner-blue,
.spinner-blue-only,
.spinner-red,
.spinner-red-only,
.spinner-yellow,
.spinner-yellow-only,
.spinner-green,
.spinner-green-only {
	border-color: var(--brand-primary);
}

.progress .indeterminate {
	background-color: var(--brand-primary);
}

.progress .determinate {
	background-color: var(--brand-primary);
}

/* ---------- Toast ---------- */

#toast-container {
	top: auto !important;
	bottom: 3%;
	left: 15px;
	right: auto;
}

#toast-container .toast {
	background-color: var(--brand-link-accent);
}

/* ---------- Tooltips ---------- */

.tooltipped {
    cursor: pointer;
}

/* ---------- Misc overrides ---------- */

.pull-right {
	float: right !important;
}

.no-margin {
	margin: 0px;
}

.verify-account {
	text-decoration: underline;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.spin-animation {
	animation-name: spin;
	animation-duration: 1800ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}