﻿.glass{

    background: var(--glass-bg);

    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);

    border:1px solid var(--glass-border);

    border-radius: var(--glass-radius);

    box-shadow: var(--glass-shadow);

}

/*Card*/
.glass-card{

    background: var(--glass-bg);

    backdrop-filter: var(--glass-blur);

    border-radius: var(--glass-radius);

    border:1px solid var(--glass-border);

    box-shadow: var(--glass-shadow);

    transition: all .3s ease;

}

.glass-card:hover{

    transform: translateY(-5px);

    box-shadow: var(--glass-shadow-hover);

}

/*Button*/
.btn-glass{

    background: rgba(255,255,255,0.20);

    border:1px solid var(--glass-border);

    backdrop-filter: blur(6px);

    color: var(--glass-text);

    transition: all .2s ease;

}

.btn-glass:hover{

    background: rgba(255,255,255,0.35);

    transform: translateY(-1px);

}

.btn-glass-primary{

    background: var(--glass-primary);

    border:none;

    color:white;

}

.btn-glass-primary:hover{

    opacity:0.9;

}

/*Navbar*/
.navbar-glass{

    background: var(--glass-navbar-bg);

    backdrop-filter: blur(14px);

    border-bottom:1px solid var(--glass-border);

}

/*Modal*/
.glass-modal .modal-content{

    background: var(--glass-bg);

    backdrop-filter: blur(16px);

    border-radius: var(--glass-radius);

    border:1px solid var(--glass-border);

}

/*Table*/
.glass-table{

    background: var(--glass-bg);

    backdrop-filter: blur(10px);

    border-radius: var(--glass-radius);

    overflow:hidden;

}

.glass-table thead{

    background: rgba(255,255,255,0.35);

}

.glass-table td,
.glass-table th{

    border:none;

}

/*Form*/
.input-glass{

    background: rgba(255,255,255,0.25);

    border:1px solid var(--glass-border);

    backdrop-filter: blur(8px);

    border-radius:8px;

    color: var(--glass-text);

}

.input-glass:focus{

    outline:none;

    border-color: var(--glass-primary);

    box-shadow: 0 0 0 2px rgba(79,70,229,0.2);

}

/*DropDown*/
.dropdown-glass{

    background: var(--glass-bg);

    backdrop-filter: blur(12px);

    border-radius:12px;

    border:1px solid var(--glass-border);

}

.dropdown-glass .dropdown-item{

    color: var(--glass-text);

}

.dropdown-glass .dropdown-item:hover{

    background: rgba(255,255,255,0.3);

}

/*Page Background*/
.glass-page{

    background: linear-gradient(
        135deg,
        #667eea,
        #764ba2
    );

    min-height:100vh;

}
