/* ========================================
   Mobile/Small Screen Optimizations
   Target: Screens <= 768px
   ======================================== */

/* ========================================
   Header Mobile - Critical Fix
   ======================================== */
@media (max-width: 768px) {
    /* Header layout */
    header.flex {
        flex-wrap: wrap;
        padding: 0.75rem 1rem !important;
        gap: 0.5rem;
    }
    
    /* Logo/company name section - full width on mobile */
    header > div:first-child {
        flex: 1 1 100%;
        margin-bottom: 0.5rem;
    }
    
    /* Hide search and filters on mobile */
    header .flex-1 {
        display: none !important;
    }
    
    /* Profile section - always visible, full width */
    header > div.relative {
        flex: 1 1 100%;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Hide storage text on very small screens */
    #profileStorage {
        display: none;
    }
    
    /* Make profile button more visible */
    #userMenuBtn {
        background: #3b82f6;
        color: white;
        padding: 0.75rem 1rem !important;
        border-radius: 0.5rem;
        font-weight: 600;
        width: 100%;
        justify-content: space-between;
    }
    
    #userMenuBtn:hover {
        background: #2563eb;
    }
    
    /* Profile email - show on mobile */
    #profileEmail {
        display: block !important;
        font-size: 0.875rem;
    }
    
    /* User menu dropdown */
    #userMenu {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-top: 0.5rem !important;
    }
    
    #userMenu a,
    #userMenu button {
        padding: 1rem !important;
        font-size: 1rem !important;
        font-weight: 500;
    }
}

/* Show storage on medium screens */
@media (min-width: 480px) and (max-width: 768px) {
    #profileStorage {
        display: block;
        font-size: 0.75rem;
        margin-right: 0.5rem;
    }
}

/* Base Mobile Adjustments */
@media (max-width: 768px) {
    /* Reset body and scrolling */
    body {
        font-size: 14px;
        line-height: 1.5;
        overflow-x: hidden;
    }
    
    /* Ensure proper touch targets (minimum 44px) */
    button, a, input[type="submit"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Reduce heading sizes for small screens */
    h1 { font-size: 1.875rem !important; } /* 30px */
    h2 { font-size: 1.5rem !important; }   /* 24px */
    h3 { font-size: 1.25rem !important; }  /* 20px */
    h4 { font-size: 1.125rem !important; } /* 18px */
    
    /* Container padding reduction */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Sections padding */
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* ========================================
   Dashboard Sidebar Mobile
   ======================================== */
@media (max-width: 1024px) {
    /* Make sidebar full-width and collapsible */
    .dashboard-flex-layout {
        flex-direction: column;
        position: relative;
    }
    
    .dashboard-sidebar {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: auto;
        position: sticky;
        top: 0;
        z-index: 40;
    }
    
    .dashboard-main {
        width: 100vw !important;
        min-width: 100vw !important;
        padding: 1rem !important;
    }
    
    /* Hide sidebar content initially on mobile, show toggle */
    .dashboard-sidebar .p-4 {
        display: none;
    }
    
    .dashboard-sidebar.open .p-4 {
        display: block;
    }
    
    /* Sidebar toggle button */
    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        background: inherit;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        cursor: pointer;
    }
}

/* ========================================
   Public Navigation Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Mobile menu improvements */
    #mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 50;
        padding: 1rem;
    }
    
    #mobile-menu a {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        display: flex;
        align-items: center;
        border-radius: 0.5rem;
    }
    
    /* Ensure mobile menu button is visible */
    #mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.75rem;
    }
}

/* ========================================
   Tables Mobile - Horizontal Scroll
   ======================================== */
