/* Glassmorphism overrides for Materialize-based UI
Drop this file AFTER materialize.css and your faresstyle.css
Author: ChatGPT — Nov 2025
*/


:root{
--glass-bg: rgba(255,255,255,0.12);
--glass-bg-strong: rgba(255,255,255,0.18);
--glass-border: rgba(255,255,255,0.35);
--glass-shadow: 0 8px 32px rgba(31,38,135,0.25);
--glass-blur: 18px;
--glass-text: rgba(255,255,255,0.92);
--glass-muted: rgba(255,255,255,0.7);
}


@media (prefers-color-scheme: dark){
:root{
--glass-bg: rgba(0,0,0,0.28);
--glass-bg-strong: rgba(0,0,0,0.34);
--glass-border: rgba(255,255,255,0.22);
--glass-text: rgba(255,255,255,0.92);
--glass-muted: rgba(255,255,255,0.7);
}
}


/* Background — soft gradient + optional subtle noise */
body{
background: radial-gradient(1200px 800px at 10% -10%, #8ec5fc 0%, transparent 60%),
radial-gradient(1000px 700px at 110% 10%, #e0c3fc 0%, transparent 60%),
linear-gradient(130deg,#0f2027 0%, #203a43 40%, #2c5364 100%);
background-attachment: fixed;
color: var(--glass-text);
}


/* Reusable helper */
.glass{
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
backdrop-filter: blur(var(--glass-blur)) saturate(140%);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}


/* Slight elevation variants */
.glass-elev-1{ box-shadow: 0 4px 20px rgba(0,0,0,0.20); }
.glass-elev-2{ box-shadow: 0 10px 30px rgba(0,0,0,0.28); }
.glass-elev-3{ box-shadow: 0 20px 50px rgba(0,0,0,0.35); }


/* Cards & panels */
.card, .card-panel{
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
color: var(--glass-text);
}
.card .card-action{ border-top-color: rgba(255,255,255,0.15); }


/* Navbar */
nav, .navbar-fixed nav{
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
border-bottom: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
nav a{ color: var(--glass-text); }


/* Footer */
.page-footer{
background: var(--glass-bg-strong);
color: var(--glass-text);
border-top: 1px solid var(--glass-border);
}


/* Sidenav & dropdowns */
.sidenav, .dropdown-content{
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}


/* Modals */
.modal, .modal.bottom-sheet{
background: var(--glass-bg-strong) !important;
-webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px));
backdrop-filter: blur(calc(var(--glass-blur) + 6px));
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: 12px;
max-height: 90%;
}
.modal-overlay{
background: rgba(0,0,0,0.5) !important;
}
.modal .modal-content{
color: var(--glass-text);
}
.modal h4{
color: var(--glass-text);
}


/* Collections, tables */
.collection, .collection-item{
background: var(--glass-bg);
border-color: var(--glass-border);
color: var(--glass-text);
}
.collection .collection-item.active{
background: var(--glass-bg-strong);
}

table{
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 8px;
overflow: hidden;
}
table thead{
background: var(--glass-bg-strong);
border-bottom: 2px solid var(--glass-border);
}
table tbody tr{
border-bottom: 1px solid rgba(255,255,255,0.1);
transition: background 0.2s ease;
}
table tbody tr:hover{
background: rgba(255,255,255,0.08);
}
table th, table td{
color: var(--glass-text);
padding: 12px 15px;
}
table.striped tbody tr:nth-child(odd){
background: rgba(255,255,255,0.03);
}


/* Buttons */
.btn, .btn-large, .btn-small, .btn-flat{
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
color: var(--glass-text);
transition: all 0.3s ease;
}
.btn:hover, .btn-large:hover, .btn-small:hover{
background: rgba(255,255,255,0.25);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
transform: translateY(-2px);
}
.btn.red{
background: rgba(244,67,54,0.3);
border-color: rgba(244,67,54,0.5);
}
.btn.red:hover{
background: rgba(244,67,54,0.5);
}


/* Input fields */
.input-field input[type=text],
.input-field input[type=password],
.input-field input[type=email],
.input-field input[type=date],
.input-field input[type=number],
.input-field textarea.materialize-textarea,
select{
background: rgba(255,255,255,0.08);
border: 1px solid var(--glass-border);
border-radius: 4px;
padding: 8px 12px;
color: var(--glass-text);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.input-field input[type=text]:focus,
.input-field input[type=password]:focus,
.input-field input[type=email]:focus,
.input-field input[type=date]:focus,
.input-field input[type=number]:focus,
.input-field textarea.materialize-textarea:focus{
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.5);
box-shadow: 0 0 0 1px rgba(255,255,255,0.3), inset 0 2px 4px rgba(0,0,0,0.1);
}
.input-field label{
color: var(--glass-muted);
}
.input-field label.active{
color: var(--glass-text);
}
.input-field input[type=text]:focus + label,
.input-field input[type=password]:focus + label,
.input-field input[type=email]:focus + label{
color: var(--glass-text);
}


/* Container */
.container{
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 2rem;
margin-top: 2rem;
margin-bottom: 2rem;
box-shadow: var(--glass-shadow);
}


/* Pagination */
.pagination li a{
background: var(--glass-bg);
border: 1px solid var(--glass-border);
color: var(--glass-text);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.pagination li.active a{
background: var(--glass-bg-strong);
border-color: rgba(255,255,255,0.5);
}
.pagination li a:hover{
background: var(--glass-bg-strong);
}


/* Select dropdown */
.dropdown-content li > a, .dropdown-content li > span{
color: var(--glass-text);
}
.dropdown-content li:hover{
background: rgba(255,255,255,0.1);
}
.select-wrapper input.select-dropdown{
background: rgba(255,255,255,0.08);
border: 1px solid var(--glass-border);
border-radius: 4px;
color: var(--glass-text);
}


/* Datepicker */
.datepicker-modal{
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px));
backdrop-filter: blur(calc(var(--glass-blur) + 6px));
border: 1px solid var(--glass-border);
}
.datepicker-date-display{
background: var(--glass-bg-strong);
}
.datepicker-table td.is-selected{
background: var(--glass-bg-strong);
}


/* Sidebar specific styles */
#sidebar{
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
border-right: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
#sidebar h2{
background: var(--glass-bg-strong);
color: var(--glass-text);
border-bottom: 1px solid var(--glass-border);
}
#sidebar li{
border-bottom: 1px solid rgba(255,255,255,0.1);
}
#sidebar a{
color: var(--glass-text);
transition: background 0.2s ease;
}
#sidebar a:hover{
background: rgba(255,255,255,0.1);
}


/* User view in sidenav */
.sidenav .user-view{
background: var(--glass-bg-strong);
}
.sidenav li > a{
color: var(--glass-text);
}
.sidenav li > a:hover{
background: rgba(255,255,255,0.1);
}
.sidenav .divider{
background-color: rgba(255,255,255,0.15);
}
.sidenav .subheader{
color: var(--glass-muted);
}


/* Text colors */
h1, h2, h3, h4, h5, h6, p, span, a, label{
color: var(--glass-text);
}
.black-text{
color: var(--glass-text) !important;
}


/* Waves effect color adjustment */
.waves-effect.waves-light .waves-ripple{
background: rgba(255,255,255,0.4);
}


/* Form adjustments */
form{
background: transparent;
}


/* Card title */
.card-title{
color: var(--glass-text) !important;
font-weight: 500;
}


/* Links */
a{
color: rgba(142,197,252,0.9);
transition: color 0.2s ease;
}
a:hover{
color: rgba(142,197,252,1);
}


/* Material icons color */
.material-icons{
color: var(--glass-text);
}


/* Responsive adjustments */
@media only screen and (max-width: 600px){
.container{
padding: 1rem;
margin-top: 1rem;
}
}