/* =====================================================
   PSYCHOLOGICAL COUNSELLING PORTAL
   Responsive UI
   HTML5 + CSS3
=====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background: url(../images/bg1.png) no-repeat center center fixed;
    background-size: cover;
    color:#333;
}

/* Container for the buttons */
.loginbtn {
    margin-top: 30px;
    font-size: 1.1rem;
    color: #666; /* Color for the "/" separator */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Base button styling */
.loginbtn .button {
    display: inline-block;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    color: #004091;
    background-color: #fff; /* Calming sage green */
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hover state styling */
.loginbtn .button:hover {
    background-color: #fff; /* Darker green on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Active/Click state styling */
.loginbtn .button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* ===============================
   LOGIN PAGE
================================*/

.login-page {
    height: 100vh;
    margin: 0;
    background-color: #f4f7f6;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.login-container {
    display: flex;
    width: 100%;
    max-width: 950px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.1);
    border-radius: 15px;
    overflow: hidden;
    background: #ffffff;
    animation: fadeUp .8s ease;
}

/* Left Column */
.login-branding {
    background: linear-gradient(135deg, #0f4c81, #1976d2);
    color: white;
    padding: 50px;
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.login-branding h1 {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 700;
}

.login-branding p {
    font-size: 1rem;
    margin-top: 15px;
    line-height: 1.6;
}

.login-branding .logo {
    width: 100%;
    margin-bottom: 20px;
}

/* Right Column */
.login-form-section {
    padding: 40px 50px;
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-form-section h2 {
    margin-bottom: 25px;
    color: #333;
    font-weight: 600;
    text-align: center;
    font-size: 24px;
}

.login-form-section .form-group {
    position: relative;
    margin-bottom: 22px;
}

.login-form-section .form-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
}

.login-form-section .form-control {
    padding-left: 40px;
}

.btn-login{
    width:100%;
    height:50px;
    background:#1976d2;
    color:#fff;
    border: none;
    border-radius:10px;
    font-size:16px;
    cursor:pointer;
    transition:.3s;
}

.btn-login:hover{
    background:#0f4c81;
    transform:translateY(-2px);
}

.login-links {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 0.9rem;
}

.login-links a {
    color: #007bff;
    text-decoration: none;
}

.login-links a:hover {
    text-decoration: underline;
}

.login-footer{
    text-align:center;
    margin-top: 25px;
    color:#777;
    font-size:13px;
}

/* Separator */
.separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #aaa;
    margin: 30px 0;
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}

.separator:not(:empty)::before {
    margin-right: .25em;
}

.separator:not(:empty)::after {
    margin-left: .25em;
}


/* ===============================
   DASHBOARD & GENERAL STYLES
================================*/

.wrapper{
    display:flex;
    min-height:100vh;
}

/* Sidebar */
.sidebar{
    width:250px;
    background:#0f4c81;
    color:#fff;
    position:fixed;
    height:100vh;
    overflow:auto;
}

.logo{
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,.15);
}

.logo h2{
    font-size:22px;
}

.menu{
    list-style:none;
    margin-top:25px;
}

.menu li{
    border-bottom:1px solid rgba(255,255,255,.08);
}

.menu li a{
    display:block;
    color:#fff;
    padding:18px 25px;
    text-decoration:none;
    transition:.3s;
}

.menu li a:hover{
    background:#1976d2;
    padding-left:35px;
}

.menu li.active{
    background:#1565c0;
}

/* Main */
.main{
    margin-left:250px;
    width:calc(100% - 250px);
	background:#e9e8e8;
}

.topbar{
    background:#fff;
    padding:20px 30px;
    box-shadow:0 5px 15px rgba(0,0,0,.05);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.content{
    padding:10px;
}
/*Appointment for student */
.view-container {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 24px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
margin: 0 auto;
font-size: 13.5px;
color: #334155;
}

.view-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 20px;
}

.view-title {
font-size: 18px;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.3px;
}

.btn-back {
background: #475569;
color: #ffffff !important;
padding: 7px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}

.btn-back:hover {
background: #334155;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Executive Banner */
.summary-banner {
background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 16px 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
align-items: center;
margin-bottom: 24px;
}

.banner-item {
display: flex;
flex-direction: column;
}

.banner-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #64748b;
margin-bottom: 4px;
}

.banner-value {
font-size: 15px;
font-weight: 700;
color: #0f2942;
}

/* Status Pills */
.status-pill {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3px;
text-align: center;
width: fit-content;
}
.status-pending { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.status-approved { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.status-completed { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.status-cancelled { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.status-rescheduled { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }

/* Section Headers */
.section-header {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: #0f4c81;
margin: 22px 0 12px 0;
display: flex;
align-items: center;
gap: 8px;
}

.section-header::before {
content: '';
width: 4px;
height: 14px;
background: #0f4c81;
border-radius: 2px;
display: inline-block;
}

/* Key-Value Grid System */
.info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}

@media (max-width: 868px) {
.info-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 576px) {
.info-grid {
grid-template-columns: 1fr;
}
}

.info-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 10px 14px;
}

.info-box.full-width {
grid-column: 1 / -1;
}

.info-box.span-2 {
grid-column: span 2;
}

.info-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: #64748b;
letter-spacing: 0.4px;
margin-bottom: 3px;
display: block;
}

.info-value {
font-size: 13.5px;
font-weight: 600;
color: #1e293b;
word-break: break-word;
}

/* Photo & Details Split Box */
.student-flex-container {
display: flex;
gap: 16px;
align-items: flex-start;
}

.student-photo-card {
width: 140px;
flex-shrink: 0;
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 8px;
text-align: center;
}

.student-photo-card img {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: 6px;
border: 1px solid #e2e8f0;
}

/* Custom Alert Banner */
.alert-box {
padding: 12px 16px;
border-radius: 6px;
font-size: 13px;
margin-top: 15px;
}
.alert-box-danger {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
.alert-box-warning {
background: #fffbebfb;
color: #92400e;
border: 1px solid #fde68a;
}

/* Compact Table Styling */
.table-responsive {
overflow-x: auto;
border: 1px solid #e2e8f0;
border-radius: 6px;
margin-top: 10px;
}

.compact-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
text-align: left;
}

.compact-table th {
background: #f1f5f9;
color: #475569;
font-weight: 700;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.5px;
padding: 10px 14px;
border-bottom: 1px solid #e2e8f0;
}

.compact-table td {
padding: 10px 14px;
border-bottom: 1px solid #f1f5f9;
color: #334155;
}

.compact-table tr:last-child td {
border-bottom: none;
}

.compact-table tr:nth-child(even) {
background: #fafafa;
}

/*Appointment End */

.card{
    background:#fff;
    border-radius:15px;
    padding:25px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    margin-bottom:25px;
}

.card-title{
    font-size:22px;
    font-weight:600;
    margin-bottom:20px;
}

/* Table */
table{
    width:100%;
    border-collapse:collapse;
}

table th{
    background:#1976d2;
    color:#fff;
    padding:14px;
}

table td{
    padding:14px;
    border-bottom:1px solid #eee;
}

/* Form */
.row{
    display:flex;
    gap:20px;
}

.col{
    flex:1;
}

.form-group{
    margin-bottom:22px;
}

.form-control{
    width:100%;
    height:50px;
    border:1px solid #d6d6d6;
    border-radius:8px;
    padding:0 15px;
    font-size:15px;
    transition:.3s;
    box-sizing: border-box;
}

.form-control:focus{
    outline:none;
    border-color:#1976d2;
    box-shadow:0 0 10px rgba(25,118,210,.2);
}

.btn{
    padding:12px 30px;
    background:#1976d2;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

.btn:hover{
    background:#0f4c81;
}

/* Alert */
.alert-success{
    background:#d4edda;
    color:#155724;
    padding:15px;
    border-radius:8px;
}

.alert-danger{
    background:#f8d7da;
    color:#721c24;
    padding:15px;
    border-radius:8px;
}

/* Animations */
@keyframes fadeUp{
    from{ opacity:0; transform:translateY(30px); }
    to{ opacity:1; transform:translateY(0); }
}

/* Media Queries */
@media (max-width: 991px){
    .main{
        margin-left:220px;
        width:calc(100% - 220px);
    }
    .sidebar{
        width:220px;
    }
}

@media (max-width: 850px) {
    .login-container {
        flex-direction: column;
        width: 95%;
        max-width: 500px;
    }

    .login-branding,
    .login-form-section {
        width: 100%;
    }

    .login-branding {
        padding: 40px 30px;
        border-radius: 15px 15px 0 0;
    }
    .login-form-section {
        padding: 30px;
    }
}

@media(max-width:768px){
    .wrapper{
        display:block;
    }
    .sidebar{
        position:relative;
        width:100%;
        height:auto;
    }
    .main{
        margin-left:0;
        width:100%;
    }
    .row{
        display:block;
    }
    .col{
        margin-bottom:20px;
    }
}

/* ===============================
   PORTAL LOGIN PAGE
================================*/

.portal-login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    
}

.portal-login-box {
    background:rgba(0,63,143,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 50px 60px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    text-align: center;
    animation: fadeUp .8s ease;
}

.portal-login-box .logo {
    width: 300px;
    margin-bottom: 25px;
}

.portal-login-box h1 {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 35px;
}

#portal-g_id_signin {
    display: flex;
    justify-content: center;
}