.tablet-mode-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toggle-label {
    font-size: 1rem;
    font-weight: 500;
    color: #003366;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    z-index: 1;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: none;
    border-radius: 34px;
    pointer-events: none;
}

.switch {
    cursor: pointer;
}

body.loaded .slider {
    transition: 0.3s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: none;
    border-radius: 50%;
}

body.loaded .slider:before {
    transition: 0.3s;
}

input:checked + .slider {
    background-color: var(--accent-color, #0066cc);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--accent-color, #0066cc);
}

.slider:hover {
    background-color: #b3b3b3;
}

input:checked + .slider:hover {
    background-color: var(--accent-color-dark, #0052a5);
}

body.tablet-mode .tablet-mode-toggle .switch {
    width: 80px;
    height: 44px;
    transition: none;
}

body.loaded.tablet-mode .tablet-mode-toggle .switch {
    transition: width 0.4s ease, height 0.4s ease;
}

body.tablet-mode .tablet-mode-toggle .slider:before {
    height: 36px;
    width: 36px;
    left: 4px;
    bottom: 4px;
    transition: none;
}

body.loaded.tablet-mode .tablet-mode-toggle .slider:before {
    transition: transform 0.3s ease, height 0.4s ease, width 0.4s ease;
}

body.tablet-mode .tablet-mode-toggle input:checked + .slider:before {
    transform: translateX(36px);
}

body {
    transition: font-size 0.4s ease;
}

/* Prevent transitions during initial load */
html.tablet-mode-loading body,
html.tablet-mode-loading *,
html.tablet-mode-loading .switch,
html.tablet-mode-loading .slider,
html.tablet-mode-loading .slider:before {
    transition: none !important;
}

body.loaded .switch,
body.loaded .slider,
body.loaded .slider:before {
    transition: 0.3s ease;
}

body.tablet-mode {
    font-size: 1.75rem;
}

h1, h2, h3 {
    transition: font-size 0.4s ease;
}

body.tablet-mode h1,
body.tablet-mode h2,
body.tablet-mode h3 {
    font-size: 2.5em;
}

body.tablet-mode .patient-list-container {
    font-size: 1.75rem;
}

.patient-list-container {
    transition: font-size 0.4s ease;
}

body.tablet-mode .patient-list-header h2 {
    font-size: 3rem;
}

.patient-list-header h2 {
    transition: font-size 0.4s ease;
}

body.tablet-mode .patient-item {
    padding: 2.5rem;
    min-height: 160px;
}

.patient-item {
    transition: padding 0.4s ease, min-height 0.4s ease;
}

body.tablet-mode .patient-name {
    font-size: 2.25rem;
}

.patient-name {
    transition: font-size 0.4s ease;
}

body.tablet-mode .patient-id {
    font-size: 1.5rem;
}

.patient-id {
    transition: font-size 0.4s ease;
}

body.tablet-mode .patient-search {
    padding: 1.5rem 2rem;
    font-size: 1.75rem;
}

.patient-search {
    transition: font-size 0.4s ease, padding 0.4s ease;
}

input, button, select, textarea {
    transition: font-size 0.4s ease, padding 0.4s ease;
}

body.tablet-mode input,
body.tablet-mode button,
body.tablet-mode select,
body.tablet-mode textarea {
    font-size: 1.75rem;
    padding: 1.5rem 2rem;
}

nav a {
    transition: font-size 0.4s ease, padding 0.4s ease;
}

body.tablet-mode nav a {
    font-size: 1.5rem;
    padding: 1rem 1.5rem;
}

.home-header h1 {
    transition: font-size 0.4s ease;
}

body.tablet-mode .home-header h1 {
    font-size: 3.5rem;
}

.home-header .subtext {
    transition: font-size 0.4s ease;
}

body.tablet-mode .home-header .subtext {
    font-size: 1.75rem;
}

.home-button {
    transition: font-size 0.4s ease, padding 0.4s ease, min-height 0.4s ease;
}

body.tablet-mode .home-button {
    font-size: 2rem;
    padding: 3rem 2rem;
    min-height: 150px;
}

.dossier-table-container {
    transition: font-size 0.4s ease, padding 0.4s ease, max-width 0.4s ease, margin 0.4s ease;
}

body.tablet-mode .dossier-table-container {
    font-size: 1.75rem;
    padding: 0 0.5rem 0;
    max-width: 1800px;
    margin: 2rem auto;
}

.dossier-table-header h2 {
    transition: font-size 0.4s ease;
}

body.tablet-mode .dossier-table-header h2 {
    font-size: 3rem;
}

.dossier-search,
.dossier-filter {
    transition: font-size 0.4s ease, padding 0.4s ease;
}

.search-icon {
    transition: width 0.4s ease, height 0.4s ease, left 0.4s ease;
}

body.tablet-mode .dossier-search {
    font-size: 1.75rem;
    padding: 1.5rem 1.5rem 1.5rem 4rem;
}

body.tablet-mode .search-icon {
    width: 28px;
    height: 28px;
    left: 1.5rem;
}

body.tablet-mode .dossier-filter {
    font-size: 1.75rem;
    padding: 1.5rem 2rem;
}

.dossier-table th,
.dossier-table td {
    transition: font-size 0.4s ease, padding 0.4s ease;
}

body.tablet-mode .dossier-table th,
body.tablet-mode .dossier-table td {
    font-size: 1.75rem;
    padding: 1.5rem 2rem;
}

.pagination-btn {
    transition: font-size 0.4s ease, padding 0.4s ease;
}

body.tablet-mode .pagination-btn {
    font-size: 1.75rem;
    padding: 1.5rem 2rem;
}

.page-info {
    transition: font-size 0.4s ease;
}

body.tablet-mode .page-info {
    font-size: 1.75rem;
}

.show-archived-toggle .toggle-label {
    transition: font-size 0.4s ease;
}

body.tablet-mode .show-archived-toggle .toggle-label {
    font-size: 1.75rem;
}

body.tablet-mode .show-archived-toggle .switch {
    width: 80px;
    height: 44px;
    transition: none;
}

body.loaded.tablet-mode .show-archived-toggle .switch {
    transition: width 0.4s ease, height 0.4s ease;
}

body.tablet-mode .show-archived-toggle .slider:before {
    height: 36px;
    width: 36px;
    left: 4px;
    bottom: 4px;
    transition: none;
}

body.loaded.tablet-mode .show-archived-toggle .slider:before {
    transition: transform 0.3s ease, height 0.4s ease, width 0.4s ease;
}

body.tablet-mode input:checked + .slider:before {
    transform: translateX(36px);
}

.action-btn {
    transition: font-size 0.4s ease, padding 0.4s ease;
}

body.tablet-mode .action-btn {
    font-size: 1.75rem;
    padding: 0.75rem;
    min-width: 48px;
    min-height: 48px;
}

body.tablet-mode .action-btn i {
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
}

body.tablet-mode .info-btn,
body.tablet-mode .open-btn,
body.tablet-mode .archive-btn,
body.tablet-mode .notification-btn {
    background-color: transparent;
    border-color: #e0e0e0;
    color: #666666;
}

body.tablet-mode .info-btn:hover,
body.tablet-mode .open-btn:hover,
body.tablet-mode .archive-btn:hover,
body.tablet-mode .notification-btn:hover {
    background-color: transparent;
    border-color: #e0e0e0;
    color: #666666;
    transform: none;
    box-shadow: none;
}

body.tablet-mode .notification-btn.active {
    background-color: var(--accent-color-light, #e6f2ff);
    border-color: var(--accent-color, #0066cc);
    color: var(--accent-color, #0066cc);
}

body.tablet-mode .notification-btn.active i {
    color: var(--accent-color, #0066cc);
}

.profile-icon-btn {
    transition: font-size 0.4s ease, width 0.4s ease, height 0.4s ease;
}

body.tablet-mode .profile-icon-btn {
    font-size: 2.5rem;
    width: 44px;
    height: 44px;
}