/* ==================== Global Styles ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #2563eb;
  --primary-dark: #1e40af;
  --primary-light: #3b82f6;
  --secondary-color: #64748b;
  --success-color: #10b981;
  --danger-color: #ef4444;
  --warning-color: #f59e0b;
  --light-bg: #f8fafc;
  --white: #ffffff;
  --border-color: #e2e8f0;
  --text-dark: #1e293b;
  --text-light: #64748b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background-color: var(--light-bg);
  color: var(--text-dark);
  line-height: 1.6;
}

/* ==================== Layout ==================== */
.container {
  display: flex;
  height: 100vh;
  background-color: var(--light-bg);
}

.sidebar {
  width: 260px;
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-dark) 100%
  );
  color: white;
  padding: 30px 0;
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 1000;
}

.logo {
  padding: 0 20px 30px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 30px;
}

.logo-img {
  display: block;
  max-width: 100%;
  height: 48px;
  width: auto;
  margin-bottom: 10px;
}

.logo h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 5px;
  letter-spacing: -0.5px;
}

.logo p {
  font-size: 12px;
  opacity: 0.9;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 15px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 15px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
  font-size: 14px;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  transform: translateX(5px);
}

.nav-item.active {
  background-color: rgba(255, 255, 255, 0.25);
  color: white;
  border-left: 4px solid white;
  padding-left: 11px;
}

.nav-item .icon {
  font-size: 20px;
}

.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  margin-top: 20px;
  padding: 15px 15px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
  font-size: 14px;
  font-family: inherit;
}

.sidebar-logout:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.sidebar-logout .icon {
  font-size: 20px;
}

.main-content {
  margin-left: 260px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.header {
  background-color: white;
  padding: 30px;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.header-title h2 {
  font-size: 28px;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.header-title p {
  color: var(--text-light);
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 15px;
}

.content-area {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
}

.tab-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== Stats Grid ==================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: var(--transition);
  border: 1px solid var(--border-color);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.stat-icon {
  font-size: 48px;
  line-height: 1;
}

.stat-info {
  flex: 1;
}

.stat-label {
  color: var(--text-light);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary-color);
}

/* ==================== Card Component ==================== */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  border-bottom: 1px solid var(--border-color);
  gap: 20px;
}

.card-header h3 {
  font-size: 18px;
  color: var(--text-dark);
  margin: 0;
}

.search-box {
  flex: 1;
  max-width: 300px;
  position: relative;
}

.search-box input {
  width: 100%;
  padding: 10px 32px 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  transition: var(--transition);
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-clear-btn {
  display: none;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--text-light);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}

.search-clear-btn.show {
  display: block;
}

.search-clear-btn:hover {
  background-color: var(--border-color);
  color: var(--text-dark);
}

.search-result-count {
  font-size: 13px;
  color: var(--text-light);
  white-space: nowrap;
}

.card-body {
  padding: 0;
  overflow-x: auto;
}

/* ==================== Table ==================== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table thead {
  background-color: var(--light-bg);
  border-bottom: 2px solid var(--border-color);
}

.table th {
  padding: 15px 20px;
  text-align: left;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-dark);
}

.table tbody tr {
  transition: var(--transition);
}

.table tbody tr:hover {
  background-color: var(--light-bg);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table .empty-state {
  text-align: center;
  color: var(--text-light);
  padding: 60px 20px !important;
}

/* The invoices table has more columns than any other list in the app
   (Invoice #, Owner, Hotel(s), Issue Date, Due Date, Total, Paid, Due,
   Status, Email, Actions) — at the default table padding/badge sizing used
   everywhere else, it overflows a normal window width and forces the
   operator to scroll sideways just to see the Actions column. Tightening
   spacing here (only here — every other table keeps the roomier default)
   is what actually buys back that width, more so than shrinking any one
   column alone would. */
#invoices-container .table th {
  padding: 12px 10px;
  font-size: 11px;
}

#invoices-container .table td {
  padding: 10px 10px;
  font-size: 13px;
}

#invoices-container .owner-tag {
  padding: 4px 8px;
  font-size: 12px;
  max-width: 140px;
}

#invoices-container .status-badge {
  padding: 4px 8px;
  font-size: 11px;
}

#invoices-container .status-select {
  padding-right: 20px;
  background-position: right 6px center;
}

