body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin: 0; /* Remove default margin */
    padding: 0; /* Ensure no default padding */
    background-color: #f8f9fa; /* Lighter grey background */
    color: #212529; /* Darker text for better contrast */
    line-height: 1.6;
    font-size: 16px; /* Base font size */
}

h1, h2, h3 { /* Consistent heading styling */
    color: #343a40; /* Dark grey for headings */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h1 {
    font-size: 2.25rem; /* Larger H1 */
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.25rem;
}

.main-container {
    max-width: 1140px; /* Common max-width for containers */
    margin: 0 auto; /* Center the container */
    padding: 20px;
    background-color: #ffffff; /* White background for content area */
    box-shadow: 0 0 10px rgba(0,0,0,0.05); /* Subtle shadow for depth */
    border-radius: 8px; /* Slightly rounded corners for the container */
    margin-top: 20px; /* Space from top of viewport */
    margin-bottom: 20px; /* Space from bottom of viewport */
}


input[type="file"] {
    margin-bottom: 20px;
}

/* #vcardRawContent {
    background-color: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 20px;
    min-height: 50px;
    white-space: pre-wrap;
    word-wrap: break-word; 
} */

#contactsTable {
    width: 100%;
    border-collapse: collapse; /* Keep collapsed borders */
    margin-top: 25px; /* Consistent margin */
    table-layout: fixed; 
    font-size: 0.9rem; /* Slightly smaller font for table data */
    background-color: #fff; /* Ensure table background is white if container has different color */
    border: 1px solid #dee2e6; /* Outer border for the table */
    border-radius: 0.25rem; /* Rounded corners for the table itself */
    overflow: hidden; /* To make border-radius clip tbody/thead */
}

#contactsTable th, #contactsTable td {
    border: 1px solid #e9ecef; /* Lighter internal borders */
    padding: 12px 15px; /* Increased padding */
    text-align: left;
    word-wrap: break-word; 
}

/* Style for the "Other Properties" column to ensure pre-wrap is effective - No longer exists in main table */
/* #contactsTable td:last-child {
    white-space: pre-wrap; 
} */


#contactsTable th {
    background-color: #f8f9fa; /* Very light grey for headers */
    color: #495057; /* Darker text for header contrast */
    font-weight: 600; /* Bolder headers */
    border-bottom: 2px solid #dee2e6; /* Stronger bottom border for headers */
}

#contactsTable tr:nth-child(even) td { /* Target td for striping background */
    background-color: #f8f9fa; /* Light stripe for even rows */
}

#contactsTable tr:hover td { /* Target td for hover background */
    background-color: #e9ecef; /* Slightly darker hover for better feedback */
    cursor: pointer; 
}


/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 5% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 700px;
    border-radius: 8px;
    position: relative;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
    opacity: 1; /* From previous .close-button:hover, ensure it's here too */
}

/* Refined Modal Content Styles */
.modal-content h2 { /* Main modal title */
    font-size: 1.75rem; /* Was 1.75rem */
    color: #007bff; /* Accent color for modal title */
    margin-bottom: 20px; /* Was 0.5em, now more explicit */
    padding-bottom: 10px;
    border-bottom: 1px solid #eee; /* Keep this border */
    margin-top: 0; /* Ensure no top margin for main title */
}

.modal-content h3 { /* Section titles within modal */
    font-size: 1.15rem; /* Was 1.25rem, slightly smaller for sub-sections */
    color: #343a40; /* Consistent with other h3s */
    margin-top: 25px; /* Increased space above section titles */
    margin-bottom: 10px;
    border-bottom: 1px dashed #ced4da; /* Dashed line for section separation */
    padding-bottom: 8px;
}

.modal-content p { /* Paragraphs in modal */
    margin-bottom: 8px; /* Slightly more space */
    line-height: 1.5; /* Improved readability */
}
.modal-content p strong { /* Bold text within paragraphs, e.g., "Family Name:" */
    color: #495057; /* Softer, consistent color */
    margin-right: 5px; /* Space after the label */
    display: inline-block; /* Allows min-width if needed later */
    /* min-width: 120px; */ /* Optional: if alignment is desired */
}

