/*
 * COMMON STYLES
 * Shared styles for all Provider and Customer pages
 * Import this file first in all pages
 */

/*
 * Import Roboto font from Google Fonts for consistent typography
*/
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

/*
 * Base styles for the HTML and body elements
 * - Set full height, remove default margin, and apply background color
 * - Use Roboto as the main font
 */
html,
body {
    height: 100%;
    margin: 0;
    font-family: 'Roboto', Arial, sans-serif;
    background: rgb(102, 145, 255);
}

/*
 * Main grid layout for the app
 * - Sidebar on the left, header on top, main content center, footer at bottom
 * - Uses CSS Grid for responsive structure
 */
.main-grid {
    display: grid;
    grid-template-columns: 18vw 1fr; /* Sidebar width, rest for content */
    grid-template-rows: 0 1fr auto; /* Header, main (flexible), footer (auto height) */
    grid-template-areas:
        "sidebar header"
        "sidebar main"
        "footer footer";
    height: 100vh; /* Fixed viewport height */
    overflow: hidden; /* Contain scrolling inside main */
}

/*
 * Sidebar styles
 * - Vertical layout for profile and menu
 * - Glassmorphism background to match index header
 */
.sidebar {
    grid-area: sidebar;
    background: rgba(102, 145, 255, 0.27);
    backdrop-filter: blur(11.6px);
    -webkit-backdrop-filter: blur(11.6px);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3vh 0 0 0;
    border-right: 0.1vw solid rgba(255, 255, 255, 0.31);
    border-radius: 2vw;
    box-shadow: 0 1vh 2vh 1vh rgb(11 71 144);
}

/* Sidebar profile image (top of sidebar) */
.sidebar-profile {
    margin-bottom: 4vh;
}

.profile-pic {
    width: 12vh;
    height: 12vh;
    border-radius: 50%;
    object-fit: cover;
    border: 0.4vh solid #ffffff;
    background: #f5f5f5;
    display: block;
    margin: 0 auto;
    box-shadow: 0 0.5vh 1.5vh rgba(0, 0, 0, 0.2);
}

/*
 * Sidebar menu styles
 * - Remove default list styles
 * - Full width clickable menu items
 */
.sidebar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.sidebar-menu li {
    margin: 0;
    width: 100%;
}

.sidebar-menu a {
    display: block;
    padding: 2.2vh 0 2.2vh 2vw;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.3vw;
    border-bottom: 0.15vh solid rgba(255, 255, 255, 0.2);
    transition: background 0.3s ease;
}

.sidebar-menu a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/*
 * Main content area styles
 * - Padding, glassmorphism background matching header, border radius, and shadow
 */
.content-area {
    grid-area: main;
    padding: 5vh 5vw;
    background: rgba(102, 145, 255, 0.27);
    backdrop-filter: blur(11.6px);
    -webkit-backdrop-filter: blur(11.6px);
    border-radius: 2vw;
    margin: 0vh 0 0vh 0;
    box-shadow: 0 1vh 2vh 1vh rgb(11 71 144);
    border: 0.1vw solid rgba(255, 255, 255, 0.31);
    min-width: 0;
    min-height: 0; /* Allow the grid to shrink and enable scrolling */
    overflow-y: auto; /* Enable scrolling if content is too tall */
}

/* Section title in main content */
.section-title {
    font-size: 2.5vw;
    margin-bottom: 7vh;
    color: #ffffff;
    text-align: center;
}

/*
 * Footer styles
 * - Three columns, glassmorphism background matching header, and centered text
 */
.main-footer {
    grid-area: footer;
    display: flex;
    background: rgba(102, 145, 255, 0.27);
    backdrop-filter: blur(11.6px);
    -webkit-backdrop-filter: blur(11.6px);
    color: #ffffff;
    border-top: 0.1vw solid rgba(255, 255, 255, 0.31);
    box-shadow: 0 -1vh 2vh 1vh rgb(11 71 144);
    min-height: 8vh; /* Minimum height instead of fixed */
    align-items: center;
    justify-content: space-between;
    padding: 0 5vw;
    font-size: 1.3vw;
}

.footer-col {
    flex: 1;
    text-align: center;
    font-weight: 500;
}

/*
 * Common table styles
 */
.details-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 0.3vh 1.5vh rgba(0, 0, 0, 0.1);
    border-radius: 1vw;
}

.details-table tbody tr:nth-child(even) td {
    background: #f9f9f9;
}

.details-table tbody tr:hover td {
    background: #f0f0f0;
}

/* Toggle details styles */
.toggle-details {
    cursor: pointer;
    text-align: center;
}

.toggle-details:hover {
    background: rgba(102, 126, 234, 0.1);
}

.arrow {
    font-size: 1.2vw;
    color: #667eea;
    transition: transform 0.3s ease;
}

/*
 * Expanded details styles
 */
.expanded-details {
    background: #f9f9f9;
    padding: 2vh 3vw;
    border-radius: 1vw;
    margin: 1vh 0;
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.detail-table td {
    border: 0.2vh solid rgba(102, 145, 255, 0.5);
    padding: 1.5vh 2vw;
    font-size: 1vw;
    color: #333333;
    white-space: normal;
    word-wrap: break-word;
}

.detail-table tr:nth-child(even) td {
    background: #f9f9f9;
}