#invoices-container .action-buttons {
  gap: 6px;
}

#invoices-container .btn-icon {
  width: 30px;
  height: 30px;
  font-size: 14px;
}

/* Invoices now has 5 stat cards (Total, Unpaid, Partially Paid, Paid,
   Overdue) — one more than every other tab's stats-grid — so the shared
   minmax(250px, 1fr) tracks wrap it to two rows on a normal window width.
   Shrinking the card padding/icon/value size (scoped to this tab only)
   brings each card's minimum width down enough that all 5 fit on one row. */
#invoices-tab .stats-grid {
  grid-template-columns: repeat(5, 1fr);
}

#invoices-tab .stat-card {
  padding: 16px;
  gap: 12px;
}

#invoices-tab .stat-icon {
  font-size: 32px;
}

#invoices-tab .stat-label {
  font-size: 11px;
  margin-bottom: 4px;
}

#invoices-tab .stat-value {
  font-size: 24px;
}

@media (max-width: 1100px) {
  #invoices-tab .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* Status Badge */
.status-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

.status-badge.active {
  background-color: #d1fae5;
  color: #065f46;
}

.status-badge.inactive {
  background-color: #fee2e2;
  color: #7f1d1d;
}

.status-badge.paused {
  background-color: #fef3c7;
  color: #92400e;
}

.status-badge.unpaid {
  background-color: #fef3c7;
  color: #92400e;
}

.status-badge.partially_paid {
  background-color: #dbeafe;
  color: #1e40af;
}

.status-badge.paid {
  background-color: #d1fae5;
  color: #065f46;
}

.status-badge.overdue {
  background-color: #fee2e2;
  color: #7f1d1d;
}

.status-badge.void {
  background-color: #e2e8f0;
  color: #475569;
}

.status-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23000' fill-opacity='0.45' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 7px;
}

.status-select:disabled {
  cursor: wait;
  opacity: 0.7;
}

.inline-vat-input {
  width: 64px;
  padding: 4px 6px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}

.inline-vat-input:disabled {
  cursor: wait;
  opacity: 0.7;
}

/* Compact ▲▼ spinner next to a Quantity/Rate/Discount/VAT text input — these
   fields are type="text" (see stageLiveInput's comment for why: cursor
   position needs to survive a live re-render, which type="number" doesn't
   support), so they lost the browser's own spinner arrows. This restores a
   click target for the same increment/decrement the Up/Down keys already do. */
.value-spinner {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  margin-left: 2px;
}

.value-spinner-btn {
  width: 13px;
  height: 9px;
  line-height: 1;
  font-size: 6px;
  padding: 0;
  border: 1px solid var(--border-color);
  background: var(--light-bg);
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.value-spinner-btn:hover {
  background: var(--primary-light);
  color: white;
  border-color: var(--primary-light);
}

.value-spinner-btn:first-child {
  border-bottom: none;
  border-radius: 2px 2px 0 0;
}

.value-spinner-btn:last-child {
  border-radius: 0 0 2px 2px;
}

/* Owner Tag (for hotel list) */
.owner-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background-color: var(--primary-light);
  color: white;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--transition);
}

