@font-face {
  font-family: 'Yekan';
  src: url('../assets/fonts/Yekan.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
    --bs-body-font-family: 'Yekan', sans-serif;
    --primary-accent: #4e73df;
    --success-accent: #1cc88a;
    --info-accent: #36b9cc;
    --warning-accent: #f6c23e;
    --body-bg: #f8f9fc;
    --sidebar-bg: #ffffff;
    --sidebar-width: 280px;
    --header-height: 60px;
    --card-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    --card-border-radius: 0.5rem;
    --card-border-color: #e3e6f0;
    --text-color-dark: #5a5c69;
    --text-color-light: #858796;
}

body {
    font-family: var(--bs-body-font-family);
    background-color: #fff;
    color: var(--text-color-dark);
}

/* --- App Specific Styles --- */
.main-content body {
    background-color: var(--body-bg);
}

/* --- Main Layout --- */
.header { height: var(--header-height); background-color: var(--sidebar-bg); border-bottom: 1px solid var(--card-border-color); z-index: 1030; }
.sidebar { width: var(--sidebar-width); top: 0; bottom: 0; right: 0; padding-top: var(--header-height); background-color: var(--sidebar-bg); border-left: 1px solid var(--card-border-color); z-index: 1020; }
.main-content { padding-top: calc(var(--header-height) + 1.5rem); padding-right: calc(var(--sidebar-width) + 1.5rem); padding-left: 1.5rem; padding-bottom: 1.5rem; background-color: var(--body-bg); }
@media (max-width: 767.98px) { .sidebar { transform: translateX(var(--sidebar-width)); transition: transform .3s ease-in-out; top: var(--header-height); padding-top: 1rem; } .sidebar.show { transform: translateX(0); } .main-content { padding-right: 1.5rem; } }

/* --- Components --- */
.sidebar .nav-link { color: var(--text-color-dark); padding: 0.75rem 1.5rem; transition: all 0.1s ease-in-out; }
.sidebar .nav-link .fa-solid { color: var(--text-color-light); }
.sidebar .nav-link:hover { background-color: #f1f3f5; color: var(--primary-accent); }
.sidebar .nav-link:hover .fa-solid { color: var(--primary-accent); }
.sidebar .nav-link.active { color: var(--primary-accent); font-weight: 600; }
.sidebar .nav-link.active .fa-solid { color: var(--primary-accent); }
.card { box-shadow: var(--card-shadow); border-radius: var(--card-border-radius); border: 1px solid var(--card-border-color); }
.card-header { background-color: #f8f9fc; border-bottom: 1px solid var(--card-border-color); font-weight: 600; color: var(--primary-accent); }
.form-control, .form-select { border-color: #d1d3e2; }
.form-control:focus, .form-select:focus { border-color: #86b7fe; box-shadow: 0 0 0 0.25rem rgba(78, 115, 223, 0.25); }
.btn .fa-solid { margin-right: 0.3rem; }

.actions-group { display: flex; flex-wrap: nowrap; gap: 0.5rem; }

/* --- Dashboard Specific (Mobile Optimized) --- */
.card-kpi { border-left: 0.25rem solid; }
.border-start-primary { border-color: var(--primary-accent) !important; }
.border-start-success { border-color: var(--success-accent) !important; }
.border-start-info { border-color: var(--info-accent) !important; }
.border-start-warning { border-color: var(--warning-accent) !important; }
.card-kpi.border-start-primary .text-primary { color: var(--primary-accent) !important; }
.card-kpi.border-start-success .text-success { color: var(--success-accent) !important; }
.card-kpi.border-start-info .text-info { color: var(--info-accent) !important; }
.card-kpi.border-start-warning .text-warning { color: var(--warning-accent) !important; }

/* Compact Mobile KPI Cards */
.mobile-kpi-card .card-body {
    padding: 0.75rem; /* Tighter padding */
}
.mobile-kpi-card .text-uppercase {
    font-size: 0.7rem; /* Smaller label */
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-kpi-card .h5 {
    font-size: 1.1rem; /* Smaller value */
    margin-bottom: 0;
}
.mobile-kpi-card .kpi-icon {
    font-size: 1.5rem; /* Smaller icon */
    opacity: 0.3;
}

.chart-container { position: relative; height: 300px; width: 100%; }

/* --- Active Session Styles --- */
.blinking-dot {
    height: 12px;
    width: 12px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: blinker 1.5s linear infinite;
    margin-left: 8px;
}
@keyframes blinker { 50% { opacity: 0; } }

/* --- Creative Liquid Fill Active Session Card --- */
#active-session-card {
    position: relative;
    overflow: hidden;
    background: #1a2a2a; /* Dark plasma-like background */
    border-color: #004d40;
}
.card-content-overlay {
    position: relative;
    z-index: 2;
}
#charge-fill-visual {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%; /* Controlled by JS */
    background-color: #1cc88a;
    opacity: 0.8;
    transition: height 0.5s ease-out;
    z-index: 1;
    overflow: hidden; /* Keep bubbles inside */
}

#charge-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
}
#charge-bubbles span {
    position: absolute;
    bottom: -20px; /* Start from below */
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: bubble-rise 5s infinite ease-in;
    transform: translateZ(0);
}
@keyframes bubble-rise {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-300px); /* Rise distance */
        opacity: 0;
    }
}


/* Auth Pages */
.auth-wrapper { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: var(--body-bg); }

/* Schedule Table */
.schedule-table td[data-hour] { cursor: pointer; transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; min-width: 35px; color: rgba(255, 255, 255, 0.8); }
.schedule-table td[data-hour]:hover { transform: scale(1.1); box-shadow: 0 0 0 3px var(--primary-accent); z-index: 10; position: relative; }
.schedule-table tbody th { background-color: #f8f9fa; color: #495057; font-weight: bold; vertical-align: middle; cursor: default; }
.profile-legend-item { padding: 5px 15px; border-radius: 20px; color: white; margin: 0 5px; font-weight: 500; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

/* --- Mobile Header Fix --- */
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2860, 60, 60, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.navbar-toggler { border-color: #dee2e6; }
.navbar-toggler:focus { box-shadow: 0 0 0 0.25rem rgba(78, 115, 223, 0.25); }

/* --- PWA Install Toast --- */
.pwa-install-toast { position: fixed; bottom: 1rem; right: 1rem; z-index: 1050; background-color: #212529; color: #fff; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); display: flex; align-items: center; gap: 1rem; }
.pwa-install-toast p { margin: 0; font-size: 0.9rem; }
.pwa-install-toast .btn { margin-left: 0.5rem; }

/* --- Landing Page Styles --- */
.hero-section { background: url('../assets/images/1.png') no-repeat center center; background-size: cover; position: relative; padding: 8rem 0; }
.hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }
.hero-section .container { position: relative; z-index: 2; }
#features .row { min-height: 400px; }
.feature-grid-item { background-color: #f8f9fc; border-radius: var(--card-border-radius); height: 100%; }

/* --- Tutorial Page & Help Button --- */
.tutorial-section-header { background-color: #f8f9fc; border-bottom: 1px solid #e3e6f0; }
.btn-help { width: 30px; height: 30px; border-radius: 50%; padding: 0; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; border-color: #d1d3e2; color: #858796; }
.btn-help:hover { color: #fff; background-color: var(--primary-accent); border-color: var(--primary-accent); }
.list-group-item-action { white-space: normal; word-wrap: break-word; }