@media (max-width: 768px) {
    /* Table container with horizontal scroll */
    .table-container,
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0.5rem;
        box-shadow: inset -2px 0 4px rgba(0,0,0,0.1);
    }
    
    table {
        min-width: 600px;
        font-size: 0.875rem;
    }
    
    table th,
    table td {
        padding: 0.5rem !important;
        white-space: nowrap;
    }
    
    /* Reduce table text size */
    table th {
        font-size: 0.75rem;
    }
    
    table td {
        font-size: 0.8125rem;
    }
    
    /* Stack action buttons in tables */
    table .flex {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* ========================================
   Forms Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Full width form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        width: 100% !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 0.75rem !important;
    }
    
    /* Form grids stack on mobile */
    .grid.md\:grid-cols-2,
    .grid.md\:grid-cols-3,
    .grid.md\:grid-cols-4,
    .grid.lg\:grid-cols-2,
    .grid.lg\:grid-cols-3,
    .grid.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Button groups stack */
    .flex.gap-2,
    .flex.gap-3,
    .flex.gap-4 {
        flex-direction: column;
        width: 100%;
    }
    
    .flex.gap-2 > *,
    .flex.gap-3 > *,
    .flex.gap-4 > * {
        width: 100%;
    }
    
    /* Labels */
    label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
}

/* ========================================
   Modals Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Record Details Modal (View Record) - Full screen approach - MAXIMUM SPECIFICITY */
    body #recordDetailsModal.modal-overlay .modal-container,
    body #recordDetailsModal .modal-container.large,
    #recordDetailsModal.modal-overlay .modal-container.large,
    #recordDetailsModal .modal-container.large,
    #recordDetailsModal .modal-container,
    #recordDetailsModalContainer {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
    }
    
    /* Overlay full screen */
    body #recordDetailsModal.modal-overlay,
    body #recordDetailsModal,
    #recordDetailsModal.modal-overlay,
    #recordDetailsModal {
        padding: 0 !important;
        margin: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100vw !important;
        height: 100vh !important;
    }
    
    body #recordDetailsModal .modal-header,
    body #recordDetailsModalHeader,
    #recordDetailsModal .modal-header,
    #recordDetailsModalHeader {
        padding: 1rem !important;
        position: sticky !important;
        top: 0 !important;
        background: white !important;
        z-index: 10 !important;
        border-bottom: 2px solid #e5e7eb !important;
        flex-shrink: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    body #recordDetailsModal .modal-header h2,
    #recordDetailsModal .modal-header h2 {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }
    
    body #recordDetailsModal .modal-body,
    body #recordDetailsModalBody,
    #recordDetailsModal .modal-body,
    #recordDetailsModalBody {
        padding: 1rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: none !important;
        height: auto !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
    }
    
    body #recordDetailsModal .modal-footer,
    body #recordDetailsModalFooter,
    #recordDetailsModal .modal-footer,
    body #recordDetailsModal .modal-footer,
    body #recordDetailsModalFooter,
    #recordDetailsModal .modal-footer,
    #recordDetailsModalFooter {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        border-top: 2px solid #e5e7eb !important;
        flex-shrink: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    body #recordDetailsModal .modal-footer > *,
    #recordDetailsModal .modal-footer > * {
        width: 100% !important;
        margin: 0 !important;
        margin-left: 0 !important;
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
    }
    
    /* Order: Edit (primary), Delete, Close */
    body #recordDetailsModal .modal-footer,
    #recordDetailsModal .modal-footer {
        display: flex !important;
        flex-direction: column !important;
    }
    
    body #recordDetailsModal .modal-footer .btn-cancel,
    #recordDetailsModal .modal-footer .btn-cancel {
        order: 3 !important;
        background: #f3f4f6 !important;
        color: #374151 !important;
        margin-left: 0 !important;
    }
    
    body #recordDetailsModal .modal-footer .btn-save,
    #recordDetailsModal .modal-footer .btn-save {
        order: 1 !important;
        background: #3b82f6 !important;
        color: white !important;
        margin-left: 0 !important;
    }
    
    body #recordDetailsModal .modal-footer .btn-danger,
    body #recordDetailsModal .modal-footer #deleteRecordBtn,
    #recordDetailsModal .modal-footer .btn-danger,
    #recordDetailsModal .modal-footer #deleteRecordBtn {
        order: 2 !important;
        margin-left: 0 !important;
    }
    
    /* Edit Record Side Panel - Full screen on mobile */
    #newRecordModal.side-panel-overlay {
        background: rgba(0, 0, 0, 0.5) !important;
    }
    
    #newRecordPanel.side-panel {
        width: 100% !important;
        max-width: 100% !important;
        right: -100% !important;
        left: auto !important;
    }
    
    #newRecordPanel.side-panel.open,
    body.side-panel-open #newRecordPanel.side-panel {
        right: 0 !important;
    }
    
    #newRecordPanel .side-panel-header {
        padding: 1rem !important;
        position: sticky !important;
        top: 0 !important;
        background: white !important;
        z-index: 10 !important;
        border-bottom: 2px solid #e5e7eb !important;
    }
    
    #newRecordPanel .side-panel-header h2 {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
    }
    
    #newRecordPanel .side-panel-body {
        padding: 1rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: calc(100vh - 140px) !important;
    }
    
    #newRecordPanel .side-panel-footer {
        padding: 1rem !important;
        gap: 0.75rem !important;
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        border-top: 2px solid #e5e7eb !important;
        flex-direction: column-reverse !important;
    }
    
    #newRecordPanel .side-panel-footer > * {
        width: 100% !important;
        margin: 0 !important;
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
    }
    
    /* Generic modal fallback */
    .modal-content,
    [class*="modal"]:not(#recordDetailsModal):not(#newRecordModal) {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: 0.5rem !important;
        padding: 1rem !important;
    }
    
    /* Modal headers */
    .modal-header,
    [class*="modal-header"] {
        padding: 1rem !important;
        font-size: 1.125rem !important;
    }
    
    /* Modal body scrollable */
    .modal-body,
    [class*="modal-body"] {
        max-height: calc(90vh - 8rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem !important;
    }
    
    /* Modal footer buttons stack */
    .modal-footer,
    [class*="modal-footer"] {
        flex-direction: column-reverse;
        padding: 1rem !important;
    }
    
    .modal-footer > *,
    [class*="modal-footer"] > * {
        width: 100%;
        margin: 0.25rem 0;
    }
}

