/* /css/tablet.css - Styles for screens between 769px and 1024px wide */

/* General Tablet Adjustments */
body {
    font-size: var(--im-font-size-base); /* Revert to base font size if changed for mobile */
}

.wrapper {
    flex-direction: row; /* Sidebar and main content side-by-side */
}

/* Header for Tablet */
.header {
    padding: 15px 30px; /* Restore some padding */
    flex-direction: row; /* Ensure items are in a row */
    align-items: center;
}

.header .logo {
    margin-bottom: 0;
}

.header .logo img {
    height: 35px; /* Slightly larger logo than mobile */
}

.header .logo h1 {
    font-size: 1.4em;
}

.header .user-info {
    width: auto; /* Allow user info to take its content width */
}

.header .user-info span {
    display: inline; /* Show full welcome message */
}

/* Sidebar & Navigation for Tablet */
.sidebar {
    position: static; /* Integrate sidebar into the layout flow */
    left: 0;
    width: 250px; /* Or your desired fixed width */
    padding-top: 20px; /* Adjust padding */
    height: auto; /* Allow it to take the height of the content */
    box-shadow: none; /* Remove fixed shadow if it was for mobile overlay */
    border-right: 1px solid var(--im-border-color);
}

.sidebar nav ul li a {
    /* Ensure tablet nav links use the base styles from style.css */
    /* No specific overrides needed here unless mobile styles were too different */
}

.sidebar-toggle {
    display: none; /* Hide hamburger menu on tablet and larger */
}

/* Main Content Area for Tablet */
.main-content {
    margin: 20px; /* Restore desktop margins */
    padding: 25px; /* Restore desktop padding */
    margin-top: 0; /* Reset if changed for mobile's fixed header */
}

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

/* Dashboard Cards for Tablet */
.dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Allow 2-3 cards per row */
    gap: 20px;
}

/* Tables for Tablet */
/* Often, tablet can display tables similarly to desktop.
   If the mobile responsive table styles are too aggressive,
   you might revert some of them here.
   For example, if you want to show table headers: */
/*
table thead {
    display: table-header-group;
}
table, table tbody, table tr, table td {
    display: table-cell; // Or table-row, table etc. to revert mobile stacking
    width: auto;
}
table td { text-align: left; padding-left: 15px; }
table td::before { display: none; }
*/

/* Forms for Tablet */
.form-actions {
    flex-direction: row; /* Form action buttons back in a row */
}
.form-actions .btn {
    width: auto; /* Buttons take their content width */
    margin-bottom: 0;
}

.btn:active { /* General active state for buttons on tablet if needed */
    transform: translateY(1px);
}

/* Login Page on Tablet */
.login-form {
    padding: 35px;
    width: 100%;
    max-width: 400px; /* Maintain a reasonable max-width */
}

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

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