/* General Styles */
body {
    padding: 8px; /* Reduced padding for more compact feel */
    background-color: #f8f9fa; /* Light background for the whole page */
    font-size: 0.95rem; /* Slightly smaller base font size */
}

/* Global Variable Tooltip Styles */
.tooltip-inner {
    max-width: 400px !important;
    text-align: left !important;
}

.tooltip-inner table {
    margin-bottom: 0;
    font-size: 0.85rem;
}

.tooltip-inner th {
    font-weight: 600;
    color: #495057;
    border-bottom: 1px solid #dee2e6;
    padding: 4px 8px;
}

.tooltip-inner td {
    padding: 4px 8px;
    border-bottom: 1px solid #f8f9fa;
}

.tooltip-inner tr:last-child td {
    border-bottom: none;
}

[v-cloak] {
    display: none;
}

.nopadding {
    padding: 0 !important;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 0, 0, .125);
}

/* Improved Card Styles */
.card {
    margin-bottom: 10px; /* Reduced spacing between cards */
}

.contact-card {
    transition: all 0.2s ease; /* Faster transition */
    border-radius: 6px; /* Slightly smaller radius */
    border: 1px solid #e0e0e0; /* Lighter border */
    overflow: hidden;
    background-color: #fff; /* Ensure cards have a white background */
    padding: 8px 12px; /* Reduced padding */
}

.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Enhanced hover effect */
}

/* Header Styles */
.contact-header,
.card-header {
    background-color: #f1f3f5; /* Lighter header background */
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 1rem; /* Reduced padding */
}

.contact-title {
    font-size: 1.2rem; /* Reduced title size */
    font-weight: 600;
    color: #343a40;
    margin-bottom: 0;
}

/* Search Bar */
.contact-search {
    background-color: #fff;
    padding: 10px 12px; /* Reduced padding */
    border-radius: 6px;
    margin-bottom: 15px; /* Less space below search */
    border: 1px solid #e0e0e0;
    box-shadow: none; /* Remove shadow for flatter look */
}

.contact-list-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px); /* Adjust height based on header/footer */
    overflow: hidden; /* Prevent main scroll */
}

.contact-list-view {
    flex-grow: 1; /* Allow list to take available space */
    overflow-y: auto; /* Enable scrolling for the list only */
    padding: 0; /* Remove padding if any */
    margin: 0; /* Remove margin if any */
    list-style: none; /* Remove list bullets if it were a ul/ol */
}

.contact-list-item-new {
    display: flex;
    align-items: center;
    padding: 8px 12px; /* Compact padding */
    border-bottom: 1px solid #eee; /* Lighter separator */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.contact-list-item-new:hover {
    background-color: #f8f9fa; /* Subtle hover */
}

.contact-list-item-new:last-child {
    border-bottom: none; /* No border for the last item */
}

.contact-list-img {
    width: 35px; /* Smaller image */
    height: 35px;
    margin-right: 10px;
    flex-shrink: 0; /* Prevent image shrinking */
}

.contact-list-details {
    flex-grow: 1; /* Allow details to take up space */
    min-width: 0; /* Prevent overflow issues with flex */
}

.contact-list-name {
    font-weight: 500; /* Slightly less bold */
    font-size: 0.95rem; /* Compact name size */
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if name is too long */
    margin-bottom: 2px; /* Small space below name */
}

.contact-list-info {
    font-size: 0.8rem; /* Smaller secondary info */
    color: #6c757d;
    display: grid; /* Use Grid for alignment */
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); /* Define columns (adjust ratios as needed) */
    gap: 8px; /* Space between columns */
    align-items: center;
    overflow: hidden; /* Hide overflow for the grid container */
}

.contact-list-info span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Apply ellipsis to each span */
    display: inline-flex; /* Align icon and text within span */
    align-items: center;
}

.contact-list-info svg {
    flex-shrink: 0; /* Prevent icon shrinking */
    vertical-align: middle; /* Align icons better */
    margin-bottom: 1px; /* Fine-tune alignment */
}

.contact-list-chevron {
    color: #adb5bd; /* Lighter chevron */
    margin-left: 10px;
    flex-shrink: 0;
}

