/* SBB CVS Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.alert-area {
    color: #d72828;
    text-align: bold;
    width: 100%;
    text-align: center;
}

.border-red {
    border: 2px solid #d72828;
}

.input-error {
    border-color: #dc3545 !important; /* Red border for error */
}

.label-error {
    color: #dc3545 !important; /* Red text for label */
}

.checkbox-group-error { /* You might need this if you add errors to checkbox groups */
    border: 1px solid #dc3545 !important;
    padding: 5px;
    border-radius: 4px;
}

.alert-area ul.validation-summary-list {
    margin-top: 5px;
    padding-left: 20px;
    list-style-type: lower-alpha;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.no-items-placeholder {
    font-style: italic;
    color: #777;
}

.alert-area ul.validation-summary-list li {
    margin-bottom: 3px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.form-hint {
    font-size: 0.9em;
    color: #6c757d;
    margin-bottom: 10px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
}

/* Hide the calendar picker indicator in WebKit browsers (Chrome, Safari, Edge) */
input.date-input::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none; /* Sometimes needed */
}

/* For Firefox, it's harder to hide just the icon without affecting the input more broadly.
   Often, Firefox doesn't show a prominent icon by default if the input is styled.
   If an icon still appears and is problematic, you might need to style the input
   to look more like a plain text field when type="date", though this can impact usability
   if the picker doesn't open programmatically. */

input.date-input[type="date"] {
    /* If you want to ensure it looks like a text field even when type="date"
       to hide any residual Firefox UI elements, you might add: */
    -moz-appearance: textfield; /* For Firefox */
    appearance: textfield; /* Standard */
    /* Be cautious with this, as it can also hide the browser's date formatting.f
       The primary goal is that our JS handles the DD.MM.YYYY display. */
}

.datefield {
    z-index: 1000;
}

.sbb-container {
    max-width: 65%;
    margin: 0 auto;
    padding: 20px;
}

.email-container {
    display: flex;
    flex-direction: column;
    margin: 10px 0; 
    border-top: 1px solid #eee;
    justify-content: space-between;
}

.detail-item-email {
   padding: 15px;
}

.email-elements {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

 .buttons-email {
    margin-top: 20px;
 }

 .notes-button {
    padding: 10px 20px;
    background-color: #20c997;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;    
 }

.notes-button:hover {
    color: white;
    text-decoration: none;
    background-color: #28a57f;
 }

 .attach-file-button {
    padding: 10px 20px;
    background-color: #884188;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer; 
 }

  .attach-file-button:hover {
    color: white;
    background-color: #5e2b5e;
    text-decoration: none;
 }

 .high-priority-notes {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    padding: 20px;
    margin: 10px 0;
    display: flex;
    border-radius: 6px;
 }

  .high-priority-notes h4 {
    width: 100%;
  }

 .order-number-input {
    width: 200px;
 }

 .order-number-input.is-disabled {
    background-color: #f5f5f5;
    border-color: #ddd;
    cursor: not-allowed;
}

/* Make the edit icon look like a clickable button */
.edit-icon {
    cursor: pointer;
    color: #337ab7; /* A standard link blue */
    margin-left: 5px;
}

.order-number-input.is-disabled {
    background-color: #f5f5f5;
    border-color: #ddd;
    cursor: not-allowed;
}

/* Base styles for all icons in this group */
.edit-icon, .save-icon, .cancel-icon {
    cursor: pointer;
    margin-left: 5px;
}

/* Specific colors for each action */
.edit-icon { color: #337ab7; } /* Blue */
.edit-icon:hover { color: #23527c; }

.save-icon { color: #5cb85c; } /* Green */
.save-icon:hover { color: #449d44; }

.cancel-icon { color: #d9534f; } /* Red */
.cancel-icon:hover { color: #c9302c; }

.sbb-container-admin{
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.margin-top-10 {
    margin-top: 10px;
}

.btn-group {
    display: flex;
}
.btn-group .btn {
    border-radius: 0;
}
.btn-group .btn:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.btn-group .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
input:disabled {
    background-color: #eee;
    cursor: not-allowed;
}

.mismatch-alert {
   background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
    padding: 15px;
}

.verification-status-rejected {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.verification-status-partially_approved {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

.log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.log-header h2 {
    margin: 0; /* Remove default margin to help with alignment */
}

.toggle-icon {
    font-size: 26px;
    font-weight: bold;
    color: #333; /* A standard link blue */
    padding: 0 10px;
    line-height: 1;
}

.log-content {
    border-top: 1px solid #eee; /* A subtle separator line */
    padding-top: 15px;
    margin-top: 10px;
}

.info-message-box {
    padding: 12px 15px;
    margin: 20px 0;
    border-radius: 4px;
    background-color: #e7f3fe; /* Light blue background */
    border-left: 5px solid #2196F3; /* A solid blue left border */
    color: #333333; /* Dark text for good contrast and readability */
    font-size: 14px;
    line-height: 1.4;
}

.documents-flow {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.submit-button-save {
    margin-bottom: 50px;
    padding: 20px 0;
}

.info-message-box-success {
    padding: 12px 15px;
    margin: 10px 0;
    border-radius: 4px;
    background-color: #c9e9c5; /* Light blue background */
    border-left: 5px solid #64a55c; /* A solid blue left border */
    color: #333333; /* Dark text for good contrast and readability */
    font-size: 14px;
    line-height: 1.4;
}

.file-info {
    display: flex;
    gap: 8px;
    margin-top: 5px;
    font-size: 0.9em;
    color: #666;
}

.delete-file-btn {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    font-size: 1.2em; /* Adjust size as needed */
    padding: 0;
    line-height: 1;
}

/* General styling for a group of checkboxes */
.checkbox-group {
    display: flex; /* Allows items to flow, or stack if flex-direction is column */
    flex-direction: column; /* Stack checkboxes vertically */
    gap: 8px; /* Space between checkbox items */
    padding-left: 5px; /* Optional: if you want a slight indent for the group */
    margin-bottom: 10px;
}

/* Styling for each individual checkbox item (input + label container) */
.checkbox-item {
    display: flex; /* Align checkbox and label on the same line */
    align-items: center; /* Vertically center checkbox with its label */
    cursor: pointer; /* Make the whole item feel clickable */
}

/* Styling the checkbox input itself */
.checkbox-item input[type="checkbox"] {
    width: 20px;  /* Adjust for desired checkbox width */
    height: 20px; /* Adjust for desired checkbox height */
    margin-right: 8px; /* Space between the checkbox and its label */
    cursor: pointer;
    /* Optional: if you want to style the appearance of the checkbox itself further,
       it often requires hiding the default checkbox and styling a pseudo-element.
       However, for just size, width/height often works on modern browsers.
       If not, you might need a more advanced approach. */
    flex-shrink: 0; /* Prevent checkbox from shrinking if label text is long */
}

/* Styling for the label associated with the checkbox */
.checkbox-item label {
    font-size: 0.9em; /* Slightly smaller font for the label, adjust as needed */
    cursor: pointer;
    /* Prevent text selection when clicking label, if desired */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

/* Optional: if you have sections for damage types per part */
.item-part-damage-section {
    margin-bottom: 15px; /* Space below each part's damage type section */
    padding-left: 10px; /* Indent the damage types under their part */
    border-left: 2px solid #eee; /* Optional visual separator */
}

.item-part-damage-section h5 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em; /* Adjust as needed */
}

/* Styling for disabled text messages */
.disabled-text {
    color: #777;
    font-style: italic;
    font-size: 0.9em;
    padding: 5px 0;
}

.language_selector {
    margin-bottom: 15px; /* Adds some space below the language selector */
    text-align: right; /* Aligns the language list to the right, you can change this */
}

.language_selector ul {
    list-style-type: none; /* Removes default bullet points */
    padding: 0;
    margin: 0;
    display: inline-block; /* Allows the ul to sit nicely with text-align: right on the parent */
}

.language_selector li {
    display: inline-block; /* Arranges language items horizontally */
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px; /* Adjust as needed */
    color: #333; /* Default text color */
    border-right: 1px solid #ccc; /* Adds a separator line, optional */
}

.language_selector li:last-child {
    border-right: none; /* Removes separator from the last item */
}

.language_selector li:hover {
    background-color: #f0f0f0; /* Light grey background on hover */
    color: #000; /* Darker text on hover */
}

.language_selector li.active {
    font-weight: bold;
    color: #007bff; /* A blue color for the active language, adjust to your theme */
    /* You could also add a border or different background for active state */
    /* background-color: #e0e0e0; */
}


/* Header and logos */
.header {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.sbb-logo {
    margin-left: auto;
}

/* Progress steps */
.progress-steps {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.step {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-weight: bold;
}

.step.active .step-circle {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

.step-label {
    font-weight: 500;
}

/* Dividers */
.divider {
    height: 1px;
    background-color: #e0e0e0;
    margin: 30px 0;
}

/* Form sections */
.section {
    margin-bottom: 30px;
}

.section h2 {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 20px;
}

/* Form elements */
.form-group {
    margin-bottom: 15px;
    width: 100%;
}

.form-paragraph {
    padding: 10px 0;
    font-style: italic;
    color:#007bff;
}

.form-group.short{
    width: 50%;
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.form-row .street {
    flex: 3;
}

.form-row .number {
    flex: 1;
}

.form-row .postcode {
    flex: 1;
}

.form-row .city {
    flex: 3;
}

.form-row .lost-item {
    flex: 3;
    flex-direction: row;
}

.lost-content-section,
.emergency-purchases-section {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
}

.sbb-buttons {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

input, select {
    width: 100%;
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 40px;
}

.select-title {
    width: 30%;
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 40px;
}

input:focus, select:focus {
    outline: none;
    border-color: #000;
}

/* or separator */
.form-row.with-separator {
    align-items: center;
}

.separator {
    padding: 0 10px;
    margin-top: 20px;
    font-weight: bold;
}

/* Info icon */
.info-icon {
    display: inline-block; /* Allows for better spacing and potential background */
    margin-left: 5px;    /* Adds a little space from the label text */
    color: #007bff;       /* SBB Blue or your preferred info color */
    cursor: help;        /* Changes mouse cursor to indicate help is available */
    font-weight: bold;   /* Makes the 'i' a bit more prominent */
    font-size: 1.3em;    /* Slightly smaller than label text if desired, or 1em for same size */
    line-height: 1;      /* Helps with vertical alignment */
    vertical-align: middle; /* Better alignment with text */
}

.info-icon:hover {
    color: #0056b3;       /* Darker blue on hover */
}

/* Action buttons */
.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    gap: 10px;
    margin-bottom: 50px;
}

.submit-button {
    padding: 10px 20px;
    background-color: #ec0000; /* SBB red */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}


.submit-button:hover {
    background-color: #d10000;
}

.date-input {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 35px;
}

.continue-button {
    background-color: #ec0000; /* SBB red */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.continue-button:hover {
    background-color: #d10000;
}

h2 {
    font-size: 18px;
    font-weight: normal;
    margin: 25px 0 15px 0;
}

/* Table styles */
.items-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 30px;
}

.items-table th {
    background-color: #f5f5f5;
    padding: 10px;
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid #e0e0e0;
}

.items-table td {
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.no-items {
    margin: 30px 0;
    color: #666;
    font-style: italic;
}

/* Button styles */
.page-actions-buttons{
    margin-bottom: 20px;
}

.add-button {
    background-color: #0074d9;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 5px;
}

.add-button:hover {
    background-color: #0063b6;
}

.edit-button {
    background-color: #0074d9;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
}


.edit-button:hover {
    background-color: #0063b6;
}

.delete-button-inline {
    background-color: #ff4136;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
}

.delete-button:hover {
    background-color: #e03730;
}

.cancel-button {
    background-color: #999;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    margin-right: auto;
}

.cancel-button:hover {
    background-color: #777;
}

/* Section header with button */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header h2 {
    margin: 0;
}

/* File upload */
.file-upload {
    margin-bottom: 20px;
}

textarea {
    width: 100%;
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
}

/* Form actions in the add/edit form */
.add-edit-form .form-actions {
    display: flex;
    margin-top: 30px;
}

/* For nested content section */
.contents-section {
    margin: 20px 0;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.contents-section h3 {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: normal;
}

.add-edit-content-form {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f5f5f5;
}

.add-edit-content-form h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: normal;
}

.contents-table {
    margin-bottom: 0;
}

/* In style_sbb_cvs.css (Optional, if default styling isn't enough) */
.sbb-swal-button {
    /* Copy styles from .swal2-confirm or your theme's buttons */
    background-color: #007bff; /* Example */
    color: white;
    padding: 0.625em 1.1em;
    font-size: 1em;
    font-weight: 500;
    border-radius: .25em;
    border: none;
    cursor: pointer;
    margin: 0.3125em;
}
.sbb-swal-button:hover {
    background-color: #0056b3; /* Example */
}

#overlay {
    display: none; /* Initially hidden, shown by JavaScript setting display: block; */
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5); /* Slightly darker for better visibility */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000; /* Ensure it's on top */
}

/* loader ellipsis */
.loader-ellps {
    position: absolute; /* Positioned relative to the #overlay */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the loader container */
    display: inline-block; /* Or block, doesn't matter much when absolutely positioned */
    width: 80px;  /* Container width for the dots */
    height: 15px; /* Height of one dot, effectively the track height */
    /* No need for transform here if children are absolutely positioned relative to this */
}

.loader-ellps div {
    position: absolute;
    top: 0; /* Align dots to the top of .loader-ellps container */
    width: 13px; /* Dot size */
    height: 13px;/* Dot size */
    border-radius: 50%;
    background: #fff; /* Dot color */
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

/* Keyframe Animations (THESE WERE MISSING and are ESSENTIAL) */
@keyframes loader-first-ellps {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes loader-third-ellps {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes loader-second-ellps {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0); /* Distance the middle dots travel */
    }
}

/* Applying animations to the dots */
.loader-ellps div:nth-child(1) {
    left: 8px; /* Start position of first dot */
    animation: loader-first-ellps 0.6s infinite;
}

.loader-ellps div:nth-child(2) {
    left: 8px; /* Start position of second dot (will move) */
    animation: loader-second-ellps 0.6s infinite;
}

.loader-ellps div:nth-child(3) {
    left: 32px; /* Start position of third dot (will move with second) */
    animation: loader-second-ellps 0.6s infinite;
}

.loader-ellps div:nth-child(4) {
    left: 56px; /* Start position of fourth dot */
    animation: loader-third-ellps 0.6s infinite;
}


/* General Admin Page Styles */
.admin-page {
    font-family: Arial, sans-serif; /* Or your preferred SBB font */
    color: #333;
    padding: 20px;
    background-color: #f4f4f4; /* Light grey background for the page */
}

.admin-page h1 {
    color: #333;
    margin-bottom: 20px;
    font-size: 1.8em;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

.admin-page h2 {
    color: #444;
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.4em;
}

.card {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    margin-bottom: 20px;
}

.card.emails {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.repair-quote-files {
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    margin-bottom: 20px;
    background-color: #d4edda;
    color: #155724;
}

.title-cost-vefification h2{
    margin-top: 50px;
    margin-bottom: 20px;
}

.space-between {
    display: flex;
    justify-content: space-between;
}

/* Search Controls */
.search-controls {
    display: flex;
    align-items: flex-start; /* Align items to the bottom for better button alignment */
    gap: 15px; /* Space between form groups and button */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    flex-direction: column;
}

.search-controls .form-group {
    flex-grow: 1; /* Allow input to take available space */
    margin-bottom: 0; /* Remove default bottom margin if any */
}

.search-controls label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 0.9em;
}

.search-controls input[type="text"],
.search-controls select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
}

.search-controls input[type="text"]:focus,
.search-controls select:focus {
    border-color: #007bff; /* Example focus color */
    outline: none;
}

/* 
 * Main container for the privacy section, matching the info-message-box style.
*/
.privacy-section {
    padding: 15px 20px;
    margin: 25px 0; /* A bit more vertical margin to separate it clearly */
    border-radius: 4px;
    background-color: #e7f3fe; /* Light blue background */
    border-left: 5px solid #2196F3; /* Solid blue left border */
}

/* Style for the title inside the blue box */
.privacy-section h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    color: #333;
}

/* Container for the checkboxes */
.privacy-section .checkbox-group {
    padding-left: 5px;
}

/* 
 * Styles for each individual checkbox item (the input and its label).
 * Using flexbox makes vertical alignment of the checkbox and text easy.
*/
.privacy-section .checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.privacy-section .checkbox-item:last-child {
    margin-bottom: 0;
}

/* Style the checkbox itself */
.privacy-section .checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    width: 16px; /* Slightly larger for easier clicking */
    height: 16px;
}

/* Style the label text next to the checkbox */
.privacy-section .checkbox-item label {
    font-size: 14px;
    color: #333333;
    line-height: 1.4;
}

/* 
 * --- ERROR STYLING ---
*/

/* When the group has an error, make the label text red */
.privacy-section .checkbox-group-error .checkbox-item label {
    color: #d9534f; /* A standard error red */
    font-weight: bold;
}

/* Style for the error message that appears below the checkboxes */
.privacy-section .error-message {
    color: #d9534f;
    font-size: 13px;
    font-weight: bold;
    margin-top: 10px;
    padding-left: 5px;
}

/* Buttons */
.button, button { /* General button styling */
    padding: 10px 18px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease-in-out;
    text-decoration: none; /* For <a> styled as buttons */
    display: inline-block;
    text-align: center;
}

.button.primary-button, button.primary-button {
    background-color: #007bff; /* Example primary color (SBB Red: #eb0000) */
    color: white;
}
.button.primary-button:hover, button.primary-button:hover {
    background-color: #0056b3; /* Darker shade for hover */
}
.button:disabled, button:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
}

.button-link { /* For "View Details" styled as a link but behaving like a button */
    background: none;
    border: none;
    color: #007bff; /* Link color */
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9em;
}
.button-link:hover {
    color: #0056b3;
}


/* Results Table */
.results-section {
    margin-top: 20px;
}

.items-table.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.items-table.admin-table th,
.items-table.admin-table td {
    border: 1px solid #ddd;
    padding: 10px 12px;
    text-align: left;
    font-size: 0.95em;
}

.items-table.admin-table th {
    background-color: #e9ecef; /* Light header background */
    font-weight: bold;
    color: #495057;
}

.items-table.admin-table tbody tr:nth-child(even) {
    background-color: #f8f9fa; /* Zebra striping for rows */
}

.items-table.admin-table tbody tr:hover {
    background-color: #e2e6ea; /* Hover effect */
}

.items-table.admin-table td a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}
.items-table.admin-table td a:hover {
    text-decoration: underline;
}

/* Loading, Error, and No Results States */
.loading-indicator,
.no-results {
    text-align: center;
    padding: 30px;
    font-size: 1.1em;
    color: #666;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

/* Pagination */
.pagination-controls {
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.pagination-controls span {
    margin: 0 10px;
    font-size: 0.9em;
    color: #555;
}

/* Re-use styles from manage_sbb_order.css where possible: .admin-page, .card, .button, etc. */

.order-detail-container {
    max-width: 900px;
    margin: 0 auto;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.status-badge {
    padding: 5px 12px;
    border-radius: 15px;
    font-weight: bold;
    color: white;
    font-size: 0.9em;
    text-transform: uppercase;
}

.status-badge.status-01 { background-color: #333a35; }
.status-badge.status-02 { background-color: #007bff; }
.status-badge.status-03 { background-color: #c5ab17; } 
.status-badge.status-04 { background-color: #dc3545; } 
.status-badge.status-05 { background-color: #ac3397; } 
.status-badge.status-06 { background-color: #11e62e; } 

.action-buttons {
    display: flex;
    gap: 10px;
    padding-bottom: 15px;
}
.button.success-button { background-color: #28a745; color: white; }
.button.success-button:hover { background-color: #218838; }
.button.danger-button { background-color: #dc3545; color: white; }
.button.danger-button:hover { background-color: #c82333; }
.button.back-button { background-color: #007bff; color: white;}
.button.back-button:hover {background-color: #0056b3;}


.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

.detail-item {
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.detail-label {
    font-weight: bold;
    color: #555;
    display: block;
    margin-bottom: 3px;
    font-size: 0.9em;
}

.detail-value {
    color: #333;
}
.detail-value.code {
    font-family: monospace;
    background-color: #e9ecef;
    padding: 2px 4px;
    border-radius: 3px;
}

.claim-type-summary {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #e9ecef;
    border-radius: 4px;
}

.item-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
}

.item-card-optimized {
    display: flex;
    flex-wrap: wrap; /* Allows columns to stack on very narrow screens */
    gap: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
}

.item-details-col {
    flex: 1; /* Takes up 2/3 of the space */
    min-width: 250px;
}
.item-details-col h4 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.item-files-col {
    flex: 2; /* Takes up 1/3 of the space */
    min-width: 350px;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
}
.item-files-col h5 {
    margin-top: 0;
    font-size: 1em;
    color: #444;
    margin-bottom: 10px;
}

.file-preview-item-p {
    font-size: 0.8em;
}

.item-card h4 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

/* Compact grid for details */
.details-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 20px; /* Vertical and horizontal gap */
    margin-bottom: 15px;
}

/* Horizontal file preview list */
.file-preview-list {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.file-preview-item a {
    display: block;
    text-align: left;
    text-decoration: none;
    color: #1a252e;
    width: 100px; /* Fixed width for each item */
}
.all-file-preview-list {
    list-style-type: none; 
    padding: 0;
    margin: 0;
    display: flex;         /* The magic starts here! */
    flex-wrap: wrap;       /* Allows items to wrap onto new lines on smaller screens */
    gap: 20px; 
}

.all-file-preview-item {
    display: flex;
    flex-direction: column; /* Stacks the children (image, text) vertically */
    width: 220px;           /* Sets a fixed width for each item to ensure alignment */
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    overflow: hidden;       /* Hides anything that spills out, like corners of the image */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effect */
}

/* Add a nice hover effect to make the UI feel interactive */
.all-file-preview-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/*
  Styling for the image link and the image itself.
  This ensures all images are the same size and don't get stretched.
*/
.all-file-preview-item a {
    display: block; /* Makes the link fill the space */
    width: 100%;
    height: 160px; /* Gives all images a consistent height */
}

.all-file-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is key! It scales the image to fill the container without distorting its aspect ratio. */
    border-bottom: 1px solid #eee; /* A subtle line separating image from text */
}

.all-file-name {
    display: block;   /* Makes each span take its own line */
    padding: 4px 12px;
    font-size: 13px;
    color: #555;
    white-space: nowrap;      /* Prevents long text from wrapping */
    overflow: hidden;         /* Hides the overflow */
    text-overflow: ellipsis;  /* Adds '...' to text that is too long */
}

/* Last span needs a bit more padding at the bottom */
.all-file-name:last-of-type {
    padding-bottom: 12px;
}

.all-file-name strong {
    color: #222;
}

.file-preview-item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
}

.file-preview-item .file-icon {
    width: 100%;
    height: 80px;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    background-color: #fff;
}

.file-preview-item .file-name {
    display: block;
    font-size: 0.8em;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.description-block {
    margin-top: 15px;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
}
.description-block p { margin: 5px 0; }

.file-list-section {
    margin-top: 20px;
}

.file-list-section.warning {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
    padding: 15px;
}

.file-list-section h4 {
    font-size: 1em;
    color: #444;
    margin-bottom: 8px;
}
.file-list {
    list-style-type: none;
    padding-left: 0;
}
.file-list li {
    margin-bottom: 5px;
}

.item-file {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.log-list {
    list-style-type: none;
    padding-left: 0;
    font-size: 0.9em;
}
.log-list li {
    padding: 5px 0;
    border-bottom: 1px dashed #eee;
}

.log-list .log-date {
    color: #666;
    margin-right: 15px;
}

.log-message {
    font-size: 1.1em;
    color: #666;
}

.log-value {
    font-size: 1.1em;
    font-weight: 600;
}

/* Styling for the sub-items table within a lost luggage card */
.sub-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
    font-size: 0.9em; /* Slightly smaller font for sub-table */
}

.sub-items-table th,
.sub-items-table td {
    border: 1px solid #e9ecef;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.sub-items-table th {
    background-color: #f8f9fa;
    font-weight: bold;
}

.sub-items-table .sub-item-details div {
    margin-bottom: 3px;
}
.sub-items-table .sub-item-details div:last-child {
    margin-bottom: 0;
}

.sub-items-table .file-link a {
    color: #007bff;
    text-decoration: none;
}

.sub-items-table .file-link a:hover {
    text-decoration: underline;
}

.sub-items-table .no-file-text {
    color: #888;
    font-style: italic;
}

/* Category Tags for visual distinction */
.category-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
    white-space: nowrap;
}
.category-tag.category-content_item {
    background-color: #17a2b8; /* Info Blue */
}
.category-tag.category-emergency_purchase_for_lost_item {
    background-color: #ffc107; /* Warning Yellow */
    color: #333;
}
.category-tag.category-equipment_rental_for_lost_item {
    background-color: #6c757d; /* Secondary Grey */
}

.no-sub-items-message {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
    background-color: #f8f9fa;
    border-radius: 4px;
    margin-top: 15px;
}

/* New category tags for delay expenses */
.category-tag.category-expense-purchase {
    background-color: #fd7e14; /* Orange */
}

.category-tag.category-expense-rental {
    background-color: #20c997; /* Teal */
}

/* Styling for the total row in a table footer */
.table-total-row {
    background-color: #e9ecef; /* Light grey, same as header */
    font-weight: bold;
}

.table-total-row td {
    font-size: 1.05em;
    color: #333;
}

.table-total-row .total-label {
    text-align: right;
    padding-right: 10px;
}

/* Styling for the standalone summary card (used for Damaged Items total) */
.total-summary-card {
    display: flex;
    justify-content: space-between; /* Aligns content to the right */
    margin-top: 15px;
    padding: 15px;
    background-color: #e9ecef;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-weight: bold;
}

.total-summary-card .total-label {
    margin-right: 10px;
    font-size: 1.1em;
    color: #333;
}

.total-summary-card .total-value {
    font-size: 1.3em;
    color: #28a745; /* Green for positive total */
}

.table-total-row .total-value {
    font-size: 1.3em;
    color: #28a745; /* Green for positive total */
    text-align: left;
    padding-right: 0;
}

/* Styling for the conditionally shown "Other Person Details" section */
.other-person-details-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #e9ecef; /* A separator line */
    background-color: #e9ecef;
    padding: 10px;
}

.other-person-details-section h4 {
    font-size: 1.1em;
    color: #495057;
    margin-top: 0;
    margin-bottom: 15px;
}

/* Container for the file link and its hover preview */
.file-item-container {
    position: relative; /* This is the anchor for the absolute positioned tooltip */
    display: inline-block; /* Or block, depending on your layout */
    margin-bottom: 5px; /* Replaces margin on <li> if you had one */
}

/* The preview tooltip itself */
.file-preview-tooltip {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 100%; /* Position it above the link */
    left: 0;
    margin-bottom: 10px; /* Space between the link and the preview */
    z-index: 10; /* Ensure it's on top of other content */
    
    /* Tooltip appearance */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 5px;
    width: 200px; /* Set a fixed width for the preview container */
    height: auto;
}
/* Container to position the tooltip relative to */
.tooltip-container {
    position: relative;
    display: inline-block;
    margin-left: 8px; /* Adjust spacing from the label text */
    vertical-align: middle; /* Aligns the icon nicely with the text */
}

/* The info icon itself */
.info-icon {
    cursor: help;
    font-weight: bold;
    color: #2196F3;
    border: 1px solid #2196F3;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

/* The tooltip box that is hidden by default */
.tooltip-content {
    visibility: hidden;
    opacity: 0;
    width: 600px; /* Adjust width as needed */
    background-color: #ffffff;
    color: #333;
    border-radius: 8px;
    padding: 15px;
    position: absolute;
    z-index: 10;
    top: 140%; /* CHANGED: Position below the icon */
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: 1px solid #e0e0e0;
    transition: opacity 0.3s ease-in-out;
}

/* Simple arrow for the tooltip */
.tooltip-content::after {
    content: "";
    position: absolute;
    bottom: 100%; /* CHANGED: Position at the top of the tooltip box */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    /* CHANGED: Flipped the arrow to point upwards */
    border-color: transparent transparent #ffffff transparent;
}

/* Show the tooltip on hover */
.tooltip-container:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}

/* Styles for the content inside the tooltip */
.tooltip-title {
    font-weight: bold;
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 12px;
    text-align: left;
}

.tooltip-images {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.tooltip-images img {
    max-width: 48%;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.tooltip-text {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

/* Toggle Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #4CAF50; /* Green for 'Yes' */
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Verification Item Layout */
.verification-items {
    margin-top: 15px;
}

.verification-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.verification-item:last-child {
    border-bottom: none;
}

.verification-item span {
    font-size: 0.9em;
    font-weight: bold;
}

/* Status Alert Styles */
.verification-status-ok {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.verification-status-to_be_clarified {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

.verification-status-no_cover {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

/* Styles for Verification Sub-Card */
.verification-sub-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-top: 20px;
    background-color: #f9f9f9;
}

.verification-sub-card h4 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.original-amount {
    color: #777;
    font-size: 14px;
    margin-left: 10px;
}

.verification-input {
    max-width: 120px;
}

.verification-notes {
    margin-top: 10px;
}

/* Styles for Switch in Tables and Cards */
.switch-container {
    display: flex;
    align-items: center;
}

.switch-label {
    margin-left: 10px;
    font-weight: bold;
}

.switch-label.status-approved {
    color: #28a745;
}

.switch-label.status-rejected {
    color: #dc3545;
}

/* Add these new styles for the corrected layout */
.verification-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.verification-col {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.detail-item-static,
.detail-item-input {
    display: flex;
    flex-direction: column;
}

.detail-item-static .detail-label,
.detail-item-input .detail-label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
}

.detail-item-static .detail-value {
    font-size: 1.1em;
}
.bulk-actions-section {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 4px solid #007bff;
}

.bulk-actions-section .button {
    margin-right: 10px;
}

.sbb-container-admin .items-table input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
}

.sbb-container-admin .items-table th:first-child,
.sbb-container-admin .items-table td:first-child {
    width: 40px;
    text-align: center;
    vertical-align: middle;
}

@media (max-width: 640px) {
    .tooltip-content {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); 
        width: 90vw;
        max-width: 500px;
        max-height: 80vh;
        overflow-y: auto;
    }

    .tooltip-content::after {
        display: none;
    }


    .tooltip-images {
        flex-direction: column;
        align-items: center;
    }

    .tooltip-images img {
        max-width: 95%;
    }
}

/* The image inside the tooltip */
.file-preview-tooltip img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* Slightly rounded corners for the image */
}

/* Show the tooltip on hover of the container */
.file-item-container:hover .file-preview-tooltip {
    display: block;
}

/* Optional: Add a small arrow to the tooltip */
.file-preview-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 20px; /* Position the arrow */
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent; /* Arrow pointing down */
}

.custom-file-upload-ui {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px 12px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

.custom-file-upload-ui.input-error {
    border-color: #d9534f; /* Your error color */
}

.file-upload-button {
    background-color: #f0f0f0;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

.file-upload-button:hover {
    background-color: #e0e0e0;
}

.input-with-loader {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-loader input {
    width: 100%;
}

.loader-spinner {
    position: absolute;
    right: 10px;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    input, select {
        font-size: 14px;    
    }

    h2{
        font-size: 14px;
    }

    .sbb-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 5px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .form-row .form-group {
        width: 100%;
    }
    
    .logos {
        margin-top: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .sbb-logo {
        margin-left: 0;
    }
    
    .progress-steps {
        flex-direction: column;
        gap: 10px;
    }

    .select-title {
        width: 100%;
    }

    .step-label {
        font-size: 14px;
    }

 
    label {
        font-size: 14px;
    }

    table {
        font-size: 14px; 
    }
}


@media (max-width: 1100px) {

    .logos {
        margin-top: 20px;
    }
    
    .sbb-container {
        max-width: 90%;
        margin: 0 auto;
        padding: 5px;
    }
    .progress-steps {
        flex-direction: column;
        gap: 5px;
    }
}