@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-ExtraLight.ttf') format('truetype');
        font-weight: 200;
        font-style: normal;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-ExtraLightItalic.ttf') format('truetype');
        font-weight: 200;
        font-style: italic;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-Light.ttf') format('truetype');
        font-weight: 300;
        font-style: normal;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-LightItalic.ttf') format('truetype');
        font-weight: 300;
        font-style: italic;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-Italic.ttf') format('truetype');
        font-weight: 400;
        font-style: italic;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-Semibold.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-SemiboldItalic.ttf') format('truetype');
        font-weight: 600;
        font-style: italic;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-BoldItalic.ttf') format('truetype');
        font-weight: 700;
        font-style: italic;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-Black.ttf') format('truetype');
        font-weight: 900;
        font-style: normal;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-BlackItalic.ttf') format('truetype');
        font-weight: 900;
        font-style: italic;
}

/* Variables */
:root {
        /* --primary-color: hwb(197 0% 14%); */
        /* --accent-color: hwb(197 0% 30%); */
        --primary-color: #0A3B72;
        /* --accent-color-light: hsl(3, 86%, 66%); */
        /* --accent-color: hsl(3, 86%, 64%); */
        --accent-color: hsl(34, 95%, 52%);
        --accent-color-light: hsl(34, 95%, 50%);
        --secondary-color: whitesmoke;
        --white-color: #ffffff;
        --black-color: #000000;
        --text-color: #444;
        --hero-height: 87vh;
        --sub-hero-height: 60vh;
        --footer-bg: #383a3b;
        --footer-bg-dark: #2c2c2c;
        --social-icon-color: #555;
        --background-color: #fff;
        --border-color: hsl(0, 0%, 80%);
        --hero-height: 90vh;
        --designation: hsl(0, 0%, 43.5%);
}

:root {
        --font-family: 'Segoe UI', Tahoma, sans-serif;
        --bg-color: #f5f7fa;
        --text-color: #333;
        --primary-grad-start: #3b82f6;
        --primary-grad-end: #1d4ed8;
        --button-hover-start: #1d4ed8;
        --button-hover-end: #1e3a8a;
        --card-bg: #fff;
        --card-radius: 6px;
        --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        --error-color: #dc2626;
        --success-color: #16a34a;
        --heading-color: #1e40af;
        --border-color: #ddd;
        --input-bg: #fff;
        --transition-speed: 0.3s;
        --btn-padding: 0.6rem 1.2rem;
        --card-padding: 2rem;
        --container-width: 400px;
        --container-max-width: 90%;
}

/* Global */
body {
        margin: 0;
        padding: 0;
        background-color: var(--bg-color);
        color: var(--text-color);
        font-family: var(--font-family);
}

/* Buttons */
.button-primary {
        background: linear-gradient(45deg, var(--primary-grad-start), var(--primary-grad-end));
        color: #fff;
        border: none;
        padding: var(--btn-padding);
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        transition: background var(--transition-speed) ease;
}

.button-primary:hover {
        background: linear-gradient(45deg, var(--button-hover-start), var(--button-hover-end));
}

/* Card Styles */
.auth-card,
.dashboard-card {
        background: var(--card-bg);
        border-radius: var(--card-radius);
        box-shadow: var(--box-shadow);
        padding: var(--card-padding);
        max-width: var(--container-width);
        width: var(--container-max-width);
        margin: 2rem auto;
}

.auth-card h1,
.dashboard-card h1 {
        margin-bottom: 1.2rem;
        font-size: 1.6rem;
        text-align: center;
        color: var(--heading-color);
}

/* Form Styles */
.auth-card form label {
        font-size: 0.9rem;
        color: #555;
        margin-bottom: 0.3rem;
        display: inline-block;
}

.auth-card form input[type="email"],
.auth-card form input[type="password"],
.auth-card form input[type="text"] {
        width: 100%;
        padding: 0.6rem;
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background: var(--input-bg);
        outline: none;
        transition: border var(--transition-speed) ease;
}

#createSectionForm form input[type="text"] {
        margin-bottom: 0px;
}

