/* Full Styles - Cleaned Version */
/* Ensure Tailwind base/components/utilities are loaded via CDN in HTML */

/* Basic Body & Font */
body {
    font-family: 'Inter', sans-serif;
}

/* Manual Dark Mode Base Styles (Defined ONCE) */
body { background-color: #f3f4f6; color: #111827; }
.card { background-color: #ffffff; }
.controls-bar { background-color: #f9fafb; }
table thead { background-color: #f9fafb; }
table th { color: #6b7280; }
table tbody { background-color: #ffffff; }
table td { color: #6b7280; }
table td.filename-col { color: #111827; font-weight: 500; }
table td.role-name-col { color: #1f2937; } /* Specific for admin_roles */
table tbody tr:hover { background-color: #f9fafb; }
h1, h2, h3 { color: #1f2937; }
dt { color: #4b5563; } /* Definition list term */
dd { color: #1f2937; } /* Definition list description */
label { color: #374151; }
select, input[type="search"], input[type="text"], input[type="date"], textarea { background-color: #ffffff; border-color: #d1d5db; color: #111827; }
input[type="checkbox"] { color: #4f46e5; }
.logout-link, .admin-link, .header-link { color: #4b5563; font-size: 0.875rem; text-decoration: underline; }
.logout-link:hover, .admin-link:hover, .header-link:hover { color: #1f2937; }
.no-results { color: #6b7280; }
.stat-value { color: #1d4ed8; } /* For admin_stats */
.stat-label { color: #6b7280; } /* For admin_stats */
.stat-card { background-color: #f9fafb; } /* For admin_stats */
.login-card { background-color: #ffffff; } /* For login */

/* Dark Mode Overrides (Defined ONCE) */
html.dark body { background-color: #111827; color: #f3f4f6; }
html.dark .card { background-color: #1f2937; }
html.dark .controls-bar { background-color: #1f2937; }
html.dark table thead { background-color: #374151; }
html.dark table th { color: #d1d5db; }
html.dark table tbody { background-color: #1f2937; }
html.dark table td { color: #9ca3af; }
html.dark table td.filename-col { color: #ffffff; }
html.dark table td.role-name-col { color: #f9fafb; } /* Specific for admin_roles */
html.dark table tbody tr:hover { background-color: #374151; }
html.dark h1, html.dark h2, html.dark h3 { color: #f9fafb; }
html.dark dt { color: #9ca3af; }
html.dark dd { color: #f3f4f6; }
html.dark label { color: #d1d5db; }
html.dark select, html.dark input[type="search"], html.dark input[type="text"], html.dark input[type="date"], html.dark textarea { background-color: #374151; border-color: #4b5563; color: #f3f4f6; placeholder-color: #9ca3af; }
html.dark input[type="checkbox"] { color: #818cf8; background-color: #4b5563; border-color: #6b7280;}
html.dark input[type="checkbox"]:disabled { opacity: 0.4; }
html.dark label.disabled { opacity: 0.5; } /* For admin_role_edit */
html.dark .logout-link, html.dark .admin-link, html.dark .header-link { color: #d1d5db; }
html.dark .logout-link:hover, html.dark .admin-link:hover, html.dark .header-link:hover { color: #f9fafb; }
html.dark .no-results { color: #9ca3af; }
html.dark .stat-value { color: #60a5fa; } /* For admin_stats */
html.dark .stat-label { color: #d1d5db; } /* For admin_stats */
html.dark .stat-card { background-color: #374151; } /* For admin_stats */
html.dark .login-card { background-color: #1f2937; } /* For login */

/* === Styling for simple stat lists === */
.stat-list ul { list-style: none; padding-left: 0; }
.stat-list li { margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e5e7eb; /* gray-200 */ }
html.dark .stat-list li { border-color: #374151; /* gray-700 */ }
.stat-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.stat-list .file-name { font-weight: 500; }
.stat-list .file-detail { font-size: 0.8rem; color: #6b7280; /* gray-500 */ }
html.dark .stat-list .file-detail { color: #9ca3af; /* gray-400 */ }

/* Basic styling for admin grid cards (mobile view) */
.admin-grid-card {
    border-width: 1px;
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1rem; /* p-4 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); /* shadow-md */
    background-color: #ffffff; /* bg-white */
}
html.dark .admin-grid-card {
     background-color: #1f2937; /* dark:bg-gray-800 */
     border-color: #374151; /* dark:border-gray-700 */
}

/* Message Boxes */
.message { margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; border: 1px solid transparent; white-space: pre-wrap; }
.message.error { background-color: #fef2f2; border-color: #fecaca; color: #991b1b; }
.message.success { background-color: #f0fdf4; border-color: #a7f3d0; color: #065f46; }
.message.warning { background-color: #fffbeb; border-color: #fde68a; color: #92400e; }
html.dark .message.error { background-color: #7f1d1d; border-color: #ef4444; color: #fee2e2; }
html.dark .message.success { background-color: #064e3b; border-color: #10b981; color: #d1fae5; }
html.dark .message.warning { background-color: #7c2d12; border-color: #f59e0b; color: #fef3c7; }

/* Impersonation Banner */
.impersonation-banner { background-color: #fffbeb; border-left-width: 4px; border-color: #f59e0b; color: #b45309; }
html.dark .impersonation-banner { background-color: #7c2d12; border-color: #f59e0b; color: #fef3c7; }
.impersonation-banner button { border-color: #d97706; background-color: #f59e0b; color: #ffffff; }
html.dark .impersonation-banner button { border-color: #fcd34d; background-color: #fcd34d; color: #7c2d12; }
.impersonation-banner button:hover { background-color: #d97706; }
html.dark .impersonation-banner button:hover { background-color: #fbbf24; }

/* Table Styles */
th, td { padding: 0.75rem 1rem; border-bottom-width: 1px; border-color: #e5e7eb; text-align: left; vertical-align: middle;}
html.dark th, html.dark td { border-bottom-color: #4b5563; }
th { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
tr:last-child td { border-bottom-width: 0px; }
.file-table { width: 100%; border-collapse: collapse; margin-top: 1rem; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* For index + profile */
.file-table thead th { padding: 0.5rem 1rem; border-bottom-width: 1px;}
.file-table tbody td { padding: 0.5rem 1rem; font-size: 0.875rem; word-break: break-word; }
.file-table tbody tr:last-child td { border-bottom-width: 0px; }

/* Thumbnails */
.thumbnail { max-height: 60px; max-width: 60px; height: 60px; width: 60px; object-fit: cover; border-radius: 0.375rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); background-color: #e2e8f0; display: flex; align-items: center; justify-content: center; color: #718096; font-size: 1.5rem; cursor: default; }
html.dark .thumbnail { background-color: #4b5563; color: #9ca3af; }
.thumbnail.image-thumb, .thumbnail.video-thumb { cursor: pointer; transition: transform 0.2s ease-in-out; }
.thumbnail.image-thumb:hover, .thumbnail.video-thumb:hover { transform: scale(1.05); }
.thumbnail-small { max-height: 40px; max-width: 40px; height: 40px; width: 40px; object-fit: cover; border-radius: 0.25rem; background-color: #e2e8f0; display: flex; align-items: center; justify-content: center; color: #718096; font-size: 1rem; cursor: default; } /* For profile page */
html.dark .thumbnail-small { background-color: #4b5563; color: #9ca3af; }
.thumbnail-small.image-thumb, .thumbnail-small.video-thumb { cursor: pointer; transition: transform 0.2s ease-in-out; }
.thumbnail-small.image-thumb:hover, .thumbnail-small.video-thumb:hover { transform: scale(1.05); }

/* Action Buttons/Links */
.action-link { color: #2563eb; text-decoration: underline; margin-right: 0.75rem; font-size: 0.875rem; vertical-align: middle; } .action-link:hover { color: #1d4ed8; } html.dark .action-link { color: #60a5fa; } html.dark .action-link:hover { color: #93c5fd; }
.action-btn { background: none; border: none; cursor: pointer; padding: 0; margin-left: 0.5rem; display: inline-block; align-items: center; border-radius: 0.25rem; vertical-align: middle; text-decoration: underline; font-size: 0.875rem; } .action-btn:hover { color: #1f2937; } html.dark .action-btn:hover { color: #e5e7eb; }
.action-btn.delete-btn { color: #dc2626; } html.dark .action-btn.delete-btn { color: #f87171; } .action-btn.delete-btn:hover { color: #991b1b; } html.dark .action-btn.delete-btn:hover { color: #ef4444; }
.action-btn.copy-btn { color: #2563eb; } html.dark .action-btn.copy-btn { color: #60a5fa; } .action-btn.copy-btn:hover { color: #1d4ed8; } html.dark .action-btn.copy-btn:hover { color: #93c5fd; }
.action-btn.download-btn { color: #16a34a; } html.dark .action-btn.download-btn { color: #4ade80; } .action-btn.download-btn:hover { color: #15803d; } html.dark .action-btn.download-btn:hover { color: #86efac; }
.change-role-btn { color: #4f46e5; } html.dark .change-role-btn { color: #818cf8; } .change-role-btn:hover { color: #3730a3; } html.dark .change-role-btn:hover { color: #a5b4fc; }
.approve-btn { color: #16a34a; } html.dark .approve-btn { color: #4ade80; } .approve-btn:hover { color: #15803d; } html.dark .approve-btn:hover { color: #86efac; }
.disable-btn { color: #f59e0b; } html.dark .disable-btn { color: #fcd34d; } .disable-btn:hover { color: #b45309; } html.dark .disable-btn:hover { color: #fbbf24; }
.enable-btn { color: #16a34a; } html.dark .enable-btn { color: #4ade80; } .enable-btn:hover { color: #15803d; } html.dark .enable-btn:hover { color: #86efac; }
/* Edit link specific style (admin_roles) */
.edit-button { color: #4f46e5; text-decoration: underline; font-size: 0.875rem; vertical-align: middle; margin-right: 1rem; background: none; border: none; cursor: pointer; padding: 0; } html.dark .edit-button { color: #818cf8; } .edit-button:hover { color: #3730a3; } html.dark .edit-button:hover { color: #a5b4fc; }
/* Delete button specific style (admin_roles, admin_categories) */
.delete-button { color: #dc2626; text-decoration: underline; font-size: 0.875rem; vertical-align: middle; background: none; border: none; cursor: pointer; padding: 0; } html.dark .delete-button { color: #f87171; } .delete-button:hover { color: #991b1b; } html.dark .delete-button:hover { color: #ef4444; }


/* Tooltips */
.tooltip { position: relative; display: inline-block; vertical-align: middle; }
.tooltip .tooltiptext { visibility: hidden; width: auto; min-width: 80px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 8px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 0.75rem; white-space: nowrap; }
html.dark .tooltip .tooltiptext { background-color: #374151; color: #e5e7eb;}
.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; }
html.dark .tooltip .tooltiptext::after { border-top-color: #374151; }
.tooltip.active .tooltiptext { visibility: visible; opacity: 1; }

/* Modals (Generic + Specific) */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); align-items: center; justify-content: center; }
.modal-close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; z-index: 1001; }
.modal-close:hover, .modal-close:focus { color: #bbb; text-decoration: none; }
/* Preview Modal */
#previewModal .modal-container { max-width: 90%; max-height: 90%; display: flex; align-items: center; justify-content: center; }
#previewModal .modal-content { display: block; max-width: 100%; max-height: 100%; border-radius: 0.5rem; background-color: #000; }
/* Other Modals (IP History, Change Role, Audit Details) */
.modal-content-box { background-color: #ffffff; padding: 2rem; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); max-width: 500px; /* Default max width */ width: 90%; position: relative; max-height: 80vh; display: flex; flex-direction: column; }
html.dark .modal-content-box { background-color: #1f2937; }
.modal-header { border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; margin-bottom: 1rem; }
html.dark .modal-header { border-color: #374151; }
.modal-body { overflow-y: auto; flex-grow: 1; }
.modal-content-box .modal-close { position: absolute; top: 0.5rem; right: 0.75rem; color: #9ca3af; font-size: 1.5rem; font-weight: bold; cursor: pointer; line-height: 1; } /* Adjusted close button */
html.dark .modal-content-box .modal-close { color: #6b7280; }
.modal-content-box .modal-close:hover, .modal-content-box .modal-close:focus { color: #1f2937; }
html.dark .modal-content-box .modal-close:hover, html.dark .modal-content-box .modal-close:focus { color: #e5e7eb; }
/* IP History Modal Specific */
#ipHistoryModal .modal-content-box { max-width: 600px; }
#ipHistoryModal .modal-body ul { list-style: none; padding: 0; }
#ipHistoryModal .modal-body li { padding: 0.5rem 0; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
html.dark #ipHistoryModal .modal-body li { border-color: #374151; }
#ipHistoryModal .modal-body li:last-child { border-bottom: none; }
#ipHistoryModal .modal-body .ip-details { flex-grow: 1; }
#ipHistoryModal .modal-body .ip-time { font-size: 0.8rem; color: #6b7280; white-space: nowrap; margin-left: auto; }
html.dark #ipHistoryModal .modal-body .ip-time { color: #9ca3af; }
#ipHistoryModal .modal-body .ip-addr { font-weight: 500; }
#ipHistoryModal .modal-body .ip-count { font-size: 0.8rem; color: #6b7280; margin-left: 0.5rem; }
html.dark #ipHistoryModal .modal-body .ip-count { color: #9ca3af; }
#ipHistoryModal .modal-body .latest-ip { font-weight: bold; color: #16a34a; }
html.dark #ipHistoryModal .modal-body .latest-ip { color: #4ade80; }
/* Change Role Modal Specific */
#changeRoleModal .modal-content-box { max-width: 500px; }
#changeRoleForm label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
#changeRoleForm select { width: 100%; padding: 0.5rem; border-radius: 0.375rem; border: 1px solid #d1d5db; margin-bottom: 1rem; }
html.dark #changeRoleForm select { background-color: #374151; border-color: #4b5563; color: #f3f4f6; }
/* Audit Details Modal Specific */
#detailsModal .modal-content-box { max-width: 800px; }
#detailsModal .modal-body pre { white-space: pre-wrap; word-wrap: break-word; font-family: monospace; font-size: 0.875rem; }

/* Theme Toggle Button */
#theme-toggle { background: none; border: none; cursor: pointer; padding: 0.5rem; }
#login-page #theme-toggle { position: absolute; top: 1rem; right: 1rem; } /* Specific position for login page */

/* Advanced Uploader Styles */
#drop-area { border: 2px dashed #cbd5e1; border-radius: 0.5rem; padding: 2rem; text-align: center; cursor: pointer; transition: background-color 0.2s ease; }
html.dark #drop-area { border-color: #4b5563; }
#drop-area.drag-over { background-color: #e0e7ff; }
html.dark #drop-area.drag-over { background-color: #3730a3; }
#file-list { margin-top: 1rem; max-height: 200px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 0.375rem; padding: 0.5rem; }
html.dark #file-list { border-color: #4b5563; }
.file-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem; border-bottom: 1px solid #f3f4f6; font-size: 0.875rem; }
html.dark .file-item { border-bottom-color: #374151; }
.file-item:last-child { border-bottom: none; }
.file-preview { width: 40px; height: 40px; object-fit: contain; border-radius: 0.25rem; margin-right: 0.75rem; background-color: #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
html.dark .file-preview { background-color: #4b5563; }
.file-name { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 0.75rem; }
.file-size { color: #6b7280; white-space: nowrap; margin-right: 0.75rem; font-size: 0.75rem; }
html.dark .file-size { color: #9ca3af; }
.remove-file-btn { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0.25rem; margin-left: auto; flex-shrink: 0; }
html.dark .remove-file-btn { color: #f87171; }
.remove-file-btn:hover { color: #dc2626; }
html.dark .remove-file-btn:hover { color: #fca5a5; }
#progress-container { margin-top: 1rem; display: none; }
.progress-bar-bg { background-color: #e5e7eb; border-radius: 0.375rem; overflow: hidden; height: 0.75rem; }
html.dark .progress-bar-bg { background-color: #374151; }
.progress-bar-fill { background-color: #4f46e5; height: 100%; width: 0%; border-radius: 0.375rem; transition: width 0.1s linear; text-align: center; color: white; font-size: 0.6rem; line-height: 0.75rem;}
html.dark .progress-bar-fill { background-color: #818cf8; }

/* Bulk Action Styles */
#bulk-action-container { margin-top: 1rem; padding: 0.5rem 1rem; border: 1px solid #e5e7eb; border-radius: 0.375rem; display: none; align-items: center; }
#bulk-delete-button, #bulk-delete-users-button { background-color: #ef4444; color: white; }
#bulk-delete-button:hover, #bulk-delete-users-button:hover { background-color: #dc2626; }
#bulk-delete-button:disabled, #bulk-delete-users-button:disabled { background-color: #fca5a5; cursor: not-allowed; }
html.dark #bulk-action-container { border-color: #374151; }
html.dark #bulk-delete-button, html.dark #bulk-delete-users-button { background-color: #f87171; color: #1f2937; }
html.dark #bulk-delete-button:hover, html.dark #bulk-delete-users-button:hover { background-color: #ef4444; }
html.dark #bulk-delete-button:disabled, html.dark #bulk-delete-users-button:disabled { background-color: #7f1d1d; color: #6b7280; }
.table-checkbox { width: 1rem; height: 1rem; margin-right: 0.5rem; border-radius: 0.25rem; border-color: #9ca3af; }
html.dark .table-checkbox { border-color: #6b7280; }

/* Pagination Styles */
.pagination a, .pagination span { display: inline-block; padding: 0.3rem 0.7rem; margin: 0 0.1rem; border: 1px solid #d1d5db; border-radius: 0.25rem; text-decoration: none; font-size: 0.875rem; }
html.dark .pagination a, html.dark .pagination span { border-color: #4b5563; }
.pagination a { color: #3b82f6; }
html.dark .pagination a { color: #60a5fa; }
.pagination a:hover { background-color: #e5e7eb; }
html.dark .pagination a:hover { background-color: #374151; }
.pagination .current { background-color: #60a5fa; color: white; border-color: #60a5fa; }
html.dark .pagination .current { background-color: #2563eb; border-color: #2563eb; }
.pagination .disabled { color: #9ca3af; background-color: #f3f4f6; border-color: #e5e7eb; cursor: default; }
html.dark .pagination .disabled { color: #6b7280; background-color: #374151; border-color: #4b5563; }

/* Sorting Header Styles */
th.sortable { cursor: pointer; }
th.sortable:hover { background-color: #f0f0f0; }
html.dark th.sortable:hover { background-color: #2a374a; }
th .sort-icon { display: inline-block; width: 1em; height: 1em; margin-left: 0.25em; opacity: 0.4; vertical-align: middle;}
th.sorted-asc .sort-icon::after { content: '▲'; opacity: 1; }
th.sorted-desc .sort-icon::after { content: '▼'; opacity: 1; }

/* Grid View Styles */
.file-grid-item { border: 1px solid #e5e7eb; position: relative; }
html.dark .file-grid-item { border-color: #374151; }
.file-grid-item .thumbnail { height: 8rem; width: 100%; object-fit: cover; margin-bottom: 0.5rem; }
.file-grid-item .video-thumb svg { width: 3rem; height: 3rem; }
.file-grid-item .action-btn svg { width: 1rem; height: 1rem; }
.view-toggle-btn { padding: 0.25rem 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; background-color: #ffffff; color: #6b7280; }
html.dark .view-toggle-btn { border-color: #4b5563; background-color: #374151; color: #d1d5db; }
.view-toggle-btn.active { background-color: #e0e7ff; color: #4338ca; border-color: #a5b4fc; }
html.dark .view-toggle-btn.active { background-color: #3730a3; color: #e0e7ff; border-color: #6d28d9; }
.view-toggle-btn svg { width: 1.25rem; height: 1.25rem; }
.file-grid-item .table-checkbox { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 10; }

/* Permission Page Styles */
.permission-group { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }
html.dark .permission-group { border-bottom-color: #4b5563; }
.permission-item { margin-bottom: 0.5rem; }
.permission-item label { display: flex; align-items: center; cursor: pointer; }
.permission-item input { margin-right: 0.5rem; }
.permission-description { font-size: 0.8rem; color: #6b7280; margin-left: 1.5rem; }
html.dark .permission-description { color: #9ca3af; }

/* Audit Log Specific */
td.details-col { white-space: normal; word-break: break-word; max-width: 300px; }
td.details-col .truncated-details { display: inline; }
.view-details-btn { color: #4f46e5; text-decoration: underline; cursor: pointer; font-size: 0.8rem; margin-left: 5px; white-space: nowrap; }
html.dark .view-details-btn { color: #818cf8; }
.view-details-btn:hover { color: #3730a3; }
html.dark .view-details-btn:hover { color: #a5b4fc; }
tr.suspicious-action td { background-color: #fef3c7 !important; }
html.dark tr.suspicious-action td { background-color: #78350f !important; }

/* Chart Containers */
.chart-container { position: relative; height: 300px; width: 100%; max-width: 450px; margin: auto; }
.line-chart-container { position: relative; height: 300px; width: 100%; }

/* Leaderboard styles */
.leaderboard ol { list-style-type: decimal; padding-left: 1.5rem; }
.leaderboard li { margin-bottom: 0.5rem; }
.leaderboard .user-name { font-weight: 500; }
.leaderboard .stat-detail { font-size: 0.875rem; color: #6b7280; }
html.dark .leaderboard .stat-detail { color: #9ca3af; }

/* Role Edit Table Layout */
#role-list table { table-layout: fixed; width: 100%; }
#role-list th:nth-child(1), #role-list td:nth-child(1) { width: 40%; } /* Role Name */
#role-list th:nth-child(2), #role-list td:nth-child(2) { width: 20%; } /* Role ID */
#role-list th:nth-child(3), #role-list td:nth-child(3) { width: 40%; } /* Actions */

/* Mobile Menu Styles */
#mobile-menu { position: fixed; top: 0; right: 0; width: 250px; height: 100%; background-color: #ffffff; z-index: 50; padding: 1.5rem 1rem; box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease-in-out; }
html.dark #mobile-menu { background-color: #1f2937; }
#mobile-menu.open { transform: translateX(0); }
#mobile-menu-close-button { position: absolute; top: 0.5rem; right: 0.75rem; background: none; border: none; padding: 0.5rem; cursor: pointer; color: #6b7280; }
html.dark #mobile-menu-close-button { color: #9ca3af; }
#mobile-menu-close-button svg { width: 1.5rem; height: 1.5rem; }
#mobile-menu-close-button:hover { color: #1f2937; }
html.dark #mobile-menu-close-button:hover { color: #f3f4f6; }
#mobile-menu .mobile-menu-link { display: block; padding: 0.75rem 0.5rem; font-size: 1rem; font-weight: 500; color: #374151; border-bottom: 1px solid #e5e7eb; text-decoration: none; transition: background-color 0.15s ease-in-out; }
html.dark #mobile-menu .mobile-menu-link { color: #d1d5db; border-color: #374151; }
#mobile-menu .mobile-menu-link:hover { background-color: #f3f4f6; }
html.dark #mobile-menu .mobile-menu-link:hover { background-color: #374151; }
#menu-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 40; }
#mobile-menu-button { padding: 0.5rem; }

/* Add other specific component styles here as needed */