.modal-content ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 15px; /* Space after lists */
}

.modal-content ul li {
    background-color: #fff; /* Cleaner background for list items */
    border: 1px solid #e9ecef; /* Lighter border, consistent with table */
    padding: 10px 12px; /* Consistent padding */
    margin-bottom: 8px; 
    border-radius: 0.25rem; /* Standard radius */
    line-height: 1.5;
}

.modal-content ul li div { /* For nested divs within li, like formatted ADR */
    padding: 3px 0; /* Small padding for structure */
}
.modal-content ul li div strong { /* For labels within formatted ADR, e.g., "Street:" */
    display: inline-block;
    min-width: 100px; /* Adjust as needed */
    color: #495057; 
    margin-right: 8px;
    font-weight: 500; /* Less strong than section headers */
}

#modalNote { 
    white-space: pre-wrap;
    background-color: #f8f9fa; /* Consistent light background */
    border: 1px solid #dee2e6; /* Consistent border */
    padding: 12px; 
    border-radius: 0.25rem; 
    min-height: 60px; 
    line-height: 1.5;
    color: #212529; /* Ensure text color is set */
    font-size: 0.95rem; /* Slightly smaller for notes */
}

/* Tab Navigation Styles */
.tab-navigation {
    border-bottom: 2px solid #dee2e6; /* Slightly thicker border */
    margin-bottom: 25px; /* Increased margin */
    display: flex; 
}

.tab-button {
    background-color: transparent; /* Make inactive tabs blend more */
    border: none; /* Remove default border */
    border-bottom: 2px solid transparent; /* Placeholder for active state */
    padding: 12px 18px; /* Adjusted padding */
    cursor: pointer;
    font-size: 1rem; /* Use rem for font size */
    margin-right: 8px; 
    border-radius: 0; /* Sharp corners for a more modern tab look */
    outline: none;
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    color: #495057; /* Softer text color for inactive tabs */
}

.tab-button:hover {
    color: #007bff; /* Accent color on hover */
    border-bottom-color: #cfe2ff; /* Light blue bottom border on hover */
}

.tab-button.active-tab-button {
    color: #007bff; /* Active tab text color */
    border-bottom-color: #007bff; /* Active tab underline */
    font-weight: 600; /* Slightly bolder for active tab */
}

/* Tab Pane Styles */
.tab-pane {
    display: none; /* Hidden by default */
    padding: 10px;
    /* border: 1px solid #ccc; */ /* Optional: border around content */
    /* border-top: none; */ /* Optional: if tab-navigation has bottom border */
}

.tab-pane.active-pane {
    display: block; /* Shown when active */
}

.tab-description {
    background-color: #e9ecef; /* Light grey background, distinct from main content area */
    padding: 15px;
    margin-top: 0; /* Align with top if h1 has margin-top */
    margin-bottom: 25px; /* Space before the main content of the tab */
    border-radius: 0.25rem; /* Consistent border-radius */
    font-size: 0.95rem; /* Slightly smaller font for descriptive text */
    line-height: 1.6;
    color: #495057; /* Softer text color */
}

.tab-description p {
    margin-top: 0;
    margin-bottom: 10px; /* Space between paragraphs within the description */
}

.tab-description p:last-child {
    margin-bottom: 0; /* No bottom margin for the last paragraph */
}


/* VCard Generator Form Styles */
#vcardGeneratorForm fieldset {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px; /* Consistent with main-container */
    background-color: #fdfdfd; /* Slightly off-white for fieldset */
}

#vcardGeneratorForm legend {
    font-weight: 600; /* Bolder legend */
    color: #007bff; /* Accent color for legend */
    padding: 0 10px; /* More padding around legend text */
    font-size: 1.1rem;
}

#vcardGeneratorForm div { /* Container for label + input */
    margin-bottom: 15px; /* Increased spacing */
}

