body {
                font-family: "Segoe UI", sans-serif;
                background-color: #f2f2f2;
                margin: 0;
                padding: 0;
                color: #212529;
            }
            .menu-box {
                max-width: 600px;
                margin: 4em auto;
                background: white;
                padding: 2em;
                border-radius: 12px;
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
                text-align: center;
            }
            .form-logo {
                text-align: center;
                margin-top: 1em;
                margin-bottom: 2em;
            }
            .form-logo img {
                height: 150px;
                max-width: 100%;
            }
            button {
                padding: 0.6em 1.2em;
                font-size: 1em;
                border: none;
                background-color: #909090;
                color: white;
                border-radius: 6px;
                cursor: pointer;
                margin: 0.5em 0;
                width: 100%;
                transition: background-color 0.3s ease;
            }
            button:hover {
                background-color: #7a7a7a;
            }
            input[type="text"],
            input[type="password"] {
                width: 100%;
                padding: 0.75em;
                font-size: 1rem;
                margin-top: 0.25em;
                border: 1px solid #ccc;
                border-radius: 4px;
                box-sizing: border-box;
            }
            label {
                display: block;
                margin-bottom: 1.5em;
                font-size: 1rem;
                text-align: left;
            }
            .toast {
                visibility: hidden;
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                padding: 16px 24px;
                border-radius: 6px;
                font-size: 1rem;
                opacity: 0;
                transition: opacity 0.5s ease, visibility 0.5s ease;
                z-index: 1000;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
                color: #fff;
            }
            .toast.show {
                visibility: visible;
                opacity: 1;
            }
            .toast.success {
                background-color: #2e7d32;
            }
            .toast.error {
                background-color: #c62828;
            }

            /* Ticket Styles */
            .status-badge {
                display: inline-block;
                padding: 0.35em 0.75em;
                border-radius: 20px;
                font-size: 0.9em;
                font-weight: bold;
                color: white;
            }
            .status-open {
                background-color: #0288d1;
            }
            .status-in-progress {
                background-color: #0288d1;
                color: black;
            }
            .status-closed {
                background-color: #388e3c;
            }
            .status-other {
                background-color: #757575;
            }
            .status-pending {
                background-color: #e53935;
            }
            .status-forward-to-vendor {
                background-color: #f0aa0a;
                color: white;
            }

            .nav-buttons {
                display: flex;
                gap: 0.5em;
                align-items: center;
            }

            .nav-buttons button {
                background: none;
                border: none;
                padding: 0.25em;
                cursor: pointer;
            }

            .nav-buttons svg {
                width: 1.5rem;
                height: 1.5rem;
                stroke: #1976d2; /* adjust to your theme color */
            }

            button#homeBtnTenant,
            button#refreshBtnTenant {
                background: none;
                border: none;
                font-size: 1.5em;
                color: #1976d2; /* or white for dark mode */
                cursor: pointer;
                padding: 0;
                margin: 0;
                width: 32px;
                height: 32px;
                line-height: 1;
            }

            button#homeBtnTenant:hover,
            button#refreshBtnTenant:hover {
                background: none;
            }

            button#homeBtn,
            button#refreshBtn {
                background: none;
                border: none;
                font-size: 1.5em;
                color: #1976d2;
                cursor: pointer;
                padding: 0;
                margin: 0;
                width: 32px;
                height: 32px;
                line-height: 1;
            }
            #refreshBtn:hover,
            #homeBtn:hover {
                background: none;
            }

            @media (max-width: 600px) {
                #refreshBtn,
                #homeBtn {
                    width: 48px !important;
                    height: 48px !important;
                    font-size: 1.8em !important;
                }
            }
            .button-group {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                gap: 0.5em;
                margin: 1em 0;
            }
            textarea {
                font-size: 0.95em;
                border: 1px solid #ccc;
                border-radius: 6px;
                box-sizing: border-box;
            }
            /* Vendor-modal overlay */
            #vendorModal .modal-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
            }
            #vendorModal .modal-content {
                background: #fff;
                padding: 1.5rem;
                border-radius: 8px;
                max-width: 320px;
                width: 100%;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            }
            #vendorModal label {
                display: block;
                margin-top: 0.75rem;
            }
            #vendorModal select,
            #vendorModal textarea {
                width: 100%;
                margin-top: 0.25rem;
                padding: 0.5rem;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            #vendorModal .modal-actions {
                margin-top: 1rem;
                text-align: right;
            }
            #vendorModal button {
                margin-left: 0.5rem;
                padding: 0.5rem 1rem;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            /* Manager‐modal overlay */
            #managerModal .modal-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
            }
            #managerModal .modal-content {
                background: #fff;
                padding: 1.5rem;
                border-radius: 8px;
                max-width: 320px;
                width: 100%;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            }
            #managerModal label {
                display: block;
                margin-top: 0.75rem;
            }
            #managerModal textarea {
                width: 100%;
                margin-top: 0.25rem;
                padding: 0.5rem;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            #managerModal .modal-actions {
                margin-top: 1rem;
                text-align: right;
            }
            #managerModal button {
                margin-left: 0.5rem;
                padding: 0.5rem 1rem;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            /* Notes Modal */
            #notesModal .modal-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1000;
            }
            #notesModal .modal-content {
                background: #fff;
                padding: 1.5rem;
                border-radius: 8px;
                max-width: 400px;
                width: 100%;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            }
            #notesModal h3 {
                margin-top: 0;
            }
            #notesModal p {
                margin: 0.5em 0;
            }
            #notesModal .note-item {
                margin: 0.75em 0;
                padding: 0.5em;
                border-left: 3px solid #1976d2;
                background: #f9f9f9;
            }
            #notesModal .modal-actions {
                text-align: right;
                margin-top: 1em;
            }
            #notesModal .modal-actions button {
                padding: 0.5em 1em;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            /* ────────────────────────────────────────────────────────── */
            /* Reports table styling */
            #reportsMenu table {
                width: 100%;
                border-collapse: collapse;
                margin-top: 1em;
            }
            #reportsMenu th,
            #reportsMenu td {
                border: 1px solid #ddd;
                padding: 0.75em;
            }
            #reportsMenu th {
                background-color: #1976d2;
                color: white;
                text-align: left;
            }
            #reportsMenu tr:nth-child(even) {
                background-color: #f9f9f9;
            }
            /* ────────────────────────────────────────────────────────── */
            /* Button styling – optional */
            #printButton {
                margin: 1em 0;
                padding: 0.5em 1em;
                font-size: 1rem;
            }

            /* When printing… */
            @media print {
                /* 1. Set landscape orientation */
                @page {
                    size: landscape;
                    margin: 1cm;
                }

                /* 2. Hide all page elements… */
                body * {
                    visibility: hidden;
                }
                /* 3. …except the reportContainer and its contents */
                #reportContainer,
                #reportContainer * {
                    visibility: visible;
                }
                /* 4. Position the report at top-left for printing */
                #reportContainer {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                }
            }
			 /* Print styles for better alignment and presentation */
    @media print {
        body {
            font-family: Arial, sans-serif;
        }

        #reportTable {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        #reportTable th, #reportTable td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        #reportTable th {
            background-color: #f2f2f2;
        }

        /* Ensure the table doesn't overflow */
        table {
            table-layout: fixed;
        }
    }
	/* Style for image icons */