.owner-tag:hover {
  background-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

/* Action Buttons in Table */
.action-buttons {
  display: flex;
  gap: 10px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-edit {
  background-color: #e0f2fe;
  color: #0369a1;
}

.btn-edit:hover {
  background-color: #bae6fd;
  transform: scale(1.1);
}

.btn-delete {
  background-color: #fee2e2;
  color: #991b1b;
}

.btn-delete:hover {
  background-color: #fecaca;
  transform: scale(1.1);
}

/* ==================== Buttons ==================== */
.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary {
  background-color: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: var(--light-bg);
  color: var(--text-dark);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background-color: var(--border-color);
  box-shadow: var(--shadow-sm);
}

.btn-danger {
  background-color: var(--danger-color);
  color: white;
}

.btn-danger:hover {
  background-color: #dc2626;
  box-shadow: var(--shadow-md);
}

.btn .icon {
  font-size: 16px;
}

/* ==================== Forms ==================== */
.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-dark);
  font-size: 14px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: var(--transition);
  background-color: white;
  color: var(--text-dark);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* A service the hotel already subscribes to, greyed out in the Add Service
   dropdown so it reads as unavailable rather than just another choice. */
.form-group select option:disabled {
  color: var(--text-light);
  opacity: 0.6;
}

.form-group input.input-error {
  border-color: var(--danger-color);
}

.form-group input.input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.field-error {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: var(--danger-color);
}

.field-error.show {
  display: block;
}

.form-group textarea {
  resize: vertical;
  font-family: inherit;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 30px;
}

/* Shared "compact form" treatment, opt-in per modal via the
   .compact-form-modal class on .modal-content — for forms with more fields
   than fit comfortably as plain stacked .form-groups (which would run past
   90vh and need scrolling just to reach Save/Cancel). Pairs related fields
   onto .form-row rows and tightens vertical spacing; doesn't touch the
   shared .form-group styling every other modal still uses as-is. Width is
   set per modal below since how many columns make sense differs by form. */
.compact-form-modal .form-row {
  display: flex;
  gap: 12px;
}

.compact-form-modal .form-row .form-group {
  flex: 1;
  min-width: 0;
}

.compact-form-modal .form-group {
  margin-bottom: 14px;
}

.compact-form-modal .form-group label {
  margin-bottom: 5px;
}

.compact-form-modal .form-group input,
.compact-form-modal .form-group select {
  padding: 9px 12px;
}

#hotel-service-modal .modal-content {
  max-width: 640px;
}

#owner-modal .modal-content {
  max-width: 560px;
}

#hotel-service-modal .form-actions {
  margin-top: 18px;
}

/* ==================== Modal ==================== */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.modal.show {
  display: flex;
}

/* A confirm-delete dialog can be opened from inside another already-open
   modal (e.g. Delete from within an invoice's detail view) — since both
   share the same z-index, whichever is later in the DOM would otherwise win
   regardless of which was opened more recently, hiding the confirmation
   behind the modal it was opened from. Always keep it on top. */
.modal:has(.confirm-modal) {
  z-index: 2100;
}

.modal-content {
  background-color: white;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
  font-size: 20px;
  color: var(--text-dark);
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--text-light);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: var(--transition);
}

.close-btn:hover {
  background-color: var(--light-bg);
  color: var(--text-dark);
}

.modal-body {
  padding: 25px;
}

.wide-modal-content {
  max-width: 800px;
}

/* The invoice detail modal's line items table has more columns than the
   shared 800px .wide-modal-content comfortably fits (Discount/VAT amounts
   and a Payable total, on top of everything already there) — widened just
   for this modal rather than the class shared with Generate Invoices. */
#invoice-detail-modal .modal-content {
  max-width: 1060px;
}

.invoice-detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 25px 20px;
  border-bottom: 1px solid var(--border-color);
}

.modal-footer {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  padding: 25px;
  border-top: 1px solid var(--border-color);
}

#owner-form {
  padding: 25px;
}

.confirm-modal .modal-content {
  max-width: 400px;
}

.confirm-modal .modal-body {
  text-align: center;
  padding: 40px 25px;
}

.confirm-modal .modal-body p {
  margin-bottom: 10px;
  font-size: 16px;
  color: var(--text-dark);
}

.warning-text {
  color: var(--danger-color);
  font-size: 13px;
  font-weight: 600;
}

/* ==================== Toast Notifications ==================== */
.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: white;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 16px 24px;
  min-width: 300px;
  z-index: 3000;
  display: none;
  animation: slideRight 0.3s ease;
  border-left: 4px solid var(--primary-color);
}

.toast.show {
  display: block;
}

.toast.success {
  border-left-color: var(--success-color);
}

.toast.error {
  border-left-color: var(--danger-color);
}

.toast.warning {
  border-left-color: var(--warning-color);
}

@keyframes slideRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ==================== Coming Soon ==================== */
.coming-soon {
  text-align: center;
  padding: 100px 30px;
  color: var(--text-light);
}

.coming-soon .icon {
  font-size: 80px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.coming-soon h3 {
  font-size: 24px;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.coming-soon p {
  font-size: 16px;
}

/* ==================== Owner Detail View ==================== */
.owner-detail-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeIn 0.3s ease;
}

.hidden {
  display: none;
}

.owner-detail-view.hidden {
  display: none;
}

#owners-list-view.hidden {
  display: none;
}

