/* /css/mobile.css - Styles for screens up to 768px wide */

/* General Mobile Adjustments */
body {
    font-size: 15px; /* Slightly smaller base font for mobile readability */
    -webkit-text-size-adjust: 100%; /* Prevent text scaling on orientation change */
}

.wrapper {
    flex-direction: column; /* Stack sidebar and main content on mobile */
}

/* Header for Mobile */
.header {
    padding: 10px 15px; /* Reduced padding */
    flex-direction: column; /* Stack logo/title and user info if needed, or adjust alignment */
    align-items: flex-start;
}

.header .logo {
    margin-bottom: 10px; /* Space if stacking */
}

.header .logo img {
    height: 30px; /* Smaller logo */
    margin-right: 10px;
}

.header .logo h1 {
    font-size: 1.2em; /* Smaller title */
}

.header .user-info {
    width: 100%;
    justify-content: space-between; /* Distribute items */
    gap: 10px;
}

.header .user-info span {
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Handle long names gracefully */
}

.header .user-info .btn {
    padding: 6px 10px;
    font-size: 0.85em;
}

/* Sidebar & Navigation for Mobile */
.sidebar {
    width: 250px; /* Fixed width when open */
    position: fixed; /* Or absolute, depending on desired behavior */
    left: -250px; /* Initially hidden off-screen */
    top: 0;
    bottom: 0;
    background-color: var(--im-blue-primary); /* Consistent with desktop */
    padding-top: 60px; /* Space for header or close button */
    transition: left var(--im-transition-speed) ease-in-out;
    z-index: 1000; /* Ensure it's above other content */
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}

.sidebar.active { /* Changed from .open to .active to match JS */
    left: 0; /* Slide in */
}

.sidebar-toggle {
    display: block; /* Show hamburger menu */
    position: fixed; /* Or absolute within header */
    top: 15px; /* Adjust to align with your header */
    left: 15px;
    font-size: 1.8em;
    color: var(--im-blue-primary); /* Or white if on dark header background */
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001; /* Above sidebar */
}

.sidebar nav ul li a {
    padding: 12px 20px; /* Good tap targets */
    font-size: 1em;
}

/* Main Content Area for Mobile */
.main-content {
    margin: 10px; /* Reduced margin */
    padding: 15px; /* Reduced padding */
    width: auto; /* Allow it to take available space */
    margin-top: 60px; /* Adjust if header is fixed or to clear sidebar toggle */
}

.main-content h2 {
    font-size: 1.6em;
}

.main-content h3 {
    font-size: 1.3em;
}

/* Dashboard Cards for Mobile */
.dashboard-grid {
    grid-template-columns: 1fr; /* Stack cards vertically */
    gap: 15px;
}

.dashboard-card {
    padding: 20px;
}

.dashboard-card h3 {
    font-size: 1.3em;
}

.dashboard-card p {
    font-size: 1.8em;
}

/* Tables for Mobile (Leveraging data-label from style.css) */
table thead {
    display: none; /* Hide table headers */
}

table, table tbody, table tr, table td {
    display: block;
    width: 100%;
}

table tr {
    margin-bottom: 15px;
    border: 1px solid var(--im-border-color);
    border-radius: var(--im-border-radius);
    padding: 10px 0; /* Add some internal padding for the row block */
}

table td {
    text-align: right;
    padding-left: 45%; /* Make space for data label */
    padding-top: 8px;
    padding-bottom: 8px;
    position: relative;
    border-bottom: 1px solid var(--im-border-color);
}
table tr td:last-child {
    border-bottom: none;
}

table td::before {
    content: attr(data-label); /* Use data-label for pseudo-header */
    position: absolute;
    left: 10px;
    width: calc(45% - 20px); /* Adjust width based on padding-left */
    padding-right: 10px;
    font-weight: bold;
    text-align: left;
    color: var(--im-blue-primary);
}

.action-buttons {
    text-align: left; /* Align buttons to the left in stacked view */
    padding-left: 10px; /* Reset padding for action buttons cell */
}
.action-buttons::before {
    content: ""; /* Remove pseudo-header for action column if not needed */
}
.action-buttons .btn, .action-buttons form {
    display: block; /* Stack buttons */
    width: 100%;
    margin-bottom: 8px;
}
.action-buttons form:last-child .btn {
    margin-bottom: 0;
}

/* Forms for Mobile */
.form-section {
    padding: 20px;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    padding: 10px; /* Slightly smaller padding */
    font-size: 1em;
}

.form-actions {
    flex-direction: column; /* Stack form action buttons */
}
.form-actions .btn {
    width: 100%;
    margin-bottom: 10px;
}
.form-actions .btn:last-child {
    margin-bottom: 0;
}

/* Login Page on Mobile */
.login-form {
    padding: 25px; /* Adjust padding */
    width: 90%;
    max-width: none; /* Allow it to be wider on mobile if needed */
}

.login-header h2 {
    font-size: 1.8em;
}

.login-logo {
    max-width: 120px;
}