/* ========================================
   SENIOR-FRIENDLY & ACCESSIBILITY STYLES
   Making RobustConnect easy for everyone
   ======================================== */

/* Larger base font size for better readability */
body {
    font-size: 18px !important;
    line-height: 1.8 !important;
    letter-spacing: 0.3px !important;
}

/* Larger headings with clear hierarchy */
h1 { font-size: 2.5rem !important; font-weight: 700 !important; margin-bottom: 1.5rem !important; }
h2 { font-size: 2rem !important; font-weight: 600 !important; margin-bottom: 1.2rem !important; }
h3 { font-size: 1.75rem !important; font-weight: 600 !important; margin-bottom: 1rem !important; }
h4 { font-size: 1.5rem !important; font-weight: 500 !important; }

/* High contrast text - easier to read */
body, p, span, div {
    color: #212529 !important;
}

/* Larger, more obvious buttons */
.btn, button, a.btn {
    font-size: 1.1rem !important;
    padding: 15px 30px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    min-height: 50px !important;
    transition: all 0.3s ease !important;
}

.btn-primary {
    background-color: #0066cc !important;
    border-color: #0066cc !important;
    color: white !important;
}

.btn-primary:hover {
    background-color: #0052a3 !important;
    transform: scale(1.05) !important;
}

/* Make links more obvious */
a {
    color: #0066cc !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}

a:hover {
    color: #0052a3 !important;
    text-decoration: underline !important;
}

/* Larger form inputs */
input, textarea, select {
    font-size: 1.1rem !important;
    padding: 12px 15px !important;
    border: 2px solid #ddd !important;
    border-radius: 6px !important;
    min-height: 50px !important;
}

input:focus, textarea:focus, select:focus {
    border-color: #0066cc !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2) !important;
    outline: none !important;
}

/* Labels with clear spacing */
label {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Simplified navigation - larger, clearer */
.navbar {
    padding: 1rem 2rem !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.navbar-brand {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
}

.nav-link {
    font-size: 1.2rem !important;
    padding: 10px 20px !important;
    margin: 0 5px !important;
}

/* Remove complex animations that might confuse */
*, *::before, *::after {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
}

/* Cards with clear borders */
.card {
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Tables - easier to read */
table {
    font-size: 1.1rem !important;
}

th {
    background-color: #f8f9fa !important;
    font-weight: 700 !important;
    padding: 15px !important;
    border: 2px solid #dee2e6 !important;
}

td {
    padding: 12px !important;
    border: 1px solid #dee2e6 !important;
}

/* Alert messages - more prominent */
.alert {
    font-size: 1.2rem !important;
    padding: 20px !important;
    border-radius: 8px !important;
    border-width: 2px !important;
    margin-bottom: 20px !important;
}

.alert-success {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724 !important;
}

.alert-danger {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24 !important;
}

.alert-info {
    background-color: #d1ecf1 !important;
    border-color: #17a2b8 !important;
    color: #0c5460 !important;
}

/* Remove tiny icons that are hard to click */
.fa, .fas, .far {
    font-size: 1.3em !important;
    margin-right: 8px !important;
}

/* Breadcrumbs - larger */
.breadcrumb {
    font-size: 1.1rem !important;
    padding: 15px !important;
}

/* Pagination - bigger buttons */
.pagination .page-link {
    font-size: 1.2rem !important;
    padding: 12px 20px !important;
    min-width: 50px !important;
    min-height: 50px !important;
}

/* Search boxes - more prominent */
.search-box, .form-control[type="search"] {
    font-size: 1.2rem !important;
    padding: 15px 20px !important;
    border: 2px solid #0066cc !important;
}

/* Modal dialogs - larger and clearer */
.modal-content {
    border: 3px solid #0066cc !important;
    border-radius: 10px !important;
}

.modal-header {
    background-color: #f8f9fa !important;
    padding: 20px !important;
}

.modal-title {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
}

.modal-body {
    padding: 25px !important;
    font-size: 1.1rem !important;
}

.modal-footer {
    padding: 20px !important;
}

/* Loading indicators - clearer */
.spinner-border {
    width: 3rem !important;
    height: 3rem !important;
    border-width: 0.3em !important;
}

/* Dropdowns - easier to use */
.dropdown-menu {
    font-size: 1.1rem !important;
    padding: 10px !important;
}

.dropdown-item {
    padding: 12px 20px !important;
    min-height: 50px !important;
}

/* Badges - larger and clearer */
.badge {
    font-size: 1rem !important;
    padding: 8px 15px !important;
    border-radius: 6px !important;
}

/* Footer - simpler */
footer {
    font-size: 1rem !important;
    padding: 30px 0 !important;
}

footer a {
    font-size: 1.1rem !important;
    padding: 8px 0 !important;
    display: inline-block !important;
}

/* Simplify complex hover effects */
.card:hover, .btn:hover {
    transform: scale(1.02) !important;
}

/* Remove busy backgrounds */
.bg-pattern, .bg-gradient {
    background: #ffffff !important;
}

/* Clear error messages */
.error, .invalid-feedback {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #dc3545 !important;
    margin-top: 8px !important;
}

/* Success messages */
.success, .valid-feedback {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #28a745 !important;
    margin-top: 8px !important;
}

/* Tooltips - larger */
.tooltip-inner {
    font-size: 1rem !important;
    padding: 10px 15px !important;
    max-width: 300px !important;
}

/* Focus indicators - very visible */
*:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* Skip to main content link for accessibility */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: #0066cc;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 1.2rem;
    z-index: 100;
}

.skip-to-main:focus {
    top: 0;
}

/* Print styles - clean printouts */
@media print {
    body {
        font-size: 14pt !important;
        color: black !important;
    }
    
    .navbar, .footer, .btn, button {
        display: none !important;
    }
    
    a {
        color: black !important;
        text-decoration: none !important;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 90%;
    }
}

/* Mobile - even simpler */
@media (max-width: 768px) {
    body {
        font-size: 20px !important;
    }
    
    .btn {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 18px !important;
        font-size: 1.2rem !important;
    }
    
    .navbar-toggler {
        padding: 15px !important;
        font-size: 1.5rem !important;
    }
    
    .nav-link {
        font-size: 1.3rem !important;
        padding: 15px !important;
        border-bottom: 1px solid #ddd !important;
    }
}

/* High contrast mode for low vision */
@media (prefers-contrast: high) {
    body {
        background: white !important;
        color: black !important;
    }
    
    .btn-primary {
        background-color: #000080 !important;
        border-color: #000080 !important;
    }
    
    a {
        color: #000080 !important;
    }
}

/* Reduced motion for those who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}