/* ========================================
   Cards & Grid Layouts Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Force single column for grids */
    .records-grid,
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Card spacing */
    .record-card,
    .card,
    [class*="rounded"] {
        margin-bottom: 1rem;
        border-radius: 0.5rem;
    }
    
    /* Reduce card padding */
    .p-6 {
        padding: 1rem !important;
    }
    
    .p-8 {
        padding: 1.25rem !important;
    }
}

/* ========================================
   Banners & Notifications Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Notification banners */
    [id*="Banner"],
    .banner,
    [class*="banner"] {
        position: relative !important;
        top: auto !important;
    }
    
    /* Banner content */
    [id*="Banner"] .flex,
    .banner .flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    
    /* Banner buttons */
    [id*="Banner"] .flex a,
    [id*="Banner"] .flex button {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    
    /* Reduce banner padding */
    [id*="Banner"] > div,
    .banner > div {
        padding: 0.75rem !important;
    }
}

/* ========================================
   Footer Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Footer grid stack */
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    /* Footer text center */
    footer {
        text-align: center;
    }
    
    footer .flex {
        justify-content: center;
    }
    
    /* Social icons */
    footer .flex.space-x-4 {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ========================================
   Spacing & Padding Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Reduce section spacing */
    .py-20 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    .py-24 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    /* Reduce margin */
    .mb-12 {
        margin-bottom: 2rem !important;
    }
    
    .mb-16 {
        margin-bottom: 2.5rem !important;
    }
    
    /* Tighter gaps */
    .gap-8 {
        gap: 1.5rem !important;
    }
    
    .gap-12 {
        gap: 2rem !important;
    }
}