#hotels-list-view.hidden {
  display: none;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.btn-back {
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 8px;
  transition: var(--transition);
}

.btn-back:hover {
  background-color: #f0f9ff;
  color: var(--primary-dark);
  transform: translateX(-4px);
}

.detail-actions {
  display: flex;
  gap: 12px;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-card {
  background: var(--white);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.detail-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border-color);
}

.detail-card-header h2 {
  font-size: 24px;
  color: var(--text-dark);
  margin: 0;
}

.detail-card-header h3 {
  font-size: 18px;
  color: var(--text-dark);
  margin: 0;
}

.detail-card-header .status-badge {
  align-self: flex-start;
  margin-left: 12px;
}

.badge {
  display: inline-block;
  background-color: var(--primary-color);
  color: white;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Compact summary grid for the Invoice Detail modal — a single light panel
   holding many short fields, instead of one big bordered card per field. */
.invoice-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 16px;
  padding: 12px 16px;
  background: var(--light-bg);
  border-radius: 8px;
}

.invoice-summary-item label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.invoice-summary-item p {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  word-break: break-word;
  margin: 0;
}

/* The line items table has grown wide (Discount/VAT are now edit controls,
   not just text) — scope the overflow to just this table rather than
   letting it force the whole modal wider or clip content. Everything below
   trims each column's own footprint so VAT fits on screen without needing
   that scroll in the first place, on all but the widest rows. */
#invoice-line-items-container {
  overflow-x: auto;
}

#invoice-line-items-container .table {
  font-size: 12px;
}

#invoice-line-items-container .table th,
#invoice-line-items-container .table td {
  padding: 6px 8px;
  vertical-align: top;
}

#invoice-line-items-container .owner-tag {
  padding: 3px 8px;
  font-size: 11px;
  max-width: 130px;
}

#invoice-line-items-container .inline-vat-input {
  width: 44px;
  font-size: 11px;
  padding: 3px 4px;
}

/* Same compact per-line VAT/Discount editing table as the invoice detail
   modal's line items, reused here so a bulk generation run gets the same
   configuration ability instead of one blanket discount for every line. */
#generate-preview-container .table {
  font-size: 12px;
}

#generate-preview-container .table th,
#generate-preview-container .table td {
  padding: 6px 8px;
  vertical-align: top;
}

#generate-preview-container .inline-vat-input {
  width: 44px;
  font-size: 11px;
  padding: 3px 4px;
}

/* Compact variant of the standard .form-group/.btn look, scoped to the
   Add Line Item / Record Payment / Status+Due Date sections of the invoice
   detail modal — same fields, far less vertical space per field, so the
   whole modal reads as one dense editor instead of a stack of card-like
   sections. Doesn't touch the shared .form-group styling used elsewhere. */
.invoice-compact-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.invoice-compact-section h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-light);
  margin: 0 0 8px;
}

.invoice-compact-section .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.invoice-compact-section .form-group {
  margin-bottom: 8px;
  flex: 1;
  min-width: 100px;
  max-width: 180px;
}

.invoice-compact-section .form-group label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-light);
  margin-bottom: 3px;
}

.invoice-compact-section .form-group input,
.invoice-compact-section .form-group select {
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 6px;
}

.invoice-compact-section .form-actions {
  margin-top: 8px;
  gap: 8px;
}

.invoice-compact-section .btn {
  padding: 7px 14px;
  font-size: 13px;
}

.invoice-compact-section .add-line-item-tabs {
  margin-bottom: 10px !important;
}

.invoice-compact-section .add-line-item-tabs .btn {
  padding: 6px 12px;
  font-size: 12px;
}

/* One-click %/Flat toggle used everywhere a discount type is chosen
   (Generate Invoices, One-time Invoice, Add Line Item) — replaces a
   None/Percent/Flat dropdown, since a 0 value already means "no discount"
   regardless of which type is selected, so there's no separate "none"
   state to pick. Sized to match the standard .form-group input/select it
   stands in for. */
.discount-type-toggle {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background-color: white;
  color: var(--text-dark);
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}

.discount-type-toggle:hover {
  border-color: var(--primary-color);
}

.invoice-compact-section .form-row-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 8px;
  flex: 0 0 auto;
}