.contact-search .form-group .row {
    align-items: center;
    margin-bottom: 0; /* Remove default row margin */
}

.contact-search .form-control,
.detail-form-row .form-control {
    border-radius: 4px; /* Smaller radius */
    border: 1px solid #ced4da;
    font-size: 0.9rem; /* Smaller font in inputs */
    padding: 0.375rem 0.75rem; /* Adjust padding if needed */
}

.contact-search .form-control:focus,
.detail-form-row .form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Bootstrap focus style */
}

/* Remove old contact card styles if they conflict or are no longer needed */
/* Keep .contact-label if used elsewhere, otherwise remove */
/* Keep .contact-value if used elsewhere, otherwise remove */

/* Action Buttons */
.action-buttons {
    margin-top: 15px; /* Less space above */
    padding: 10px 12px; /* Reduced padding */
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0; /* Lighter border */
    border-radius: 0 0 6px 6px; /* Match card radius */
}

.action-icon {
    transition: all 0.2s ease;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    color: #007bff; /* Use theme color */
}

.action-icon:hover {
    background-color: rgba(0, 123, 255, 0.1);
    transform: scale(1.1);
}

/* Detail View Styles */
#contactdetails .container-fluid {
    padding: 0; /* Remove default padding if needed */
}

.detail-section {
    background-color: #fff;
    border-radius: 6px;
    padding: 15px; /* Reduced padding */
    margin-bottom: 15px; /* Less space */
    border: 1px solid #e0e0e0; /* Lighter border */
    box-shadow: none; /* Flatter look */
}

.detail-header {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 8px; /* Less padding */
    margin-bottom: 15px; /* Less space after header */
}

.detail-header h4 {
    font-weight: 600;
    color: #343a40;
}

/* Removed accordion-specific styles for #contactdetails as it now uses cards */

/* Detail Form Styles (Adjusted for Card Layout) */
/* .detail-form-row might still be used in 'new contact' form, review if needed */
.detail-form-row {
    margin-bottom: 10px; /* Reduced spacing */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.detail-form-row .col-auto { /* Target the label column specifically */
    flex: 0 0 auto; /* Allow it to size based on content */
    width: auto; /* Explicitly set width to auto */
    min-width: 70px; /* Ensure minimum width for alignment */
    text-align: right; /* Align label text to the right */
    padding-right: 10px; /* Space between label and value */
    max-width: 100%;
    margin-bottom: 4px; /* Reduced space between label and input on small screens */
    padding-left: 5px; /* Keep some left padding */
    font-size: 0.9rem; /* Smaller label font */
}

.detail-form-row .col { /* Target the value column */
    flex: 1 1 0; /* Allow it to take remaining space */
    width: 0; /* Necessary for flex-basis: 0 */
    max-width: 100%;
    padding: 0 5px;
}

/* Removed .form-control-plaintext styles as standard .form-control is used now in detail view */

.detail-form-row .form-control {
    border-radius: 5px;
    /* Ensure consistency if needed */
    font-size: 0.9rem;
    padding: 0.375rem 0.75rem;
}

/* Styles for the image in the new contact detail header card */
#contactdetails .card-header img.rounded-circle {
    border: 1px solid #dee2e6; /* Match original style */
    cursor: pointer;
    /* width/height set inline */
}


/* Detail Table Styles (within cards) */
.detail-table {
    background-color: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e0e0e0; /* Lighter border */
    margin-top: 10px; /* Less space above table */
    font-size: 0.85rem; /* Smaller table font */
}

.detail-table th {
    background-color: #f8f9fa; /* Even lighter header */
    font-weight: 500; /* Less bold */
    color: #495057;
    padding: 0.5rem 0.75rem; /* Reduced padding */
}

.detail-table td {
    padding: 0.5rem 0.75rem; /* Reduced padding */
    vertical-align: middle;
}

.detail-table .badge {
    font-size: 0.8rem; /* Adjust badge size */
    padding: 0.4em 0.6em;
}

/* Button Styles */
.btn-action {
    margin-right: 8px; /* Less space */
    padding: 6px 12px; /* Smaller padding */
    border-radius: 4px;
    font-size: 0.85rem; /* Smaller button text */
}