.auth-card form input:focus {
        border: 1px solid var(--primary-grad-end);
}

.auth-card form button {
        width: 100%;
        margin-top: 0.5rem;
}

/* Messages */
.error-msg {
        color: var(--error-color);
        margin-bottom: 0.8rem;
        text-align: center;
        font-weight: 500;
}

.success-msg {
        color: var(--success-color);
        margin-bottom: 0.8rem;
        text-align: center;
}

/* Page Layout */
.page-container {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
}

.page-content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
}

/* Dashboard */
.dashboard-container {
        max-width: 800px;
        margin: 3rem auto;
        background: var(--card-bg);
        border-radius: var(--card-radius);
        padding: 2rem;
        box-shadow: var(--box-shadow);
}

.dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
}

.dashboard-header h1 {
        font-size: 1.5rem;
        color: var(--heading-color);
}

.dashboard-header a {
        text-decoration: none;
        color: var(--primary-grad-end);
        font-weight: 500;
        border: 1px solid var(--primary-grad-end);
        padding: 0.4rem 0.8rem;
        border-radius: 4px;
        transition: background var(--transition-speed) ease, color var(--transition-speed) ease;
}

.dashboard-header a:hover {
        background: var(--button-hover-end);
        color: #fff;
        border-color: var(--button-hover-end);
}

/* Responsive */
@media (max-width: 600px) {

        .auth-card,
        .dashboard-card {
                max-width: 90%;
                margin: 1.5rem auto;
        }

        .dashboard-header h1 {
                font-size: 1.2rem;
        }
}

/* Sidebar styling */
#sidebar {
        width: 300px;
        transition: all 0.3s;
}

#sidebar.collapsed {
        margin-left: -250px;
}

/* Sidebar links */
.sidebar-link {
        color: #fff;
        text-decoration: none;
        display: block;
        padding: 10px 15px;
        transition: background 0.2s;
}

.sidebar-link:hover {
        background: rgba(255, 255, 255, 0.1);
}

/* Submenu styling */
.submenu {
        background: rgba(0, 0, 0, 0.1);
        padding-left: 2rem;
}

/* Loading overlay */
#loadingOverlay {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
}

#loadingOverlay .spinner-border {
        width: 3rem;
        height: 3rem;
}

/* WRAPPER */
.wrapper {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        height: 100vh;
}

/* SIDEBAR */
#sidebar {
        min-width: 300px;
        max-width: 300px;
        background-color: #343a40;
        /* dark gray */
        transition: all 0.3s ease;
}

#sidebar.collapsed {
        margin-left: -250px;
}

/* SIDEBAR HEADER */
.sidebar-header {
        padding: 1rem;
        text-align: center;
        color: #fff;
        background-color: #212529;
        border-bottom: 1px solid #444;
}

/* NAV LINKS */
.nav-link {
        color: #c2c7d0;
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid #2f353a;
        transition: background 0.2s;
        text-decoration: none;
        position: relative;
}

.nav-link:hover {
        background-color: #495057;
        color: #fff !important;
}

.nav-link i {
        font-size: 1.2rem;
}


/* SUBMENU */
.submenu .nav-link {
        padding-left: 2.5rem;
        border-bottom: none;
}

/* TOP NAVBAR */
.top-navbar {
        height: 56px;
        background-color: #ffffff;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
}

.navbar-brand {
        font-weight: 600;
        font-size: 1.25rem;
}

.toggle-btn {
        background: none;
        border: none;
        font-size: 1.25rem;
        cursor: pointer;
}

/* USER DROPDOWN */
.navbar-user-dropdown .nav-link {
        color: #212529;
        display: flex;
        align-items: center;
        gap: 6px;
}

.navbar-user-dropdown .dropdown-menu {
        right: 0;
        left: auto;
}

/* MAIN CONTENT */
#content {
        flex-grow: 1;
        overflow-y: auto;
        background-color: #f8f9fa;
        transition: all 0.3s ease;
}

.content-container {
        padding: 1.5rem;
}

