/* =========================================================
   Dynamic Theme Variables
   ========================================================= */
:root {
    --bg-color: #F3F4F4;          /* default page background */
    --text-color: #061E29;        /* default text color */
    --primary-color: #5F9598;     /* main buttons, navbar, etc */
    --primary-color-dark: #4f7f82; /* hover / active state */
    --primary-color-light: rgba(95, 149, 152, 0.5); /* ripple, switches */
    --accent-color: #1D546D;      /* secondary highlights */
    --bs-primary: var(--primary-color); /* for bootstrap fallback */
}

/* =========================================================
   Page Background & Text
   ========================================================= */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn,
.btn-large,
.btn-small,
.btn-floating {
    background-color: var(--primary-color);
    color: white;
}

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

/* =========================================================
   Navbar
   ========================================================= */
nav {
    background-color: var(--primary-color);
    color: white;
}

/* Navbar active link */
nav ul li a.active {
    color: var(--accent-color);       /* change text color */
    font-weight: 600;                 /* optional: make it bold */
    border-bottom: 2px solid white;   /* optional: underline active */
}

/* =========================================================
   Waves Effect
   ========================================================= */
.waves-effect.waves-light .waves-ripple {
    background-color: var(--primary-color-light);
}

/* =========================================================
   Inputs & Textareas
   ========================================================= */
input:not([type]):focus:not([readonly]),
input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=url]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=search]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid var(--primary-color);
    box-shadow: 0 1px 0 0 var(--primary-color);
}

.input-field input:focus + label,
.input-field textarea:focus + label {
    color: var(--primary-color);
}

/* =========================================================
   Checkboxes
   ========================================================= */
[type="checkbox"]:checked + span:not(.lever):before {
    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}

/* =========================================================
   Radios
   ========================================================= */
[type="radio"]:checked + span:after {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

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

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

/* =========================================================
   Tabs
   ========================================================= */
.tabs .indicator {
    background-color: var(--primary-color);
}

.tabs .tab a {
    color: rgba(0, 0, 0, 0.6);
}

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

/* =========================================================
   Dropdowns
   ========================================================= */
.dropdown-content li > a,
.dropdown-content li > span {
    color: var(--primary-color);
}

/* =========================================================
   Progress Bars
   ========================================================= */
.progress .determinate,
.progress .indeterminate {
    background-color: var(--primary-color);
}

/* =========================================================
   Collection Active Item
   ========================================================= */
.collection .collection-item.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* =========================================================
   Pagination
   ========================================================= */
.pagination li.active {
    background-color: var(--primary-color);
}

/* =========================================================
   Datepicker
   ========================================================= */
.datepicker-date-display {
    background-color: var(--primary-color);
}

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

/* =========================================================
   Timepicker
   ========================================================= */
.timepicker-digital-display {
    background-color: var(--primary-color);
}

/* =========================================================
   Range Slider
   ========================================================= */
input[type=range]::-webkit-slider-thumb {
    background-color: var(--primary-color);
}

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

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

/* =========================================================
   Accent Color Usage Example
   ========================================================= */
a {
    color: var(--accent-color);
}

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

/* =========================================================
   Optional Bootstrap fallback variable
   ========================================================= */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
}

/* =========================================================
   Toast
   ========================================================= */
.toast-primary {
    background-color: var(--primary-color) !important;
    color: #fff;
}