.btn-action svg {
    margin-right: 5px; /* Space between icon and text */
}

/* New Contact Form */
#contactdetails[v-if="contactToView=='newcontact'"] .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#contactdetails[v-if="contactToView=='newcontact'"] .form-control {
    margin-bottom: 10px; /* Space below inputs in new contact form */
}

/* Toast Styles - Keep original positioning */
#unauthorizedToast, #warningToast {
    width: 90%; /* Make toasts wider on small screens */
    max-width: 600px; /* Max width on larger screens */
    position: fixed; /* Changed from absolute to fixed */
    top: 20px; /* Position from the top of the viewport */
    left: 50%;
    transform: translateX(-50%); /* Center the toast */
    z-index: 9999;
}
#warningToast {
    z-index: 9998;
}

/* Ensure toasts are visible */
.toast.show {
    display: block;
    opacity: 1;
}

/* Test Mode Specific - Minimal adjustments */
#nav-tabContent .card {
    border: 1px solid #dee2e6;
}
#nav-tabContent .card-header { /* Keep existing styles if needed elsewhere */
    background-color: #f8f9fa;
}

/* Test Mode Accordion Styles */
.test-mode-container {
    padding: 0; /* Remove padding if container adds extra space */
}

.accordion {
    --bs-accordion-border-width: 1px;
    --bs-accordion-border-color: #dee2e6;
    --bs-accordion-border-radius: 0.375rem; /* Standard Bootstrap radius */
    --bs-accordion-inner-border-radius: calc(0.375rem - 1px);
    --bs-accordion-btn-padding-x: 1rem; /* Reduced padding */
    --bs-accordion-btn-padding-y: 0.75rem; /* Reduced padding */
    --bs-accordion-btn-color: #212529;
    --bs-accordion-btn-bg: #f8f9fa; /* Light background for button */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 1rem; /* Smaller icon */
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-focus-border-color: #86b7fe;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-accordion-body-padding-x: 1rem; /* Reduced padding */
    --bs-accordion-body-padding-y: 0.75rem; /* Reduced padding */
    --bs-accordion-active-color: #0c63e4; /* Bootstrap primary */
    --bs-accordion-active-bg: #e7f1ff; /* Lighter active background */
}

.accordion-button {
    font-size: 0.95rem; /* Slightly smaller button font */
    font-weight: 500;
}

.accordion-button:not(.collapsed) {
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); /* Keep bottom border */
}

.accordion-button:focus {
     box-shadow: var(--bs-accordion-btn-focus-box-shadow);
     border-color: var(--bs-accordion-btn-focus-border-color); /* Ensure focus border color applies */
     z-index: 3; /* Ensure focused button is on top */
}

.accordion-item {
    margin-bottom: 5px; /* Small space between items */
}

.accordion-item:first-of-type {
    border-top-left-radius: var(--bs-accordion-border-radius);
    border-top-right-radius: var(--bs-accordion-border-radius);
}
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: var(--bs-accordion-inner-border-radius);
    border-top-right-radius: var(--bs-accordion-inner-border-radius);
}

.accordion-item:last-of-type {
     border-bottom-left-radius: var(--bs-accordion-border-radius);
     border-bottom-right-radius: var(--bs-accordion-border-radius);
}

.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
    border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
}

.accordion-item:last-of-type .accordion-collapse {
    border-bottom-left-radius: var(--bs-accordion-border-radius);
    border-bottom-right-radius: var(--bs-accordion-border-radius);
}

.accordion-body {
    font-size: 0.9rem; /* Smaller body font */
}

.accordion-body h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #495057;
}

.accordion-body hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Styles for content within accordion */
.card-event {
    border: 1px solid #e9ecef;
    border-radius: 4px;
}

.card-header-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.card-body-sm {
    padding: 0.5rem 0.75rem;
}

.code-block {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8em; /* Smaller code font */
    background-color: #f1f3f5; /* Light background for code */
    padding: 0.5rem;
    border-radius: 4px;
    overflow-x: auto; /* Allow horizontal scroll for long lines */
    white-space: pre; /* Preserve whitespace */
    max-height: 200px; /* Limit height */
}