/* ========================================
   Hero Sections Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Hero padding */
    section[class*="hero"],
    section[class*="bg-gradient"] {
        padding: 2rem 1rem !important;
    }
    
    /* Hero text */
    section[class*="hero"] h1,
    section[class*="bg-gradient"] h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    section[class*="hero"] p,
    section[class*="bg-gradient"] p {
        font-size: 1rem !important;
    }
    
    /* Hero buttons */
    section[class*="hero"] .flex,
    section[class*="bg-gradient"] .flex {
        flex-direction: column;
        width: 100%;
    }
    
    section[class*="hero"] a,
    section[class*="bg-gradient"] a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ========================================
   Stats Section Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Stats grid */
    .grid.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* Stat text size */
    .text-5xl {
        font-size: 2rem !important;
    }
    
    .text-xl {
        font-size: 0.875rem !important;
    }
}

/* ========================================
   Record List Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Record rows */
    .record-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }
    
    .record-row .record-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 18px !important;
    }
    
    /* Record info full width */
    .record-row .record-info {
        width: 100%;
    }
    
    /* Record actions */
    .record-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ========================================
   Dropdown Menus Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Dropdown positioning */
    .dropdown-menu,
    [class*="dropdown"],
    #createNewMenu {
        position: fixed !important;
        left: 1rem !important;
        right: 1rem !important;
        top: auto !important;
        bottom: 1rem !important;
        width: auto !important;
        max-width: none !important;
        z-index: 9999;
    }
    
    /* Dropdown items */
    .dropdown-menu a,
    #createNewMenu a {
        padding: 1rem !important;
        font-size: 1rem !important;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
}

/* ========================================
   Breadcrumbs Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Breadcrumb text size */
    nav[aria-label="Breadcrumb"] {
        font-size: 0.75rem !important;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    nav[aria-label="Breadcrumb"] ol {
        padding: 0.5rem 0;
    }
}

/* ========================================
   Search & Filters Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Search bar */
    .search-input,
    input[type="search"] {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }
    
    /* Filter buttons */
    .filters-right {
        flex-direction: column !important;
        width: 100%;
        gap: 0.5rem !important;
    }
    
    .filters-right > * {
        width: 100%;
    }
    
    /* Dashboard header */
    .dashboard-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* ========================================
   Utility Classes Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Hide on mobile */
    .hidden-mobile {
        display: none !important;
    }
    
    /* Show only on mobile */
    .show-mobile {
        display: block !important;
    }
    
    /* Text alignment */
    .mobile-text-center {
        text-align: center !important;
    }
    
    /* Full width */
    .mobile-full-width {
        width: 100% !important;
    }
    
    /* Stack flex */
    .mobile-stack {
        flex-direction: column !important;
    }
}

/* ========================================
   Touch-Friendly Interactions
   ======================================== */