/* CONTENT WINDOWS */
.content-window {
        display: none;
        /* Hide by default */
}

.content-window.active {
        display: block;
        /* Show the active window */
}

/* RESPONSIVE (SMALL SCREENS) */
@media (max-width: 768px) {
        #sidebar {
                margin-left: -250px;
                position: fixed;
                height: 100%;
                z-index: 2000;
        }

        #sidebar.show {
                margin-left: 0;
        }

        #content {
                width: 100%;
        }
}

/* Reset & basic box-sizing */
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
}

/* Full-height flex container on body */
html,
body {
        height: 100%;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* We'll center the main in a child container. */
        background: #f8f9fa;
        /* Light background color */
}

/* MAIN content (flex:1) for vertical centering */
main {
        flex: 1;
        display: flex;
        align-items: center;
        /* vertical center the .auth-box */
        justify-content: center;
        /* horizontal center */
        padding: 1rem;
}

/* Auth Box (for login, OTP, etc.) 
   - 100% width on narrow screens
   - Up to 400px on larger
   - Basic styling with shadow, radius 
*/
.auth-box {
        width: 100%;
        max-width: 400px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
        padding: 1.5rem;
}

/* Logo area (optional) */
.logo-area {
        text-align: center;
        margin-bottom: 1rem;
}

.logo-area img {
        width: 60px;
        height: 60px;
        margin-bottom: 0.5rem;
}

.logo-area h5 {
        margin: 0;
        font-size: 1rem;
}

/* Headings */
h2,
h3,
h4,
h5 {
        text-align: center;
}

/* Basic form styling */
form label {
        display: block;
        margin-bottom: 0.3rem;
        font-weight: 600;
}

form input[type="email"],
form input[type="password"],
form input[type="text"] {
        width: 100%;
        padding: 0.5rem;
        margin-bottom: 1rem;
        border: 1px solid #ccc;
        border-radius: 4px;
}

.button-full {
        width: 100%;
        padding: 0.7rem;
        background: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 1rem;
        cursor: pointer;
}

.button-full:hover {
        background: #005dc1;
}

/* Common row layout for smaller elements */
.row-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
}

/* Alerts / Messages */
#loginMessage,
#otpMessage {
        margin-top: 1rem;
        text-align: center;
        font-weight: 600;
}

/* FOOTER pinned at bottom */
footer {
        text-align: center;
        padding: 0.5rem;
        background: #fff;
        border-top: 1px solid #dee2e6;
        font-size: 0.9rem;
        color: #6c757d;
}

.social-links {
        margin-top: 0.3rem;
}

.social-links a {
        margin: 0 0.3rem;
        color: #6c757d;
        text-decoration: none;
        font-size: 1.2rem;
}

.social-links a:hover {
        color: #343a40;
}

/* Loading Overlay (spinner) */
#loadingOverlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
}

#loadingOverlay .spinner {
        width: 50px;
        height: 50px;
        border: 6px solid #f3f3f3;
        border-top: 6px solid #007bff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
}

@keyframes spin {
        0% {
                transform: rotate(0deg);
        }

        100% {
                transform: rotate(360deg);
        }
}

.text-end {
        display: flex;
        justify-content: space-between;
}

.centered-alert {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        display: none;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 1rem 2rem;
        text-align: center;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        min-width: 300px;
}

.alert-content {
        display: flex;
        flex-direction: column;
        align-items: center;
}

.alert-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
}

.alert-success .alert-icon {
        color: #28a745;
}

.alert-danger .alert-icon {
        color: #dc3545;
}

.alert-message {
        margin: 0;
        font-size: 1rem;
}

@keyframes fadeIn {
        from {
                opacity: 0;
                transform: scale(0.95) translate(-50%, -50%);
        }

        to {
                opacity: 1;
                transform: scale(1) translate(-50%, -50%);
        }
}

@keyframes fadeOut {
        from {
                opacity: 1;
                transform: scale(1) translate(-50%, -50%);
        }

        to {
                opacity: 0;
                transform: scale(0.95) translate(-50%, -50%);
        }
}