#vcardGeneratorForm label {
    display: block; 
    margin-bottom: 5px; /* Increased space below label */
    font-weight: 500;
    color: #495057; /* Slightly softer label color */
    font-size: 0.95rem;
}

#vcardGeneratorForm input[type="text"],
#vcardGeneratorForm input[type="tel"],
#vcardGeneratorForm input[type="email"],
#vcardGeneratorForm input[type="url"],
#vcardGeneratorForm select,
#vcardGeneratorForm textarea {
    width: 100%; /* Let box-sizing handle padding/border */
    padding: 10px 12px; /* Increased padding */
    border: 1px solid #ced4da; /* Standard Bootstrap-like border color */
    border-radius: 0.25rem; /* Standard border-radius */
    box-sizing: border-box; 
    font-size: 1rem; /* Consistent font size */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#vcardGeneratorForm input[type="text"]:focus,
#vcardGeneratorForm input[type="tel"]:focus,
#vcardGeneratorForm input[type="email"]:focus,
#vcardGeneratorForm input[type="url"]:focus,
#vcardGeneratorForm select:focus,
#vcardGeneratorForm textarea:focus {
    border-color: #80bdff; /* Bootstrap focus color */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Bootstrap focus shadow */
}


#vcardGeneratorForm textarea {
    resize: vertical; 
    min-height: 80px; /* Minimum height for textareas */
}


#vcardGeneratorForm button[type="button"] {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

#vcardGeneratorForm button[type="button"]:hover {
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
    /* General button styling - primary actions */
}

#vcardGeneratorForm button[type="button"]:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

/* Download button specific styling (can override general if needed, or be a class) */
#downloadVcfButton { 
    background-color: #28a745; 
    border-color: #28a745;
}
#downloadVcfButton:hover {
    background-color: #1e7e34;
    border-color: #1e7e34;
}

/* File Input Styling - common trick using a label */
input[type="file"] {
    display: none; /* Hide the actual file input */
}
.file-upload-label {
    display: inline-block;
    background-color: #6c757d; /* Secondary button color */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease-in-out;
    margin-bottom: 20px; /* Keep existing margin */
}
.file-upload-label:hover {
    background-color: #5a6268;
}


/* Modal Close Button - already has some styling, let's refine slightly */
.close-button {
    color: #6c757d; /* Softer color */
    float: right;
    font-size: 1.75rem; /* Slightly larger */
    font-weight: bold;
    line-height: 1; /* Ensure it aligns well */
    opacity: 0.75;
    transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.close-button:hover,
.close-button:focus {
    color: #343a40; /* Darker on hover/focus */
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
}


/* Specific layout for grouped inline elements if any (e.g. phone + type) */
/* For now, using display:block on labels makes them stack nicely */

/* Style for the generated VCard display area */
#generatedVCardArea h3 {
    margin-top: 10px; /* Add some space above this heading */
}

/* Privacy Policy Tab Specific Styles */
#privacyView .privacy-content {
    padding: 10px 0; /* Padding for top/bottom, horizontal handled by .main-container or .tab-pane */
    line-height: 1.7; 
    font-size: 0.95rem; 
    color: #343a40; /* Slightly darker than tab-description for more formal text */
}

#privacyView .privacy-content h1 { /* Already styled globally, but ensure it's distinct if needed */
    margin-bottom: 25px; /* More space after main Privacy Policy title */
}


#privacyView .privacy-content h2 {
    font-size: 1.3rem; 
    color: #007bff; 
    margin-top: 30px; /* More space before each section */
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

#privacyView .privacy-content p {
    margin-bottom: 15px; /* Space between paragraphs */
}


#privacyView .privacy-content ul {
    list-style-type: disc; 
    padding-left: 25px; /* Indent list items further */
    margin-bottom: 20px; /* Space after lists */
}

#privacyView .privacy-content li {
    margin-bottom: 10px; /* Space between list items */
}