@media (max-width: 768px) {
    /* Larger tap targets */
    a, button, input, select, textarea {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* Increase button padding */
    button, .btn, [class*="btn"] {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    /* Icon buttons */
    button i,
    a i {
        font-size: 1.25rem;
    }
}

/* ========================================
   Prevent Zoom on Input Focus (iOS)
   ======================================== */
@media (max-width: 768px) {
    input, textarea, select {
        font-size: 16px !important;
    }
}

/* ========================================
   Smooth Scrolling & Transitions
   ======================================== */
@media (max-width: 768px) {
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    .transition-all {
        transition: all 0.2s ease;
    }
}
/* ========================================
   Record View Fields Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Record view field spacing */
    .record-view-field {
        margin-bottom: 1rem !important;
        padding: 0 !important;
    }
    
    .record-view-label {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        color: #374151 !important;
    }
    
    .record-view-input {
        padding: 0.75rem !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        min-height: 44px !important;
        word-break: break-all !important;
        white-space: pre-wrap !important;
    }
    
    /* Input container with buttons */
    .record-view-field > div {
        display: flex !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    
    .record-view-field > div > input,
    .record-view-field > div > [contenteditable] {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* Copy and toggle buttons */
    .record-view-copy-btn,
    .record-view-toggle-btn {
        flex-shrink: 0 !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.25rem !important;
        border-radius: 8px !important;
        background: #f3f4f6 !important;
        border: 1px solid #d1d5db !important;
    }
    
    .record-view-copy-btn:active {
        background: #e5e7eb !important;
    }
    
    .record-view-toggle-btn:active {
        background: #e5e7eb !important;
    }
    
    /* Notes textarea */
    .record-view-textarea {
        padding: 0.75rem !important;
        font-size: 1rem !important;
        min-height: 120px !important;
        border-radius: 8px !important;
    }
    
    /* URL fields with open button */
    .record-view-field .btn-open-website {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        font-size: 1.25rem !important;
        flex-shrink: 0 !important;
    }
}

/* ========================================
   Edit Record Form Fields Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Form groups */
    #newRecordForm .form-group {
        margin-bottom: 1rem !important;
    }
    
    #newRecordForm label {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
        color: #374151 !important;
    }
    
    #newRecordForm input[type="text"],
    #newRecordForm input[type="email"],
    #newRecordForm input[type="url"],
    #newRecordForm input[type="password"],
    #newRecordForm select,
    #newRecordForm textarea {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        border: 1px solid #d1d5db !important;
        min-height: 44px !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    #newRecordForm textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }
    
    #newRecordForm select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 0.75rem center !important;
        background-size: 1.25rem !important;
        padding-right: 2.5rem !important;
    }
    
    /* Password input containers */
    .password-input-container {
        display: flex !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }
    
    .password-input-container input {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .password-input-container button,
    .password-toggle,
    .password-generate {
        flex-shrink: 0 !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        font-size: 1.25rem !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Dynamic fields */
    #dynamicFields {
        margin-top: 0.5rem !important;
    }
    
    #dynamicFields .form-group {
        margin-bottom: 1rem !important;
    }
    
    /* Inline buttons (website open button) */
    .btn-open-website {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        font-size: 1.25rem !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
    }
    
    /* Common fields (checkboxes, notes) */
    #commonFields {
        margin-top: 1rem !important;
        padding-top: 1rem !important;
        border-top: 1px solid #e5e7eb !important;
    }
    
    #commonFields label {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.75rem !important;
        cursor: pointer !important;
        font-size: 1rem !important;
    }
    
    #commonFields input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        cursor: pointer !important;
    }
    
    #commonFields textarea {
        margin-top: 0.5rem !important;
    }
}

/* ========================================
   Modal Close Buttons Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Make close (X) buttons larger and more tappable */
    .modal-close {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.75rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: #6b7280 !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
    
    .modal-close:active {
        background: #f3f4f6 !important;
        color: #374151 !important;
    }
    
    /* Self-destruct info display */
    #recordDetailsSelfDestruct,
    #newRecordSelfDestructSummary {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        padding: 0.25rem 0 !important;
    }
}

/* ========================================
   Two-Factor & Attachments Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Two-factor display */
    #twoFactorInlineDisplay {
        padding: 0.75rem !important;
        margin-top: 0.5rem !important;
        border-radius: 8px !important;
    }
    
    #twoFactorInlineDisplay .two-factor-code {
        font-size: 1.5rem !important;
        letter-spacing: 0.25rem !important;
        padding: 1rem !important;
    }
    
    /* Attachment lists */
    .attachment-list,
    [class*="attachment"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .attachment-item {
        padding: 0.75rem !important;
        border-radius: 8px !important;
        background: #f9fafb !important;
        border: 1px solid #e5e7eb !important;
    }
    
    .attachment-item button {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.5rem 1rem !important;
    }
}

/* ========================================
   Notifications & Toasts Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Toast notifications */
    .notification,
    [class*="toast"],
    [id*="notification"] {
        left: 1rem !important;
        right: 1rem !important;
        width: auto !important;
        max-width: none !important;
        font-size: 1rem !important;
        padding: 1rem !important;
        border-radius: 8px !important;
    }
}