.info-item {
  padding: 16px;
  background: var(--light-bg);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
}

.info-item label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.info-item p {
  font-size: 15px;
  color: var(--text-dark);
  word-break: break-word;
  margin: 0;
}

/* Owner Hotels List */
#owner-hotels-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.hotel-card {
  padding: 16px;
  background: var(--light-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  transition: var(--transition);
}

.hotel-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--primary-color);
}

.hotel-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.hotel-card-info {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
}

.hotel-card-info strong {
  color: var(--text-dark);
}

.hotel-card-address {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.table tbody tr {
  cursor: pointer;
  transition: var(--transition);
}

.table tbody tr:hover {
  background-color: #f0f9ff;
}

/* ==================== Responsive Design ==================== */
@media (max-width: 1024px) {
  .sidebar {
    width: 200px;
  }

  .main-content {
    margin-left: 200px;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    padding: 20px 0;
  }

  .logo {
    padding: 0 20px 20px;
  }

  .nav-menu {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 10px;
  }

  .nav-item {
    flex: 1;
    min-width: 120px;
    padding: 12px 10px;
    justify-content: center;
    text-align: center;
  }

  .main-content {
    margin-left: 0;
  }

  .header {
    padding: 20px;
  }

  .header-title h2 {
    font-size: 24px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-box {
    max-width: 100%;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .table {
    font-size: 12px;
  }

  .table th,
  .table td {
    padding: 12px 10px;
  }

  .action-buttons {
    flex-wrap: wrap;
  }

  .modal-content {
    width: 95%;
    max-width: 95%;
  }

  .toast {
    bottom: 15px;
    right: 15px;
    left: 15px;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .header-title h2 {
    font-size: 20px;
  }

  .btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  .table {
    font-size: 11px;
  }

  .table th,
  .table td {
    padding: 8px 5px;
  }

  .status-badge {
    padding: 4px 8px;
    font-size: 11px;
  }

  .form-group {
    margin-bottom: 18px;
  }
}
/* ==================== Mobile Application Shell ==================== */
.header-leading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.mobile-menu-btn,
.mobile-nav-overlay {
  display: none;
}

@media (max-width: 768px) {
  html,
  body {
    min-height: 100%;
    overflow-x: hidden;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  .container {
    display: block;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(82vw, 300px);
    height: 100vh;
    height: 100dvh;
    padding: 22px 0;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 0.24s ease;
    z-index: 1600;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .sidebar .logo {
    padding: 0 20px 20px;
    margin-bottom: 18px;
  }

  .sidebar .logo-img {
    height: 40px;
  }

  .sidebar .nav-menu {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 5px;
    padding: 0 12px;
  }

  .sidebar .nav-item {
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px 14px;
    justify-content: flex-start;
    text-align: left;
  }

  .sidebar .nav-item:hover {
    transform: none;
  }

  .sidebar-logout {
    min-height: 48px;
    padding: 12px 14px;
  }

  .mobile-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.52);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.2s ease,
      visibility 0.2s ease;
    z-index: 1500;
  }

  body.mobile-nav-open .mobile-nav-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-menu-btn {
    display: inline-flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--white);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    color: var(--text-dark);
    cursor: pointer;
  }

  .mobile-menu-btn span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  .main-content {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin-left: 0;
    overflow: visible;
  }

  .header {
    position: sticky;
    top: 0;
    z-index: 900;
    padding: 12px 16px;
    gap: 12px;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.97);
  }

  .header-leading {
    width: 100%;
  }

  .header-title {
    min-width: 0;
  }

  .header-title h2 {
    overflow: hidden;
    font-size: 21px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-title p {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 8px;
  }

  .header-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .content-area {
    padding: 16px;
    overflow: visible;
  }

  .stats-grid,
  #invoices-tab .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
  }

  .stat-card,
  #invoices-tab .stat-card {
    min-width: 0;
    padding: 14px;
    gap: 10px;
    border-radius: 10px;
  }

  .stat-card:hover {
    transform: none;
  }

  .stat-icon,
  #invoices-tab .stat-icon {
    font-size: 28px;
  }

  .stat-label,
  #invoices-tab .stat-label {
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: 3px;
  }

  .stat-value,
  #invoices-tab .stat-value {
    font-size: 23px;
    line-height: 1.1;
  }

  .card {
    max-width: 100%;
    border-radius: 10px;
  }

  .card-header {
    padding: 16px;
    gap: 12px;
  }

  .card-header h3 {
    font-size: 17px;
  }

  .card-header > div[style*="display: flex"] {
    width: 100%;
    flex-wrap: wrap;
  }

  .search-box {
    width: 100%;
    max-width: none;
  }

  .search-box input,
  .form-group input,
  .form-group textarea,
  .form-group select,
  .discount-type-toggle {
    min-height: 44px;
    font-size: 16px;
  }

  .card-body,
  .owners-table-wrapper,
  .hotels-table-wrapper,
  .services-table-wrapper,
  .invoices-table-wrapper,
  #invoice-line-items-container,
  #generate-preview-container {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .table {
    min-width: 760px;
    font-size: 13px;
  }

  #invoices-container .table {
    min-width: 1080px;
  }

  #invoice-line-items-container .table,
  #generate-preview-container .table {
    min-width: 900px;
  }

  .table th,
  .table td,
  #invoices-container .table th,
  #invoices-container .table td {
    padding: 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .table td {
    white-space: normal;
  }

  .table .empty-state {
    padding: 36px 16px !important;
  }

  .btn,
  .btn-back,
  .close-btn,
  .btn-icon,
  .search-clear-btn,
  .select-clear-btn {
    min-height: 44px;
  }

  .detail-header {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
    gap: 12px;
  }

  .btn-back {
    align-self: flex-start;
    padding: 10px 8px;
  }

  .detail-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .detail-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .detail-content,
  .owner-detail-view {
    gap: 16px;
  }

  .detail-card {
    padding: 16px;
  }

  .detail-card-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .detail-card-header h2 {
    font-size: 21px;
  }

  .detail-card-header > div[style*="display: flex"] {
    width: 100%;
    flex-wrap: wrap;
  }

  .detail-info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #owner-hotels-container {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal {
    align-items: flex-end;
    padding: 0;
  }

  .modal-content,
  .wide-modal-content,
  #invoice-detail-modal .modal-content,
  #hotel-service-modal .modal-content,
  #owner-modal .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    margin: 0;
    border-radius: 16px 16px 0 0;
    animation: slideUp 0.22s ease;
  }

  .modal-header {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 16px;
    background: var(--white);
  }

  .modal-header h2 {
    font-size: 18px;
    line-height: 1.3;
  }

  .modal-body,
  #owner-form {
    padding: 16px;
  }

  .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    gap: 8px;
    background: var(--white);
  }

  .modal-footer .btn,
  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
  }

  .compact-form-modal .form-row,
  .invoice-compact-section .form-row,
  .modal-body > div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .compact-form-modal .form-row .form-group,
  .invoice-compact-section .form-group,
  .modal-body > div[style*="display: flex"] > .form-group {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex-basis: auto !important;
  }

  .form-group {
    margin-bottom: 16px;
  }

  .invoice-detail-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 16px 14px;
    gap: 8px;
  }

  .invoice-detail-toolbar .btn {
    width: 100%;
    justify-content: center;
  }

  .invoice-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
    gap: 10px;
  }

  .invoice-compact-section .form-row-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin-bottom: 8px;
  }

  .invoice-compact-section .form-row-actions .btn {
    width: 100%;
  }

  .toast {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .content-area {
    padding: 12px;
  }

  .header {
    padding: 10px 12px;
  }

  .stats-grid,
  #invoices-tab .stats-grid {
    gap: 8px;
  }

  .stat-card,
  #invoices-tab .stat-card {
    padding: 12px 10px;
  }

  .stat-icon,
  #invoices-tab .stat-icon {
    font-size: 24px;
  }

  .stat-label,
  #invoices-tab .stat-label {
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
  }

  .stat-value,
  #invoices-tab .stat-value {
    font-size: 21px;
  }

  .card-header {
    padding: 14px;
  }

  .modal-footer,
  .form-actions,
  .invoice-detail-toolbar {
    grid-template-columns: 1fr;
  }

  .invoice-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 360px) {
  .stats-grid,
  #invoices-tab .stats-grid,
  .invoice-summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .mobile-nav-overlay,
  .tab-content,
  .modal-content {
    animation: none;
    transition: none;
  }
}