.form-label-sm {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.accordion-body .btn-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

.accordion-body .form-check-label.small {
    font-size: 0.85rem;
}

.accordion-body .bi-info-circle {
    color: #6c757d;
    cursor: help;
}

.accordion-body .zoom-app-api-component .card { /* Target cards generated by the component */
     margin-bottom: 0.75rem;
}

.accordion-body .zoom-app-api-component .card-header {
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
    background-color: #e9ecef;
}
.accordion-body .zoom-app-api-component .card-body {
    padding: 0.75rem;
}
.accordion-body .zoom-app-api-component pre {
    font-size: 0.8em;
    max-height: 150px;
}
.accordion-body .zoom-app-api-component .bi-repeat,
.accordion-body .zoom-app-api-component .bi-trash {
    cursor: pointer;
    margin-left: 8px;
    color: #6c757d;
}
.accordion-body .zoom-app-api-component .bi-repeat:hover,
.accordion-body .zoom-app-api-component .bi-trash:hover {
    color: #0d6efd;
}

/* Footer Demo Settings Card adjustments */
.test-mode-container .card-header-sm { /* Specificity for demo settings card header */
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
    background-color: #e9ecef;
}
.test-mode-container .card-body-sm { /* Specificity for demo settings card body */
     padding: 0.75rem;
}
.test-mode-container .form-check-input {
    height: 1.1em;
    width: 1.1em;
}
.test-mode-container .form-check-label.small {
    font-size: 0.9rem;
}
.test-mode-container .btn-link.btn-sm {
    font-size: 0.85rem;
}
.test-mode-container .btn-secondary.btn-sm {
    font-size: 0.85rem;
}
.test-mode-container .text-secondary.small {
    font-size: 0.8rem;
}
.test-mode-container .text-muted.small {
    font-size: 0.8rem;
}

/* Event Source Badges */
.badge.bg-primary { /* ZCC */
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb),var(--bs-bg-opacity)) !important;
}
.badge.bg-success { /* ZP */
     --bs-bg-opacity: 1;
     background-color: rgba(var(--bs-success-rgb),var(--bs-bg-opacity)) !important;
     color: #000 !important; /* Ensure text is readable on light green */
}
.badge.bg-secondary { /* Zapp */
     --bs-bg-opacity: 1;
     background-color: rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity)) !important;
}

/* Responsive Adjustments for Portrait */
@media (max-width: 576px) {
    /* Body padding already reduced */
    .contact-title {
        font-size: 1.1rem; /* Further reduce title size */
    }
    .contact-card {
        padding: 6px 10px; /* Further reduce card padding */
    }
    .detail-section {
        padding: 12px; /* Further reduce section padding */
    }
     /* Removed accordion-body padding adjustment */

    .contact-info .row > div { /* This class might be obsolete, check HTML if needed */
        flex: 0 0 100%; /* Stack info columns if .contact-info is still used */
        max-width: 100%;
    }
    .action-buttons .d-flex {
        flex-direction: column; /* Stack button groups */
    }
    .action-buttons .d-flex > div {
        margin-bottom: 10px; /* Space between stacked button groups */
        display: flex;
        flex-direction: column; /* Stack buttons within group */
        align-items: stretch;
    }
     .action-buttons .d-flex > div .btn {
        margin-bottom: 6px; /* Less space */
        width: 100%;
        padding: 6px 10px; /* Smaller padding */
        font-size: 0.85rem; /* Match other buttons */
     }
    .action-buttons .d-flex > div:last-child {
        margin-bottom: 0;
    }
    .btn-action {
        width: 100%;
        margin-bottom: 8px; /* Less space */
    }
    .btn-action:last-child {
        margin-bottom: 0;
    }
    #contactdetails .text-center {
        text-align: center !important; /* Ensure centering */
        margin-bottom: 15px;
    }
    /* Adjust image size in header for small screens if needed */
    #contactdetails .card-header img.rounded-circle {
        width: 35px;
        height: 35px;
    }
    .detail-table {
        font-size: 0.8rem; /* Smaller font in tables */
    }
    .detail-table th, .detail-table td {
        padding: 0.4rem 0.6rem; /* Less padding in table cells */
    }
}