.attachment-icon {
    width: 30px;
    height: 30px;
    border: none; /* Removes border */
    background-color: transparent; /* Ensures no background color */
    display: inline-block; /* Ensures the image is inline */
    cursor: pointer; /* Adds a pointer cursor to the image */
    transition: transform 0.2s ease-in-out; /* Adds a smooth transition */
}

.attachment-icon:hover {
    transform: scale(1.2); /* Adds hover effect to make the icon slightly larger */
}

/* Modal overlay + centering */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Modal box */
.modal-content {
  background: #fff;
  padding: 1.5em;
  border-radius: 6px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

/* two rows of three buttons in ticket view */
.button-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
  margin-top: 1em;
}

/* ensure buttons fill their grid cell */
.button-container button {
  margin: 0;
  width: 100%;
}
/* Mobile-friendly adjustments */
@media (max-width: 600px) {
  /* 1. Shrink the white “card” containers */
  .menu-box {
    margin: 1em;
    padding: 1em;
  }

  /* 2. Stack the six action buttons into one full-width column */
  .button-container {
    grid-template-columns: 1fr !important;
  }

  /* 3. Enlarge touch targets */
  button {
    padding: 1em;
    font-size: 1.1rem;
  }

  /* 4. Space out the ticket nav arrows */
  .nav-buttons {
    justify-content: space-around;
  }
  .nav-buttons svg {
    width: 2rem;
    height: 2rem;
  }

  /* 5. Tweak top-left icon container so it’s inboard on phones */
  #topButtonContainer {
    top: 8px !important;
    left: 8px !important;
  }

  /* 6. Make the directory table scroll instead of squashing */
  #tenantDirectoryScreen table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}
/* ─── Profile Modal: tighten label ↔ input spacing ─────────────────── */
#profileModal .form-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;    /* spacing between rows */
}

#profileModal .form-row label {
  /* make the label only as wide as it needs to be */
  display: inline-block;
  width: auto;
  margin: 0;
  margin-right: 0.5rem;      /* gap between label and field */
  text-align: right;
  white-space: nowrap;       /* prevent wrapping */
}

#profileModal .form-row input,
#profileModal .form-row select {
  flex: 1;                   /* fill remaining space */
  margin: 0;
  padding: 0.5rem;
  box-sizing: border-box;
}
/* ======================================================
   FLOATING FIELD SYSTEM (UPDATED)
   - Lowers typed text (more top padding)
   - Adjusts label resting + floated positions
====================================================== */

.float-field {
  position: relative;
  margin: 0 0 1rem 0;
  text-align: left;
}

.float-field input,
.float-field select,
.float-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cfd4dc;
  border-radius: 10px;
  background: #fff;

  font-size: 1rem;
  line-height: 1.25;           /* ✅ keeps text vertically balanced */

  /* ✅ lowered text: more top padding */
  padding: 22px 12px 12px;      /* top / left-right / bottom */

  outline: none;
}

.float-field textarea {
  min-height: 110px;
  resize: vertical;
}

.float-field label {
  position: absolute;
  left: 12px;

  /* ✅ resting label a touch lower */
  top: 16px;

  padding: 0 6px;
  background: #fff;
  color: #6b7280;
  pointer-events: none;

  transition: transform 140ms ease, top 140ms ease, font-size 140ms ease, color 140ms ease;
}

/* INPUT/TEXTAREA: float when focused or when not placeholder-shown */
.float-field input:focus + label,
.float-field textarea:focus + label,
.float-field input:not(:placeholder-shown) + label,
.float-field textarea:not(:placeholder-shown) + label {
  /* ✅ floated label slightly lower than before */
  top: -4px;

  transform: translateY(0);
  font-size: 0.78rem;
  color: #111827;
}

/* SELECT: float when wrapper has-value, or select is focused */
.float-field.has-value label,
.float-field select:focus + label {
  top: -4px;
  font-size: 0.78rem;
  color: #111827;
}

/* Optional: focus ring */
.float-field input:focus,
.float-field select:focus,
.float-field textarea:focus {
  border-color: #1976d2;
}