/* ═══ Style Block 1 ═══ */
.checklist-admin-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 40px 64px;
}

.ll-header-user {
  gap: 10px;
}

.ll-header-notifications-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.14s, box-shadow 0.18s;
}

.ll-header-notifications-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
  transform: scale(1.03);
}

.ll-header-notifications-ico {
  font-size: 18px;
  line-height: 1;
}

.ll-header-notifications-count,
.ll-notification-nav-count,
.sc-chat-nav-badge,
.sc-chat-nav-badge-mobile {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px !important;
  background: linear-gradient(135deg, #f46e5d, #d62c4f);
  color: #fff;
  font-size: 10px !important;
  font-weight: 700;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 10px 18px rgba(214, 44, 79, 0.24);
}

.ll-header-notifications-count {
  position: absolute;
  top: -7px;
  right: -7px;
}

.nav-tab .ll-notification-nav-count,
.nav-tab .sc-chat-nav-badge {
  margin-top: 0;
}

.nav-tab-has-badge .ll-notification-nav-count,
.nav-tab-has-badge .sc-chat-nav-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  z-index: 1;
}

.mobile-nav-drawer-btn .ll-notification-nav-count,
.mobile-nav-drawer-btn .sc-chat-nav-badge-mobile {
  margin-left: auto;
}

body.page-checklist-settings #header,
body.page-portal-bridal-checklist #header {
  background: linear-gradient(180deg, rgba(31, 63, 110, 0.96) 0%, rgba(22, 45, 78, 0.98) 100%);
  border-bottom-color: rgba(188, 208, 238, 0.38);
}

#checklist-settings-body,
#portal-bridal-checklist-body,
#portal-bridal-checklist-body,
#portal-bridal-checklist-body {
  background:
    radial-gradient(circle at top left, rgba(219, 226, 206, 0.65), transparent 32%),
    linear-gradient(180deg, #edf4fc 0%, #f3f8fd 100%);
  min-height: calc(100vh - 150px);
}

.checklist-admin-hero {
  margin-bottom: 24px;
}

.checklist-admin-kicker {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a8ea4;
  font-weight: 600;
  margin-bottom: 8px;
}

.checklist-admin-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 40px;
  line-height: 1.05;
  color: #1a2232;
  font-weight: 500;
}

.checklist-admin-sub {
  margin-top: 10px;
  font-size: 14px;
  color: #5a6c7e;
  line-height: 1.7;
  max-width: 760px;
}

.checklist-admin-status {
  min-height: 22px;
  margin-bottom: 18px;
  font-size: 12px;
  color: #627287;
}

.checklist-admin-status.is-error {
  color: #2F5FA7;
}

.checklist-admin-status.is-success {
  color: #4a7a4e;
}

.checklist-admin-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.6fr);
  gap: 20px;
  align-items: start;
}

.checklist-admin-card-stack {
  display: grid;
  gap: 20px;
}

.checklist-admin-card-wide {
  grid-column: span 1;
}

.checklist-admin-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #c8d8ec;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(30, 50, 80, 0.05);
  overflow: hidden;
}

.checklist-admin-card-head {
  padding: 22px 22px 16px;
  border-bottom: 1px solid #dceaf7;
  background: linear-gradient(180deg, #f8fcff 0%, #e8f2fc 100%);
}

.checklist-admin-card-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  color: #1a2232;
}

.checklist-admin-card-sub {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: #627287;
}

.checklist-admin-form {
  padding: 18px 22px;
  border-bottom: 1px solid #dceaf7;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checklist-admin-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #627287;
  font-weight: 700;
}

.checklist-admin-input {
  width: 100%;
  border: 1.5px solid #c8d8ec;
  border-radius: 10px;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 13px;
  background: #f5f9ff;
  color: #222;
  outline: none;
}

.checklist-admin-input:focus {
  border-color: #2f5fa7;
  background: #fff;
}

.checklist-admin-textarea {
  min-height: 88px;
  resize: vertical;
}

.checklist-admin-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #4a5e70;
  font-weight: 500;
}

.checklist-admin-check input {
  width: 16px;
  height: 16px;
  accent-color: #2f5fa7;
}

.checklist-admin-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.checklist-admin-btn {
  border: 1.5px solid #c2d4e6;
  background: #fff;
  color: #546278;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.checklist-admin-btn.primary {
  background: #2f5fa7;
  color: #fff;
  border-color: #2f5fa7;
}

.checklist-admin-list {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist-admin-empty {
  padding: 18px;
  border: 1px dashed #cfd8e8;
  border-radius: 12px;
  color: #7a8ea4;
  text-align: center;
  font-size: 12px;
  background: #f5f9fe;
}

.ll-portal-credential-summary {
  padding: 18px 22px 22px;
}

.ll-portal-credential-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ll-portal-credential-summary-item {
  padding: 14px 16px;
  border: 1px solid #dce8f4;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

.ll-portal-credential-summary-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #627287;
  font-weight: 700;
}

.ll-portal-credential-summary-value {
  margin-top: 7px;
  color: #1f2a39;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-word;
}

.checklist-admin-item {
  border: 1px solid #dce8f4;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.checklist-admin-item.is-inactive {
  opacity: 0.65;
}

.checklist-admin-item-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.checklist-admin-item-head > div {
  min-width: 0;
}

.checklist-admin-item-title {
  font-size: 14px;
  color: #1f1f1f;
  font-weight: 600;
  line-height: 1.5;
}

.checklist-admin-item-meta {
  margin-top: 4px;
  font-size: 11px;
  color: #7a8ea4;
  line-height: 1.5;
}

.checklist-admin-item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.checklist-admin-section-group {
  padding: 6px 0 2px;
  border-top: 1px solid #dceaf7;
}

.checklist-admin-section-group:first-child {
  border-top: none;
}

.checklist-admin-section-title {
  padding: 6px 6px 4px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #627287;
  font-weight: 700;
}

.checklist-admin-btn.primary:hover {
  filter: brightness(1.02);
}

.checklist-admin-inline-btn {
  border: 1px solid #cad6e7;
  background: #fff;
  color: #546278;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.checklist-admin-inline-btn.warn {
  color: #2F5FA7;
}

.clx-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.clx-category {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clx-category-title {
  font-size: 10px;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #627287;
  font-weight: 700;
}

.clx-subcategory {
  margin-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clx-subcategory-title {
  font-size: 12px;
  color: #2f5fa7;
  font-weight: 600;
}

.clx-task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}

.clx-subcategory .clx-task-grid {
  margin-left: 2px;
}

.clx-task-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  line-height: 1.55;
  color: #7a8ea4;
}

.clx-task-item.done {
  color: #222;
  font-weight: 500;
}

.clx-task-item .icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #b8cee2;
}

.clx-task-item.done .icon {
  color: #4a7a4e;
}

.clx-form-group {
  border: 1px solid #dce8f4;
  border-radius: 14px;
  background: #f5f9fe;
  overflow: hidden;
}

.clx-form-group-head {
  padding: 12px 14px;
  background: #eef4fb;
  border-bottom: 1px solid #dce8f4;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #546278;
  font-weight: 700;
}

.clx-form-subgroup {
  padding: 12px 14px;
  border-top: 1px solid #e2ecf5;
}

.clx-form-subgroup:first-child {
  border-top: none;
}

.clx-form-subtitle {
  margin-bottom: 10px;
  font-size: 12px;
  color: #2f5fa7;
  font-weight: 600;
}

.clx-form-task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

@media (max-width: 1100px) {
  .checklist-admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .checklist-admin-shell {
    padding: 18px 12px 52px;
  }

  .checklist-admin-title {
    font-size: 30px;
  }

  .checklist-admin-card-head,
  .checklist-admin-form,
  .checklist-admin-list {
    padding-left: 16px;
    padding-right: 16px;
  }

  .checklist-admin-actions {
    flex-direction: column;
  }

  .checklist-admin-btn {
    width: 100%;
  }

  .ll-portal-credential-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .clx-task-grid,
  .clx-form-task-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══ Style Block 2 ═══ */
@media (max-width: 480px) {
  .checklist-admin-title {
    font-size: 24px;
  }

  .checklist-admin-sub {
    font-size: 12px;
  }

  .checklist-admin-shell {
    padding: 14px 10px 40px;
  }

  .checklist-admin-card-title {
    font-size: 22px;
  }
}

/* Global focus-visible style */
*:focus-visible {
  outline: 2px solid #4A90D9;
  outline-offset: 2px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}body{font-family:'Jost','Helvetica Neue',sans-serif;background:#f4f7fc;color:#2c2c2c;font-size:13px;min-height:100vh;}input,select,textarea,button{font-family:inherit;}#header{background:#2c2c2c;border-bottom:1px solid #222;padding:24px 48px 20px;box-shadow:0 4px 16px rgba(0,0,0,0.15);transition:background 0.25s,border-color 0.25s;}#header-inner{max-width:1300px;margin:0 auto;}#header-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}#logo-block{display:flex;align-items:center;gap:18px;}#logo-img{width:72px;height:auto;mix-blend-mode:screen;opacity:0.85;}#logo-text-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;line-height:1.1;color:#dce8f4;transition:color 0.25s;}#logo-text-sub{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:14px;color:#aaa;letter-spacing:0.06em;margin-top:1px;transition:color 0.25s;}#logo-text-portal{font-size:8px;letter-spacing:0.22em;color:#777;text-transform:uppercase;margin-top:6px;padding-top:5px;border-top:1px solid #eee;}#add-btn{padding:11px 28px;border:1.5px solid #2c2c2c;background:#2c2c2c;color:#fff;font-size:10px;cursor:pointer;letter-spacing:0.16em;text-transform:uppercase;transition:all 0.2s;white-space:nowrap;}#add-btn:hover{background:#444;border-color:#444;}#nav-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-top:18px;}.nav-tab{padding:8px 18px;background:transparent;border:1.5px solid rgba(255,255,255,0.18);border-radius:3px;color:rgba(255,255,255,0.9);font-family:'Jost',sans-serif;font-size:10px;font-weight:400;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;transition:background 0.15s,color 0.15s,border-color 0.15s;white-space:nowrap;}.nav-tab:hover{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.85);border-color:rgba(255,255,255,0.35);}.nav-tab.active{background:rgba(255,255,255,0.15);color:#fff;border-color:rgba(255,255,255,0.5);}.page{display:none;}.page.active{display:block;}#stats{display:none !important;margin-top:0;padding:0;border-top:none;flex-wrap:wrap;max-width:1300px;margin-left:auto;margin-right:auto;box-sizing:border-box;}.stat-item{padding-right:32px;margin-right:32px;border-right:1px solid #eee;}.stat-item:last-child{border-right:none;padding-right:0;margin-right:0;}.stat-num{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;font-weight:500;color:#2c2c2c;line-height:1;}.stat-num.warn{color:#2F5FA7;}.stat-label{font-size:9px;color:#666;letter-spacing:0.14em;text-transform:uppercase;margin-top:4px;font-weight:500;}#search-section{max-width:1300px;margin:0 auto;padding:20px 48px 0;}#search-wrap{position:relative;}#search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:15px;color:#bbb;pointer-events:none;}#search-input{width:100%;padding:11px 16px 11px 42px;border:1.5px solid #c9d8e8;font-size:13px;font-family:'Jost',sans-serif;background:#fff;outline:none;color:#2c2c2c;border-radius:4px;}#search-input:focus{border-color:#2c2c2c;}#table-section{max-width:1300px;margin:18px auto 0;padding:0 48px 50px;}.year-group{margin-bottom:32px;}.year-label{font-family:'Cormorant Garamond',Georgia,serif;font-size:13px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:#555;margin-bottom:8px;padding-bottom:6px;border-bottom:1.5px solid #c9d8e8;}.year-label.past-label{color:#bbb;}.past-section{opacity:0.5;}.past-section:hover{opacity:0.7;transition:opacity 0.2s;}#table-footer-note{text-align:center;margin-top:10px;font-size:9px;color:#888;letter-spacing:0.1em;}.wedding-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #c9d8e8;border-radius:6px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.04);margin-bottom:6px;table-layout:fixed;}.wedding-table thead tr{background:#2c2c2c;}.wedding-table th{padding:11px 14px;text-align:left;font-size:9px;font-weight:600;color:#ccc;letter-spacing:0.18em;text-transform:uppercase;white-space:nowrap;}.wedding-table th.center{text-align:center;}.wedding-table tbody tr.main-row{cursor:pointer;transition:background 0.12s;border-bottom:1px solid #e2ecf5;}.wedding-table tbody tr.main-row:hover{background:#f2f7fd !important;}.wedding-table td{padding:13px 14px;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.wedding-table td.wrap{white-space:normal;}.wedding-table td.center{text-align:center;}.row-num{font-size:10px;color:#999;font-family:monospace;}.couple-cell{overflow:visible;text-overflow:clip;}.couple-line{display:flex;align-items:center;gap:10px;min-width:0;}.couple-name{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:15px;color:#2c2c2c;line-height:1.4;white-space:normal;word-break:break-word;display:block;min-width:0;}.dw-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 9px;border:1px solid #c9d6e8;font-size:10px;color:#555;letter-spacing:0.05em;border-radius:6px;flex-shrink:0;}.date-cell{font-size:12px;color:#333;white-space:nowrap;font-weight:400;}.guests-cell{font-size:12px;color:#333;font-weight:500;}.lead-cell{font-size:12px;color:#1a1a1a;font-weight:500;}.lead-empty{color:#aaa;}.asst-cell{font-size:11px;color:#444;font-weight:400;white-space:normal;word-break:break-word;}.dw-d{background:#edf2ed;border-color:#a8c4d8;color:#3a5e3a;}.dw-w{background:#f0edf5;border-color:#c4b8d0;color:#4a3a60;}.progress-bar-wrap{display:flex;align-items:center;gap:8px;min-width:110px;}.progress-track{flex:1;height:5px;background:#dde8f3;border-radius:99px;overflow:hidden;}.progress-fill{height:100%;border-radius:99px;transition:width 0.4s;}.progress-pct{font-size:10px;font-weight:500;min-width:30px;font-family:monospace;}.progress-sub{font-size:10px;color:#777;margin-top:3px;font-weight:400;}.edit-btn{padding:5px 16px;border:1.5px solid #2c2c2c;background:transparent;color:#2c2c2c;font-size:9px;cursor:pointer;letter-spacing:0.1em;text-transform:uppercase;border-radius:3px;transition:all 0.15s;}.edit-btn:hover{background:#2c2c2c;color:#fff;}.del-btn{padding:5px 10px;border:1.5px solid #e0d8d4;background:transparent;color:#ccc;font-size:11px;cursor:pointer;border-radius:3px;margin-left:5px;transition:all 0.15s;}.del-btn:hover{color:#c04a2a;border-color:#c04a2a;}tr.expand-row td{background:#f2f7fd;padding:0;border-bottom:1px solid #dde8f3;overflow:visible;white-space:normal;}.expand-inner{display:grid;grid-template-columns:200px 1fr;gap:28px;max-width:900px;}.expand-section-label{font-size:9px;letter-spacing:0.15em;color:#666;text-transform:uppercase;margin-bottom:8px;font-weight:600;}.expand-staff-line{font-size:12px;color:#333;line-height:2.1;font-weight:400;}.expand-staff-label{color:#666;margin-right:4px;font-weight:500;}.checklist-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 24px;}.checklist-item{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:400;white-space:normal;color:#999;}.checklist-item.done{color:#2c2c2c;font-weight:500;}.checklist-item.pending{color:#999;}.check-icon{font-size:11px;}.checklist-item.done .check-icon{color:#4a7a4e;}.checklist-item.pending .check-icon{color:#bbb;}.notes-block{border-left:3px solid #bfd0e4;padding:10px 14px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:13px;color:#333;line-height:1.8;white-space:pre-wrap;background:#f5f9fe;border-radius:0 4px 4px 0;}.expand-notes-section{display:none;}.staff-summary{font-size:11px;color:#555;font-weight:300;line-height:1.7;white-space:normal;}.staff-summary .s-role{color:#666;font-size:10px;font-weight:500;}.staff-summary .s-name{color:#1a1a1a;font-weight:500;}.staff-summary .s-unassigned{color:#aaa;font-style:italic;}#footer{background:#dde0e8;padding:36px 48px;text-align:center;margin-top:10px;}#footer-logo{width:56px;height:auto;filter:grayscale(100%) opacity(60%);}#footer-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:13px;letter-spacing:0.15em;text-transform:uppercase;color:#444;margin-top:10px;}#footer-addr{font-size:9px;color:#666;letter-spacing:0.08em;font-weight:400;margin-top:5px;}#modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:900;display:none;background:rgba(30,28,24,0.55);backdrop-filter:blur(6px);overflow:hidden;}#modal-overlay.open{display:block;}#modal-scroll-inner{position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;}#modal-box{background:#fff;width:min(700px,100%);border-radius:6px;box-shadow:0 32px 80px rgba(0,0,0,0.22);margin:0 auto;flex-shrink:0;}#modal-head{background:#2c2c2c;padding:22px 32px;display:flex;justify-content:space-between;align-items:center;border-radius:6px 6px 0 0;}#modal-head-logo{display:flex;align-items:center;gap:14px;}#modal-head-logo img{width:42px;height:auto;mix-blend-mode:screen;opacity:0.9;}#modal-title-sub{font-size:9px;letter-spacing:0.2em;color:#aaa;text-transform:uppercase;margin-bottom:4px;}#modal-title{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:20px;color:#fff;font-weight:400;}#modal-close{background:#444;border:none;cursor:pointer;font-size:16px;color:#ccc;padding:6px 10px;border-radius:4px;line-height:1;transition:background 0.15s;}#modal-close:hover{background:#555;color:#fff;}#modal-body{padding:28px 32px 32px;}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;}.form-full{grid-column:1 / -1;}.form-label{font-size:9px;font-weight:600;color:#666;letter-spacing:0.14em;text-transform:uppercase;display:block;margin-bottom:5px;}.form-input{width:100%;padding:9px 12px;border:1.5px solid #c9d8e8;font-size:13px;font-family:'Jost',sans-serif;background:#f3f8ff;outline:none;color:#2c2c2c;border-radius:4px;transition:border-color 0.15s;}.form-input:focus{border-color:#2c2c2c;background:#fff;}.form-input.italic-style{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:14px;}textarea.form-input{min-height:68px;resize:vertical;}.section-divider{margin-top:22px;padding-top:18px;border-top:1px solid #dde8f3;}.section-title{font-size:9px;letter-spacing:0.15em;color:#666;text-transform:uppercase;margin-bottom:12px;font-weight:600;}.checklist-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;background:#f2f7fd;padding:14px 16px;border-radius:4px;border:1px solid #dde8f3;}.check-label{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:12px;color:#555;font-weight:300;}.custom-check{width:16px;height:16px;border:1.5px solid #bfd0e4;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:all 0.15s;border-radius:3px;}.custom-check.checked{border-color:#2c2c2c;background:#2c2c2c;}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:22px;padding-top:18px;border-top:1px solid #dde8f3;}.btn-cancel{padding:10px 22px;border:1.5px solid #c9d8e8;background:#fff;font-size:10px;cursor:pointer;color:#888;letter-spacing:0.12em;text-transform:uppercase;border-radius:4px;transition:background 0.15s;}.btn-cancel:hover{background:#f4f7fc;}.btn-save{padding:10px 28px;border:none;background:#2c2c2c;color:#fff;font-size:10px;cursor:pointer;letter-spacing:0.14em;text-transform:uppercase;border-radius:4px;transition:background 0.15s;}.btn-save:hover{background:#444;}.mobile-cards{display:none;}.wedding-card{background:#fff;border:1px solid #c9d8e8;border-radius:8px;margin-bottom:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.05);}.card-header{padding:14px 16px 12px;border-bottom:1px solid #e2ecf5;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;cursor:pointer;}.card-couple{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:16px;color:#2c2c2c;line-height:1.3;}.card-progress-bar-wrap{width:100%;display:flex;align-items:center;gap:8px;margin-top:6px;}.card-progress-track{flex:1;height:4px;background:#dde8f3;border-radius:99px;overflow:hidden;}.card-progress-fill{height:100%;border-radius:99px;}.card-meta{padding:10px 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;border-bottom:1px solid #e2ecf5;}.card-meta-label{font-size:8px;letter-spacing:0.12em;text-transform:uppercase;color:#666;margin-bottom:2px;font-weight:600;}.card-meta-value{font-size:12px;color:#1a1a1a;font-weight:500;}.card-meta-value.empty{color:#aaa;}.card-actions{padding:10px 16px;display:flex;gap:8px;justify-content:flex-end;align-items:center;border-top:1px solid #e2ecf5;}.card-expand-btn{flex:1;text-align:left;background:none;border:none;cursor:pointer;font-size:10px;color:#777;letter-spacing:0.08em;text-transform:uppercase;padding:0;font-family:inherit;}.card-expand-btn.open{color:#2c2c2c;}.card-checklist{padding:12px 16px 14px;border-top:1px solid #e2ecf5;background:#f2f7fd;}.card-checklist-title{font-size:8px;letter-spacing:0.15em;color:#666;text-transform:uppercase;margin-bottom:10px;font-weight:600;}.card-checklist-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}.card-check-item{display:flex;align-items:center;gap:6px;font-size:11px;color:#888;font-weight:400;}.card-check-item.done{color:#1a1a1a;font-weight:500;}.card-check-icon{font-size:11px;flex-shrink:0;}.card-notes{margin:0 16px 12px;padding:8px 12px;border-left:2px solid #c9d8e8;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:13px;color:#666;line-height:1.7;}.card-dw-badge{display:inline-block;padding:2px 8px;border-radius:2px;font-size:10px;letter-spacing:0.05em;font-weight:500;}.card-dw-d{background:#edf2ed;color:#3a5e3a;}.card-dw-w{background:#f0edf5;color:#4a3a60;}.past-card{opacity:0.5;}#cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}.cal-day{background:#fff;border:1px solid #dde8f3;border-radius:4px;min-height:90px;padding:8px;position:relative;transition:background 0.1s;}.cal-day.other-month{background:#f3f8ff;}.cal-day.today{border-color:#2F5FA7;border-width:2px;}.cal-day-num{font-size:11px;color:#aaa;font-weight:500;margin-bottom:4px;}.cal-day.today .cal-day-num{color:#2F5FA7;font-weight:700;}.cal-day.has-wedding{background:#f8fbff;}.cal-wedding-chip{background:#2c2c2c;color:#fff;border-radius:3px;padding:3px 7px;font-size:10px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;cursor:pointer;margin-top:3px;line-height:1.4;transition:background 0.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.cal-wedding-chip:hover{background:#4a3a60;}.cal-wedding-chip.dw-d{background:#1E3D6F;}.cal-wedding-chip.dw-d:hover{background:#2F5FA7;}.cal-wedding-chip.dw-w{background:#2c2c2c;}.cal-chip-pkg{font-size:8px;font-style:normal;font-family:'Jost',sans-serif;opacity:0.75;letter-spacing:0.05em;display:block;}.cal-tour-chip{background:#1e5f74;color:#fff;border-radius:3px;padding:3px 7px;font-size:10px;font-family:'Jost',sans-serif;cursor:pointer;margin-top:3px;line-height:1.4;transition:background 0.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid #5bc4f0;}.cal-tour-chip:hover{background:#174d60;}.cal-chip-tour-label{font-size:8px;font-family:'Jost',sans-serif;opacity:0.8;letter-spacing:0.06em;display:block;text-transform:uppercase;letter-spacing:0.1em;}#cal-detail-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;width:min(560px,92vw);border-radius:8px;box-shadow:0 24px 64px rgba(0,0,0,0.28);max-height:85vh;display:flex;flex-direction:column;overflow:hidden;}#cal-detail-head{background:#2c2c2c;padding:20px 24px;display:flex;justify-content:space-between;align-items:flex-start;}#cal-detail-date{font-size:9px;letter-spacing:0.16em;color:#aaa;text-transform:uppercase;margin-bottom:5px;}#cal-detail-couple{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:22px;color:#fff;font-weight:400;}.cal-detail-close{background:none;border:1.5px solid #555;color:#aaa;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.15s;}.cal-detail-close:hover{border-color:#fff;color:#fff;}#cal-detail-body{overflow-y:auto;flex:1;}.cal-detail-section{padding:16px 24px;border-bottom:1px solid #e2ecf5;}.cal-detail-section:last-child{border-bottom:none;}.cal-detail-section-head{font-size:8px;letter-spacing:0.16em;text-transform:uppercase;color:#777;font-weight:700;margin-bottom:10px;}.cal-detail-row{display:flex;gap:8px;padding:3px 0;align-items:baseline;}.cal-detail-lbl{font-size:10px;color:#888;font-weight:500;min-width:110px;flex-shrink:0;}.cal-detail-val{font-size:13px;color:#1a1a1a;font-weight:400;}.cal-detail-val a{color:#1a1a1a;text-decoration:none;}.cal-detail-val a:hover{text-decoration:underline;}.cal-detail-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px;}.cal-detail-check{display:flex;align-items:center;gap:6px;font-size:11px;}.cal-detail-check.done{color:#2c2c2c;font-weight:500;}.cal-detail-check.pending{color:#aaa;}.cal-detail-check .ck{color:#4a7a4e;font-size:11px;}.cal-detail-check.pending .ck{color:#ccc;}.cal-detail-text{font-size:12px;color:#333;line-height:1.7;}#cal-detail-footer{padding:14px 24px;border-top:1px solid #dde8f3;display:flex;justify-content:flex-end;background:#f2f7fd;}.cal-detail-edit-btn{padding:9px 20px;background:#2c2c2c;color:#fff;border:none;border-radius:4px;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:background 0.15s;}.cal-detail-edit-btn:hover{background:#4a3a60;}

  /* ══ Page theme colours ══ */
  body.page-weddings  #header { background: #2c2c2c; border-bottom-color: #1a1a1a; }
  body.page-calendar  #header { background: #2d4a35; border-bottom-color: #1e3526; }
  body.page-qa        #header { background: #1E3D6F; border-bottom-color: #142850; }
  body.page-worklogs  #header { background: #1e3250; border-bottom-color: #142240; }

  body.page-tasks     #header { background: #5b4a61; border-bottom-color: #47384c; }

  /* ══ Tasks ══ */
  #tasks-body { max-width: 1080px; margin: 0 auto; padding: 28px 32px 64px; box-sizing: border-box; }
  .tasks-shell { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .tasks-card { background:#fff; border:1px solid #dce8f4; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,0.04); overflow:hidden; }
  .tasks-card-head { padding:20px 22px 16px; border-bottom:1px solid #e2ecf5; background:#f2f7fd; }
  .tasks-card-kicker { font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:#7a8ea4; font-weight:600; margin-bottom:7px; }
  .tasks-card-title { font-family:'Cormorant Garamond',Georgia,serif; font-size:26px; color:#1a1a1a; line-height:1.1; }
  .tasks-card-sub { font-size:12px; color:#7a8ea4; margin-top:5px; line-height:1.55; }
  .tasks-create-body { padding:20px 22px 22px; display:flex; flex-direction:column; gap:16px; }
  .tasks-field { display:flex; flex-direction:column; gap:6px; }
  .tasks-label { font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:#666; font-weight:600; }
  .tasks-input, .tasks-select { width:100%; border:1.5px solid #c9d8e8; border-radius:6px; padding:11px 12px; font-family:'Jost',sans-serif; font-size:13px; color:#1a1a1a; background:#f3f8ff; outline:none; transition:border-color 0.15s, background 0.15s; box-sizing:border-box; }
  .tasks-input:focus, .tasks-select:focus { border-color:#5b4a61; background:#fff; }
  .tasks-estimate-inputs { display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:10px; }
  .tasks-estimate-value, .tasks-estimate-unit { min-width:0; }
  .tasks-help { font-size:11px; color:#8fa4bb; line-height:1.5; }
  .tasks-create-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .tasks-priority-picker { display:flex; gap:8px; }
  .priority-chip { border:1.5px solid #d8e5f2; background:#f8fafd; color:#6a82a0; border-radius:10px; padding:11px 14px; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:all 0.15s; display:inline-flex; align-items:center; gap:8px; font-weight:600; flex:1; justify-content:center; }
  .priority-chip::before { content:''; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .priority-chip.low::before { background:#6f8b76; }
  .priority-chip.medium::before { background:#c08a28; }
  .priority-chip.high::before { background:#c0392b; }
  .priority-chip:hover { border-color:#5b4a61; color:#5b4a61; }
  .priority-chip.selected { color:#fff; border-color:transparent; }
  .priority-chip.low.selected { background:#6f8b76; }
  .priority-chip.medium.selected { background:#c08a28; }
  .priority-chip.high.selected { background:#2F5FA7; }
  .priority-chip.selected::before { background:rgba(255,255,255,0.5); }

  .tasks-create-row { display:flex; gap:12px; align-items:end; }
  .tasks-create-row .tasks-field:first-child { flex:1; }
  .tasks-add-btn { padding:12px 18px; min-width:132px; border:none; border-radius:6px; background:#2c2c2c; color:#fff; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; transition:background 0.15s; }
  .tasks-add-btn:hover { background:#5b4a61; }
  .tasks-add-btn:disabled { background:#aaa; cursor:not-allowed; }
  #tasks-submit-status { font-size:12px; min-height:18px; }
  #tasks-submit-status.success { color:#4a7a4e; }
  #tasks-submit-status.error { color:#2F5FA7; }
  .tasks-summary { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #e2ecf5; }
  .tasks-summary-item { padding:16px 18px; border-right:1px solid #e2ecf5; }
  .tasks-summary-item:last-child { border-right:none; }
  .tasks-summary-num { font-family:'Cormorant Garamond',Georgia,serif; font-size:28px; color:#2c2c2c; line-height:1; }
  .tasks-summary-label { font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:#627287; margin-top:5px; font-weight:600; }
  .tasks-list-head { padding:20px 22px 14px; border-bottom:1px solid #e2ecf5; display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
  .tasks-list-title-wrap { min-width:0; }
  .tasks-list-title { font-family:'Cormorant Garamond',Georgia,serif; font-size:24px; color:#1a1a1a; line-height:1.1; }
  .tasks-list-sub { font-size:12px; color:#7a8ea4; margin-top:5px; }
  .tasks-filter-tabs { display:flex; gap:8px; flex-wrap:wrap; }
  .tasks-filter-btn { padding:8px 14px; border-radius:999px; border:1.5px solid #c9d8e8; background:#fff; color:#6a82a0; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:all 0.15s; }
  .tasks-filter-btn:hover { border-color:#5b4a61; color:#5b4a61; }
  .tasks-filter-btn.active { background:#2c2c2c; border-color:#2c2c2c; color:#fff; }
  .tasks-filter-count { opacity:0.78; margin-left:4px; }
  .task-type-filter-strip { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
  .task-type-filter-btn { padding:7px 13px; border-radius:999px; border:1.5px solid #d4c8d9; background:#fff; color:#8a7191; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; transition:all 0.15s; font-weight:600; }
  .task-type-filter-btn:hover { border-color:#5b4a61; color:#5b4a61; }
  .task-type-filter-btn.active { background:#5b4a61; border-color:#5b4a61; color:#fff; }
  #tasks-list-wrap { padding:12px 22px 22px; }
  .tasks-group { padding-top:8px; }
  .tasks-group + .tasks-group { margin-top:12px; }
  .tasks-group-label { font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:#7a8ea4; font-weight:700; margin:12px 2px; }
  .task-item { border:1px solid #d8e5f2; border-radius:10px; background:#fff; display:flex; gap:8px; align-items:center; padding:10px 12px; transition:box-shadow 0.15s, border-color 0.15s, background 0.15s; overflow:hidden; }
  .task-item + .task-item { margin-top:5px; }
  .task-item:hover { box-shadow:0 4px 12px rgba(0,0,0,0.05); border-color:#ccd8e9; }
  .task-item.is-complete { background:#f3f8ff; }
  .task-hitarea { flex:1; min-width:0; display:flex; gap:10px; align-items:center; padding:10px 12px; background:transparent; border:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
  .task-hitarea:hover .task-toggle { border-color:#5b4a61; }
  .task-hitarea:focus-visible { outline:2px solid #5b4a61; outline-offset:-2px; border-radius:10px; }
  .task-toggle { width:20px; height:20px; border-radius:50%; border:1.5px solid #c2d2e4; background:#fff; color:transparent; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.15s; }
  .task-item.is-complete .task-toggle { background:#4a7a4e; border-color:#4a7a4e; color:#fff; }
  .task-main { min-width:0; flex:1; }
  .task-title { font-size:13px; color:#1a1a1a; font-weight:500; line-height:1.4; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .task-item.is-complete .task-title { color:#7a8ea4; text-decoration:line-through; }
  .task-meta { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
  .task-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; font-size:10px; letter-spacing:0.05em; font-weight:600; background:#eef4fb; color:#4e6a87; flex-shrink:0; }
  .task-badge .dot { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:0.7; }
  .task-badge.pam { background:#e8ecf5; color:#4a5a7a; }
  .task-badge.gary { background:#e8f5ea; color:#4a7a4e; }
  .task-badge.maggie { background:#f5e8f0; color:#7a3a5a; }
  .task-badge.unassigned { background:#eaf3fb; color:#5a7fa8; border:1px dashed rgba(47,95,167,0.25); }
  .task-estimate-badge { background:#f3efe9; color:#627287; }
  .task-priority-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:10px; letter-spacing:0.06em; font-weight:600; background:#eef4fb; color:#4e6a87; }
  .task-priority-badge.low { background:#eaf1eb; color:#5a7760; }
  .task-priority-badge.medium { background:#e8f2fb; color:#5a7fa8; }
  .task-priority-badge.high { background:#e3eeff; color:#2F5FA7; }

  .task-time { font-size:11px; color:#8fa4bb; }
  .task-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; padding:8px 10px 8px 0; }
  .task-action-btn { border:1.5px solid #c9d8e8; background:#fff; color:#6a82a0; border-radius:6px; padding:6px 8px; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; transition:all 0.15s; }
  .task-action-btn:hover { border-color:#5b4a61; color:#5b4a61; }
  .task-action-btn.secondary { min-width:0; }
  .task-check-btn { width:28px; height:28px; min-width:28px; min-height:28px; aspect-ratio:1/1; border-radius:50%; border:1.5px solid #c2d2e4; background:#fff; color:transparent; display:flex; align-items:center; justify-content:center; flex-shrink:0; align-self:center; cursor:pointer; transition:all 0.15s; font-size:11px; padding:0; }
  .task-item.is-complete .task-check-btn { background:#4a7a4e; border-color:#4a7a4e; color:#fff; }
  .task-check-btn:hover { border-color:#5b4a61; }
  .task-edit-btn { border:none; background:none; color:#b0c0d4; font-size:14px; cursor:pointer; padding:2px 4px; flex-shrink:0; line-height:1; transition:color 0.15s; }
  .task-edit-btn:hover { color:#5b4a61; }
  .task-delete-btn:hover { border-color:#2F5FA7; color:#2F5FA7; background:#edf5ff; }
  .tasks-empty { text-align:center; padding:68px 20px; color:#b0c6da; }
  .tasks-empty-icon { font-size:42px; margin-bottom:10px; }
  .tasks-empty-title { font-size:16px; color:#7a8ea4; margin-bottom:6px; }
  .tasks-empty-sub { font-size:12px; color:#b0c6da; max-width:320px; margin:0 auto; line-height:1.6; }

  /* Task image upload (modal) */
  .task-image-field { margin-top:2px; }
  .task-image-file-input { display:none; }
  .task-image-drop-label { display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 18px; border:1.5px dashed #c4d5e8; border-radius:10px; background:#f8fafd; color:#7a8ea4; font-size:12px; cursor:pointer; transition:border-color 0.15s, background 0.15s; width:100%; box-sizing:border-box; }
  .task-image-drop-label:hover { border-color:#5b4a61; background:#f8f3ff; color:#5b4a61; border-style:solid; }
  .task-image-drop-icon { font-size:15px; line-height:1; }
  .task-image-current { display:flex; align-items:center; gap:10px; padding:8px 10px; background:#f3f8ff; border:1px solid #d8e5f2; border-radius:6px; }
  .task-image-preview-img { width:52px; height:52px; object-fit:cover; border-radius:4px; border:1px solid #d8e5f2; flex-shrink:0; }
  .task-image-remove-btn { font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:#7a8ea4; background:none; border:1.5px solid #c9d8e8; border-radius:4px; padding:5px 10px; cursor:pointer; transition:all 0.15s; }
  .task-image-remove-btn:hover { border-color:#2F5FA7; color:#2F5FA7; }
  .task-image-error { font-size:11px; color:#c0392b; margin-top:2px; }
  /* Multi-attachment list (modal) */
  .task-attachments-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
  .task-attachment-chip { position:relative; display:flex; align-items:center; gap:8px; padding:6px 28px 6px 6px; background:#f3f8ff; border:1px solid #d8e5f2; border-radius:6px; max-width:220px; }
  .task-attachment-chip.is-pdf { background:#fff6f0; border-color:#f1d3bc; }
  .task-attachment-thumb { width:40px; height:40px; object-fit:cover; border-radius:4px; border:1px solid #d8e5f2; flex-shrink:0; }
  .task-attachment-pdf-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:#c0392b; color:#fff; border-radius:4px; font-size:11px; font-weight:700; letter-spacing:0.08em; flex-shrink:0; }
  .task-attachment-name { font-size:12px; color:#2c2c2c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:140px; }
  .task-attachment-remove { position:absolute; top:3px; right:3px; width:20px; height:20px; border:none; border-radius:50%; background:rgba(44,44,44,0.08); color:#555; font-size:14px; line-height:1; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; }
  .task-attachment-remove:hover { background:#c0392b; color:#fff; }
  /* PDF link shown on task cards */
  .task-image-control { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .task-pdf-link { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:#fff6f0; border:1.5px solid #f1d3bc; border-radius:6px; text-decoration:none; color:#2c2c2c; font-size:11px; transition:border-color 0.15s; max-width:160px; }
  .task-pdf-link:hover { border-color:#c0392b; }
  .task-pdf-badge { display:inline-block; background:#c0392b; color:#fff; font-size:9px; font-weight:700; letter-spacing:0.08em; padding:2px 5px; border-radius:3px; }
  .task-pdf-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Task image thumbnail (list) */
  .task-img-link { display:flex; align-items:center; padding:10px 0 10px 4px; flex-shrink:0; }
  .task-img-thumb { width:42px; height:42px; object-fit:cover; border-radius:4px; border:1.5px solid #d8e5f2; cursor:pointer; transition:border-color 0.15s; }
  .task-img-thumb:hover { border-color:#5b4a61; }

  /* ══ Calendar ══ */
  #cal-nav { display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:24px; }
  #cal-month-label { font-family:'Cormorant Garamond',Georgia,serif; font-size:26px; font-weight:600; color:#2c2c2c; letter-spacing:0.04em; min-width:220px; text-align:center; }
  .cal-nav-btn { background:none; border:1.5px solid #bfd0e4; color:#2c2c2c; width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
  .cal-nav-btn:hover { border-color:#2c2c2c; background:#fff; }
  #cal-grid-head { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px; }
  .cal-dow { text-align:center; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:#888; font-weight:600; padding:6px 0; }
  #cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
  .cal-day { background:#fff; border:1px solid #dde8f3; border-radius:4px; min-height:90px; padding:8px; position:relative; transition:background 0.1s; }
  .cal-day.other-month { background:#f3f8ff; }
  .cal-day.today { border-color:#2F5FA7; border-width:2px; }
  .cal-day-num { font-size:11px; color:#aaa; font-weight:500; margin-bottom:4px; }
  .cal-day.today .cal-day-num { color:#2F5FA7; font-weight:700; }
  .cal-day.has-wedding { background:#f8fbff; }
  .cal-wedding-chip { background:#2c2c2c; color:#fff; border-radius:3px; padding:3px 7px; font-size:10px; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; cursor:pointer; margin-top:3px; line-height:1.4; transition:background 0.15s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cal-wedding-chip:hover { background:#4a3a60; }
  .cal-wedding-chip.dw-d { background:#1E3D6F; }
  .cal-wedding-chip.dw-d:hover { background:#2F5FA7; }
  .cal-wedding-chip.dw-w { background:#2c2c2c; }
  .cal-chip-pkg { font-size:8px; font-style:normal; font-family:'Jost',sans-serif; opacity:0.75; letter-spacing:0.05em; display:block; }

  /* Detail popup */
  #cal-detail-box { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; width:min(560px,92vw); border-radius:8px; box-shadow:0 24px 64px rgba(0,0,0,0.28); max-height:85vh; display:flex; flex-direction:column; overflow:hidden; }
  #cal-detail-head { background:#2c2c2c; padding:20px 24px; display:flex; justify-content:space-between; align-items:flex-start; }
  #cal-detail-date { font-size:9px; letter-spacing:0.16em; color:#aaa; text-transform:uppercase; margin-bottom:5px; }
  #cal-detail-couple { font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:22px; color:#fff; font-weight:400; }
  .cal-detail-close { background:none; border:1.5px solid #555; color:#aaa; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
  .cal-detail-close:hover { border-color:#fff; color:#fff; }
  #cal-detail-body { overflow-y:auto; flex:1; }
  .cal-detail-section { padding:16px 24px; border-bottom:1px solid #e2ecf5; }
  .cal-detail-section:last-child { border-bottom:none; }
  .cal-detail-section-head { font-size:8px; letter-spacing:0.16em; text-transform:uppercase; color:#777; font-weight:700; margin-bottom:10px; }
  .cal-detail-row { display:flex; gap:8px; padding:3px 0; align-items:baseline; }
  .cal-detail-lbl { font-size:10px; color:#888; font-weight:500; min-width:110px; flex-shrink:0; }
  .cal-detail-val { font-size:13px; color:#1a1a1a; font-weight:400; }
  .cal-detail-val a { color:#1a1a1a; text-decoration:none; }
  .cal-detail-val a:hover { text-decoration:underline; }
  .cal-detail-check-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px 16px; }
  .cal-detail-check { display:flex; align-items:center; gap:6px; font-size:11px; }
  .cal-detail-check.done { color:#2c2c2c; font-weight:500; }
  .cal-detail-check.pending { color:#aaa; }
  .cal-detail-check .ck { color:#4a7a4e; font-size:11px; }
  .cal-detail-check.pending .ck { color:#ccc; }
  .cal-detail-text { font-size:12px; color:#333; line-height:1.7; }
  #cal-detail-footer { padding:14px 24px; border-top:1px solid #dde8f3; display:flex; justify-content:flex-end; background:#f2f7fd; }
  .cal-detail-edit-btn { padding:9px 20px; background:#2c2c2c; color:#fff; border:none; border-radius:4px; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:background 0.15s; }
  .cal-detail-edit-btn:hover { background:#4a3a60; }

  /* Mobile calendar */

  /* ══ Q&A ══ */
  #qa-body { flex:1; padding:28px 32px 48px; max-width:860px; width:100%; margin:0 auto; box-sizing:border-box; }

  /* Filter tabs */
  #qa-filters { display:flex; gap:6px; margin-bottom:24px; }
  .qa-filter-btn { padding:7px 16px; border-radius:20px; border:1.5px solid #c9d8e8; background:#fff; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:#888; cursor:pointer; transition:all 0.15s; }
  .qa-filter-btn.active { background:#2c2c2c; color:#fff; border-color:#2c2c2c; }
  .qa-filter-btn:hover:not(.active) { border-color:#2c2c2c; color:#2c2c2c; }

  /* Question cards */
  #qa-list { display:flex; flex-direction:column; gap:12px; }
  .qa-card { background:#fff; border:1px solid #dde8f3; border-radius:6px; overflow:hidden; transition:box-shadow 0.15s; }
  .qa-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.07); }
  .qa-card-head { padding:16px 20px; display:flex; gap:14px; align-items:flex-start; cursor:pointer; }
  .qa-card-status { width:20px; height:20px; border-radius:50%; flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
  .qa-card-status.unanswered { background:#edf5ff; color:#2F5FA7; border:1.5px solid #b8d4f0; }
  .qa-card-status.answered { background:#edf5ee; color:#4a7a4e; border:1.5px solid #b4d4b8; }
  .qa-card-main { flex:1; min-width:0; }
  .qa-card-q { font-size:14px; color:#1a1a1a; font-weight:500; line-height:1.5; margin-bottom:5px; }
  .qa-card-meta { font-size:10px; color:#aaa; letter-spacing:0.04em; }
  .qa-card-meta span { margin-right:12px; }
  .qa-card-chevron { color:#ccc; font-size:12px; flex-shrink:0; transition:transform 0.2s; margin-top:4px; }
  .qa-card.open .qa-card-chevron { transform:rotate(180deg); }
  .qa-card-body { display:none; border-top:1px solid #e2ecf5; padding:0 20px 0 54px; }
  .qa-card.open .qa-card-body { display:block; }

  /* Answer area */
  .qa-answer-label { font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:#999; margin:14px 0 8px; }
  .qa-answer-text { font-size:13px; color:#333; line-height:1.75; padding-bottom:4px; white-space:pre-wrap; }
  .qa-answer-empty { font-size:12px; color:#bbb; font-style:italic; padding-bottom:4px; }
  .qa-answer-input { width:100%; box-sizing:border-box; border:1.5px solid #c9d8e8; border-radius:4px; padding:10px 12px; font-family:'Jost',sans-serif; font-size:13px; color:#1a1a1a; background:#f3f8ff; resize:vertical; min-height:80px; outline:none; transition:border 0.15s; }
  .qa-answer-input:focus { border-color:#2c2c2c; background:#fff; }
  .qa-card-actions { display:flex; gap:8px; padding:10px 0 16px; align-items:center; flex-wrap:wrap; }
  .qa-save-btn { padding:7px 16px; background:#2c2c2c; color:#fff; border:none; border-radius:4px; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:background 0.15s; }
  .qa-save-btn:hover { background:#4a3a60; }
  .qa-edit-btn { padding:7px 14px; background:transparent; color:#888; border:1.5px solid #c9d8e8; border-radius:4px; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:all 0.15s; }
  .qa-edit-btn:hover { border-color:#2c2c2c; color:#2c2c2c; }
  .qa-delete-btn { margin-left:auto; padding:7px 14px; background:transparent; color:#90b8d4; border:1.5px solid #d8e8f4; border-radius:4px; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:all 0.15s; }
  .qa-delete-btn:hover { background:#edf5ff; border-color:#2F5FA7; color:#2F5FA7; }
  .qa-answered-by { font-size:10px; color:#aaa; margin-left:2px; }

  /* â"€â"€ Answerer picker (inside the inline answer form) â"€â"€ */
  .qa-answerer-wrap { margin-top:10px; }
  .qa-answerer-label { font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:#999; font-weight:700; margin-bottom:7px; }
  .qa-answerer-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
  .qa-answerer-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 13px 7px 8px; border:1.5px solid #ccd8e9; border-radius:999px; background:#fff; color:#4e6075; font-size:12px; font-family:'Jost',sans-serif; cursor:pointer; transition:border-color .15s, background .15s; }
  .qa-answerer-chip:hover { border-color:#2c2c2c; }
  .qa-answerer-chip.selected { border-color:#2c2c2c; background:#eaf2fb; }
  .qa-answerer-icon { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; }
  .qa-answerer-icon.dan { background:#4a6e8a; }
  .qa-answerer-icon.marianne { background:#2e6b9e; }
  .qa-answerer-other { width:100%; box-sizing:border-box; border:1.5px solid #ccd8e9; border-radius:8px; padding:9px 12px; font-size:12px; font-family:'Jost',sans-serif; color:#333; background:#f3f8ff; outline:none; transition:border-color .15s; }
  .qa-answerer-other:focus { border-color:#6090b8; background:#fff; }
  .qa-answerer-other::placeholder { color:#bdd0e5; }

  /* Empty state */
  #qa-empty { text-align:center; padding:64px 32px; color:#bbb; }
  #qa-empty-icon { font-size:40px; margin-bottom:12px; }
  #qa-empty-msg { font-size:14px; color:#aaa; margin-bottom:6px; }
  #qa-empty-sub { font-size:12px; color:#ccc; }

  /* Add question modal */
  #qa-modal-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000; background:rgba(20,18,16,0.5); }
  #qa-modal-box { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; width:min(560px,92vw); border-radius:8px; box-shadow:0 24px 64px rgba(0,0,0,0.28); overflow:hidden; }
  #qa-modal-head { background:#2c2c2c; padding:18px 24px; display:flex; justify-content:space-between; align-items:center; }
  #qa-modal-title { font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:18px; color:#fff; }
  .qa-modal-close { background:none; border:1.5px solid #555; color:#aaa; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
  .qa-modal-close:hover { border-color:#fff; color:#fff; }
  #qa-modal-body { padding:24px; }
  .qa-modal-label { font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:#888; margin-bottom:8px; display:block; }
  .qa-modal-input, .qa-modal-select { width:100%; box-sizing:border-box; border:1.5px solid #c9d8e8; border-radius:4px; padding:10px 12px; font-family:'Jost',sans-serif; font-size:13px; color:#1a1a1a; background:#f3f8ff; outline:none; transition:border 0.15s; }
  .qa-modal-input { resize:vertical; }
  .qa-modal-select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer; min-height:46px; }
  .qa-modal-input:focus, .qa-modal-select:focus { border-color:#2c2c2c; background:#fff; }
  .qa-modal-field { margin-bottom:16px; }
  #qa-modal-footer { padding:14px 24px; border-top:1px solid #dde8f3; display:flex; gap:10px; justify-content:flex-end; background:#f2f7fd; }
  .qa-modal-cancel { padding:9px 18px; background:transparent; color:#888; border:1.5px solid #c9d8e8; border-radius:4px; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; }
  .qa-modal-cancel:hover { border-color:#2c2c2c; color:#2c2c2c; }
  .qa-modal-submit { padding:9px 20px; background:#2c2c2c; color:#fff; border:none; border-radius:4px; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:background 0.15s; }
  .qa-modal-submit:hover { background:#4a3a60; }

  /* Loading */
  #qa-loading { text-align:center; padding:48px; color:#aaa; font-size:13px; }

  /* ══ Work Log ══ */
  #wl-body { padding: 36px 40px 80px; max-width: 860px; margin: 0 auto; box-sizing: border-box; }

  /* Sub-tabs */
  #wl-subtabs { display: flex; gap: 4px; margin-bottom: 36px; border-bottom: 1.5px solid #dce8f4; padding-bottom: 0; }
  .wl-subtab { padding: 14px 28px 13px; background: none; border: none; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: #aaa; cursor: pointer; transition: color 0.25s, border-color 0.25s; white-space: nowrap; }
  .wl-subtab:hover { color: #555; }
  .wl-subtab.active { color: #1a1a1a; border-bottom-color: #2c2c2c; font-weight: 600; }

  /* Panel visibility */
  .wl-panel { display: none; }
  .wl-panel.active { display: block; animation: wlFadeIn 0.3s ease-out; }
  @keyframes wlFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

  /* Form card */
  .wl-form-card { background: #fff; border: 1px solid #d6e3f0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 6px 24px rgba(0,0,0,0.04); }
  .wl-form-header { padding: 28px 36px 24px; border-bottom: 1px solid #e6eef7; background: linear-gradient(180deg, #f6f9fd 0%, #f0f5fb 100%); }
  .wl-form-title { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 23px; color: #1a1a1a; margin-bottom: 2px; letter-spacing: -0.01em; }
  .wl-form-subtitle { font-size: 11px; color: #aaa; letter-spacing: 0.06em; }
  .wl-form-body { padding: 32px 36px 28px; display: flex; flex-direction: column; gap: 28px; }
  .wl-form-footer { padding: 22px 36px; border-top: 1px solid #e6eef7; background: linear-gradient(180deg, #f6f9fd 0%, #f0f5fb 100%); display: flex; justify-content: space-between; align-items: center; }

  /* Fields */
  .wl-field-row { display: flex; gap: 24px; }
  .wl-field { display: flex; flex-direction: column; gap: 7px; flex: 1; }
  .wl-field-sm { flex: 1; min-width: 120px; max-width: 150px; }
  .wl-label { font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: #6b7a8d; font-weight: 600; }
  .wl-label-hint { font-size: 12px; color: #9aa8b8; margin-top: -2px; line-height: 1.5; }
  .wl-required { color: #2F5FA7; }
  .wl-optional { color: #b8c4d0; font-size: 8.5px; letter-spacing: 0.08em; margin-left: 5px; }
  .wl-input { border: 1.5px solid #cdd9e8; border-radius: 8px; padding: 11px 15px; font-family: 'Jost', sans-serif; font-size: 13.5px; color: #1a1a1a; background: #f7faff; outline: none; transition: border-color 0.25s, background 0.25s, box-shadow 0.25s; width: 100%; box-sizing: border-box; }
  .wl-input:focus { border-color: #2c2c2c; background: #fff; box-shadow: 0 0 0 3px rgba(44,44,44,0.06); }
  .wl-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
  .wl-textarea { resize: vertical; line-height: 1.7; }
  .wl-textarea-sm { min-height: 76px; }

  /* Save button */
  .wl-save-btn { padding: 13px 36px; background: #2c2c2c; color: #fff; border: none; border-radius: 8px; font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; cursor: pointer; transition: background 0.25s, box-shadow 0.25s, transform 0.15s; }
  .wl-save-btn:hover { background: #3d3350; box-shadow: 0 4px 14px rgba(44,44,44,0.18); transform: translateY(-1px); }
  .wl-save-btn:active { transform: translateY(0); box-shadow: none; }
  .wl-save-btn:disabled { background: #bbb; cursor: not-allowed; box-shadow: none; transform: none; }
  #wl-submit-status { font-size: 12px; }
  #wl-submit-status.success { color: #4a7a4e; }
  #wl-submit-status.error { color: #2F5FA7; }

  /* History toolbar */
  .wl-history-toolbar { background: linear-gradient(180deg, #f8fbff 0%, #f1f6fc 100%); border: 1px solid #dce8f4; border-radius: 14px; padding: 24px 28px; margin-bottom: 28px; }
  .wl-history-controls { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
  .wl-history-left { display: flex; gap: 24px; flex-wrap: wrap; flex: 1; }
  .wl-hist-nav-group { display: flex; gap: 6px; align-items: flex-end; }
  .wl-nav-btn { padding: 10px 16px; background: #fff; border: 1.5px solid #cdd9e8; border-radius: 8px; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #667; cursor: pointer; transition: all 0.25s; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
  .wl-nav-btn:hover { border-color: #2c2c2c; color: #2c2c2c; box-shadow: 0 2px 8px rgba(44,44,44,0.08); }
  .wl-nav-btn svg { flex-shrink: 0; }
  .wl-nav-today { background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%); border-color: #b8c9dc; color: #3a5068; font-weight: 600; }
  .wl-nav-today:hover { border-color: #2c2c2c; color: #2c2c2c; background: #fff; }

  /* History heading row */
  .wl-hist-heading-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
  .wl-hist-heading { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; color: #1a1a1a; font-style: italic; letter-spacing: -0.01em; }
  .wl-hist-count { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #7a8ea4; font-weight: 600; font-family: 'Jost', sans-serif; background: #eef3fa; border: 1px solid #dce8f4; border-radius: 20px; padding: 4px 12px; white-space: nowrap; }
  .wl-hist-count:empty { display: none; }

  /* Log cards */
  .wl-log-card { background: #fff; border: 1px solid #d6e3f0; border-radius: 10px; padding: 24px 28px; margin-bottom: 16px; transition: box-shadow 0.25s, transform 0.25s; }
  .wl-log-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); transform: translateY(-1px); }
  .wl-log-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #edf2f8; }
  .wl-log-avatar { width: 36px; height: 36px; border-radius: 50%; background: #2c2c2c; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; font-family: 'Jost', sans-serif; }
  .wl-log-avatar.pam    { background: #4a5a7a; }
  .wl-log-avatar.gary   { background: #4a7a4e; }
  .wl-log-avatar.maggie { background: #7a3a5a; }
  .wl-log-name  { font-size: 14.5px; font-weight: 600; color: #1a1a1a; }
  .wl-log-date-sub { font-size: 11px; color: #9aa8b8; letter-spacing: 0.03em; margin-top: 1px; }
  .wl-log-hours { margin-left: auto; background: #f0f4fa; border: 1px solid #e2eaf4; border-radius: 20px; padding: 4px 13px; font-size: 10.5px; color: #5a6a7a; letter-spacing: 0.05em; white-space: nowrap; font-weight: 500; }
  .wl-log-section { margin-bottom: 16px; }
  .wl-log-section:last-child { margin-bottom: 0; }
  .wl-log-section-label { font-size: 8.5px; letter-spacing: 0.15em; text-transform: uppercase; color: #9aa8b8; margin-bottom: 6px; font-weight: 600; }
  .wl-log-section-text { font-size: 13.5px; color: #2c3e50; line-height: 1.75; }
  .wl-log-formatted p { margin: 0; }
  .wl-log-formatted p + p,
  .wl-log-formatted p + .wl-log-rich-list,
  .wl-log-formatted .wl-log-rich-list + p,
  .wl-log-formatted .wl-log-rich-list + .wl-log-rich-list { margin-top: 10px; }
  .wl-log-rich-list { margin: 0; padding-left: 20px; }
  .wl-log-rich-list li + li { margin-top: 6px; }
  .wl-log-rich-list li::marker { color: #6d8198; }
  .wl-log-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin-top: 4px; }
  .wl-edit-meta { margin-top: 10px; font-size: 11.5px; color: #546278; line-height: 1.65; }
  .wl-edit-meta strong { color: #1a1a1a; }
  .wl-form-footer-actions { display:flex; gap:14px; align-items:center; margin-left:auto; }
  .wl-cancel-edit-btn { padding: 13px 22px; background: transparent; color: #667; border: 1.5px solid #cdd9e8; border-radius: 8px; font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.25s; }
  .wl-cancel-edit-btn:hover { border-color:#2c2c2c; color:#2c2c2c; }
  .wl-log-card-actions { display:flex; justify-content:flex-end; gap:12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #edf2f8; }
  .wl-log-edit-btn { padding: 9px 18px; background:#fff; color:#2c2c2c; border:1.5px solid #cdd9e8; border-radius:8px; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:all 0.25s; }
  .wl-log-edit-btn:hover { border-color:#2c2c2c; background:#f6f9fd; box-shadow: 0 2px 8px rgba(44,44,44,0.06); }
  .wl-log-modified { margin-top: 8px; font-size: 10.5px; color: #9aa8b8; letter-spacing: 0.03em; }

  /* Empty state */
  .wl-empty { text-align: center; padding: 56px 32px; color: #bbb; background: linear-gradient(180deg, rgba(248,251,255,0.6) 0%, rgba(241,246,252,0.4) 100%); border: 1px dashed #dce8f4; border-radius: 14px; }
  .wl-empty-icon { font-size: 42px; margin-bottom: 16px; opacity: 0.55; filter: grayscale(0.3); }
  .wl-empty-msg { font-size: 14.5px; color: #7a8ea4; margin-bottom: 8px; font-weight: 500; }
  .wl-empty-sub { font-size: 12.5px; color: #a0b0c0; line-height: 1.6; }

  /* Recent submissions section */
  .wl-hist-recent-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid #e8eff8; }
  .wl-hist-recent-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
  .wl-hist-recent-label { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #9aa8b8; font-weight: 600; }

  /* Recent items */
  .wl-recent-item { display: flex; align-items: center; gap: 16px; padding: 15px 22px; background: #fff; border: 1px solid #d6e3f0; border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: all 0.25s; position: relative; }
  .wl-recent-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: linear-gradient(180deg, #7f91ad, #60758f); border-radius: 0 3px 3px 0; transition: height 0.25s ease; }
  .wl-recent-item:hover { border-color: #b0c0d4; background: #f8fafd; box-shadow: 0 4px 16px rgba(0,0,0,0.05); transform: translateY(-1px); }
  .wl-recent-item:hover::before { height: 60%; }
  .wl-recent-date { font-size: 13.5px; color: #1a1a1a; font-weight: 500; flex: 1; }
  .wl-recent-count { font-size: 9.5px; color: #9aa8b8; letter-spacing: 0.04em; font-weight: 500; font-family: 'Jost', sans-serif; white-space: nowrap; }
  .wl-recent-badges { display: flex; gap: 7px; flex-wrap: wrap; }
  .wl-recent-badge { padding: 4px 11px; border-radius: 12px; font-size: 9px; letter-spacing: 0.06em; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; }
  .wl-recent-badge:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
  .wl-recent-badge.pam    { background: #e8ecf5; color: #4a5a7a; }
  .wl-recent-badge.gary   { background: #e8f5ea; color: #4a7a4e; }
  .wl-recent-badge.maggie { background: #f5e8f0; color: #7a3a5a; }

  /* ══ Expand panel ══ */
  /* History loading state */
  .wl-hist-loading { display: flex; align-items: center; gap: 12px; padding: 32px 0; color: #9aa8b8; font-size: 12.5px; font-family: 'Jost', sans-serif; letter-spacing: 0.02em; }
  .wl-hist-loading-spinner { width: 18px; height: 18px; border: 2px solid #dce8f4; border-top-color: #7f91ad; border-radius: 50%; animation: wl-spin 0.7s linear infinite; }
  @keyframes wl-spin { to { transform: rotate(360deg); } }

  .expand-panel { background: #f3f8ff; border-top: 2px solid #dce8f4; }
  .exp-grid-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1px solid #dde8f3; border-top: none; }
  .exp-section { padding: 20px 24px; border-right: 1px solid #dde8f3; }
  .exp-section:last-child { border-right: none; }
  .exp-section-full { padding: 20px 24px; border-top: 1px solid #dde8f3; }
  .exp-section-head { font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: #888; font-weight: 700; margin-bottom: 14px; }

  /* â"€â"€ Grouped-by-category checklist layout (shared by table, cards, calendar, detail) â"€â"€ */
  .cl-cats-wrap { }
  .cl-cat-group { margin-bottom: 20px; }
  .cl-cat-group:last-child { margin-bottom: 0; }
  .cl-cat-head { font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: #7a8ea4; font-weight: 700; margin-bottom: 9px; padding-bottom: 5px; border-bottom: 1px solid #dde8f3; }
  .exp-row { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px solid #e8f0fb; align-items: baseline; }
  .exp-row:last-child { border-bottom: none; }
  .exp-lbl { font-size: 10px; color: #999; font-weight: 500; min-width: 120px; flex-shrink: 0; }
  .exp-val { font-size: 13px; color: #1a1a1a; }
  .exp-notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .exp-notes-label { font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: #888; font-weight: 700; margin-bottom: 8px; }
  .exp-notes-text { font-size: 13px; color: #333; line-height: 1.6; white-space: pre-wrap; }
  .exp-checklist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 20px; }
  .exp-check-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #555; }
  .exp-check-item.done { color: #2c2c2c; }
  .exp-check-icon { width: 14px; height: 14px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; background: #eee; color: #ccc; }
  .exp-check-item.done .exp-check-icon { background: #4a7a4e; color: #fff; }
  .exp-actions { display: flex; gap: 10px; padding: 14px 24px; background: #f4f7fc; border-top: 1px solid #dce8f4; }
  .exp-files-wrap { padding: 16px 24px; border-top: 1px solid #dce8f4; background: #f3f8ff; }
  .exp-files-label { font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: #888; font-weight: 700; margin-bottom: 10px; }
  .exp-file-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .exp-file-item { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #d2e0ef; border-radius: 5px; padding: 6px 10px; font-size: 11px; color: #2c2c2c; cursor: pointer; text-decoration: none; transition: border-color 0.15s; }
  .exp-file-item:hover { border-color: #2c2c2c; }
  .exp-no-files { font-size: 12px; color: #aaa; font-style: italic; }

  /* ══ Avatar picker ══ */
  #wl-avatar-picker { display: flex; gap: 28px; padding: 8px 0 4px; }
  .wl-avatar-btn { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; transition: transform 0.2s; }
  .wl-avatar-btn:hover { transform: translateY(-2px); }
  .wl-avatar-circle { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; font-family: 'Jost', sans-serif; color: #fff; border: 2.5px solid transparent; transition: all 0.25s; opacity: 0.4; }
  .wl-avatar-btn:hover .wl-avatar-circle { opacity: 0.7; }
  .wl-avatar-btn.selected .wl-avatar-circle { opacity: 1; border-color: #fff; box-shadow: 0 0 0 3px currentColor, 0 4px 14px rgba(0,0,0,0.15); transform: scale(1.1); }
  .wl-avatar-circle.pam    { background: #4a5a7a; }
  .wl-avatar-circle.gary   { background: #4a7a4e; }
  .wl-avatar-circle.maggie { background: #7a3a5a; }
  .wl-avatar-btn.selected.pam    .wl-avatar-circle { box-shadow: 0 0 0 3px #4a5a7a, 0 4px 14px rgba(74,90,122,0.3); }
  .wl-avatar-btn.selected.gary   .wl-avatar-circle { box-shadow: 0 0 0 3px #4a7a4e, 0 4px 14px rgba(74,122,78,0.3); }
  .wl-avatar-btn.selected.maggie .wl-avatar-circle { box-shadow: 0 0 0 3px #7a3a5a, 0 4px 14px rgba(122,58,90,0.3); }
  .wl-avatar-circle.dan { background: #5f4a7a; }
  .wl-avatar-circle.marianne { background: #2e6b9e; }
  .wl-avatar-circle.lindsey { background: #3f6f96; }
  .wl-avatar-btn.selected.dan .wl-avatar-circle { box-shadow: 0 0 0 3px #5f4a7a, 0 4px 14px rgba(95,74,122,0.3); }
  .wl-avatar-btn.selected.marianne .wl-avatar-circle { box-shadow: 0 0 0 3px #2e6b9e, 0 4px 14px rgba(154,98,57,0.3); }
  .wl-avatar-btn.selected.lindsey .wl-avatar-circle { box-shadow: 0 0 0 3px #3f6f96, 0 4px 14px rgba(63,111,150,0.3); }
  .wl-avatar-name { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #9aa8b8; transition: color 0.25s; }
  .wl-avatar-btn:hover .wl-avatar-name { color: #667; }
  .wl-avatar-btn.selected .wl-avatar-name { color: #1a1a1a; font-weight: 600; }



  /* ══ Wedding Add/Edit Modal polish ══ */
  #modal-overlay{padding:24px;}
  #modal-scroll-inner{padding:28px 16px;}
  #modal-box{width:min(1040px,96vw);border-radius:16px;overflow:hidden;background:#f5f9fe;border:1px solid #ccd8e9;box-shadow:0 28px 80px rgba(0,0,0,0.24);}
  #modal-head{padding:22px 28px;background:linear-gradient(135deg,#2c2c2c,#3b352f);display:flex;align-items:center;justify-content:space-between;gap:16px;}
  #modal-title{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;font-style:italic;font-weight:500;color:#fff;line-height:1.1;}
  .modal-close-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,0.22);background:rgba(255,255,255,0.08);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s,transform .18s;flex-shrink:0;}
  .modal-close-btn:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.36);transform:translateY(-1px);}
  #modal-box > .ms:first-of-type{margin-top:0;}
  .ms{margin:18px 22px 0;background:#fff;border:1px solid #d5e3f0;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,0.03);overflow:hidden;}
  .ms-head{padding:12px 16px;background:#f0f5fc;border-bottom:1px solid #d8e8f4;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#546278;}
  .ms > .f-row,.ms > #checklist-form,.ms > #file-upload-area,.ms > #file-upload-status,.ms > #modal-file-list{margin-left:16px;margin-right:16px;}
  .ms > .f-row:last-child{padding-bottom:16px;}
  .f-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;padding:16px 16px 0;}
  .f-field{display:flex;flex-direction:column;gap:6px;min-width:0;grid-column:span 3;}
  .f-field[style*="flex:2"]{grid-column:span 7 !important;}
  .f-field[style*="flex:1"]{grid-column:span 6 !important;}
  .wedding-contacts-section{background:#fbfdff;}
  .wedding-contacts-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;background:#f0f5fc;border-bottom:1px solid #d8e8f4;}
  .wedding-contacts-title{padding:0;background:transparent;border-bottom:0;}
  .wedding-contacts-subtitle{margin-top:3px;font-size:12px;color:#6f7f93;letter-spacing:0;}
  .wedding-contacts-add-btn{border:1px solid #b8c9dc;background:#fff;color:#1f3148;border-radius:8px;padding:8px 12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s;}
  .wedding-contacts-add-btn:hover{background:#1f3148;border-color:#1f3148;color:#fff;transform:translateY(-1px);}
  #additional-contacts-list{display:grid;gap:10px;padding:14px 16px 16px;}
  .wc-row{display:grid;grid-template-columns:minmax(110px,.8fr) minmax(150px,1fr) minmax(190px,1.35fr) minmax(140px,1fr) auto;gap:10px;align-items:end;padding:12px;border:1px solid #d6e3f0;background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(31,49,72,.04);}
  .wc-field{display:flex;flex-direction:column;gap:5px;min-width:0;}
  .wc-label{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#687789;}
  .wc-input,.wc-role-select{width:100%;height:38px;border:1px solid #cbd9e8;border-radius:8px;background:#f8fbff;color:#1f2937;font-size:13px;padding:8px 10px;outline:none;}
  .wc-input:focus,.wc-role-select:focus{border-color:#315f96;background:#fff;box-shadow:0 0 0 3px rgba(49,95,150,.12);}
  .wc-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:38px;}
  .wc-check{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#425266;white-space:nowrap;}
  .wc-check input{width:16px;height:16px;accent-color:#315f96;}
  .wc-remove-btn{height:34px;border:1px solid #ead4d1;background:#fff;color:#9d3d35;border-radius:8px;padding:0 10px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;}
  .wc-remove-btn:hover{background:#fff4f2;border-color:#d8958c;color:#7b2c26;}
  .wc-empty{border:1px dashed #cbd9e8;border-radius:10px;background:#f8fbff;color:#75849a;font-size:13px;padding:16px;text-align:center;}
  .f-field label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#627287;font-weight:700;}
  .f-field input,.f-field select,.f-field textarea{width:100%;min-width:0;padding:11px 12px;border:1.5px solid #c9d6e8;border-radius:10px;background:#f5f9fe;color:#2c2c2c;font-size:13px;line-height:1.35;outline:none;transition:border-color .15s,box-shadow .15s,background .15s;appearance:none;}
  .f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:#1E3D6F;box-shadow:0 0 0 4px rgba(47,95,167,.10);background:#fff;}
  .f-field textarea{min-height:108px;resize:vertical;}
  #f-couple{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-style:italic;}
  #f-date,#f-guests,#f-dw,#f-package-type,#f-grand-total,#f-runner1,#f-runner2,#f-valet1,#f-valet2,#f-valet3,#f-lead,#f-assistant,#f-contact-name,#f-contact-phone,#f-contact-email{min-height:44px;}
  #checklist-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;padding:16px;}
  .modal-checklist-grid .check-label{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid #d8e5f2;border-radius:10px;background:#f5f9fe;min-height:100%;}
  .modal-checklist-grid .check-label:hover{border-color:#afc4d9;background:#fff;}
  .modal-checklist-grid .custom-check{margin-top:1px;}
  #file-upload-area{margin-top:16px;padding:20px;border:2px dashed #c9d6e8;border-radius:14px;background:linear-gradient(180deg,#f5f9fe,#f4f8fc);text-align:center;cursor:pointer;transition:border-color .18s,background .18s,transform .18s;}
  #file-upload-area:hover,#file-upload-area.dragging{border-color:#1E3D6F;background:#f5fbff;transform:translateY(-1px);}
  .upload-icon{font-size:26px;color:#1E3D6F;line-height:1;margin-bottom:6px;}
  .upload-text{font-size:13px;color:#5e554c;}
  #file-upload-status{padding:10px 16px 0;color:#627287;font-size:12px;}
  #modal-file-list{display:flex;flex-wrap:wrap;gap:10px;padding:14px 16px 18px;}
  #modal-file-list a,.modal-file-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:8px 12px;border:1px solid #ccd8e9;border-radius:999px;background:#fff;font-size:12px;color:#2c2c2c;text-decoration:none;}
  #modal-file-list button{border:none;background:none;color:#2F5FA7;cursor:pointer;font-size:16px;line-height:1;}
  #modal-foot{display:flex;justify-content:flex-end;gap:12px;padding:20px 22px 22px;background:#f0f5fc;border-top:1px solid #d5e3f0;margin-top:18px;position:sticky;bottom:0;}
  .ghost-btn,.dark-btn{min-height:44px;padding:0 18px;border-radius:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s,color .15s;}
  .ghost-btn{background:#fff;border:1.5px solid #c9d6e8;color:#546278;}
  .ghost-btn:hover{background:#f5faff;border-color:#b0c6da;color:#2c2c2c;}
  .ghost-btn.danger{border-color:rgba(198,40,40,.25);color:var(--staff-danger,#c62828);}
  .ghost-btn.danger:hover{background:var(--staff-danger-soft,#fff3f0);border-color:rgba(198,40,40,.4);color:var(--staff-danger,#c62828);}
  .dark-btn{background:#2c2c2c;border:1.5px solid #2c2c2c;color:#fff;box-shadow:0 10px 20px rgba(44,44,44,.15);}
  .dark-btn:hover{background:#4a3a60;border-color:#4a3a60;transform:translateY(-1px);}
  @media (max-width: 980px){
    #modal-box{width:min(92vw,760px);}
    .f-field{grid-column:span 6;}
    .f-field[style*="flex:2"]{grid-column:span 12 !important;}
    .wc-row{grid-template-columns:repeat(2,minmax(0,1fr));}
    .wc-field-email{grid-column:span 2;}
    .wc-row-actions{grid-column:span 2;justify-content:space-between;}
    #checklist-form{grid-template-columns:repeat(2,minmax(0,1fr));}
  }

@media (max-width: 768px) {
    #header { padding: 12px 14px 10px; }
    #header-inner { flex-direction: column; gap: 10px; }
    #nav-tabs { gap: 4px; flex-wrap: wrap; justify-content: center; width: 100%; }
    .nav-tab { padding: 7px 10px; font-size: 9px; letter-spacing: 0.08em; flex: 1; text-align: center; min-width: 0; }
    #stats { margin: 0 14px !important; }
    .stat-num { font-size: 22px; }
    .stat-label { font-size: 8px; }
    #weddings-actions { padding: 10px 14px 0; }
    #add-btn { width: 100%; text-align: center; }
    #search-section { padding: 12px 14px 0; }
    #table-section  { padding: 0 14px 40px; margin-top: 12px; }
    .staff-summary { display: none; }
    .expand-panel { padding: 0; }
    .exp-grid-top  { grid-template-columns: 1fr; }
    .exp-section   { padding: 12px 14px; border-bottom: 1px solid #e2ecf5; }
    .exp-notes-grid { grid-template-columns: 1fr; gap: 10px; }
    .exp-row  { flex-direction: column; gap: 2px; }
    .exp-lbl  { min-width: unset; font-size: 8px; }
    .checklist-grid { grid-template-columns: 1fr; }
    .edit-btn { flex: 1; text-align: center; font-size: 10px; padding: 9px 12px; }
    #modal-overlay { padding: 0; }
    #modal-scroll-inner { padding: 0; align-items: flex-start; overflow: hidden; }
    #modal-box { width: 100%; max-width: 100%; max-height: 100dvh; max-height: 100vh; border-radius: 0; margin: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
    #modal-head { padding: 16px 14px; position: sticky; top: 0; z-index: 3; }
    #modal-title { font-size: 20px; }
    .ms { margin: 14px 10px 0; border-radius: 12px; flex-shrink: 0; }
    .wedding-contacts-head{align-items:flex-start;flex-direction:column;padding:14px;}
    .wedding-contacts-add-btn{width:100%;}
    #additional-contacts-list{padding:12px;}
    .wc-row{grid-template-columns:1fr;gap:9px;padding:10px;}
    .wc-field-email,.wc-row-actions{grid-column:auto;}
    .wc-row-actions{align-items:flex-start;flex-direction:column;gap:8px;}
    .wc-remove-btn{width:100%;}
    .f-row { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
    .f-field, .f-field[style*='flex:2'], .f-field[style*='flex:1'] { grid-column: auto !important; }
    #checklist-form { grid-template-columns: 1fr; padding: 14px; }
    #modal-foot { padding: 14px 10px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); flex-direction: column-reverse; position: sticky; bottom: 0; z-index: 2; flex-shrink: 0; }
    .ghost-btn, .dark-btn, #modal-save-btn { width: 100%; }
    #cal-body { padding: 12px 14px; }
    .cal-day { min-height: 52px; padding: 4px 3px; }
    .cal-wedding-chip { font-size: 8px; padding: 2px 4px; }
    #cal-detail-box { width: calc(100% - 24px); max-height: 85vh; margin: 12px; }
    #file-viewer-box { width:100% !important; height:100% !important; top:0 !important; left:0 !important; transform:none !important; border-radius:0 !important; max-height:100vh !important; }
    #qa-body { padding: 14px 14px 48px; }
    #qa-filters { gap: 5px; flex-wrap: wrap; margin-bottom: 16px; }
    .qa-filter-btn { padding: 6px 10px; font-size: 9px; flex: 1; text-align: center; }
    #wl-body { padding: 20px 16px 56px; }
    #wl-subtabs { gap: 0; overflow-x: auto; }
    .wl-subtab { padding: 12px 18px; font-size: 10px; white-space: nowrap; }
    .wl-form-header { padding: 22px 20px 18px; }
    .wl-form-body { padding: 24px 20px 20px; gap: 22px; }
    .wl-form-footer { padding: 18px 20px; flex-direction: column; gap: 12px; align-items: stretch; }
    .wl-form-footer-actions { width:100%; flex-direction:column; align-items:stretch; margin-left:0; }
    .wl-cancel-edit-btn, .wl-save-btn { width: 100%; text-align: center; }
    .wl-save-btn { width: 100%; text-align: center; padding: 14px; }
    .wl-field-row { flex-direction: column; gap: 20px; }
    #wl-avatar-picker { gap: 24px; justify-content: center; padding: 10px 0; }
    .wl-avatar-circle { width: 58px; height: 58px; font-size: 22px; }
    .wl-log-card { padding: 20px 20px; }
    .wl-log-grid  { grid-template-columns: 1fr; }
    .wl-history-toolbar { padding: 18px 16px; margin-bottom: 22px; }
    .wl-hist-nav-group { width: 100%; justify-content: stretch; }
    .wl-hist-nav-group .wl-nav-btn { flex: 1; justify-content: center; }
    .wl-recent-item { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; }
    .wl-recent-count { order: 2; }

    #tasks-body { padding: 14px 14px 56px; }
    .tasks-shell { grid-template-columns: 1fr; gap: 16px; }
    .tasks-card-head { padding: 16px 16px 14px; }
    .tasks-card-title { font-size: 22px; }
    .tasks-card-sub, .tasks-list-sub { font-size: 11px; }
    .tasks-create-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .tasks-add-btn { width: 100%; padding: 13px; }
    .tasks-summary { grid-template-columns: 1fr; }
    .tasks-summary-item { border-right: none; border-bottom: 1px solid #e2ecf5; }
    .tasks-summary-item:last-child { border-bottom: none; }
    .tasks-list-head { padding: 16px; }
    #tasks-list-wrap, .tasks-create-body { padding: 16px; }
    .tasks-filter-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .tasks-filter-btn { width: 100%; padding: 10px 8px; text-align: center; }
    .task-item { flex-direction: column; gap: 0; }
    .task-hitarea { width: 100%; padding: 14px 14px 10px; }
    .task-actions { width: 100%; justify-content: stretch; padding: 0 14px 14px; gap: 8px; }
    .task-action-btn { flex: 1; min-height: 40px; }
    .task-action-btn.secondary { min-width: 0; }
  }
  @media (max-width: 520px) {
    #tasks-body { padding-left: 10px; padding-right: 10px; }
    .tasks-card { border-radius: 8px; }
    .tasks-card-head, .tasks-create-body, #tasks-list-wrap, .tasks-list-head { padding-left: 14px; padding-right: 14px; }
    .tasks-list-title { font-size: 22px; }
    .tasks-filter-tabs { grid-template-columns: 1fr; }
    .tasks-filter-btn { border-radius: 12px; }
    .task-hitarea { gap: 12px; align-items: flex-start; }
    .task-toggle { width: 20px; height: 20px; }
    .task-title { font-size: 13px; }
    .task-meta { gap: 6px; }
    .task-badge, .task-time { font-size: 10px; }
    .task-actions { flex-direction: column; }
    .task-action-btn { width: 100%; }
  }
  @media (max-width: 400px) {
    .nav-tab { font-size: 8px; padding: 6px 7px; }
    .qa-filter-btn { font-size: 8px; padding: 5px 7px; }
  }

/* Wix paste-safe cleanup */
#logo-src-holder,
#footer-logo,
#modal-logo-img{display:none !important;}
#logo-block,
#modal-head-logo{gap:0 !important;}
#footer-name{margin-top:0 !important;}
button{font-family:inherit;}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid #1E3D6F;
  outline-offset:2px;
}



/* ===== Wix display enhancements ===== */
#header-inner{max-width:1400px;}
#header-top{gap:24px;}
#nav-tabs{margin-top:0;margin-left:auto;justify-content:flex-end;}
#page-weddings,#page-calendar,#page-qa,#page-worklogs{padding-bottom:40px;}
#weddings-actions{max-width:1300px;margin:26px auto 0;padding:0 48px;display:flex;justify-content:flex-end;align-items:center;}
#add-btn{border-radius:999px;padding:13px 22px;font-size:11px;letter-spacing:0.14em;box-shadow:0 10px 24px rgba(44,44,44,0.14);}
#add-btn:hover{transform:translateY(-1px);}
#stats{padding-left:48px;padding-right:48px;gap:0;}
#search-section{padding-top:22px;}

#cal-body{max-width:1320px;margin:0 auto;padding:28px 32px 56px;}
#cal-nav{max-width:520px;margin:4px auto 26px;gap:34px;}
#cal-month-label{font-size:30px;min-width:280px;}
#cal-grid-head{gap:10px;margin-bottom:10px;}
#cal-grid{gap:10px;align-items:stretch;}
.cal-dow{padding:10px 0 8px;font-size:11px;letter-spacing:0.18em;}
.cal-day{min-height:138px;padding:12px;border-radius:12px;box-shadow:0 1px 0 rgba(44,44,44,0.03) inset;overflow:hidden;display:flex;flex-direction:column;}
.cal-day.has-wedding{box-shadow:0 0 0 1px rgba(47,95,167,0.08) inset;}
.cal-day-num{font-size:14px;font-weight:600;margin-bottom:8px;}
.cal-wedding-chip{display:block;white-space:normal;overflow:visible;text-overflow:unset;line-height:1.35;padding:10px 12px;border-radius:10px;margin-top:8px;box-shadow:0 8px 18px rgba(0,0,0,0.08);}
.cal-tour-chip{display:block;white-space:normal;overflow:visible;text-overflow:unset;line-height:1.35;padding:10px 12px;border-radius:10px;margin-top:8px;box-shadow:0 8px 18px rgba(0,0,0,0.10);}
.cal-chip-pkg{margin-top:4px;font-size:9px;line-height:1.3;opacity:0.85;}
.cal-chip-tour-label{margin-top:4px;font-size:9px;line-height:1.3;opacity:0.85;}
.cal-nav-btn{width:44px;height:44px;font-size:18px;background:rgba(255,255,255,0.65);backdrop-filter:blur(2px);}

#qa-body{max-width:1140px;padding:32px 32px 56px;}
.qa-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:26px;flex-wrap:wrap;}
#qa-filters{margin-bottom:0;flex-wrap:wrap;}
#qa-page-add-btn{padding:12px 18px;border-radius:999px;border:1.5px solid rgba(47,95,167,0.28);background:#fff;color:#1E3D6F;font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 24px rgba(47,95,167,0.10);transition:all 0.18s;}
#qa-page-add-btn:hover{transform:translateY(-1px);border-color:#1E3D6F;background:#f0f7ff;}
#qa-list{gap:16px;}
.qa-card{border-radius:12px;box-shadow:0 10px 22px rgba(0,0,0,0.04);}
#qa-empty{padding:88px 32px;background:#fff;border:1px solid #dde8f3;border-radius:16px;box-shadow:0 10px 22px rgba(0,0,0,0.03);}
#qa-empty-icon{font-size:56px;}
#qa-modal-overlay{display:none;position:fixed;inset:0;z-index:1000;background:rgba(20,18,16,0.56);backdrop-filter:blur(6px);padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));}
#qa-modal-overlay.open{display:flex;align-items:center;justify-content:center;}
#qa-modal-box{position:relative;top:auto;left:auto;transform:none;width:min(640px,100%);border-radius:18px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,0.26);}
#qa-modal-head{padding:22px 26px;background:linear-gradient(135deg,#1e3d6f,#142850);}
#qa-modal-title{font-size:28px;line-height:1.1;}
#qa-modal-body{padding:24px 26px 22px;background:#fff;}
#qa-modal-status{min-height:20px;padding:0 26px 10px;background:#fff;color:#b33a3a;font-size:12px;line-height:1.45;}
#qa-modal-footer{padding:16px 26px;background:#f4f8fc;}
.qa-modal-input,.qa-modal-select{border-radius:10px;padding:12px 14px;font-size:14px;}
textarea.qa-modal-input{min-height:128px;}
.qa-modal-input[aria-invalid="true"],.qa-modal-select[aria-invalid="true"]{border-color:#b33a3a;background:#fff7f7;}
.qa-modal-submit,.qa-modal-cancel{border-radius:999px;padding:11px 18px;}

@media (max-width: 980px) {
  #weddings-actions,#search-section,#table-section,#stats{padding-left:20px;padding-right:20px;}
  #cal-body{padding:20px 16px 44px;}
  #cal-grid-head{gap:6px;}
  #cal-grid{gap:6px;}
  .cal-day{min-height:112px;padding:9px;border-radius:10px;}
  #qa-body{padding:22px 16px 44px;}
}

@media (max-width: 768px) {
  #header{padding:16px 14px 12px;}
  #header-top{align-items:flex-start;}
  #nav-tabs{margin-left:0;width:100%;justify-content:center;margin-top:10px;}
  #weddings-actions{padding:0 14px;margin-top:16px;justify-content:stretch;}
  #add-btn{width:100%;}
  #cal-month-label{font-size:24px;min-width:0;}
  #cal-grid-head{display:none;}
  #cal-grid{grid-template-columns:1fr;gap:10px;}
  .cal-day{min-height:auto;padding:12px;}
  .cal-day.other-month{display:none;}
  .cal-day-num{margin-bottom:6px;}
  .qa-toolbar{align-items:stretch;}
  #qa-page-add-btn{width:100%;}
  #qa-modal-overlay{padding:12px;}
  #qa-modal-box{width:100%;max-height:92vh;overflow:auto;border-radius:16px;}
}


/* === Final Wix polish overrides === */
#logo-block{gap:0 !important;align-items:flex-start !important;}
#logo-text-wrap{display:flex;flex-direction:column;gap:6px;}
#logo-text-name{font-size:26px !important;line-height:1.05 !important;letter-spacing:0.08em !important;white-space:nowrap;}
#logo-text-sub{font-family:'Jost','Helvetica Neue',sans-serif !important;font-style:normal !important;font-size:10px !important;letter-spacing:0.22em !important;text-transform:uppercase !important;color:#8fa4bb !important;padding-top:8px !important;border-top:1px solid rgba(255,255,255,0.75) !important;display:block !important;}
#logo-text-portal{display:none !important;}

#cal-detail-overlay{display:none;position:fixed;inset:0;z-index:1000;background:rgba(20,18,16,0.58);backdrop-filter:blur(6px);padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));align-items:center;justify-content:center;}
#cal-detail-box{position:relative !important;top:auto !important;left:auto !important;transform:none !important;width:min(720px,92vw) !important;max-height:min(86vh,900px) !important;border-radius:18px !important;box-shadow:0 32px 90px rgba(0,0,0,0.30) !important;}
#cal-detail-head{padding:24px 28px !important;border-radius:18px 18px 0 0 !important;}
#cal-detail-date{font-size:10px !important;letter-spacing:0.18em !important;}
#cal-detail-couple{font-size:28px !important;line-height:1.15 !important;max-width:540px;}
#cal-detail-body{padding:0 !important;}
.cal-detail-section{padding:18px 28px !important;}
.cal-detail-section-head{font-size:9px !important;letter-spacing:0.18em !important;margin-bottom:12px !important;}
.cal-detail-row{padding:6px 0 !important;}
.cal-detail-lbl{min-width:120px !important;}
.cal-detail-check-grid{grid-template-columns:1fr 1fr !important;gap:10px 18px !important;}
.cal-detail-text{white-space:pre-wrap;}
#cal-detail-footer{padding:16px 28px !important;}
.cal-detail-edit-btn{border-radius:999px !important;padding:10px 20px !important;}
.cal-detail-close{width:36px !important;height:36px !important;font-size:14px !important;}

@media (max-width: 768px){
  #logo-text-name{font-size:18px !important;white-space:normal;}
  #logo-text-sub{font-size:9px !important;letter-spacing:0.16em !important;}
  #cal-detail-overlay{padding:12px;}
  #cal-detail-box{width:100% !important;max-height:92vh !important;border-radius:16px !important;}
  #cal-detail-head{padding:18px 18px 16px !important;border-radius:16px 16px 0 0 !important;}
  #cal-detail-couple{font-size:22px !important;max-width:none;}
  .cal-detail-section{padding:16px 18px !important;}
  .cal-detail-row{flex-direction:column;gap:2px !important;align-items:flex-start !important;}
  .cal-detail-lbl{min-width:auto !important;}
  .cal-detail-check-grid{grid-template-columns:1fr !important;}
  #cal-detail-footer{padding:14px 18px !important;}
}

/* === File Viewer Modal === */
#file-viewer-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(20,18,16,0.72);
  backdrop-filter:blur(6px);
}
#file-viewer-box{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(960px,calc(100vw - 40px));
  height:min(88vh,860px);
  background:#fff;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,0.32);
}
#file-viewer-head{
  background:#2c2c2c;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-shrink:0;
}
.fv-head-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}
.fv-head-icon{font-size:16px;flex-shrink:0;}
#file-viewer-name{
  font-family:'Jost',sans-serif;
  font-size:13px;
  color:#dce8f4;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.fv-head-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.fv-download-btn{
  padding:7px 14px;
  border:1.5px solid rgba(255,255,255,0.28);
  border-radius:6px;
  background:transparent;
  color:#ccc;
  font-family:'Jost',sans-serif;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:all 0.15s;
}
.fv-download-btn:hover{background:rgba(255,255,255,0.12);color:#fff;}
.fv-close-btn{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.08);
  color:#ccc;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.15s;
}
.fv-close-btn:hover{background:rgba(255,255,255,0.2);color:#fff;}
#file-viewer-body{
  flex:1;
  overflow:auto;
  background:#f4f7fc;
  display:flex;
  align-items:stretch;
  justify-content:center;
}
#file-viewer-body iframe{
  width:100%;
  height:100%;
  border:none;
  display:block;
  flex:1;
}
#file-viewer-body img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  padding:16px;
  box-sizing:border-box;
  align-self:center;
}
.file-viewer-unsupported{
  text-align:center;
  padding:56px 24px;
  align-self:center;
}
.fv-icon{font-size:52px;margin-bottom:14px;}
.fv-filename{
  font-size:15px;
  font-weight:600;
  color:#2c2c2c;
  margin-bottom:8px;
  word-break:break-all;
}
.fv-msg{
  font-size:13px;
  color:#888;
  line-height:1.7;
  margin-bottom:22px;
  max-width:320px;
  margin-left:auto;
  margin-right:auto;
}
.fv-open-btn{
  display:inline-block;
  padding:12px 28px;
  background:#2c2c2c;
  color:#fff;
  border-radius:6px;
  text-decoration:none;
  font-family:'Jost',sans-serif;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  transition:background 0.15s;
}
.fv-open-btn:hover{background:#4a3a60;}


/* === Mobile premium tasks overrides === */
@media (max-width: 768px){
  body.page-tasks{background:#f0f5fb;}
  #tasks-body{padding:18px 12px 72px !important;}
  .tasks-shell{gap:18px !important;}
  .tasks-card{
    border-radius:18px !important;
    border:1px solid #dce8f4 !important;
    box-shadow:0 10px 30px rgba(67,100,140,0.08) !important;
    overflow:hidden !important;
  }
  .tasks-card-head{
    padding:18px 18px 14px !important;
    background:linear-gradient(180deg,#f5f9fe 0%, #eef4fb 100%) !important;
  }
  .tasks-card-kicker{font-size:8px !important; letter-spacing:0.18em !important; color:#8fa4bb !important;}
  .tasks-card-title{font-size:24px !important; line-height:1.05 !important;}
  .tasks-card-sub, .tasks-list-sub{font-size:12px !important; line-height:1.6 !important; color:#7a8ea4 !important;}
  .tasks-create-body{padding:16px 16px 18px !important; gap:14px !important;}
  .tasks-create-row{gap:10px !important;}
  .tasks-label{font-size:8px !important; letter-spacing:0.16em !important;}
  .tasks-input, .tasks-select{
    min-height:48px !important;
    padding:13px 14px !important;
    border-radius:14px !important;
    background:#f5f9fe !important;
    font-size:14px !important;
  }
  .tasks-add-btn{
    min-height:48px !important;
    border-radius:14px !important;
    box-shadow:0 8px 20px rgba(91,74,97,0.18) !important;
  }
  .tasks-summary{
    grid-template-columns:repeat(3,1fr) !important;
    gap:8px !important;
    padding:0 16px 16px !important;
    border-top:none !important;
    background:#fff !important;
  }
  .tasks-summary-item{
    border:none !important;
    background:#f4f8fc !important;
    border-radius:14px !important;
    padding:12px 10px !important;
    text-align:center !important;
  }
  .tasks-summary-num{font-size:24px !important;}
  .tasks-summary-label{font-size:8px !important; letter-spacing:0.12em !important; margin-top:4px !important;}
  .tasks-list-head{padding:18px 16px 12px !important; gap:14px !important;}
  .tasks-list-title{font-size:24px !important;}
  .tasks-filter-tabs{
    width:calc(100% + 8px) !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:8px !important;
    margin-right:-8px !important;
    padding-bottom:2px !important;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .tasks-filter-tabs::-webkit-scrollbar{display:none;}
  .tasks-filter-btn{
    width:auto !important;
    flex:0 0 auto !important;
    min-width:max-content !important;
    white-space:nowrap !important;
    border-radius:999px !important;
    padding:10px 14px !important;
    font-size:10px !important;
    background:#f4f8fc !important;
  }
  .tasks-filter-btn.active{
    background:#5b4a61 !important;
    border-color:#5b4a61 !important;
    box-shadow:0 8px 18px rgba(91,74,97,0.18) !important;
  }
  #tasks-list-wrap{padding:10px 12px 16px !important; background:#fff !important;}
  .tasks-group + .tasks-group{margin-top:18px !important;}
  .tasks-group-label{margin:8px 6px 12px !important; font-size:8px !important; letter-spacing:0.18em !important;}
  .task-item{
    flex-direction:column !important;
    gap:0 !important;
    border-radius:18px !important;
    border:1px solid #dce8f4 !important;
    box-shadow:0 8px 22px rgba(67,100,140,0.05) !important;
    background:linear-gradient(180deg,#ffffff 0%, #f5f9fe 100%) !important;
  }
  .task-item:has(> .task-title){
    flex-direction:row !important;
    align-items:center !important;
    gap:8px !important;
    padding:10px 12px !important;
  }
  .task-item:has(> .task-title) .task-title{
    margin-bottom:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    flex:1 !important;
    min-width:0 !important;
  }
  .task-item + .task-item{margin-top:14px !important;}
  .task-hitarea{
    width:100% !important;
    padding:16px 16px 12px !important;
    gap:14px !important;
    align-items:flex-start !important;
  }
  .task-toggle{
    width:24px !important;
    height:24px !important;
    border-radius:7px !important;
    margin-top:2px !important;
    border-width:1.5px !important;
  }
  .task-main{display:block !important;}
  .task-title{
    font-size:15px !important;
    line-height:1.55 !important;
    margin-bottom:10px !important;
    letter-spacing:0.01em;
  }
  .task-meta{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }
  .task-badge{
    padding:6px 10px !important;
    border-radius:999px !important;
    font-size:10px !important;
    letter-spacing:0.08em !important;
  }
  .task-time{
    display:block !important;
    font-size:11px !important;
    color:#7a8ea4 !important;
    line-height:1.5 !important;
  }
  .task-actions{
    width:100% !important;
    padding:0 16px 16px !important;
    gap:8px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }
  .task-action-btn{
    min-height:42px !important;
    border-radius:12px !important;
    font-size:10px !important;
    letter-spacing:0.1em !important;
    background:#fff !important;
  }
  .task-action-btn.secondary{min-width:0 !important;}
  .task-delete-btn{grid-column:1 / -1 !important;}
  .tasks-empty{
    padding:52px 18px !important;
    border:1px dashed #dae4f0 !important;
    border-radius:18px !important;
    background:#f4f8fc !important;
  }
}

@media (max-width: 520px){
  #tasks-body{padding:16px 10px 68px !important;}
  .tasks-card-head{padding:16px 16px 12px !important;}
  .tasks-card-title,.tasks-list-title{font-size:22px !important;}
  .tasks-card-sub,.tasks-list-sub{font-size:11px !important;}
  .tasks-create-body{padding:14px 14px 16px !important;}
  .tasks-summary{padding:0 14px 14px !important; gap:6px !important;}
  .tasks-summary-item{padding:11px 8px !important;}
  .tasks-summary-num{font-size:22px !important;}
  .tasks-summary-label{font-size:7px !important;}
  .tasks-list-head{padding:16px 14px 10px !important;}
  #tasks-list-wrap{padding:8px 10px 14px !important;}
  .tasks-filter-btn{padding:9px 12px !important; font-size:9px !important;}
  .task-item{border-radius:16px !important;}
  .task-item:has(> .task-title){flex-direction:row !important; align-items:center !important; gap:8px !important; padding:10px 12px !important;}
  .task-hitarea{padding:14px 14px 10px !important; gap:12px !important;}
  .task-title{font-size:14px !important; margin-bottom:9px !important;}
  .task-item:has(> .task-title) .task-title{margin-bottom:0 !important;}
  .task-meta{gap:7px !important;}
  .task-actions{padding:0 14px 14px !important; grid-template-columns:1fr !important;}
  .task-delete-btn{grid-column:auto !important;}
}


/* === Interaction and picker enhancements === */
#cal-detail-overlay{align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#cal-detail-box{position:relative !important; top:auto !important; left:auto !important; transform:none !important; margin:0 auto; width:min(720px,100%); max-height:none;}
#cal-detail-body{max-height:calc(100vh - 220px);}
.person-picker{display:flex;flex-wrap:wrap;gap:4px;}
.person-chip{display:inline-flex;flex-direction:column;align-items:center;gap:5px;padding:8px 6px;border:none;border-radius:10px;background:transparent;color:#4e6075;cursor:pointer;transition:all .15s ease;min-width:52px;}
.person-chip:hover{background:#f0f5fa;}
.person-chip:hover .person-chip-icon{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,0.14);}
.person-chip.selected{background:#f0f5fa;}
.person-chip.selected .person-chip-icon{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px #2c2c2c;}
.person-chip-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;transition:transform .15s,box-shadow .15s;}
.person-chip-label{white-space:nowrap;font-size:10px;font-weight:500;letter-spacing:0.01em;color:#4e6075;}
.person-chip.selected .person-chip-label{color:#1a1a1a;font-weight:600;}
.person-chip.pam .person-chip-icon{background:#4a5a7a;}
.person-chip.gary .person-chip-icon{background:#4a7a4e;}
.person-chip.maggie .person-chip-icon{background:#7a3a5a;}
.person-chip.marianne .person-chip-icon{background:#2e6b9e;}
.person-chip.lindsey .person-chip-icon{background:#3f6f8f;}
.person-chip.other .person-chip-icon{background:#6a82a0;}
.qa-person-picker{margin-top:4px;}
.tasks-list-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px 16px;}
.tasks-sort-wrap{display:flex;align-items:center;gap:8px;}
.tasks-sort-label{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:#627287;font-weight:600;}
.tasks-sort-select{border:1.5px solid #c9d8e8;border-radius:999px;background:#fff;padding:9px 14px;font-size:11px;color:#3e5268;outline:none;}
.tasks-sort-select:focus{border-color:#5b4a61;}
.task-person-picker{margin-top:2px;}
.task-badge.marianne{background:#eaf3fb;color:#2e6b9e;}
.task-badge.lindsey{background:#e8f2f8;color:#3f6f8f;}
.task-badge.other{background:#e2ecf5;color:#6a82a0;}
.qa-askedby-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:#eef4fb;color:#4e6a87;font-size:10px;font-weight:600;}
.qa-askedby-badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.72;}
.qa-askedby-badge.pam{background:#e8ecf5;color:#4a5a7a;}
.qa-askedby-badge.gary{background:#e8f5ea;color:#4a7a4e;}
.qa-askedby-badge.maggie{background:#f5e8f0;color:#7a3a5a;}
.qa-askedby-badge.marianne{background:#eaf3fb;color:#2e6b9e;}
.qa-askedby-badge.lindsey{background:#e8f2f8;color:#3f6f8f;}
.qa-askedby-badge.other{background:#e2ecf5;color:#6a82a0;}
@media (max-width: 768px){
  #cal-detail-overlay{padding:14px 10px 18px;align-items:flex-start;}
  #cal-detail-box{width:100%;max-width:100%;border-radius:12px;}
  #cal-detail-body{max-height:none;}
  .person-picker{gap:6px;}
  .person-chip{width:auto;justify-content:center;padding:8px 6px;}
  .tasks-list-controls{width:100%;justify-content:flex-start;}
  .tasks-sort-wrap{width:100%;}
  .tasks-sort-select{width:100%;border-radius:12px;}
}



/* === Wix embed height + compact mobile adjustments === */
html{height:auto;background:#f4f7fc;overflow-x:hidden;}
body{min-height:auto !important;height:auto;overflow:visible;}
#app{min-height:0;}
#footer{padding:22px 24px 24px;}
#footer-logo{display:none !important;}
#footer-name{margin-top:0 !important;}

@media (max-width: 768px){
  body{font-size:12px !important;}
  #conn-bar{padding:6px 12px !important;font-size:10px !important;}
  #header{
    position:sticky;
    top:0;
    z-index:120;
    padding:12px 10px 10px !important;
    box-shadow:0 3px 12px rgba(0,0,0,0.10) !important;
  }
  #header-inner{max-width:none !important;}
  #header-top{gap:10px !important;}
  #logo-block{width:100%;}
  #logo-text-wrap{gap:4px !important;}
  #nav-tabs{
    width:100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    gap:6px !important;
    padding-bottom:2px !important;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  #nav-tabs::-webkit-scrollbar{display:none;}
  .nav-tab{flex:0 0 auto !important;padding:8px 12px !important;font-size:9px !important;letter-spacing:0.1em !important;}
  #stats{
    margin-top:12px !important;
    padding:0 10px !important;
    border-top:none !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px !important;
    max-width:none !important;
  }
  .stat-item{
    padding:10px 8px !important;
    margin:0 !important;
    border-right:none !important;
    background:#fff;
    border:1px solid #dce8f4;
    border-radius:12px;
    text-align:center;
  }
  .stat-num{font-size:20px !important;}
  .stat-label{font-size:7px !important;letter-spacing:0.12em !important;}
  #weddings-actions,#search-section,#table-section,#cal-body,#qa-body,#tasks-body,#wl-body{padding-left:10px !important;padding-right:10px !important;}
  #weddings-actions{margin-top:12px !important;}
  #search-section{padding-top:10px !important;}
  #table-section{margin-top:10px !important;padding-bottom:22px !important;}
  .year-group{margin-bottom:18px !important;}
  .year-label{margin-bottom:6px !important;}
  .mobile-cards{display:block !important;}
  .wedding-table{display:none !important;}
  .wedding-card{border-radius:14px !important;margin-bottom:12px !important;box-shadow:0 6px 18px rgba(0,0,0,0.05) !important;}
  .card-header{padding:14px 14px 12px !important;}
  .card-meta{padding:10px 14px !important;gap:8px 10px !important;}
  .card-actions{padding:10px 14px !important;flex-wrap:wrap !important;}
  .card-checklist{padding:10px 14px 12px !important;}
  #cal-body{padding-top:14px !important;padding-bottom:24px !important;}
  #cal-nav{margin:0 auto 14px !important;gap:12px !important;}
  #cal-month-label{font-size:20px !important;line-height:1.2 !important;}
  .cal-nav-btn{width:40px !important;height:40px !important;}
  .cal-day{padding:10px !important;border-radius:12px !important;}
  .cal-wedding-chip{padding:8px 10px !important;margin-top:6px !important;box-shadow:none !important;}
  .cal-tour-chip{padding:8px 10px !important;margin-top:6px !important;box-shadow:none !important;}
  .cal-rental-chip,.cal-family-chip,.cal-event-chip,.cal-meeting-chip{padding:6px 8px !important;margin-top:5px !important;border-radius:8px !important;}
  #qa-body{padding-top:14px !important;padding-bottom:24px !important;}
  .qa-toolbar{margin-bottom:14px !important;gap:12px !important;}
  #qa-empty{padding:36px 14px !important;}
  #tasks-body{padding-top:14px !important;padding-bottom:26px !important;}
  .tasks-shell{gap:14px !important;}
  .tasks-card-head{padding:16px 16px 12px !important;}
  .tasks-card-title,.tasks-list-title{font-size:21px !important;}
  .tasks-card-sub,.tasks-list-sub{font-size:11px !important;line-height:1.45 !important;}
  .tasks-create-body{padding:14px 14px 14px !important;gap:12px !important;}
  .tasks-summary{padding:0 14px 12px !important;gap:6px !important;}
  .tasks-summary-item{padding:10px 6px !important;border-radius:12px !important;}
  .tasks-summary-num{font-size:20px !important;}
  .tasks-summary-label{font-size:7px !important;}
  .tasks-list-head{padding:16px 14px 10px !important;gap:10px !important;}
  #tasks-list-wrap{padding:8px 10px 12px !important;}
  .tasks-group + .tasks-group{margin-top:14px !important;}
  .task-item + .task-item{margin-top:10px !important;}
  .task-hitarea{padding:13px 13px 10px !important;gap:12px !important;}
  .task-title{font-size:14px !important;line-height:1.45 !important;margin-bottom:8px !important;}
  .task-item:has(> .task-title){flex-direction:row !important; align-items:center !important; gap:8px !important; padding:10px 12px !important;}
  .task-item:has(> .task-title) .task-title{margin-bottom:0 !important;}
  .task-meta{gap:6px !important;}
  .task-badge{padding:5px 9px !important;font-size:9px !important;}
  .task-actions{padding:0 13px 13px !important;gap:7px !important;}
  .task-action-btn{min-height:40px !important;font-size:9px !important;}
  #wl-body{padding-top:20px !important;padding-bottom:32px !important;}
  .wl-form-header{padding:22px 20px 18px !important;}
  .wl-form-title{font-size:20px !important;}
  .wl-form-body{padding:24px 20px 20px !important;gap:22px !important;}
  .wl-form-footer{padding:18px 20px !important;}
  .wl-log-card{padding:20px 20px !important;}
  #footer{padding:12px 12px 14px !important;margin-top:0 !important;}
  #footer-name{font-size:11px !important;}
  #footer-addr{font-size:8px !important;}
  #stats{display:none !important;}
  #search-section{display:none !important;}
  .tasks-list-sub{display:none !important;}
  .tasks-summary{display:none !important;}
}

@media (max-width: 520px){
  #stats{gap:6px !important;}
  .stat-num{font-size:18px !important;}
  .stat-label{font-size:6px !important;}
  #header{padding:10px 8px 8px !important;}
  .nav-tab{padding:7px 10px !important;font-size:8px !important;}
  #logo-text-name{font-size:17px !important;}
  #logo-text-sub{font-size:8px !important;}
  #weddings-actions,#search-section,#table-section,#cal-body,#qa-body,#tasks-body,#wl-body{padding-left:8px !important;padding-right:8px !important;}
  .card-header,.card-meta,.card-actions,.card-checklist{padding-left:12px !important;padding-right:12px !important;}
  .tasks-filter-btn{padding:8px 11px !important;}
  .task-actions{grid-template-columns:1fr !important;}
  .task-delete-btn{grid-column:auto !important;}
}



/* === Responsive improvements: weddings, calendar, tasks modal === */
#cal-list-mobile{display:none;}
.cal-list-day{background:#fff;border:1px solid #dce8f4;border-radius:18px;padding:14px;box-shadow:0 8px 24px rgba(0,0,0,0.04);margin-bottom:12px;}
.cal-list-date{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:#7d7268;font-weight:600;margin-bottom:10px;}
.cal-list-stack{display:flex;flex-direction:column;gap:10px;}
.cal-list-item{display:block;width:100%;text-align:left;background:#f4f8fc;border:1px solid #dce8f4;border-radius:14px;padding:13px 14px;cursor:pointer;transition:transform .15s,border-color .15s,background .15s;}
.cal-list-item:hover{background:#fff;border-color:#c9d6e8;transform:translateY(-1px);}
.cal-list-item-top{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;}
.cal-list-couple{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;line-height:1.1;color:#1f1a17;}
.cal-list-badge{display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:4px 9px;border-radius:999px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid #c9d6e8;}
.cal-list-meta,.cal-list-staff{font-size:12px;color:#6e655d;line-height:1.5;margin-top:6px;}
.cal-mobile-empty{background:#fff;border:1px dashed #ccd8e9;border-radius:18px;padding:26px 18px;text-align:center;color:#7a8ea4;}
.cal-mobile-empty-icon{font-size:28px;margin-bottom:8px;}
.cal-mobile-empty-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;color:#2c2c2c;}
.cal-mobile-empty-sub{font-size:12px;margin-top:4px;}

/* === Mini-calendar strip (mobile) === */
#cal-mini-wrap{
  display:none;
  background:#fff;
  border:1px solid #ede8e0;
  border-radius:16px;
  padding:12px 10px 8px;
  margin-bottom:14px;
}
#cal-mini-head{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  margin-bottom:4px;
}
.cal-mini-dow{
  text-align:center;
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#bbb;
  padding:2px 0 5px;
  font-weight:600;
}
#cal-mini-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:1px;
}
.cal-mini-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:4px 1px 5px;
  background:none;
  border:none;
  cursor:pointer;
  border-radius:8px;
  min-height:40px;
  transition:background .12s;
  -webkit-tap-highlight-color:transparent;
}
.cal-mini-cell:active{ background:rgba(0,0,0,.06); }
.cal-mini-cell.other-month .cal-mini-num{ color:#d0cccc; }
.cal-mini-cell.selected{ background:rgba(44,44,44,.09); }
.cal-mini-cell.selected .cal-mini-num{ font-weight:700; }
.cal-mini-num{
  font-size:12px;
  color:#2c2c2c;
  font-weight:400;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  line-height:1;
}
.cal-mini-cell.today .cal-mini-num{
  background:#2F5FA7;
  color:#fff;
  font-weight:600;
}
.cal-mini-dots{
  display:flex;
  gap:2px;
  margin-top:3px;
  flex-wrap:wrap;
  justify-content:center;
  max-width:28px;
}
.cal-mini-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  flex-shrink:0;
}
.cal-mini-dot.wedding{ background:#2F5FA7; }
.cal-mini-dot.tour{ background:#1e5f74; }
.cal-mini-dot.rental{ background:#6f8b76; }
.cal-mini-dot.family{ background:#5e7b9e; }

/* Today button (hidden on desktop, shown on mobile) */
.cal-today-btn{
  display:none;
  border:1.5px solid #c9d8e8;
  background:#fff;
  color:#546278;
  border-radius:999px;
  padding:7px 14px;
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
}
.cal-today-btn:hover{ border-color:#2c2c2c; color:#2c2c2c; }

@media (max-width:860px){
  #cal-mini-wrap{ display:block; }
  .cal-today-btn{ display:inline-flex; align-items:center; }
}

.tasks-overview-body{padding:18px 22px 10px;}
.tasks-open-modal-btn{width:100%;border:none;border-radius:999px;background:#5b4a61;color:#fff;padding:13px 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 24px rgba(91,74,97,.18);}
.tasks-open-modal-btn:hover{background:#47384c;}
#task-modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(20,18,16,.62);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));overflow:hidden;overscroll-behavior:contain;}
#task-modal-overlay.open{display:flex;}
#task-modal-box{width:min(680px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:0 40px 100px rgba(0,0,0,.32);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
#task-modal-head{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 26px 20px;background:linear-gradient(160deg,#f7f4fb 0%,#eef3fa 100%);border-bottom:1px solid #dce8f4;border-top:4px solid #5b4a61;border-radius:20px 20px 0 0;}
.task-modal-body{padding:24px 26px 28px !important;}
.task-modal-close{width:36px;height:36px;border-radius:50%;border:1.5px solid #dae4f0;background:#fff;color:#8fa4bb;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.task-modal-close:hover{background:#f5eeff;border-color:#5b4a61;color:#5b4a61;}
html.task-modal-open,body.task-modal-open{overflow:hidden;overscroll-behavior:none;}
/* Modal-specific layout overrides */
#task-modal-head .tasks-card-kicker{color:#7060a0;font-size:9px;letter-spacing:0.16em;}
.task-modal-body .tasks-label{font-size:9px;letter-spacing:0.13em;color:#74869c;font-weight:700;}
.task-modal-body .tasks-priority-picker .priority-chip{border-radius:10px;}
.task-modal-body #task-save-btn{padding:15px 32px;border-radius:10px;font-size:11px;letter-spacing:0.14em;background:linear-gradient(160deg,#5b4a61 0%,#47384c 100%);box-shadow:0 8px 24px rgba(91,74,97,0.22);transition:opacity .15s,box-shadow .15s;margin-left:auto;}
.task-modal-body #task-save-btn:hover{opacity:0.9;box-shadow:0 12px 32px rgba(91,74,97,0.30);}
.task-modal-body textarea.tasks-input{resize:vertical;min-height:72px;}
.task-modal-body .tasks-field{gap:8px;}
.task-modal-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.task-modal-footer{display:flex;align-items:center;gap:12px;padding-top:8px;border-top:1px solid #eef2f7;margin-top:4px;}
.task-modal-footer #tasks-submit-status{flex:1;}
.task-image-drop-icon{font-size:16px;line-height:1;}

@media (max-width: 980px){
  .mobile-cards{display:block !important;}
  .wedding-table{display:none !important;}
  .wedding-card{border-radius:18px !important;border:1px solid #dce8f4 !important;box-shadow:0 10px 24px rgba(0,0,0,.05) !important;overflow:hidden !important;}
  .card-header{padding:16px 16px 12px !important;display:block !important;}
  .card-couple{font-size:24px !important;line-height:1.05 !important;}
  .card-meta{grid-template-columns:1fr !important;gap:10px !important;padding:12px 16px !important;background:#fff !important;}
  .card-meta > div{padding:10px 12px;background:#f4f8fc;border:1px solid #dce8f4;border-radius:12px;}
  .card-meta-label{font-size:8px !important;margin-bottom:4px !important;}
  .card-meta-value{font-size:13px !important;line-height:1.5 !important;white-space:normal !important;}
  .card-actions{padding:12px 16px !important;gap:10px !important;flex-wrap:wrap !important;background:#fff;}
  .card-expand-btn{order:2;width:100%;text-align:center;padding-top:4px;font-size:10px !important;}
}

@media (max-width: 860px){
  #cal-grid-head,#cal-grid{display:none !important;}
  #cal-list-mobile{display:block;}
  #cal-body{padding:16px 12px 24px !important;}
  #cal-nav{gap:10px !important;margin-bottom:14px !important;}
  #cal-month-label{font-size:22px !important;}
}

@media (max-width: 700px){
  .tasks-shell{grid-template-columns:1fr !important;}
  #task-modal-overlay{padding:10px;}
  #task-modal-box{border-radius:18px;width:100%;max-height:94vh;}
  #task-modal-head{padding:18px 18px 14px;}
  .task-modal-body{padding:16px 16px 18px !important;}
  .task-modal-row-2col{grid-template-columns:1fr !important;}
  .task-modal-footer{flex-direction:column;}
  .task-modal-body #task-save-btn{width:100%;margin-left:0;}
}



/* === Mobile-first nav, calendar, and detail refinements === */
#nav-tabs{display:flex;align-items:center;gap:8px;}
.nav-tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.nav-ico{display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1;min-width:1em;}
.nav-label{display:inline-block;line-height:1;}

@media (max-width: 980px){
  #header-top{align-items:flex-start !important;}
  #nav-tabs{width:100%;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap !important;justify-content:flex-start !important;padding-bottom:4px;scrollbar-width:none;}
  #nav-tabs::-webkit-scrollbar{display:none;}
  .nav-tab{flex:0 0 auto;min-width:78px;border-radius:16px !important;padding:10px 12px !important;flex-direction:column;gap:5px;font-size:9px !important;letter-spacing:.08em !important;}
  .nav-ico{font-size:18px;}
  .nav-label{font-size:9px;}
}

@media (max-width: 860px){
  #page-calendar{padding-bottom:18px !important;}
  #cal-body{padding:14px 10px 20px !important;}
  #cal-nav{position:sticky;top:0;z-index:4;background:#f4f7fc;padding:8px 2px 10px;margin:0 auto 10px !important;}
  #cal-month-label{font-size:20px !important;min-width:0 !important;flex:1;}
  .cal-nav-btn{width:40px;height:40px;background:#fff;border-color:#ccd8e9;box-shadow:0 4px 12px rgba(0,0,0,.05);}
  #cal-grid-head,#cal-grid{display:none !important;}
  #cal-list-mobile{display:block !important;min-height:180px;}
  .cal-list-day{padding:12px !important;border-radius:16px !important;margin-bottom:10px !important;}
  .cal-list-date{font-size:9px !important;margin-bottom:8px !important;}
  .cal-list-stack{gap:8px !important;}
  .cal-list-item{padding:12px !important;border-radius:12px !important;}
  .cal-list-item-top{display:block !important;}
  .cal-list-couple{display:block;font-size:20px !important;line-height:1.05 !important;padding-right:0 !important;}
  .cal-list-badge{display:inline-flex;margin-top:8px;}
  .cal-list-meta,.cal-list-staff{font-size:12px !important;line-height:1.45 !important;}
}

@media (max-width: 700px){
  #cal-detail-overlay{padding:0 !important;align-items:flex-end !important;}
  #cal-detail-box{width:100vw !important;max-width:100vw !important;max-height:90vh !important;border-radius:22px 22px 0 0 !important;}
  #cal-detail-head{padding:18px 18px 14px !important;position:sticky;top:0;z-index:2;}
  #cal-detail-date{font-size:9px !important;}
  #cal-detail-couple{font-size:24px !important;max-width:none !important;line-height:1.08 !important;}
  .cal-detail-close{width:36px !important;height:36px !important;}
  .cal-detail-section{padding:14px 16px !important;}
  .cal-detail-row{flex-direction:column !important;gap:3px !important;align-items:flex-start !important;}
  .cal-detail-lbl{min-width:0 !important;font-size:9px !important;letter-spacing:.08em;text-transform:uppercase;}
  .cal-detail-val{font-size:13px !important;line-height:1.45 !important;word-break:break-word;}
  .cal-detail-check-grid{grid-template-columns:1fr !important;gap:8px !important;}
  #cal-detail-footer{padding:12px 16px !important;}
  .cal-detail-edit-btn{width:100%;padding:12px 16px !important;}
}

@media (max-width: 980px){
  .year-group{margin-bottom:18px !important;}
  .year-label{margin-bottom:10px !important;}
  .mobile-cards{display:block !important;}
  .wedding-table{display:none !important;}
  .wedding-card{margin-bottom:14px !important;}
  .card-header{padding:16px 14px 12px !important;}
  .card-progress-bar-wrap{margin-top:10px !important;}
  .card-meta{grid-template-columns:1fr !important;gap:8px !important;padding:10px 14px 12px !important;}
  .card-meta > div{padding:10px 12px;background:#f4f8fc;border:1px solid #dce8f4;border-radius:12px;}
  .card-actions{padding:12px 14px !important;flex-direction:column;align-items:stretch !important;}
  .card-expand-btn{width:100%;text-align:center !important;order:2;}
  .edit-btn,.del-btn{width:100%;margin-left:0 !important;}
}

@media (max-width: 560px){
  #weddings-actions,#search-section,#table-section,#cal-body,#qa-body,#tasks-body,#wl-body{padding-left:10px !important;padding-right:10px !important;}
  .card-couple{font-size:22px !important;}
  .card-meta-value{font-size:13px !important;}
  .cal-mobile-empty{padding:22px 14px !important;}
}


.tasks-owner-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.owner-filter-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1.5px solid #c9d8e8;border-radius:999px;background:#fff;color:#4e6075;cursor:pointer;transition:all .15s;}
.owner-filter-chip:hover{border-color:#a0bcd6;background:#f4f8fc;}
.owner-filter-chip.active{border-color:#2c2c2c;background:#2c2c2c;color:#fff;}
.owner-filter-chip-icon{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:rgba(44,44,44,.08);color:inherit;flex-shrink:0;}
.owner-filter-chip.active .owner-filter-chip-icon{background:rgba(255,255,255,.16);}
.owner-filter-chip.pam .owner-filter-chip-icon{background:#e8ecf5;color:#4a5a7a;}
.owner-filter-chip.gary .owner-filter-chip-icon{background:#e8f5ea;color:#4a7a4e;}
.owner-filter-chip.maggie .owner-filter-chip-icon{background:#f5e8f0;color:#7a3a5a;}
.owner-filter-chip.active.pam .owner-filter-chip-icon,.owner-filter-chip.active.gary .owner-filter-chip-icon,.owner-filter-chip.active.maggie .owner-filter-chip-icon{background:rgba(255,255,255,.16);color:#fff;}
.owner-filter-chip-label{font-size:11px;font-weight:600;letter-spacing:.04em;}
@media (max-width: 768px){
  #modal-overlay{padding:0 !important;}
  #modal-scroll-inner{padding:0 !important;align-items:flex-start !important;overflow:hidden !important;}
  #modal-box{margin:0 !important;width:100% !important;max-width:100% !important;max-height:100dvh !important;max-height:100vh !important;border-radius:0 !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;display:flex !important;flex-direction:column !important;}
  #modal-box > .ms,#modal-box > #checklist-section,#modal-box > input[type="hidden"]{flex-shrink:0;}
  #modal-foot{position:sticky !important;bottom:0 !important;z-index:2 !important;flex-shrink:0 !important;}
  #qa-modal-overlay.open,#task-modal-overlay.open,#cal-detail-overlay{align-items:flex-start !important;justify-content:center !important;}
  #qa-modal-overlay,#task-modal-overlay,#cal-detail-overlay{padding:0 !important;}
  #qa-modal-box,#task-modal-box,#cal-detail-box{width:100% !important;max-width:100% !important;max-height:100vh !important;border-radius:0 0 18px 18px !important;margin:0 !important;}
  #cal-detail-box{top:0 !important;left:0 !important;transform:none !important;}
  .tasks-owner-strip{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
  .tasks-owner-strip::-webkit-scrollbar{display:none;}
}


/* Additional mobile polish — mobile-fixes-20260310 */
.card-exp-body{background:#f4f8fc;border-top:1px solid #dce8f4;}
.card-exp-section{padding:14px 16px;border-top:1px solid #efe6dc;}
.card-exp-section:first-child{border-top:none;}
.card-exp-head{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#7a8ea4;font-weight:700;margin-bottom:10px;}
.card-exp-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:7px 0;align-items:start;}
.card-exp-lbl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8fa4bb;font-weight:600;}
.card-exp-val{font-size:14px;line-height:1.45;color:#2a2420;word-break:break-word;}
.card-exp-val a{color:#2a2420;text-decoration:underline;text-underline-offset:2px;}
.card-exp-empty{font-size:13px;color:#8fa4bb;font-style:italic;}
.card-exp-text{font-size:14px;line-height:1.65;color:#3b342f;white-space:pre-wrap;}
.card-checklist-grid{grid-template-columns:1fr 1fr;gap:8px 14px;}
.card-check-item{white-space:normal;align-items:flex-start;line-height:1.4;}

@media (max-width: 980px){
  #header{overflow:visible;}
  #nav-tabs{display:grid !important;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px !important;width:100%;overflow:visible !important;flex-wrap:nowrap !important;justify-content:stretch !important;padding-bottom:0 !important;margin-top:16px !important;}
  .nav-tab{min-width:0 !important;width:100% !important;flex:1 1 0 !important;padding:10px 4px !important;border-radius:18px !important;gap:6px !important;}
  .nav-ico{font-size:18px !important;}
  .nav-label{white-space:normal !important;text-align:center !important;font-size:8px !important;line-height:1.1 !important;letter-spacing:.05em !important;}
}

@media (max-width: 860px){
  #cal-body{padding:12px 10px 28px !important;}
  #cal-nav{position:static !important;padding:0 2px 4px !important;}
  #cal-month-label{font-size:19px !important;text-align:center;}
  #cal-list-mobile{display:block !important;min-height:0 !important;padding-bottom:8px;}
  .cal-list-day{padding:12px !important;border-radius:16px !important;margin-bottom:12px !important;}
  .cal-list-date{font-size:9px !important;letter-spacing:.14em !important;}
  .cal-list-item{padding:13px 12px !important;}
  .cal-list-couple{font-size:18px !important;line-height:1.08 !important;}
  .cal-list-meta,.cal-list-staff{font-size:12px !important;line-height:1.45 !important;}
  .cal-list-item-main{display:block;}
  #footer{margin-top:0 !important;}
}

@media (max-width: 700px){
  .card-meta{grid-template-columns:1fr !important;}
  .card-actions{padding-top:10px !important;}
  .card-exp-section{padding:14px 14px;display:grid;grid-template-columns:1fr 1fr;gap:0;}
  .card-exp-section .card-exp-head{grid-column:1/-1;}
  .card-exp-section .cl-cats-wrap{grid-column:1/-1;}
  .card-exp-row{grid-template-columns:1fr;gap:3px;}
  .card-exp-lbl{font-size:9px;}
  .card-exp-val,.card-exp-text{font-size:13px;}
  .card-checklist-grid{grid-template-columns:1fr;gap:8px;}
  .card-expand-btn{border:1px solid #ccd9e8;border-radius:999px;padding:10px 14px !important;background:#fff;}
}

@media (max-width:768px){
  #nav-tabs{
    justify-content:center !important;
    align-items:center;
  }
}


/* Final mobile nav centering fix */
@media (max-width: 768px){
  #header-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
  }
  #header-top{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
  }
  #logo-block{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
  }
  #nav-tabs{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:8px !important;
    width:min(100%, 420px) !important;
    max-width:420px !important;
    margin:12px auto 0 !important;
    overflow:visible !important;
    justify-content:center !important;
    align-content:center !important;
    padding-bottom:0 !important;
  }
  .nav-tab{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding:10px 4px !important;
    gap:6px !important;
    border-radius:16px !important;
  }
  .nav-label{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    white-space:normal !important;
    line-height:1.1 !important;
    font-size:8px !important;
    letter-spacing:.05em !important;
  }
}


@media (max-width:768px){
  /* .nav-tab-calendar shown on all screen sizes */
  #nav-tabs{grid-template-columns:repeat(3,minmax(0,1fr)) !important;max-width:440px !important;margin-left:auto !important;margin-right:auto !important;justify-content:center !important;}
}

  /* Ensure past rental/family entries remain editable */
  .rental-item .entry-actions,
  .family-item .entry-actions,
  .rental-card .entry-actions,
  .family-card .entry-actions { display:flex; gap:8px; flex-wrap:wrap; }

  .past-rentals .entry-actions,
  .past-family .entry-actions,
  #rentals-past-list .entry-actions,
  #family-past-list .entry-actions { display:flex !important; }

  @media (max-width: 900px) {
    .rental-item .entry-actions,
    .family-item .entry-actions,
    .rental-card .entry-actions,
    .family-card .entry-actions,
    .past-rentals .entry-actions,
    .past-family .entry-actions,
    #rentals-past-list .entry-actions,
    #family-past-list .entry-actions {
      display:flex !important;
      width:100%;
      justify-content:flex-start;
      margin-top:10px;
    }
  }


/* === Calendar category filters and chips === */
#cal-filter-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  margin:0 auto 20px;
  max-width:1100px;
}
.cal-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1.5px solid #c9d8e8;
  background:#fff;
  color:#546278;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.16s;
  box-shadow:0 4px 14px rgba(0,0,0,0.04);
}
.cal-filter-chip:hover{
  border-color:#2c2c2c;
  color:#2c2c2c;
}
.cal-filter-chip.active{
  background:#2c2c2c;
  color:#fff;
  border-color:#2c2c2c;
}
.cal-filter-icon{
  font-size:14px;
  line-height:1;
}
.cal-rental-chip{
  display:block;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  background:#6f8b76;
  color:#fff;
  border-radius:10px;
  padding:8px 10px;
  font-size:10px;
  font-family:'Jost',sans-serif;
  cursor:pointer;
  margin-top:6px;
  line-height:1.35;
  transition:background 0.15s;
  border-left:3px solid #aac6b2;
}
.cal-rental-chip:hover{ background:#56715d; }
.cal-family-chip{
  display:block;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  background:#5e7b9e;
  color:#fff;
  border-radius:10px;
  padding:8px 10px;
  font-size:10px;
  font-family:'Jost',sans-serif;
  cursor:pointer;
  margin-top:6px;
  line-height:1.35;
  transition:background 0.15s;
  border-left:3px solid #7ab0d4;
}
.cal-family-chip:hover{ background:#4a6480; }
.cal-event-chip{
  display:block;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  background:#5e82a8;
  color:#fff;
  border-radius:10px;
  padding:8px 10px;
  font-size:10px;
  font-family:'Jost',sans-serif;
  cursor:pointer;
  margin-top:6px;
  line-height:1.35;
  transition:background 0.15s;
  border-left:3px solid #60a4d0;
}
.cal-event-chip:hover{ background:#3a7a9e; }
.cal-list-item-event{ border-left:3px solid #5e82a8 !important; }
.cal-list-item-meeting{ border-left:3px solid #5a3a7a !important; }
.cal-mini-dot.events{ background:#5e82a8; }
.cal-mini-dot.meeting{ background:#5a3a7a; }
.cal-list-badge-meeting{
  background:#5a3a7a !important;
  color:#fff !important;
  border-color:#5a3a7a !important;
}
.cal-chip-mini-label{
  font-size:8px;
  font-family:'Jost',sans-serif;
  opacity:0.8;
  letter-spacing:0.08em;
  display:block;
  text-transform:uppercase;
}
.cal-list-item-rental .cal-list-badge{
  background:#6f8b76 !important;
  color:#fff !important;
  border-color:#6f8b76 !important;
}
.cal-list-item-family .cal-list-badge{
  background:#5e7b9e !important;
  color:#fff !important;
  border-color:#5e7b9e !important;
}
@media (max-width: 700px){
  #cal-filter-bar{
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
    margin-bottom:14px;
  }
  .cal-filter-chip{
    flex:0 0 auto;
    padding:9px 12px;
  }
}

/* Filter chips: icon-only on very small screens */
@media (max-width:480px){
  .cal-filter-text{ display:none; }
  .cal-filter-chip{ padding:10px 12px; gap:0; }
  .cal-filter-icon{ font-size:16px; }
}

/* === Mobile list-view polish === */
/* Color-coded left accent on each event card */
.cal-list-item{
  border-left-width:3px;
  border-left-color:#2F5FA7; /* default = wedding terracotta */
}
.cal-list-item-tour{   border-left-color:#1e5f74; }
.cal-list-item-rental{ border-left-color:#6f8b76; }
.cal-list-item-family{ border-left-color:#5e7b9e; }

/* Date section header: pill style */
.cal-list-date{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#7a8ea4;
  font-weight:700;
  background:#eef4fb;
  border-radius:999px;
  padding:5px 12px;
  margin-bottom:12px;
}

/* Tighten up card couple name on tiny phones */
@media (max-width:400px){
  .cal-list-couple{ font-size:18px !important; }
  .cal-list-item{ padding:11px 12px !important; }
}

/* Better sticky nav layout with Today button */
@media (max-width:860px){
  #cal-nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }
  #cal-month-label{
    flex:1 !important;
    text-align:center !important;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:20px !important;
    font-style:italic;
    color:#1a1a1a;
  }
  .cal-today-btn{
    flex-shrink:0;
    font-size:9px;
    padding:7px 12px;
  }
}

/* Tighter padding for overall cal page on mobile */
@media (max-width:480px){
  #cal-body{ padding:12px 8px 20px !important; }
  #cal-mini-wrap{ padding:10px 8px 6px !important; border-radius:12px !important; }
  .cal-list-day{ padding:10px !important; border-radius:14px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Calendar Color-Coding System
   Each event type gets a distinct, recognizable hue so items
   are instantly identifiable at a glance across grid, mini-cal,
   filter bar, and mobile list views.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --cal-wedding:        #8B5066;
  --cal-wedding-hover:  #6E3D51;
  --cal-wedding-accent: #C89AAE;
  --cal-wedding-bg:     #faf5f8;

  --cal-tour:           #1B7A8C;
  --cal-tour-hover:     #155F6D;
  --cal-tour-accent:    #5BC4D4;

  --cal-rental:         #4A7D5A;
  --cal-rental-hover:   #3A6348;
  --cal-rental-accent:  #8FC4A0;

  --cal-family:         #A07030;
  --cal-family-hover:   #7F5824;
  --cal-family-accent:  #D4A860;

  --cal-event:          #C06040;
  --cal-event-hover:    #9E4830;
  --cal-event-accent:   #E09878;

  --cal-meeting:        #6B4A9A;
  --cal-meeting-hover:  #523878;
  --cal-meeting-accent: #A88ED0;
}

/* ── Filter chips: each type gets its own color when active ── */
.cal-filter-chip.active[data-filter="weddings"]{
  background: var(--cal-wedding); border-color: var(--cal-wedding);
}
.cal-filter-chip.active[data-filter="tours"]{
  background: var(--cal-tour); border-color: var(--cal-tour);
}
.cal-filter-chip.active[data-filter="rentals"]{
  background: var(--cal-rental); border-color: var(--cal-rental);
}
.cal-filter-chip.active[data-filter="family"]{
  background: var(--cal-family); border-color: var(--cal-family);
}
.cal-filter-chip.active[data-filter="events"]{
  background: var(--cal-event); border-color: var(--cal-event);
}
.cal-filter-chip.active[data-filter="meetings"]{
  background: var(--cal-meeting); border-color: var(--cal-meeting);
}

/* Hover tint when inactive — subtle color hint */
.cal-filter-chip:hover:not(.active)[data-filter="weddings"]{ border-color: var(--cal-wedding); color: var(--cal-wedding); }
.cal-filter-chip:hover:not(.active)[data-filter="tours"]{ border-color: var(--cal-tour); color: var(--cal-tour); }
.cal-filter-chip:hover:not(.active)[data-filter="rentals"]{ border-color: var(--cal-rental); color: var(--cal-rental); }
.cal-filter-chip:hover:not(.active)[data-filter="family"]{ border-color: var(--cal-family); color: var(--cal-family); }
.cal-filter-chip:hover:not(.active)[data-filter="events"]{ border-color: var(--cal-event); color: var(--cal-event); }
.cal-filter-chip:hover:not(.active)[data-filter="meetings"]{ border-color: var(--cal-meeting); color: var(--cal-meeting); }

/* ── Grid chips: distinct backgrounds per type ── */
.cal-wedding-chip.dw-w{ background: var(--cal-wedding); }
.cal-wedding-chip.dw-w:hover{ background: var(--cal-wedding-hover); }
.cal-wedding-chip.dw-d{ background: #3D5A8F; }
.cal-wedding-chip.dw-d:hover{ background: #2E4672; }
.cal-day.has-wedding{ background: var(--cal-wedding-bg); }

.cal-tour-chip{ background: var(--cal-tour); border-left-color: var(--cal-tour-accent); }
.cal-tour-chip:hover{ background: var(--cal-tour-hover); }

.cal-rental-chip{ background: var(--cal-rental); border-left-color: var(--cal-rental-accent); }
.cal-rental-chip:hover{ background: var(--cal-rental-hover); }

.cal-family-chip{ background: var(--cal-family); border-left-color: var(--cal-family-accent); }
.cal-family-chip:hover{ background: var(--cal-family-hover); }

.cal-event-chip{ background: var(--cal-event); border-left-color: var(--cal-event-accent); }
.cal-event-chip:hover{ background: var(--cal-event-hover); }

.cal-meeting-chip{ background: var(--cal-meeting); border-left-color: var(--cal-meeting-accent); }
.cal-meeting-chip:hover{ background: var(--cal-meeting-hover); }

/* ── Mini-calendar dots ── */
.cal-mini-dot.wedding{ background: var(--cal-wedding); }
.cal-mini-dot.tour{ background: var(--cal-tour); }
.cal-mini-dot.rental{ background: var(--cal-rental); }
.cal-mini-dot.family{ background: var(--cal-family); }
.cal-mini-dot.events{ background: var(--cal-event); }
.cal-mini-dot.meeting{ background: var(--cal-meeting); }

/* ── Mobile list: color-coded left accent ── */
.cal-list-item{ border-left-color: var(--cal-wedding); }
.cal-list-item-tour{ border-left-color: var(--cal-tour); }
.cal-list-item-rental{ border-left-color: var(--cal-rental); }
.cal-list-item-family{ border-left-color: var(--cal-family); }
.cal-list-item-event{ border-left-color: var(--cal-event); }
.cal-list-item-meeting{ border-left-color: var(--cal-meeting) !important; }

/* ── Mobile list badges: match event type ── */
.cal-list-item-rental .cal-list-badge{
  background: var(--cal-rental) !important; color:#fff !important; border-color: var(--cal-rental) !important;
}
.cal-list-item-family .cal-list-badge{
  background: var(--cal-family) !important; color:#fff !important; border-color: var(--cal-family) !important;
}
.cal-list-badge-meeting{
  background: var(--cal-meeting) !important; color:#fff !important; border-color: var(--cal-meeting) !important;
}
.cal-list-badge-tour{
  background: var(--cal-tour) !important; color:#fff !important; border-color: var(--cal-tour) !important;
}


/* === Tasks page cleanup === */
.tasks-shell-single{
  grid-template-columns:minmax(0,1fr) !important;
}
.tasks-board-card{
  width:100%;
}
.tasks-header-add-btn{
  border:none;
  border-radius:999px;
  background:#5b4a61;
  color:#fff;
  padding:12px 18px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(91,74,97,.16);
  white-space:nowrap;
}
.tasks-header-add-btn:hover{
  background:#47384c;
}
.tasks-list-controls{
  align-items:flex-start;
}
@media (max-width: 760px){
  .tasks-list-controls{
    justify-content:flex-start !important;
    width:100%;
  }
  .tasks-header-add-btn{
    width:100%;
    order:-1;
  }
}

/* === Stay cards: make summary clickable and details reliable === */
.stay-card{
  overflow:hidden;
}
.stay-card-summary{
  cursor:pointer;
}
.stay-card-summary-btn{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.15fr) 24px;
  gap:18px;
  align-items:center;
  border:none;
  background:transparent;
  text-align:left;
  padding:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
}
.stay-card-summary-btn:focus-visible{
  outline:2px solid #5b4a61;
  outline-offset:4px;
  border-radius:6px;
}
.stay-card-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
@media (max-width: 820px){
  .stay-card-summary-btn{
    grid-template-columns:1fr;
    gap:10px;
  }
}


/* === Stay cards interaction fix === */
.stay-card{
  background:#fff;
  border:1px solid #dce8f4;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,0.03);
}
.stay-card-summary{
  padding:18px 22px;
}
.stay-card-summary-btn{
  width:100%;
  display:grid;
  grid-template-columns:minmax(160px,1.15fr) minmax(180px,.95fr) minmax(180px,1.2fr) 28px;
  gap:22px;
  align-items:center;
  border:none;
  background:transparent;
  color:inherit;
  text-align:left;
  padding:0;
  margin:0;
  font:inherit;
  cursor:pointer;
}
.stay-card-summary-btn *{
  pointer-events:none;
}
.stay-card-summary-btn:hover .stay-card-name{
  text-decoration:underline;
}
.stay-card-chevron{
  justify-self:end;
  font-size:14px;
  color:#7a8ea4;
  transition:transform .18s ease;
}
.stay-card.expanded .stay-card-chevron{
  transform:rotate(180deg);
}
.stay-card-detail{
  display:none;
  padding:0 22px 20px;
  border-top:1px solid #e2ecf5;
  background:#f2f7fd;
}
.stay-card.expanded .stay-card-detail{
  display:block !important;
}
.stay-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 24px;
  padding-top:16px;
}
.stay-card-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-top:16px;
}
.stay-action-btn{
  padding:10px 16px;
  border:1.5px solid #c9d8e8;
  background:#fff;
  color:#5d554d;
  border-radius:6px;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .15s;
}
.stay-action-btn:hover{
  border-color:#5b4a61;
  color:#5b4a61;
}
.stay-action-btn.delete:hover{
  border-color:#2F5FA7;
  color:#2F5FA7;
  background:#edf5ff;
}
@media (max-width: 900px){
  .stay-card-summary-btn{
    grid-template-columns:1fr;
    gap:10px;
  }
  .stay-card-chevron{
    justify-self:start;
  }
  .stay-detail-grid{
    grid-template-columns:1fr;
  }
}


/* Stronger click support for rental/family cards */
.stay-card-summary{
  cursor:pointer !important;
  user-select:none;
}
.stay-card-summary > *{
  pointer-events:auto;
}
.stay-card-summary .stay-card-summary-btn{
  pointer-events:auto;
}
.stay-card-summary .stay-card-summary-btn *{
  pointer-events:none;
}
.stay-card-actions,
.stay-card-actions *{
  pointer-events:auto !important;
}



/* ===== Stay rows use full width better ===== */
.stay-card-summary-btn{
  width:100%;
  display:grid;
  grid-template-columns: 1.2fr 1.6fr 2fr auto;
  gap:40px;
  align-items:center;
}

.stay-card-summary{
  padding:24px 32px;
}

.stay-card-name{
  font-size:24px;
  line-height:1.2;
}

.stay-card-meta-value{
  font-size:16px;
  line-height:1.5;
}

.stay-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.stay-card-chevron{
  justify-self:end;
  align-self:center;
  font-size:14px;
  opacity:.7;
}

.stay-card-summary-btn > div{
  min-width:0;
}

.stay-card-meta-value{
  white-space:normal;
}

@media (max-width:1200px){
  .stay-card-summary-btn{
    grid-template-columns:1.2fr 1.4fr 1.6fr auto;
    gap:28px;
  }
}

@media (max-width:900px){
  .stay-card-summary-btn{
    grid-template-columns:1fr;
    gap:14px;
  }
  .stay-card-chevron{
    justify-self:start;
  }
  .stay-card-name{
    font-size:20px;
  }
  .stay-card-meta-value{
    font-size:15px;
  }
  .stay-card-detail{
    padding:0 20px 20px;
  }
  .stay-detail-grid{
    grid-template-columns:1fr;
  }
}


/* === Task board top-right add button === */
.tasks-list-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  width:100%;
}
.tasks-list-controls{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  flex-wrap:wrap;
}
.tasks-header-add-btn{
  margin-left:auto;
  flex:0 0 auto;
}
#tasks-list-wrap{
  min-height:120px;
}
@media (max-width: 860px){
  .tasks-list-topbar{
    flex-direction:column;
    align-items:stretch;
  }
  .tasks-header-add-btn{
    margin-left:0;
    width:100%;
  }
}


/* === Unified page widths across Tasks, Q&A, Work Log, Tours, Rentals, Family === */
#tasks-body,
#qa-body,
#wl-body,
#tours-body,
#rentals-body,
#family-body,
#events-body,
#meetings-body{
  max-width:1280px !important;
  width:100%;
  margin:0 auto !important;
  box-sizing:border-box;
}

#tasks-body{ padding:28px 32px 64px !important; }
#qa-body{ padding:28px 32px 48px !important; }
#wl-body{ padding:28px 32px 64px !important; }
#tours-body,
#rentals-body,
#family-body,
#events-body{ padding:28px 32px 64px !important; }

.tasks-shell,
.tasks-shell-single{
  max-width:none !important;
}

@media (max-width: 900px){
  #tasks-body,
  #qa-body,
  #wl-body,
  #tours-body,
  #rentals-body,
  #family-body,
  #events-body{
    padding:20px 20px 40px !important;
  }
}

@media (max-width: 640px){
  #tasks-body,
  #qa-body,
  #wl-body,
  #tours-body,
  #rentals-body,
  #family-body,
  #events-body{
    padding:16px 16px 32px !important;
  }
}


/* === Tours aligned with Rentals / Family === */
#tours-list,
#tours-upcoming-list,
#tours-past-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tour-card,
.tour-row,
.tour-item{
  background:#fff;
  border:1px solid #dce8f4;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,0.03);
}

.tour-card-summary,
.tour-row-summary,
.tour-item-summary{
  padding:24px 32px;
  cursor:pointer;
}

.tour-card-summary-btn,
.tour-row-summary-btn,
.tour-item-summary-btn{
  width:100%;
  display:grid;
  grid-template-columns:1.1fr 1.4fr 1.5fr auto;
  gap:32px;
  align-items:center;
  border:none;
  background:transparent;
  color:inherit;
  text-align:left;
  padding:0;
  font:inherit;
  cursor:pointer;
}

.tour-summary-person{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.tour-summary-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#fff;
  font-weight:600;
  font-size:18px;
  font-family:'Jost',sans-serif;
  background:#7a3a5a;
}

.tour-summary-main-name{
  font-size:18px;
  line-height:1.35;
  color:#1a1a1a;
  font-weight:500;
  white-space:normal;
}

.tour-summary-label{
  display:block;
  margin-bottom:10px;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#7a8ea4;
  font-weight:700;
}

.tour-summary-value{
  font-size:16px;
  line-height:1.5;
  color:#1a1a1a;
  white-space:normal;
}

.tour-status-chip{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  background:#eef3ea;
  color:#5e7a61;
}

.tour-status-chip.past{
  background:#f3efe9;
  color:#7a8ea4;
}

.tour-card-chevron,
.tour-row-chevron,
.tour-item-chevron{
  justify-self:end;
  align-self:center;
  font-size:14px;
  opacity:.7;
  transition:transform .18s ease;
}

.tour-card.expanded .tour-card-chevron,
.tour-row.expanded .tour-row-chevron,
.tour-item.expanded .tour-item-chevron{
  transform:rotate(180deg);
}

.tour-card-detail,
.tour-row-detail,
.tour-item-detail{
  display:none;
  padding:0 32px 24px;
  border-top:1px solid #e2ecf5;
  background:#f2f7fd;
}

.tour-card.expanded .tour-card-detail,
.tour-row.expanded .tour-row-detail,
.tour-item.expanded .tour-item-detail{
  display:block !important;
}

.tour-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 26px;
  padding-top:18px;
}

.tour-detail-label{
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#888;
  font-weight:700;
  margin-bottom:8px;
}

.tour-detail-text{
  font-size:14px;
  color:#1a1a1a;
  line-height:1.6;
  white-space:pre-wrap;
}

.tour-card-actions,
.tour-row-actions,
.tour-item-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-top:18px;
}

.tour-action-btn{
  padding:10px 16px;
  border:1.5px solid #c9d8e8;
  background:#fff;
  color:#5d554d;
  border-radius:6px;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .15s;
}

.tour-action-btn:hover{
  border-color:#5b4a61;
  color:#5b4a61;
}

.tour-action-btn.delete:hover{
  border-color:#2F5FA7;
  color:#2F5FA7;
  background:#edf5ff;
}

@media (max-width: 1100px){
  .tour-card-summary-btn,
  .tour-row-summary-btn,
  .tour-item-summary-btn{
    grid-template-columns:1.1fr 1.3fr 1.3fr auto;
    gap:24px;
  }
}

@media (max-width: 900px){
  .tour-card-summary,
  .tour-row-summary,
  .tour-item-summary{
    padding:20px 20px;
  }

  .tour-card-summary-btn,
  .tour-row-summary-btn,
  .tour-item-summary-btn{
    grid-template-columns:1fr;
    gap:14px;
  }

  .tour-card-chevron,
  .tour-row-chevron,
  .tour-item-chevron{
    justify-self:start;
  }

  .tour-card-detail,
  .tour-row-detail,
  .tour-item-detail{
    padding:0 20px 20px;
  }

  .tour-detail-grid{
    grid-template-columns:1fr;
  }
}


/* === Task page layout cleanup === */
#tasks-body{
  max-width:1280px !important;
}
.tasks-page-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:0 0 18px;
}
.tasks-page-topbar-spacer{
  flex:1 1 auto;
}
.tasks-page-add-btn{
  margin-left:auto;
  border:none;
  border-radius:999px;
  background:#5b4a61;
  color:#fff;
  padding:13px 20px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(91,74,97,.16);
  white-space:nowrap;
}
.tasks-page-add-btn:hover{
  background:#47384c;
}
.tasks-card.tasks-board-card{
  min-height:0;
}
.tasks-list-head{
  padding:24px 28px 18px;
}
.tasks-list-topbar{
  display:block !important;
}
.tasks-list-controls{
  margin-top:14px;
}
#tasks-list-wrap{
  min-height:0;
}
.tasks-empty{
  padding:96px 20px !important;
}
@media (max-width: 860px){
  .tasks-page-topbar{
    margin-bottom:14px;
  }
  .tasks-page-add-btn{
    width:100%;
  }
}


/* === Mobile tours row fix === */


.owner-filter-chip.dan .owner-filter-chip-icon{ background:#ece8f5; color:#5f4a7a; }
.owner-filter-chip.marianne .owner-filter-chip-icon{ background:#eaf3fb; color:#2e6b9e; }
.owner-filter-chip.lindsey .owner-filter-chip-icon{ background:#e7eff7; color:#3f6f96; }
.task-badge.dan{ background:#ece8f5; color:#5f4a7a; }
.task-badge.marianne{ background:#eaf3fb; color:#2e6b9e; }
.task-badge.lindsey{ background:#e7eff7; color:#3f6f96; }


/* === Q&A edit support === */
.qa-edit-answer-wrap{ margin-top:10px; }
.qa-edit-answer-wrap[hidden]{ display:none !important; }
.qa-edit-actions{ display:flex; gap:10px; flex-wrap:wrap; padding:10px 0 4px; }


/* === Q&A question edit support === */
.qa-question-edit-wrap{ margin-top:12px; }
.qa-question-edit-wrap[hidden]{ display:none !important; }
.qa-inline-question-edit-btn{ margin-left:0; }
.qa-question-edit-actions{ display:flex; gap:10px; flex-wrap:wrap; padding:10px 0 4px; }


/* === Mobile owner filter dropdown === */
@media (max-width:700px){
  .owner-filter-row{
    display:none !important;
  }
  .mobile-owner-filter{
    display:block !important;
    margin:14px 0 18px;
  }
}
.mobile-owner-filter{
  display:none;
}
.mobile-owner-filter select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #c9d6e8;
  font-size:14px;
  background:#fff;
}


/* === Mobile task owner filter compact dropdown fix === */
@media (max-width: 700px){
  .tasks-owner-strip,
  .owner-filter-row{
    display:none !important;
  }

  .mobile-owner-filter{
    display:block !important;
    width:100%;
    margin:14px 0 18px !important;
  }

  .mobile-owner-filter select{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid #c9d6e8;
    font-size:14px;
    background:#fff;
    color:#2c2c2c;
    appearance:auto;
  }
}


/* === Q&A question editing === */
.qa-question-edit-wrap[hidden]{
  display:none !important;
}
.qa-question-edit-wrap{
  margin:12px 0 8px;
}
.qa-question-edit-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}


/* === Remove duplicate owner chips when dropdown present === */
@media (max-width:700px){
  .tasks-owner-strip,
  .owner-filter-row,
  .owner-filter-chip{
    display:none !important;
  }
}


/* === Wedding detail page === */
body.page-wedding-detail #header{ background:#2c2c2c; border-bottom-color:#1a1a1a; }
#wedding-detail-body{
  max-width:1280px;
  margin:0 auto;
  padding:28px 32px 64px;
  box-sizing:border-box;
}
.wdetail-topbar{
  display:flex;
  align-items:center;
  gap:0;
  margin-bottom:20px;
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(245,247,250,0.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  margin:-24px -32px 20px;
  padding:14px 24px;
  border-bottom:1px solid rgba(201,216,232,0.45);
}

.wdetail-topbar-center{
  min-width:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  flex:1;
}

.wdetail-topbar-sep{
  color:#b8c7d6;
  font-size:18px;
  font-weight:300;
  margin:0 10px;
  user-select:none;
  flex-shrink:0;
}

.wdetail-topbar-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-left:auto;
  flex-shrink:0;
}
.wdetail-topbar-kicker{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#7a8ea4;
  margin-bottom:4px;
}
.wdetail-topbar-title{
  font-family: 'Cormorant Garamond', serif;
  font-size:17px;
  font-weight:600;
  line-height:1.25;
  color:#2f3f56;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  letter-spacing:0.02em;
}
.wdetail-back-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:none;
  background:none;
  color:#6b7f96;
  padding:8px 12px 8px 8px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.01em;
  text-transform:none;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
  flex-shrink:0;
  border-radius:10px;
}
.wdetail-back-btn:hover{
  color:var(--staff-primary, #3a7bd5);
  background:rgba(58,123,213,0.07);
}
.wdetail-edit-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1.5px solid rgba(201,216,232,0.7);
  background:rgba(255,255,255,0.75);
  color:#4a5e74;
  border-radius:10px;
  padding:8px 16px;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:none;
  cursor:pointer;
  transition:all .18s;
  white-space:nowrap;
  flex-shrink:0;
}
.wdetail-edit-btn:hover{
  border-color:var(--staff-primary, #3a7bd5);
  color:var(--staff-primary, #3a7bd5);
  background:rgba(58,123,213,0.06);
  box-shadow:0 2px 8px rgba(58,123,213,0.10);
}
.wdetail-preview-portal-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1.5px solid rgba(201,216,232,0.7);
  background:rgba(255,255,255,0.75);
  color:#4a5e74;
  border-radius:10px;
  padding:8px 16px;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:none;
  cursor:pointer;
  transition:all .18s;
  white-space:nowrap;
  flex-shrink:0;
}
.wdetail-preview-portal-btn:hover{
  border-color:#7c6b9e;
  color:#7c6b9e;
  background:rgba(124,107,158,0.06);
  box-shadow:0 2px 8px rgba(124,107,158,0.10);
}
/* Couple Portal Preview Modal */
.couple-portal-preview-overlay{
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:9999;
  background:rgba(20,18,16,0.6);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.couple-portal-preview-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 24px;
  background:linear-gradient(135deg,#2c2c2c,#3b352f);
  color:#fff;
  flex-shrink:0;
}
.couple-portal-preview-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:20px;
  font-weight:500;
  color:#fff;
  line-height:1.2;
}
.couple-portal-preview-subtitle{
  font-family:'Jost',sans-serif;
  font-size:11px;
  color:rgba(255,255,255,0.55);
  letter-spacing:0.06em;
  margin-top:2px;
}
.couple-portal-preview-close{
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .18s,border-color .18s;
  flex-shrink:0;
}
.couple-portal-preview-close:hover{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.36);
}
.couple-portal-preview-iframe{
  flex:1;
  width:100%;
  border:none;
  background:#fff;
}
@media (max-width: 480px) {
  .couple-portal-preview-header {
    padding: 10px 14px;
  }
  .couple-portal-preview-title {
    font-size: 15px;
  }
  .couple-portal-preview-subtitle {
    font-size: 11px;
  }
  .couple-portal-preview-close {
    width: 32px;
    height: 32px;
    font-size: 20px;
  }
}
.wdetail-shell{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.wdetail-hero{
  background:#fff;
  border:1px solid #dce8f4;
  border-radius:12px;
  padding:24px 28px;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
.wdetail-hero-kicker{
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#7a8ea4;
  font-weight:700;
  margin-bottom:8px;
}
.wdetail-hero-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:38px;
  line-height:1.1;
  color:#1a1a1a;
}
.wdetail-hero-sub{
  margin-top:10px;
  color:#6a82a0;
  font-size:14px;
  line-height:1.6;
}
.wdetail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.wdetail-card{
  background:#fff;
  border:1px solid #dce8f4;
  border-radius:12px;
  padding:22px 24px;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
.wdetail-card-head{
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#7a8ea4;
  font-weight:700;
  margin-bottom:14px;
}
.wdetail-card-head-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}
.wdetail-card-sub{
  margin-top:6px;
  font-size:13px;
  color:#7a8ea4;
}
.wdetail-task-progress{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:24px;
  color:#2c2c2c;
  white-space:nowrap;
}
.wdetail-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 24px;
}
.wdetail-field-label{
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#999;
  font-weight:700;
  margin-bottom:6px;
}
.wdetail-field-value{
  font-size:14px;
  color:#1a1a1a;
  line-height:1.55;
  white-space:normal;
  word-break:break-word;
}
.wdetail-field-value a{
  color:#1a1a1a;
  text-decoration:none;
}
.wdetail-field-value a:hover{
  text-decoration:underline;
}
.wdetail-empty{
  color:#aaa;
  font-style:italic;
}
.wdetail-notes{
  font-size:14px;
  line-height:1.7;
  color:#333;
  white-space:pre-wrap;
}
.wdetail-tasks-card{
  padding:22px 24px 24px;
}
.wdetail-task-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 16px;
}
.wdetail-task-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  border:1px solid #d8e5f2;
  border-radius:10px;
  padding:14px 14px;
  background:#fff;
  transition:border-color .15s, background .15s;
}
.wdetail-task-item.done{
  background:#f3f8ff;
}
.wdetail-task-item:hover{
  border-color:#ccd8e9;
}
.wdetail-task-check{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1.5px solid #c2d2e4;
  background:#fff;
  color:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
  cursor:pointer;
  transition:all .15s;
}
.wdetail-task-item.done .wdetail-task-check{
  background:#4a7a4e;
  border-color:#4a7a4e;
  color:#fff;
}
.wdetail-task-main{
  min-width:0;
  flex:1;
}
.wdetail-task-name{
  font-size:14px;
  color:#1a1a1a;
  line-height:1.5;
}
.wdetail-task-item.done .wdetail-task-name{
  color:#7a8ea4;
  text-decoration:line-through;
}
.wdetail-task-status{
  margin-top:6px;
  font-size:11px;
  color:#8fa4bb;
}
@media (max-width: 900px){
  #wedding-detail-body{
    padding:20px 20px 40px;
  }
  .wdetail-grid{
    grid-template-columns:1fr;
  }
  .wdetail-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .wdetail-task-list{
    grid-template-columns:1fr;
  }
  .wdetail-card-head-row{
    flex-direction:column;
    align-items:stretch;
  }
  .wdetail-hero-title{
    font-size:30px;
  }
}


/* === Wedding detail mobile/task UX polish === */
body.page-wedding-detail #footer{
  margin-top:18px;
}

.wdetail-shell{
  gap:20px;
}

.wdetail-tasks-card{
  position:relative;
}

.wdetail-task-list{
  align-items:stretch;
}

.wdetail-task-item{
  align-items:flex-start;
}

.wdetail-task-check{
  min-width:22px;
}

.wdetail-task-name{
  font-weight:500;
}

.wdetail-task-status{
  font-size:12px;
}

@media (max-width: 900px){
  #wedding-detail-body{
    max-width:100%;
    padding:18px 16px 34px !important;
  }

  .wdetail-topbar{
    margin-bottom:12px;
  }

  .wdetail-shell{
    gap:14px;
  }

  .wdetail-hero,
  .wdetail-card{
    border-radius:14px;
    padding:18px 18px;
  }

  .wdetail-hero-title{
    font-size:28px !important;
    line-height:1.08;
  }

  .wdetail-hero-sub{
    font-size:13px;
    line-height:1.55;
  }

  .wdetail-card-head{
    font-size:10px;
    margin-bottom:10px;
  }

  .wdetail-card-head-row{
    gap:10px;
    margin-bottom:12px;
  }

  .wdetail-card-sub{
    font-size:12px;
    line-height:1.5;
  }

  .wdetail-task-progress{
    font-size:22px;
  }

  .wdetail-task-list{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .wdetail-task-item{
    padding:14px 12px;
    border-radius:12px;
  }

  .wdetail-task-check{
    width:24px;
    height:24px;
    border-radius:50%;
    margin-top:1px;
  }

  .wdetail-task-name{
    font-size:15px;
    line-height:1.45;
  }

  .wdetail-task-status{
    margin-top:5px;
    font-size:12px;
    line-height:1.4;
  }

  .wdetail-info-grid{
    gap:12px 16px;
  }

  .wdetail-field-label{
    font-size:9px;
  }

  .wdetail-field-value{
    font-size:14px;
    line-height:1.55;
  }

  .wdetail-notes{
    font-size:14px;
    line-height:1.7;
  }

  .wdetail-add-btn{
    min-height:46px;
    border-radius:999px;
    font-size:11px;
  }
}


@media (max-width: 640px){
  #wedding-detail-body{
    padding:14px 14px 28px !important;
  }

  .wdetail-topbar{
    gap:10px;
  }

  .wdetail-hero,
  .wdetail-card{
    padding:16px 16px;
  }

  .wdetail-hero-title{
    font-size:24px !important;
  }

  .wdetail-hero-sub{
    font-size:12px;
  }

  .wdetail-task-item{
    gap:10px;
  }

  .wdetail-task-check{
    width:26px;
    height:26px;
    font-size:13px;
  }

  .wdetail-task-name{
    font-size:15px;
  }

  .wdetail-card-head-row{
    flex-direction:column;
    align-items:stretch;
  }

  .wdetail-topbar{
    margin:-14px -14px 16px;
    padding:12px 14px;
  }
  .wdetail-topbar-sep{
    display:none;
  }
  .wdetail-back-btn span{
    display:none;
  }
  .wdetail-back-btn{
    padding:8px;
  }
  .wdetail-topbar-title{
    font-size:15px;
  }
  .wdetail-edit-btn span{
    display:none;
  }
  .wdetail-edit-btn{
    padding:8px 10px;
  }
  .wdetail-preview-portal-btn span{
    display:none;
  }
  .wdetail-preview-portal-btn{
    padding:8px 10px;
  }

  .wdetail-task-progress{
    font-size:18px;
    align-self:flex-start;
  }

  /* Larger tap target for task checkboxes */
  .wdetail-task-check{
    width:28px;
    height:28px;
    border-radius:50%;
  }
  .wdetail-task-item{
    min-height:54px;
    align-items:center;
  }
  .wdetail-task-item.done{
    align-items:flex-start;
  }
  .wdetail-task-item.done .wdetail-task-check{
    margin-top:3px;
  }
}


/* === Wedding checklist categories === */
.wdetail-task-category-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 14px;
}
.wdetail-task-category-btn{
  border:1.5px solid #c9d8e8;
  background:#fff;
  color:#546278;
  border-radius:999px;
  padding:9px 14px;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .15s;
}
.wdetail-task-category-btn:hover{
  border-color:#2c2c2c;
  color:#2c2c2c;
}
.wdetail-task-category-btn.active{
  background:#2c2c2c;
  border-color:#2c2c2c;
  color:#fff;
}
.wdetail-task-category-meta{
  font-size:12px;
  color:#7a8ea4;
  margin:0 0 14px;
  line-height:1.5;
}
/* (superseded by later 2×2 grid rule) */


/* === Clean rebuild task + wedding detail fixes === */
.task-toggle{display:none !important;}
.task-hitarea{
  cursor:default !important;
  display:block !important;
  padding-left:16px !important;
}
.task-main{
  display:block !important;
  margin-left:0 !important;
}
.wdetail-task-category-tabs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 14px;
}
.wdetail-task-category-btn{
  border:1.5px solid #c9d8e8;
  background:#fff;
  color:#546278;
  border-radius:999px;
  padding:10px 14px;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}
.wdetail-task-category-btn.active{
  background:#2c2c2c;
  color:#fff;
  border-color:#2c2c2c;
}
.wdetail-task-category-meta{
  font-size:13px;
  color:#7a8ea4;
  line-height:1.5;
  margin:0 0 14px;
}
.wdetail-task-category-empty{
  color:#999;
  font-style:italic;
}

/* Wedding detail task board density + visual polish */
.wdetail-tasks-card{
  background:
    radial-gradient(circle at top right, rgba(47,95,167,0.06), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #f4f8fd 100%);
  padding:24px 26px 26px;
}
.wdetail-task-progress{
  padding:10px 14px;
  border:1px solid #dce8f4;
  border-radius:999px;
  background:rgba(255,255,255,0.88);
  box-shadow:0 8px 20px rgba(52,40,30,0.05);
}
.wdetail-task-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.wdetail-task-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 16px;
}
.wdetail-task-category-meta{
  display:none !important;
}
#wdetail-task-list > .wdetail-task-grid{
  margin-top:2px;
}
#wdetail-task-list > .clx-subcategory{
  margin-left:0;
  padding:18px 18px 18px;
  border:1px solid rgba(212,221,232,0.9);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,253,0.96));
  box-shadow:0 14px 32px rgba(67,84,108,0.07);
  gap:14px;
}
#wdetail-task-list > .clx-subcategory .clx-subcategory-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#6f675d;
  font-weight:700;
}
#wdetail-task-list > .clx-subcategory .clx-subcategory-title::before{
  content:'';
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg, #5d7d56 0%, #8aa283 100%);
  box-shadow:0 0 0 4px rgba(93,125,86,0.12);
}
#wdetail-task-list > .clx-subcategory .wdetail-task-grid{
  margin-left:0;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 16px;
}
@media (min-width:1180px){
  .wdetail-task-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  #wdetail-task-list > .clx-subcategory .wdetail-task-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media (max-width:900px){
  #wdetail-task-list > .clx-subcategory{
    padding:14px 14px 16px !important;
    border-radius:14px !important;
  }
  .wdetail-task-grid,
  #wdetail-task-list > .clx-subcategory .wdetail-task-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
}
/* (superseded by later 2×2 grid rule) */


/* === Clean mobile section picker override === */
#mobile-page-picker-wrap{display:none;max-width:1300px;margin:0 auto;padding:14px 14px 0;}
.mobile-page-picker-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#4d4c4a 0%,#595856 100%);border:1px solid rgba(255,255,255,0.14);border-radius:24px;padding:16px 18px;box-shadow:0 10px 24px rgba(0,0,0,0.12);}
.mobile-page-picker-icon{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;flex:0 0 52px;}
.mobile-page-picker-copy{min-width:0;flex:1;}
.mobile-page-picker-label{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.72);font-weight:600;margin-bottom:4px;}
.mobile-page-picker-select-wrap{position:relative;}
.mobile-page-picker-select-wrap::after{content:'\25BC';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:12px;color:rgba(255,255,255,0.82);pointer-events:none;}
#mobile-page-picker{width:100%;appearance:none;-webkit-appearance:none;background:transparent;border:none;outline:none;color:#fff;font-family:'Jost','Helvetica Neue',sans-serif;font-size:19px;font-weight:600;line-height:1.2;padding:0 24px 0 0;cursor:pointer;}
#mobile-page-picker option{color:#2c2c2c;background:#fff;}
@media (max-width:700px){
  #nav-tabs{display:none !important;}
  #mobile-page-picker-wrap{display:none !important;}
}

/* ═══ Style Block 3 ═══ */
@media (max-width:700px){
  body #nav-tabs{display:none !important;}
  body #mobile-page-picker-wrap{display:none !important;}
}

/* ═══ Style Block 4 ═══ */
@media (max-width: 768px){
  /* Keep owner filters fully visible on mobile without horizontal scrolling */
  .tasks-owner-strip{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    flex-wrap:unset !important;
    overflow:visible !important;
    padding-bottom:0 !important;
  }
  .owner-filter-chip{
    width:100% !important;
    min-width:0 !important;
    justify-content:center !important;
    padding:12px 10px !important;
  }
  .owner-filter-chip-label{
    font-size:12px !important;
  }

  /* Make work log form fit safely on narrow iPhone widths */
  #wl-body{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .wl-form-header,
  .wl-form-body,
  .wl-form-footer{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .wl-field,
  .wl-field-sm,
  .wl-field-row{
    min-width:0 !important;
    max-width:none !important;
  }
  .wl-input,
  #wl-date,
  #wl-hist-date,
  #wl-hours,
  #wl-hist-employee{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  input[type="date"].wl-input{
    -webkit-appearance:none;
    appearance:none;
    font-size:16px !important;
    line-height:1.25 !important;
    min-height:56px !important;
    padding:14px 14px !important;
    overflow:hidden !important;
  }
  input[type="date"].wl-input::-webkit-date-and-time-value{
    text-align:left;
  }
  .wl-label-hint{
    font-size:12px !important;
    line-height:1.45 !important;
  }
}

@media (max-width: 420px){
  .tasks-owner-strip{
    grid-template-columns:1fr 1fr !important;
  }
  .owner-filter-chip{
    border-radius:18px !important;
    gap:6px !important;
    padding:11px 8px !important;
  }
  .owner-filter-chip-icon{
    width:22px !important;
    height:22px !important;
    font-size:10px !important;
  }
  .owner-filter-chip-label{
    font-size:11px !important;
    letter-spacing:.02em !important;
  }
  .wl-form-title{
    font-size:28px !important;
  }
}

@media (max-width:768px){
  #nav-tabs{
    justify-content:center !important;
    align-items:center;
  }
}


/* === Mobile owner filter dropdown === */
@media (max-width:700px){
  .owner-filter-row{
    display:none !important;
  }
  .mobile-owner-filter{
    display:block !important;
    margin:14px 0 18px;
  }
}
.mobile-owner-filter{
  display:none;
}
.mobile-owner-filter select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #c9d6e8;
  font-size:14px;
  background:#fff;
}


/* === Remove duplicate owner chips when dropdown present === */
@media (max-width:700px){
  .tasks-owner-strip,
  .owner-filter-row,
  .owner-filter-chip{
    display:none !important;
  }
}

/* === Mobile task filter controls — compact & touch-friendly === */
@media (max-width:768px){
  /* Stack the entire controls area vertically with tight spacing */
  .tasks-list-controls{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
  }

  /* Unfinished / Finished — full-width pair of equal buttons */
  .tasks-filter-tabs{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    width:100% !important;
    overflow:visible !important;
    flex-wrap:unset !important;
    margin-right:0 !important;
  }
  .tasks-filter-btn{
    width:100% !important;
    text-align:center !important;
    white-space:nowrap !important;
    padding:11px 8px !important;
    font-size:11px !important;
    border-radius:10px !important;
  }

  /* All Tasks / Wedding / Non-Wedding — full-width row of 3 equal buttons */
  .task-type-filter-strip{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:6px !important;
    width:100% !important;
    margin-top:0 !important;
  }
  .task-type-filter-btn{
    width:100% !important;
    text-align:center !important;
    white-space:nowrap !important;
    padding:10px 6px !important;
    font-size:9px !important;
    border-radius:10px !important;
  }
}

/* Extra-narrow phones: stack task-type buttons 1×3 vertically if they get too cramped */
@media (max-width:360px){
  .task-type-filter-strip{
    grid-template-columns:1fr !important;
  }
}

/* ═══ Style Block 5 ═══ */
/* ══ Tours page layout ══ */
#page-tours .stay-panel { display: none; }
#page-tours .stay-panel.active { display: block; }

/* Filter row */
#tours-upcoming-filter-row, #tours-past-filter-row { margin-bottom: 20px; }

/* Tour cards */
.tour-log-card { background: #fff; border: 1px solid #dce8f4; border-radius: 10px; margin-bottom: 10px; transition: box-shadow 0.15s; overflow: hidden; }
.tour-log-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.tour-log-card.is-upcoming { border-left: 3px solid #4a7a4e; }
/* Collapsed summary row — always visible */
.tour-log-summary { display: grid; grid-template-columns: 40px minmax(0, 1.35fr) auto auto; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; user-select: none; }
.tour-log-summary:hover { background: #f2f7fd; }
.tour-log-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; font-family: 'Jost', sans-serif; color: #fff; }
.tour-log-avatar.marianne { background: #2e6b9e; }
.tour-log-avatar.mandy    { background: #5b4a61; }
.tour-log-avatar.maggie   { background: #7a3a5a; }
.tour-log-avatar.lindsey  { background: #3f6f8f; }
.tour-log-avatar.unassigned { background: #b0c6da; }
.tour-log-main { min-width: 0; }
.tour-log-meta { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px 10px; min-width: 210px; }
.tour-log-line { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin-top:10px; }
.tour-log-pill { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; background:#eaf2fb; color:#546278; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; }
.tour-log-pill.assignee { background:#dce8f4; color:#546278; }
.tour-log-summary-date { font-family:'Cormorant Garamond', Georgia, serif; font-size:34px; line-height:1.05; color:#1d1d1d; font-weight:600; letter-spacing:0.01em; }
.tour-log-summary-name { margin-top:6px; font-family:'Jost', 'Helvetica Neue', sans-serif; font-size:17px; line-height:1.35; color:#546278; font-weight:500; }
.tour-upcoming-badge { padding: 4px 9px; border-radius: 20px; background: #edf5ee; color: #4a7a4e; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tour-log-chevron { margin-left: 0; color: #bbb; font-size: 11px; transition: transform 0.2s; flex-shrink: 0; justify-self: end; }
.tour-log-card.expanded .tour-log-chevron { transform: rotate(180deg); }

@media (max-width: 960px) {
  .tour-log-summary { grid-template-columns: 40px minmax(0,1fr) auto auto; gap: 12px; padding: 16px; }
  .tour-log-summary-date { font-size: 24px; }
  .tour-log-meta { min-width: 0; flex-wrap: wrap; }
}
/* Expanded detail panel */
.tour-log-detail { display: none; border-top: 1px solid #e2ecf5; padding: 16px 20px 14px; background: #f2f7fd; }
.tour-log-card.expanded .tour-log-detail { display: block; }
.tour-log-section { margin-bottom: 10px; }
.tour-log-section:last-child { margin-bottom: 0; }
.tour-log-section-label { font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: #aaa; margin-bottom: 3px; font-weight: 600; }
.tour-log-section-text { font-size: 13px; color: #333; line-height: 1.6; }
.tour-log-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #dde8f3; }
.tour-log-edit-btn { padding: 7px 14px; background: #fff; color: #2c2c2c; border: 1.5px solid #c9d8e8; border-radius: 4px; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.15s; }
.tour-log-edit-btn:hover { border-color: #2c2c2c; background: #f2f7fd; }
.tour-log-del-btn { padding: 7px 14px; background: #fff; color: #2F5FA7; border: 1.5px solid #c9d8e8; border-radius: 4px; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.15s; }
.tour-log-del-btn:hover { border-color: #2F5FA7; background: #edf5ff; }
.tours-empty { text-align: center; padding: 52px 24px; color: #bbb; background: #fff; border: 1px dashed #dae4f0; border-radius: 12px; }
.tours-empty-icon { font-size: 36px; margin-bottom: 10px; }
.tours-empty-msg { font-size: 14px; color: #aaa; margin-bottom: 4px; }
.tours-empty-sub { font-size: 12px; color: #ccc; }

/* Modal */
#weddings-show-all-wrap { text-align: center; padding: 24px 0 8px; }
#weddings-show-all-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 32px; background: #fff; border: 1.5px solid #c9d8e8; border-radius: 999px; font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #2c2c2c; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.06); transition: all 0.18s; }
#weddings-show-all-btn:hover { border-color: #2c2c2c; box-shadow: 0 6px 20px rgba(0,0,0,0.10); transform: translateY(-1px); }
#weddings-show-all-count { background: #2c2c2c; color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 10px; letter-spacing: 0.06em; }
#tour-modal-overlay { display: none !important; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: rgba(20,18,16,0.56); backdrop-filter: blur(6px); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#tour-modal-overlay.open { display: flex !important; align-items: center; justify-content: center; }
#tour-modal-box { position: relative; width: min(600px, calc(100% - 40px)); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 32px 80px rgba(0,0,0,0.28); display: flex; flex-direction: column; }
#tour-modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 26px 18px; background: linear-gradient(135deg,#2c2c2c,#3b352f); border-radius: 18px 18px 0 0; flex-shrink: 0; }
#tour-modal-kicker { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #aaa; margin-bottom: 5px; }
#tour-modal-title { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 26px; color: #fff; font-weight: 400; line-height: 1.1; }
.tour-modal-close { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); color: #ccc; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
.tour-modal-close:hover { background: rgba(255,255,255,0.18); color: #fff; }
#tour-modal-body { padding: 24px 26px 0; flex: 1; overflow-y: auto; }
#tour-modal-foot { display: flex; align-items: center; gap: 12px; padding: 16px 26px 20px; border-top: 1px solid #dde8f3; background: #f2f7fd; border-radius: 0 0 18px 18px; flex-shrink: 0; }
#tour-submit-status.success { color: #4a7a4e; }
#tour-submit-status.error   { color: #2F5FA7; }

@media (max-width: 768px) {
  /* Body: remove side padding; add bottom room */
  #tours-body { padding: 0 0 80px; }

  /* Sticky toolbar */
  #tours-toolbar {
    position: sticky; top: 0; z-index: 10;
    flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between;
    gap: 0; padding: 0 10px;
    background: #fff; border-bottom: 2px solid #dce8f4; margin-bottom: 0;
  }
  #tours-subtabs { border-bottom: none; flex-shrink: 0; }
  #tours-subtabs .stay-subtab { padding: 12px 14px; font-size: 10px; }

  /* Add button — compact in toolbar */
  #tours-add-btn {
    position: static; width: auto; text-align: center;
    padding: 8px 14px; border-radius: 999px; margin-bottom: 0;
    background: linear-gradient(135deg, #1E3D6F 0%, #2F5FA7 100%);
    color: #fff; border: none;
    box-shadow: 0 4px 12px rgba(31,61,111,0.28);
    font-size: 10px; letter-spacing: 0.08em;
  }

  /* Filter row — compact */
  #tours-upcoming-filter-row, #tours-past-filter-row {
    padding: 8px 12px; background: #f8fafd;
    border-bottom: 1px solid #edf2f9; margin-bottom: 0;
  }
  #tours-upcoming-filter-row .wl-field, #tours-past-filter-row .wl-field { min-width: 0; max-width: 180px; }
  #tours-upcoming-filter-row .wl-label, #tours-past-filter-row .wl-label { font-size: 9px; margin-bottom: 2px; }
  #tours-upcoming-filter-row .wl-select, #tours-past-filter-row .wl-select { padding: 6px 10px; font-size: 13px; }

  /* Cards container — tighter padding */
  #tours-upcoming-results, #tours-hist-results { padding: 8px 8px 0; }

  /* Cards — compact summary */
  .tour-log-card { border-radius: 10px; margin-bottom: 8px; }
  .tour-log-summary {
    grid-template-columns: 36px 1fr 18px !important;
    grid-template-rows: auto auto;
    grid-template-areas:
      "avatar main chevron"
      "avatar meta chevron";
    column-gap: 10px;
    row-gap: 4px;
    padding: 12px !important;
    align-items: start;
  }
  .tour-log-avatar { grid-area: avatar; width: 32px !important; height: 32px !important; font-size: 11px !important; margin-top: 2px; }
  .tour-log-main  { grid-area: main; min-width: 0; }
  .tour-log-summary-date {
    font-size: 13px !important;
    font-family: 'Jost', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    color: #5a6a7e;
    line-height: 1.3;
  }
  .tour-log-summary-name {
    font-size: 15px; font-weight: 600; color: #1d2633;
    margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tour-log-meta {
    grid-area: meta;
    display: flex; justify-content: flex-start; flex-wrap: wrap;
    gap: 5px; margin-top: 0; min-width: 0;
  }
  .tour-upcoming-badge { padding: 2px 7px; font-size: 8px; }
  .tour-log-pill { padding: 3px 8px; font-size: 9px; }
  .tour-log-chevron { grid-area: chevron; justify-self: end; align-self: center; font-size: 10px; }

  /* Expanded detail — tighter */
  .tour-log-detail { padding: 12px 12px 10px !important; }
  .tour-log-section { margin-bottom: 8px; }
  .tour-log-section-label { font-size: 8px; margin-bottom: 2px; }
  .tour-log-section-text { font-size: 12px; line-height: 1.5; }
  .tour-log-section-text a { word-break: break-all; }
  .tour-pdf-chip { padding: 5px 10px; font-size: 11px; }

  /* Action buttons — full width, stacked */
  .tour-log-actions {
    flex-direction: row; justify-content: stretch; gap: 8px;
    margin-top: 10px; padding-top: 10px;
  }
  .tour-log-edit-btn, .tour-log-del-btn {
    flex: 1; text-align: center; padding: 10px 12px; font-size: 11px;
  }

  /* Avatar picker in modal */
  .tours-avatar-picker { gap: 12px; }
  .tours-avatar-circle { width: 44px; height: 44px; font-size: 13px; }
  .tours-avatar-name { font-size: 9px; }

  /* Modal — bottom sheet */
  #tour-modal-overlay { padding: 0; }
  #tour-modal-overlay.open { display: flex !important; align-items: flex-end; justify-content: center; padding: 0; }
  #tour-modal-box { position: relative; width: 100%; max-width: 100%; border-radius: 18px 18px 0 0; max-height: 92vh; }
  #tour-modal-head { border-radius: 18px 18px 0 0; padding: 16px 16px 12px; }
  #tour-modal-title { font-size: 22px; }
  #tour-modal-body { padding: 14px 16px 0; }
  #tour-modal-foot { padding: 12px 16px 16px; }
  .tour-upload-area { padding: 14px; }

  /* Empty state */
  .tours-empty { padding: 36px 16px; }
}

/* Extra-small screens */
@media (max-width: 420px) {
  #tours-subtabs .stay-subtab { padding: 11px 10px; font-size: 9px; letter-spacing: 0.08em; }
  #tours-add-btn { padding: 7px 10px; font-size: 9px; }
  .tour-log-summary { padding: 10px !important; column-gap: 8px !important; }
  .tour-log-avatar { width: 28px !important; height: 28px !important; font-size: 10px !important; }
  .tour-log-summary-date { font-size: 12px !important; }
  .tour-log-summary-name { font-size: 14px; }
}

/* === Meetings page styles === */
.meeting-log-card { background: #fff; border: 1px solid #dce8f4; border-radius: 10px; margin-bottom: 10px; transition: box-shadow 0.15s; overflow: hidden; }
.meeting-log-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.meeting-log-card.is-upcoming { border-left: 3px solid #5a3a7a; }
.meeting-log-summary { display: grid; grid-template-columns: 40px minmax(0, 1.35fr) auto auto; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; user-select: none; }
.meeting-log-summary:hover { background: #faf8ff; }
.meeting-log-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; font-family: 'Jost', sans-serif; color: #fff; }
.meeting-log-avatar.marianne { background: #2e6b9e; }
.meeting-log-avatar.mandy    { background: #5b4a61; }
.meeting-log-avatar.maggie   { background: #7a3a5a; }
.meeting-log-avatar.lindsey  { background: #3f6f8f; }
.meeting-log-avatar.unassigned { background: #b0c6da; }
.meeting-log-main { min-width: 0; }
.meeting-log-meta { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px 10px; min-width: 210px; }
.meeting-log-pill { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; background:#f0eafa; color:#5a3a7a; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; }
.meeting-log-pill.assignee { background:#dce8f4; color:#546278; }
.meeting-log-summary-date { font-family:'Cormorant Garamond', Georgia, serif; font-size:34px; line-height:1.05; color:#1d1d1d; font-weight:600; letter-spacing:0.01em; }
.meeting-log-summary-name { margin-top:6px; font-family:'Jost', 'Helvetica Neue', sans-serif; font-size:17px; line-height:1.35; color:#546278; font-weight:500; }
.meeting-upcoming-badge { padding: 4px 9px; border-radius: 20px; background: #f0eafa; color: #5a3a7a; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.meeting-log-chevron { margin-left: 0; color: #bbb; font-size: 11px; transition: transform 0.2s; flex-shrink: 0; justify-self: end; }
.meeting-log-card.expanded .meeting-log-chevron { transform: rotate(180deg); }
@media (max-width: 960px) {
  .meeting-log-summary { grid-template-columns: 40px minmax(0,1fr) auto; }
  .meeting-log-meta { grid-column: 2 / 3; justify-content: flex-start; min-width: 0; }
}
@media (max-width: 640px) {
  .meeting-log-summary { grid-template-columns: 40px minmax(0,1fr); }
  .meeting-log-chevron { grid-column: 2 / 3; justify-self: start; }
}
.meeting-log-detail { display: none; border-top: 1px solid #e2ecf5; padding: 16px 20px 14px; background: #faf8ff; }
.meeting-log-card.expanded .meeting-log-detail { display: block; }
.meeting-log-section { margin-bottom: 10px; }
.meeting-log-section:last-child { margin-bottom: 0; }
.meeting-log-section-label { font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: #aaa; margin-bottom: 3px; font-weight: 600; }
.meeting-log-section-text { font-size: 13px; color: #333; line-height: 1.6; }
.meeting-log-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #dde8f3; }
.meeting-log-edit-btn { padding: 7px 14px; background: #fff; color: #2c2c2c; border: 1.5px solid #c9d8e8; border-radius: 4px; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.15s; }
.meeting-log-edit-btn:hover { border-color: #2c2c2c; background: #f2f7fd; }
.meeting-log-del-btn { padding: 7px 14px; background: #fff; color: #2F5FA7; border: 1.5px solid #c9d8e8; border-radius: 4px; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.15s; }
.meeting-log-del-btn:hover { border-color: #2F5FA7; background: #edf5ff; }
.cal-meeting-chip { display:block; white-space:normal; overflow:visible; text-overflow:unset; line-height:1.35; padding:8px 10px; border-radius:10px; margin-top:6px; font-size:10px; font-weight:600; background:#5a3a7a; color:#fff; cursor:pointer; border-left:3px solid #3a2550; font-family:'Jost',sans-serif; letter-spacing:0.04em; }
.cal-meeting-chip:hover { background:#3a2550; }
.cal-chip-meeting-label { display:block; font-size:9px; font-weight:500; opacity:0.88; margin-top:1px; letter-spacing:0.06em; }

/* === Mobile owner filter dropdown === */
@media (max-width:700px){
  .owner-filter-row{
    display:none !important;
  }
  .mobile-owner-filter{
    display:block !important;
    margin:14px 0 18px;
  }
}
.mobile-owner-filter{
  display:none;
}
.mobile-owner-filter select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #c9d6e8;
  font-size:14px;
  background:#fff;
}


/* === Remove duplicate owner chips when dropdown present === */
@media (max-width:700px){
  .tasks-owner-strip,
  .owner-filter-row,
  .owner-filter-chip{
    display:none !important;
  }
}

/* ═══ Style Block 6 ═══ */
/* ══════════════════════════════════════════════════════════
   WEDDING PAGE — MOBILE POLISH
   ══════════════════════════════════════════════════════════ */

/* â"€â"€ 1. Wedding List â"€â"€ */

/* Hide desktop-only table hint on card view */
@media (max-width:980px){
  #table-footer-note{ display:none !important; }

  /* Card shell */
  .wedding-card{
    border-radius:20px !important;
    border:1px solid #dce8f4 !important;
    box-shadow:0 8px 28px rgba(0,0,0,0.07) !important;
    overflow:hidden !important;
    margin-bottom:16px !important;
  }

  /* Header: tap target for opening detail */
  .card-header{
    padding:18px 18px 14px !important;
    background:linear-gradient(180deg,#f5f9fe,#f4f8fc) !important;
    border-bottom:1px solid #dde8f3 !important;
    display:block !important;
  }

  /* Couple name: prominent serif headline */
  .card-couple{
    font-size:26px !important;
    line-height:1.05 !important;
    color:#1a1a1a !important;
    letter-spacing:-.01em !important;
    font-weight:700 !important;
  }

  /* Progress bar: taller, more readable */
  .card-progress-bar-wrap{
    margin-top:14px !important;
    gap:10px !important;
  }
  .card-progress-track{
    height:7px !important;
    border-radius:99px !important;
  }

  /* Staff summary strip */
  .staff-summary{
    font-size:12px !important;
    line-height:1.7 !important;
  }

  /* Meta: 2-column grid on tablet */
  .card-meta{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    padding:14px 18px !important;
    background:#fff !important;
    border-bottom:1px solid #e2ecf5 !important;
  }
  .card-meta > div{
    padding:12px 12px !important;
    background:#f4f8fc !important;
    border:1px solid #dce8f4 !important;
    border-radius:12px !important;
  }
  .card-meta-label{
    font-size:8px !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
    color:#7a8ea4 !important;
    font-weight:700 !important;
    margin-bottom:5px !important;
    display:block !important;
  }
  .card-meta-value{
    font-size:14px !important;
    font-weight:500 !important;
    color:#1a1a1a !important;
    line-height:1.4 !important;
    white-space:normal !important;
  }
  .card-meta-value.empty{ color:#bbb !important; font-style:italic !important; }

  /* Hide full-width expand button — replaced by arrow toggle in header */
  .card-actions{ display:none !important; }

  /* Small arrow toggle in card header */
  .card-mobile-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-shrink:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    position:absolute !important;
    top:10px !important;
    right:10px !important;
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    aspect-ratio:1 !important;
    background:#fff !important;
    border:1.5px solid #ccd9e8 !important;
    border-radius:50% !important;
    font-size:11px !important;
    color:#4e6a84 !important;
    cursor:pointer !important;
    transition:background 0.15s,border-color 0.15s,color 0.15s !important;
    line-height:1 !important;
  }
  .card-mobile-toggle.open{
    background:#eef4fb !important;
    border-color:#afc4d9 !important;
    color:#2c2c2c !important;
  }

  /* Expanded section */
  .card-exp-body{ background:#f4f8fc !important; }
  .card-exp-section{ padding:16px 18px !important; }
  .card-exp-head{ margin-bottom:12px !important; }
  .card-exp-row{ padding:8px 0 !important; }
  .card-exp-lbl{ font-size:9px !important; }
  .card-exp-val{ font-size:14px !important; }
}

/* On small phones: stack meta to 1 column */
@media (max-width:560px){
  .card-meta{ grid-template-columns:1fr !important; }
  .card-couple{ font-size:24px !important; }
  .card-header{ padding:16px 14px 12px !important; }
  .card-actions{ padding:10px 14px !important; }
  .card-meta{ padding:12px 14px !important; }
  .card-exp-section{ padding:14px 14px !important; }
}

/* Add Wedding button: full-width on mobile */
@media (max-width:640px){
  #weddings-actions{ padding:14px 14px 0 !important; }
  #add-btn{
    width:100% !important;
    border-radius:12px !important;
    padding:14px 18px !important;
    font-size:11px !important;
    text-align:center !important;
  }
  #search-section{ padding:12px 14px 0 !important; }
}

/* Year group labels */
@media (max-width:980px){
  .year-label{
    font-size:12px !important;
    padding-bottom:8px !important;
    margin-bottom:12px !important;
  }
}


/* â"€â"€ 2. Wedding Detail — topbar â"€â"€ */

@media (max-width:900px){
  #wedding-detail-body{
    padding:14px 14px 48px !important;
  }
  .wdetail-topbar{
    margin:-14px -14px 16px !important;
    padding:12px 14px !important;
  }
}

@media (max-width:480px){
  #wedding-detail-body{ padding:10px 10px 48px !important; }
  .wdetail-topbar{
    margin:-10px -10px 14px !important;
    padding:10px 10px !important;
  }
}


/* â"€â"€ 3. Wedding Detail — hero + cards â"€â"€ */

@media (max-width:900px){
  .wdetail-shell{ gap:14px !important; }
  .wdetail-grid{ gap:14px !important; }

  .wdetail-hero{
    padding:18px 18px !important;
    border-radius:16px !important;
  }
  .wdetail-hero-kicker{ margin-bottom:6px !important; }
  .wdetail-hero-title{ font-size:28px !important; line-height:1.05 !important; }
  .wdetail-hero-sub{ font-size:13px !important; margin-top:8px !important; }

  .wdetail-card{
    padding:16px 18px !important;
    border-radius:14px !important;
  }
  .wdetail-tasks-card{ padding:16px 18px 20px !important; }

  /* Task progress: stack below heading */
  .wdetail-card-head-row{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;
    margin-bottom:14px !important;
  }
  .wdetail-task-progress{
    font-size:18px !important;
    color:#6a82a0 !important;
  }
}

@media (max-width:480px){
  .wdetail-hero{ padding:14px 14px !important; }
  .wdetail-hero-title{ font-size:24px !important; }
  .wdetail-card{ padding:14px 14px !important; }
  .wdetail-tasks-card{ padding:14px 14px 16px !important; }
}


/* â"€â"€ 4. Wedding Detail — info field boxes â"€â"€ */

@media (max-width:900px){
  .wdetail-info-grid{
    gap:10px !important;
  }
  .wdetail-info-grid > div{
    background:#f4f8fc;
    border:1px solid #dce8f4;
    border-radius:10px;
    padding:12px !important;
  }
  .wdetail-field-label{
    font-size:8px !important;
    margin-bottom:4px !important;
  }
  .wdetail-field-value{
    font-size:14px !important;
    line-height:1.5 !important;
  }
  .wdetail-notes{
    font-size:14px !important;
    line-height:1.7 !important;
  }
}


/* â"€â"€ 5. Wedding Detail — task checkboxes + items â"€â"€ */

@media (max-width:900px){
  /* Bigger touch-friendly checkboxes */
  .wdetail-task-check{
    width:28px !important;
    height:28px !important;
    border-radius:50% !important;
    flex-shrink:0 !important;
  }

  /* Task items: generous touch target */
  .wdetail-task-item{
    padding:14px 14px !important;
    border-radius:12px !important;
    min-height:56px !important;
    gap:14px !important;
    cursor:pointer !important;
  }
  .wdetail-task-item:active{ background:#eef4fb !important; }

  .wdetail-task-name{ font-size:14px !important; line-height:1.5 !important; }
  .wdetail-task-list{ gap:10px !important; }
}

@media (max-width:480px){
  .wdetail-task-item{ padding:12px 12px !important; min-height:52px !important; }
  .wdetail-task-name{ font-size:13px !important; }
  .wdetail-task-check{ width:26px !important; height:26px !important; }
}


/* â"€â"€ 6. Task category tabs — superseded by later 2×2 grid rule â"€â"€ */

/* ═══ Style Block 7 ═══ */
.stay-card-summary{cursor:pointer !important;}
.stay-card-summary-btn{display:grid;width:100%;grid-template-columns:minmax(160px,1.15fr) minmax(180px,.95fr) minmax(180px,1.2fr) 28px;gap:22px;align-items:center;}
.stay-card-detail{display:none;}
.stay-card.expanded .stay-card-detail{display:block !important;}
@media (max-width:900px){.stay-card-summary-btn{grid-template-columns:1fr;gap:10px;}}

/* === Mobile owner filter dropdown === */
@media (max-width:700px){
  .owner-filter-row{
    display:none !important;
  }
  .mobile-owner-filter{
    display:block !important;
    margin:14px 0 18px;
  }
}
.mobile-owner-filter{
  display:none;
}
.mobile-owner-filter select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #c9d6e8;
  font-size:14px;
  background:#fff;
}


/* === Remove duplicate owner chips when dropdown present === */
@media (max-width:700px){
  .tasks-owner-strip,
  .owner-filter-row,
  .owner-filter-chip{
    display:none !important;
  }
}

/* ═══ Style Block 8 ═══ */
:root{
  --staff-shell-gap:24px;
  --staff-sidebar-width:290px;
  --staff-header-height:64px;
  --staff-mobile-nav-offset:0px;
}

@media (max-width: 900px){
  :root{
    --staff-mobile-nav-offset:80px;
  }
}

body{
  background:
    radial-gradient(circle at top left, rgba(238, 232, 223, 0.9), transparent 26%),
    radial-gradient(circle at top right, rgba(223, 232, 242, 0.82), transparent 24%),
    linear-gradient(180deg, #f2f7fc 0%, #edf3f9 45%, #e8f1f8 100%) !important;
}

#header{
  position:fixed !important;
  top:20px;
  left:20px;
  right:20px;
  z-index:220;
  padding:10px 20px !important;
  border-radius:30px;
  overflow:visible !important;
  background:rgba(255,255,255,0.84) !important;
  border:1px solid rgba(208, 216, 226, 0.9) !important;
  box-shadow:0 18px 42px rgba(66, 79, 98, 0.12) !important;
  backdrop-filter:blur(16px);
}

#header-inner{
  max-width:none !important;
}

#header-top{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:'brand user' !important;
  gap:18px !important;
  align-items:center !important;
}

#staff-sidebar{
  position:fixed;
  top:calc(20px + var(--staff-header-height) + var(--staff-shell-gap));
  left:20px;
  bottom:24px;
  width:var(--staff-sidebar-width);
  z-index:180;
}

#logo-block{
  grid-area:brand;
  gap:10px !important;
}

#logo-img{
  width:36px;
  height:36px;
  border-radius:10px;
}

#logo-text-name{
  color:#2b2b29 !important;
  font-size:17px !important;
  letter-spacing:0.03em !important;
  text-transform:none !important;
}

#logo-text-sub{
  color:#6d7885 !important;
  font-size:11px !important;
}

#logo-text-portal{
  color:#8e97a2 !important;
  border-top-color:rgba(198, 208, 220, 0.9) !important;
}

#nav-tabs{
  position:relative;
  width:100%;
  height:100%;
  display:flex !important;
  flex-direction:column;
  flex-wrap:nowrap !important;
  align-items:stretch;
  justify-content:flex-start !important;
  gap:8px !important;
  overflow:auto;
  padding:22px 14px 18px !important;
  margin:0 !important;
  border:1px solid rgba(208, 216, 226, 0.9);
  border-radius:30px;
  background:rgba(255,255,255,0.76) !important;
  box-shadow:0 16px 38px rgba(66, 79, 98, 0.1);
  backdrop-filter:blur(16px);
}

#nav-tabs::before{
  content:"Navigation";
  display:block;
  padding:4px 16px 12px;
  color:#8a93a0;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.nav-tab{
  width:100%;
  justify-content:flex-start !important;
  min-height:58px !important;
  padding:12px 16px !important;
  border-radius:18px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:#475769 !important;
  box-shadow:none !important;
}

.nav-tab:hover{
  background:rgba(240, 245, 250, 0.92) !important;
  border-color:rgba(198, 210, 223, 0.95) !important;
  color:#243447 !important;
}

.nav-tab.active{
  background:linear-gradient(135deg, rgba(255,255,255,0.98), rgba(231,239,247,0.98)) !important;
  border-color:rgba(184, 200, 220, 0.95) !important;
  color:#1f3145 !important;
  box-shadow:0 12px 24px rgba(92, 111, 134, 0.14) !important;
}

.nav-ico-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.nav-ico{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  border-radius:12px !important;
  background:#f5f8fb !important;
  color:#5d7289 !important;
  font-size:16px !important;
  box-shadow:none !important;
}

.nav-tab.active .nav-ico{
  background:#dfe8f2 !important;
  color:#33485f !important;
}

.nav-label{
  font-size:12px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
  text-align:left !important;
  white-space:normal !important;
  line-height:1.25 !important;
}

.ll-header-user{
  grid-area:user;
  margin-top:0 !important;
}

#app-main{
  margin-top:calc(20px + var(--staff-header-height) + var(--staff-shell-gap));
  margin-left:calc(20px + var(--staff-sidebar-width) + var(--staff-shell-gap));
  padding-right:20px;
}

#mobile-page-picker-wrap{
  margin-top:calc(20px + var(--staff-header-height) + 8px);
}

#search-section,
#table-section,
#cal-body,
#qa-body,
#wl-body,
#tasks-body,
#tours-body,
#rentals-body,
#family-body,
#events-body,
#page-admin-users,
#page-admin-permissions,
#wedding-detail-body,
#weddings-actions{
  max-width:none !important;
}

#page-weddings,
#page-calendar,
#page-qa,
#page-worklogs,
#page-tasks,
#page-tours,
#page-rentals,
#page-family,
#page-events,
#page-checklist-settings,
#page-portal-bridal-checklist,
#page-admin-users,
#page-admin-permissions{
  padding-right:0;
}

.staff-page-header{
  padding-top:0 !important;
}

@media (max-width: 1024px){
  :root{
    --staff-header-height:60px;
  }

  #header{
    left:14px;
    right:14px;
    top:14px;
    padding:16px 18px !important;
  border-radius:24px;
  }

  #staff-sidebar{
    left:14px;
    width:250px;
    top:calc(14px + var(--staff-header-height) + 16px);
    bottom:14px;
  }

  #nav-tabs{
    border-radius:24px;
  }

  #app-main{
    margin-left:280px;
    margin-right:14px;
  }
}

@media (max-width: 768px){
  #header{
    position:sticky !important;
    top:0;
    left:0;
    right:0;
    border-radius:0;
    padding:16px 14px 12px !important;
  }

  #header-top{
    grid-template-columns:1fr !important;
    grid-template-areas:
      'brand'
      'user' !important;
    gap:12px !important;
  }

  #nav-tabs{
    display:none !important;
  }

  #staff-sidebar{
    display:none !important;
  }

  #app-main{
    margin-top:0;
    margin-left:0;
    padding-right:0;
  }

  #footer{
    margin-left:0;
    margin-right:0;
    border-radius:0;
  }
}

/* ═══ Style Block 9 ═══ */
:root{
  --staff-content-max: min(1380px, calc(100vw - var(--staff-sidebar-width) - 92px));
  --staff-panel-border: rgba(201, 212, 225, 0.92);
  --staff-panel-bg: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(250,252,255,0.95) 100%);
  --staff-panel-shadow: 0 20px 46px rgba(67, 84, 108, 0.10);
  --staff-soft-shadow: 0 14px 34px rgba(67, 84, 108, 0.08);
  --staff-ink: #243244;
  --staff-muted: #627287;
}

#header{
  min-height:108px;
}

#header::after{
  content:"";
  position:absolute;
  inset:auto 28px 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(196, 208, 221, 0.8), transparent);
}

#logo-text-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
}

#staff-sidebar{
  filter:drop-shadow(0 18px 38px rgba(67, 84, 108, 0.10));
}

#nav-tabs{
  scrollbar-width:thin;
  scrollbar-color: rgba(167, 182, 199, 0.85) transparent;
}

#nav-tabs::-webkit-scrollbar{
  width:8px;
}

#nav-tabs::-webkit-scrollbar-thumb{
  background:rgba(167, 182, 199, 0.75);
  border-radius:999px;
}

#nav-tabs::after{
  content:"";
  display:block;
  min-height:10px;
}

.nav-tab{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  text-align:left !important;
}

.nav-tab.active{
  transform:none !important;
}

.nav-tab.active::before{
  content:"";
  position:absolute;
  left:8px;
  top:12px;
  bottom:12px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg, #8ca2ba 0%, #617a96 100%);
}

.nav-tab{
  position:relative;
  padding-left:18px !important;
}

#app-main{
  width:var(--staff-content-max);
  padding-bottom:42px;
}

#page-weddings,
#page-calendar,
#page-qa,
#page-worklogs,
#page-tasks,
#page-tours,
#page-rentals,
#page-family,
#page-events,
#page-checklist-settings,
#page-portal-bridal-checklist,
#page-admin-users,
#page-admin-permissions,
#page-wedding-detail{
  width:100%;
}

.staff-page-header{
  padding:0 0 18px !important;
}

.staff-page-header-inner{
  border-radius:28px !important;
  padding:28px 30px 24px !important;
  background:
    radial-gradient(circle at top right, rgba(219,229,240,0.46), transparent 26%),
    radial-gradient(circle at bottom left, rgba(236,228,218,0.24), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,0.99), rgba(249,251,254,0.98)) !important;
  border:1px solid var(--staff-panel-border) !important;
  box-shadow:var(--staff-panel-shadow) !important;
}

.staff-page-title{
  color:#1f2c3d !important;
}

.staff-page-sub{
  color:#526275 !important;
}

.staff-page-badge{
  background:rgba(247,250,253,0.98) !important;
  border-color:rgba(180,193,210,0.95) !important;
  color:#405166 !important;
}

#weddings-actions,
#search-section,
#table-section,
#cal-body,
#qa-body,
#wl-body,
#tasks-body,
#tours-body,
#rentals-body,
#family-body,
#events-body,
#wedding-detail-body,
#page-checklist-settings,
#page-portal-bridal-checklist,
#page-admin-users,
#page-admin-permissions{
  width:100%;
  margin-left:0 !important;
  margin-right:0 !important;
}

#weddings-actions{
  padding:0 0 16px !important;
}

#search-section,
#table-section,
#cal-body,
#qa-body,
#wl-body,
#tasks-body,
#tours-body,
#rentals-body,
#family-body,
#events-body,
#wedding-detail-body,
#page-checklist-settings,
#page-portal-bridal-checklist,
#page-admin-users,
#page-admin-permissions{
  border:1px solid var(--staff-panel-border);
  border-radius:28px;
  background:var(--staff-panel-bg);
  box-shadow:var(--staff-soft-shadow);
}

#search-section,
#table-section,
#cal-body,
#qa-body,
#wl-body,
#tasks-body,
#tours-body,
#rentals-body,
#family-body,
#events-body,
#wedding-detail-body{
  padding-left:24px !important;
  padding-right:24px !important;
}

#search-section,
#cal-body,
#qa-body,
#wl-body,
#tasks-body,
#tours-body,
#rentals-body,
#family-body,
#events-body,
#wedding-detail-body,
#page-checklist-settings,
#page-portal-bridal-checklist,
#page-admin-users,
#page-admin-permissions{
  margin-bottom:18px !important;
}

#table-section{
  padding-top:22px !important;
}

#search-wrap{
  border-radius:20px !important;
}

#search-input{
  font-size:16px !important;
}

#add-btn,
.tasks-page-add-btn,
#qa-page-add-btn,
.stay-add-btn{
  border-radius:999px !important;
  min-height:52px;
  padding:0 22px !important;
  box-shadow:0 14px 28px rgba(92, 111, 134, 0.18);
}

#add-btn{
  background:linear-gradient(135deg, #7f91ad 0%, #60758f 100%) !important;
  border:none !important;
}

#add-btn:hover{
  background:linear-gradient(135deg, #70829c 0%, #53667d 100%) !important;
}

.year-group{
  margin-bottom:28px !important;
}

.wedding-table{
  background:#ffffff !important;
}

.wedding-table thead tr{
  background:linear-gradient(180deg, #394353 0%, #313a49 100%) !important;
}

.wedding-table th{
  color:rgba(255,255,255,0.92) !important;
}

.wedding-table tbody tr.main-row{
  transition:background .18s ease, transform .18s ease;
}

.wedding-table tbody tr.main-row:hover{
  background:#f8fbff !important;
}

tr.expand-row td{
  background:#f8fafc !important;
}

.tasks-card,
.qa-card,
.wl-form-card,
.wl-log-card,
.wl-recent-item,
.tour-log-card,
.stay-card,
.checklist-admin-card,
.ll-admin-panel,
.wdetail-card,
.wdetail-hero{
  border-radius:24px !important;
  border:1px solid var(--staff-panel-border) !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,251,254,0.97)) !important;
  box-shadow:var(--staff-soft-shadow) !important;
}

.tasks-list-head,
.tasks-card-head,
.wl-form-header,
.checklist-admin-card-head,
.ll-admin-panel-head{
  border-radius:24px 24px 0 0;
}

#page-tasks #tasks-list-wrap,
#qa-list,
#wl-hist-results,
#tours-upcoming-results,
#tours-hist-results,
#rentals-upcoming-results,
#rentals-past-results,
#family-upcoming-results,
#family-past-results,
#events-upcoming-results,
#events-past-results{
  gap:18px !important;
}

@media (max-width: 1024px){
  :root{
    --staff-content-max: calc(100vw - 306px);
  }

  #app-main{
    padding-bottom:28px;
  }

  .staff-page-header-inner{
    padding:24px 24px 22px !important;
  }

  #search-section,
  #table-section,
  #cal-body,
  #qa-body,
  #wl-body,
  #tasks-body,
  #tours-body,
  #rentals-body,
  #family-body,
  #events-body,
  #wedding-detail-body{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}

@media (max-width: 768px){
  #header::after{
    display:none;
  }

  #mobile-page-picker-wrap{
    margin-top:14px;
  }

  #search-section,
  #table-section,
  #cal-body,
  #qa-body,
  #wl-body,
  #tasks-body,
  #tours-body,
  #rentals-body,
  #family-body,
  #events-body,
  #wedding-detail-body,
  #page-checklist-settings,
  #page-portal-bridal-checklist,
  #page-admin-users,
  #page-admin-permissions{
    border-radius:22px;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .staff-page-header-inner{
    border-radius:22px !important;
    padding:20px 18px 18px !important;
  }
}

/* ═══ Style Block 10 ═══ */
.tour-log-card{
  border:1px solid rgba(203, 214, 226, 0.92) !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at top right, rgba(229, 236, 245, 0.44), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,251,254,0.97)) !important;
  box-shadow:0 18px 40px rgba(67, 84, 108, 0.08) !important;
  overflow:hidden;
}

.tour-log-card:hover{
  box-shadow:0 22px 48px rgba(67, 84, 108, 0.12) !important;
  transform:translateY(-1px);
}

.tour-log-card.is-upcoming{
  border-left:1px solid rgba(203, 214, 226, 0.92) !important;
}

.tour-log-summary{
  grid-template-columns:58px minmax(0, 1.3fr) auto auto !important;
  gap:18px !important;
  padding:24px 26px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.32));
}

.tour-log-summary:hover{
  background:linear-gradient(180deg, rgba(247,250,253,0.92), rgba(242,247,252,0.62)) !important;
}

.tour-log-avatar{
  width:40px !important;
  height:40px !important;
  border-radius:14px !important;
  font-size:14px !important;
  box-shadow:0 12px 24px rgba(91, 74, 97, 0.14);
}

.tour-log-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.tour-log-summary-date{
  font-size:26px !important;
  line-height:1.08 !important;
  color:#1e2a39 !important;
}

.tour-log-summary-name{
  margin-top:8px !important;
  font-size:16px !important;
  color:#4d5d71 !important;
}

.tour-log-meta{
  gap:10px 12px !important;
  align-self:center;
}

.tour-upcoming-badge,
.tour-log-pill.assignee{
  min-height:32px;
  padding:0 12px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  font-size:11px !important;
  letter-spacing:.12em !important;
}

.tour-upcoming-badge{
  background:#eef5ed !important;
  color:#527757 !important;
}

.tour-log-pill.assignee{
  background:#eef4fb !important;
  color:#4e6a87 !important;
}

.tour-log-chevron{
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.88);
  border:1px solid rgba(206, 216, 227, 0.95);
  color:#7e8b99 !important;
  font-size:12px !important;
}

.tour-log-detail{
  padding:0 26px 22px !important;
  border-top:1px solid rgba(223, 230, 238, 0.92) !important;
  background:linear-gradient(180deg, rgba(248,250,252,0.82), rgba(244,247,251,0.9)) !important;
}

.tour-log-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  padding-top:18px;
}

.tour-log-section{
  margin:0 !important;
  padding:16px 18px;
  border:1px solid rgba(212, 221, 232, 0.9);
  border-radius:18px;
  background:rgba(255,255,255,0.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
}

.tour-log-section:nth-child(3),
.tour-log-section:nth-child(4),
.tour-log-section:nth-child(5){
  grid-column:1 / -1;
}

.tour-log-section-label{
  margin-bottom:8px !important;
  font-size:10px !important;
  letter-spacing:.14em !important;
  color:#8693a1 !important;
}

.tour-log-section-text{
  font-size:14px !important;
  line-height:1.75 !important;
  color:#2f3c4d !important;
}

.tour-log-section-text a{
  color:#2f3c4d !important;
}

.tour-pdf-chip{
  min-height:40px;
  padding:0 14px !important;
  border-radius:999px !important;
  border:1px solid rgba(201, 212, 225, 0.95) !important;
  background:#f8fbff !important;
  color:#41546b !important;
  box-shadow:none !important;
}

.tour-pdf-chip:hover{
  border-color:#9fb4cb !important;
  background:#f1f7fd !important;
}

.tour-log-actions{
  margin-top:18px !important;
  padding-top:16px !important;
  border-top:1px solid rgba(223, 230, 238, 0.92) !important;
  gap:12px !important;
}

.tour-log-edit-btn,
.tour-log-del-btn{
  min-height:44px;
  padding:0 16px !important;
  border-radius:999px !important;
  font-size:10px !important;
  letter-spacing:.12em !important;
}

.tour-log-edit-btn{
  border-color:rgba(198, 210, 223, 0.96) !important;
  background:#ffffff !important;
  color:#445569 !important;
}

.tour-log-edit-btn:hover{
  border-color:#9db3ca !important;
  background:#f5f9fd !important;
}

.tour-log-del-btn{
  border-color:rgba(228, 201, 197, 0.96) !important;
  background:#fff9f8 !important;
  color:#9a564d !important;
}

.tour-log-del-btn:hover{
  border-color:#d7a198 !important;
  background:#fff1ee !important;
}

@media (max-width: 980px){
  .tour-log-summary{
    grid-template-columns:58px minmax(0, 1fr) !important;
  }

  .tour-log-meta{
    grid-column:2 / 3;
    justify-content:flex-start !important;
  }

  .tour-log-chevron{
    position:absolute;
    top:24px;
    right:24px;
  }

  .tour-log-summary{
    position:relative;
    padding-right:72px !important;
  }
}

@media (max-width: 700px){
  .tour-log-summary{
    grid-template-columns:48px minmax(0, 1fr) !important;
    gap:14px !important;
    padding:18px 18px 18px 18px !important;
    padding-right:64px !important;
  }

  .tour-log-avatar{
    width:36px !important;
    height:36px !important;
    font-size:13px !important;
  }

  .tour-log-summary-date{
    font-size:19px !important;
  }

  .tour-log-summary-name{
    font-size:15px !important;
  }

  .tour-log-detail{
    padding:0 18px 18px !important;
  }

  .tour-log-detail-grid{
    grid-template-columns:1fr;
  }

  .tour-log-section:nth-child(3),
  .tour-log-section:nth-child(4),
  .tour-log-section:nth-child(5){
    grid-column:auto;
  }

  .tour-log-actions{
    flex-wrap:wrap;
    justify-content:stretch !important;
  }

  .tour-log-edit-btn,
  .tour-log-del-btn{
    flex:1 1 100%;
  }
}

/* ═══ Style Block 11 ═══ */
.wdetail-tasks-card{
  background:
    radial-gradient(circle at top right, rgba(223,231,241,0.42), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,253,0.97)) !important;
  border:1px solid rgba(206,216,228,0.92) !important;
  border-radius:28px !important;
  box-shadow:0 18px 42px rgba(67,84,108,0.08) !important;
}

.wdetail-task-grid{
  align-items:stretch;
}

.wdetail-task-item{
  border:1px solid rgba(212,221,232,0.92) !important;
  border-radius:18px !important;
  padding:16px 16px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,255,0.95)) !important;
  box-shadow:0 10px 24px rgba(67,84,108,0.05);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.wdetail-task-item:hover{
  transform:translateY(-1px);
  border-color:#b9cada !important;
  box-shadow:0 16px 28px rgba(67,84,108,0.09) !important;
  background:linear-gradient(180deg, rgba(252,254,255,0.99), rgba(246,250,254,0.97)) !important;
}

.wdetail-task-item.done{
  background:linear-gradient(180deg, rgba(247,250,246,0.98), rgba(242,247,243,0.96)) !important;
  border-color:rgba(190,210,191,0.95) !important;
  box-shadow:none;
}

.wdetail-task-check{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  max-width:28px !important;
  max-height:28px !important;
  border-radius:50% !important;
  margin-top:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  aspect-ratio:1/1 !important;
}

/* ── Task main container ── */
.wdetail-task-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  flex:1;
  min-width:0;
}

/* ── Task name ── */
.wdetail-task-name{
  font-size:15px !important;
  line-height:1.45 !important;
  color:#223042 !important;
  min-width:0;
  font-weight:600;
}

.wdetail-task-item.done .wdetail-task-name{
  color:#527a8a !important;
}

/* ── Head row: name + pills ── */
.wdetail-task-head-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  row-gap:6px;
}

/* ── Pill row ── */
.wdetail-task-pill-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
  flex-shrink:0;
}

.wdetail-task-pill{
  max-width:100%;
  white-space:nowrap;
}

/* ── Status line (dates) ── */
.wdetail-task-status{
  display:block;
  width:100%;
  min-height:0;
  padding:7px 11px;
  border-radius:12px;
  background:#f5efe7;
  color:#6a82a0 !important;
  font-size:11px !important;
  letter-spacing:.06em !important;
  font-weight:600;
  white-space:normal;
  word-break:break-word;
  line-height:1.5;
}

.wdetail-task-item.done .wdetail-task-status{
  background:#e9f3ea;
  color:#55775b !important;
}

/* ── Timing line ── */
.wdetail-task-timing{
  white-space:normal;
  word-break:break-word;
  line-height:1.5;
  font-size:12px;
  color:#8fa4bb;
}

/* ━━ Tablet: 601–900px ━━ */
@media (max-width: 900px){
  .wdetail-task-item{
    border-radius:16px !important;
    padding:14px 16px !important;
    max-width:100%;
    box-sizing:border-box;
  }

  .wdetail-task-main{
    gap:5px;
  }

  .wdetail-task-head-row{
    flex-wrap:wrap;
    row-gap:4px;
  }

  .wdetail-task-name{
    font-size:14px !important;
    flex:1 1 0;
    min-width:0;
  }

  .wdetail-task-pill-row{
    flex-wrap:wrap;
    gap:5px;
  }

  .wdetail-task-pill{
    font-size:10px !important;
    padding:3px 8px !important;
  }

  /* Compact the status line */
  .wdetail-task-status{
    padding:5px 9px;
    font-size:10px !important;
    border-radius:10px;
  }

  .wdetail-task-timing{
    font-size:11px;
  }
}

/* ━━ Mobile: ≤600px ━━ */
@media (max-width: 600px){
  .wdetail-task-item{
    padding:12px 14px !important;
    border-radius:14px !important;
  }

  .wdetail-task-main{
    gap:4px;
  }

  /* Stack name above pills */
  .wdetail-task-head-row{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:5px;
  }

  .wdetail-task-name{
    font-size:13.5px !important;
    width:100%;
  }

  .wdetail-task-pill-row{
    justify-content:flex-start;
    width:100%;
  }

  .wdetail-task-pill{
    font-size:9.5px !important;
    padding:3px 7px !important;
  }

  /* Collapse status to single compact line */
  .wdetail-task-status{
    padding:4px 8px;
    font-size:9.5px !important;
    border-radius:8px;
    letter-spacing:.04em !important;
  }

  .wdetail-task-timing{
    font-size:10.5px;
  }
}

/* ━━ Small mobile: ≤400px ━━ */
@media (max-width: 400px){
  .wdetail-task-item{
    padding:10px 12px !important;
    border-radius:12px !important;
  }

  .wdetail-task-name{
    font-size:13px !important;
  }

  .wdetail-task-pill{
    font-size:9px !important;
    padding:2px 6px !important;
  }

  .wdetail-task-status{
    padding:4px 7px;
    font-size:9px !important;
  }

  .wdetail-task-timing{
    font-size:10px;
  }
}

/* ═══ Style Block 12 ═══ */
@media (max-width: 900px){
  #header-top{
    position:relative;
  }

  #logo-block{
    padding-right:88px;
  }

  .ll-header-user{
    position:absolute;
    top:8px;
    right:12px;
    width:auto !important;
    margin-left:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
}

@media (max-width: 520px){
  #logo-block{
    padding-right:78px;
  }
}

/* ═══ Style Block 13 ═══ */
@media (max-width: 900px){
  #app-main{
    padding-bottom:140px;
  }

  .tasks-shell{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .tasks-create-grid,
  .tasks-summary,
  .form-grid,
  .checklist-form-grid,
  .checklist-admin-grid,
  .ll-admin-grid,
  .ll-admin-form-grid,
  .ll-admin-perm-row,
  .ll-cm-toolbar-grid,
  .ll-cm-overview-grid,
  .ll-cm-review-meta-grid,
  .ll-cm-review-form,
  .ll-cm-summary,
  .ll-cm-couple-grid,
  .ll-cm-info-list{
    grid-template-columns:1fr !important;
  }

  .tasks-create-row,
  .wl-field-row,
  .wl-history-controls,
  .wl-history-left{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .tasks-create-row .tasks-field:first-child{
    width:100%;
  }

  .tasks-add-btn,
  .wl-save-btn{
    width:100%;
  }

  #qa-filters,
  .tasks-filter-tabs,
  #wl-subtabs,
  #tours-subtabs,
  .stay-subtabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
  }

  #qa-filters::-webkit-scrollbar,
  .tasks-filter-tabs::-webkit-scrollbar,
  #wl-subtabs::-webkit-scrollbar,
  #tours-subtabs::-webkit-scrollbar,
  .stay-subtabs::-webkit-scrollbar{
    display:none;
  }

  .qa-card-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .qa-save-btn,
  .qa-edit-btn,
  .qa-delete-btn{
    width:100%;
  }

  .qa-delete-btn{
    margin-left:0;
  }
}

@media (max-width: 560px){
  .tasks-summary{
    grid-template-columns:1fr !important;
  }

  .card-meta,
  .card-checklist-grid,
  .cal-detail-check-grid{
    grid-template-columns:1fr !important;
  }
}

/* ═══ Style Block 14 ═══ */
@media (max-width: 900px){
  html{
    scroll-behavior:auto;
  }

  #header,
  #mobile-page-picker-wrap,
  .staff-mobile-bottom-nav,
  .staff-page-header-inner{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  #header{
    position:sticky !important;
    top:0 !important;
    z-index:220;
    background:rgba(255,255,255,0.98) !important;
  }

  body #mobile-page-picker-wrap{
    position:sticky !important;
    top:60px !important;
    z-index:180;
  }

  body .mobile-page-picker-card{
    background:linear-gradient(135deg,#4a596e 0%,#556883 100%) !important;
  }

  .staff-mobile-bottom-nav{
    background:rgba(255,255,255,0.98) !important;
  }
}

/* ═══ Style Block 15 ═══ */
/* ═══════════════════════════════════════════════════════
   Legacy Lane Staff Portal — Unified Design System v2
   Applied last so it wins over all prior style blocks.
   Extends staff-sidebar-polish / staff-sidebar-redesign.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Primary palette (blue-gray, matches #add-btn gradient) ── */
  --ll-primary:          #60758f;
  --ll-primary-dark:     #4d6078;
  --ll-primary-grad:     linear-gradient(135deg, #7f91ad 0%, #60758f 100%);
  --ll-primary-grad-hover: linear-gradient(135deg, #6d80a0 0%, #506070 100%);
  --ll-primary-light:    #dfe8f2;
  --ll-primary-light-bg: #f3f7fb;

  /* ── Danger / success ── */
  --ll-danger:           #9a564d;
  --ll-danger-bg:        #fff1ee;
  --ll-danger-border:    rgba(228, 201, 197, 0.96);
  --ll-success:          #527757;
  --ll-success-bg:       #eef5ed;

  /* ── Text hierarchy ── */
  --ll-ink:              #243244;
  --ll-ink-muted:        #627287;
  --ll-ink-subtle:       #8a96a4;

  /* ── Borders & backgrounds ── */
  --ll-border:           rgba(201, 212, 225, 0.92);
  --ll-border-focus:     #7a94ae;
  --ll-border-focus-ring: rgba(122, 148, 174, 0.22);

  /* ── Shared radii ── */
  --ll-btn-radius:       999px;
  --ll-input-radius:     12px;
  --ll-card-radius:      24px;

  /* ── Button sizing ── */
  --ll-btn-h:            44px;
  --ll-btn-shadow:       0 8px 20px rgba(67, 84, 108, 0.15);

  /* ── Modal header ── */
  --ll-modal-header:     linear-gradient(135deg, #2d3f54 0%, #1f2d3d 100%);
}

/* ─────────────────────────────────────────
   GLOBAL FOCUS RING (replaces old terracotta)
   ───────────────────────────────────────── */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2.5px solid var(--ll-border-focus) !important;
  outline-offset: 2px !important;
}

/* ─────────────────────────────────────────
   FORM INPUT FOCUS STATES (all pages)
   ───────────────────────────────────────── */
.f-field input:focus,
.f-field select:focus,
.f-field textarea:focus,
.tasks-input:focus,
.tasks-select:focus,
.wl-input:focus,
.qa-answer-input:focus,
.qa-modal-input:focus,
.qa-modal-select:focus,
.checklist-admin-input:focus,
#search-input:focus {
  border-color: var(--ll-border-focus) !important;
  box-shadow: 0 0 0 3.5px var(--ll-border-focus-ring) !important;
  background: #fff !important;
}

/* ─────────────────────────────────────────
   FORM INPUT RADIUS
   ───────────────────────────────────────── */
.tasks-input,
.tasks-select {
  border-radius: var(--ll-input-radius) !important;
  min-height: var(--ll-btn-h) !important;
}
.wl-input { border-radius: var(--ll-input-radius) !important; }
.qa-answer-input { border-radius: 10px !important; }
.qa-modal-input { border-radius: 10px !important; }
.checklist-admin-input { border-radius: 10px !important; }
#search-input { border-radius: 12px !important; }

/* ─────────────────────────────────────────
   PRIMARY ACTION BUTTONS (Save / Submit / Add)
   ───────────────────────────────────────── */
.dark-btn,
.wl-save-btn,
.qa-save-btn,
.qa-modal-submit,
.cal-detail-edit-btn {
  background: var(--ll-primary-grad) !important;
  border-color: transparent !important;
  border-radius: var(--ll-btn-radius) !important;
  min-height: var(--ll-btn-h) !important;
  box-shadow: var(--ll-btn-shadow) !important;
  color: #fff !important;
  font-size: 11px !important;
  letter-spacing: 0.13em !important;
}
.dark-btn:hover,
.wl-save-btn:hover,
.qa-save-btn:hover,
.qa-modal-submit:hover,
.cal-detail-edit-btn:hover {
  background: var(--ll-primary-grad-hover) !important;
  border-color: transparent !important;
  transform: translateY(-1px);
}
.wl-save-btn:disabled {
  background: #c8d3de !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.75 !important;
}

/* Checklist admin primary button */
.checklist-admin-btn.primary {
  background: var(--ll-primary-grad) !important;
  border-color: transparent !important;
  border-radius: var(--ll-btn-radius) !important;
  color: #fff !important;
  min-height: 40px !important;
  box-shadow: 0 6px 14px rgba(67, 84, 108, 0.15) !important;
}
.checklist-admin-btn.primary:hover {
  background: var(--ll-primary-grad-hover) !important;
  filter: none !important;
  transform: translateY(-1px);
}

/* Tasks add/save button (keeps purple tint from tasks theme) */
.tasks-add-btn {
  border-radius: var(--ll-btn-radius) !important;
  min-height: var(--ll-btn-h) !important;
  font-size: 11px !important;
  letter-spacing: 0.13em !important;
}
.tasks-page-add-btn,
.tasks-header-add-btn,
.tasks-open-modal-btn {
  border-radius: var(--ll-btn-radius) !important;
}

/* ─────────────────────────────────────────
   SECONDARY / GHOST BUTTONS
   ───────────────────────────────────────── */
.ghost-btn,
.wl-cancel-edit-btn,
.qa-edit-btn,
.qa-modal-cancel,
.wl-nav-btn,
.wl-log-edit-btn,
.checklist-admin-btn:not(.primary),
.checklist-admin-inline-btn {
  border-radius: var(--ll-btn-radius) !important;
}
.ghost-btn:hover,
.wl-cancel-edit-btn:hover,
.qa-edit-btn:hover,
.qa-modal-cancel:hover,
.wl-nav-btn:hover,
.wl-log-edit-btn:hover {
  border-color: #9fb4cb !important;
  background: var(--ll-primary-light-bg) !important;
  color: var(--ll-ink) !important;
}
.checklist-admin-btn:not(.primary):hover {
  border-color: #9fb4cb !important;
  background: var(--ll-primary-light-bg) !important;
}

/* Tour log buttons */
.tour-log-edit-btn {
  border-radius: var(--ll-btn-radius) !important;
}
.tour-log-edit-btn:hover {
  border-color: #9fb4cb !important;
  background: var(--ll-primary-light-bg) !important;
  color: var(--ll-primary) !important;
}

/* Edit button in wedding table */
.edit-btn {
  border-radius: 10px !important;
}
.edit-btn:hover {
  background: var(--ll-primary) !important;
  border-color: var(--ll-primary) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────
   DANGER / DELETE BUTTONS
   ───────────────────────────────────────── */
.qa-delete-btn,
.tour-log-del-btn,
.task-delete-btn {
  border-radius: var(--ll-btn-radius) !important;
}
.qa-delete-btn:hover,
.task-delete-btn:hover {
  background: var(--ll-danger-bg) !important;
  border-color: var(--ll-danger-border) !important;
  color: var(--ll-danger) !important;
}
.tour-log-del-btn:hover {
  background: var(--ll-danger-bg) !important;
  border-color: var(--ll-danger-border) !important;
  color: var(--ll-danger) !important;
}

/* ─────────────────────────────────────────
   MODAL HEADERS — unified dark navy
   ───────────────────────────────────────── */
#modal-head,
#qa-modal-head,
#tour-modal-head,
#cal-detail-head {
  background: var(--ll-modal-header) !important;
}
#file-viewer-head {
  background: linear-gradient(135deg, #2c3b4e 0%, #1f2d3d 100%) !important;
}

/* Ensure close buttons inside dark modal heads are visible */
.modal-close-btn,
.qa-modal-close,
.tour-modal-close,
.cal-detail-close {
  border-color: rgba(255,255,255,0.22) !important;
}
.modal-close-btn:hover,
.qa-modal-close:hover,
.tour-modal-close:hover,
.cal-detail-close:hover {
  border-color: rgba(255,255,255,0.55) !important;
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────
   Q&A PAGE ADD BUTTON
   ───────────────────────────────────────── */
#qa-page-add-btn {
  border-color: rgba(77, 98, 120, 0.28) !important;
  color: var(--ll-primary) !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(77, 98, 120, 0.10) !important;
}
#qa-page-add-btn:hover {
  border-color: var(--ll-primary) !important;
  background: var(--ll-primary-light-bg) !important;
  transform: translateY(-1px);
}

/* Tours add button */
#tours-add-btn {
  border-color: rgba(77, 98, 120, 0.28) !important;
  color: var(--ll-primary) !important;
  box-shadow: 0 6px 18px rgba(77, 98, 120, 0.10) !important;
}
#tours-add-btn:hover {
  border-color: var(--ll-primary) !important;
  background: var(--ll-primary-light-bg) !important;
}

/* ─────────────────────────────────────────
   FILTER TABS & CHIPS — unified active state
   ───────────────────────────────────────── */
.qa-filter-btn.active,
.tasks-filter-btn.active {
  background: var(--ll-primary) !important;
  border-color: var(--ll-primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(77, 98, 120, 0.20) !important;
}
.qa-filter-btn:hover:not(.active) {
  border-color: var(--ll-primary) !important;
  color: var(--ll-primary) !important;
}
.tasks-filter-btn:hover:not(.active) {
  border-color: var(--ll-primary) !important;
  color: var(--ll-primary) !important;
}

/* Sub-tabs (work log, tours) */
.wl-subtab.active,
#tours-subtabs .stay-subtab.active {
  color: var(--ll-primary) !important;
  border-bottom-color: var(--ll-primary) !important;
}
.wl-subtab:hover,
#tours-subtabs .stay-subtab:hover {
  color: var(--ll-primary) !important;
}

/* Owner filter chips */
.owner-filter-chip.active {
  background: var(--ll-primary) !important;
  border-color: var(--ll-primary) !important;
  box-shadow: 0 6px 14px rgba(77, 98, 120, 0.18) !important;
}
.owner-filter-chip:hover:not(.active) {
  border-color: #9fb4cb !important;
  background: var(--ll-primary-light-bg) !important;
}

/* Calendar filter chips */
.cal-filter-chip.active {
  background: var(--ll-primary) !important;
  border-color: var(--ll-primary) !important;
}
.cal-filter-chip:hover:not(.active) {
  border-color: var(--ll-primary) !important;
  color: var(--ll-primary) !important;
}

/* Calendar nav buttons */
.cal-nav-btn {
  border-color: var(--ll-border) !important;
}
.cal-nav-btn:hover {
  border-color: #9fb4cb !important;
  background: var(--ll-primary-light-bg) !important;
}
.cal-today-btn:hover {
  border-color: var(--ll-primary) !important;
  color: var(--ll-primary) !important;
}

/* ─────────────────────────────────────────
   PERSON / ASSIGNEE PICKER CHIPS
   ───────────────────────────────────────── */
.person-chip:hover {
  border-color: #9fb4cb !important;
  transform: translateY(-1px);
}
.person-chip.selected {
  border-color: var(--ll-primary) !important;
  background: var(--ll-primary-light-bg) !important;
  box-shadow: 0 4px 12px rgba(77, 98, 120, 0.12) !important;
}

/* Priority chips */
.priority-chip:hover {
  border-color: var(--ll-primary) !important;
  color: var(--ll-primary) !important;
}

/* ─────────────────────────────────────────
   TASK ITEM — unified interaction
   ───────────────────────────────────────── */
.task-hitarea:hover .task-toggle {
  border-color: var(--ll-primary) !important;
}
.task-hitarea:focus-visible {
  outline-color: var(--ll-border-focus) !important;
}
.task-item.is-complete .task-toggle {
  background: var(--ll-success) !important;
  border-color: var(--ll-success) !important;
}
.task-action-btn:hover {
  border-color: var(--ll-primary) !important;
  color: var(--ll-primary) !important;
  background: var(--ll-primary-light-bg) !important;
}

/* ─────────────────────────────────────────
   CUSTOM CHECKBOXES (wedding modal)
   ───────────────────────────────────────── */
.custom-check.checked {
  border-color: var(--ll-primary) !important;
  background: var(--ll-primary) !important;
}

/* ─────────────────────────────────────────
   CHECKLIST ITEM DONE ICONS
   ───────────────────────────────────────── */
.checklist-item.done .check-icon,
.card-check-item.done .card-check-icon,
.cal-detail-check.done .ck,
.clx-task-item.done .icon { color: var(--ll-success) !important; }
.exp-check-item.done .exp-check-icon {
  background: var(--ll-success) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────
   WEDDING DETAIL — task checkboxes
   ───────────────────────────────────────── */
.wdetail-task-item.done .wdetail-task-check {
  background: var(--ll-success) !important;
  border-color: var(--ll-success) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────
   CHECKLIST ADMIN CARD — palette alignment
   ───────────────────────────────────────── */
.checklist-admin-card {
  border-color: var(--ll-border) !important;
}
.checklist-admin-card-head {
  background: linear-gradient(180deg, rgba(245,248,252,0.98) 0%, rgba(237,244,250,0.96) 100%) !important;
  border-bottom-color: var(--ll-border) !important;
}

/* ─────────────────────────────────────────
   EMPTY STATES
   ───────────────────────────────────────── */
.tasks-empty,
.tours-empty,
.wl-empty {
  border-radius: var(--ll-card-radius) !important;
  border-color: var(--ll-border) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,254,0.96)) !important;
}

/* ─────────────────────────────────────────
   STATUS MESSAGES (success / error)
   ───────────────────────────────────────── */
#wl-submit-status.success,
#tasks-submit-status.success,
#tour-submit-status.success,
.checklist-admin-status.is-success { color: var(--ll-success) !important; }

#wl-submit-status.error,
#tasks-submit-status.error,
#tour-submit-status.error,
.checklist-admin-status.is-error { color: var(--ll-danger) !important; }

/* ─────────────────────────────────────────
   WEDDING TABLE HEADER
   ───────────────────────────────────────── */
.wedding-table thead tr {
  background: linear-gradient(180deg, #394353 0%, #303c4a 100%) !important;
}

/* ─────────────────────────────────────────
   HOVER SHADOWS — card hover depth
   ───────────────────────────────────────── */
.qa-card:hover {
  box-shadow: 0 14px 30px rgba(67, 84, 108, 0.10) !important;
}
.wl-log-card:hover {
  box-shadow: 0 14px 30px rgba(67, 84, 108, 0.10) !important;
}
.wl-recent-item:hover {
  border-color: #9fb4cb !important;
  background: var(--ll-primary-light-bg) !important;
}
.tour-log-card:hover {
  box-shadow: 0 22px 48px rgba(67, 84, 108, 0.12) !important;
}

/* ─────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────── */
#footer {
  background: linear-gradient(180deg, rgba(238,243,248,0.95), rgba(230,237,244,0.98)) !important;
  border-top: 1px solid var(--ll-border) !important;
}
#footer-name { color: var(--ll-ink-muted) !important; }
#footer-addr { color: var(--ll-ink-subtle) !important; }

/* ─────────────────────────────────────────
   TYPOGRAPHY — heading colors
   ───────────────────────────────────────── */
.tasks-card-title,
.tasks-list-title,
.wl-form-title,
.checklist-admin-title { color: var(--ll-ink) !important; }

.tasks-card-sub,
.tasks-list-sub,
.checklist-admin-sub { color: var(--ll-ink-muted) !important; }

/* ─────────────────────────────────────────
   SHOW ALL BUTTON (wedding list)
   ───────────────────────────────────────── */
#weddings-show-all-btn:hover {
  border-color: #9fb4cb !important;
}
#weddings-show-all-count {
  background: var(--ll-primary) !important;
}

/* ─────────────────────────────────────────
   SEARCH INPUT radius
   ───────────────────────────────────────── */
#search-wrap { border-radius: 14px !important; overflow: hidden; }
#search-input { border-radius: 14px !important; }

/* ─────────────────────────────────────────
   MOBILE PAGE PICKER CARD
   ───────────────────────────────────────── */
.mobile-page-picker-card {
  background: linear-gradient(135deg, #4a596e 0%, #3a4a5c 100%) !important;
  border-radius: 22px !important;
}

/* ═══ Style Block 16 ═══ */
@media (max-width: 700px){
  #header{padding:14px 12px 12px !important;}
  #header-top{gap:10px !important;}
  #logo-block{gap:0 !important;}
  #logo-text-name{font-size:18px !important;line-height:1.05 !important;}
  #logo-text-portal{font-size:9px !important;letter-spacing:.18em !important;margin-top:8px !important;padding-top:7px !important;}
  #nav-tabs{display:grid !important;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px !important;overflow:visible !important;flex-wrap:nowrap !important;justify-content:stretch !important;padding-bottom:0 !important;}
  .nav-tab{min-width:0 !important;width:100% !important;padding:10px 4px !important;border-radius:14px !important;gap:4px !important;}
  .nav-ico{font-size:18px !important;}
  .nav-label{font-size:7px !important;letter-spacing:.04em !important;white-space:normal !important;text-align:center !important;line-height:1.15 !important;}

  .card-exp-body{background:#f5f9fe !important;}
  .card-exp-section{padding:16px 14px !important;}
  .card-exp-head{font-size:9px !important;letter-spacing:.14em !important;color:#7a8ea4 !important;margin-bottom:10px !important;text-transform:uppercase;}
  .card-exp-row{display:block !important;padding:10px 0 !important;border-top:1px solid #dde8f3 !important;}
  .card-exp-row:first-of-type{border-top:none !important;padding-top:0 !important;}
  .card-exp-lbl{display:block !important;margin-bottom:4px !important;font-size:9px !important;letter-spacing:.12em !important;color:#8693a1 !important;}
  .card-exp-val,.card-exp-text{display:block !important;font-size:14px !important;line-height:1.45 !important;color:#1e2f3e !important;word-break:break-word !important;}
  .card-exp-empty{font-size:13px !important;line-height:1.45 !important;color:#7a8ea4 !important;}

  #cal-body{padding:14px 10px 20px !important;}
  #cal-nav{position:static !important;padding:0 2px 10px !important;}
  #cal-month-label{font-size:20px !important;text-align:center !important;}
  #cal-list-mobile{display:block !important;min-height:0 !important;padding-bottom:12px !important;}
  .cal-list-day{padding:12px !important;border-radius:16px !important;margin-bottom:12px !important;}
  .cal-list-date{font-size:9px !important;letter-spacing:.14em !important;}
  .cal-list-item{padding:12px !important;border-radius:12px !important;}
  .cal-list-couple{font-size:18px !important;line-height:1.08 !important;}
  .cal-list-meta,.cal-list-staff{font-size:12px !important;line-height:1.45 !important;}
}

@media (max-width:768px){
  #nav-tabs{
    justify-content:center !important;
    align-items:center;
  }
}


/* === Mobile owner filter dropdown === */
@media (max-width:700px){
  .owner-filter-row{
    display:none !important;
  }
  .mobile-owner-filter{
    display:block !important;
    margin:14px 0 18px;
  }
}
.mobile-owner-filter{
  display:none;
}
.mobile-owner-filter select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #c9d6e8;
  font-size:14px;
  background:#fff;
}


/* === Remove duplicate owner chips when dropdown present === */
@media (max-width:700px){
  .tasks-owner-strip,
  .owner-filter-row,
  .owner-filter-chip{
    display:none !important;
  }
}

/* ═══ Style Block 17 ═══ */
@media (max-width: 780px){
  #cal-body{padding:14px 12px 24px !important;}
  #cal-nav{
    display:grid !important;
    grid-template-columns:52px minmax(0,1fr) 52px;
    grid-template-areas:
      "prev month next"
      "today today today";
    align-items:center;
    justify-items:center;
    gap:10px !important;
    margin-bottom:14px !important;
  }
  #cal-nav > .cal-nav-btn:first-of-type{grid-area:prev;justify-self:start;}
  #cal-nav > #cal-month-label{grid-area:month;}
  #cal-nav > .cal-nav-btn:nth-of-type(2){grid-area:next;justify-self:end;}
  #cal-nav > .cal-today-btn{
    grid-area:today;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    justify-self:center;
    min-width:112px;
  }
  #cal-month-label{font-size:20px !important;line-height:1.1 !important;text-align:center !important;min-width:0 !important;}
  .cal-nav-btn{width:52px !important;height:52px !important;}
  #cal-grid-head,#cal-grid{display:none !important;}
  #cal-list-mobile{display:block !important;min-height:120px !important;padding-bottom:12px !important;}
  .cal-list-day{background:#fff !important;border:1px solid #dce8f4 !important;border-radius:16px !important;padding:12px !important;margin-bottom:12px !important;box-shadow:0 8px 20px rgba(0,0,0,.04) !important;}
  .cal-list-date{font-size:10px !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:#7a8ea4 !important;margin-bottom:10px !important;}
  .cal-list-stack{display:flex !important;flex-direction:column !important;gap:10px !important;}
  .cal-list-item{display:block !important;width:100% !important;text-align:left !important;padding:14px !important;border:1px solid #dce8f4 !important;border-radius:14px !important;background:#f4f8fc !important;}
  .cal-list-item-top{display:flex !important;align-items:flex-start !important;justify-content:space-between !important;gap:8px !important;}
  .cal-list-couple{font-size:20px !important;line-height:1.05 !important;}
  .cal-list-meta,.cal-list-staff{font-size:12px !important;line-height:1.45 !important;margin-top:6px !important;color:#4e6a84 !important;}
  #cal-detail-overlay.open{display:flex !important;align-items:flex-end !important;justify-content:center !important;padding:0 !important;}
  #cal-detail-box{position:relative !important;top:auto !important;left:auto !important;transform:none !important;width:100% !important;max-width:none !important;max-height:88vh !important;border-radius:22px 22px 0 0 !important;margin:0 !important;}
}

@media (max-width:768px){
  #nav-tabs{
    justify-content:center !important;
    align-items:center;
  }
}


/* === Mobile owner filter dropdown === */
@media (max-width:700px){
  .owner-filter-row{
    display:none !important;
  }
  .mobile-owner-filter{
    display:block !important;
    margin:14px 0 18px;
  }
}
.mobile-owner-filter{
  display:none;
}
.mobile-owner-filter select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #c9d6e8;
  font-size:14px;
  background:#fff;
}


/* === Remove duplicate owner chips when dropdown present === */
@media (max-width:700px){
  .tasks-owner-strip,
  .owner-filter-row,
  .owner-filter-chip{
    display:none !important;
  }
}

/* ═══ Style Block 18 ═══ */
/* Tour modal — guaranteed hidden until .open is added */
#tour-modal-overlay { display: none !important; }
#tour-modal-overlay.open { display: flex !important; align-items: center; justify-content: center; }

/* Single browser scroll — no inner scroll containers on root elements */
html, body { overflow-x: hidden !important; overflow-y: visible !important; height: auto !important; min-height: 0 !important; }

/* ══ Property Rentals + Family ══ */
body.page-rentals #header { background:#5f4730; border-bottom-color:#47331f; }
body.page-family #header { background:#5b4f3b; border-bottom-color:#433927; }
body.page-events #header { background:#3a4f5a; border-bottom-color:#2c3d47; }
#page-rentals,#page-family,#page-events{padding-bottom:40px;}
.stay-page-body{max-width:1080px;margin:0 auto;padding:28px 32px 64px;box-sizing:border-box;}
.stay-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid #ece6df;}
.stay-subtabs{display:flex;gap:0;border-bottom:2px solid #dce8f4;}
.stay-subtab{padding:11px 22px;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#999;cursor:pointer;transition:all 0.15s;white-space:nowrap;}
.stay-subtab:hover{color:#2c2c2c;}
.stay-subtab.active{color:#2c2c2c;border-bottom-color:#2c2c2c;font-weight:600;}
.stay-panel{display:none;}
.stay-panel.active{display:block;}
.stay-add-btn{padding:10px 18px;border-radius:999px;border:1.5px solid rgba(47,95,167,0.28);background:#fff;color:#2f5fa7;font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 18px rgba(47,95,167,0.10);transition:all 0.18s;white-space:nowrap;}
.stay-add-btn:hover{transform:translateY(-1px);border-color:#2f5fa7;background:#f0f7ff;}
#family-add-btn{border-color:rgba(47,95,167,0.28);color:#2f5fa7;box-shadow:0 6px 18px rgba(47,95,167,0.10);}
#family-add-btn:hover{border-color:#2f5fa7;background:#f0f7ff;}
.stay-card{background:#fff;border:1px solid #dce8f4;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,0.04);overflow:hidden;}
.stay-card + .stay-card{margin-top:12px;}
.stay-card-summary{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(160px,.9fr) minmax(160px,.8fr) auto;gap:16px;align-items:center;padding:18px 20px;cursor:pointer;}
.stay-card-summary:hover{background:#f5f9fe;}
.stay-card-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;color:#1a1a1a;line-height:1.05;}
.stay-card-meta-label{font-size:8px;letter-spacing:0.14em;text-transform:uppercase;color:#999;margin-bottom:4px;font-weight:700;}
.stay-card-meta-value{font-size:13px;color:#333;line-height:1.5;}
.stay-chip-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.stay-chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:#f4efe9;color:#5f4730;font-size:10px;letter-spacing:0.06em;font-weight:600;white-space:nowrap;}
.stay-chip.family{background:#f2eee6;color:#5b4f3b;}
.stay-chip.events{background:#e8eef1;color:#3a4f5a;}
/* Card summary: keep homes on a single row, clip overflow gracefully */
.stay-card-summary-btn .stay-chip-row{flex-wrap:nowrap;overflow:hidden;}
.stay-card-summary-btn .stay-chip{max-width:160px;overflow:hidden;text-overflow:ellipsis;}
/* Single-column layout on mobile — full width, re-allow wrap */
@media(max-width:900px){.stay-card-summary-btn .stay-chip-row{flex-wrap:wrap;overflow:visible;}
.stay-card-summary-btn .stay-chip{max-width:none;overflow:visible;text-overflow:unset;}}
.stay-card-chevron{font-size:14px;color:#bbb;transition:transform 0.18s;}
.stay-card.expanded .stay-card-chevron{transform:rotate(180deg);}
.stay-card-detail{display:none;border-top:1px solid #e2ecf5;padding:16px 20px 18px;background:#f2f7fd;}
.stay-card.expanded .stay-card-detail{display:block;}
.stay-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;}
.stay-detail-block-label{font-size:8px;letter-spacing:0.14em;text-transform:uppercase;color:#888;font-weight:700;margin-bottom:6px;}
.stay-detail-block-text{font-size:13px;color:#333;line-height:1.7;white-space:pre-wrap;word-break:break-word;}
.stay-card-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}
.stay-action-btn{padding:8px 14px;background:#fff;color:#2c2c2c;border:1.5px solid #c9d8e8;border-radius:4px;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:all 0.15s;}
.stay-action-btn:hover{border-color:#2c2c2c;background:#fff;}
.stay-action-btn.delete:hover{border-color:#2F5FA7;color:#2F5FA7;background:#edf5ff;}
.stay-empty{text-align:center;padding:68px 20px;color:#b0c6da;background:#fff;border:1px solid #dce8f4;border-radius:10px;}
.stay-empty-icon{font-size:42px;margin-bottom:10px;}
.stay-empty-title{font-size:16px;color:#7a8ea4;margin-bottom:6px;}
.stay-empty-sub{font-size:12px;color:#b0c6da;max-width:320px;margin:0 auto;line-height:1.6;}
#stay-modal-overlay{display:none;position:fixed;inset:0;z-index:1000;background:rgba(20,18,16,0.56);backdrop-filter:blur(6px);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
#stay-modal-overlay.open{display:flex;align-items:center;justify-content:center;}
#stay-modal-box{position:relative;width:min(680px,calc(100% - 40px));max-height:90vh;overflow-y:auto;background:#fff;border-radius:18px;box-shadow:0 32px 80px rgba(0,0,0,0.28);display:flex;flex-direction:column;}
#stay-modal-head{padding:22px 26px 18px;background:linear-gradient(135deg,#4a3520,#5f4730);border-radius:18px 18px 0 0;display:flex;justify-content:space-between;align-items:flex-start;flex-shrink:0;}
body.page-family #stay-modal-head{background:linear-gradient(135deg,#463c2d,#5b4f3b);}
body.page-events #stay-modal-head{background:linear-gradient(135deg,#2d3f4a,#3a4f5a);}
#stay-modal-kicker{font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:#c8b8a0;margin-bottom:5px;}
#stay-modal-title{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:26px;color:#fff;font-weight:400;line-height:1.1;}
.stay-modal-close{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.28);background:rgba(255,255,255,0.08);color:#ccc;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;flex-shrink:0;}
.stay-modal-close:hover{background:rgba(255,255,255,0.18);color:#fff;}
#stay-modal-body{padding:24px 26px 0;flex:1;overflow-y:auto;}
#stay-modal-foot{display:flex;align-items:center;gap:12px;padding:16px 26px 20px;border-top:1px solid #dde8f3;background:#f2f7fd;border-radius:0 0 18px 18px;flex-shrink:0;}
#stay-submit-status.success{color:#4a7a4e;}
#stay-submit-status.error{color:#2F5FA7;}
.stay-property-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;background:#f2f7fd;padding:14px 16px;border-radius:10px;border:1px solid #dde8f3;align-items:start;}
.stay-check-label{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:rgba(255,255,255,0.72);cursor:pointer;user-select:none;font-size:12px;line-height:1.3;color:#425466;font-weight:500;transition:background-color 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease;}
.stay-check-label:hover{background:#fff;border-color:#d7e3ee;}
.stay-check-label:focus-within{background:#fff;border-color:#b9cde1;box-shadow:0 0 0 3px rgba(95,71,48,0.12);}
.stay-check-label span{min-width:0;}
.stay-check-label input{accent-color:#5f4730;width:16px;height:16px;flex:0 0 auto;}
@media (max-width: 900px){.stay-card-summary{grid-template-columns:1fr;gap:12px;}.stay-card-chevron{display:none;}.stay-detail-grid{grid-template-columns:1fr;}}
@media (max-width: 720px){.stay-page-body{padding:14px 12px 56px;}.stay-toolbar{flex-direction:column;align-items:stretch;gap:12px;border-bottom:none;padding-bottom:0;margin-bottom:0;}.stay-subtabs{border-bottom:2px solid #dce8f4;}.stay-add-btn{width:100%;text-align:center;border-radius:14px;margin-bottom:12px;}#stay-modal-box{top:auto;bottom:0;left:0;transform:none;width:100%;max-width:100%;border-radius:22px 22px 0 0;max-height:92vh;}#stay-modal-head{border-radius:22px 22px 0 0;padding:18px 18px 14px;}#stay-modal-body{padding:18px 18px 0;}#stay-modal-foot{padding:14px 18px 18px;}.stay-property-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;padding:12px;}}
@media (max-width: 360px){.stay-property-grid{grid-template-columns:1fr;}}


/* ===== Mobile / thin-width polish pass ===== */
@media (max-width: 960px){
  #conn-bar{padding:8px 14px !important;}
  #header{padding:14px 14px 12px !important;}
  #header-top{flex-direction:column;align-items:stretch;gap:12px;}
  #logo-block{justify-content:center;width:100%;}
  #logo-text-name{font-size:20px;}
  #logo-text-sub{font-size:12px;}
  #add-btn{width:100%;}
  #nav-tabs{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%;
    margin-top:14px;
  }
  .nav-tab{
    min-height:44px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:normal;
    line-height:1.25;
    text-align:center;
  }
  .nav-label{display:block;}
  #search-section,
  #table-section,
  #cal-body,
  #qa-body,
  #wl-body,
  #tasks-body,
  .stay-page-body{padding-left:14px !important;padding-right:14px !important;}
  #table-section,
  #cal-body,
  #qa-body,
  #wl-body,
  #tasks-body,
  .stay-page-body{padding-bottom:56px !important;}
  #table-section{overflow-x:clip;}
  .exp-grid-top,
  .exp-notes-grid,
  .exp-checklist-grid,
  .checklist-grid,
  .card-checklist-grid,
  .card-meta,
  .tasks-create-grid,
  .checklist-form-grid,
  .cal-detail-check-grid,
  .stay-detail-grid,
  .stay-meta-grid,
  .stay-modal-grid{grid-template-columns:1fr !important;}
  .expand-inner{grid-template-columns:1fr;gap:18px;}
  .exp-section,
  .exp-section-full,
  .cal-detail-section{padding:14px 16px;}
  .exp-actions,
  #cal-detail-footer{padding:14px 16px;flex-direction:column;}
  .exp-actions > *,
  #cal-detail-footer > *,
  .card-actions > *,
  .modal-actions > *,
  .tasks-create-row > *,
  .stay-card-actions > *,
  #stay-modal-foot > *{width:100%;}
  .wl-log-card,
  .qa-card,
  .tasks-card,
  .stay-card,
  .wedding-card{border-radius:14px;}
  .wl-log-card{padding:20px 22px !important;}
  .wl-log-card-actions,
  .qa-card-actions,
  .card-actions,
  .task-actions,
  .stay-card-actions{flex-direction:column;align-items:stretch;}
  .task-action-btn,
  .qa-save-btn,
  .qa-edit-btn,
  .qa-delete-btn,
  .wl-log-edit-btn,
  .edit-btn,
  .del-btn,
  .card-expand-btn,
  .cal-detail-edit-btn,
  .stay-card-btn,
  .stay-card-delete,
  .stay-add-btn{width:100%;text-align:center;}
  .qa-delete-btn{margin-left:0;}
  .task-item,
  .stay-card{overflow:hidden;}
  .task-meta,
  .stay-card-tags,
  .stay-card-homes{gap:6px;}
  .stay-toolbar{align-items:stretch;}
  .stay-subtabs,
  #qa-filters,
  #wl-subtabs{
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    flex-wrap:nowrap;
  }
  .stay-subtabs::-webkit-scrollbar,
  #qa-filters::-webkit-scrollbar,
  #wl-subtabs::-webkit-scrollbar{display:none;}
}

@media (max-width: 640px){
  #nav-tabs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .nav-tab{justify-content:flex-start;text-align:left;}
  #logo-text-name{font-size:18px;letter-spacing:0.06em;}
  #logo-text-sub{font-size:11px;}
  #logo-text-portal{font-size:7px;letter-spacing:0.16em;}
  .stat-item{padding:10px 8px !important;}
  .stat-num{font-size:20px !important;}
  .year-label,
  .tasks-list-title,
  .tasks-card-title,
  .wl-form-title,
  #cal-month-label,
  .stay-page-title{font-size:20px !important;}
  .form-grid,
  .f-row{grid-template-columns:1fr !important;gap:12px !important;}
  .form-full{grid-column:auto;}
  #modal-body,
  #qa-modal-body,
  #stay-modal-body{padding:16px 16px 0 !important;}
  #modal-head,
  #qa-modal-head,
  #stay-modal-head{padding:16px !important;}
  #modal-foot,
  #qa-modal-footer,
  #stay-modal-foot{padding:14px 16px 16px !important;}
  #modal-title{font-size:20px !important;}
  .cal-day{min-height:58px !important;}
  .cal-wedding-chip,
  .cal-tour-chip{font-size:9px;line-height:1.3;}
  .wl-log-card-head{align-items:flex-start;flex-wrap:wrap;}
  .wl-log-hours{margin-left:0;}
  .qa-card-head{padding:14px 14px 12px;gap:10px;}
  .qa-card-body{padding:0 14px 0 14px;}
  .task-hitarea{padding:14px;}
  .task-actions{padding:0 14px 14px;}
  .stay-page-body{padding-top:14px !important;}
}

@media (max-width: 420px){
  body{font-size:12px;}
  #search-input,
  .form-input,
  .tasks-input,
  .tasks-select,
  .qa-answer-input,
  .qa-modal-input,
  .qa-modal-select,
  .wl-input{font-size:16px !important;}
  .nav-tab{padding:9px 10px;font-size:9px;}
  .nav-ico{font-size:13px;}
  .task-badge,
  .task-priority-badge,
  .stay-tag,
  .stay-home-chip{font-size:9px;}
}

/* === Mobile owner filter dropdown === */
@media (max-width:700px){
  .owner-filter-row{
    display:none !important;
  }
  .mobile-owner-filter{
    display:block !important;
    margin:14px 0 18px;
  }
}
.mobile-owner-filter{
  display:none;
}
.mobile-owner-filter select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #c9d6e8;
  font-size:14px;
  background:#fff;
}


/* === Remove duplicate owner chips when dropdown present === */
@media (max-width:700px){
  .tasks-owner-strip,
  .owner-filter-row,
  .owner-filter-chip{
    display:none !important;
  }
}

/* ══ Mobile UI polish — comprehensive pass ══ */

/* Category tabs: 2×2 grid on small screens — no horizontal scroll */
@media (max-width:640px){
  .wdetail-task-category-tabs{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    flex-wrap:unset !important;
    overflow-x:visible !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:unset !important;
    scrollbar-width:unset !important;
    gap:8px !important;
    padding-bottom:0 !important;
    margin-bottom:14px !important;
  }
  .wdetail-task-category-btn{
    flex-shrink:unset !important;
    white-space:normal !important;
    width:100% !important;
    text-align:center !important;
    padding:12px 10px !important;
    font-size:9.5px !important;
    border-radius:14px !important;
    line-height:1.45 !important;
  }
  .wdetail-task-category-meta{
    font-size:11px;
    margin-bottom:10px;
  }
}

/* Calendar detail modal: avoid 100vw overflow on phones */
@media (max-width:700px){
  #cal-detail-box{
    width:100% !important;
    max-width:100% !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    transform:none !important;
    border-radius:22px 22px 0 0 !important;
    max-height:92vh !important;
  }
}

/* iOS safe-area padding for bottom sheets */
@supports (padding-bottom: env(safe-area-inset-bottom)){
  #stay-modal-foot,
  #tour-modal-foot,
  .modal-actions,
  #cal-detail-footer{
    padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important;
  }
  #wedding-detail-body,
  .stay-page-body,
  #wl-body,
  #qa-body,
  #tasks-body,
  #tours-body{
    padding-bottom:calc(40px + env(safe-area-inset-bottom)) !important;
  }
}

/* Worklog: collapse 2-col grid on phones */
@media (max-width:640px){
  .wl-log-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .wl-form-footer{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .wl-form-footer-actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    margin-left:0;
  }
}

/* Stay cards: full-width action buttons and tighter padding on phones */
@media (max-width:640px){
  .stay-card-summary{
    padding:16px 16px;
  }
  .stay-card-detail{
    padding:0 16px 16px !important;
  }
  .stay-action-btn{
    width:100%;
    text-align:center;
    min-height:44px;
  }
  .stay-detail-grid{
    gap:12px !important;
  }
  .stay-empty{
    padding:40px 16px;
  }
}

/* ═══ MOBILE NAV: compact horizontal scroll strip — overrides all grid rules above ═══ */
@media (max-width:860px){
  /* Allow header to show the scrolling nav — overflow:hidden clips it */
  #header,
  #header-inner,
  #header-top{
    overflow:visible !important;
  }

  #nav-tabs{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    gap:5px !important;
    width:100% !important;
    max-width:100% !important;
    padding:2px 2px 10px !important;
    margin-top:8px !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    /* kill any grid layout */
    grid-template-columns:none !important;
  }
  #nav-tabs::-webkit-scrollbar{ display:none !important; }

  .nav-tab{
    flex:0 0 auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    padding:8px 11px !important;
    min-width:52px !important;
    max-width:none !important;
    border-radius:14px !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  .nav-ico{
    font-size:17px !important;
    line-height:1 !important;
  }

  .nav-label{
    font-size:8px !important;
    letter-spacing:.05em !important;
    line-height:1 !important;
    white-space:nowrap !important;
    text-align:center !important;
    max-width:none !important;
    word-break:normal !important;
  }
}

/* Minimum 44px touch targets for key action buttons on mobile */
@media (max-width:900px){
  .stay-add-btn,
  .stay-subtab,
  .wdetail-back-btn,
  .wdetail-edit-btn,
  .btn-save,
  .btn-cancel,
  .tasks-add-btn,
  .stay-action-btn{
    min-height:44px;
  }
}

/* ═══ Style Block 19 ═══ */
body.ll-auth-booting > *:not(#ll-auth-boot-mask) {
  visibility: hidden;
}

#ll-auth-boot-mask {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background:
    radial-gradient(circle at top left, rgba(219, 226, 206, 0.82), transparent 30%),
    linear-gradient(135deg, rgba(30, 40, 55, 0.96), rgba(40, 52, 70, 0.98));
}

body.ll-auth-booting #ll-auth-boot-mask {
  display: flex;
}

.ll-auth-boot-card {
  width: min(420px, 100%);
  padding: 34px 32px;
  border-radius: 28px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 28px 90px rgba(10, 18, 32, 0.28);
  text-align: center;
}

.ll-auth-boot-kicker {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5e7491;
  margin-bottom: 14px;
  font-weight: 500;
}

.ll-auth-boot-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 42px;
  line-height: 1;
  color: #253547;
  margin-bottom: 12px;
}

.ll-auth-boot-sub {
  font-size: 14px;
  line-height: 1.6;
  color: #4f6072;
}

body.ll-auth-locked #header,
body.ll-auth-locked #staff-sidebar,
body.ll-auth-locked #mobile-page-picker-wrap,
body.ll-auth-locked .page,
body.ll-auth-locked #footer {
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

body.ll-auth-locked {
  overflow: hidden !important;
}

#ll-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background:
    radial-gradient(circle at top left, rgba(219, 226, 206, 0.82), transparent 30%),
    linear-gradient(135deg, rgba(30, 40, 55, 0.92), rgba(40, 52, 70, 0.94));
  backdrop-filter: blur(12px);
}

#ll-auth-overlay.visible {
  display: flex;
}

.ll-auth-shell {
  width: 100%;
  max-height: calc(100vh - 56px);
  overflow: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ll-auth-head {
  padding: 34px 38px 22px;
  border-bottom: 1px solid #dce8f4;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(237,243,252,0.95));
}

.ll-auth-kicker,
.ll-admin-kicker {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6a82a0;
  font-weight: 600;
}

.ll-auth-title,
.ll-admin-title {
  margin-top: 8px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 38px;
  line-height: 1.04;
  color: #1f231d;
}

.ll-auth-sub,
.ll-admin-sub {
  margin-top: 10px;
  max-width: 720px;
  color: #546278;
  font-size: 14px;
  line-height: 1.7;
}

.ll-auth-body {
  padding: 24px 38px 34px;
}

.ll-auth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
  gap: 24px;
  align-items: start;
}

.ll-auth-card,
.ll-admin-panel {
  background: #fff;
  border: 1px solid #dce8f4;
  border-radius: 18px;
  box-shadow: 0 18px 34px rgba(31, 35, 29, 0.05);
}

.ll-auth-card-head,
.ll-admin-panel-head {
  padding: 20px 22px 14px;
  border-bottom: 1px solid #dce8f4;
}

.ll-auth-card-title,
.ll-admin-panel-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  color: #22281f;
}

.ll-auth-card-sub,
.ll-admin-panel-sub {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.6;
  color: #6a82a0;
}

.ll-auth-user-grid {
  padding: 18px 20px 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.ll-user-card {
  position: relative;
  overflow: hidden;
  border: 1.5px solid #dce8f4;
  border-radius: 16px;
  padding: 16px 14px;
  background: linear-gradient(180deg, #fff 0%, #f5f9ff 100%);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  text-align: left;
  isolation: isolate;
  --ll-card-accent: #3c6fb8;
  --ll-card-accent-2: #2f5fa7;
  --ll-card-soft: rgba(47, 95, 167, 0.14);
  --ll-card-shadow: rgba(47, 95, 167, 0.22);
}

.ll-user-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, var(--ll-card-soft), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,0.95), rgba(237,243,252,0.88));
  z-index: -2;
}

.ll-user-card::after {
  content: "";
  position: absolute;
  top: -24px;
  right: -14px;
  width: 94px;
  height: 94px;
  border-radius: 28px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ll-card-accent) 82%, white 18%), var(--ll-card-accent-2));
  opacity: 0.12;
  transform: rotate(18deg);
  z-index: -1;
}

.ll-user-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ll-card-accent) 35%, #b8cee2 65%);
  box-shadow: 0 14px 24px rgba(32, 37, 27, 0.08);
}

.ll-user-card.selected {
  border-color: var(--ll-card-accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ll-card-shadow) 50%, white 50%), 0 18px 30px rgba(32, 37, 27, 0.12);
}

.ll-user-card.is-unassigned {
  opacity: 0.82;
}

.ll-login-avatar,
.ll-user-avatar,
.ll-current-user-avatar,
.ll-admin-user-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2f5fa7, #3c6fb8);
  color: #fff;
  font-size: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

.ll-login-avatar {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  position: relative;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,0.34), transparent 34%),
    linear-gradient(145deg, var(--ll-card-accent), var(--ll-card-accent-2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 12px 22px color-mix(in srgb, var(--ll-card-shadow) 48%, transparent 52%);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.ll-login-avatar::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
}

.ll-user-name,
.ll-admin-user-name {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #242822;
}

.ll-user-name {
  margin-top: 14px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ll-user-name::after {
  content: "";
  width: 34px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ll-card-accent) 55%, white 45%), transparent);
}

.ll-admin-user-meta {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.5;
  color: #6a82a0;
}

.ll-auth-form {
  padding: 18px 22px 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ll-auth-label,
.ll-admin-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5a7089;
  font-weight: 700;
}

.ll-auth-input,
.ll-admin-input,
.ll-admin-select {
  width: 100%;
  border: 1.5px solid #c9d6e8;
  border-radius: 12px;
  padding: 12px 13px;
  background: #f5f9ff;
  color: #232323;
  outline: none;
  font-size: 14px;
}

.ll-auth-input:focus,
.ll-admin-input:focus,
.ll-admin-select:focus {
  border-color: #2f5fa7;
  background: #fff;
}

.ll-admin-user-select-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a8ea4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.ll-admin-inline-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.ll-auth-pin-wrap {
  position: relative;
}

.ll-auth-pin-wrap::after {
  content: "4 digits";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a8ea4;
  pointer-events: none;
}

.ll-auth-error,
.ll-admin-status {
  min-height: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: #c0392b;
}

.ll-auth-error.success,
.ll-admin-status.success {
  color: #3d7240;
}

.ll-auth-remember,
.ll-mob-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #546278;
  cursor: pointer;
  user-select: none;
  margin: 8px 0 4px;
}
.ll-auth-remember input[type="checkbox"],
.ll-mob-remember input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #2f5fa7;
  cursor: pointer;
}

.ll-auth-help {
  margin: 2px 0 10px;
  font-size: 12px;
  line-height: 1.6;
  color: #6a7a8d;
}

.ll-auth-btn,
.ll-admin-btn {
  border: 1.5px solid #2f5fa7;
  background: #2f5fa7;
  color: #fff;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

.ll-auth-btn:hover,
.ll-admin-btn:hover {
  background: #3c6fb8;
  border-color: #3c6fb8;
}

.ll-auth-btn.secondary,
.ll-admin-btn.secondary {
  background: #fff;
  color: #546278;
  border-color: #c9d6e8;
}

.ll-auth-btn.secondary:hover,
.ll-admin-btn.secondary:hover {
  background: #edf3fc;
  border-color: #afc4d9;
}

.ll-auth-tip {
  padding: 12px 14px;
  border-radius: 12px;
  background: #eaf2fb;
  color: #546278;
  font-size: 12px;
  line-height: 1.6;
}

.ll-header-user {
  display: none;
  align-items: center;
  margin-left: auto;
  position: relative;
}

.ll-header-user.visible {
  display: flex;
}

.ll-current-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 18px;
  border: none;
  cursor: pointer;
  padding: 0;
  background: linear-gradient(135deg, #2f5fa7, #3c6fb8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.18s, transform 0.14s;
}

.ll-current-user-avatar:hover {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.22);
  transform: scale(1.05);
}

.ll-user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(40,55,80,0.18), 0 2px 8px rgba(40,55,80,0.10);
  padding: 14px 0 10px;
  z-index: 1200;
  animation: llDropdownIn 0.16s ease;
}

.ll-user-dropdown.open {
  display: block;
}

@keyframes llDropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ll-user-dropdown-info {
  padding: 2px 18px 10px;
}

.ll-current-user-name {
  font-size: 14px;
  color: #2d3748;
  font-weight: 700;
  line-height: 1.3;
}

.ll-current-user-role {
  margin-top: 3px;
  font-size: 11px;
  color: #7a8aa0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ll-user-dropdown-divider {
  height: 1px;
  background: rgba(0,0,0,0.07);
  margin: 0 12px 8px;
}

.ll-logout-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 18px;
  border: none;
  background: transparent;
  color: #c0392b;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.14s;
}

.ll-logout-btn:hover {
  background: rgba(192,57,43,0.07);
}

.ll-dropdown-action {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 18px;
  border: none;
  background: transparent;
  color: #2d3f54;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.14s;
}

.ll-dropdown-action:hover {
  background: rgba(45,63,84,0.07);
}

.ll-change-pin-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ll-change-pin-modal[hidden] { display: none !important; }

.ll-change-pin-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 45, 61, 0.55);
  backdrop-filter: blur(4px);
}

.ll-change-pin-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  width: min(420px, 100%);
  padding: 24px 26px 22px;
  box-shadow: 0 28px 64px rgba(31,45,61,0.32);
}

.ll-change-pin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.ll-change-pin-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6f8198;
  margin-bottom: 4px;
}

.ll-change-pin-title {
  font-size: 20px;
  font-weight: 700;
  color: #1f2d3d;
}

.ll-change-pin-close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: #6f8198;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.ll-change-pin-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ll-change-pin-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f8198;
  margin-top: 6px;
}

.ll-change-pin-input {
  border: 1px solid rgba(31,45,61,0.18);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 18px;
  letter-spacing: 0.4em;
  text-align: center;
  font-family: inherit;
  background: #f8fafc;
  color: #1f2d3d;
}

.ll-change-pin-input:focus {
  outline: 2px solid #2d3f54;
  outline-offset: 1px;
  background: #fff;
}

.ll-change-pin-help {
  font-size: 12px;
  color: #6f8198;
  line-height: 1.4;
  margin-top: 6px;
}

.ll-change-pin-status {
  font-size: 13px;
  min-height: 1.2em;
  margin-top: 6px;
}

.ll-change-pin-status.err { color: #c0392b; }
.ll-change-pin-status.success { color: #1f7a3d; }

.ll-change-pin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.ll-change-pin-cancel {
  background: transparent;
  border: 1px solid rgba(31,45,61,0.18);
  color: #2d3f54;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
}

.ll-change-pin-cancel:hover { background: rgba(31,45,61,0.05); }

.ll-change-pin-submit {
  background: linear-gradient(135deg, #2d3f54 0%, #1f2d3d 100%);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.04em;
}

.ll-change-pin-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (min-width: 961px) {
  #header {
    padding: 20px 34px 18px;
  }

  #header-inner {
    max-width: 1400px;
  }

  #header-top {
    display: grid;
    grid-template-columns: minmax(280px, auto) minmax(0, 1fr) auto;
    grid-template-areas:
      "brand nav user";
    align-items: start;
    column-gap: 24px;
    row-gap: 14px;
  }

  #logo-block {
    grid-area: brand;
    align-self: center;
  }

  #nav-tabs {
    grid-area: nav;
    margin-top: 0;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    background: rgba(255,255,255,0.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  }

  .nav-tab {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-color: rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.025);
    color: #fff;
  }

  .nav-tab:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.24);
    color: #fff;
    transform: translateY(-1px);
  }

  .nav-tab.active {
    background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
    border-color: rgba(255,255,255,0.34);
    box-shadow: 0 10px 18px rgba(0,0,0,0.12);
  }

  .nav-ico {
    opacity: 0.86;
  }

  #tab-admin-users,
  #tab-admin-permissions {
    background: rgba(96, 148, 198, 0.08);
    border-color: rgba(96, 148, 198, 0.24);
    color: rgba(255, 255, 255, 0.88);
  }

  #tab-admin-users:hover,
  #tab-admin-permissions:hover,
  #tab-admin-users.active,
  #tab-admin-permissions.active {
    background: rgba(96, 148, 198, 0.16);
    border-color: rgba(120, 168, 214, 0.34);
    color: #d8eeff;
  }

  .ll-header-user {
    grid-area: user;
    align-self: center;
    margin-left: 0;
    padding: 6px 10px 6px 6px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  }

  .ll-current-user-role {
    letter-spacing: 0.12em;
  }
}

#page-admin-users {
  padding: 30px 32px 58px;
  background:
    radial-gradient(circle at top right, rgba(215, 230, 245, 0.75), transparent 28%),
    linear-gradient(180deg, #edf3fc 0%, #f5f9ff 100%);
}

.ll-admin-shell {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ll-admin-grid {
  display: grid;
  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.ll-admin-panel-body {
  padding: 18px 20px 22px;
}

.ll-admin-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ll-admin-form-grid .full {
  grid-column: 1 / -1;
}

.ll-admin-form-grid form.full {
  margin: 0;
}

.ll-admin-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding-top: 4px;
}

.ll-admin-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #4e493f;
  cursor: pointer;
  user-select: none;
}

.ll-admin-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #2f5fa7;
  cursor: pointer;
}

.ll-admin-perm-grid {
  display: grid;
  gap: 12px;
}

.ll-admin-perm-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 16px;
  align-items: center;
  padding: 14px 15px;
  border: 1px solid #d8e4f2;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(60, 111, 184, 0.08), transparent 35%),
    linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.ll-admin-perm-row:hover {
  transform: translateY(-1px);
  border-color: #c3d6eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 18px rgba(47, 95, 167, 0.08);
}

.ll-admin-perm-row:focus-within {
  border-color: #2f5fa7;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 0 0 3px rgba(47, 95, 167, 0.12),
    0 12px 22px rgba(47, 95, 167, 0.1);
}

.ll-admin-perm-copy {
  min-width: 0;
}

.ll-admin-perm-name {
  font-size: 14px;
  color: #223041;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ll-admin-perm-note {
  margin-top: 5px;
  max-width: 44ch;
  font-size: 12px;
  line-height: 1.5;
  color: #607790;
}

.ll-admin-perm-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 116px));
  gap: 10px;
}

.ll-admin-perm-toggle {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.ll-admin-perm-toggle-input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ll-admin-perm-toggle-ui {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 74px;
  padding: 12px 14px;
  border: 1px solid #cbd9e8;
  border-radius: 16px;
  background: rgba(255,255,255,0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.ll-admin-perm-toggle-ui::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border: 1.5px solid #9eb4cc;
  border-radius: 999px;
  background: #fff;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.ll-admin-perm-toggle:hover .ll-admin-perm-toggle-ui {
  transform: translateY(-1px);
  border-color: #b6cce5;
}

.ll-admin-perm-toggle-input:focus + .ll-admin-perm-toggle-ui {
  border-color: #2f5fa7;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 0 0 3px rgba(47, 95, 167, 0.14);
}

.ll-admin-perm-toggle-input:checked + .ll-admin-perm-toggle-ui {
  border-color: #2f5fa7;
  background:
    linear-gradient(180deg, rgba(60, 111, 184, 0.18) 0%, rgba(47, 95, 167, 0.1) 100%),
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 10px 18px rgba(47, 95, 167, 0.12);
}

.ll-admin-perm-toggle-input:checked + .ll-admin-perm-toggle-ui::after {
  border-color: #2f5fa7;
  background: #2f5fa7;
  box-shadow: 0 0 0 4px rgba(47, 95, 167, 0.14);
}

.ll-admin-perm-toggle-title {
  font-size: 13px;
  font-weight: 700;
  color: #23364b;
}

.ll-admin-perm-toggle-note {
  font-size: 11px;
  line-height: 1.35;
  color: #6280a1;
}

.ll-admin-perm-toggle-input:checked + .ll-admin-perm-toggle-ui .ll-admin-perm-toggle-title {
  color: #173e6e;
}

.ll-admin-perm-toggle-input:checked + .ll-admin-perm-toggle-ui .ll-admin-perm-toggle-note {
  color: #3e648b;
}

.ll-admin-users-list {
  display: grid;
  gap: 12px;
}

.ll-admin-user-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #dce8f4;
  border-radius: 16px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ll-admin-user-card:hover {
  border-color: #c0d4ed;
  box-shadow: 0 2px 8px rgba(47, 95, 167, 0.06);
}

.ll-admin-user-card .ll-admin-user-name {
  margin-top: 0;
}

.ll-admin-user-card.inactive {
  opacity: 0.62;
}

.ll-admin-user-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.ll-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #eef4fb;
  color: #696256;
}

.ll-admin-badge.admin {
  background: #e6efe0;
  color: #48643d;
}

.ll-admin-badge.inactive {
  background: #fde8e8;
  color: #c0392b;
}

.ll-admin-user-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ll-admin-inline-btn {
  border: 1px solid #c9d6e8;
  background: #fff;
  color: #6b6459;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.ll-admin-inline-btn:hover {
  background: #f5f9fe;
  border-color: #a8bdd6;
  color: #2f5fa7;
}

.ll-admin-inline-btn:active {
  background: #eaf1fa;
}

.ll-admin-inline-btn.warn {
  color: #c0392b;
}

.ll-admin-inline-btn.warn:hover {
  background: #fef5f5;
  border-color: #e0a8a8;
}

.ll-admin-empty {
  padding: 24px;
  border: 1px dashed #ccd8e9;
  border-radius: 16px;
  background: #fdfcf9;
  color: #7a8ea4;
  text-align: center;
  font-size: 12px;
}

.ll-admin-user-select-grid {
  display: grid;
  gap: 10px;
}

.ll-admin-user-select {
  width: 100%;
  text-align: left;
  border: 1px solid #dce8f4;
  border-radius: 16px;
  background: #fff;
  padding: 14px 15px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  cursor: pointer;
}

.ll-admin-user-select.active {
  border-color: #2f5fa7;
  box-shadow: 0 0 0 3px rgba(47, 95, 167, 0.14);
  background: #f7f9fc;
}

.ll-admin-user-select-copy {
  min-width: 0;
}

.ll-admin-section-note {
  margin-top: 10px;
  font-size: 12px;
  color: #6a82a0;
  line-height: 1.6;
}

.ll-admin-selected-summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #dce8f4;
  border-radius: 16px;
  background: #f5f9fe;
  margin-bottom: 16px;
}

.ll-admin-selected-copy {
  min-width: 0;
}

.ll-hidden {
  display: none !important;
}

@media (max-width: 980px) {
  .ll-auth-grid,
  .ll-admin-grid {
    grid-template-columns: 1fr;
  }

  .ll-header-user {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  #ll-auth-overlay {
    padding: 16px;
  }

  .ll-auth-head,
  .ll-auth-body,
  #page-admin-users {
    padding-left: 18px;
    padding-right: 18px;
  }

  .ll-auth-user-grid,
  .ll-admin-panel-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ll-admin-form-grid,
  .ll-admin-perm-row {
    grid-template-columns: 1fr;
  }

  .ll-admin-perm-row {
    align-items: stretch;
    padding: 14px;
  }

  .ll-admin-perm-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .ll-admin-perm-note {
    max-width: none;
  }

  .ll-admin-user-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .ll-admin-user-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 4px;
    border-top: 1px solid #eef3fa;
    margin-top: 2px;
  }

  .ll-login-avatar {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    font-size: 21px;
  }

  .ll-auth-shell {
    width: 100%;
    max-height: calc(100vh - 32px);
  }

  .ll-auth-user-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ll-auth-btn,
  .ll-admin-btn {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  #search-input,
  .form-input,
  .qa-modal-input,
  .qa-modal-select,
  .wl-input,
  .tasks-input,
  .tasks-select,
  .ll-auth-input,
  .ll-admin-input {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  #ll-auth-overlay {
    padding: 10px;
    align-items: flex-start;
  }

  .ll-auth-head,
  .ll-auth-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .ll-auth-title,
  .ll-admin-title {
    font-size: 30px;
  }

  .ll-auth-sub,
  .ll-admin-sub {
    font-size: 13px;
  }

  .ll-user-dropdown {
    right: 0;
    left: auto;
  }

  .ll-admin-user-card {
    padding: 12px;
    gap: 10px;
  }

  .ll-admin-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 18px;
  }

  .ll-admin-user-actions {
    gap: 6px;
  }

  .ll-admin-inline-btn {
    padding: 7px 10px;
    flex: 1;
    text-align: center;
  }
}

/* ── Mobile login layout: shown at all sizes ── */
.ll-auth-mobile-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ── Desktop login layout: hidden at all sizes ── */
.ll-auth-desktop-layout { display: none !important; }

/* ── Login card ── */
.ll-mob-card {
  width: 100%;
  max-width: 420px;
  background: rgba(250, 252, 255, 0.98);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

.ll-mob-title {
  padding: 32px 32px 0;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: #1f231d;
  line-height: 1.2;
}

.ll-mob-brand {
  padding: 40px 32px 26px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,246,255,0.92));
  border-bottom: 1px solid rgba(220, 232, 244, 0.8);
}

.ll-mob-mono {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(145deg, #2f5fa7, #3c6fb8);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(47, 95, 167, 0.32);
}

.ll-mob-wordmark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 30px;
  color: #1f231d;
  line-height: 1.1;
}

.ll-mob-portal-tag {
  margin-top: 7px;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7a8ea4;
  font-weight: 600;
}

.ll-mob-form {
  padding: 28px 28px 34px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ll-mob-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ll-mob-label {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a7089;
  font-weight: 700;
}

.ll-mob-input {
  width: 100%;
  border: 1.5px solid #c9d6e8;
  border-radius: 12px;
  padding: 14px 16px;
  background: #f5f9ff;
  color: #232323;
  outline: none;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.ll-mob-input:focus {
  border-color: #2f5fa7;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 95, 167, 0.10);
}

.ll-mob-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235a7089' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

.ll-mob-error {
  min-height: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: #c0392b;
  margin-top: -4px;
}

.ll-mob-error.success {
  color: #3d7240;
}

.ll-mob-help {
  margin-top: -2px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #6a7a8d;
}

.ll-mob-btn {
  width: 100%;
  border: none;
  background: linear-gradient(145deg, #2f5fa7, #3c6fb8);
  color: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
  box-shadow: 0 8px 22px rgba(47, 95, 167, 0.28);
  margin-top: 4px;
}

.ll-mob-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(47, 95, 167, 0.34);
}

.ll-mob-btn:active {
  transform: translateY(0);
  opacity: 1;
}

/* ── Small-screen adjustments ── */
@media (max-width: 640px) {
  #ll-auth-overlay {
    padding: 16px;
  }
  .ll-mob-card {
    max-width: 380px;
  }
}

/* ═══ Style Block 20 ═══ */
.person-chip.dan .person-chip-icon{background:#5f4a7a;}
.checklist-admin-task-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.checklist-admin-field-help{font-size:11px;color:#7a8ea4;line-height:1.45;margin-top:6px;}


.task-item.is-wedding{border-color:#dce8f4;background:linear-gradient(180deg,#f8fbff 0%,#f4f8fc 100%);}
.task-item.is-wedding.is-urgent{border-color:#e0b19d;box-shadow:0 10px 24px rgba(155,74,42,.08);}
.task-state-badge,.task-context-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:10px;letter-spacing:.05em;font-weight:600;}
.task-state-badge.is-urgent{background:#ddeeff;color:#2F5FA7;}
.task-state-badge.is-available{background:#edf4eb;color:#4a7a4e;}
.task-state-badge.is-upcoming{background:#f3efe9;color:#627287;}
.task-state-badge.is-completed{background:#e8f0e9;color:#4a7a4e;}
.task-context-badge{background:#efe8dd;color:#6d6257;}
.task-item.is-wedding .task-main{display:block;}
.task-item.is-wedding{flex-wrap:wrap !important;}
.task-wedding-context{display:flex;align-items:center;gap:5px;width:100%;order:-1;margin-bottom:2px;font-size:11px;line-height:1.3;letter-spacing:.02em;}
.task-wedding-name{font-weight:600;color:#5a7a9e;}
.task-wedding-sep{color:#c2cdd8;font-size:9px;}
.task-wedding-subcat{color:#8a9bb0;font-weight:500;}
.task-item.is-wedding.is-urgent .task-wedding-name{color:#9b4a2a;}
.task-item.is-wedding.is-urgent .task-wedding-subcat{color:#b07a60;}
.task-item.is-wedding.is-complete .task-wedding-name{color:#7a8ea4;}
.task-item.is-wedding.is-complete .task-wedding-subcat{color:#9aabb8;}
.task-submeta{display:block;font-size:11px;color:#7a8ea4;line-height:1.6;margin-top:8px;}
.wdetail-task-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;row-gap:6px;flex-wrap:wrap;}
.wdetail-task-name{flex:1 1 14rem;min-width:0;}
.wdetail-task-pill-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;flex:0 1 auto;max-width:100%;margin-inline-start:auto;}
.wdetail-task-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:10px;letter-spacing:.05em;font-weight:600;}
.wdetail-task-pill.owner{background:#f1ece5;color:#6b5f53;}
.wdetail-task-pill.status.is-urgent{background:#ddeeff;color:#2F5FA7;}
.wdetail-task-pill.status.is-available{background:#edf4eb;color:#4a7a4e;}
.wdetail-task-pill.status.is-upcoming{background:#f3efe9;color:#627287;}
.wdetail-task-pill.status.is-completed{background:#e8f0e9;color:#4a7a4e;}
.wdetail-task-item.is-upcoming{border-color:#dce8f4;background:#f5f9fe;}
.wdetail-task-item.is-urgent{border-color:rgba(155,74,42,.42);background:#fff6f2;}
.wdetail-task-item.done{border-color:#cdd8cb;background:#f6faf6;}
.wdetail-task-timing{font-size:11px;color:#7a8ea4;line-height:1.5;margin-top:6px;}
@media (max-width: 960px){
  .checklist-admin-task-grid{grid-template-columns:1fr;}
  .wdetail-task-head-row{flex-direction:column;}
  .wdetail-task-name{flex-basis:auto;}
  .wdetail-task-pill-row{justify-content:flex-start;margin-inline-start:0;}
}

/* ═══ Style Block 21 ═══ */
:root{
  --staff-bg:#f0f5fb;
  --staff-surface:#f8fbff;
  --staff-surface-strong:#ffffff;
  --staff-surface-soft:#f2f7fd;
  --staff-border:#dce8f4;
  --staff-border-strong:#c9d6e8;
  --staff-text:#1a2232;
  --staff-text-soft:#546070;
  --staff-text-muted:#7a8ea4;
  --staff-accent:#4f86cc;
  --staff-accent-soft:#edf3ed;
  --staff-warm:#3a6090;
  --staff-danger:#2F5FA7;
  --staff-success:#326eb8;
  --staff-shadow-sm:0 8px 20px rgba(30,50,80,0.05);
  --staff-shadow-md:0 18px 44px rgba(30,50,80,0.08);
  --staff-radius-sm:12px;
  --staff-radius-md:18px;
  --staff-radius-lg:24px;
  --staff-space-1:4px;
  --staff-space-2:8px;
  --staff-space-3:12px;
  --staff-space-4:16px;
  --staff-space-5:20px;
  --staff-space-6:24px;
  --staff-space-7:32px;
  --staff-space-8:40px;
}

body{
  background:
    radial-gradient(circle at top left, rgba(210,225,248,0.5), transparent 26%),
    linear-gradient(180deg, #f4f7fc 0%, #eef3fa 100%);
  color:var(--staff-text);
}

#page-weddings,
#page-calendar,
#page-qa,
#page-worklogs,
#page-tasks,
#page-tours,
#page-rentals,
#page-family,
#page-events{
  min-height:calc(100vh - 132px);
}

#weddings-actions,
#search-section,
#table-section,
#cal-body,
#qa-body,
#wl-body,
#tasks-body,
#tours-body,
#rentals-body,
#family-body,
#events-body{
  max-width:1360px !important;
}

.staff-page-header{
  max-width:1360px;
  margin:0 auto;
  padding:32px 32px 10px;
}

.staff-page-header-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:0 0 18px;
  border-bottom:1px solid rgba(120,103,85,0.12);
}

.staff-page-copy{
  min-width:0;
}

.staff-page-kicker{
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:700;
  color:#6a82a0;
  margin-bottom:8px;
}

.staff-page-title{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:42px;
  line-height:1.02;
  color:var(--staff-text);
  font-weight:500;
}

.staff-page-sub{
  margin-top:10px;
  max-width:760px;
  font-size:14px;
  line-height:1.7;
  color:var(--staff-text-soft);
}

.staff-page-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.78);
  border:1px solid var(--staff-border);
  box-shadow:var(--staff-shadow-sm);
  color:var(--staff-text-soft);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
  white-space:nowrap;
}

.staff-page-actions,
.qa-toolbar,
.tasks-page-topbar,
#tours-toolbar,
.stay-toolbar,
#wl-subtabs{
  margin-top:18px;
}

#header{
  position:sticky;
  top:0;
  z-index:180;
  padding:18px 24px 14px !important;
  background:rgba(34, 37, 32, 0.94) !important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
  box-shadow:0 12px 28px rgba(16,18,15,0.16);
}

#header-inner{
  max-width:1360px;
  margin:0 auto;
}

#header-top{
  display:grid !important;
  grid-template-columns:minmax(240px, 320px) minmax(0, 1fr) auto;
  grid-template-areas:'brand nav user';
  gap:18px 24px;
  align-items:center;
}

#logo-block{
  grid-area:brand;
  display:flex;
  align-items:center;
  gap:14px;
}

#logo-img{
  width:54px;
  height:54px;
  border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,0.16);
}

#logo-text-name{
  color:#e8f4ff !important;
  letter-spacing:0.08em;
}

#logo-text-sub{
  color:rgba(200,220,248,0.72) !important;
}

#nav-tabs{
  grid-area:nav;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding:4px 0;
}

.nav-tab{
  min-height:44px;
  padding:10px 16px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  background:rgba(255,255,255,0.04) !important;
  color:rgba(210,228,252,0.82) !important;
  backdrop-filter:blur(10px);
  box-shadow:none !important;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.nav-tab:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.08) !important;
  border-color:rgba(255,255,255,0.16) !important;
  color:#fff !important;
}

.nav-tab.active{
  background:linear-gradient(180deg, rgba(200,220,255,0.18) 0%, rgba(200,220,255,0.08) 100%) !important;
  border-color:rgba(170,200,240,0.34) !important;
  color:#e8f4ff !important;
  box-shadow:0 10px 18px rgba(0,0,0,0.16) !important;
}

#tab-admin-users,
#tab-admin-permissions{
  background:rgba(96, 148, 198, 0.12) !important;
  border-color:rgba(120, 168, 214, 0.26) !important;
  color:#c8dff2 !important;
}

#tab-admin-users.active,
#tab-admin-permissions.active{
  background:linear-gradient(180deg, rgba(96,148,198,0.3) 0%, rgba(72,118,172,0.18) 100%) !important;
  border-color:rgba(140,180,220,0.4) !important;
  color:#dbeeff !important;
}

.staff-section-shell{
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(170,196,228,0.58);
  border-radius:22px;
  box-shadow:var(--staff-shadow-sm);
  padding:20px 22px 22px;
}

.staff-section-shell + .staff-section-shell{
  margin-top:18px;
}

.tasks-card,
.qa-card,
.wl-form-card,
.wl-log-card,
.tour-log-card,
.stay-card,
.checklist-admin-card,
.ll-admin-panel,
.wdetail-card,
.wedding-card,
.wedding-table{
  border:1px solid var(--staff-border) !important;
  border-radius:var(--staff-radius-md) !important;
  background:rgba(255,255,255,0.9) !important;
  box-shadow:var(--staff-shadow-sm) !important;
}

.tasks-card-head,
.tasks-list-head,
.wl-form-header,
.checklist-admin-card-head,
.ll-admin-panel-head,
#qa-modal-head{
  background:linear-gradient(180deg, #f4f8fd 0%, #eef3fa 100%) !important;
  border-bottom:1px solid #dce8f4 !important;
}
#task-modal-head{
  background:linear-gradient(160deg, #f7f4fb 0%, #eef3fa 100%) !important;
  border-bottom:1px solid #dce8f4 !important;
  border-top:4px solid #5b4a61 !important;
}

#qa-modal-title{
  color:#fff !important;
}

#task-modal-title{
  color:var(--staff-text) !important;
}

.tasks-list-title,
.tasks-card-title,
.wl-form-title,
.checklist-admin-card-title,
.ll-admin-panel-title{
  font-family:'Cormorant Garamond', Georgia, serif;
  color:var(--staff-text);
}

#table-section,
#qa-body,
#wl-body,
#tasks-body,
#tours-body,
#rentals-body,
#family-body,
#events-body,
#cal-body{
  padding-top:20px !important;
  padding-bottom:64px !important;
}

#search-section,
#table-section,
#cal-body,
#qa-body,
#wl-body,
#tasks-body,
#tours-body,
#rentals-body,
#family-body,
#events-body,
#page-admin-users,
#page-admin-permissions{
  max-width:1360px;
  margin-left:auto;
  margin-right:auto;
}

#tables-container,
#qa-list,
#tasks-list-wrap,
#wl-hist-results,
#wl-hist-recent,
#tours-upcoming-results,
#tours-hist-results,
#rentals-upcoming-results,
#rentals-past-results,
#family-upcoming-results,
#family-past-results,
#events-upcoming-results,
#events-past-results{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#table-footer-note,
#qa-loading,
#wl-hist-heading,
.wl-hist-recent-label,
.tasks-list-sub,
.tasks-card-sub,
.qa-card-meta,
.checklist-admin-card-sub,
.ll-admin-panel-sub{
  color:var(--staff-text-soft) !important;
}

#search-input,
.wl-input,
.tasks-input,
.qa-modal-input,
.qa-modal-select,
.checklist-admin-input,
.ll-admin-input,
.form-input{
  min-height:46px;
  border:1.5px solid var(--staff-border) !important;
  border-radius:14px !important;
  background:#f8fbff !important;
  color:var(--staff-text) !important;
  box-shadow:none !important;
}

textarea.wl-input,
textarea.tasks-input,
textarea.qa-modal-input,
textarea.checklist-admin-input,
textarea.ll-admin-input,
textarea.form-input{
  min-height:120px;
}

#search-input:focus,
.wl-input:focus,
.tasks-input:focus,
.qa-modal-input:focus,
.qa-modal-select:focus,
.checklist-admin-input:focus,
.ll-admin-input:focus,
.form-input:focus{
  border-color:#a0bcd6 !important;
  box-shadow:0 0 0 4px rgba(181,157,128,0.12) !important;
}

#add-btn,
#qa-page-add-btn,
.tasks-page-add-btn,
#tours-add-btn,
.stay-add-btn,
.checklist-admin-btn.primary,
.ll-admin-btn,
.tasks-add-btn,
.wl-save-btn,
.qa-modal-submit,
.btn-save,
.cal-detail-edit-btn{
  min-height:36px;
  padding:8px 16px !important;
  border-radius:8px !important;
  border:1px solid #2f5fa7 !important;
  background:#2f5fa7 !important;
  color:#fff !important;
  box-shadow:none !important;
  letter-spacing:0.06em !important;
  text-transform:uppercase;
  font-size:10.5px !important;
}

.checklist-admin-btn,
.ll-admin-btn.secondary,
.btn-cancel,
.qa-modal-cancel,
.qa-edit-btn,
.task-action-btn,
.tour-log-edit-btn,
.tour-log-del-btn,
.wl-nav-btn,
.wl-cancel-edit-btn,
.edit-btn,
.del-btn{
  min-height:34px;
  border-radius:8px !important;
  border:1px solid rgba(29, 49, 71, 0.12) !important;
  background:#ffffff !important;
  color:#3d4d62 !important;
  box-shadow:none !important;
}

.tasks-filter-btn,
.qa-filter-btn,
.wl-subtab,
#tours-subtabs .stay-subtab,
.stay-subtab,
.owner-filter-chip,
.wdetail-task-category-btn{
  border-radius:999px !important;
  border:1px solid var(--staff-border) !important;
  background:rgba(255,255,255,0.82) !important;
  color:var(--staff-text-soft) !important;
}

.tasks-filter-btn.active,
.qa-filter-btn.active,
.wl-subtab.active,
#tours-subtabs .stay-subtab.active,
.stay-subtab.active,
.owner-filter-chip.active,
.wdetail-task-category-btn.active{
  background:linear-gradient(180deg, #2f3b31 0%, #232c24 100%) !important;
  border-color:#2f3b31 !important;
  color:#fff !important;
  box-shadow:0 10px 18px rgba(35,44,36,0.16);
}

.tasks-filter-count,
.staff-page-badge strong{
  font-weight:700;
}

#qa-empty,
.tours-empty,
.stay-empty,
.ll-admin-empty{
  padding:38px 24px;
  border:1px dashed var(--staff-border-strong);
  border-radius:var(--staff-radius-md);
  background:rgba(255,255,255,0.62);
  color:var(--staff-text-soft);
  text-align:center;
}

#table-section .year-label,
#tours-toolbar,
.stay-toolbar,
#wl-subtabs{
  border-bottom-color:rgba(117,102,88,0.16) !important;
}

#page-admin-users,
#page-admin-permissions{
  padding:20px 24px 64px !important;
  min-height:calc(100vh - 170px);
}

.ll-admin-shell{
  gap:24px !important;
}

.ll-admin-grid{
  gap:22px !important;
}

.ll-admin-kicker,
.ll-auth-kicker{
  color:var(--staff-text-soft) !important;
  letter-spacing:.18em !important;
}

.ll-admin-title,
.ll-auth-title{
  color:var(--staff-text) !important;
  font-size:44px !important;
  line-height:1.03 !important;
}

.ll-admin-sub,
.ll-auth-sub{
  color:var(--staff-text-soft) !important;
  max-width:780px !important;
}

.ll-admin-status,
.ll-auth-error{
  min-height:22px;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.7);
  border:1px solid rgba(170,196,228,0.55);
}

.ll-admin-status:empty,
.ll-auth-error:empty{
  padding:0;
  border:none;
  background:transparent;
}

#ll-auth-overlay{
  background:
    linear-gradient(180deg, rgba(27,30,26,0.72) 0%, rgba(20,23,20,0.78) 100%),
    radial-gradient(circle at top left, rgba(126,144,116,0.25), transparent 35%);
}

.ll-auth-shell{
  width:100% !important;
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
}

.ll-auth-head{
  padding:36px 40px 24px !important;
}

.ll-auth-body{
  padding:26px 40px 36px !important;
}

.ll-auth-card,
.ll-admin-panel{
  background:rgba(255,255,255,0.88) !important;
}

.ll-auth-tip{
  background:#eaf2fb !important;
  border:1px solid rgba(186,210,236,0.72);
}

.ll-current-user-name{
  color:#2d3748 !important;
}

.ll-current-user-role{
  color:#7a8aa0 !important;
}

@media (max-width: 960px){
  #header{
    padding:16px 18px 12px !important;
  }

  #header-top{
    grid-template-columns:1fr;
    grid-template-areas:
      'brand'
      'nav'
      'user';
  }

  #nav-tabs{
    justify-content:flex-start;
  }

  .staff-page-header{
    padding:22px 20px 8px;
  }

  .staff-page-header-inner{
    flex-direction:column;
    align-items:flex-start;
    padding-bottom:14px;
  }

  .staff-page-title{
    font-size:34px;
  }

  .ll-admin-title,
  .ll-auth-title{
    font-size:36px !important;
  }
}

@media (max-width: 640px){
  .staff-page-header{
    padding:18px 16px 6px;
  }

  .staff-page-title{
    font-size:28px;
  }

  .staff-page-sub{
    font-size:13px;
  }

  #page-admin-users,
  #page-admin-permissions{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .staff-section-shell{
    padding:16px;
    border-radius:18px;
  }

  .ll-auth-head,
  .ll-auth-body{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}

/* ═══ Style Block 22 ═══ */
#header{
  padding:22px 28px 18px !important;
  overflow:visible;
}

#header-inner{
  max-width:1440px !important;
}

#header-top{
  grid-template-columns:minmax(320px, 1fr) auto !important;
  grid-template-areas:
    'brand user'
    'nav nav' !important;
  gap:22px 28px !important;
  align-items:center !important;
}

#logo-block{
  align-self:center;
  padding-top:2px;
}

#nav-tabs{
  width:100%;
  justify-content:flex-start !important;
  align-items:center;
  gap:12px !important;
  padding:18px 22px !important;
  margin-top:0 !important;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:30px;
  background:rgba(255,255,255,0.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}

.nav-tab{
  min-height:48px !important;
  padding:11px 18px !important;
}

.ll-header-user{
  align-self:center;
  margin-top:2px;
  margin-right:8px;
  justify-self:end;
}

@media (min-width: 1180px){
  #nav-tabs{
    max-width:980px;
  }
}

@media (max-width: 1100px){
  #header-top{
    grid-template-columns:1fr !important;
    grid-template-areas:
      'brand'
      'user'
      'nav' !important;
  }

  .ll-header-user{
    justify-self:start;
    margin-right:0;
    margin-left:8px;
  }
}

/* ═══ Style Block 23 ═══ */
.staff-page-header{
  padding:20px 22px 6px !important;
}

.staff-page-header-inner{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:18px;
  align-items:end;
  padding:22px 24px 20px !important;
  border:1px solid rgba(205,215,229,0.88) !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at top right, rgba(222,230,240,0.42), transparent 28%),
    radial-gradient(circle at bottom left, rgba(236,228,218,0.22), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,0.99), rgba(251,252,254,0.98)) !important;
  box-shadow:0 20px 46px rgba(67, 84, 108, 0.10) !important;
}

.staff-page-copy{
  max-width:760px;
}

.staff-page-kicker{
  font-size:11px !important;
  letter-spacing:0.16em !important;
  margin-bottom:10px !important;
  color:#5d6b7d !important;
  display:block !important;
}

.staff-page-title{
  font-size:42px !important;
  line-height:0.98 !important;
  letter-spacing:0.01em !important;
  color:#1e2430 !important;
}

.staff-page-sub{
  display:block !important;
  margin-top:12px !important;
  font-size:14px !important;
  line-height:1.6 !important;
  color:#49576b !important;
  max-width:620px;
}

.staff-page-badge{
  display:inline-flex !important;
  align-items:center;
  align-self:start;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(180,193,210,0.95);
  background:rgba(247,250,253,0.98);
  color:#3f4f64 !important;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  box-shadow:0 10px 24px rgba(67,84,108,0.08);
}

#weddings-actions{
  max-width:1360px;
  margin:14px auto 0 !important;
  padding:0 22px !important;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding-bottom:14px !important;
}

#search-section{
  padding-top:0 !important;
}

#table-section{
  margin-top:12px !important;
}

.staff-section-shell{
  border-radius:24px !important;
  padding:18px 20px 20px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(252,253,255,0.96)) !important;
  border:1px solid rgba(209,218,231,0.9) !important;
  box-shadow:0 18px 42px rgba(67,84,108,0.08) !important;
}

#search-section.staff-section-shell{
  padding:18px 20px !important;
}

#table-section.staff-section-shell{
  padding:18px 20px 22px !important;
}

#search-wrap{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.99), rgba(250,252,255,0.98)) !important;
  border:1px solid rgba(198,210,225,0.96);
  border-radius:18px;
  padding:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
}

#search-wrap::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:14px;
  background:linear-gradient(90deg, rgba(227,236,247,0.22), transparent 28%);
  pointer-events:none;
}

#search-input{
  min-height:60px;
  padding-left:52px !important;
  border-radius:14px !important;
  border-color:transparent !important;
  background:transparent !important;
  font-size:15px !important;
  color:#314055 !important;
}

#search-input::placeholder{
  color:#68788d !important;
  opacity:1;
}

#search-icon{
  left:18px !important;
  z-index:1;
  color:#627389 !important;
  font-size:16px !important;
}

.year-label{
  margin-bottom:12px !important;
  padding-bottom:12px !important;
  color:#5a687c !important;
  border-bottom:1px solid rgba(212,221,233,0.95) !important;
}

.wedding-table{
  border-radius:22px !important;
  overflow:hidden;
}

.wedding-table th{
  padding-top:15px !important;
  padding-bottom:15px !important;
  font-size:10px !important;
  letter-spacing:0.16em !important;
}

.wedding-table td{
  padding-top:18px !important;
  padding-bottom:18px !important;
}

.couple-name{
  font-size:18px !important;
  color:#243042 !important;
}
.couple-name-link{
  font-size:18px !important;
  color:#243042 !important;
}

.date-cell,
.guests-cell,
.lead-cell,
.asst-cell{
  color:#354357 !important;
}

.progress-track{
  height:7px !important;
  background:#e3e9f1 !important;
}

.progress-fill{
  box-shadow:0 0 0 1px rgba(108,129,152,0.10);
}

.progress-sub{
  color:#6d7b8b !important;
}

.dw-badge{
  border-radius:10px !important;
  min-width:38px !important;
  height:34px !important;
  font-weight:600;
}

.nav-tab{
  gap:10px !important;
  padding:11px 16px !important;
}

.nav-ico{
  width:24px;
  height:24px;
  border-radius:8px;
  background:#eef3f8;
  color:#5c6f86;
  font-size:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
}

.nav-tab.active .nav-ico{
  background:#d8e4f1;
  color:#31445c;
}

.nav-tab:hover .nav-ico{
  background:#e2ebf4;
  color:#41546b;
}

.nav-tab{
  color:#49586d !important;
  border-color:rgba(190,202,217,0.96) !important;
}

.nav-tab:hover{
  color:#233246 !important;
  background:#f7faff !important;
  border-color:#bccbdb !important;
}

.nav-tab.active{
  color:#1e2d42 !important;
  background:#e4edf7 !important;
  border-color:#b7c8dc !important;
}

#tab-admin-users,
#tab-admin-permissions{
  color:#2f5fa7 !important;
  background:#edf3fc !important;
  border-color:#c9d6e8 !important;
}

#tab-admin-users:hover,
#tab-admin-permissions:hover{
  color:#6f4f23 !important;
  background:#f7efde !important;
  border-color:#d8c19b !important;
}

#tab-admin-users.active,
#tab-admin-permissions.active{
  color:#1e3a5e !important;
  background:#f3e6cf !important;
  border-color:#a8c0d8 !important;
}

.ll-current-user-avatar{
  width:44px !important;
  height:44px !important;
  border-radius:13px !important;
  box-shadow:0 4px 12px rgba(47,95,167,0.18);
}

.ll-current-user-name{
  color:#2b3545 !important;
  font-size:14px !important;
}

.ll-current-user-role{
  color:#5d6c81 !important;
  font-size:10px !important;
}

#checklist-settings-body,
#portal-bridal-checklist-body{
  background:
    radial-gradient(circle at top left, rgba(226,232,242,0.32), transparent 26%),
    radial-gradient(circle at top right, rgba(240,244,250,0.72), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #fafbfd 48%, #f5f7fb 100%) !important;
}

.checklist-admin-shell,
#page-admin-users .ll-admin-shell,
#page-admin-permissions .ll-admin-shell{
  background:transparent !important;
}

#page-admin-users,
#page-admin-permissions{
  background:
    radial-gradient(circle at top left, rgba(226,232,242,0.24), transparent 24%),
    radial-gradient(circle at top right, rgba(240,244,250,0.58), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #fafbfd 48%, #f5f7fb 100%) !important;
  padding-top:20px !important;
}

#page-admin-users .ll-admin-shell > div:first-child,
#page-admin-permissions .ll-admin-shell > div:first-child{
  padding:22px 24px 20px !important;
  border:1px solid rgba(205,215,229,0.88) !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at top right, rgba(222,230,240,0.42), transparent 28%),
    radial-gradient(circle at bottom left, rgba(236,232,226,0.18), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,0.99), rgba(251,252,254,0.98)) !important;
  box-shadow:0 20px 46px rgba(67,84,108,0.08) !important;
}

.checklist-admin-hero{
  margin-bottom:20px !important;
}

.checklist-admin-kicker{
  color:#5d6b7d !important;
}

.checklist-admin-title{
  color:#1f2a39 !important;
}

.ll-admin-kicker{
  color:#5d6b7d !important;
}

.ll-admin-title{
  color:#1f2a39 !important;
  font-size:42px !important;
  line-height:.98 !important;
}

.checklist-admin-sub,
.checklist-admin-status{
  color:#58677b !important;
}

.ll-admin-sub{
  color:#58677b !important;
}

.checklist-admin-card,
.ll-admin-panel{
  background:rgba(255,255,255,0.96) !important;
  border:1px solid rgba(219,226,236,0.96) !important;
  box-shadow:0 18px 38px rgba(67,84,108,0.06) !important;
}

.checklist-admin-card-head,
.ll-admin-panel-head{
  background:linear-gradient(180deg, #f4f8fd 0%, #eef3fa 100%) !important;
  border-bottom:1px solid rgba(212,221,233,0.92) !important;
}

.checklist-admin-card-title,
.ll-admin-panel-title,
.ll-admin-title{
  color:#1f2a39 !important;
}

.checklist-admin-card-sub,
.ll-admin-panel-sub,
.ll-admin-sub{
  color:#58677b !important;
}

.checklist-admin-label,
.ll-admin-label{
  color:#5c6c80 !important;
}

.checklist-admin-input,
.ll-admin-input,
.ll-admin-select{
  background:#ffffff !important;
  border-color:#cfdae7 !important;
  color:#314055 !important;
}

.checklist-admin-input:focus,
.ll-admin-input:focus,
.ll-admin-select:focus{
  border-color:#bac7d9 !important;
  box-shadow:0 0 0 4px rgba(186,199,217,0.18) !important;
  background:#ffffff !important;
}

.checklist-admin-btn,
.ll-admin-btn{
  border-color:#cfdae7 !important;
  background:#ffffff !important;
  color:#55657a !important;
}

.checklist-admin-btn:hover,
.ll-admin-btn:hover{
  background:#f7faff !important;
  border-color:#bccbdb !important;
  color:#233246 !important;
}

.checklist-admin-btn.primary,
.ll-admin-btn.primary{
  background:linear-gradient(180deg,#73839b 0%,#62728b 100%) !important;
  border-color:#62728b !important;
  color:#ffffff !important;
  box-shadow:0 14px 28px rgba(98,114,139,0.16) !important;
}

.checklist-admin-btn.primary:hover,
.ll-admin-btn.primary:hover{
  background:#5d6d86 !important;
  border-color:#5d6d86 !important;
  color:#ffffff !important;
}

.checklist-admin-empty,
.checklist-admin-item,
.ll-admin-user-card,
.ll-admin-selected-summary{
  background:#ffffff !important;
  border-color:rgba(219,226,236,0.96) !important;
  color:#314055 !important;
}

.checklist-admin-item-meta,
.ll-admin-user-meta,
.ll-admin-selected-copy,
.ll-admin-status{
  color:#58677b !important;
}

.checklist-admin-inline-btn{
  border-color:#cfdae7 !important;
  color:#55657a !important;
  background:#ffffff !important;
}

.checklist-admin-inline-btn:hover{
  background:#f7faff !important;
  border-color:#bccbdb !important;
  color:#233246 !important;
}

#tours-body{
  max-width:1360px !important;
  padding:12px 22px 64px !important;
}

#tours-toolbar{
  margin-top:10px !important;
  margin-bottom:14px !important;
  padding:0 4px;
  border-bottom:1px solid rgba(117,102,88,0.16) !important;
  align-items:center !important;
}

#tours-subtabs{
  gap:10px !important;
}

#tours-subtabs .stay-subtab{
  min-height:44px !important;
  padding:10px 18px !important;
}

#tours-add-btn{
  margin-bottom:0 !important;
}

#page-tours .stay-panel{
  background:rgba(255,255,255,0.86) !important;
  border:1px solid rgba(170,196,228,0.58) !important;
  border-radius:18px !important;
  padding:16px 16px 18px !important;
}

#tours-upcoming-filter-row,
#tours-past-filter-row{
  margin-bottom:14px !important;
  padding:0 2px !important;
}

.tour-log-card{
  border-radius:18px !important;
  margin-bottom:12px !important;
}

.tour-log-summary{
  padding:20px 22px !important;
  gap:18px !important;
}

.tour-log-summary-date{
  font-size:28px !important;
  line-height:1.08 !important;
}

.tour-log-summary-name{
  margin-top:8px !important;
  font-size:15px !important;
  color:#5e5348 !important;
}

.tour-log-meta{
  gap:8px !important;
}

/* Keep rentals / family / events aligned with the cleaner dashboard pages */
#rentals-body,
#family-body,
#events-body{
  max-width:1360px !important;
  margin:0 auto !important;
  padding:12px 22px 64px !important;
  box-sizing:border-box !important;
}

#rentals-body .stay-toolbar,
#family-body .stay-toolbar,
#events-body .stay-toolbar,
#meetings-body .stay-toolbar{
  margin-top:10px !important;
  margin-bottom:14px !important;
  padding:0 4px 14px !important;
  align-items:center !important;
  border-bottom:1px solid rgba(117,102,88,0.16) !important;
}

#rentals-body .stay-subtabs,
#family-body .stay-subtabs,
#events-body .stay-subtabs,
#meetings-body .stay-subtabs{
  gap:10px !important;
  border-bottom:none !important;
}

#rentals-body .stay-subtab,
#family-body .stay-subtab,
#events-body .stay-subtab,
#meetings-body .stay-subtab{
  min-height:44px !important;
  padding:10px 18px !important;
  border:1px solid rgba(209,218,231,0.96) !important;
  border-radius:999px !important;
  margin-bottom:0 !important;
  background:#ffffff !important;
  color:#5a687c !important;
}

#rentals-body .stay-subtab.active,
#family-body .stay-subtab.active,
#events-body .stay-subtab.active,
#meetings-body .stay-subtab.active{
  background:#e4edf7 !important;
  color:#1e2d42 !important;
  border-color:#b7c8dc !important;
  box-shadow:0 10px 24px rgba(100,116,139,0.12) !important;
}

#rentals-body .stay-add-btn,
#family-body .stay-add-btn,
#events-body .stay-add-btn,
#meetings-body .stay-add-btn{
  margin-bottom:0 !important;
  border-color:#62728b !important;
  background:linear-gradient(180deg,#73839b 0%,#62728b 100%) !important;
  color:#ffffff !important;
  box-shadow:0 14px 28px rgba(98,114,139,0.16) !important;
}

#rentals-body .stay-add-btn:hover,
#family-body .stay-add-btn:hover,
#events-body .stay-add-btn:hover,
#meetings-body .stay-add-btn:hover{
  transform:translateY(-1px) !important;
  border-color:#5d6d86 !important;
  background:#5d6d86 !important;
}

/* #family-body #family-add-btn — removed, unified in add-button block at end of file */

@media (max-width: 960px){
  .staff-page-header{
    padding:16px 16px 2px !important;
  }

  .staff-page-title{
    font-size:26px !important;
  }

  .staff-page-sub{
    font-size:13px !important;
  }

  #weddings-actions{
    padding:0 16px !important;
    margin-top:14px !important;
    padding-bottom:14px !important;
  }

  #search-section,
  #table-section{
    margin-left:14px !important;
    margin-right:14px !important;
  }

  #tours-body{
    padding:0 0 96px !important;
  }

  #tours-toolbar{
    padding:0 8px !important;
    margin-bottom:0 !important;
    margin-top:0 !important;
  }

  #page-tours .stay-panel{
    padding:0 !important;
  }
}

/* ═══ Style Block 24 ═══ */
:root{
  --staff-bg:#f0f5fb;
  --staff-surface:#f8fbff;
  --staff-surface-strong:#ffffff;
  --staff-surface-soft:#f2f7fd;
  --staff-border:#dbe2ec;
  --staff-border-strong:#ccd5e2;
  --staff-text:#1a2232;
  --staff-text-soft:#546070;
  --staff-text-muted:#7a8ea4;
  --staff-accent:#4a6080;
  --staff-accent-soft:#eef3f8;
  --staff-warm:#3a6090;
  --staff-danger:#1d3147;
  --staff-success:#326eb8;
  --staff-shadow-sm:0 10px 24px rgba(30,50,80,0.06);
  --staff-shadow-md:0 24px 60px rgba(30,50,80,0.08);
}

body{
  background:
    radial-gradient(circle at top left, rgba(226,232,242,0.58), transparent 24%),
    radial-gradient(circle at top right, rgba(244,246,250,0.94), transparent 22%),
    linear-gradient(180deg,#ffffff 0%,#fafbfd 48%,#f5f7fb 100%) !important;
}

#header{
  background:rgba(255,255,255,0.92) !important;
  border-bottom:1px solid rgba(219,226,236,0.96) !important;
  box-shadow:0 12px 34px rgba(39,49,66,0.08) !important;
}

#logo-text-name,
#logo-text-sub,
#logo-text-portal{
  color:var(--staff-text) !important;
}

#logo-text-sub{
  opacity:.62;
}

#header-user{
  background:rgba(255,255,255,0.96) !important;
  border:1px solid rgba(219,226,236,0.96) !important;
  box-shadow:0 10px 24px rgba(39,49,66,0.06) !important;
}

#header-user-name{
  color:var(--staff-text) !important;
}

#header-user-role{
  color:var(--staff-text-soft) !important;
}

#logout-btn{
  background:#ffffff !important;
  border-color:var(--staff-border) !important;
  color:var(--staff-text) !important;
  box-shadow:none !important;
}

#logout-btn:hover{
  background:#f1f5fb !important;
  border-color:#c8d2e1 !important;
}

#nav-wrap{
  background:rgba(255,255,255,0.84) !important;
  border:1px solid rgba(219,226,236,0.96) !important;
  box-shadow:0 16px 36px rgba(39,49,66,0.06) !important;
}

.nav-tab{
  background:#ffffff !important;
  border:1px solid rgba(219,226,236,0.96) !important;
  color:var(--staff-text-soft) !important;
  box-shadow:none !important;
}

.nav-tab:hover{
  background:#f3f7fc !important;
  border-color:#ced7e4 !important;
  color:var(--staff-text) !important;
}

.nav-tab.active{
  background:#eaf0f8 !important;
  border-color:#cbd5e3 !important;
  color:#2b3545 !important;
  box-shadow:0 10px 24px rgba(100,116,139,0.12) !important;
}

.staff-page-kicker,
.staff-page-badge{
  display:none !important;
}

.staff-page-header{
  padding:24px 24px 8px !important;
}

.staff-page-header-inner{
  border-bottom:1px solid rgba(218,225,235,0.92) !important;
  padding-bottom:14px !important;
}

.staff-page-title{
  font-size:36px !important;
  color:#241f1d !important;
  letter-spacing:0 !important;
}

.staff-section-shell,
#page-tours .stay-panel,
#rentals-panel-upcoming,
#rentals-panel-past,
#family-panel-upcoming,
#family-panel-past,
#events-panel-upcoming,
#events-panel-past,
.tasks-card,
.qa-card,
.wl-card,
.wdetail-card,
.mobile-page-picker-card{
  background:rgba(255,255,255,0.94) !important;
  border-color:rgba(219,226,236,0.96) !important;
  box-shadow:var(--staff-shadow-sm) !important;
}

.year-label,
#tours-toolbar,
.stay-toolbar,
#wl-subtabs,
.tasks-page-topbar,
.qa-toolbar{
  border-bottom-color:rgba(219,226,236,0.92) !important;
}

#search-input,
.tasks-input,
.tasks-select,
.wl-input,
.wl-select,
.form-input,
#tours-upcoming-filter,
#tours-past-filter{
  background:#ffffff !important;
  border-color:var(--staff-border) !important;
  box-shadow:none !important;
}

#search-input:focus,
.tasks-input:focus,
.tasks-select:focus,
.wl-input:focus,
.wl-select:focus,
.form-input:focus,
#tours-upcoming-filter:focus,
#tours-past-filter:focus{
  border-color:#bac7d9 !important;
  box-shadow:0 0 0 4px rgba(186,199,217,0.18) !important;
}

.wedding-table,
.tour-log-card,
.stay-card{
  background:#ffffff !important;
  border-color:rgba(219,226,236,0.96) !important;
  box-shadow:var(--staff-shadow-sm) !important;
}

.wedding-table thead tr{
  background:#2f3744 !important;
}

.wedding-table th{
  color:#edf2f7 !important;
}

.wedding-table tbody tr.main-row:hover,
.stay-card-summary:hover,
.tour-log-summary:hover{
  background:#f8fbff !important;
}

#add-btn,
.tasks-page-add-btn,
#tours-add-btn,
.stay-add-btn,
.checklist-admin-btn.primary,
.ll-admin-btn,
.tasks-add-btn,
.btn-save,
.cal-detail-edit-btn{
  background:#2f5fa7 !important;
  border-color:#2f5fa7 !important;
  color:#ffffff !important;
  box-shadow:none !important;
}

#add-btn:hover,
.tasks-page-add-btn:hover,
#tours-add-btn:hover,
.stay-add-btn:hover,
.checklist-admin-btn.primary:hover,
.ll-admin-btn:hover,
.tasks-add-btn:hover,
.btn-save:hover,
.cal-detail-edit-btn:hover{
  background:#244f90 !important;
  border-color:#244f90 !important;
}

/* Task modal save button */
.task-modal-body #task-save-btn{
  background:#2f5fa7 !important;
  border-color:#2f5fa7 !important;
  box-shadow:none !important;
}
.task-modal-body #task-save-btn:hover{
  background:#244f90 !important;
  border-color:#244f90 !important;
  box-shadow:none !important;
}

.stay-subtab.active,
#tours-subtabs .stay-subtab.active,
.tasks-subtab.active,
.qa-subtab.active,
#wl-subtabs .wl-subtab.active{
  background:#ebf1f8 !important;
  border-color:#cbd6e5 !important;
  color:#2d3748 !important;
  box-shadow:0 10px 24px rgba(100,116,139,0.10) !important;
}

.stay-subtab,
#tours-subtabs .stay-subtab,
.tasks-subtab,
.qa-subtab,
#wl-subtabs .wl-subtab{
  background:#ffffff !important;
  border-color:rgba(219,226,236,0.96) !important;
  color:var(--staff-text-soft) !important;
}

#footer{
  background:#edf2f8 !important;
}

@media (max-width: 960px){
  .staff-page-header-inner{
    grid-template-columns:1fr;
  }

  .staff-page-title{
    font-size:30px !important;
  }

  .staff-page-badge{
    justify-self:start;
  }

}

/* ═══ Style Block 26 ═══ */
.staff-mobile-bottom-nav{
  display:none;
}

@media (max-width: 900px){
  html,
  body{
    overflow-x:hidden;
  }

  body{
    background:
      radial-gradient(circle at top left, rgba(226,232,242,0.72), transparent 28%),
      radial-gradient(circle at top right, rgba(248,250,253,0.94), transparent 24%),
      linear-gradient(180deg,#ffffff 0%,#f8fbff 52%,#f2f6fb 100%) !important;
    padding-bottom:104px;
  }

  #header{
    position:sticky;
    top:0;
    z-index:200;
    padding:14px 14px 12px !important;
    border-radius:0 0 24px 24px;
    backdrop-filter:blur(18px);
  }

  #header-inner{
    max-width:none;
  }

  #header-top{
    gap:10px;
  }

  #logo-block{
    gap:12px;
    width:100%;
  }

  #logo-img{
    width:54px;
  }

  #logo-text-name{
    font-size:21px !important;
    letter-spacing:.04em !important;
  }

  #logo-text-sub{
    font-size:12px !important;
  }

  #logo-text-portal{
    margin-top:4px !important;
    padding-top:4px !important;
  }

  #staff-sidebar{
    display:none !important;
  }

  body #mobile-page-picker-wrap{
    display:block !important;
    padding:12px 14px 10px !important;
    position:sticky;
    top:92px;
    z-index:180;
  }

  body .mobile-page-picker-card{
    border-radius:26px !important;
    padding:14px 16px !important;
    box-shadow:0 16px 34px rgba(39,49,66,0.10) !important;
    background:linear-gradient(135deg,#425066 0%,#52627c 100%) !important;
  }

  body .mobile-page-picker-icon{
    width:48px !important;
    height:48px !important;
    flex:0 0 48px !important;
    border-radius:16px !important;
    background:rgba(255,255,255,0.16) !important;
  }

  body #mobile-page-picker{
    min-height:48px;
    font-size:18px !important;
  }

  #app-main{
    padding-top:0;
  }

  #page-weddings,
  #page-calendar,
  #page-qa,
  #page-tasks,
  #page-worklogs,
  #page-bride-messages,
  #page-tours,
  #page-rentals,
  #page-family,
  #page-events,
  #page-checklist-settings,
  #page-portal-bridal-checklist{
    padding-bottom:24px;
  }

  .staff-page-header{
    padding:10px 14px 2px !important;
  }

  .staff-page-header-inner{
    padding:18px 18px 14px !important;
    border:1px solid rgba(219,226,236,0.96);
    border-radius:24px;
    background:rgba(255,255,255,0.94);
    box-shadow:0 16px 34px rgba(39,49,66,0.06);
  }

  .staff-page-title{
    font-size:28px !important;
    line-height:1.04 !important;
  }

  .staff-page-sub{
    font-size:13px !important;
    line-height:1.7 !important;
  }

  #weddings-actions,
  #search-section,
  #table-section,
  #cal-body,
  #qa-body,
  #tasks-body,
  #wl-body,
  #tours-body,
  #bride-messages-body,
  #rentals-body,
  #family-body,
  #events-body,
  #checklist-settings-body,
  #portal-bridal-checklist-body,
  #portal-bridal-checklist-body,
  #portal-bridal-checklist-body{
    padding-left:14px !important;
    padding-right:14px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .staff-section-shell,
  .tasks-card,
  .qa-card,
  .tour-log-card,
  .stay-card,
  .bride-msg-sidebar-card,
  .bride-msg-main-card,
  .checklist-admin-card,
  .wdetail-card,
  .wdetail-hero{
    border-radius:24px !important;
    box-shadow:0 16px 34px rgba(39,49,66,0.08) !important;
  }

  #search-input,
  .tasks-input,
  .tasks-select,
  .wl-input,
  .form-input,
  .checklist-admin-input,
  #tours-upcoming-filter,
  #tours-hist-filter{
    min-height:48px;
    border-radius:16px !important;
    font-size:15px !important;
  }

  textarea.tasks-input,
  textarea.wl-input,
  textarea.form-input,
  textarea.checklist-admin-input,
  .bride-msg-compose textarea{
    min-height:120px;
  }

  #add-btn,
  .tasks-page-add-btn,
  #qa-page-add-btn,
  #tours-add-btn,
  .stay-add-btn,
  .checklist-admin-btn,
  .bride-msg-send-btn,
  .bride-msg-inline-btn,
  .btn-save,
  .btn-cancel{
    min-height:50px;
    border-radius:16px !important;
  }

  #weddings-actions{
    margin-top:6px !important;
    padding-bottom:8px !important;
  }

  #add-btn{
    width:100%;
  }

  .card-header,
  .card-meta,
  .card-actions,
  .card-checklist{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .card-meta{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .card-meta > div{
    padding:10px 12px;
    border:1px solid rgba(219,226,236,0.96);
    border-radius:14px;
    background:#f7faff;
  }

  #modal-scroll-inner,
  #task-modal-overlay{
    padding:0 !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #modal-box,
  #task-modal-box{
    width:100% !important;
    min-height:100dvh;
    border-radius:24px 24px 0 0 !important;
    margin-top:32px !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  #modal-head,
  #task-modal-head{
    padding:18px 18px 16px !important;
    border-radius:24px 24px 0 0 !important;
  }

  #modal-body,
  .task-modal-body{
    padding:18px 18px 28px !important;
  }

  .form-grid,
  .tasks-create-grid,
  .checklist-admin-grid,
  .bride-msg-shell{
    grid-template-columns:1fr !important;
  }

  .tasks-list-controls,
  .qa-toolbar,
  .tasks-page-topbar,
  .stay-toolbar,
  #tours-toolbar,
  .bride-msg-convo-actions,
  .checklist-admin-actions{
    gap:12px !important;
  }

  .qa-toolbar,
  .tasks-page-topbar,
  .stay-toolbar,
  #tours-toolbar{
    align-items:stretch !important;
  }

  #tours-toolbar{
    flex-wrap:wrap !important;
  }

  #tours-subtabs{
    flex:1 1 auto;
    min-width:0;
  }

  .tasks-owner-strip,
  .vendor-chip-row,
  .stay-subtabs,
  #tours-subtabs,
  .tasks-filter-tabs{
    scrollbar-width:none;
  }

  .staff-mobile-bottom-nav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:220;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
    padding:10px;
    border-radius:28px;
    border:1px solid rgba(219,226,236,0.96);
    background:rgba(255,255,255,0.96);
    box-shadow:0 18px 34px rgba(39,49,66,0.12);
    backdrop-filter:blur(18px);
  }

  .staff-mobile-bottom-nav button{
    min-height:58px;
    border:none;
    background:transparent;
    border-radius:18px;
    color:var(--staff-text-soft);
    font:inherit;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:8px 6px;
  }

  .staff-mobile-bottom-nav button.is-active{
    background:#edf3fa;
    color:#243042;
    box-shadow:0 10px 24px rgba(100,116,139,0.12);
  }

  .staff-mobile-bottom-nav-ico{
    font-size:18px;
    line-height:1;
  }

  .staff-mobile-bottom-nav-label{
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:700;
  }
}

@media (max-width: 520px){
  .staff-mobile-bottom-nav{
    left:10px;
    right:10px;
    bottom:10px;
    gap:6px;
    padding:8px;
  }

  #logo-text-name{
    font-size:19px !important;
  }

  .staff-page-title{
    font-size:24px !important;
  }
}

/* ═══ Style Block 28 ═══ */
html{
  overflow-x:hidden;
  scroll-padding-top:112px;
}

body{
  overflow-x:hidden;
  font-size:14px;
  line-height:1.6;
  background:
    radial-gradient(circle at top left, rgba(210, 225, 248, 0.5), transparent 24%),
    radial-gradient(circle at top right, rgba(218, 234, 252, 0.5), transparent 24%),
    linear-gradient(180deg, #f4f7fc 0%, #eef3fa 100%);
}

button,
input,
select,
textarea{
  min-height:44px;
}

:focus-visible{
  outline:3px solid rgba(77,91,66,0.32);
  outline-offset:3px;
}

#header{
  position:sticky;
  top:0;
  z-index:320;
  padding:18px 24px 16px;
  backdrop-filter:blur(18px);
  background:rgba(44,44,44,0.94);
}

#header-inner{
  max-width:none;
}

#header-top{
  max-width:1400px;
  margin:0 auto;
}

#logo-block{
  gap:14px;
}

#logo-text-name{
  font-size:23px;
}

#staff-sidebar{
  position:fixed;
  top:136px;
  left:18px;
  bottom:18px;
  width:248px;
  padding:0;
  z-index:80;
  border-radius:28px;
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(222,216,203,0.96);
  box-shadow:0 22px 48px rgba(56, 62, 52, 0.08);
  overflow:hidden;
}

#nav-tabs{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:0 !important;
  padding:18px 12px;
}

#nav-tabs::before,
#nav-tabs::after{
  display:none !important;
}

.nav-tab{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:12px 14px !important;
  border-radius:18px !important;
  white-space:normal;
  text-align:left;
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(219,213,202,0.96) !important;
  color:#516055 !important;
}

.nav-tab:hover{
  background:#fff !important;
  border-color:rgba(163,177,165,0.9) !important;
  color:#223126 !important;
}

.nav-tab.active{
  background:linear-gradient(135deg, #f4f7f1 0%, #e4ebdf 100%) !important;
  color:#223126 !important;
  box-shadow:0 14px 28px rgba(77,91,66,0.12);
}

.nav-ico{
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(77,91,66,0.08);
  font-size:16px !important;
}

.nav-label{
  font-size:11px !important;
  letter-spacing:.1em !important;
}

#app-main{
  margin-left:286px !important;
  padding:24px 22px 128px !important;
}

.staff-page-header{
  display:none !important;
}

.staff-page-header,
.staff-section-shell,
#weddings-actions,
#stats,
#search-section,
#table-section,
#cal-body,
#qa-body,
#tasks-body,
#wl-body,
#tours-body,
#rentals-body,
#family-body,
#events-body,
#checklist-settings-body,
#wedding-detail-body,
#page-admin-users .ll-admin-shell,
#page-admin-permissions .ll-admin-shell{
  max-width:1380px;
  margin-left:auto;
  margin-right:auto;
}

.staff-page-header{
  margin-bottom:18px;
}

.staff-page-header-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:24px 26px !important;
  border-radius:26px !important;
  box-shadow:0 18px 40px rgba(69, 79, 64, 0.08);
}

.staff-page-title{
  font-size:34px !important;
}

.staff-page-sub{
  max-width:70ch;
  font-size:14px !important;
}

#stats{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:0 0 16px !important;
  margin-top:0 !important;
}

.stat-item{
  margin:0;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(221,214,202,0.8);
  background:rgba(255,255,255,0.9);
  box-shadow:none;
}

.stat-num{
  font-size:22px;
  font-weight:600;
  line-height:1.15;
}

.stat-label{
  font-size:10px;
  letter-spacing:0.12em;
  margin-top:2px;
}

#weddings-actions{
  padding:0 0 14px !important;
  margin-top:0 !important;
}

#add-btn,
.tasks-page-add-btn,
#qa-page-add-btn{
  min-height:38px;
  padding:0 18px;
  border-radius:999px;
  font-size:10.5px;
  letter-spacing:.12em;
  box-shadow:0 4px 10px rgba(44,44,44,0.08);
}

#search-section{
  padding:0 0 18px !important;
}

#search-wrap{
  padding:0;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(221,214,202,0.96);
  border-radius:22px;
  box-shadow:0 14px 28px rgba(64, 68, 58, 0.05);
}

#search-input{
  min-height:54px;
  border:none;
  background:transparent;
  padding-left:46px;
}

#table-section{
  padding:0 0 28px !important;
}

.wedding-table{
  border-radius:24px !important;
  overflow:hidden;
  box-shadow:0 18px 36px rgba(64, 68, 58, 0.06) !important;
}

.wedding-table th{
  padding:14px 16px !important;
  font-size:10px !important;
}

.wedding-table td{
  padding:16px !important;
}

.expand-inner{
  gap:22px;
}

.mobile-cards{
  display:grid;
  gap:16px;
}

.wedding-card{
  border-radius:22px !important;
  box-shadow:0 16px 32px rgba(64, 68, 58, 0.07) !important;
  border:1px solid rgba(221,214,202,0.96) !important;
}

.card-header{
  padding:18px 18px 14px;
}

.card-actions{
  padding:14px 18px;
}

/* Mobile-only arrow toggle — hidden on desktop */
.card-mobile-toggle{
  display:none;
}

/* Desktop table toggle button */
.desktop-toggle-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  --desktop-toggle-size:30px;
  width:var(--desktop-toggle-size);
  height:var(--desktop-toggle-size);
  min-width:var(--desktop-toggle-size);
  min-height:var(--desktop-toggle-size);
  max-width:var(--desktop-toggle-size);
  max-height:var(--desktop-toggle-size);
  flex:0 0 var(--desktop-toggle-size);
  aspect-ratio:1 / 1;
  border-radius:9999px;
  border:1px solid #d0d5dd;
  background:#fff;
  color:#666;
  font-size:11px;
  cursor:pointer;
  transition:all 0.15s ease;
  padding:0;
  line-height:1;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  flex-shrink:0;
  overflow:hidden;
}
.desktop-toggle-btn:hover{
  background:#eef4fb;
  border-color:#afc4d9;
  color:#2c2c2c;
}
.desktop-toggle-btn.open{
  background:#eef4fb;
  border-color:#afc4d9;
  color:#2c2c2c;
}

/* Couple name as clickable link on desktop */
.couple-name-link{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:15px;
  color:#2c2c2c;
  line-height:1.4;
  white-space:normal;
  word-break:break-word;
  display:block;
  min-width:0;
  text-decoration:none;
  cursor:pointer;
}
.couple-name-link:hover{
  text-decoration:underline;
  color:#1a2636;
}

/* Remove pointer cursor from main-row since whole row is no longer clickable */
.wedding-table tbody tr.main-row{
  cursor:default;
}

#mobile-page-picker-wrap,
.staff-mobile-bottom-nav{
  display:none;
}

.ll-auth-shell{
  max-width:none;
  border-radius:0;
  overflow:auto;
  background:transparent;
  border:none;
  box-shadow:none;
}

.ll-auth-head{
  padding:26px 28px 18px;
}

.ll-auth-sub{
  max-width:64ch;
}

.ll-auth-grid{
  grid-template-columns:minmax(0,1.15fr) 320px;
  gap:18px;
}

.ll-auth-user-grid{
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  max-height:340px;
  overflow:auto;
  padding-right:4px;
}

.ll-user-card{
  min-height:88px;
  border-radius:20px;
}

/* ll-auth-extra and ll-auth-pill styles removed */

.ll-empty-state-card{
  display:grid;
  gap:8px;
  padding:28px 24px;
  border-radius:24px;
  background:rgba(255,255,255,0.9);
  border:1px dashed rgba(185,176,163,0.9);
  text-align:center;
  color:#6b655d;
}

.ll-empty-state-card strong{
  color:#2c2c2c;
  font-size:18px;
}

@media (max-width: 1100px){
  #staff-sidebar{
    width:222px;
  }

  #app-main{
    margin-left:252px !important;
  }

  .staff-page-title{
    font-size:30px !important;
  }

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

  .ll-auth-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 900px){
  html{
    scroll-padding-top:84px;
  }

  #staff-sidebar,
  #nav-tabs{
    display:none !important;
  }

  #header{
    padding:14px 12px 12px;
  }

  #header-top{
    justify-content:center;
  }

  #app-main{
    margin-left:0 !important;
    padding:0 0 116px !important;
  }

  #app-main,
  .page,
  #page-weddings,
  #page-calendar,
  #page-qa,
  #page-tasks,
  #page-worklogs,
  #page-bride-messages,
  #page-tours,
  #page-rentals,
  #page-family,
  #page-events,
  #page-checklist-settings,
  #page-portal-bridal-checklist,
  #page-wedding-detail{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #page-weddings > *,
  #page-calendar > *,
  #page-qa > *,
  #page-tasks > *,
  #page-worklogs > *,
  #page-bride-messages > *,
  #page-tours > *,
  #page-rentals > *,
  #page-family > *,
  #page-events > *,
  #page-checklist-settings > *,
  #page-portal-bridal-checklist > *,
  #page-wedding-detail > *{
    width:100% !important;
    max-width:none !important;
  }

  body #mobile-page-picker-wrap{
    display:block !important;
    max-width:1380px;
    padding:12px 14px 0 !important;
  }

  .mobile-page-picker-card{
    border-radius:22px !important;
    box-shadow:0 16px 34px rgba(46, 56, 68, 0.12);
    background:linear-gradient(135deg,#58646d 0%,#6f6b61 100%) !important;
  }

  .staff-mobile-bottom-nav{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
  }

  .staff-page-header,
  .staff-section-shell,
  #weddings-actions,
  #stats,
  #search-section,
  #table-section,
  #cal-body,
  #qa-body,
  #tasks-body,
  #wl-body,
  #tours-body,
  #rentals-body,
  #family-body,
  #events-body,
  #checklist-settings-body,
  #wedding-detail-body,
  #page-admin-users .ll-admin-shell,
  #page-admin-permissions .ll-admin-shell{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .staff-page-header-inner{
    padding:20px 18px !important;
    align-items:flex-start;
    flex-direction:column;
  }

  .staff-page-title{
    font-size:26px !important;
  }

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

  #weddings-actions{
    padding:0 14px 14px !important;
  }

  #search-section{
    padding:0 14px 14px !important;
  }

  #table-section{
    padding:0 14px 20px !important;
  }

  #weddings-actions,
  #stats,
  #search-section,
  #table-section,
  .staff-page-header,
  .staff-section-shell{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #search-wrap,
  #tables-container,
  .ll-empty-state-card{
    width:100% !important;
  }

  .wedding-table{
    display:none !important;
  }

  .mobile-cards{
    display:grid !important;
  }

  .wedding-card{
    margin-bottom:0 !important;
  }

  #stats{display:none !important;}
  #search-section{display:none !important;}
  .tasks-list-sub{display:none !important;}
  .tasks-summary{display:none !important;}
}

@media (max-width: 560px){
  #stats{
    grid-template-columns:1fr;
  }

  .card-meta{
    grid-template-columns:1fr !important;
  }

  .staff-mobile-bottom-nav{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
  }

  .ll-auth-head,
  .ll-auth-body{
    padding:20px 18px !important;
  }

  .ll-auth-grid{
    gap:14px;
  }
}

/* ═══ Style Block 29 ═══ */
.skip-link{
  position:fixed;
  top:14px;
  left:14px;
  z-index:280;
  padding:12px 16px;
  border-radius:999px;
  background:#fff;
  color:#1f2c3d;
  border:1px solid rgba(205,214,227,0.96);
  box-shadow:0 16px 32px rgba(39,49,66,0.16);
  transform:translateY(-180%);
  transition:transform .2s ease;
}

.skip-link:focus{
  transform:translateY(0);
}

#logo-text-portal{
  display:block !important;
  min-height:1.2em;
  color:rgba(232,228,222,0.72);
  border-top-color:rgba(255,255,255,0.12);
}

.ll-page-intro{
  max-width:1320px;
  margin:0 auto 18px;
  padding:24px 20px 0;
}

.ll-page-intro-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  padding:26px 28px;
  border-radius:28px;
  background:
    radial-gradient(circle at top right, rgba(222,230,240,0.45), transparent 28%),
    radial-gradient(circle at bottom left, rgba(244,239,231,0.34), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,247,0.96));
  border:1px solid rgba(221,214,202,0.96);
  box-shadow:0 18px 42px rgba(39,49,66,0.08);
}

.ll-page-intro-copy{
  display:grid;
  gap:10px;
}

.ll-page-intro-kicker{
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#7a8ea4;
}

.ll-page-intro-title{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:38px;
  line-height:1.04;
  color:#23291e;
}

.ll-page-intro-sub{
  max-width:66ch;
  font-size:14px;
  line-height:1.75;
  color:#66705c;
}

.ll-page-intro-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ll-page-intro-chip,
.ll-page-intro-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ll-page-intro-chip{
  background:rgba(247,243,235,0.98);
  border:1px solid rgba(230,221,209,0.96);
  color:#5f6658;
}

.ll-page-intro-side{
  display:grid;
  gap:10px;
  align-content:start;
  justify-items:end;
}

.ll-page-intro-badge{
  background:#edf3fa;
  border:1px solid #ccd8e7;
  color:#41536d;
}

.ll-page-intro-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.ll-page-action-inline{
  min-height:46px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(209,218,231,0.96);
  background:#fff;
  color:#2a3546;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(100,116,139,0.12);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ll-page-action-inline:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(100,116,139,0.18);
}

.ll-page-action-inline.primary{
  background:linear-gradient(180deg,#73839b 0%,#62728b 100%);
  color:#fff;
  border-color:#62728b;
}

.ll-mobile-picker-note{
  margin-top:8px;
  font-size:12px;
  line-height:1.55;
  color:#66705c;
}

#search-input{
  padding-right:52px !important;
}

.ll-search-clear{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:none;
  border-radius:999px;
  background:#edf3fa;
  color:#51637c;
  font-size:16px;
  cursor:pointer;
}

.ll-search-clear[hidden]{
  display:none !important;
}

#tables-container .ll-empty-state-card{
  min-height:180px;
  display:grid;
  place-items:center;
  text-align:center;
}

@media (max-width: 900px){
  .skip-link{
    top:10px;
    left:10px;
    padding:10px 14px;
  }

  .ll-page-intro{
    padding:12px 14px 0;
    margin-bottom:14px;
  }

  .ll-page-intro-card{
    grid-template-columns:1fr;
    gap:14px;
    padding:20px 18px;
    border-radius:24px;
  }

  .ll-page-intro-title{
    font-size:28px;
  }

  .ll-page-intro-sub{
    font-size:13px;
    line-height:1.7;
  }

  .ll-page-intro-side,
  .ll-page-intro-actions{
    justify-items:start;
    justify-content:flex-start;
  }
}

@media (max-width: 520px){
  .ll-page-action-inline{
    width:100%;
    justify-content:center;
  }
}

.staff-page-header,
.ll-page-intro,
.wdetail-hero,
.checklist-admin-hero,
#page-admin-users .ll-admin-shell > div:first-child,
#page-admin-permissions .ll-admin-shell > div:first-child{
  display:none !important;
}

.mobile-cards{
  display:none !important;
}

#weddings-actions{
  margin-top:0 !important;
  padding-top:20px !important;
}

#cal-body,
#qa-body,
#tasks-body,
#wl-body,
#bride-messages-body,
#tours-body,
#rentals-body,
#family-body,
#events-body,
#wedding-detail-body,
.checklist-admin-shell,
.ll-cm-shell,
#page-admin-users .ll-admin-shell,
#page-admin-permissions .ll-admin-shell{
  padding-top:20px !important;
}

@media (max-width: 900px){
  .mobile-cards{
    display:grid !important;
  }

  #weddings-actions{
    padding-top:14px !important;
  }

  #cal-body,
  #qa-body,
  #tasks-body,
  #wl-body,
  #bride-messages-body,
  #tours-body,
  #rentals-body,
  #family-body,
  #events-body,
  #wedding-detail-body,
  .checklist-admin-shell,
  .ll-cm-shell,
  #page-admin-users .ll-admin-shell,
  #page-admin-permissions .ll-admin-shell{
    padding-top:14px !important;
  }
}

/* ═══ Style Block 30 ═══ */
body{
  --ll-shell-bg:#f6f8fc;
  --ll-surface:#f9fbff;
  --ll-surface-strong:#ffffff;
  --ll-border:#d9e2ef;
  --ll-text:#1f2733;
  --ll-muted:#66758a;
  --ll-olive:#2f5fa7;
  --ll-olive-deep:#1f3f6e;
  background:
    radial-gradient(circle at top left, rgba(226, 233, 245, 0.62), transparent 26%),
    radial-gradient(circle at top right, rgba(241, 245, 252, 0.92), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%) !important;
  overflow-x:hidden;
  overflow-y:auto;
}

#header{
  position:sticky !important;
  top:0 !important;
  left:auto !important;
  right:auto !important;
  margin:0 !important;
  min-height:auto !important;
  padding:0 32px !important;
  border:0 !important;
  border-top:3px solid #1e3a5f !important;
  border-bottom:1px solid rgba(200,214,232,0.7) !important;
  border-radius:0 !important;
  background:linear-gradient(180deg, #edf2f8 0%, #f4f7fb 100%) !important;
  box-shadow:0 2px 16px rgba(20,35,60,0.08) !important;
  backdrop-filter:none;
}

#header::after{
  display:none !important;
}

#header-inner{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  height:54px !important;
  display:flex !important;
  align-items:center !important;
}

#header-top{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:24px !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

#logo-img{
  mix-blend-mode:normal !important;
  opacity:1 !important;
}

#logo-block{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:auto !important;
  margin:0 !important;
  padding-right:0 !important;
  justify-content:flex-start !important;
}

#logo-text-wrap{
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
}

#logo-text-name{
  color:#162842 !important;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  letter-spacing:0.01em !important;
  text-transform:none !important;
  white-space:nowrap !important;
}

#logo-text-sub{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  color:#7a90aa !important;
  font-family:'Jost','Helvetica Neue',sans-serif !important;
  font-style:normal !important;
  font-size:9px !important;
  font-weight:400 !important;
  letter-spacing:0.22em !important;
  text-transform:uppercase !important;
  opacity:1 !important;
}

#logo-text-portal{
  display:none !important;
}

.ll-current-user-name{
  color:#162842 !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
}

.ll-current-user-role{
  color:#7a90aa !important;
  font-size:10px !important;
  letter-spacing:0.05em !important;
}

.ll-header-user{
  margin-left:auto !important;
  margin-right:0 !important;
  justify-self:auto !important;
  align-self:center !important;
  flex-shrink:0 !important;
}

#staff-sidebar{
  position:fixed !important;
  top:75px !important;
  left:18px !important;
  bottom:18px !important;
  width:226px !important;
  padding:0 !important;
  border-radius:26px !important;
  background:rgba(245, 250, 255, 0.92) !important;
  border:1px solid rgba(190,210,235,0.94) !important;
  box-shadow:0 24px 48px rgba(30, 50, 80, 0.08) !important;
  backdrop-filter:blur(12px);
  overflow:auto !important;
}

#nav-tabs{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  margin:0 !important;
  padding:18px 14px !important;
}

.nav-tab{
  display:grid !important;
  grid-template-columns:38px minmax(0,1fr) !important;
  align-items:center !important;
  gap:12px !important;
  min-height:52px !important;
  padding:10px 14px !important;
  border-radius:16px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--ll-text) !important;
  box-shadow:none !important;
  text-align:left !important;
}

.nav-tab.ll-hidden,
.nav-tab[hidden]{
  display:none !important;
}

.nav-tab:hover{
  background:#eef4ff !important;
  border-color:rgba(188, 208, 238, 0.9) !important;
  color:var(--ll-text) !important;
}

.nav-tab.active{
  background:linear-gradient(135deg, #3c6fb8 0%, #2f5fa7 100%) !important;
  border-color:#2f5fa7 !important;
  color:#ffffff !important;
  box-shadow:0 12px 24px rgba(47, 95, 167, 0.22) !important;
}

.nav-ico{
  width:38px !important;
  height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px !important;
  background:#eef4ff !important;
  color:#2f5fa7 !important;
  font-size:16px !important;
}

.nav-tab.active .nav-ico{
  background:rgba(255,255,255,0.18) !important;
  color:#ffffff !important;
}

.nav-label{
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:0.12em !important;
  text-transform:uppercase !important;
}

#app-main{
  margin-top:0 !important;
  margin-left:264px !important;
  margin-right:0 !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  padding:26px 26px 96px !important;
  min-height:calc(100vh - 58px);
  height:auto !important;
  overflow:visible !important;
}

#mobile-page-picker-wrap,
.staff-mobile-bottom-nav{
  display:none !important;
}

#weddings-actions,
#stats,
#search-section,
#table-section{
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

#cal-body,
#qa-body,
#tasks-body,
#wl-body,
#tours-body,
#rentals-body,
#family-body,
#events-body,
#checklist-settings-body,
#wedding-detail-body{
  max-width:1400px !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Match tours-body width to .staff-hub-shell so both controls align */
#tours-body{
  max-width:1300px !important;
  padding-left:48px !important;
  padding-right:48px !important;
}

#weddings-actions{
  display:flex !important;
  justify-content:flex-start !important;
  padding:0 0 18px !important;
}

#add-btn,
.tasks-page-add-btn,
#qa-page-add-btn{
  min-height:48px !important;
  padding:0 22px !important;
  border-radius:999px !important;
  border:1px solid var(--ll-olive-deep) !important;
  background:var(--ll-olive) !important;
  color:#e8f4ff !important;
  font-size:11px !important;
  letter-spacing:0.14em !important;
  box-shadow:0 12px 24px rgba(30, 50, 80, 0.16) !important;
}

#add-btn:hover,
.tasks-page-add-btn:hover,
#qa-page-add-btn:hover{
  background:var(--ll-olive-deep) !important;
  border-color:var(--ll-olive-deep) !important;
  transform:none !important;
}

#stats{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:10px !important;
  padding:0 0 16px !important;
}

.stat-item{
  margin:0 !important;
  padding:12px 16px !important;
  border:1px solid rgba(190,210,235,0.7) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,0.92) !important;
  box-shadow:none !important;
}

.stat-num{
  font-size:22px !important;
  font-weight:600 !important;
  line-height:1.15 !important;
  color:var(--ll-text) !important;
}

.stat-num.warn{
  color:#c06020 !important;
}

.stat-label{
  font-size:10px !important;
  color:#627287 !important;
  letter-spacing:0.12em !important;
  margin-top:2px !important;
}

#search-section{
  padding:0 0 18px !important;
}

#search-wrap{
  position:relative !important;
  overflow:hidden !important;
  background:rgba(255,255,255,0.92) !important;
  border:1px solid rgba(190,210,235,0.94) !important;
  border-radius:20px !important;
  box-shadow:0 14px 30px rgba(30, 50, 80, 0.05) !important;
}

#search-icon{
  left:18px !important;
  color:#7a8ea4 !important;
}

#search-input{
  min-height:56px !important;
  padding:14px 54px 14px 50px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--ll-text) !important;
  font-size:14px !important;
}

#search-input::placeholder{
  color:#8fa4bb !important;
}

.ll-search-clear{
  position:absolute;
  right:12px;
  top:50%;
  width:32px;
  height:32px;
  transform:translateY(-50%);
  border:0;
  border-radius:999px;
  background:#e8f0fa;
  color:#4a6080;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}

.ll-search-clear:hover{
  background:#dce8f4;
}

#table-section{
  padding:0 0 24px !important;
}

.year-label{
  margin-bottom:10px !important;
  padding-bottom:8px !important;
  border-bottom:1px solid rgba(190,210,235,0.94) !important;
  color:#546278 !important;
}

.wedding-table{
  overflow:hidden !important;
  border:1px solid rgba(190,210,235,0.94) !important;
  border-radius:20px !important;
  background:rgba(255,255,255,0.96) !important;
  box-shadow:0 18px 36px rgba(30, 50, 80, 0.06) !important;
}

.wedding-table thead tr{
  background:#eaf2fb !important;
}

.wedding-table th{
  padding:14px 16px !important;
  border-bottom:1px solid rgba(190,210,235,0.88) !important;
  color:#546278 !important;
  font-size:10px !important;
}

.wedding-table td{
  padding:16px !important;
}

.wedding-table tbody tr.main-row:hover{
  background:#f0f7ff !important;
}

tr.expand-row td{
  background:#f2f7fd !important;
}

.wedding-card{
  border-radius:20px !important;
  border:1px solid rgba(190,210,235,0.94) !important;
  background:rgba(255,255,255,0.96) !important;
  box-shadow:0 16px 30px rgba(30, 50, 80, 0.06) !important;
}

#table-footer-note{
  margin-top:14px !important;
  font-size:10px !important;
  color:#7a8ea4 !important;
}

@media (max-width: 1180px){
  #staff-sidebar{
    width:210px !important;
  }

  #app-main{
    margin-left:246px !important;
    padding-right:20px !important;
    padding-left:20px !important;
  }

  #stats{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px){
  #header{
    position:relative !important;
    top:auto !important;
    padding:16px 16px 14px !important;
    border-radius:0 0 22px 22px !important;
  }

  #header-top{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  #logo-text-name{
    font-size:16px !important;
  }

  #logo-text-sub{
    font-size:9px !important;
    letter-spacing:0.20em !important;
  }

  #logo-text-portal{
    display:none !important;
  }

  #staff-sidebar,
  #nav-tabs{
    display:none !important;
  }

  .staff-mobile-bottom-nav{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  body #mobile-page-picker-wrap{
    display:block !important;
    position:sticky;
    top:84px;
    z-index:220;
    max-width:none !important;
    padding:12px 16px 0 !important;
  }

  .mobile-page-picker-card{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:14px 16px !important;
    border-radius:20px !important;
    background:rgba(255,255,255,0.94) !important;
    border:1px solid rgba(190,210,235,0.94) !important;
    box-shadow:0 14px 30px rgba(30, 50, 80, 0.08) !important;
  }

  .mobile-page-picker-icon{
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    border-radius:14px !important;
    background:var(--ll-olive) !important;
    color:#e8f4ff !important;
    font-size:18px !important;
  }

  .mobile-page-picker-copy{
    display:block !important;
    min-width:0 !important;
  }

  .mobile-page-picker-select-wrap::after{
    right:0 !important;
    color:#546278 !important;
  }

  #mobile-page-picker{
    min-height:44px !important;
    padding-right:22px !important;
    color:var(--ll-text) !important;
    font-size:18px !important;
    font-weight:600 !important;
  }

  .ll-mobile-picker-note{
    margin-top:4px;
    color:#7d7368;
    font-size:11px;
    line-height:1.4;
  }

  #app-main{
    margin-left:0 !important;
    padding:18px 16px 56px !important;
  }

  #weddings-actions,
  #stats,
  #search-section,
  #table-section,
  #cal-body,
  #qa-body,
  #tasks-body,
  #wl-body,
  #tours-body,
  #rentals-body,
  #family-body,
  #events-body,
  #checklist-settings-body,
  #wedding-detail-body{
    width:100% !important;
    max-width:none !important;
  }

  #stats{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .wedding-table{
    display:none !important;
  }

  .mobile-cards{
    display:grid !important;
    gap:14px;
  }
}

@media (max-width: 560px){
  #stats{
    grid-template-columns:1fr !important;
  }

  #weddings-actions{
    padding-bottom:14px !important;
  }

  #add-btn,
  .tasks-page-add-btn,
  #qa-page-add-btn{
    width:100% !important;
    justify-content:center !important;
  }

  .stat-item{
    padding:16px !important;
  }
}

/* ═══ Style Block 31 ═══ */
/* ───────────────────────────────────────────────────────────────────────────
   Subscribe to Calendar — button bar + modal
   ─────────────────────────────────────────────────────────────────────────── */

/* Subscribe bar (sits below the calendar grid) */
#cal-subscribe-bar {
  max-width: 1320px;
  margin: 28px auto 0;
  padding: 0 32px 8px;
  display: flex;
  justify-content: center;
}

#cal-subscribe-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: transparent;
  border: 1.5px solid #c8d8ea;
  border-radius: 999px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: #6a7d90;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}

#cal-subscribe-btn:hover,
#cal-subscribe-btn:focus-visible {
  border-color: #2F5FA7;
  color: #2F5FA7;
  background: rgba(47,95,167,0.04);
  outline: none;
}

.cal-sub-icon { font-size: 13px; }

/* Modal overlay */
#cal-sub-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20,18,16,0.56);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 24px;
  align-items: center;
  justify-content: center;
}
#cal-sub-modal-overlay.open { display: flex; }

/* Modal box */
#cal-sub-modal {
  background: #fff;
  border-radius: 18px;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 32px 90px rgba(0,0,0,0.28);
}

/* Header */
#cal-sub-modal-head {
  background: #2c2c2c;
  padding: 22px 28px;
  border-radius: 18px 18px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#cal-sub-modal-title-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 21px;
  color: #fff;
  font-weight: 400;
}

#cal-sub-modal-close {
  background: none;
  border: 1.5px solid #555;
  color: #aaa;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
#cal-sub-modal-close:hover,
#cal-sub-modal-close:focus-visible { border-color: #fff; color: #fff; outline: none; }

/* Body */
#cal-sub-modal-body { padding: 26px 28px 28px; }

.cal-sub-intro {
  font-size: 13px;
  color: #555;
  line-height: 1.65;
  margin: 0 0 20px;
}

.cal-sub-label {
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
  font-weight: 600;
  margin-bottom: 8px;
}

/* URL row */
.cal-sub-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

#cal-sub-url-input {
  flex: 1;
  min-width: 0;
  font-family: 'Jost', monospace, sans-serif;
  font-size: 11px;
  color: #333;
  background: #f2f7fd;
  border: 1.5px solid #dde8f3;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: text;
  outline: none;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 0.15s;
}
#cal-sub-url-input:focus { border-color: #2F5FA7; }

#cal-sub-copy-btn {
  flex-shrink: 0;
  padding: 9px 16px;
  background: #2c2c2c;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
#cal-sub-copy-btn:hover { background: #444; }
#cal-sub-copy-btn.copied { background: #2d6a4f; }
#cal-sub-copy-btn:focus-visible { outline: 2px solid #2F5FA7; outline-offset: 2px; }

/* Open in Apple Calendar button */
#cal-sub-webcal-btn {
  width: 100%;
  padding: 13px 20px;
  background: #1E3D6F;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#cal-sub-webcal-btn:hover { background: #2F5FA7; }
#cal-sub-webcal-btn:focus-visible { outline: 2px solid #2F5FA7; outline-offset: 2px; }

/* Divider */
.cal-sub-divider {
  border: none;
  border-top: 1px solid #e2ecf5;
  margin: 20px 0;
}

/* Instructions */
.cal-sub-steps { font-size: 12.5px; color: #555; line-height: 1.7; }

.cal-sub-steps-title {
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
  font-weight: 600;
  margin-bottom: 8px;
}

.cal-sub-steps ol {
  margin: 0 0 10px;
  padding-left: 18px;
}
.cal-sub-steps li { margin-bottom: 4px; }

.cal-sub-note {
  font-size: 11px;
  color: #999;
  font-style: italic;
  margin: 8px 0 0;
}

/* Footer (regenerate + privacy note) */
.cal-sub-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e2ecf5;
}

#cal-sub-regen-btn {
  background: none;
  border: none;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  color: #aaa;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
#cal-sub-regen-btn:hover { color: #c0392b; }
#cal-sub-regen-btn:focus-visible { outline: 2px solid #c0392b; outline-offset: 2px; }

.cal-sub-token-note {
  font-size: 10px;
  color: #bbb;
  text-align: right;
  flex: 1;
}

/* Responsive */
@media (max-width: 600px) {
  #cal-subscribe-bar { padding: 0 12px 8px; }
  #cal-sub-modal-overlay { padding: 10px; }
  #cal-sub-modal { border-radius: 14px; }
  #cal-sub-modal-head { padding: 18px 20px; border-radius: 14px 14px 0 0; }
  #cal-sub-modal-body { padding: 18px 20px 22px; }
  .cal-sub-url-row { flex-direction: column; align-items: stretch; }
  #cal-sub-copy-btn { width: 100%; text-align: center; padding: 11px 16px; }
  .cal-sub-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cal-sub-token-note { text-align: left; }
}

/* ═══ Style Block 32 ═══ */
/* ════════════════════════════════════════════════════════════════
   Legacy Lane Staff Portal — Color + UI Polish Pass (2026-03-18)
   Normalises all warm/brown/green/tan tones to the blue-based
   design system. Applied last so these declarations win cascade.
   ════════════════════════════════════════════════════════════════ */

/* ─── 1. Checklist/bridal settings page: remove green radial gradient ─── */
#checklist-settings-body,
#portal-bridal-checklist-body {
  background:
    radial-gradient(circle at top left, rgba(215, 230, 245, 0.65), transparent 32%),
    linear-gradient(180deg, #edf4fc 0%, #f3f8fd 100%) !important;
}

/* ─── 2. Auth admin overlay: warm brown + green bg → dark navy ─── */
#ll-auth-overlay {
  background:
    radial-gradient(circle at top left, rgba(215, 230, 248, 0.7), transparent 30%),
    linear-gradient(135deg, rgba(32, 44, 62, 0.94), rgba(20, 32, 48, 0.96)) !important;
}

/* ─── 3. Auth shell: transparent for mobile-style layout ─── */
.ll-auth-shell {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ─── 4. Auth head: warm cream gradient → blue-white ─── */
.ll-auth-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 249, 255, 0.97)) !important;
}

/* ─── 5. Auth text colours: warm brown tones → blue-neutral ink ─── */
.ll-auth-kicker,
.ll-admin-kicker {
  color: var(--ll-ink-subtle) !important;
}
.ll-auth-title,
.ll-admin-title {
  color: var(--ll-ink) !important;
}
.ll-auth-sub,
.ll-admin-sub {
  color: var(--ll-ink-muted) !important;
}
.ll-auth-card-head,
.ll-admin-panel-head {
  border-bottom-color: var(--ll-border) !important;
}
.ll-auth-card-title,
.ll-admin-panel-title {
  color: var(--ll-ink) !important;
}
.ll-auth-card-sub,
.ll-admin-panel-sub {
  color: var(--ll-ink-muted) !important;
}
.ll-auth-label,
.ll-admin-label {
  color: var(--ll-ink-subtle) !important;
}

/* ─── 6. Auth success status: dark green → primary blue ─── */
.ll-auth-error.success,
.ll-admin-status.success {
  color: var(--ll-primary) !important;
}

/* ─── 7. Auth secondary btn: warm brown text/hover → blue-neutral ─── */
.ll-auth-btn.secondary,
.ll-admin-btn.secondary {
  color: var(--ll-ink-muted) !important;
}
.ll-auth-btn.secondary:hover,
.ll-admin-btn.secondary:hover {
  background: var(--ll-primary-light-bg) !important;
  border-color: #b0c6da !important;
}

/* ─── 8. User card in auth: warm cream background → blue-neutral ─── */
.ll-user-card {
  background: linear-gradient(180deg, #fff 0%, #f4f8ff 100%) !important;
}
.ll-user-card::before {
  background:
    radial-gradient(circle at top right, var(--ll-card-soft, rgba(47,95,167,.12)), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 255, 0.9)) !important;
}
.ll-user-card:hover {
  box-shadow: 0 14px 24px rgba(30, 50, 80, 0.08) !important;
}
.ll-user-card.selected {
  box-shadow: 0 0 0 3px rgba(47, 95, 167, 0.22), 0 18px 30px rgba(30, 50, 80, 0.12) !important;
}
.ll-user-name,
.ll-admin-user-name {
  color: var(--ll-ink) !important;
}

/* ─── 9. Admin nav tabs: warm gold text → neutral white ─── */
#tab-admin-users,
#tab-admin-permissions {
  color: var(--ll-text) !important;
}

/* ─── 10. Mobile card expansion: warm brown text → blue-neutral ink ─── */
.card-exp-val,
.card-exp-text {
  color: var(--ll-ink) !important;
}
.card-exp-val a {
  color: var(--ll-primary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.card-exp-section {
  border-top-color: var(--ll-border) !important;
}

/* ─── 11. Upload text: warm brown → muted ink ─── */
.upload-text {
  color: var(--ll-ink-muted) !important;
}

/* ─── 12. Calendar chips: color-coded per event type ─── */
.cal-rental-chip {
  background: var(--cal-rental) !important;
  border-left-color: var(--cal-rental-accent) !important;
}
.cal-rental-chip:hover {
  background: var(--cal-rental-hover) !important;
}
.cal-family-chip {
  background: var(--cal-family) !important;
  border-left-color: var(--cal-family-accent) !important;
}
.cal-family-chip:hover {
  background: var(--cal-family-hover) !important;
}
.cal-event-chip {
  background: var(--cal-event) !important;
  border-left-color: var(--cal-event-accent) !important;
}
.cal-event-chip:hover {
  background: var(--cal-event-hover) !important;
}
.cal-list-item-rental {
  border-left-color: var(--cal-rental) !important;
}
.cal-list-item-rental .cal-list-badge {
  background: var(--cal-rental) !important;
  border-color: var(--cal-rental) !important;
}

/* ─── 13. Calendar filter chip active: color-coded per event type ─── */
.cal-filter-chip.active[data-filter="weddings"]{ background: var(--cal-wedding) !important; border-color: var(--cal-wedding) !important; color:#fff !important; }
.cal-filter-chip.active[data-filter="tours"]{ background: var(--cal-tour) !important; border-color: var(--cal-tour) !important; color:#fff !important; }
.cal-filter-chip.active[data-filter="rentals"]{ background: var(--cal-rental) !important; border-color: var(--cal-rental) !important; color:#fff !important; }
.cal-filter-chip.active[data-filter="family"]{ background: var(--cal-family) !important; border-color: var(--cal-family) !important; color:#fff !important; }
.cal-filter-chip.active[data-filter="events"]{ background: var(--cal-event) !important; border-color: var(--cal-event) !important; color:#fff !important; }
.cal-filter-chip.active[data-filter="meetings"]{ background: var(--cal-meeting) !important; border-color: var(--cal-meeting) !important; color:#fff !important; }

/* ─── 14. Task completion toggle: green → primary blue ─── */
.task-item.is-complete .task-toggle {
  background: var(--ll-primary) !important;
  border-color: var(--ll-primary) !important;
  color: #fff !important;
}

/* ─── 15. Task badge + avatar/badge "gary": dark green → blue ─── */
.task-badge.gary {
  background: #e6eef8 !important;
  color: #3d6b9e !important;
}
.wl-log-avatar.gary,
.wl-avatar-circle.gary {
  background: #3d6b9e !important;
}
.wl-recent-badge.gary {
  background: #e6eef8 !important;
  color: #3d6b9e !important;
}
.wl-avatar-btn.selected.gary .wl-avatar-circle {
  box-shadow: 0 0 0 3px #3d6b9e, 0 4px 14px rgba(61, 107, 158, 0.3) !important;
}
.qa-askedby-badge.gary {
  background: #e6eef8 !important;
  color: #3d6b9e !important;
}

/* ─── 16. Submit/save success text: green → primary blue ─── */
#tasks-submit-status.success,
#wl-submit-status.success {
  color: var(--ll-primary) !important;
}

/* ─── 17. Calendar detail check icon: green → primary ─── */
.cal-detail-check .ck {
  color: var(--ll-primary) !important;
}

/* ─── 18. Q&A card "Answered" status: green → blue ─── */
.qa-card-status.answered {
  background: var(--ll-primary-light-bg) !important;
  color: var(--ll-primary) !important;
  border-color: var(--ll-primary-light) !important;
}

/* ─── 19. Expense checklist "done" icon: green → primary blue ─── */
.exp-check-item.done .exp-check-icon {
  background: var(--ll-primary) !important;
  color: #fff !important;
}

/* ─── 20. Checklist admin inline warn/error: blue (confusing) → danger ─── */
.checklist-admin-inline-btn.warn {
  color: var(--ll-danger) !important;
}
.checklist-admin-status.is-error {
  color: var(--ll-danger) !important;
}

/* ─── 21. Wedding detail page success notes (.ll-success tokens) ─── */
#ll-design-system-v2 .clx-task-item.done .icon,
.clx-task-item.done .icon {
  color: var(--ll-primary) !important;
}

/* ─── 22. Focus ring: consistent blue everywhere ─── */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2.5px solid var(--ll-border-focus) !important;
  outline-offset: 2px !important;
}
.nav-tab:focus-visible,
.cal-filter-chip:focus-visible {
  outline: 2.5px solid var(--ll-border-focus) !important;
  outline-offset: 2px !important;
}

/* ─── 23. Mobile: improve touch target sizes for action buttons ─── */
@media (max-width: 900px) {
  .wl-nav-btn,
  .wl-log-edit-btn,
  .tour-log-edit-btn,
  .tour-log-del-btn,
  .qa-edit-btn,
  .qa-delete-btn {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .card-exp-section {
    padding: 14px 16px !important;
  }

  .wl-history-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .wl-history-left {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ─── 24. Auth admin card head: remove warm beige border ─── */
.ll-auth-card-head {
  background: linear-gradient(180deg, #f4f9ff 0%, #eef4fb 100%) !important;
  border-bottom-color: var(--ll-border) !important;
}
.ll-admin-panel-head {
  background: linear-gradient(180deg, #f4f9ff 0%, #eef4fb 100%) !important;
  border-bottom-color: var(--ll-border) !important;
}

/* ─── 25. Normalise ll-auth-card / ll-admin-panel box-shadow ─── */
.ll-auth-card,
.ll-admin-panel {
  box-shadow: 0 18px 34px rgba(30, 50, 80, 0.06) !important;
}

/* ─── 26. Done/complete check icons: --ll-success green → primary blue ─── */
.checklist-item.done .check-icon,
.card-check-item.done .card-check-icon,
.cal-detail-check.done .ck,
.clx-task-item.done .icon {
  color: var(--ll-primary) !important;
}
.wdetail-task-item.done .wdetail-task-check {
  background: var(--ll-primary) !important;
  border-color: var(--ll-primary) !important;
  color: #fff !important;
}

/* ─── 27. Status success messages: green → primary blue ─── */
#tour-submit-status.success,
.checklist-admin-status.is-success {
  color: var(--ll-primary) !important;
}

/* ─── 28. Tour upcoming badge: dark green → blue ─── */
.tour-upcoming-badge {
  background: var(--ll-primary-light-bg) !important;
  color: var(--ll-primary) !important;
}

/* ─── 29. Update --ll-success token so var() references cascade correctly ─── */
:root {
  --ll-success: var(--ll-primary);
  --ll-success-bg: var(--ll-primary-light-bg);
}

/* ═══ Style Block 33 ═══ */
/* ── Hamburger button: hidden on desktop, shown on mobile ── */
#mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 10px;
  color: #243244;
  cursor: pointer;
  padding: 0;
  transition: background 0.14s;
  z-index: 2;
  position: relative;
}

#mobile-menu-btn:hover {
  background: rgba(201, 212, 225, 0.5);
}

/* ── Mobile nav drawer: hidden by default ── */
#mobile-nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
}

#mobile-nav-drawer.open {
  display: block;
}

#mobile-nav-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 48, 0.46);
  animation: mndFadeIn 0.2s ease;
}

#mobile-nav-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(290px, 84vw);
  background: #fff;
  box-shadow: 14px 0 44px rgba(40, 55, 80, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mndSlideIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mndFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mndSlideIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

#mobile-nav-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 14px 18px;
  border-bottom: 1px solid rgba(201, 212, 225, 0.8);
  flex-shrink: 0;
}

#mobile-nav-drawer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 15px;
  font-weight: 600;
  color: #243244;
  letter-spacing: 0.01em;
}

#mobile-nav-drawer-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: contain;
  display: none;
  flex-shrink: 0;
}

#mobile-nav-drawer-close {
  width: 34px;
  height: 34px;
  border: none;
  background: rgba(220, 228, 238, 0.6);
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #627287;
  flex-shrink: 0;
  line-height: 1;
  transition: background 0.14s;
}

#mobile-nav-drawer-close:hover {
  background: rgba(201, 212, 225, 0.9);
}

#mobile-nav-drawer-list {
  overflow-y: auto;
  flex: 1;
  padding: 10px 10px 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-drawer-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: none;
  border: none;
  border-radius: 12px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: #243244;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Jost', 'Helvetica Neue', sans-serif;
  letter-spacing: 0.01em;
  transition: background 0.13s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-drawer-btn:hover,
.mobile-nav-drawer-btn.mnd-active {
  background: rgba(220, 228, 238, 0.7);
}

.mobile-nav-drawer-btn.mnd-active {
  color: var(--ll-primary, #60758f);
  font-weight: 600;
}

.mobile-nav-drawer-ico {
  font-size: 17px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Mobile-only overrides ── */
@media (max-width: 768px) {

  /* Show hamburger */
  #mobile-menu-btn {
    display: flex !important;
  }

  /* 3-column header layout */
  #header {
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    padding: 10px 12px !important;
    min-height: unset !important;
  }

  #header::after {
    display: none !important;
  }

  #header-inner {
    max-width: none !important;
  }

  #header-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
    gap: 0 !important;
    min-height: 44px;
  }

  /* Centered logo — absolute so it doesn't push left/right items */
  #logo-block {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    padding-right: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    pointer-events: none;
  }

  #logo-text-sub,
  #logo-text-portal {
    display: none !important;
  }

  #logo-text-name {
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    color: #243244 !important;
    font-weight: 600 !important;
    white-space: nowrap;
  }

  #logo-img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
  }

  /* User avatar to the right */
  .ll-header-user {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 2;
    flex-shrink: 0;
    align-self: center;
  }

  /* Hide mobile page picker card — replaced by drawer */
  #mobile-page-picker-wrap {
    display: none !important;
  }
}

/* ═══ Style Block 34 ═══ */
/* Legacy mobile font cap disabled to preserve source structure without shrinking core UI text. */
@media not all {

  /* Calendar headings */
  #cal-month-label { font-size: 12px !important; min-width: 0 !important; }
  .cal-list-couple { font-size: 12px !important; }
  .cal-mobile-empty-title { font-size: 12px !important; }
  #cal-detail-couple { font-size: 12px !important; }

  /* Tasks headings */
  .tasks-card-title,
  .tasks-list-title { font-size: 12px !important; }
  .tasks-summary-num { font-size: 12px !important; }
  .task-title { font-size: 12px !important; }

  /* Modal titles */
  #modal-title { font-size: 12px !important; }
  #qa-modal-title { font-size: 12px !important; }
  #tour-modal-title { font-size: 12px !important; }
  #meeting-modal-title { font-size: 12px !important; }
  #stay-modal-title { font-size: 12px !important; }

  /* Section/form titles */
  .wl-form-title { font-size: 12px !important; }
  .stay-page-title { font-size: 12px !important; }
  .wl-hist-heading { font-size: 12px !important; }

  /* Wedding cards */
  .card-couple { font-size: 12px !important; }
  #f-couple { font-size: 12px !important; }
  .couple-name { font-size: 12px !important; }

  /* Tour / meeting log summary */
  .tour-log-summary-date { font-size: 12px !important; }
  .tour-log-summary-name { font-size: 12px !important; }
  .meeting-log-summary-date { font-size: 12px !important; }
  .meeting-log-summary-name { font-size: 12px !important; }

  /* Work log */
  .wl-log-name { font-size: 12px !important; }
  .wl-avatar-circle { font-size: 11px !important; }

  /* Stays */
  .stay-card-name { font-size: 12px !important; }
  .stay-empty-title { font-size: 12px !important; }

  /* File viewer */
  .fv-filename { font-size: 12px !important; }

  /* Card expansion panels */
  .card-exp-val,
  .card-exp-text { font-size: 12px !important; }
  .card-exp-empty { font-size: 12px !important; }

  /* Logo */
  #logo-text-name { font-size: 12px !important; }

  /* Wedding detail */
  .wdetail-hero-title { font-size: 12px !important; }
  .wdetail-field-value,
  .wdetail-notes { font-size: 12px !important; }

  /* Tours/meetings empty message */
  .tours-empty-msg,
  .meetings-empty-msg { font-size: 12px !important; }

  /* Nav icons — shrink to reduce nav bar height */
  .nav-ico { font-size: 14px !important; }
}

/* ═══════════════════════════════════════════════════════
   STOCK CHECKLISTS
   ═══════════════════════════════════════════════════════ */

/* Page backgrounds */
body.page-stock-checklists #header,
body.page-stock-checklist-editor #header,
body.page-stock-checklist-detail #header,
body.page-stock-checklist-template #header {
  background: linear-gradient(180deg, rgba(31, 63, 110, 0.96) 0%, rgba(22, 45, 78, 0.98) 100%);
  border-bottom-color: rgba(188, 208, 238, 0.38);
}

#sc-index-body,
#sc-detail-body,
#sc-template-body {
  background:
    radial-gradient(circle at top left, rgba(219, 226, 206, 0.65), transparent 32%),
    linear-gradient(180deg, #edf4fc 0%, #f3f8fd 100%);
  min-height: calc(100vh - 150px);
}

#sc-editor-body {
  background: linear-gradient(180deg, #edf4fc 0%, #f3f8fd 100%);
  min-height: calc(100vh - 150px);
}

/* Index: Stats row */
.sc-stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sc-stat-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #c8d8ec;
  border-radius: 14px;
  padding: 16px 20px;
  min-width: 120px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(30, 50, 80, 0.04);
}

.sc-stat-num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  color: #1a2232;
  line-height: 1;
}

.sc-stat-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #627287;
  font-weight: 600;
  margin-top: 4px;
}

/* Index: Toolbar */
.sc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sc-filter-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #c8d8ec;
  border-radius: 12px;
  padding: 3px;
}

.sc-filter-tab {
  border: none;
  background: transparent;
  color: #627287;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}

.sc-filter-tab:hover {
  background: rgba(47, 95, 167, 0.08);
}

.sc-filter-tab.active {
  background: #2f5fa7;
  color: #fff;
}

.sc-new-btn {
  padding: 11px 22px !important;
  font-size: 11px !important;
}

/* Index: List */
.sc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #c8d8ec;
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
  box-shadow: 0 4px 12px rgba(30, 50, 80, 0.04);
}

.sc-card:hover {
  border-color: #a0bce0;
  box-shadow: 0 8px 24px rgba(30, 50, 80, 0.08);
  transform: translateY(-1px);
}

.sc-card-left {
  flex: 1;
  min-width: 0;
}

.sc-card-date {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
  color: #1a2232;
  font-weight: 500;
  line-height: 1.2;
}

.sc-card-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
  flex-wrap: wrap;
}

.sc-card-meta-item {
  font-size: 11px;
  color: #627287;
}

.sc-card-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sc-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.sc-badge-draft {
  background: #fef3e2;
  color: #8a6a2a;
  border: 1px solid #e8d4a0;
}

.sc-badge-completed {
  background: var(--staff-success-soft);
  color: var(--staff-success);
  border: 1px solid var(--staff-success-border);
}

.sc-card-progress {
  width: 54px;
  height: 54px;
  position: relative;
}

.sc-card-progress svg {
  width: 54px;
  height: 54px;
  transform: rotate(-90deg);
}

.sc-card-progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #1a2232;
}

.sc-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.sc-card-action {
  border: 1px solid #c8d8ec;
  background: #fff;
  color: #546278;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}

.sc-card-action:hover {
  background: #f0f4fa;
  border-color: #a0bce0;
}

.sc-card-action.primary {
  background: #2f5fa7;
  color: #fff;
  border-color: #2f5fa7;
}

.sc-card-action.primary:hover {
  filter: brightness(1.08);
}
.sc-card-action.danger {
  background: #d9534f;
  color: #fff;
  border-color: #d9534f;
}
.sc-card-action.danger:hover {
  filter: brightness(1.08);
}

.sc-empty {
  padding: 40px 20px;
  text-align: center;
  color: #7a8ea4;
  border: 1px dashed #cfd8e8;
  border-radius: 16px;
  background: rgba(245, 249, 254, 0.8);
}

.sc-empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.sc-empty-msg {
  font-size: 14px;
  font-weight: 600;
  color: #546278;
}

.sc-empty-sub {
  font-size: 12px;
  margin-top: 4px;
}

/* ── Editor ── */

.sc-editor-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

.sc-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, #edf4fc 0%, rgba(237, 244, 252, 0.96) 100%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(200, 216, 236, 0.6);
  margin-bottom: 16px;
}

.sc-editor-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sc-editor-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sc-back-btn {
  border: 1px solid #c8d8ec;
  background: #fff;
  color: #546278;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: background 0.15s;
}

.sc-back-btn:hover {
  background: #f0f4fa;
}

.sc-editor-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  color: #1a2232;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-save-indicator {
  font-size: 11px;
  color: #627287;
  white-space: nowrap;
}

.sc-save-indicator.saving {
  color: #8a6a2a;
}

.sc-save-indicator.saved {
  color: #4a7a4e;
}

.sc-save-indicator.error {
  color: var(--staff-danger);
}

/* Progress bar */
.sc-editor-progress {
  margin-bottom: 16px;
}

.sc-progress-bar-outer {
  width: 100%;
  height: 6px;
  background: #dce8f4;
  border-radius: 3px;
  overflow: hidden;
}

.sc-progress-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, #2f5fa7, #4a7a4e);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.sc-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #627287;
  margin-top: 4px;
  letter-spacing: 0.06em;
}

/* Steps nav */
.sc-editor-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.sc-step-btn {
  border: 1px solid #c8d8ec;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 247, 252, 0.98) 100%);
  color: #32465f;
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  line-height: 1.35;
  box-shadow: 0 8px 20px rgba(30, 50, 80, 0.05);
}

.sc-step-btn__index {
  flex: 0 0 auto;
  min-width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #e7f0fb;
  color: #2f5fa7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sc-step-btn__label {
  flex: 1 1 auto;
  display: block;
  min-width: 0;
  align-self: center;
  padding-right: 18px;
  overflow-wrap: anywhere;
}

.sc-step-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #edf4fb 100%);
  border-color: #aac4e0;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(30, 50, 80, 0.09);
}

.sc-step-btn:focus-visible {
  outline: none;
  border-color: #2f5fa7;
  box-shadow: 0 0 0 3px rgba(47, 95, 167, 0.16);
}

.sc-step-btn.active {
  background: linear-gradient(135deg, #2f5fa7 0%, #3f73b5 100%);
  color: #fff;
  border-color: #2f5fa7;
  box-shadow: 0 14px 28px rgba(47, 95, 167, 0.24);
}

.sc-step-btn.active .sc-step-btn__index {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.sc-step-btn.has-data::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 9px;
  height: 9px;
  background: #4a7a4e;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(74, 122, 78, 0.12);
}

.sc-step-btn.active.has-data::after {
  background: #a0e0a0;
  border-color: rgba(47, 95, 167, 0.5);
  box-shadow: none;
}

/* Hide mobile compact stepper on desktop */
.sc-step-compact-bar,
.sc-step-compact-progress,
.sc-step-dropdown {
  display: none;
}

/* Section content */
.sc-section-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #c8d8ec;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(30, 50, 80, 0.04);
}

.sc-section-header {
  padding: 20px 22px 16px;
  border-bottom: 1px solid #dceaf7;
  background: linear-gradient(180deg, #f8fcff 0%, #e8f2fc 100%);
}

.sc-section-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  color: #1a2232;
  font-weight: 500;
}

.sc-section-subtitle {
  font-size: 12px;
  color: #627287;
  margin-top: 4px;
}

.sc-section-body {
  padding: 16px 18px 20px;
}

/* Grouped navigation hubs */
.staff-hub-shell{
  max-width:1300px;
  margin:0 auto 24px;
  padding:28px 48px 0;
}
.staff-hub-shell__panel{
  border:1px solid #d7e2ee;
  border-radius:24px;
  padding:24px 26px 22px;
  box-shadow:0 16px 36px rgba(23,34,46,0.08);
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,0.96) 0%, rgba(247,250,254,0.98) 100%);
}
.staff-hub-shell__panel::after{
  content:"";
  position:absolute;
  inset:auto -40px -48px auto;
  width:180px;
  height:180px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 72%);
  pointer-events:none;
}
.staff-hub-shell--schedule .staff-hub-shell__panel{
  background:
    radial-gradient(circle at top right, rgba(72,150,176,0.22) 0%, rgba(72,150,176,0) 42%),
    linear-gradient(160deg, #f8fcff 0%, #eef7fb 100%);
  border-color:#cfe0ea;
}
.staff-hub-shell--couple .staff-hub-shell__panel{
  background:
    radial-gradient(circle at top right, rgba(180,122,122,0.18) 0%, rgba(180,122,122,0) 42%),
    linear-gradient(160deg, #fffaf9 0%, #fdf2f0 100%);
  border-color:#ead8d4;
}
.staff-hub-shell--settings .staff-hub-shell__panel{
  background:
    radial-gradient(circle at top right, rgba(183,144,89,0.16) 0%, rgba(183,144,89,0) 40%),
    linear-gradient(160deg, #fffdf8 0%, #f8f4ea 100%);
  border-color:#e7dcc4;
}
.staff-hub-shell__eyebrow{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#607185;
  margin-bottom:10px;
}
.staff-hub-shell__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.staff-hub-shell__copy{
  min-width:0;
}
.staff-hub-shell__title-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.staff-hub-shell__title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:34px;
  line-height:1;
  color:#243142;
  letter-spacing:0.01em;
}
.staff-hub-shell__sub{
  margin-top:10px;
  max-width:760px;
  font-size:14px;
  line-height:1.6;
  color:#5e6d80;
}
.staff-hub-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.staff-hub-tab{
  border:1px solid #ced9e6;
  background:rgba(255,255,255,0.82);
  color:#556679;
  border-radius:999px;
  padding:10px 16px;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.staff-hub-tab:hover{
  transform:translateY(-1px);
  color:#223044;
  border-color:#aebed0;
  box-shadow:0 10px 20px rgba(30,43,59,0.08);
}
.staff-hub-tab.is-active{
  color:#fff;
  border-color:transparent;
  box-shadow:0 14px 28px rgba(30,43,59,0.14);
}
.staff-hub-shell--schedule .staff-hub-tab.is-active{
  background:linear-gradient(135deg, #1e7385 0%, #2d98ae 100%);
}
.staff-hub-shell--couple .staff-hub-tab.is-active{
  background:linear-gradient(135deg, #8b4c59 0%, #b96577 100%);
}
.staff-hub-shell--settings .staff-hub-tab.is-active{
  background:linear-gradient(135deg, #8a6a34 0%, #bb9556 100%);
}
.staff-hub-shell--payments .staff-hub-tab.is-active{
  background:linear-gradient(135deg, var(--staff-primary) 0%, var(--staff-primary-strong) 100%);
}

#tab-tours .nav-label,
#tab-couple-management .nav-label,
#tab-site-settings .nav-label{
  white-space:normal;
  line-height:1.2;
  text-align:center;
}

@media (max-width: 900px){
  .staff-hub-shell{
    padding:22px 20px 0;
    margin-bottom:20px;
  }
  .staff-hub-shell__panel{
    padding:20px 18px 18px;
    border-radius:20px;
  }
  .staff-hub-shell__title{
    font-size:28px;
  }
}

@media (max-width: 640px){
  .staff-hub-shell{
    padding:18px 12px 0;
  }
  .staff-hub-shell__title{
    font-size:24px;
  }
  .staff-hub-shell__sub{
    font-size:13px;
  }
  .staff-hub-tabs{
    gap:6px;
    flex-wrap:wrap;
  }
  .staff-hub-tab{
    padding:8px 12px;
    font-size:9px;
    letter-spacing:0.08em;
  }
}

.sc-section-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Grid: property grid mode */
.sc-grid-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.sc-grid-table th {
  position: sticky;
  top: 0;
  background: #f0f5fc;
  padding: 10px 6px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #546278;
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid #dce8f4;
  white-space: nowrap;
}

.sc-grid-table th:first-child {
  text-align: left;
  padding-left: 12px;
  min-width: 160px;
}

.sc-grid-table td {
  padding: 6px;
  border-bottom: 1px solid #eef3fa;
  vertical-align: middle;
}

.sc-grid-table td:first-child {
  padding-left: 12px;
  font-size: 13px;
  color: #1a2232;
  font-weight: 500;
}

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

.sc-grid-table tr:hover td {
  background: rgba(47, 95, 167, 0.02);
}

/* Status pills */
.sc-pill-group {
  display: flex;
  justify-content: center;
  gap: 2px;
}

.sc-pill {
  border: 1.5px solid #d0dae8;
  background: #fff;
  color: #8a98aa;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
  text-transform: uppercase;
  min-width: 32px;
  text-align: center;
}

.sc-pill:hover {
  border-color: #a0bce0;
  background: #f5f9ff;
}

.sc-pill.ok {
  background: #e8f5e8;
  color: #2d6a2d;
  border-color: #a0d0a0;
}

.sc-pill.low {
  background: var(--staff-warning-soft);
  color: var(--staff-warning);
  border-color: var(--staff-warning-border);
}

.sc-pill.missing {
  background: var(--staff-danger-soft);
  color: var(--staff-danger);
  border-color: var(--staff-danger-border);
}

/* Item note toggle */
.sc-item-note-btn {
  border: none;
  background: transparent;
  color: #b0bcc8;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
}

.sc-item-note-btn:hover,
.sc-item-note-btn.has-note {
  color: #2f5fa7;
}

.sc-item-note-input {
  width: 100%;
  border: 1px solid #d0dae8;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  background: #fafcff;
  color: #222;
  margin-top: 4px;
  outline: none;
}

.sc-item-note-input:focus {
  border-color: #2f5fa7;
  background: #fff;
}

/* Single location mode (no grid) */
.sc-single-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc-single-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #eef3fa;
  border-radius: 12px;
  background: #fafcff;
  transition: background 0.1s;
}

.sc-single-item:hover {
  background: #f0f5fc;
}

.sc-single-item-name {
  flex: 1;
  font-size: 13px;
  color: #1a2232;
  font-weight: 500;
  min-width: 0;
}

.sc-single-item-pills {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

/* Section notes */
.sc-section-notes {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #dceaf7;
}

.sc-section-notes-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #627287;
  font-weight: 700;
  margin-bottom: 6px;
}

.sc-section-notes-input {
  width: 100%;
  border: 1.5px solid #c8d8ec;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-family: inherit;
  background: #f5f9ff;
  color: #222;
  min-height: 60px;
  resize: vertical;
  outline: none;
}

.sc-section-notes-input:focus {
  border-color: #2f5fa7;
  background: #fff;
}

/* Editor navigation */
.sc-editor-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(200, 216, 236, 0.5);
}

.sc-nav-btn {
  border: 1px solid #c8d8ec;
  background: #fff;
  color: #546278;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}

.sc-nav-btn:hover {
  background: #f0f4fa;
  border-color: #a0bce0;
}

.sc-nav-btn.primary {
  background: #2f5fa7;
  color: #fff;
  border-color: #2f5fa7;
}

.sc-nav-btn.primary:hover {
  filter: brightness(1.08);
}

.sc-nav-btn.complete {
  background: var(--staff-success);
  color: #fff;
  border-color: var(--staff-success);
}

.sc-nav-btn.complete:hover {
  filter: brightness(1.1);
}

/* Overview step */
.sc-overview-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #c8d8ec;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(30, 50, 80, 0.04);
}

.sc-location-step-card {
  margin-bottom: 18px;
}

.sc-overview-field {
  margin-bottom: 16px;
}

.sc-overview-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #627287;
  font-weight: 700;
  margin-bottom: 6px;
}

.sc-overview-value {
  font-size: 14px;
  color: #1a2232;
  line-height: 1.5;
}

.sc-overview-sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.sc-overview-section-card {
  border: 1px solid #dce8f4;
  border-radius: 12px;
  padding: 14px;
  background: #f8fcff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sc-overview-section-name {
  font-size: 13px;
  color: #1a2232;
  font-weight: 500;
  flex: 1;
}

.sc-overview-section-count {
  font-size: 11px;
  color: #627287;
  white-space: nowrap;
}

/* Review step */
.sc-review-section {
  margin-bottom: 20px;
}

.sc-review-section-title {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #627287;
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #dceaf7;
}

.sc-review-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
}

.sc-review-item-name {
  color: #1a2232;
  font-weight: 500;
  flex: 1;
}

.sc-review-item-location {
  color: #627287;
  font-size: 11px;
}

.sc-review-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sc-review-dot.ok { background: var(--staff-success); }
.sc-review-dot.low { background: var(--staff-warning); }
.sc-review-dot.missing { background: var(--staff-danger); }

.sc-review-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.sc-review-summary-card {
  background: #fff;
  border: 1px solid #dce8f4;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.sc-review-summary-num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.sc-review-summary-num.ok { color: var(--staff-success); }
.sc-review-summary-num.low { color: var(--staff-warning); }
.sc-review-summary-num.missing { color: var(--staff-danger); }

.sc-review-summary-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #627287;
  font-weight: 600;
  margin-top: 4px;
}

/* Detail page */
.sc-detail-hero {
  margin-bottom: 24px;
}

.sc-detail-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px;
  color: #1a2232;
  font-weight: 500;
}

.sc-detail-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}

.sc-detail-meta-item {
  font-size: 12px;
  color: #627287;
}

.sc-detail-back {
  margin-bottom: 16px;
}

.sc-detail-section-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #c8d8ec;
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(30, 50, 80, 0.04);
}

.sc-detail-section-head {
  padding: 16px 20px;
  border-bottom: 1px solid #dceaf7;
  background: linear-gradient(180deg, #f8fcff 0%, #e8f2fc 100%);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  color: #1a2232;
  font-weight: 500;
}

.sc-detail-section-body {
  padding: 14px 18px;
}

.sc-detail-notes {
  margin-top: 20px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #c8d8ec;
  border-radius: 16px;
}

.sc-detail-notes-title {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #627287;
  font-weight: 700;
  margin-bottom: 8px;
}

.sc-detail-notes-text {
  font-size: 13px;
  color: #1a2232;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Responsive */
/* ── Toolbar right group ── */
.sc-toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════
   STOCK CHECKLIST — RESPONSIVE (tablet)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Index cards: stack vertically */
  .sc-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .sc-card-right {
    width: 100%;
    justify-content: space-between;
  }
  .sc-card-actions {
    gap: 8px;
  }
  .sc-card-action {
    padding: 10px 16px;
    font-size: 11px;
  }

  /* Editor topbar: allow wrapping */
  .sc-editor-topbar {
    flex-wrap: wrap;
  }

  /* Review summary: stack */
  .sc-review-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Grid table: slightly smaller on tablet */
  .sc-grid-table {
    font-size: 12px;
  }
  .sc-grid-table th,
  .sc-grid-table td {
    padding: 6px 4px;
  }
  .sc-pill {
    padding: 6px 8px;
    font-size: 9px;
    min-width: 30px;
  }
}

/* ═══════════════════════════════════════════════════════
   STOCK CHECKLIST — RESPONSIVE (mobile)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Editor shell ── */
  .sc-editor-shell {
    padding: 0 8px 80px;
  }

  /* ── Editor topbar: stack into rows ── */
  .sc-editor-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 0;
  }
  .sc-editor-topbar-left {
    gap: 8px;
  }
  .sc-editor-title {
    font-size: 15px;
  }
  .sc-editor-topbar-right {
    display: flex;
    justify-content: stretch;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .sc-editor-topbar-right .checklist-admin-btn {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    font-size: 11px;
  }
  .sc-save-indicator {
    display: none;
  }
  .sc-back-btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  /* ── Step nav: compact bar + dropdown on mobile ── */
  .sc-editor-steps {
    display: block;
    margin-bottom: 16px;
  }
  .sc-step-btn {
    display: none;
  }

  /* Compact bar */
  .sc-step-compact-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
    background: linear-gradient(135deg, #2f5fa7 0%, #3f73b5 100%);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
    box-shadow: 0 8px 20px rgba(47, 95, 167, 0.18);
  }
  .sc-step-compact-bar:active {
    box-shadow: 0 4px 12px rgba(47, 95, 167, 0.24);
  }
  .sc-step-compact-bar__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .sc-step-compact-bar__index {
    flex: 0 0 auto;
    min-width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .sc-step-compact-bar__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .sc-step-compact-bar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
  }
  .sc-step-compact-bar__count {
    font-size: 12px;
    opacity: 0.75;
    font-weight: 500;
  }
  .sc-step-compact-bar__chevron {
    font-size: 10px;
    transition: transform 0.2s ease;
  }
  .sc-step-compact-bar[aria-expanded="true"] .sc-step-compact-bar__chevron {
    transform: rotate(180deg);
  }

  /* Progress bar */
  .sc-step-compact-progress {
    display: block;
    height: 4px;
    background: #e2ebf5;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
  }
  .sc-step-compact-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, #2f5fa7, #5a9fd4);
    border-radius: 2px;
    transition: width 0.3s ease;
  }

  /* Dropdown list */
  .sc-step-dropdown {
    display: block;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #c8d8ec;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(30, 50, 80, 0.12);
    overflow: hidden;
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sc-step-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-bottom: 1px solid #eef3f9;
    background: transparent;
    color: #32465f;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease;
  }
  .sc-step-dropdown__item:last-child {
    border-bottom: none;
  }
  .sc-step-dropdown__item:active {
    background: #f0f5fb;
  }
  .sc-step-dropdown__item.active {
    background: linear-gradient(135deg, #2f5fa7 0%, #3f73b5 100%);
    color: #fff;
  }
  .sc-step-dropdown__num {
    min-width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #e7f0fb;
    color: #2f5fa7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    flex-shrink: 0;
  }
  .sc-step-dropdown__item.active .sc-step-dropdown__num {
    background: rgba(255,255,255,0.18);
    color: #fff;
  }
  .sc-step-dropdown__name {
    flex: 1;
    min-width: 0;
  }
  .sc-step-dropdown__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4a7a4e;
    flex-shrink: 0;
  }
  .sc-step-dropdown__item.active .sc-step-dropdown__dot {
    background: #a0e0a0;
  }

  /* ── Section card ── */
  .sc-section-header {
    padding: 14px 14px 12px;
  }
  .sc-section-title {
    font-size: 20px;
  }
  .sc-section-body {
    padding: 8px 0 16px;
  }

  /* ── Toolbar: stack ── */
  .sc-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .sc-toolbar-right {
    width: 100%;
    display: flex;
  }
  .sc-toolbar-right .checklist-admin-btn {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
  }
  .sc-filter-tabs {
    width: 100%;
    justify-content: stretch;
  }
  .sc-filter-tab {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    font-size: 11px;
  }
  .sc-new-btn {
    width: 100%;
  }

  /* ── Index cards: bigger touch targets ── */
  .sc-card {
    padding: 14px;
  }
  .sc-card-actions {
    gap: 8px;
    width: 100%;
  }
  .sc-card-action {
    flex: 1;
    text-align: center;
    padding: 12px 10px;
    font-size: 11px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── GRID TABLE → STACKED CARD LAYOUT ──
     Instead of horizontal scrolling, each item becomes a card
     with locations listed vertically beneath. */
  .sc-grid-scroll {
    overflow-x: visible;
  }
  .sc-grid-table {
    display: block;
    font-size: 14px;
  }
  .sc-grid-table thead {
    display: none;
  }
  .sc-grid-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sc-grid-table tr {
    display: block;
    background: #f8fbff;
    border: 1px solid #dce8f4;
    border-radius: 14px;
    padding: 12px;
  }
  .sc-grid-table tr:hover td {
    background: transparent;
  }
  /* Note rows */
  .sc-grid-table tr[id^="sc-note-row-"] {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 4px 0;
    margin-top: -6px;
  }
  .sc-grid-table tr[id^="sc-note-row-"] td {
    padding: 4px 0 !important;
  }
  /* Item name cell */
  .sc-grid-table td:first-child {
    display: block;
    padding: 0 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a2232;
    border-bottom: 1px solid #e4ecf5;
    margin-bottom: 8px;
  }
  /* Location cells */
  .sc-grid-table td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #eef3fa;
  }
  .sc-grid-table td[data-label]:last-child {
    border-bottom: none;
  }
  .sc-grid-table td[data-label]::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: #546278;
    flex-shrink: 0;
    margin-right: 12px;
  }

  /* ── Pills: large touch targets ── */
  .sc-pill {
    padding: 10px 14px;
    font-size: 12px;
    min-width: 44px;
    min-height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sc-pill-group {
    gap: 6px;
  }

  /* ── Single-location items: bigger ── */
  .sc-single-item {
    padding: 12px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .sc-single-item-name {
    font-size: 14px;
    width: 100%;
  }
  .sc-single-item-pills {
    width: 100%;
    gap: 6px;
  }
  .sc-single-item-pills .sc-pill {
    flex: 1;
  }

  /* ── Note inputs ── */
  .sc-item-note-btn {
    font-size: 18px;
    padding: 4px 8px;
    min-width: 32px;
    min-height: 32px;
  }
  .sc-item-note-input {
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 10px;
  }

  /* ── Section notes ── */
  .sc-section-notes {
    margin-top: 16px;
    padding: 16px 12px 0;
  }
  .sc-section-notes-input {
    padding: 12px 14px;
    font-size: 14px;
    min-height: 70px;
  }

  /* ── Nav buttons ── */
  .sc-editor-nav {
    gap: 8px;
    margin-top: 16px;
    padding: 12px 0 0;
  }
  .sc-nav-btn {
    flex: 1;
    text-align: center;
    padding: 14px 12px;
    font-size: 12px;
    min-height: 48px;
    border-radius: 14px;
  }

  /* ── Overview ── */
  .sc-overview-sections {
    grid-template-columns: 1fr;
  }
  .sc-location-step-card {
    display: none;
  }
  .sc-overview-card {
    padding: 18px 14px;
  }
  .sc-overview-section-card {
    padding: 12px;
  }

  /* ── Review ── */
  .sc-review-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .sc-review-summary-card {
    padding: 12px 8px;
  }
  .sc-review-summary-num {
    font-size: 24px;
  }

  /* ── Detail page ── */
  .sc-detail-title {
    font-size: 24px;
  }
  .sc-detail-section-body {
    padding: 10px 12px;
  }
  .sc-detail-actions {
    flex-direction: column;
  }
  .sc-detail-action-btn {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    font-size: 12px;
    min-height: 44px;
  }

  /* ── Stat cards ── */
  .sc-stats-row {
    gap: 8px;
  }
  .sc-stat-card {
    flex: 1;
    min-width: 0;
    padding: 12px 8px;
  }
  .sc-stat-num {
    font-size: 24px;
  }
  .sc-stat-label {
    font-size: 8px;
  }

  /* ── Dashboard ── */
  .sc-dash-summary-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .sc-dash-summary-card {
    padding: 14px 10px;
  }
  .sc-dash-summary-num {
    font-size: 28px;
  }
  .sc-dash-bar-row {
    grid-template-columns: 70px 1fr;
    gap: 8px;
  }
  .sc-dash-bar-label {
    font-size: 9px;
  }
  .sc-dash-chart-card {
    padding: 16px 12px;
  }

  /* ── Dashboard item trends table → stacked ── */
  .sc-dash-item-table thead {
    display: none;
  }
  .sc-dash-item-table,
  .sc-dash-item-table tbody,
  .sc-dash-item-table tr,
  .sc-dash-item-table td {
    display: block;
  }
  .sc-dash-item-table tr {
    padding: 12px 14px;
    border-bottom: 1px solid #eef3fa;
  }
  .sc-dash-item-table td {
    padding: 2px 0;
    font-size: 13px;
  }
  .sc-dash-item-table td:first-child {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
  }

  /* ── Notifications ── */
  .sc-notification {
    padding: 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .sc-notification-btn {
    padding: 10px 14px;
    font-size: 11px;
    min-height: 40px;
  }
}

/* ── Notifications area ── */
.sc-notification {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--staff-danger-border);
  border-left: 4px solid var(--staff-danger);
  border-radius: 14px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(192, 74, 42, 0.08);
  animation: sc-notify-in 0.3s ease;
}

@keyframes sc-notify-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.sc-notification-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.sc-notification-content {
  flex: 1;
  min-width: 0;
}

.sc-notification-title {
  font-size: 13px;
  font-weight: 700;
  color: #8a3a2a;
  margin-bottom: 4px;
}

.sc-notification-text {
  font-size: 12px;
  color: #546278;
  line-height: 1.5;
}

.sc-notification-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.sc-notification-btn {
  border: 1px solid #c8d8ec;
  background: #fff;
  color: #546278;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}

.sc-notification-btn:hover {
  background: #f0f4fa;
}

.sc-notification-dismiss {
  border: none;
  background: transparent;
  color: #b0bcc8;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}

.sc-notification-dismiss:hover {
  color: #8a3a2a;
}

.sc-notification.info {
  border-color: #a0bce0;
  border-left-color: #2f5fa7;
}

.sc-notification.info .sc-notification-title {
  color: #2f5fa7;
}

/* ── Detail: Print/Export bar ── */
.sc-detail-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sc-detail-action-btn {
  border: 1px solid #c8d8ec;
  background: #fff;
  color: #546278;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}

.sc-detail-action-btn:hover {
  background: #f0f4fa;
  border-color: #a0bce0;
}

/* ── Dashboard page ── */
body.page-stock-checklist-dashboard #header {
  background: linear-gradient(180deg, rgba(31, 63, 110, 0.96) 0%, rgba(22, 45, 78, 0.98) 100%);
  border-bottom-color: rgba(188, 208, 238, 0.38);
}

#sc-dash-body {
  background:
    radial-gradient(circle at top left, rgba(219, 226, 206, 0.65), transparent 32%),
    linear-gradient(180deg, #edf4fc 0%, #f3f8fd 100%);
  min-height: calc(100vh - 150px);
}

.sc-dash-back {
  margin-bottom: 20px;
}

.sc-dash-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.sc-dash-summary-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #c8d8ec;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(30, 50, 80, 0.04);
}

.sc-dash-summary-num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  color: #1a2232;
}

.sc-dash-summary-num.ok { color: var(--staff-success); }
.sc-dash-summary-num.low { color: var(--staff-warning); }
.sc-dash-summary-num.missing { color: var(--staff-danger); }

.sc-dash-summary-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #627287;
  font-weight: 600;
  margin-top: 6px;
}

.sc-dash-chart-area {
  margin-bottom: 24px;
}

.sc-dash-chart-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #c8d8ec;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(30, 50, 80, 0.04);
}

.sc-dash-chart-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  color: #1a2232;
  font-weight: 500;
  margin-bottom: 16px;
}

.sc-dash-chart-subtitle {
  font-size: 12px;
  color: #627287;
  margin-bottom: 16px;
}

/* Bar chart via CSS */
.sc-dash-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-dash-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: center;
}

.sc-dash-bar-label {
  font-size: 11px;
  color: #546278;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-dash-bar-track {
  height: 24px;
  background: #eef3fa;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
}

.sc-dash-bar-seg {
  height: 100%;
  transition: width 0.4s ease;
  position: relative;
}

.sc-dash-bar-seg.ok { background: #b8dab8; }
.sc-dash-bar-seg.low { background: #f0dca0; }
.sc-dash-bar-seg.missing { background: #f0b0b0; }

.sc-dash-bar-values {
  display: flex;
  gap: 8px;
  margin-left: 8px;
  font-size: 10px;
  color: #627287;
  white-space: nowrap;
  align-items: center;
}

/* Item trends: frequent flagged items table */
.sc-dash-item-trends {
  margin-top: 0;
}

.sc-dash-item-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #c8d8ec;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(30, 50, 80, 0.04);
}

.sc-dash-item-card-head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid #dceaf7;
  background: linear-gradient(180deg, #f8fcff 0%, #e8f2fc 100%);
}

.sc-dash-item-card-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  color: #1a2232;
  font-weight: 500;
}

.sc-dash-item-card-sub {
  font-size: 12px;
  color: #627287;
  margin-top: 4px;
}

.sc-dash-item-table {
  width: 100%;
  border-collapse: collapse;
}

.sc-dash-item-table th {
  text-align: left;
  padding: 10px 18px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #546278;
  font-weight: 700;
  border-bottom: 1px solid #dce8f4;
  background: #f8fbff;
}

.sc-dash-item-table td {
  padding: 10px 18px;
  font-size: 13px;
  color: #1a2232;
  border-bottom: 1px solid #eef3fa;
}

.sc-dash-item-table tr:last-child td {
  border-bottom: none;
}

.sc-dash-item-table tr:hover td {
  background: rgba(47, 95, 167, 0.02);
}

.sc-dash-trend-bar {
  display: inline-block;
  height: 8px;
  border-radius: 4px;
  min-width: 4px;
}

.sc-dash-trend-bar.low { background: var(--staff-warning-border); }
.sc-dash-trend-bar.missing { background: var(--staff-danger-border); }

.checklist-admin-status.is-error {
  color: #8a3a2a;
}

.checklist-admin-status.is-info {
  color: #2f5fa7;
}

.checklist-admin-inline-btn.warn {
  color: #8a3a2a;
  border-color: #e0b7ad;
  background: #fff7f5;
}

.sc-page-alerts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.sc-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid #c8d8ec;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(30, 50, 80, 0.05);
}

.sc-banner.info {
  border-color: #b7cce6;
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.98) 0%, rgba(236, 244, 253, 0.98) 100%);
}

.sc-banner.warning {
  border-color: #e5d29b;
  background: linear-gradient(180deg, rgba(255, 251, 239, 0.98) 0%, rgba(255, 247, 225, 0.98) 100%);
}

.sc-banner.error {
  border-color: #e0b7ad;
  background: linear-gradient(180deg, rgba(255, 248, 246, 0.98) 0%, rgba(255, 241, 238, 0.98) 100%);
}

.sc-banner-copy {
  flex: 1;
  min-width: 0;
}

.sc-banner-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a2232;
  font-weight: 700;
}

.sc-banner-text {
  margin-top: 6px;
  font-size: 13px;
  color: #546278;
  line-height: 1.6;
}

.sc-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sc-banner-meta {
  font-size: 12px;
  color: #627287;
  line-height: 1.5;
}

.sc-loading-panel {
  padding: 28px 20px;
  text-align: center;
  color: #627287;
  border: 1px dashed #cfd8e8;
  border-radius: 16px;
  background: rgba(245, 249, 254, 0.82);
  font-size: 13px;
}

@keyframes sc-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.sc-stat-card.is-loading {
  position: relative;
  min-height: 92px;
  overflow: hidden;
  border-color: #dce8f4;
  background: linear-gradient(180deg, rgba(244, 248, 253, 0.95) 0%, rgba(236, 243, 250, 0.95) 100%);
}

.sc-stat-card.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 45%, transparent 100%);
  animation: sc-shimmer 1.4s infinite;
}

.sc-card {
  outline: none;
}

.sc-card:focus-visible {
  border-color: #2f5fa7;
  box-shadow: 0 0 0 3px rgba(47, 95, 167, 0.16), 0 10px 26px rgba(30, 50, 80, 0.08);
}

.sc-card-action:focus-visible,
.sc-detail-action-btn:focus-visible,
.sc-pill:focus-visible,
.sc-item-note-btn:focus-visible,
.checklist-admin-inline-btn:focus-visible {
  outline: 2px solid #2f5fa7;
  outline-offset: 2px;
}

.sc-card-progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sc-card-progress-meta {
  font-size: 10px;
  color: #627287;
  text-align: center;
  min-width: 96px;
  line-height: 1.45;
}

.sc-card-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sc-template-summary {
  margin-bottom: 18px;
}

.sc-template-readonly .checklist-admin-form {
  opacity: 0.78;
}

.sc-template-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.sc-template-summary-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #c8d8ec;
  border-radius: 16px;
  padding: 18px 16px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(30, 50, 80, 0.04);
}

.sc-template-summary-value {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px;
  line-height: 1;
  color: #1a2232;
  font-weight: 600;
}

.sc-template-summary-label {
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #627287;
  font-weight: 700;
}

.sc-single-item {
  align-items: flex-start;
}

.sc-single-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sc-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.sc-detail-note-row td {
  background: #fbfdff;
}

.sc-detail-note-text {
  padding: 0 4px 2px;
  font-size: 12px;
  color: #627287;
  line-height: 1.6;
  white-space: pre-wrap;
}

.sc-note-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef4fb;
  border: 1px solid #c8d8ec;
  color: #546278;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.sc-detail-item-note {
  font-size: 12px;
  color: #627287;
  line-height: 1.55;
  white-space: pre-wrap;
}

.checklist-admin-btn[disabled],
.sc-card-action[disabled],
.sc-detail-action-btn[disabled] {
  opacity: 0.58;
  cursor: not-allowed;
  filter: none;
}

@media (max-width: 900px) {
  .sc-banner {
    flex-direction: column;
  }

  .sc-banner-actions {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .sc-banner-actions .checklist-admin-btn {
    width: 100%;
  }

  .sc-card-progress-wrap {
    width: 100%;
  }

  .sc-card-progress-meta {
    min-width: 0;
  }

  .sc-template-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* Print styles */
@media print {
  /* Hide non-content chrome */
  #header, #staff-sidebar, .staff-mobile-bottom-nav, #mobile-nav-drawer,
  #conn-bar, #ll-auth-boot-mask, #ll-auth-overlay, .ll-user-bar,
  .toast-container, [id$="-modal-overlay"],
  .sc-detail-back, .sc-detail-actions, .sc-back-btn,
  .checklist-admin-btn { display: none !important; }

  body { background: white !important; color: black !important; }
  #app-main { margin: 0 !important; padding: 0 !important; }

  /* Stock checklist detail — keep special print layout */
  #page-stock-checklist-detail { width: 100%; }

  .sc-detail-section-card {
    break-inside: avoid;
    box-shadow: none;
    border-color: #ccc;
  }
  .sc-pill {
    border-width: 1px;
    font-size: 8px;
    padding: 2px 4px;
  }
  .sc-grid-table th, .sc-grid-table td {
    padding: 3px 4px;
    font-size: 10px;
  }
  /* Reset mobile card layout back to table for print */
  .sc-grid-table { display: table; }
  .sc-grid-table thead { display: table-header-group; }
  .sc-grid-table tbody { display: table-row-group; }
  .sc-grid-table tr { display: table-row; background: none; border: none; padding: 0; }
  .sc-grid-table td { display: table-cell; }
  .sc-grid-table td[data-label]::before { display: none; }
}

/* Final staff color unification */
:root {
  --staff-blue-050: #f4f8ff;
  --staff-blue-075: #eef5ff;
  --staff-blue-100: #e8f2ff;
  --staff-blue-150: #e1edff;
  --staff-blue-200: #d6e5fb;
  --staff-blue-300: #c4d8f4;
  --staff-blue-400: #a4c2e8;
  --staff-blue-500: #7ea6d8;
  --staff-blue-600: #4f86cc;
  --staff-blue-700: #326eb8;
  --staff-blue-800: #24589a;
  --staff-ink: #1f3147;
  --staff-muted: #5e758f;
  --staff-ink-subtle: #8195ad;
  --staff-primary: var(--staff-blue-700);
  --staff-primary-strong: var(--staff-blue-800);
  --staff-primary-soft: var(--staff-blue-075);
  --staff-primary-border: #bdd2ef;
  --staff-border: rgba(191, 209, 232, 0.92);
  --staff-border-strong: rgba(160, 186, 223, 0.96);
  --staff-success: #4d7b66;
  --staff-success-soft: #eef8f2;
  --staff-success-border: #cfe2d8;
  --staff-warning: #8c6430;
  --staff-warning-soft: #fff7eb;
  --staff-warning-border: #ecd6af;
  --staff-danger: #a24d4b;
  --staff-danger-soft: #fff2f2;
  --staff-danger-border: #efc9c8;
  --staff-owner-pam: #376cab;
  --staff-owner-gary: #4f80ba;
  --staff-owner-maggie: #6a95c7;
  --staff-owner-marianne: #2f74b5;
  --staff-owner-lindsey: #7ca6d4;
  --staff-owner-dan: #92b2dc;
  --staff-owner-unassigned: #aabdd6;
  --staff-panel-border: var(--staff-border);
  --staff-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.96) 100%);
  --staff-panel-shadow: 0 20px 48px rgba(58, 84, 122, 0.12);
  --staff-soft-shadow: 0 14px 34px rgba(58, 84, 122, 0.08);
}

body {
  background:
    radial-gradient(circle at top left, rgba(214, 229, 250, 0.72), transparent 30%),
    radial-gradient(circle at top right, rgba(232, 241, 255, 0.92), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #f1f7ff 46%, #ebf3ff 100%) !important;
  color: var(--staff-ink) !important;
}

#header {
  background: linear-gradient(180deg, rgba(249, 252, 255, 0.98) 0%, rgba(235, 243, 253, 0.96) 100%) !important;
  border-color: var(--staff-panel-border) !important;
  box-shadow: 0 22px 48px rgba(46, 79, 121, 0.12) !important;
}

#header::after {
  background: linear-gradient(90deg, transparent, rgba(191, 209, 232, 0.96), transparent) !important;
}

#logo-text-name {
  color: var(--staff-ink) !important;
}

#logo-text-sub,
#logo-text-portal {
  color: var(--staff-muted) !important;
}

#logo-text-portal {
  border-top-color: var(--staff-panel-border) !important;
}

#nav-tabs,
#mobile-nav-drawer-panel,
.staff-mobile-bottom-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 250, 255, 0.94) 100%) !important;
  border-color: var(--staff-panel-border) !important;
  box-shadow: var(--staff-panel-shadow) !important;
}

#mobile-nav-drawer-overlay,
#modal-overlay,
#qa-modal-overlay,
#tour-modal-overlay,
#meeting-modal-overlay,
#cal-detail-overlay {
  background: rgba(18, 34, 56, 0.28) !important;
}

#meeting-modal-overlay,
#task-detail-overlay,
#notifications-login-prompt-overlay {
  display: none;
}

#notifications-login-prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1250;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 31, 49, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#notifications-login-prompt-overlay.open {
  display: flex;
}

#notifications-login-prompt-dialog {
  width: min(520px, 100%);
  background: #fff;
  border: 1px solid rgba(211, 220, 232, 0.96);
  border-radius: 24px;
  box-shadow: 0 36px 90px rgba(18, 34, 56, 0.24);
  overflow: hidden;
}

.notifications-login-prompt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  background: linear-gradient(135deg, rgba(31, 66, 113, 0.96), rgba(20, 43, 73, 0.98));
}

.notifications-login-prompt-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(214, 228, 245, 0.82);
  margin-bottom: 6px;
}

.notifications-login-prompt-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 29px;
  line-height: 1.05;
  color: #fff;
}

.notifications-login-prompt-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.notifications-login-prompt-close:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.notifications-login-prompt-body {
  display: grid;
  gap: 14px;
  padding: 24px;
}

.notifications-login-prompt-message {
  font-size: 16px;
  line-height: 1.65;
  color: #203145;
}

.notifications-login-prompt-detail {
  font-size: 13px;
  line-height: 1.75;
  color: #627487;
}

.notifications-login-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 10px;
}

.notifications-login-prompt-btn {
  min-width: 148px;
  border-radius: 999px;
  padding: 12px 18px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.notifications-login-prompt-btn:hover {
  transform: translateY(-1px);
}

.notifications-login-prompt-btn:disabled {
  opacity: 0.72;
  cursor: wait;
  transform: none;
}

.notifications-login-prompt-btn-primary {
  background: linear-gradient(135deg, #2f5fa7, #244a80);
  color: #fff;
  box-shadow: 0 12px 24px rgba(47, 95, 167, 0.22);
}

.notifications-login-prompt-btn-primary:hover {
  box-shadow: 0 16px 30px rgba(47, 95, 167, 0.28);
}

.notifications-login-prompt-btn-secondary {
  background: #f7fafc;
  border-color: rgba(191, 205, 221, 0.92);
  color: #415468;
}

@media (max-width: 640px) {
  #notifications-login-prompt-overlay {
    padding: 14px;
    align-items: flex-end;
  }

  #notifications-login-prompt-dialog {
    border-radius: 22px 22px 0 0;
  }

  .notifications-login-prompt-head {
    padding: 20px 18px 16px;
  }

  .notifications-login-prompt-title {
    font-size: 24px;
  }

  .notifications-login-prompt-body {
    padding: 18px;
  }

  .notifications-login-prompt-actions {
    flex-direction: column-reverse;
  }

  .notifications-login-prompt-btn {
    width: 100%;
  }
}

.mobile-nav-drawer-btn,
.staff-mobile-bottom-nav button {
  border: 1px solid transparent;
  border-radius: 18px;
  color: var(--staff-ink);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.mobile-nav-drawer-btn:hover,
.staff-mobile-bottom-nav button:hover {
  background: var(--staff-primary-soft);
  border-color: var(--staff-panel-border);
  color: var(--staff-ink);
}

.staff-mobile-bottom-nav button.active,
.staff-mobile-bottom-nav button[aria-current="page"] {
  background: linear-gradient(180deg, #ffffff 0%, var(--staff-primary-soft) 100%) !important;
  border-color: var(--staff-primary-border) !important;
  box-shadow: 0 10px 22px rgba(50, 110, 184, 0.16) !important;
  color: var(--staff-primary-strong) !important;
}

.mobile-nav-drawer-ico,
.staff-mobile-bottom-nav-ico {
  color: var(--staff-primary);
}

#footer,
.wedding-table,
.wedding-card,
.tasks-card,
.wl-form-card,
.wl-log-card,
.checklist-admin-card,
.tour-log-card,
.meeting-log-card,
.wdetail-card,
#cal-detail-box,
#modal-box,
#page-reception-template-builder,
.sc-card,
.sc-banner,
.sc-section-card,
.sc-detail-section-card,
.sc-dash-chart-card {
  background: var(--staff-panel-bg) !important;
  border-color: var(--staff-panel-border) !important;
  box-shadow: var(--staff-soft-shadow) !important;
}

#footer {
  background: linear-gradient(180deg, #eef5ff 0%, #e5effd 100%) !important;
}

.wedding-table thead tr,
.sc-grid-table thead tr {
  background: linear-gradient(180deg, var(--staff-blue-100) 0%, var(--staff-blue-200) 100%) !important;
}

.wedding-table th,
.sc-grid-table th {
  color: var(--staff-muted) !important;
}

tr.expand-row td,
.card-checklist,
.expand-panel,
#cal-detail-footer,
.checklist-form-grid,
.qa-card-body,
.qa-thread-content,
.qa-composer,
.qa-resolved-banner,
.qa-readonly-note {
  background: var(--staff-blue-075) !important;
  border-color: var(--staff-panel-border) !important;
}

#search-input,
.form-input,
.tasks-input,
.tasks-select,
.qa-answer-input,
.qa-modal-input,
.qa-modal-select,
.wl-input,
.checklist-admin-input,
.qa-reply-input,
.qa-inline-edit-input,
.qa-asker-other,
.task-modal-body .tasks-input,
.task-modal-body .tasks-select {
  background: #f9fbff !important;
  border-color: var(--staff-panel-border) !important;
  color: var(--staff-ink) !important;
}

#search-input:focus,
.form-input:focus,
.tasks-input:focus,
.tasks-select:focus,
.qa-answer-input:focus,
.qa-modal-input:focus,
.qa-modal-select:focus,
.wl-input:focus,
.checklist-admin-input:focus,
.qa-reply-input:focus,
.qa-inline-edit-input:focus,
.qa-asker-other:focus,
.task-modal-body .tasks-input:focus,
.task-modal-body .tasks-select:focus {
  border-color: var(--staff-primary) !important;
  box-shadow: 0 0 0 4px rgba(50, 110, 184, 0.14) !important;
  background: #ffffff !important;
}

#add-btn,
.btn-save,
.dark-btn,
.tasks-add-btn,
.tasks-open-modal-btn,
.wl-save-btn,
.qa-save-btn,
.qa-modal-submit,
.cal-detail-edit-btn,
.checklist-admin-btn.primary,
.export-panel .primary,
#task-save-btn {
  background: #2f5fa7 !important;
  border: 1px solid #2f5fa7 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

#add-btn:hover,
.btn-save:hover,
.dark-btn:hover,
.tasks-add-btn:hover,
.tasks-open-modal-btn:hover,
.wl-save-btn:hover,
.qa-save-btn:hover,
.qa-modal-submit:hover,
.cal-detail-edit-btn:hover,
.checklist-admin-btn.primary:hover,
.export-panel .primary:hover,
#task-save-btn:hover {
  background: #244f90 !important;
  border-color: #244f90 !important;
}

.edit-btn,
.btn-cancel,
.qa-edit-btn,
.qa-modal-cancel,
.wl-nav-btn,
.wl-log-edit-btn,
.tour-log-edit-btn,
.meeting-log-edit-btn,
.checklist-admin-btn:not(.primary),
.checklist-admin-inline-btn,
.sc-card-action,
.sc-detail-action-btn,
.task-action-btn,
.qa-secondary-btn,
.qa-inline-action,
#weddings-show-all-btn,
.stay-action-btn {
  border: 1px solid rgba(29, 49, 71, 0.12) !important;
  background: #ffffff !important;
  color: #3d4d62 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.edit-btn:hover,
.btn-cancel:hover,
.qa-edit-btn:hover,
.qa-modal-cancel:hover,
.wl-nav-btn:hover,
.wl-log-edit-btn:hover,
.tour-log-edit-btn:hover,
.meeting-log-edit-btn:hover,
.checklist-admin-btn:not(.primary):hover,
.checklist-admin-inline-btn:hover,
.sc-card-action:hover,
.sc-detail-action-btn:hover,
.task-action-btn:hover,
.qa-secondary-btn:hover,
.qa-inline-action:hover,
#weddings-show-all-btn:hover,
.stay-action-btn:hover {
  background: var(--staff-primary-soft) !important;
  border-color: var(--staff-primary-border) !important;
  color: var(--staff-primary-strong) !important;
}

#qa-page-add-btn,
#tours-add-btn,
#meetings-add-btn {
  border: 1px solid rgba(47, 95, 167, 0.22) !important;
  background: #ffffff !important;
  color: #2f5fa7 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

#qa-page-add-btn:hover,
#tours-add-btn:hover,
#meetings-add-btn:hover {
  background: var(--staff-primary-soft) !important;
  border-color: var(--staff-primary) !important;
}

#weddings-show-all-count {
  background: var(--staff-primary) !important;
  color: #ffffff !important;
}

.tasks-filter-btn,
.task-type-filter-btn,
.qa-filter-btn,
.cal-filter-chip,
.owner-filter-chip,
.meetings-type-btn {
  border-color: var(--staff-panel-border) !important;
  background: #ffffff !important;
  color: var(--staff-muted) !important;
}

.tasks-filter-btn.active,
.task-type-filter-btn.active,
.qa-filter-btn.active,
.cal-filter-chip.active,
.owner-filter-chip.active,
.meetings-type-btn.selected {
  background: linear-gradient(180deg, var(--staff-primary) 0%, var(--staff-primary-strong) 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(50, 110, 184, 0.18) !important;
}

.person-chip {
  color: var(--staff-muted) !important;
}

.person-chip:hover,
.person-chip.selected {
  background: var(--staff-primary-soft) !important;
}

.person-chip.selected .person-chip-icon {
  box-shadow: 0 0 0 2.5px #ffffff, 0 0 0 4.5px var(--staff-primary) !important;
}

.person-chip.selected .person-chip-label {
  color: var(--staff-ink) !important;
}

.priority-chip {
  border-color: var(--staff-panel-border) !important;
  background: var(--staff-blue-050) !important;
  color: var(--staff-muted) !important;
}

.priority-chip.low::before {
  background: #86a9d7 !important;
}

.priority-chip.medium::before {
  background: #5f8ec9 !important;
}

.priority-chip.high::before {
  background: var(--staff-primary) !important;
}

.priority-chip.low.selected {
  background: #dce8f8 !important;
  color: var(--staff-primary-strong) !important;
}

.priority-chip.medium.selected {
  background: #cfe0f6 !important;
  color: var(--staff-primary-strong) !important;
}

.priority-chip.high.selected {
  background: linear-gradient(180deg, var(--staff-primary) 0%, var(--staff-primary-strong) 100%) !important;
  color: #ffffff !important;
}

.task-priority-badge.low {
  background: #eef5ff !important;
  color: #5e84b3 !important;
}

.task-priority-badge.medium {
  background: #e8f1ff !important;
  color: #4a79b0 !important;
}

.task-priority-badge.high {
  background: var(--staff-primary-soft) !important;
  color: var(--staff-primary-strong) !important;
}

.task-item:hover {
  border-color: var(--staff-primary-border) !important;
  box-shadow: 0 8px 20px rgba(58, 84, 122, 0.08) !important;
}

.task-item.is-complete {
  background: #f7fbff !important;
  border-color: var(--staff-primary-border) !important;
}

.task-hitarea:hover .task-toggle,
.task-check-btn:hover {
  border-color: var(--staff-primary) !important;
}

.task-item.is-complete .task-toggle,
.task-item.is-complete .task-check-btn,
.custom-check.checked {
  background: var(--staff-primary) !important;
  border-color: var(--staff-primary) !important;
  color: #ffffff !important;
}

.checklist-item.done .check-icon,
.cal-detail-check .ck,
.exp-check-item.done .exp-check-icon {
  color: var(--staff-primary) !important;
}

.dw-badge,
.card-dw-badge {
  background: var(--staff-blue-050) !important;
  border-color: var(--staff-panel-border) !important;
  color: var(--staff-muted) !important;
}

.dw-d,
.card-dw-d {
  background: var(--staff-primary-soft) !important;
  border-color: var(--staff-primary-border) !important;
  color: var(--staff-primary-strong) !important;
}

.dw-w,
.card-dw-w {
  background: #f3f7ff !important;
  border-color: #d9e3f4 !important;
  color: #567da9 !important;
}

.cal-wedding-chip.dw-w {
  background: linear-gradient(180deg, var(--cal-wedding) 0%, var(--cal-wedding-hover) 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.cal-wedding-chip.dw-d {
  background: linear-gradient(180deg, #4a6fa5 0%, #3D5A8F 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.meeting-log-pill,
.meeting-upcoming-badge,
#weddings-show-all-count {
  background: linear-gradient(180deg, var(--staff-primary) 0%, var(--staff-primary-strong) 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.cal-meeting-chip {
  background: linear-gradient(180deg, #7C5AAE 0%, var(--cal-meeting) 100%) !important;
  color: #ffffff !important;
  border-left-color: var(--cal-meeting-accent) !important;
}

.cal-tour-chip {
  background: linear-gradient(180deg, #2690A4 0%, var(--cal-tour) 100%) !important;
  color: #ffffff !important;
  border-left-color: var(--cal-tour-accent) !important;
}
.tour-upcoming-badge {
  background: linear-gradient(180deg, #5d92cd 0%, #3f78b9 100%) !important;
  color: #ffffff !important;
}

.cal-mini-dot.tour { background: var(--cal-tour) !important; }
.cal-list-item-tour { border-left-color: var(--cal-tour) !important; }

.task-badge.pam,
.wl-recent-badge.pam,
.qa-askedby-badge.pam {
  background: #edf4ff !important;
  color: var(--staff-owner-pam) !important;
}

.task-badge.gary,
.wl-recent-badge.gary,
.qa-askedby-badge.gary {
  background: #ebf3ff !important;
  color: var(--staff-owner-gary) !important;
}

.task-badge.maggie,
.wl-recent-badge.maggie,
.qa-askedby-badge.maggie {
  background: #e7f0ff !important;
  color: var(--staff-owner-maggie) !important;
}

.wl-log-avatar,
.wl-avatar-circle {
  background: var(--staff-owner-pam) !important;
}

.wl-log-avatar.pam,
.wl-avatar-circle.pam,
.person-chip.pam .person-chip-icon {
  background: var(--staff-owner-pam) !important;
}

.wl-log-avatar.gary,
.wl-avatar-circle.gary,
.person-chip.gary .person-chip-icon {
  background: var(--staff-owner-gary) !important;
}

.wl-log-avatar.maggie,
.wl-avatar-circle.maggie,
.person-chip.maggie .person-chip-icon {
  background: var(--staff-owner-maggie) !important;
}

.wl-avatar-circle.marianne,
.person-chip.marianne .person-chip-icon,
.tour-log-avatar.marianne,
.meetings-avatar-circle.marianne,
.meeting-log-avatar.marianne {
  background: var(--staff-owner-marianne) !important;
}

.wl-avatar-circle.lindsey,
.person-chip.lindsey .person-chip-icon,
.tour-log-avatar.lindsey,
.meetings-avatar-circle.lindsey,
.meeting-log-avatar.lindsey {
  background: var(--staff-owner-lindsey) !important;
}

.wl-avatar-circle.dan,
.person-chip.dan .person-chip-icon {
  background: var(--staff-owner-dan) !important;
}

.tours-avatar-circle.unassigned,
.tour-log-avatar.unassigned,
.meetings-avatar-circle.unassigned,
.meeting-log-avatar.unassigned {
  background: var(--staff-owner-unassigned) !important;
}

.tours-avatar-circle.mandy,
.tour-log-avatar.mandy,
.meetings-avatar-circle.mandy,
.meeting-log-avatar.mandy {
  background: var(--staff-owner-gary) !important;
}

.tours-avatar-circle.maggie,
.tour-log-avatar.maggie,
.meetings-avatar-circle.maggie,
.meeting-log-avatar.maggie {
  background: var(--staff-owner-maggie) !important;
}

.wl-avatar-btn.selected.pam .wl-avatar-circle {
  box-shadow: 0 0 0 3px var(--staff-owner-pam), 0 4px 14px rgba(55, 108, 171, 0.28) !important;
}

.wl-avatar-btn.selected.gary .wl-avatar-circle,
.tours-avatar-btn.selected.mandy .tours-avatar-circle,
.meetings-avatar-btn.selected.mandy .meetings-avatar-circle {
  box-shadow: 0 0 0 3px var(--staff-owner-gary), 0 4px 14px rgba(79, 128, 186, 0.28) !important;
}

.wl-avatar-btn.selected.maggie .wl-avatar-circle,
.tours-avatar-btn.selected.maggie .tours-avatar-circle,
.meetings-avatar-btn.selected.maggie .meetings-avatar-circle {
  box-shadow: 0 0 0 3px var(--staff-owner-maggie), 0 4px 14px rgba(106, 149, 199, 0.28) !important;
}

.wl-avatar-btn.selected.dan .wl-avatar-circle {
  box-shadow: 0 0 0 3px var(--staff-owner-dan), 0 4px 14px rgba(146, 178, 220, 0.24) !important;
}

.wl-avatar-btn.selected.marianne .wl-avatar-circle,
.tours-avatar-btn.selected.marianne .tours-avatar-circle,
.meetings-avatar-btn.selected.marianne .meetings-avatar-circle {
  box-shadow: 0 0 0 3px var(--staff-owner-marianne), 0 4px 14px rgba(47, 116, 181, 0.28) !important;
}

.wl-avatar-btn.selected.lindsey .wl-avatar-circle,
.tours-avatar-btn.selected.lindsey .tours-avatar-circle,
.meetings-avatar-btn.selected.lindsey .meetings-avatar-circle {
  box-shadow: 0 0 0 3px var(--staff-owner-lindsey), 0 4px 14px rgba(124, 166, 212, 0.28) !important;
}

.tours-avatar-btn.selected.unassigned .tours-avatar-circle,
.meetings-avatar-btn.selected.unassigned .meetings-avatar-circle {
  box-shadow: 0 0 0 3px var(--staff-owner-unassigned), 0 4px 14px rgba(170, 189, 214, 0.24) !important;
}

.owner-filter-chip.pam .owner-filter-chip-icon {
  background: #edf4ff !important;
  color: var(--staff-owner-pam) !important;
}

.owner-filter-chip.gary .owner-filter-chip-icon,
.owner-filter-chip.mandy .owner-filter-chip-icon {
  background: #ebf3ff !important;
  color: var(--staff-owner-gary) !important;
}

.owner-filter-chip.maggie .owner-filter-chip-icon {
  background: #e7f0ff !important;
  color: var(--staff-owner-maggie) !important;
}

.owner-filter-chip.marianne .owner-filter-chip-icon {
  background: #eaf3fb !important;
  color: var(--staff-owner-marianne) !important;
}

.owner-filter-chip.lindsey .owner-filter-chip-icon {
  background: #eaf2ff !important;
  color: var(--staff-owner-lindsey) !important;
}

.owner-filter-chip.dan .owner-filter-chip-icon {
  background: #edf3ff !important;
  color: var(--staff-owner-dan) !important;
}

.qa-card-status.open,
.qa-card-status.unanswered,
.qa-thread-item.question .qa-thread-marker {
  background: var(--staff-primary-soft) !important;
  color: var(--staff-primary-strong) !important;
  border-color: var(--staff-primary-border) !important;
}

.qa-card-status.resolved,
.qa-card-status.answered,
.qa-resolved-title,
#tasks-submit-status.success,
#wl-submit-status.success,
#tour-submit-status.success,
#meeting-submit-status.success,
.checklist-admin-status.is-success {
  background: var(--staff-success-soft) !important;
  color: var(--staff-success) !important;
  border-color: var(--staff-success-border) !important;
}

.qa-thread-status-pill {
  background: var(--staff-warning-soft) !important;
  color: var(--staff-warning) !important;
  border: 1px solid var(--staff-warning-border) !important;
}

.qa-thread-status-msg.error,
#tasks-submit-status.error,
#wl-submit-status.error,
#tour-submit-status.error,
#meeting-submit-status.error,
.checklist-admin-status.is-error {
  color: var(--staff-danger) !important;
}

.tour-log-card.is-upcoming,
.meeting-log-card.is-upcoming {
  border-left-color: var(--staff-primary) !important;
}

#meeting-modal-head,
#tour-modal-head,
#qa-modal-head,
#modal-head,
#cal-detail-head {
  background: linear-gradient(180deg, #315f96 0%, #244f90 100%) !important;
}

#task-modal-head {
  background: linear-gradient(180deg, var(--staff-blue-050) 0%, var(--staff-blue-100) 100%) !important;
  border-top-color: var(--staff-primary) !important;
  border-bottom-color: var(--staff-panel-border) !important;
}

#task-modal-head .tasks-card-kicker,
#task-modal-head .tasks-card-sub,
#meeting-modal-head .tasks-card-kicker {
  color: var(--staff-primary) !important;
}

/* Mobile remediation: override the tiny mobile cap and tighten the mobile UX */
:root {
  --staff-mobile-nav-offset: 112px;
}

@media (max-width: 860px) {
  #mobile-menu-btn {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
  }

  .ll-mob-label {
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
  }

  .ll-mob-btn {
    min-height: 48px !important;
    font-size: 13px !important;
    letter-spacing: 0.14em !important;
  }

  #logo-text-name,
  .staff-page-title,
  .cal-mobile-empty-title,
  #cal-detail-couple,
  .card-couple,
  #f-couple,
  .couple-name,
  .wdetail-hero-title,
  .stay-page-title,
  #cal-month-label {
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.12 !important;
  }

  .tasks-card-title,
  .tasks-list-title,
  .wl-form-title,
  #modal-title,
  #qa-modal-title,
  #tour-modal-title,
  #meeting-modal-title,
  #stay-modal-title,
  .tour-log-summary-name,
  .meeting-log-summary-name,
  .stay-card-name,
  .fv-filename,
  .wl-hist-heading {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .task-title,
  .cal-list-couple,
  .wl-log-name,
  .wdetail-field-value,
  .wdetail-notes,
  .tasks-summary-num {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .tour-log-summary-date,
  .meeting-log-summary-date,
  .stay-empty-title,
  .card-exp-val,
  .card-exp-text,
  .card-exp-empty,
  .tours-empty-msg,
  .meetings-empty-msg,
  .cal-mobile-empty-sub {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .nav-ico {
    font-size: 16px !important;
  }

  .staff-mobile-bottom-nav {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
    border-radius: 24px !important;
  }

  .staff-mobile-bottom-nav button {
    min-height: 60px !important;
    gap: 6px !important;
    padding: 10px 6px !important;
  }

  .staff-mobile-bottom-nav-label {
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
  }

  #table-section,
  #cal-body,
  #qa-body,
  #tasks-body,
  #wl-body,
  #tours-body,
  #bride-messages-body,
  #rentals-body,
  #family-body,
  #events-body,
  #meetings-body,
  #checklist-settings-body,
  #portal-bridal-checklist-body,
  #wedding-detail-body,
  #sc-index-body,
  #sc-editor-body,
  #sc-detail-body,
  #sc-template-body,
  #sc-dash-body,
  #page-couple-management .ll-cm-shell,
  #page-admin-users .ll-admin-shell,
  #page-admin-permissions .ll-admin-shell,
  #page-site-settings,
  #page-reception-template-builder {
    padding-bottom: calc(var(--staff-mobile-nav-offset) + env(safe-area-inset-bottom)) !important;
  }

  #cal-mini-wrap {
    display: none !important;
  }

  #cal-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
    padding-bottom: 0 !important;
  }

  .cal-filter-chip {
    min-height: 44px !important;
    justify-content: center !important;
    padding: 12px 14px !important;
  }

  .cal-filter-text {
    display: inline !important;
    font-size: 12px !important;
  }

  .cal-filter-icon {
    font-size: 16px !important;
  }

  .cal-nav-btn {
    width: 44px !important;
    height: 44px !important;
  }

  .cal-list-day {
    padding: 14px !important;
  }

  .cal-list-couple {
    font-size: 20px !important;
  }

  .cal-list-meta,
  .cal-list-staff,
  .cal-mobile-empty-sub {
    font-size: 13px !important;
  }

  .card-meta-label {
    font-size: 10px !important;
  }

  .card-expand-btn {
    min-height: 40px !important;
    font-size: 12px !important;
  }

  .checklist-admin-label,
  .ll-admin-label {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
  }

  .checklist-admin-card-sub,
  .checklist-admin-item-meta,
  .checklist-admin-empty,
  .ll-admin-panel-sub,
  .ll-admin-user-meta,
  .ll-admin-selected-copy {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .checklist-admin-input,
  .ll-admin-input,
  .ll-admin-select {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  textarea.checklist-admin-input,
  textarea.ll-admin-input {
    min-height: 120px !important;
  }

  .checklist-admin-btn,
  .ll-admin-btn,
  .sc-card-action,
  .sc-detail-action-btn,
  .task-action-btn {
    min-height: 46px !important;
    font-size: 12px !important;
    padding: 12px 16px !important;
  }

  .checklist-admin-inline-btn {
    min-height: 42px !important;
    font-size: 11px !important;
    padding: 10px 14px !important;
  }

  .checklist-admin-item-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .checklist-admin-item-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 560px) {
  .staff-mobile-bottom-nav {
    left: 8px !important;
    right: 8px !important;
  }

  .staff-mobile-bottom-nav button {
    min-height: 56px !important;
  }

  .staff-mobile-bottom-nav-label {
    font-size: 12px !important;
  }

  #cal-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #cal-filter-bar .cal-filter-chip {
    min-height: 38px !important;
    padding: 8px 6px !important;
    font-size: 11px !important;
  }

  .checklist-admin-item-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }

  .checklist-admin-inline-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Final visual QA cleanup */
.staff-hub-shell--schedule .staff-hub-shell__panel,
.staff-hub-shell--couple .staff-hub-shell__panel,
.staff-hub-shell--settings .staff-hub-shell__panel {
  background:
    radial-gradient(circle at top right, rgba(129, 170, 221, 0.16) 0%, rgba(129, 170, 221, 0) 42%),
    linear-gradient(160deg, #ffffff 0%, #f4f8ff 52%, #edf5ff 100%) !important;
  border-color: var(--staff-panel-border) !important;
}


/* Keep the schedule hub shell and Tours section on the same responsive width */
#tours-body {
  max-width: 1300px !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}

@media (max-width: 900px) {
  #tours-body {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 640px) {
  #tours-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

.staff-hub-shell--schedule .staff-hub-tab.is-active,
.staff-hub-shell--couple .staff-hub-tab.is-active,
.staff-hub-shell--settings .staff-hub-tab.is-active,
.staff-hub-shell--payments .staff-hub-tab.is-active {
  background: linear-gradient(135deg, var(--staff-primary) 0%, var(--staff-primary-strong) 100%) !important;
  box-shadow: 0 14px 28px rgba(50, 110, 184, 0.18) !important;
}

/* Final tablet header cleanup: keep the user/logout control anchored in the top row. */
@media (min-width: 769px) and (max-width: 900px) {
  #header-inner {
    height: auto !important;
    min-height: 54px !important;
  }

  #header-top {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 12px !important;
  }

  #logo-block {
    min-width: 0;
  }

  .ll-header-user {
    align-self: auto !important;
    justify-self: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Stock checklist palette alignment */
#sc-index-body,
#sc-editor-body,
#sc-detail-body,
#sc-template-body,
#sc-dash-body {
  background: transparent !important;
}

.sc-stat-card,
.sc-dash-summary-card,
.sc-template-summary-card {
  background: var(--staff-panel-bg) !important;
  border-color: var(--staff-panel-border) !important;
  box-shadow: var(--staff-soft-shadow) !important;
}

.sc-badge-draft {
  background: var(--staff-warning-soft) !important;
  border-color: var(--staff-warning-border) !important;
  color: var(--staff-warning) !important;
}

.sc-badge-completed {
  background: var(--staff-success-soft) !important;
  border-color: var(--staff-success-border) !important;
  color: var(--staff-success) !important;
}

.sc-card-action.danger {
  background: var(--staff-danger-soft) !important;
  border-color: var(--staff-danger-border) !important;
  color: var(--staff-danger) !important;
}

.sc-card-action.danger:hover {
  background: #ffffff !important;
  border-color: var(--staff-danger) !important;
  color: var(--staff-danger) !important;
}

.sc-empty {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: var(--staff-panel-border) !important;
  color: var(--staff-muted) !important;
}

/* Checklist section toggle */
.clx-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.clx-section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.clx-section-title {
  margin-bottom: 0 !important;
}

.clx-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--staff-panel-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--staff-primary-strong);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.clx-toggle-btn:hover {
  border-color: var(--staff-primary-border);
  background: var(--staff-primary-soft);
  transform: translateY(-1px);
}

.clx-empty-state {
  padding: 14px 16px;
  border: 1px dashed var(--staff-panel-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--staff-muted);
  font-size: 12px;
  font-style: italic;
}

.card-exp-section .clx-section {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .clx-section-head-row {
    align-items: stretch;
  }

  .clx-toggle-btn {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════
   Task Board Header v2 — compact single-toolbar layout
   ═══════════════════════════════════════════════════════ */

.tasks-list-head-v2 .tasks-list-topbar{
  display:flex !important;
  align-items:baseline !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}

.tasks-inline-stats{
  display:flex;
  align-items:baseline;
  gap:6px;
  font-size:12px;
  color:#627287;
  font-weight:600;
  letter-spacing:0.04em;
  white-space:nowrap;
  flex-shrink:0;
}
.tasks-inline-stat-num{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:18px;
  color:#2c2c2c;
  font-weight:700;
  line-height:1;
}
.tasks-inline-stat-sep{
  color:#c9d8e8;
  margin:0 2px;
}

.tasks-list-head-v2 .tasks-list-controls{
  margin-top:12px !important;
  width:100% !important;
}
.tasks-toolbar-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.tasks-toolbar-divider{
  width:1px;
  height:20px;
  background:#d4dce8;
  flex-shrink:0;
}

.tasks-list-head-v2 .tasks-filter-tabs{
  display:flex !important;
  width:auto !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
  overflow:visible !important;
  margin:0 !important;
}
.tasks-list-head-v2 .tasks-filter-btn{
  width:auto !important;
  flex:none !important;
  padding:6px 12px !important;
  font-size:10px !important;
  border-radius:999px !important;
}

.tasks-list-head-v2 .task-type-filter-strip{
  display:flex !important;
  width:auto !important;
  gap:6px !important;
  margin:0 !important;
  flex-wrap:nowrap !important;
}
.tasks-list-head-v2 .task-type-filter-btn{
  width:auto !important;
  flex:none !important;
  padding:6px 12px !important;
  font-size:10px !important;
}

.tasks-list-head-v2 .tasks-owner-strip{
  display:flex !important;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.tasks-list-head-v2 .tasks-owner-strip .owner-filter-chip{
  display:none !important;
}
.tasks-list-head-v2 .tasks-owner-strip .tasks-owner-field{
  display:flex !important;
  align-items:center;
  gap:6px;
}
.tasks-list-head-v2 .tasks-owner-strip .tasks-label{
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#627287;
  font-weight:600;
  white-space:nowrap;
}
.tasks-list-head-v2 .tasks-owner-strip .tasks-owner-select{
  padding:6px 28px 6px 10px !important;
  font-size:12px !important;
  border-radius:999px !important;
  border:1.5px solid #c9d8e8 !important;
  background:#fff !important;
  color:#4e6075;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a8ea4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 10px center !important;
  min-width:0;
}
.task-badge.task-assigned-by-badge{
  background:#f7efe5;
  color:#7a5d33;
}

.tasks-list-head-v2 ~ .mobile-owner-filter,
.tasks-list-head-v2 .mobile-owner-filter{
  display:none !important;
}

@media (max-width:600px){
  .tasks-toolbar-row{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .tasks-toolbar-divider{
    display:none;
  }
  .tasks-list-head-v2 .tasks-filter-tabs{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }
  .tasks-list-head-v2 .tasks-filter-btn{
    width:100% !important;
    text-align:center !important;
  }
  .tasks-list-head-v2 .task-type-filter-strip{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
  }
  .tasks-list-head-v2 .task-type-filter-btn{
    width:100% !important;
    text-align:center !important;
  }
  .tasks-inline-stats{
    width:100%;
    justify-content:center;
    margin-top:2px;
  }
}

@media (max-width:360px){
  .tasks-list-head-v2 .task-type-filter-strip{
    grid-template-columns:1fr !important;
  }
}

.qa-modal-select,
.ll-admin-user-select-input {
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 38px !important;
}

.qa-modal-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a8ea4'/%3E%3C/svg%3E") !important;
}

.ll-admin-user-select-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a8ea4'/%3E%3C/svg%3E") !important;
}

/* Staff wedding list: improve row number visibility and polish */
.wedding-table th.row-num-cell,
.wedding-table td.row-num-cell {
  width: var(--row-num-col-width, 64px);
  min-width: var(--row-num-col-width, 64px);
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  white-space: nowrap;
}

.wedding-table td.row-num-cell {
  overflow: visible;
  text-overflow: clip;
}

.wedding-table .row-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--staff-primary-border);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, var(--staff-primary-soft) 100%);
  box-shadow:
    0 8px 18px rgba(58, 84, 122, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  color: var(--staff-primary-strong);
  font-family: 'Jost', 'Helvetica Neue', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

.wedding-table tbody tr.main-row:hover .row-num {
  border-color: var(--staff-primary);
  background: linear-gradient(180deg, #ffffff 0%, #e6f0ff 100%);
}

@media (max-width: 900px) {
  .wedding-table th.row-num-cell,
  .wedding-table td.row-num-cell {
    min-width: 58px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .wedding-table .row-num {
    min-height: 28px;
    padding: 0 8px;
    letter-spacing: 0.12em;
  }
}

/* Modal subtitle */
.modal-subtitle {
  font-size: 11px;
  color: #aaa;
  margin-top: 0.25rem;
  letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Desktop shell alignment normalization */
@media (min-width: 901px) {
  :root {
    --staff-sidebar-left-desktop: 18px;
    --staff-sidebar-width-desktop: 226px;
    --staff-sidebar-gap-desktop: 12px;
    --staff-content-inline-desktop: clamp(18px, 2vw, 32px);
  }

  #staff-sidebar {
    left: var(--staff-sidebar-left-desktop) !important;
    width: var(--staff-sidebar-width-desktop) !important;
  }

  #app-main {
    margin-left: calc(
      var(--staff-sidebar-left-desktop) +
      var(--staff-sidebar-width-desktop) +
      var(--staff-sidebar-gap-desktop)
    ) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #weddings-actions,
  #stats,
  #search-section,
  #table-section,
  #cal-body,
  #qa-body,
  #tasks-body,
  #wl-body,
  #tours-body,
  #rentals-body,
  #family-body,
  #events-body,
  #meetings-body,
  #wedding-detail-body {
    padding-left: var(--staff-content-inline-desktop) !important;
    padding-right: var(--staff-content-inline-desktop) !important;
  }

  .staff-hub-shell {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--staff-content-inline-desktop) !important;
    padding-right: var(--staff-content-inline-desktop) !important;
  }

  .checklist-admin-shell {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--staff-content-inline-desktop) !important;
    padding-right: var(--staff-content-inline-desktop) !important;
  }

  .ll-cm-shell {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--staff-content-inline-desktop) !important;
    padding-right: var(--staff-content-inline-desktop) !important;
  }

  .sc-editor-shell {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--staff-content-inline-desktop) !important;
    padding-right: var(--staff-content-inline-desktop) !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  :root {
    --staff-sidebar-width-desktop: 210px;
  }
}

/* Final mobile-first typography and interaction remediation */
:root {
  --staff-font-sans: "Manrope", "Jost", "Helvetica Neue", sans-serif;
  --staff-font-serif: "Cormorant Garamond", Georgia, serif;
  --staff-type-body: 15px;
  --staff-type-body-sm: 13px;
  --staff-type-label: 12px;
  --staff-mobile-gutter: clamp(14px, 4.6vw, 20px);
  --staff-mobile-card-pad: clamp(16px, 4.8vw, 22px);
  --staff-mobile-control-h: 48px;
  --staff-mobile-control-h-sm: 44px;
}

body,
body button,
body input,
body select,
body textarea,
#conn-bar,
.nav-tab,
.nav-label,
.staff-mobile-bottom-nav button,
.staff-mobile-bottom-nav-label,
.checklist-admin-btn,
.checklist-admin-inline-btn,
.ll-admin-btn,
.ll-admin-label,
.wl-subtab,
.wl-label,
.wl-label-hint,
.wl-optional,
.task-action-btn,
.sc-card-action,
.sc-detail-action-btn,
.ll-page-action-inline {
  font-family: var(--staff-font-sans) !important;
}

#logo-text-name,
.staff-page-title,
.ll-page-intro-title,
#cal-month-label,
#cal-detail-couple,
.card-couple,
#f-couple,
.couple-name,
.tasks-card-title,
.tasks-list-title,
.wl-form-title,
.wl-hist-heading,
.wdetail-hero-title,
.wdetail-topbar-title,
.stay-page-title,
.stay-card-name,
.fv-filename,
#modal-title,
#qa-modal-title,
#tour-modal-title,
#meeting-modal-title,
#stay-modal-title {
  font-family: var(--staff-font-serif) !important;
}

@media (max-width: 860px) {
  body {
    font-size: var(--staff-type-body) !important;
    line-height: 1.5 !important;
  }

  #conn-bar {
    padding: 10px 16px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.06em !important;
  }

  #header {
    padding: 14px var(--staff-mobile-gutter) 12px !important;
  }

  #header-top {
    gap: 12px !important;
  }

  #logo-text-name {
    font-size: clamp(20px, 6vw, 26px) !important;
    letter-spacing: 0.04em !important;
  }

  #logo-text-sub {
    display: block !important;
    font-family: var(--staff-font-sans) !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    color: rgba(220, 232, 244, 0.8) !important;
  }

  #logo-text-portal {
    display: none !important;
  }

  #mobile-menu-btn {
    width: var(--staff-mobile-control-h) !important;
    height: var(--staff-mobile-control-h) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  #weddings-actions,
  #stats,
  #search-section,
  #table-section,
  #cal-body,
  #qa-body,
  #tasks-body,
  #wl-body,
  #tours-body,
  #bride-messages-body,
  #rentals-body,
  #family-body,
  #events-body,
  #meetings-body,
  #checklist-settings-body,
  #portal-bridal-checklist-body,
  #wedding-detail-body,
  #sc-index-body,
  #sc-editor-body,
  #sc-detail-body,
  #sc-template-body,
  #sc-dash-body,
  #page-couple-management .ll-cm-shell,
  #page-admin-users .ll-admin-shell,
  #page-admin-permissions .ll-admin-shell,
  #page-site-settings,
  #page-reception-template-builder {
    padding-left: var(--staff-mobile-gutter) !important;
    padding-right: var(--staff-mobile-gutter) !important;
  }

  #table-section,
  #cal-body,
  #qa-body,
  #tasks-body,
  #wl-body,
  #tours-body,
  #bride-messages-body,
  #rentals-body,
  #family-body,
  #events-body,
  #meetings-body,
  #checklist-settings-body,
  #portal-bridal-checklist-body,
  #wedding-detail-body,
  #sc-index-body,
  #sc-editor-body,
  #sc-detail-body,
  #sc-template-body,
  #sc-dash-body,
  #page-couple-management .ll-cm-shell,
  #page-admin-users .ll-admin-shell,
  #page-admin-permissions .ll-admin-shell,
  #page-site-settings,
  #page-reception-template-builder {
    padding-bottom: calc(var(--staff-mobile-nav-offset) + 18px + env(safe-area-inset-bottom)) !important;
  }

  #cal-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #cal-filter-bar .cal-filter-chip,
  .cal-filter-chip,
  .cal-today-btn,
  .cal-nav-btn {
    min-height: var(--staff-mobile-control-h-sm) !important;
  }

  #cal-filter-bar .cal-filter-chip {
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  .cal-filter-text,
  .card-meta-label,
  .checklist-admin-label,
  .ll-admin-label {
    font-size: var(--staff-type-label) !important;
    line-height: 1.4 !important;
    letter-spacing: 0.12em !important;
  }

  .cal-list-meta,
  .cal-list-staff,
  .cal-mobile-empty-sub,
  .checklist-admin-card-sub,
  .checklist-admin-item-meta,
  .checklist-admin-empty,
  .ll-admin-panel-sub,
  .ll-admin-user-meta,
  .ll-admin-selected-copy {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .checklist-admin-input,
  .ll-admin-input,
  .ll-admin-select,
  .form-input,
  .wl-input {
    min-height: var(--staff-mobile-control-h) !important;
    font-size: 16px !important;
    border-radius: 16px !important;
  }

  textarea.checklist-admin-input,
  textarea.ll-admin-input,
  textarea.form-input,
  textarea.wl-input {
    min-height: 120px !important;
  }

  .checklist-admin-btn,
  .ll-admin-btn,
  .sc-card-action,
  .sc-detail-action-btn,
  .task-action-btn,
  .ll-page-action-inline,
  .edit-btn,
  .btn-save,
  .btn-cancel,
  .wl-save-btn,
  .wl-cancel-edit-btn,
  .qa-modal-submit,
  .qa-modal-cancel {
    min-height: var(--staff-mobile-control-h) !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    border-radius: 16px !important;
  }

  .checklist-admin-inline-btn {
    min-height: var(--staff-mobile-control-h-sm) !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    border-radius: 14px !important;
  }

  #page-checklist-settings .checklist-admin-card,
  #page-checklist-settings .checklist-admin-item,
  #page-site-settings .ll-admin-panel {
    padding: var(--staff-mobile-card-pad) !important;
    border-radius: 22px !important;
  }

  #page-checklist-settings .checklist-admin-card-title,
  #page-site-settings .ll-admin-title,
  #page-site-settings .ll-admin-panel-title,
  .ll-page-intro-title {
    font-size: clamp(21px, 5.8vw, 28px) !important;
    line-height: 1.14 !important;
  }

  #page-checklist-settings .checklist-admin-item-head,
  #page-portal-bridal-checklist .checklist-admin-item-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #page-checklist-settings .checklist-admin-item-actions,
  #page-portal-bridal-checklist .checklist-admin-item-actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 10px !important;
    justify-content: stretch !important;
  }

  #page-checklist-settings .checklist-admin-item-actions--quad,
  #page-portal-bridal-checklist .checklist-admin-item-actions--quad {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #page-checklist-settings .checklist-admin-inline-btn,
  #page-portal-bridal-checklist .checklist-admin-inline-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  #page-checklist-settings .checklist-admin-item-actions--quad .checklist-admin-inline-btn,
  #page-portal-bridal-checklist .checklist-admin-item-actions--quad .checklist-admin-inline-btn {
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    letter-spacing: 0.06em !important;
  }

  #page-wedding-detail .wdetail-topbar {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  #page-wedding-detail .wdetail-topbar-title {
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: clamp(19px, 5.6vw, 25px) !important;
    line-height: 1.16 !important;
  }

  #page-wedding-detail .wdetail-topbar-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }

  #page-wedding-detail .wdetail-topbar-actions > * {
    width: 100% !important;
  }

  #page-reception-template-builder .planner-tool-cat,
  #page-reception-template-builder .planner-tpl-sub,
  #page-reception-template-builder .planner-obj-item .oc {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  #page-reception-template-builder .planner-obj-item,
  #page-reception-template-builder .planner-tool-btn,
  #page-reception-template-builder .planner-action-btn,
  #page-reception-template-builder .planner-inline-btn,
  #page-reception-template-builder .planner-layer-btn {
    min-height: var(--staff-mobile-control-h) !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    border-radius: 16px !important;
  }

}

@media (max-width: 560px) {
  #cal-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .staff-mobile-bottom-nav {
    left: 8px !important;
    right: 8px !important;
  }

  .staff-mobile-bottom-nav button {
    min-height: 58px !important;
  }

  .staff-mobile-bottom-nav-label {
    font-size: 11px !important;
  }

  #page-checklist-settings .checklist-admin-item-actions,
  #page-portal-bridal-checklist .checklist-admin-item-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #page-checklist-settings .checklist-admin-item-actions--quad,
  #page-portal-bridal-checklist .checklist-admin-item-actions--quad {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #page-wedding-detail .wdetail-topbar-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 359px) {
  #page-checklist-settings .checklist-admin-item-actions--quad,
  #page-portal-bridal-checklist .checklist-admin-item-actions--quad {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  #page-checklist-settings .checklist-admin-btn.primary,
  #page-site-settings .ll-admin-btn.primary {
    min-height: var(--staff-mobile-control-h) !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
  }

  .checklist-admin-field-help {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .cal-today-btn,
  #cal-filter-bar .cal-filter-chip,
  .cal-filter-chip {
    font-size: 12px !important;
  }

  #page-reception-template-builder .rtb-summary-label,
  #page-reception-template-builder .planner-guest-badge small {
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.08em !important;
  }

  #page-reception-template-builder .planner-field label {
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.12em !important;
  }

  #page-reception-template-builder .planner-snap-row {
    position: relative;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--staff-panel-border);
    gap: 0 !important;
  }

  #page-reception-template-builder #planner-snap-toggle {
    position: absolute;
    opacity: 0;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    pointer-events: none;
  }

  #page-reception-template-builder .planner-snap-row label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding-left: 34px;
    font-size: 13px !important;
    color: var(--staff-text-soft);
    cursor: pointer;
  }

  #page-reception-template-builder .planner-snap-row label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    border-radius: 7px;
    border: 1.5px solid var(--staff-primary-border);
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  }

  #page-reception-template-builder .planner-snap-row label::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 7px;
    height: 12px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-58%) rotate(45deg) scale(0);
    transition: transform 0.16s ease;
  }

  #page-reception-template-builder #planner-snap-toggle:checked + label::before {
    background: linear-gradient(180deg, var(--staff-primary) 0%, var(--staff-primary-strong) 100%);
    border-color: transparent;
  }

  #page-reception-template-builder #planner-snap-toggle:checked + label::after {
    transform: translateY(-58%) rotate(45deg) scale(1);
  }

  #page-reception-template-builder #planner-snap-toggle:focus-visible + label::before {
    outline: 2px solid rgba(50, 110, 184, 0.42);
    outline-offset: 3px;
  }
}

/* Unified schedule/stay card treatment */
.meeting-log-card {
  background: #ffffff !important;
  border: 1px solid rgba(219, 226, 236, 0.96) !important;
  border-radius: 18px !important;
  box-shadow: var(--staff-shadow-sm) !important;
  overflow: hidden !important;
}

.meeting-log-card:hover {
  box-shadow: var(--staff-shadow-md) !important;
}

.tour-log-summary,
.meeting-log-summary,
#rentals-body .stay-card-summary,
#family-body .stay-card-summary,
#events-body .stay-card-summary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.32)) !important;
}

.tour-log-summary,
.meeting-log-summary {
  grid-template-columns: 58px minmax(0, 1.3fr) auto auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 22px 24px !important;
}

#rentals-body .stay-card-summary-btn,
#family-body .stay-card-summary-btn,
#events-body .stay-card-summary-btn {
  grid-column: 1 / -1 !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 22px 24px !important;
}

.tour-log-summary:hover,
.meeting-log-summary:hover,
#rentals-body .stay-card-summary:hover,
#family-body .stay-card-summary:hover,
#events-body .stay-card-summary:hover {
  background: #f8fbff !important;
}

.tour-log-main,
.meeting-log-main {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.tour-log-meta,
.meeting-log-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px 12px !important;
  min-width: 210px !important;
}

.tour-log-avatar,
.meeting-log-avatar {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  flex-shrink: 0 !important;
  font-family: var(--staff-font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(91, 74, 97, 0.14) !important;
}

.tour-log-summary-date,
.meeting-log-summary-date,
#rentals-body .stay-card-name,
#family-body .stay-card-name,
#events-body .stay-card-name {
  font-family: var(--staff-font-serif) !important;
  font-size: 26px !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--staff-text) !important;
}

.tour-log-summary-name,
.meeting-log-summary-name {
  margin-top: 8px !important;
  font-family: var(--staff-font-sans) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: var(--staff-text-soft) !important;
}

#rentals-body .stay-card-meta-label,
#family-body .stay-card-meta-label,
#events-body .stay-card-meta-label,
#rentals-body .stay-detail-block-label,
#family-body .stay-detail-block-label,
#events-body .stay-detail-block-label,
.meeting-log-section-label {
  margin-bottom: 8px !important;
  font-family: var(--staff-font-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--staff-text-muted) !important;
}

#rentals-body .stay-card-meta-value,
#family-body .stay-card-meta-value,
#events-body .stay-card-meta-value,
#rentals-body .stay-detail-block-text,
#family-body .stay-detail-block-text,
#events-body .stay-detail-block-text,
.meeting-log-section-text {
  font-family: var(--staff-font-sans) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--staff-text-soft) !important;
}

.tour-log-pill,
.meeting-log-pill,
.tour-upcoming-badge,
.meeting-upcoming-badge {
  min-height: 32px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  font-family: var(--staff-font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.tour-upcoming-badge,
.meeting-upcoming-badge {
  background: #eef5ed !important;
  border-color: #d6e4d7 !important;
  color: #527757 !important;
}

.tour-log-pill.assignee,
.meeting-log-pill.assignee {
  background: #eef4fb !important;
  border-color: #d8e3f0 !important;
  color: #4e6a87 !important;
}

.meeting-log-pill:not(.assignee),
.tour-log-pill:not(.assignee) {
  background: var(--staff-primary-soft) !important;
  border-color: var(--staff-primary-border) !important;
  color: var(--staff-primary-strong) !important;
}

#rentals-body .stay-chip,
#family-body .stay-chip,
#events-body .stay-chip {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid #d8e3f0 !important;
  background: #eef4fb !important;
  font-family: var(--staff-font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  color: #4e6a87 !important;
}

.tour-log-chevron,
.meeting-log-chevron,
#rentals-body .stay-card-chevron,
#family-body .stay-card-chevron,
#events-body .stay-card-chevron {
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: end !important;
  border-radius: 999px !important;
  border: 1px solid var(--staff-panel-border) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #7e8b99 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.meeting-log-detail,
#rentals-body .stay-card-detail,
#family-body .stay-card-detail,
#events-body .stay-card-detail {
  border-top: 1px solid rgba(223, 230, 238, 0.92) !important;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.82), rgba(244, 247, 251, 0.9)) !important;
}

.meeting-log-actions,
#rentals-body .stay-card-actions,
#family-body .stay-card-actions,
#events-body .stay-card-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(223, 230, 238, 0.92) !important;
}

.meeting-log-edit-btn,
.meeting-log-del-btn,
#rentals-body .stay-action-btn,
#family-body .stay-action-btn,
#events-body .stay-action-btn {
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 1.5px solid var(--staff-panel-border) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-family: var(--staff-font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--staff-text-soft) !important;
}

.meeting-log-edit-btn:hover,
.meeting-log-del-btn:hover,
#rentals-body .stay-action-btn:hover,
#family-body .stay-action-btn:hover,
#events-body .stay-action-btn:hover {
  border-color: var(--staff-primary-border) !important;
  background: #f8fbff !important;
  color: var(--staff-primary-strong) !important;
}

@media (max-width: 960px) {
  .tour-log-summary,
  .meeting-log-summary {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    gap: 14px !important;
    padding: 18px 18px 20px !important;
  }

  .tour-log-meta,
  .meeting-log-meta {
    grid-column: 2 / 3 !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  #rentals-body .stay-card-summary-btn,
  #family-body .stay-card-summary-btn,
  #events-body .stay-card-summary-btn {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 18px 18px 20px !important;
  }

  .tour-log-summary-date,
  .meeting-log-summary-date,
  #rentals-body .stay-card-name,
  #family-body .stay-card-name,
  #events-body .stay-card-name {
    font-size: 20px !important;
  }

  .tour-log-summary-name,
  .meeting-log-summary-name,
  #rentals-body .stay-card-meta-value,
  #family-body .stay-card-meta-value,
  #events-body .stay-card-meta-value,
  #rentals-body .stay-detail-block-text,
  #family-body .stay-detail-block-text,
  #events-body .stay-detail-block-text,
  .meeting-log-section-text {
    font-size: 14px !important;
  }

  .tour-log-pill,
  .meeting-log-pill,
  .tour-upcoming-badge,
  .meeting-upcoming-badge,
  #rentals-body .stay-chip,
  #family-body .stay-chip,
  #events-body .stay-chip {
    min-height: 30px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 640px) {
  .tour-log-summary,
  .meeting-log-summary {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }

  .tour-log-chevron,
  .meeting-log-chevron,
  #rentals-body .stay-card-chevron,
  #family-body .stay-card-chevron,
  #events-body .stay-card-chevron {
    justify-self: start !important;
  }

  .tour-log-chevron,
  .meeting-log-chevron {
    grid-column: 2 / 3 !important;
  }
}

/* Stock checklist pages should fill the full desktop content lane. */
@media (min-width: 901px) {
  body.page-stock-checklists #app-main,
  body.page-stock-checklist-editor #app-main,
  body.page-stock-checklist-detail #app-main,
  body.page-stock-checklist-template #app-main,
  body.page-stock-checklist-dashboard #app-main {
    width: auto !important;
    max-width: none !important;
  }

  body.page-stock-checklists .checklist-admin-shell,
  body.page-stock-checklist-detail .checklist-admin-shell,
  body.page-stock-checklist-template .checklist-admin-shell,
  body.page-stock-checklist-dashboard .checklist-admin-shell,
  body.page-stock-checklist-editor .sc-editor-shell {
    max-width: none !important;
  }
}

/* Wedding summary should read as lightweight metadata, not primary dashboard cards. */
#stats {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px !important;
  padding: 0 0 12px !important;
}

#stats .stat-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(190, 210, 235, 0.78) !important;
  border-radius: 999px !important;
  background: rgba(247, 250, 253, 0.92) !important;
  box-shadow: none !important;
}

#stats .stat-num {
  font-family: 'Jost', 'Helvetica Neue', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--ll-text) !important;
}

#stats .stat-num.warn {
  color: #ad5b24 !important;
}

#stats .stat-label {
  margin-top: 0 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #708196 !important;
  white-space: nowrap;
}

@media (max-width: 900px) {
  #stats {
    gap: 6px !important;
    padding-bottom: 10px !important;
  }

  #stats .stat-item {
    padding: 6px 10px !important;
  }

  #stats .stat-num {
    font-size: 14px !important;
  }

  #stats .stat-label {
    font-size: 9px !important;
  }
}

@media (max-width: 768px) {
  #stats {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 14px 10px !important;
  }

  #stats .stat-item {
    flex: 1 1 0 !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  #stats .stat-num {
    font-size: 13px !important;
  }

  #stats .stat-label {
    font-size: 8px !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 420px) {
  #stats {
    gap: 4px !important;
    padding: 0 10px 8px !important;
  }

  #stats .stat-item {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 5px 6px !important;
    text-align: center !important;
  }

  #stats .stat-num {
    font-size: 14px !important;
  }

  #stats .stat-label {
    font-size: 7px !important;
  }
}

@media (max-width: 860px) {
  #modal-scroll-inner {
    padding: 0 !important;
    align-items: flex-start !important;
    min-height: 100dvh;
  }

  #modal-box {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
}

/* Desktop page shells should use the full content lane and rely on padding,
   not max-width caps, for spacing. */
@media (min-width: 901px) {
  #weddings-actions,
  #stats,
  #search-section,
  #table-section,
  #cal-body,
  #qa-body,
  #tasks-body,
  #wl-body,
  #bride-messages-body,
  #tours-body,
  #rentals-body,
  #family-body,
  #events-body,
  #meetings-body,
  #wedding-detail-body,
  .stay-page-body,
  .staff-page-header,
  .staff-section-shell,
  .staff-hub-shell,
  .checklist-admin-shell,
  .sc-editor-shell,
  .ll-cm-shell,
  #page-admin-users .ll-admin-shell,
  #page-admin-permissions .ll-admin-shell {
    width: 100%;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #weddings-actions,
  #stats,
  #search-section,
  #table-section,
  #cal-body,
  #qa-body,
  #tasks-body,
  #wl-body,
  #bride-messages-body,
  #tours-body,
  #rentals-body,
  #family-body,
  #events-body,
  #meetings-body,
  #wedding-detail-body {
    padding-left: var(--staff-content-inline-desktop) !important;
    padding-right: var(--staff-content-inline-desktop) !important;
  }

  .stay-page-body,
  .staff-page-header,
  .staff-section-shell,
  .staff-hub-shell,
  .checklist-admin-shell,
  .sc-editor-shell,
  .ll-cm-shell {
    padding-left: var(--staff-content-inline-desktop) !important;
    padding-right: var(--staff-content-inline-desktop) !important;
  }
}

/* Tours should share the same page-shell treatment as the other schedule tabs. */
#tours-body .stay-toolbar {
  margin-top: 10px !important;
  margin-bottom: 14px !important;
  padding: 0 4px 14px !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(117,102,88,0.16) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#tours-body .stay-subtabs {
  gap: 10px !important;
  border-bottom: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#tours-body .stay-subtab {
  min-height: 44px !important;
  padding: 10px 18px !important;
  border: 1px solid rgba(209,218,231,0.96) !important;
  border-radius: 999px !important;
  margin-bottom: 0 !important;
  background: #ffffff !important;
  color: #5a687c !important;
}

#tours-body .stay-subtab.active {
  background: #e4edf7 !important;
  color: #1e2d42 !important;
  border-color: #b7c8dc !important;
  box-shadow: 0 10px 24px rgba(100,116,139,0.12) !important;
}

#tours-body .stay-add-btn {
  margin-bottom: 0 !important;
  border-color: #62728b !important;
  background: linear-gradient(180deg,#73839b 0%,#62728b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(98,114,139,0.16) !important;
}

#tours-body .stay-add-btn:hover {
  transform: translateY(-1px) !important;
  border-color: #5d6d86 !important;
  background: #5d6d86 !important;
}

@media (min-width: 901px) {
  #app-main {
    width: auto !important;
    margin-right: var(--staff-sidebar-gap-desktop, 12px) !important;
  }
}

/* ═══ Settings tabs: unified layout & background ═══
   Normalizes all Settings hub pages so the header, tabs, and content
   sit at the same position and share the same neutral background.    */

/* 1. Consistent page-level background for every settings tab */
#page-site-settings,
#page-reception-template-builder,
#page-checklist-settings,
#page-portal-bridal-checklist,
#page-portal-credentials,
#page-stock-checklist-template,
#page-admin-users,
#page-admin-permissions {
  background:
    radial-gradient(circle at top left, rgba(226,232,242,0.32), transparent 26%),
    radial-gradient(circle at top right, rgba(240,244,250,0.72), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #fafbfd 48%, #f5f7fb 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 2. Remove per-page body-wrapper backgrounds that override the above */
#checklist-settings-body,
#portal-bridal-checklist-body,
#page-stock-checklist-template #sc-template-body {
  background: transparent !important;
}

/* 3. Consistent inner content spacing below the hub shell.
      checklist-admin-shell is shared by most tabs; admin pages use ll-admin-shell.
      Reception Template Builder keeps max-width:none because it has a wide canvas. */
#page-site-settings > .checklist-admin-shell,
#page-checklist-settings .checklist-admin-shell,
#page-portal-bridal-checklist .checklist-admin-shell,
#page-portal-credentials .checklist-admin-shell,
#page-stock-checklist-template .checklist-admin-shell,
#page-reception-template-builder > .checklist-admin-shell,
#page-admin-users > .ll-admin-shell,
#page-admin-permissions > .ll-admin-shell {
  margin-left: auto;
  margin-right: auto;
  padding: 0 40px 64px !important;
  background: transparent !important;
}

#page-site-settings > .checklist-admin-shell,
#page-checklist-settings .checklist-admin-shell,
#page-portal-bridal-checklist .checklist-admin-shell,
#page-portal-credentials .checklist-admin-shell,
#page-stock-checklist-template .checklist-admin-shell,
#page-admin-users > .ll-admin-shell,
#page-admin-permissions > .ll-admin-shell {
  max-width: 1320px;
}

#page-site-settings > .checklist-admin-shell {
  max-width: none;
}

/* 4. Normalise admin-users / admin-permissions page-level padding
      so the hub shell lands in the same spot as other settings tabs */
#page-admin-users,
#page-admin-permissions {
  padding: 0 !important;
  min-height: auto !important;
}


/* ═══ Mobile modal fix ═══ */
@media (max-width: 768px) {
  /* Header: wrap title + subtitle so close btn stays top-right */
  #modal-head {
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
    padding: 16px 14px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
  }

  #modal-title {
    font-size: 20px !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    word-break: break-word !important;
  }

  #modal-title-sub,
  .modal-subtitle {
    order: 3 !important;
    width: 100% !important;
    font-size: 10px !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
  }

  .modal-close-btn {
    order: 2 !important;
    width: 36px !important;
    height: 36px !important;
  }

  /* Gap between header and first section */
  #modal-box > .ms:first-of-type {
    margin-top: 14px !important;
  }

  /* Larger labels for readability */
  .f-field label {
    font-size: 11px !important;
  }

  /* Bigger touch targets on inputs */
  .f-field input,
  .f-field select {
    padding: 12px 14px !important;
    font-size: 16px !important;
  }

  .f-field textarea {
    font-size: 16px !important;
  }

  /* Tighter section margins so content isn't too spaced */
  .ms {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  /* Checklist mobile spacing */
  .clx-form-group {
    margin-bottom: 10px;
  }

  .clx-form-subgroup {
    padding: 10px 12px !important;
  }

  .clx-form-task-grid {
    gap: 8px !important;
    grid-template-columns: 1fr !important;
  }

  .modal-checklist-grid .check-label {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  /* Footer buttons */
  #modal-foot {
    gap: 10px !important;
    padding: 14px 10px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .ghost-btn,
  .dark-btn,
  #modal-save-btn {
    min-height: 48px !important;
    font-size: 12px !important;
  }
}

/* ═══ Unified "Add" button style for all section toolbars ═══ */
#tours-add-btn,
#meetings-add-btn,
#rentals-add-btn,
#family-add-btn,
#events-add-btn,
#tours-body .stay-add-btn,
#rentals-body .stay-add-btn,
#family-body .stay-add-btn,
#events-body .stay-add-btn,
#meetings-body .stay-add-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--staff-primary-border) !important;
  background: #ffffff !important;
  color: var(--staff-primary-strong) !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 22px rgba(58, 84, 122, 0.08) !important;
  transition: all 0.18s !important;
  margin-bottom: 0 !important;
}

#tours-add-btn:hover,
#meetings-add-btn:hover,
#rentals-add-btn:hover,
#family-add-btn:hover,
#events-add-btn:hover,
#tours-body .stay-add-btn:hover,
#rentals-body .stay-add-btn:hover,
#family-body .stay-add-btn:hover,
#events-body .stay-add-btn:hover,
#meetings-body .stay-add-btn:hover {
  transform: translateY(-1px) !important;
  background: var(--staff-primary-soft) !important;
  border-color: var(--staff-primary) !important;
}

@media (max-width: 768px) {
  #tours-add-btn,
  #meetings-add-btn,
  #rentals-add-btn,
  #family-add-btn,
  #events-add-btn,
  #tours-body .stay-add-btn,
  #rentals-body .stay-add-btn,
  #family-body .stay-add-btn,
  #events-body .stay-add-btn,
  #meetings-body .stay-add-btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ── Weddings topbar: button + stats on same row ── */
#weddings-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px 24px !important;
  padding: 0 var(--staff-content-inline-desktop, 22px) !important;
  margin-top: 14px !important;
}

#weddings-topbar #weddings-actions {
  display: flex !important;
  align-items: center !important;
  padding: 6px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

#weddings-topbar #stats {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 360px !important;
  min-width: 0 !important;
}

@media (min-width: 901px) {
  #search-section,
  #table-section,
  #search-section.staff-section-shell,
  #table-section.staff-section-shell {
    padding-left: var(--staff-content-inline-desktop, 22px) !important;
    padding-right: var(--staff-content-inline-desktop, 22px) !important;
  }

  #page-site-settings > .checklist-admin-shell,
  #page-checklist-settings .checklist-admin-shell,
  #page-portal-bridal-checklist .checklist-admin-shell,
  #page-portal-credentials .checklist-admin-shell,
  #page-stock-checklist-template .checklist-admin-shell,
  #page-reception-template-builder > .checklist-admin-shell,
  #page-admin-users > .ll-admin-shell,
  #page-admin-permissions > .ll-admin-shell {
    padding-left: var(--staff-content-inline-desktop, 22px) !important;
    padding-right: var(--staff-content-inline-desktop, 22px) !important;
  }
}

@media (max-width: 900px) {
  #weddings-topbar {
    align-items: flex-start !important;
    gap: 12px 16px !important;
  }

  #weddings-topbar #stats {
    flex-basis: 100% !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 640px) {
  #weddings-topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 0 14px !important;
    margin-top: 12px !important;
  }

  #weddings-topbar #stats {
    width: 100% !important;
  }

  #weddings-topbar #add-btn {
    width: 100% !important;
  }
}

/* Keep schedule-oriented modal headers visually identical across tour, meeting, and stay flows. */
#tour-modal-head,
#meeting-modal-head,
#stay-modal-head,
body.page-family #stay-modal-head,
body.page-events #stay-modal-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 22px 26px 18px !important;
  background: linear-gradient(180deg, var(--staff-primary) 0%, var(--staff-primary-strong) 100%) !important;
  border-radius: 18px 18px 0 0 !important;
  flex-shrink: 0 !important;
}

#tour-modal-kicker,
#meeting-modal-kicker,
#stay-modal-kicker {
  color: rgba(255,255,255,0.74) !important;
}

#tour-modal-title,
#meeting-modal-title,
#stay-modal-title {
  color: #ffffff !important;
}

.tour-modal-close,
.meeting-modal-close,
.stay-modal-close {
  border-color: rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.84) !important;
}

.tour-modal-close:hover,
.meeting-modal-close:hover,
.stay-modal-close:hover {
  border-color: rgba(255,255,255,0.55) !important;
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
}

@media (max-width: 768px) {
  #tour-modal-box,
  #meeting-modal-box,
  #stay-modal-box {
    border-radius: 22px 22px 0 0 !important;
  }

  #tour-modal-head,
  #meeting-modal-head,
  #stay-modal-head {
    padding: 18px 18px 14px !important;
    border-radius: 22px 22px 0 0 !important;
  }
}

/* Final standardized color system */
:root {
  --ll-blue-050: #f7fbff;
  --ll-blue-075: #eef5ff;
  --ll-blue-100: #e8f2ff;
  --ll-blue-150: #deebff;
  --ll-blue-200: #d2e1f2;
  --ll-blue-300: #c3d9f3;
  --ll-blue-400: #a4c2e8;
  --ll-blue-500: #7ea6d8;
  --ll-blue-600: #4f86cc;
  --ll-blue-700: #326eb8;
  --ll-blue-800: #24589a;
  --ll-blue-900: #1d3147;
  --ll-gray-000: #ffffff;
  --ll-gray-025: #fbfcfe;
  --ll-gray-050: #f7f9fc;
  --ll-gray-075: #f2f6fb;
  --ll-gray-100: #edf2f7;
  --ll-gray-150: #e6edf4;
  --ll-gray-200: #d7e0ea;
  --ll-gray-300: #c3cfdd;
  --ll-gray-400: #9aacbf;
  --ll-gray-500: #7a8ea4;
  --ll-gray-600: #5f7891;
  --ll-gray-700: #51657d;
  --ll-gray-800: #2d4057;
  --ll-gray-900: #1a2232;
  --ll-primary: var(--ll-blue-700);
  --ll-primary-dark: var(--ll-blue-800);
  --ll-primary-hover: var(--ll-blue-800);
  --ll-primary-grad: linear-gradient(135deg, var(--ll-blue-600) 0%, var(--ll-blue-700) 100%);
  --ll-primary-grad-hover: linear-gradient(135deg, var(--ll-blue-700) 0%, var(--ll-blue-800) 100%);
  --ll-primary-light: var(--ll-blue-300);
  --ll-primary-light-bg: var(--ll-blue-075);
  --ll-primary-soft: var(--ll-blue-075);
  --ll-primary-border: var(--ll-blue-300);
  --ll-primary-strong: var(--ll-blue-900);
  --ll-ink: var(--ll-gray-900);
  --ll-ink-muted: var(--ll-gray-600);
  --ll-ink-subtle: var(--ll-gray-500);
  --ll-border: rgba(195, 217, 243, 0.92);
  --ll-border-focus: var(--ll-blue-600);
  --ll-border-focus-ring: rgba(79, 134, 204, 0.18);
  --ll-danger: var(--ll-blue-900);
  --ll-danger-bg: var(--ll-blue-075);
  --ll-danger-border: var(--ll-blue-300);
  --ll-success: var(--ll-blue-700);
  --ll-success-bg: var(--ll-blue-050);
  --ll-modal-header: linear-gradient(135deg, var(--ll-blue-900) 0%, var(--ll-blue-800) 100%);
  --ll-btn-shadow: 0 8px 20px rgba(41, 79, 125, 0.14);
  --staff-blue-050: var(--ll-blue-050);
  --staff-blue-075: var(--ll-blue-075);
  --staff-blue-100: var(--ll-blue-100);
  --staff-blue-150: var(--ll-blue-150);
  --staff-blue-200: var(--ll-blue-200);
  --staff-blue-300: var(--ll-blue-300);
  --staff-blue-400: var(--ll-blue-400);
  --staff-blue-500: var(--ll-blue-500);
  --staff-blue-600: var(--ll-blue-600);
  --staff-blue-700: var(--ll-blue-700);
  --staff-blue-800: var(--ll-blue-800);
  --staff-bg: var(--ll-blue-075);
  --staff-surface: rgba(255, 255, 255, 0.94);
  --staff-surface-strong: #ffffff;
  --staff-surface-soft: var(--ll-blue-050);
  --staff-border: rgba(195, 217, 243, 0.9);
  --staff-border-strong: rgba(160, 186, 223, 0.96);
  --staff-text: var(--ll-gray-900);
  --staff-text-soft: var(--ll-gray-700);
  --staff-text-muted: var(--ll-gray-500);
  --staff-ink: var(--ll-blue-900);
  --staff-muted: var(--ll-gray-600);
  --staff-primary: var(--ll-blue-700);
  --staff-primary-strong: var(--ll-blue-800);
  --staff-primary-soft: var(--ll-blue-075);
  --staff-primary-border: var(--ll-blue-300);
  --staff-success: var(--ll-blue-700);
  --staff-success-soft: var(--ll-blue-050);
  --staff-success-border: var(--ll-blue-200);
  --staff-warning: var(--ll-gray-700);
  --staff-warning-soft: var(--ll-gray-050);
  --staff-warning-border: var(--ll-gray-200);
  --staff-danger: var(--ll-blue-900);
  --staff-danger-soft: var(--ll-blue-075);
  --staff-danger-border: var(--ll-blue-300);
  --staff-warm: var(--ll-blue-600);
  --staff-panel-border: var(--staff-border);
  --staff-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.96) 100%);
  --staff-panel-shadow: 0 20px 46px rgba(41, 79, 125, 0.12);
  --staff-soft-shadow: 0 14px 34px rgba(41, 79, 125, 0.08);
  --staff-shadow-sm: 0 10px 24px rgba(41, 79, 125, 0.08);
  --staff-shadow-md: 0 24px 60px rgba(41, 79, 125, 0.12);
  --staff-owner-pam: var(--ll-blue-700);
  --staff-owner-gary: var(--ll-blue-600);
  --staff-owner-maggie: #5e7fa7;
  --staff-owner-marianne: #427bc4;
  --staff-owner-lindsey: var(--ll-blue-500);
  --staff-owner-dan: #92b2dc;
  --staff-owner-unassigned: #aabdd6;
}

body {
  background:
    radial-gradient(circle at top left, rgba(210, 228, 249, 0.7), transparent 30%),
    radial-gradient(circle at top right, rgba(233, 242, 255, 0.88), transparent 24%),
    linear-gradient(180deg, var(--ll-gray-025) 0%, var(--ll-blue-075) 48%, var(--ll-blue-100) 100%);
  color: var(--staff-text);
}

.wdetail-task-pill.status.is-upcoming {
  background: var(--staff-warning-soft) !important;
  color: var(--staff-warning) !important;
}

.wdetail-task-pill.status.is-completed {
  background: var(--staff-success-soft) !important;
  color: var(--staff-success) !important;
}

.wdetail-task-item.is-upcoming {
  border-color: var(--staff-primary-border) !important;
  background: var(--staff-primary-soft) !important;
}

.wdetail-task-item.is-urgent {
  border-color: var(--staff-danger-border) !important;
  background: var(--staff-danger-soft) !important;
}

.wdetail-task-item.done {
  border-color: var(--staff-success-border) !important;
  background: var(--staff-success-soft) !important;
}

.checklist-admin-status.is-error,
.tour-log-pill.is-cancelled,
.meeting-log-pill.is-cancelled {
  color: var(--staff-danger) !important;
}

.checklist-admin-status.is-success {
  color: var(--staff-success) !important;
}

.wdetail-task-pill.owner {
  background: var(--staff-warning-soft) !important;
  color: var(--staff-text-soft) !important;
  border: 1px solid var(--staff-warning-border) !important;
}

.wdetail-task-pill.status.is-urgent {
  background: var(--staff-danger-soft) !important;
  color: var(--staff-danger) !important;
  border: 1px solid var(--staff-danger-border) !important;
}

.wdetail-task-pill.status.is-available {
  background: var(--staff-primary-soft) !important;
  color: var(--staff-primary) !important;
  border: 1px solid var(--staff-primary-border) !important;
}

/* Wedding detail tabbed shell */
#page-wedding-detail .ll-cm-detail-shell {
  gap: 18px;
}

#page-wedding-detail .ll-cm-detail-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(183,201,223,0.72);
  background:
    radial-gradient(circle at top right, rgba(47,95,167,0.12), rgba(47,95,167,0) 34%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
  box-shadow: 0 18px 38px rgba(31,44,63,0.08);
}

#page-wedding-detail .ll-cm-detail-head,
#page-wedding-detail .ll-cm-detail-tabs {
  position: relative;
  z-index: 1;
}

#page-wedding-detail .ll-cm-detail-head > div:first-child {
  display: grid;
  gap: 8px;
}

#page-wedding-detail .ll-cm-detail-sub {
  max-width: 720px;
}

#page-wedding-detail .ll-cm-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

#page-wedding-detail .wdetail-summary-badge {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 56px;
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(189,204,221,0.92);
  background: rgba(255,255,255,0.84);
  box-shadow: 0 6px 14px rgba(31,44,63,0.05);
  overflow: hidden;
}

#page-wedding-detail .wdetail-summary-badge::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: rgba(112,131,153,0.36);
}

#page-wedding-detail .wdetail-summary-badge.is-primary {
  background: linear-gradient(180deg, rgba(246,250,255,0.98) 0%, rgba(237,244,252,0.98) 100%);
}

#page-wedding-detail .wdetail-summary-badge-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #708399;
}

#page-wedding-detail .wdetail-summary-badge-value {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  color: #1f2a39;
  overflow-wrap: anywhere;
}

#page-wedding-detail .wdetail-summary-badge.tone-success {
  border-color: rgba(160,199,174,0.95);
  background: linear-gradient(180deg, rgba(245,252,247,0.98) 0%, rgba(236,247,239,0.98) 100%);
}

#page-wedding-detail .wdetail-summary-badge.tone-success::before {
  background: #4d8461;
}

#page-wedding-detail .wdetail-summary-badge.tone-success .wdetail-summary-badge-value {
  color: #355d44;
}

#page-wedding-detail .wdetail-summary-badge.tone-warn {
  border-color: rgba(233,201,127,0.95);
  background: linear-gradient(180deg, rgba(255,251,241,0.98) 0%, rgba(252,245,222,0.98) 100%);
}

#page-wedding-detail .wdetail-summary-badge.tone-warn::before {
  background: #b87f17;
}

#page-wedding-detail .wdetail-summary-badge.tone-warn .wdetail-summary-badge-value {
  color: #855d13;
}

#page-wedding-detail .wdetail-summary-badge.tone-danger {
  border-color: rgba(236,193,181,0.95);
  background: linear-gradient(180deg, rgba(255,248,246,0.98) 0%, rgba(253,238,233,0.98) 100%);
}

#page-wedding-detail .wdetail-summary-badge.tone-danger::before {
  background: #c16351;
}

#page-wedding-detail .wdetail-summary-badge.tone-danger .wdetail-summary-badge-value {
  color: #99473a;
}

#page-wedding-detail .wdetail-summary-badge.tone-info {
  border-color: rgba(191,209,237,0.95);
  background: linear-gradient(180deg, rgba(247,251,255,0.98) 0%, rgba(235,243,252,0.98) 100%);
}

#page-wedding-detail .wdetail-summary-badge.tone-info::before {
  background: #4a7cc4;
}

#page-wedding-detail .wdetail-summary-badge.tone-info .wdetail-summary-badge-value {
  color: #2f5fa7;
}

#page-wedding-detail .wdetail-summary-badge.tone-neutral {
  border-color: rgba(205,215,228,0.95);
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(246,248,251,0.98) 100%);
}

#page-wedding-detail .wdetail-summary-badge.tone-neutral::before {
  background: #7f8ea2;
}

#page-wedding-detail .ll-cm-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  padding: 0;
  overflow: visible;
  align-items: stretch;
}

#page-wedding-detail .ll-cm-detail-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  max-width: 100%;
  margin-bottom: 0;
  border-radius: 999px;
  border: 1px solid rgba(189,204,221,0.9);
  background: rgba(255,255,255,0.92);
  color: #55667a;
  padding: 10px 16px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: normal;
  text-align: center;
}

#page-wedding-detail .ll-cm-detail-tab.active {
  background: linear-gradient(180deg, #2f3b31 0%, #232c24 100%);
  border-color: #2f3b31;
  color: #fff;
  box-shadow: 0 10px 18px rgba(35,44,36,0.16);
}

#page-wedding-detail .ll-cm-detail-body {
  gap: 18px;
}

#page-wedding-detail .ll-cm-info-card {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(183,201,223,0.72);
  background: #fff;
}

#page-wedding-detail .ll-cm-info-card-title {
  margin-bottom: 14px;
  padding-bottom: 12px;
  font-size: 11px;
  letter-spacing: .14em;
  border-bottom: 1px solid rgba(225,233,242,0.92);
}

.wdetail-tab-panel[hidden] {
  display: none !important;
}

.wdetail-overview-panels,
.wdetail-doc-meta-grid,
.wdetail-payment-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.wdetail-staff-summary {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(225,233,242,0.92);
  font-size: 12px;
  line-height: 1.7;
  color: #506173;
}

#page-wedding-detail .wdetail-additional-contacts-card {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(220, 232, 244, 0.92);
  border-radius: 10px;
  background: #fbfdff;
}

#page-wedding-detail .wdetail-additional-contacts-list {
  display: grid;
  gap: 7px;
}

#page-wedding-detail .wdetail-additional-contact {
  display: grid;
  gap: 5px;
  padding: 8px 9px;
  border: 1px solid rgba(222, 232, 242, 0.88);
  border-radius: 8px;
  background: #fff;
}

#page-wedding-detail .wdetail-additional-contact-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

#page-wedding-detail .wdetail-contact-role {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #74869a;
}

#page-wedding-detail .wdetail-contact-name {
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: #23303d;
  overflow-wrap: anywhere;
}

#page-wedding-detail .wdetail-contact-details,
#page-wedding-detail .wdetail-contact-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

#page-wedding-detail .wdetail-contact-detail,
#page-wedding-detail .wdetail-contact-badge,
#page-wedding-detail .wdetail-additional-contacts-note {
  font-size: 10px;
  line-height: 1.35;
  color: #62758b;
}

#page-wedding-detail .wdetail-contact-detail {
  overflow-wrap: anywhere;
}

#page-wedding-detail .wdetail-contact-detail.is-email {
  color: #2c5f98;
}

#page-wedding-detail .wdetail-contact-badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: #eef5ff;
  color: #2f5fa7;
  font-weight: 700;
}

.wdetail-inline-note {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(245,249,254,0.92);
  border: 1px solid rgba(220,232,244,0.92);
}

.wdetail-inline-note strong {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #71849a;
}

.wdetail-inline-note span {
  font-size: 13px;
  line-height: 1.6;
  color: #2b3440;
  white-space: pre-wrap;
}

.wdetail-doc-group {
  display: grid;
  gap: 14px;
}

.wdetail-doc-group-grid {
  display: grid;
  gap: 14px;
}

.wdetail-doc-card-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.wdetail-doc-card-badges,
.wdetail-payment-row-meta,
.wdetail-payment-docs,
.wdetail-doc-missing-list,
.wdetail-doc-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wdetail-doc-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.wdetail-doc-field {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(220,232,244,0.92);
  background: rgba(249,252,255,0.96);
}

.wdetail-doc-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #73859a;
}

.wdetail-doc-value,
.wdetail-doc-value-standalone {
  font-size: 13px;
  line-height: 1.6;
  color: #25313d;
  white-space: pre-wrap;
  word-break: break-word;
}

.wdetail-doc-value-standalone {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(220,232,244,0.92);
  background: rgba(249,252,255,0.96);
}

.wdetail-doc-section {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.wdetail-doc-section-title,
.wdetail-doc-array-title {
  font-size: 12px;
  font-weight: 700;
  color: #314254;
}

.wdetail-doc-array-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.wdetail-doc-array-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(220,232,244,0.92);
  background: rgba(249,252,255,0.96);
}

.wdetail-doc-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(243,248,255,0.96);
  border: 1px solid rgba(220,232,244,0.92);
  color: #516579;
  font-size: 12px;
}

.wdetail-doc-tag.is-missing {
  background: rgba(255,244,240,0.98);
  border-color: rgba(228,176,157,0.72);
  color: #99523b;
}

.wdetail-doc-review-note {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(225,233,242,0.92);
}

.wdetail-doc-review-note strong {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #73859a;
}

.wdetail-doc-review-note span,
.wdetail-doc-empty {
  font-size: 13px;
  line-height: 1.6;
  color: #536678;
}

.wdetail-payment-list {
  display: grid;
  gap: 12px;
}

.wdetail-payment-row {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(220,232,244,0.92);
  background: rgba(249,252,255,0.96);
}

.wdetail-payment-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.wdetail-payment-row-title {
  font-size: 14px;
  font-weight: 700;
  color: #24303c;
}

.wdetail-payment-row-sub {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #687b8f;
}

.wdetail-payment-row-amount {
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.wdetail-payment-row-amount strong {
  font-size: 15px;
  color: #24303c;
}

.wdetail-payment-row-amount span,
.wdetail-payment-row-note {
  font-size: 12px;
  line-height: 1.5;
  color: #5d6e81;
}

.wdetail-layout-shell {
  display: grid;
  gap: 18px;
}

.wdetail-layout-preview-card {
  display: grid;
  gap: 14px;
}

.wdetail-layout-preview-frame {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(215,226,239,0.96);
  background: linear-gradient(180deg, rgba(246,250,255,0.98) 0%, rgba(239,246,252,0.96) 100%);
  overflow: auto;
}

.wdetail-layout-svg {
  display: block;
  width: 100%;
  min-width: 280px;
  height: auto;
}

.wdetail-layout-canvas {
  fill: #edf3f9;
}

.wdetail-layout-room {
  fill: #ffffff;
  stroke: #bdd0e2;
  stroke-width: 4;
}

.wdetail-layout-grid {
  fill: url(#wdetail-layout-grid);
  stroke: rgba(197,213,229,0.92);
  stroke-width: 2;
}

.wdetail-layout-room-title {
  fill: #5c7086;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .08em;
  text-anchor: middle;
  text-transform: uppercase;
}

.wdetail-layout-object {
  transform-box: fill-box;
  transform-origin: center;
}

.wdetail-layout-shape {
  stroke: #4e657d;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.wdetail-layout-shape.is-table {
  fill: #e7f0ff;
}

.wdetail-layout-shape.is-fixture {
  fill: #eef3f8;
}

.wdetail-layout-shape.is-sweetheart {
  fill: #f8eaee;
}

.wdetail-layout-shape.is-buffet {
  fill: #eef7ea;
}

.wdetail-layout-shape.is-bar {
  fill: #edf0ff;
}

.wdetail-layout-shape.is-stage {
  fill: #efeafe;
}

.wdetail-layout-shape.is-dance_floor {
  fill: #f4ebdf;
}

.wdetail-layout-shape.is-door {
  fill: #ffffff;
}

.wdetail-layout-label {
  fill: #263442;
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
}

.wdetail-layout-sub {
  fill: #6c7f93;
  font-size: 12px;
  text-anchor: middle;
}

.wdetail-layout-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wdetail-layout-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(215,226,239,0.96);
  background: rgba(250,252,255,0.98);
  color: #516476;
  font-size: 12px;
}

.wdetail-layout-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid #9fb6cf;
  background: #eef3f8;
}

.wdetail-layout-legend-swatch.is-table {
  background: #e7f0ff;
}

.wdetail-layout-legend-swatch.is-fixture {
  background: #eef3f8;
}

.wdetail-layout-legend-swatch.is-dance-floor {
  background: #f4ebdf;
}

.wdetail-layout-room-caption {
  font-size: 13px;
  line-height: 1.6;
  color: #536678;
}

.wdetail-layout-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.wdetail-layout-table-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(220,232,244,0.92);
  background: rgba(249,252,255,0.96);
}

.wdetail-layout-table-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.wdetail-layout-table-title {
  font-size: 14px;
  font-weight: 700;
  color: #263442;
}

.wdetail-layout-table-type {
  font-size: 12px;
  line-height: 1.5;
  color: #687b8f;
}

.wdetail-layout-table-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 960px) {
  .wdetail-overview-panels,
  .wdetail-doc-meta-grid,
  .wdetail-payment-panels {
    grid-template-columns: 1fr;
  }

  .wdetail-payment-row-head,
  .wdetail-doc-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wdetail-payment-row-amount {
    justify-items: start;
    text-align: left;
  }
}



.ll-cm-financial-body {
  display: grid;
  gap: 18px;
}

.ll-cm-financial-top-grid,
.ll-cm-financial-notes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ll-cm-financial-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ll-cm-financial-inline-total {
  font-size: 1.45rem;
  font-weight: 700;
  color: #1f4c78;
  margin-bottom: 8px;
}

.ll-cm-financial-section {
  display: grid;
  gap: 12px;
}

.ll-cm-financial-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ll-cm-financial-section-head h3 {
  margin: 0;
}

.ll-cm-financial-subtotal {
  font-weight: 700;
  color: #1f4c78;
}

.ll-cm-financial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ll-cm-financial-card {
  border: 1px solid rgba(31, 76, 120, 0.12);
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(180deg, #ffffff, #f7fafc);
  display: grid;
  gap: 12px;
}

.ll-cm-financial-card.is-selected {
  border-color: rgba(31, 76, 120, 0.35);
  box-shadow: 0 14px 32px rgba(31, 76, 120, 0.08);
}

.ll-cm-financial-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ll-cm-financial-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.ll-cm-financial-toggle input {
  margin-top: 4px;
}

.ll-cm-financial-card-title {
  display: block;
  font-weight: 700;
  color: #14253a;
}

.ll-cm-financial-card-price {
  display: block;
  margin-top: 4px;
  color: #59738d;
}

.ll-cm-financial-card-total {
  min-width: 92px;
  text-align: right;
  font-weight: 700;
  color: #1f4c78;
}

.ll-cm-financial-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.ll-cm-financial-field {
  display: grid;
  gap: 6px;
}

.ll-cm-financial-warning {
  color: #8a5a00;
}

.ll-cm-financial-package-list {
  margin: 0;
  padding-left: 18px;
  color: #20364d;
}

.ll-cm-financial-package-list li + li {
  margin-top: 6px;
}

.ll-cm-financial-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ll-cm-financial-total-block strong {
  display: block;
  margin-top: 4px;
  font-size: 1.45rem;
  color: #1f4c78;
}

@media (max-width: 1180px) {
  .ll-cm-financial-top-grid,
  .ll-cm-financial-notes-grid,
  .ll-cm-financial-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ll-cm-financial-card-head,
  .ll-cm-financial-save-row {
    flex-direction: column;
    align-items: stretch;
  }

  .ll-cm-financial-card-total {
      text-align: left;
    }
  }

.ll-cm-payrec-body {
  display: grid;
  gap: 12px;
  font-size: 12px;
}

.ll-cm-payrec-body .ll-cm-panel-title,
.ll-cm-payrec-body .ll-cm-field-label {
  font-size: 8px;
  letter-spacing: 0.14em;
}

.ll-cm-payrec-body .ll-cm-tab-note {
  font-size: 10px;
  line-height: 1.35;
  color: #7b8794;
}

.ll-cm-payrec-body .ll-cm-chip {
  min-height: 20px;
  padding: 0 7px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ll-cm-payrec-body .ll-cm-btn {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: none;
}

.ll-cm-payrec-body .ll-cm-btn:hover {
  transform: none;
}

.ll-cm-payrec-body .ll-cm-btn.primary {
  background: #24364a;
  box-shadow: none;
}

.ll-cm-payrec-body .ll-cm-btn.secondary {
  background: #fbfcfe;
  color: #4b5b6d;
  border: 1px solid rgba(201, 214, 232, 0.88);
}

.ll-cm-payrec-body .ll-cm-btn.secondary:hover {
  background: #f4f7fb;
  border-color: rgba(182, 198, 219, 0.95);
}

.ll-cm-payrec-toolbar-actions [data-cm-payment-generate-invoice] {
  background: transparent;
  color: #6d7c8c;
}

.ll-cm-payrec-row-actions [data-cm-payment-delete-row],
.ll-cm-payrec-file-actions [data-cm-payment-file-delete] {
  background: transparent;
  color: #788696;
}

.ll-cm-payrec-body .ll-cm-input {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 11px;
}

.ll-cm-payrec-body .ll-cm-review-textarea {
  min-height: 72px;
  padding: 8px 9px;
}

.ll-cm-payrec-body .ll-cm-state-card,
.ll-cm-payrec-body .ll-cm-review-card,
.ll-cm-payrec-body .ll-cm-timeline-body {
  box-shadow: none;
}

.ll-cm-payrec-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

.ll-cm-payrec-summary-grid > .ll-cm-stat-card {
  min-height: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(201, 214, 232, 0.82);
}

.ll-cm-payrec-summary-grid > .ll-cm-stat-card .ll-cm-stat-label {
  font-size: 8px;
  letter-spacing: 0.11em;
}

.ll-cm-payrec-summary-grid > .ll-cm-stat-card .ll-cm-stat-value {
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.1;
}

.ll-cm-payrec-summary-grid > .ll-cm-stat-card:nth-child(1) .ll-cm-stat-value { color: #2a5fa0; }
.ll-cm-payrec-summary-grid > .ll-cm-stat-card:nth-child(2) .ll-cm-stat-value { color: #2d7a54; }
.ll-cm-payrec-summary-grid > .ll-cm-stat-card:nth-child(3) .ll-cm-stat-value { color: #9a7020; }
.ll-cm-payrec-summary-grid > .ll-cm-stat-card:nth-child(4) .ll-cm-stat-value { color: #a5443e; }

.ll-cm-payrec-summary-grid > .ll-cm-stat-card.payrec-has-overdue {
  background: #fef7f6;
  border-color: #e8c1bc;
}

.ll-cm-payrec-progress-card,
.ll-cm-payrec-toolbar-card,
.ll-cm-payrec-section,
.ll-cm-payrec-audit-card {
  background: #fff;
  border: 1px solid rgba(183, 201, 223, 0.72);
  border-radius: 12px;
}

.ll-cm-payrec-progress-card {
  grid-column: 1 / -1;
  padding: 10px 12px 11px;
  background: #fff;
}

.ll-cm-payrec-progress-head,
.ll-cm-payrec-toolbar-head,
.ll-cm-payrec-files-head,
.ll-cm-payrec-section-head,
.ll-cm-payrec-row-head,
.ll-cm-payrec-invoice-card,
.ll-cm-payrec-file-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ll-cm-payrec-progress-value {
  font-size: 18px;
  font-weight: 600;
  color: #1f4c78;
  line-height: 1;
  letter-spacing: -0.02em;
}

.ll-cm-payrec-progress-value.progress-complete { color: #2d7a54; }
.ll-cm-payrec-progress-value.progress-mid { color: #1f4c78; }
.ll-cm-payrec-progress-value.progress-low { color: #7a8a9e; }

.ll-cm-payrec-progress-track {
  height: 5px;
  margin-top: 8px;
  border-radius: 999px;
  background: #e7eef6;
  overflow: hidden;
}

.ll-cm-payrec-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #4f82c3;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.ll-cm-payrec-progress-fill::after {
  display: none;
}

.ll-cm-payrec-progress-fill.progress-complete-fill {
  background: #4b9d73;
}

.ll-cm-payrec-toolbar-card,
.ll-cm-payrec-section {
  padding: 10px 12px;
}

.ll-cm-payrec-toolbar-head {
  align-items: center;
}

.ll-cm-payrec-toolbar-head-actions-only {
  justify-content: flex-end;
}

.ll-cm-payrec-toolbar-actions,
.ll-cm-payrec-chip-row,
.ll-cm-payrec-row-actions,
.ll-cm-payrec-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ll-cm-payrec-toolbar-meta {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(215, 225, 239, 0.7);
}

.ll-cm-payrec-toolbar-meta .ll-cm-inline-status {
  font-size: 11px;
}

.ll-cm-payrec-chip-row {
  gap: 6px;
}

/* --- Row list & cards --- */
.ll-cm-payrec-row-list {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.ll-cm-payrec-row-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 0.95fr) minmax(0, 0.9fr) 14px;
  gap: 10px;
  align-items: center;
  padding: 0 12px 2px;
  color: #7b8794;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ll-cm-payrec-row-list-head span:last-child {
  width: 14px;
}

.ll-cm-payrec-row-card {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.ll-cm-payrec-row-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ll-cm-payrec-row-head .ll-cm-review-card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ll-cm-payrec-row-head {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 0.95fr) minmax(0, 0.9fr) 14px;
  gap: 10px;
}

.ll-cm-payrec-row-head:focus-visible {
  outline: 2px solid #3b7dd8;
  outline-offset: -2px;
}

.ll-cm-payrec-row-summary {
  display: contents;
}

.ll-cm-payrec-row-summary .ll-cm-chip {
  justify-self: start;
}

.ll-cm-payrec-row-meta {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.ll-cm-payrec-row-meta .ll-cm-field-label {
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c7a8c;
}

.ll-cm-payrec-row-meta strong {
  font-size: 11px;
  line-height: 1.3;
  color: #183659;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ll-cm-payrec-row-meta-method strong {
  max-width: none;
}

.ll-cm-payrec-row-meta-method[data-empty="true"] strong {
  color: #90a0b1;
  font-weight: 500;
}

.ll-cm-payrec-row-caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid #5a7a9e;
  border-bottom: 2px solid #5a7a9e;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  justify-self: end;
}

.ll-cm-payrec-row-card.is-expanded .ll-cm-payrec-row-head {
  border-bottom: 1px solid rgba(215, 225, 239, 0.78);
}

.ll-cm-payrec-row-card.is-expanded .ll-cm-payrec-row-caret {
  transform: rotate(-135deg);
}

.ll-cm-payrec-row-body {
  display: none;
  padding: 10px 12px 12px;
}

.ll-cm-payrec-row-card.is-expanded .ll-cm-payrec-row-body {
  display: block;
}

.ll-cm-payrec-row-body > * + * {
  margin-top: 10px;
}

.ll-cm-payrec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ll-cm-payrec-field-wide {
  grid-column: 1 / -1;
}

.ll-cm-payrec-readonly {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 7px;
  border: 1px solid #d3deec;
  background: #f7fbff;
  color: #183659;
  font-size: 11px;
  font-weight: 600;
}

.ll-cm-payrec-checkbox-field {
  justify-content: flex-start;
  align-self: end;
}

.ll-cm-payrec-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 7px;
  border: 1px solid #d3deec;
  background: #f7fbff;
  color: #183659;
  font-size: 11px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ll-cm-payrec-checkbox:has(input:checked) {
  border-color: #3d9a6d;
  background: #f0f9f4;
}

.ll-cm-payrec-checkbox input {
  margin: 0;
  accent-color: #3d9a6d;
}

.ll-cm-payrec-files-wrap {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(215, 225, 239, 0.9);
}

.ll-cm-payrec-upload-controls {
  display: grid;
  grid-template-columns: minmax(140px, 180px) auto;
  gap: 8px;
  align-items: end;
}

.ll-cm-payrec-file-list,
.ll-cm-payrec-invoice-list {
  display: grid;
  gap: 8px;
}

.ll-cm-payrec-file-card,
.ll-cm-payrec-invoice-card {
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid #dbe4ef;
  background: #f9fbfe;
}

.ll-cm-payrec-file-name {
  font-size: 12px;
  font-weight: 600;
  color: #183659;
}

.ll-cm-payrec-inline-chip {
  margin-left: 4px;
  vertical-align: middle;
}

.ll-cm-payrec-audit-card {
  padding: 10px 12px;
}

.ll-cm-payrec-audit-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-weight: 700;
  color: #183659;
  user-select: none;
  list-style: none;
}

.ll-cm-payrec-audit-summary::-webkit-details-marker { display: none; }
.ll-cm-payrec-audit-summary::marker { content: ""; }

.ll-cm-payrec-audit-summary > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ll-cm-payrec-audit-summary > span:first-child::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #5a7a9e;
  border-bottom: 2px solid #5a7a9e;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.ll-cm-payrec-audit-card[open] > .ll-cm-payrec-audit-summary > span:first-child::before {
  transform: rotate(-135deg);
}

.ll-cm-payrec-audit-card > .ll-cm-doc-note,
.ll-cm-payrec-audit-card > .ll-cm-timeline {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(215, 225, 239, 0.7);
}

.ll-cm-payrec-audit-card .ll-cm-timeline {
  gap: 8px;
}

.ll-cm-payrec-audit-card .ll-cm-timeline-item {
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 8px;
}

.ll-cm-payrec-audit-card .ll-cm-timeline-dot {
  width: 6px;
  height: 6px;
  margin-top: 6px;
  background: #8fa1b5;
  box-shadow: none;
}

.ll-cm-payrec-audit-card .ll-cm-timeline-body {
  padding: 9px 10px;
  border-radius: 10px;
  border-color: rgba(219, 228, 239, 0.92);
  background: #fcfdff;
}

.ll-cm-payrec-audit-card .ll-cm-timeline-head {
  margin-bottom: 2px;
}

.ll-cm-payrec-audit-card .ll-cm-timeline-message {
  font-size: 11px;
  line-height: 1.45;
}

.ll-cm-payrec-audit-card .ll-cm-timeline-meta {
  margin-top: 4px;
  font-size: 10px;
  color: #768597;
}

/* --- Empty / placeholder states --- */
.ll-cm-payrec-section > .ll-cm-state-card {
  margin-top: 8px;
  border-style: dashed;
  border-color: #c4d2e4;
  background: #fbfcfe;
}

.ll-cm-payrec-section > .ll-cm-doc-note {
  margin-top: 8px;
  padding: 11px 12px;
  border: 1px dashed #c4d2e4;
  border-radius: 12px;
  background: #fbfcfe;
  text-align: center;
  color: #758497;
  font-size: 11px;
}

.ll-cm-payrec-json-card {
  margin-top: 8px;
  border-top: 1px solid #e9eff6;
  padding-top: 8px;
}

.ll-cm-payrec-json-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.ll-cm-payrec-json-card summary {
  font-size: 10px;
  font-weight: 600;
  color: #526173;
  cursor: pointer;
}

.ll-cm-payrec-json-grid pre {
  margin: 8px 0 0;
  max-height: 160px;
  overflow: auto;
  padding: 8px;
  border-radius: 8px;
  background: #0f1725;
  color: #eef4ff;
  font-size: 10px;
}

.ll-cm-payrec-audit-chip-row,
.ll-cm-payrec-audit-actions {
  margin-top: 8px;
}

.ll-cm-payrec-row-actions {
  justify-content: flex-end;
}

.ll-cm-payrec-row-actions > .badge:first-child {
  margin-right: auto;
}

@media (max-width: 1200px) {
  .ll-cm-payrec-summary-grid,
  .ll-cm-payrec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .ll-cm-payrec-row-list-head {
    display: none;
  }

  .ll-cm-payrec-row-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .ll-cm-payrec-row-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
  }

  .ll-cm-payrec-row-meta {
    min-width: 0;
  }

  .ll-cm-payrec-row-meta strong {
    white-space: normal;
  }

  .ll-cm-payrec-row-caret {
    margin-left: auto;
  }
}

@media (max-width: 780px) {
  .ll-cm-payrec-summary-grid,
  .ll-cm-payrec-grid,
  .ll-cm-payrec-upload-controls,
  .ll-cm-payrec-json-grid {
    grid-template-columns: 1fr;
  }

  .ll-cm-payrec-progress-head,
  .ll-cm-payrec-toolbar-head,
  .ll-cm-payrec-files-head,
  .ll-cm-payrec-section-head,
  .ll-cm-payrec-file-card,
  .ll-cm-payrec-invoice-card,
  .ll-cm-payrec-audit-summary {
    flex-direction: column;
    align-items: stretch;
  }

  .ll-cm-payrec-progress-value {
    font-size: 16px;
  }
}

/* === Staff calendar wedding window states === */
:root {
  --cal-wedding-dayof: #3d5a8f;
  --cal-wedding-dayof-hover: #2e4672;
  --cal-wedding-window-bg: #f7eaef;
  --cal-wedding-window-border: #d8b2c1;
  --cal-wedding-window-text: #6e3d51;
}

/* Payment management dashboard - sleek tabbed worklist
   Inter / system sans is intentional. Cormorant Garamond is wedding-website
   chrome and feels wrong on operational receivables UI - keep this surface
   feeling like a tool, not a brochure.

   The --pm-* tokens are declared on #payment-management-body (not on the
   inner .payment-mgmt-shell) so the side panel and backdrop — which are
   rendered as siblings of the shell but inside the page body — can still
   inherit them. Scoping them to .payment-mgmt-shell leaves the detached
   side panel with empty variable resolves and a transparent background. */
#payment-management-body {
  --pm-fg: #1f2937;
  --pm-fg-muted: #6b7280;
  --pm-fg-subtle: #9ca3af;
  --pm-border: #e5e7eb;
  --pm-border-strong: #d1d5db;
  --pm-bg: #ffffff;
  --pm-bg-soft: #f9fafb;
  --pm-bg-hover: #f3f4f6;
  --pm-accent: #2563eb;
  --pm-accent-soft: #eff6ff;
  --pm-danger: #c0392b;
  --pm-danger-soft: #fef2f2;
  --pm-warn: #b8860b;
  --pm-warn-soft: #fffbeb;
  --pm-success: #2f7b4c;
  --pm-shell-max-width: 1540px;
  --pm-shell-gutter: clamp(16px, 2.4vw, 30px);
  --pm-table-edge-pad: clamp(10px, 1.5vw, 18px);
}

.payment-mgmt-shell {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--pm-fg);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(100%, var(--pm-shell-max-width));
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px var(--pm-shell-gutter) 28px;
}

/* Compact header (~56px) - replaces hero + 6 summary cards + toolbar card */
.payment-mgmt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--pm-border);
}

.payment-mgmt-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  flex: 1;
}

.payment-mgmt-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-fg);
  letter-spacing: -0.01em;
}

.payment-mgmt-status-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--pm-fg-muted);
  flex-wrap: wrap;
}

.payment-mgmt-status-pills .pm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--pm-fg-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.payment-mgmt-status-pills .pm-pill:hover,
.payment-mgmt-status-pills .pm-pill:focus-visible {
  background: var(--pm-bg-hover);
  outline: none;
}

.payment-mgmt-status-pills .pm-pill.is-danger {
  color: var(--pm-danger);
}

.payment-mgmt-status-pills .pm-pill.is-warn {
  color: var(--pm-warn);
}

.payment-mgmt-status-pills .pm-pill .pm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.payment-mgmt-status-pills .pm-sep {
  width: 1px;
  height: 12px;
  background: var(--pm-border);
  margin: 0 2px;
}

.payment-mgmt-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.payment-mgmt-search-wrap {
  position: relative;
}

.payment-mgmt-search {
  width: 240px;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--pm-border);
  background: var(--pm-bg);
  color: var(--pm-fg);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.payment-mgmt-search::placeholder {
  color: var(--pm-fg-subtle);
}

.payment-mgmt-search:focus-visible {
  outline: none;
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.payment-mgmt-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--pm-fg-muted);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.payment-mgmt-icon-btn:hover,
.payment-mgmt-icon-btn:focus-visible {
  background: var(--pm-bg-hover);
  color: var(--pm-fg);
  outline: none;
}

.payment-mgmt-menu-wrap {
  position: relative;
}

.payment-mgmt-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--pm-border);
  background: var(--pm-bg);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.payment-mgmt-menu[hidden] {
  display: none;
}

.payment-mgmt-menu-item {
  appearance: none;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--pm-fg);
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
}

.payment-mgmt-menu-item:hover,
.payment-mgmt-menu-item:focus-visible {
  background: var(--pm-bg-hover);
  outline: none;
}

/* Tabs - 36px tall, single-line */
.payment-mgmt-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--pm-border);
  padding: 0;
  margin: -4px 0 0;
}

.payment-mgmt-tab {
  appearance: none;
  background: transparent;
  border: none;
  padding: 8px 14px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pm-fg-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.payment-mgmt-tab:hover,
.payment-mgmt-tab:focus-visible {
  color: var(--pm-fg);
  outline: none;
}

.payment-mgmt-tab.active {
  color: var(--pm-fg);
  border-bottom-color: var(--pm-accent);
}

.payment-mgmt-tab-count {
  display: none;
  min-width: 18px;
  padding: 0 6px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--pm-bg-hover);
  color: var(--pm-fg-muted);
  font-size: 11px;
  font-weight: 600;
}

.payment-mgmt-tab-count.is-shown {
  display: inline-flex;
}

.payment-mgmt-tab.active .payment-mgmt-tab-count {
  background: var(--pm-accent-soft);
  color: var(--pm-accent);
}

.payment-mgmt-meta-line {
  font-size: 12px;
  color: var(--pm-fg-muted);
  min-height: 16px;
}

.payment-mgmt-meta-line.tone-danger { color: var(--pm-danger); }
.payment-mgmt-meta-line.tone-warn { color: var(--pm-warn); }
.payment-mgmt-meta-line.tone-info { color: var(--pm-accent); }
.payment-mgmt-meta-line.tone-success { color: var(--pm-success); }

/* Tab panels */
.payment-mgmt-tab-panel {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.payment-mgmt-tab-panel.active {
  display: flex;
}

.payment-mgmt-tab-panel[hidden] {
  display: none !important;
}

.payment-mgmt-tab-panel.active[hidden] {
  display: none !important;
}

.payment-mgmt-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pm-fg-muted);
}

/* === Tab 1: Action Queue === */
.payment-mgmt-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.payment-mgmt-chip-row {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  border-radius: 8px;
  background: var(--pm-bg-soft);
  border: 1px solid var(--pm-border);
}

.payment-mgmt-chip {
  appearance: none;
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pm-fg-muted);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}

.payment-mgmt-chip:hover,
.payment-mgmt-chip:focus-visible {
  color: var(--pm-fg);
  outline: none;
}

.payment-mgmt-chip.active {
  background: var(--pm-bg);
  color: var(--pm-fg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.payment-mgmt-shortcut-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--pm-fg-subtle);
}

.payment-mgmt-shortcut-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--pm-border);
  background: var(--pm-bg);
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--pm-fg-muted);
}

/* Compact data table */
.payment-mgmt-queue-wrap {
  border: 1px solid var(--pm-border);
  border-radius: 12px;
  background: var(--pm-bg);
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
  scrollbar-gutter: stable both-edges;
}

.payment-mgmt-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}

.payment-mgmt-queue-table thead {
  background: var(--pm-bg-soft);
}

.payment-mgmt-queue-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pm-fg-muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--pm-border);
  white-space: nowrap;
}

.payment-mgmt-queue-table th:first-child,
.payment-mgmt-queue-table td:first-child {
  padding-left: calc(12px + var(--pm-table-edge-pad));
}

.payment-mgmt-queue-table th:last-child,
.payment-mgmt-queue-table td:last-child {
  padding-right: calc(12px + var(--pm-table-edge-pad));
}

.payment-mgmt-queue-table th.payment-mgmt-th-num {
  text-align: right;
}

.payment-mgmt-queue-table th.payment-mgmt-th-sort {
  cursor: pointer;
  user-select: none;
}

.payment-mgmt-queue-table th.payment-mgmt-th-sort:hover {
  color: var(--pm-fg);
}

.payment-mgmt-queue-table th.is-sorted {
  color: var(--pm-fg);
}

.payment-mgmt-queue-table th.is-sorted::after {
  content: ' \25BC';
  font-size: 9px;
  margin-left: 2px;
}

.payment-mgmt-queue-table tbody tr {
  cursor: pointer;
  border-bottom: 1px solid var(--pm-border);
  transition: background 0.08s ease;
}

.payment-mgmt-queue-table tbody tr:last-child {
  border-bottom: none;
}

.payment-mgmt-queue-table tbody tr:hover {
  background: var(--pm-bg-soft);
}

.payment-mgmt-queue-table tbody tr.is-selected {
  background: var(--pm-accent-soft);
}

.payment-mgmt-queue-table tbody tr.is-selected:hover {
  background: var(--pm-accent-soft);
}

.payment-mgmt-queue-table td {
  padding: 10px 12px;
  vertical-align: middle;
  color: var(--pm-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}

.payment-mgmt-queue-table td.payment-mgmt-td-couple {
  font-weight: 500;
  width: 24%;
}

.payment-mgmt-queue-table td.payment-mgmt-td-wedding {
  color: var(--pm-fg-muted);
  width: 12%;
}

.payment-mgmt-queue-table td.payment-mgmt-td-payment {
  color: var(--pm-fg-muted);
  width: 22%;
}

.payment-mgmt-queue-table td.payment-mgmt-td-due {
  color: var(--pm-fg-muted);
  width: 18%;
}

.payment-mgmt-queue-table td.payment-mgmt-td-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-weight: 500;
  width: 12%;
}

.payment-mgmt-queue-table td.payment-mgmt-td-status {
  width: 12%;
}

.payment-mgmt-queue-table .pm-due-late {
  color: var(--pm-danger);
}

.payment-mgmt-queue-table .pm-due-soon {
  color: var(--pm-warn);
}

.payment-mgmt-queue-table .pm-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--pm-fg-muted);
}

.payment-mgmt-queue-table .pm-status .pm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pm-fg-subtle);
  flex-shrink: 0;
}

.payment-mgmt-queue-table .pm-status.is-overdue { color: var(--pm-danger); }
.payment-mgmt-queue-table .pm-status.is-overdue .pm-dot { background: var(--pm-danger); }
.payment-mgmt-queue-table .pm-status.is-warn { color: var(--pm-warn); }
.payment-mgmt-queue-table .pm-status.is-warn .pm-dot { background: var(--pm-warn); }

.payment-mgmt-queue-table .pm-note-icon {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--pm-fg-subtle);
}

.payment-mgmt-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--pm-fg-muted);
}

/* === Tab 2: Upcoming === */
.payment-mgmt-cashflow {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
  padding: 8px 0;
}

.payment-mgmt-cashflow-month {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
  min-width: 0;
}

.payment-mgmt-cashflow-month-bar {
  width: 100%;
  max-width: 32px;
  background: var(--pm-accent);
  opacity: 0.7;
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  transition: opacity 0.12s ease;
}

.payment-mgmt-cashflow-month:hover .payment-mgmt-cashflow-month-bar {
  opacity: 1;
}

.payment-mgmt-cashflow-month-label {
  font-size: 10px;
  color: var(--pm-fg-subtle);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.payment-mgmt-cashflow-empty {
  font-size: 13px;
  color: var(--pm-fg-muted);
  padding: 16px 0;
}

.payment-mgmt-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.payment-mgmt-upcoming-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.payment-mgmt-upcoming-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--pm-border);
}

.payment-mgmt-upcoming-group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-fg);
}

.payment-mgmt-upcoming-group-meta {
  font-size: 12px;
  color: var(--pm-fg-muted);
  font-variant-numeric: tabular-nums;
}

.payment-mgmt-upcoming-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(80px, auto) minmax(80px, auto);
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--pm-fg);
  cursor: pointer;
  border-radius: 4px;
}

.payment-mgmt-upcoming-row:hover {
  background: var(--pm-bg-soft);
  padding-left: 8px;
  padding-right: 8px;
  margin: 0 -8px;
}

.payment-mgmt-upcoming-row .pm-up-couple {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-mgmt-upcoming-row .pm-up-desc {
  color: var(--pm-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-mgmt-upcoming-row .pm-up-due {
  color: var(--pm-fg-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.payment-mgmt-upcoming-row .pm-up-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-weight: 500;
  text-align: right;
}

/* === Tab 3: Insights === */
.payment-mgmt-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.payment-mgmt-insights-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payment-mgmt-snapshot,
.payment-mgmt-aging {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  background: var(--pm-bg);
  overflow: hidden;
}

.payment-mgmt-snapshot-row,
.payment-mgmt-aging-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pm-border);
  font-size: 13px;
}

.payment-mgmt-snapshot-row:last-child,
.payment-mgmt-aging-row:last-child {
  border-bottom: none;
}

.payment-mgmt-snapshot-label,
.payment-mgmt-aging-label {
  color: var(--pm-fg-muted);
}

.payment-mgmt-snapshot-value,
.payment-mgmt-aging-count {
  font-weight: 600;
  color: var(--pm-fg);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

.payment-mgmt-snapshot-meta,
.payment-mgmt-aging-amount {
  font-size: 12px;
  color: var(--pm-fg-subtle);
  font-variant-numeric: tabular-nums;
}

.payment-mgmt-snapshot-value.is-positive {
  color: var(--pm-positive, #137a43);
}

.payment-mgmt-snapshot-value.is-warn {
  color: var(--pm-warn, #b7791f);
}

.payment-mgmt-snapshot-value.is-danger {
  color: var(--pm-danger, #c0392b);
}

/* Collections period toggle */
.payment-mgmt-insights-block .payment-mgmt-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.payment-mgmt-period-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--pm-border);
  border-radius: 6px;
  background: var(--pm-bg-soft, #f6f8fb);
}

.payment-mgmt-period-chip {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--pm-fg-muted);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.01em;
}

.payment-mgmt-period-chip:hover {
  color: var(--pm-fg);
}

.payment-mgmt-period-chip.active {
  background: var(--pm-bg, #fff);
  color: var(--pm-fg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Received-by-month trend */
.payment-mgmt-received-trend {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 16px 14px 10px;
  height: 140px;
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  background: var(--pm-bg);
}

.payment-mgmt-received-trend-month {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 100%;
  cursor: default;
}

.payment-mgmt-received-trend-amount {
  font-size: 10px;
  font-weight: 600;
  color: var(--pm-fg-subtle);
  font-variant-numeric: tabular-nums;
  min-height: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.payment-mgmt-received-trend-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.payment-mgmt-received-trend-bar {
  width: 100%;
  max-width: 34px;
  background: var(--pm-positive, #137a43);
  opacity: 0.75;
  border-radius: 3px 3px 0 0;
  min-height: 0;
  transition: opacity 0.12s ease;
}

.payment-mgmt-received-trend-month:hover .payment-mgmt-received-trend-bar {
  opacity: 1;
}

.payment-mgmt-received-trend-label {
  font-size: 10px;
  color: var(--pm-fg-subtle);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Recent payments received list (full-width below 2x2 insights grid) */
.payment-mgmt-insights-block-full {
  margin-top: 24px;
}

.payment-mgmt-section-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--pm-fg-subtle);
  letter-spacing: 0.01em;
}

.payment-mgmt-recent-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  background: var(--pm-bg);
  overflow: hidden;
}

.payment-mgmt-recent-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 2fr) minmax(0, auto) minmax(110px, auto);
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pm-border);
  font-size: 13px;
  color: var(--pm-fg);
}

.payment-mgmt-recent-row:last-child {
  border-bottom: none;
}

.payment-mgmt-recent-row.is-clickable {
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.payment-mgmt-recent-row.is-clickable:hover,
.payment-mgmt-recent-row.is-clickable:focus-visible {
  background: var(--pm-bg-soft, #f6f8fb);
  outline: none;
}

.payment-mgmt-recent-row.is-clickable:focus-visible {
  box-shadow: inset 0 0 0 2px var(--pm-accent, #2f5fa7);
}

.payment-mgmt-recent-date {
  font-size: 12px;
  color: var(--pm-fg-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.payment-mgmt-recent-couple {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.payment-mgmt-recent-couple-name {
  font-weight: 600;
  color: var(--pm-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-mgmt-recent-desc {
  font-size: 12px;
  color: var(--pm-fg-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-mgmt-recent-method {
  display: inline-block;
  font-size: 11px;
  color: var(--pm-fg-muted);
  padding: 1px 6px;
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  background: var(--pm-bg-soft, #f6f8fb);
}

.payment-mgmt-recent-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.payment-mgmt-recent-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--pm-bg-soft, #f1f4f8);
  color: var(--pm-fg-muted);
  white-space: nowrap;
}

.payment-mgmt-recent-tag.is-positive {
  background: rgba(19, 122, 67, 0.12);
  color: var(--pm-positive, #137a43);
}

.payment-mgmt-recent-tag.is-warn {
  background: rgba(183, 121, 31, 0.14);
  color: var(--pm-warn, #8a5a14);
}

.payment-mgmt-recent-tag.is-info {
  background: rgba(47, 95, 167, 0.12);
  color: var(--pm-accent, #2f5fa7);
}

.payment-mgmt-recent-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--pm-fg);
  text-align: right;
}

/* Grouped-by-wedding view */
.payment-mgmt-recent-group {
  border-bottom: 1px solid var(--pm-border);
}

.payment-mgmt-recent-group:last-child {
  border-bottom: none;
}

.payment-mgmt-recent-summary {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  border-bottom: none;
}

.payment-mgmt-recent-summary .payment-mgmt-recent-amount {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.payment-mgmt-recent-caret {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  color: var(--pm-fg-subtle);
  transition: transform 0.12s ease;
}

.payment-mgmt-recent-group[data-expanded="true"] .payment-mgmt-recent-caret {
  transform: rotate(90deg);
}

.payment-mgmt-recent-group[data-expanded="true"] .payment-mgmt-recent-summary {
  background: var(--pm-bg-soft, #f6f8fb);
}

.payment-mgmt-recent-children {
  border-top: 1px solid var(--pm-border);
  background: var(--pm-bg, #fff);
}

.payment-mgmt-recent-children .payment-mgmt-recent-row {
  padding-left: 28px;
  border-bottom: 1px solid var(--pm-border);
  background: transparent;
}

.payment-mgmt-recent-children .payment-mgmt-recent-row:last-child {
  border-bottom: none;
}

/* View-mode toggle in the received toolbar */
.payment-mgmt-received-viewmode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.payment-mgmt-received-viewmode-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--pm-fg-muted);
  letter-spacing: 0.01em;
}

.payment-mgmt-received-viewmode-segment {
  display: inline-flex;
  background: var(--pm-bg-soft, #f1f4f8);
  border: 1px solid var(--pm-border);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.payment-mgmt-received-expand-btn {
  appearance: none;
  border: 1px solid var(--pm-border);
  background: var(--pm-bg, #fff);
  color: var(--pm-fg-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.01em;
}

.payment-mgmt-received-expand-btn:hover {
  color: var(--pm-fg);
  background: var(--pm-bg-soft, #f6f8fb);
}

@media (max-width: 720px) {
  .payment-mgmt-recent-row {
    grid-template-columns: 64px minmax(0, 1fr) minmax(90px, auto);
    row-gap: 4px;
  }
  .payment-mgmt-recent-tags {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Received-log toolbar */
.payment-mgmt-received-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--pm-border);
  margin-bottom: 12px;
}

.payment-mgmt-received-presets {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--pm-border);
  border-radius: 6px;
  background: var(--pm-bg-soft, #f6f8fb);
  flex-wrap: wrap;
}

.payment-mgmt-received-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--pm-fg-muted);
}

.payment-mgmt-received-date-label {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.payment-mgmt-received-date-input {
  appearance: none;
  border: 1px solid var(--pm-border);
  border-radius: 6px;
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--pm-fg);
  background: var(--pm-bg, #fff);
  min-width: 130px;
}

.payment-mgmt-received-date-input:focus {
  outline: none;
  border-color: var(--pm-accent, #2f5fa7);
  box-shadow: 0 0 0 2px rgba(47, 95, 167, 0.18);
}

.payment-mgmt-received-search {
  flex: 1 1 200px;
  min-width: 160px;
  appearance: none;
  border: 1px solid var(--pm-border);
  border-radius: 6px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--pm-fg);
  background: var(--pm-bg, #fff);
}

.payment-mgmt-received-search:focus {
  outline: none;
  border-color: var(--pm-accent, #2f5fa7);
  box-shadow: 0 0 0 2px rgba(47, 95, 167, 0.18);
}

.payment-mgmt-received-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--pm-fg-muted);
}

.payment-mgmt-received-sort-label {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.payment-mgmt-received-sort {
  appearance: none;
  border: 1px solid var(--pm-border);
  border-radius: 6px;
  padding: 4px 26px 4px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--pm-fg);
  background: var(--pm-bg, #fff) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2364748b' d='M0 0l5 6 5-6z'/></svg>") no-repeat right 8px center;
  cursor: pointer;
}

.payment-mgmt-received-sort:focus {
  outline: none;
  border-color: var(--pm-accent, #2f5fa7);
  box-shadow: 0 0 0 2px rgba(47, 95, 167, 0.18);
}

/* Received-log totals row */
.payment-mgmt-received-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  background: var(--pm-bg-soft, #f6f8fb);
}

.payment-mgmt-received-totals:empty {
  display: none;
}

.payment-mgmt-received-total-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.payment-mgmt-received-total-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pm-fg-muted);
}

.payment-mgmt-received-total-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--pm-fg);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-mgmt-received-total-range {
  font-size: 10px;
  color: var(--pm-fg-muted);
  font-weight: 500;
}

@media (max-width: 720px) {
  .payment-mgmt-received-toolbar {
    gap: 8px;
  }
  .payment-mgmt-received-presets {
    order: -1;
    width: 100%;
  }
  .payment-mgmt-received-search {
    flex: 1 1 100%;
  }
  .payment-mgmt-received-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* === Side panel === */
/* The staff-portal site header is position:sticky with z-index 320 and
   existing modal overlays use z-index 1000, so the side panel sits at
   990/991 — above the header and any sidebars, but still below true
   modal dialogs so a modal launched from inside the panel (e.g. "Open
   payment record") can still render on top. */
.payment-mgmt-side-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
  z-index: 990;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.payment-mgmt-side-backdrop:not([hidden]) {
  opacity: 1;
}

.payment-mgmt-side-backdrop[hidden] {
  display: none;
}

.payment-mgmt-side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  background: var(--pm-bg);
  border-left: 1px solid var(--pm-border);
  box-shadow: -16px 0 40px rgba(15, 23, 42, 0.08);
  z-index: 991;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--pm-fg, #1f2937);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.payment-mgmt-side-panel:not([hidden]) {
  transform: translateX(0);
}

.payment-mgmt-side-panel[hidden] {
  display: none;
}

.payment-mgmt-side-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #e5e7eb;
}

.payment-mgmt-side-head-text {
  min-width: 0;
  flex: 1;
}

.payment-mgmt-side-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 4px;
}

.payment-mgmt-side-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}

.payment-mgmt-side-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.payment-mgmt-side-position {
  font-size: 11px;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

.payment-mgmt-side-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.payment-mgmt-side-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}

.payment-mgmt-side-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.payment-mgmt-side-summary-label {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
}

.payment-mgmt-side-summary-value {
  font-size: 14px;
  color: #1f2937;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.payment-mgmt-side-summary-value.is-danger { color: #c0392b; }
.payment-mgmt-side-summary-value.is-warn { color: #b8860b; }

.payment-mgmt-side-meta {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.payment-mgmt-side-followup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.payment-mgmt-side-followup-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.payment-mgmt-side-followup-input {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  font-size: 13px;
  line-height: 1.5;
  color: #1f2937;
  font-family: inherit;
  resize: vertical;
}

.payment-mgmt-side-followup-input:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.payment-mgmt-side-followup-status {
  font-size: 11px;
  color: #6b7280;
}

.payment-mgmt-side-followup-status.tone-success { color: #2f7b4c; }
.payment-mgmt-side-followup-status.tone-info { color: #2563eb; }
.payment-mgmt-side-followup-status.tone-warn { color: #b8860b; }
.payment-mgmt-side-followup-status.tone-danger { color: #c0392b; }

.payment-mgmt-side-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
}

.payment-mgmt-side-btn {
  appearance: none;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #1f2937;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.payment-mgmt-side-btn:hover:not([disabled]),
.payment-mgmt-side-btn:focus-visible:not([disabled]) {
  background: #f9fafb;
  border-color: #d1d5db;
  outline: none;
}

.payment-mgmt-side-btn.is-primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.payment-mgmt-side-btn.is-primary:hover:not([disabled]),
.payment-mgmt-side-btn.is-primary:focus-visible:not([disabled]) {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.payment-mgmt-side-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Hub badge stays the same shape */
.payment-mgmt-hub-badge {
  margin-left: 8px;
  min-width: 24px;
}

/* Review bar - kept hidden in DOM (test contract) but unused visually since the
   side panel + arrow keys ARE the bulk review experience now. Kept as a 0x0
   element so legacy selectors still resolve. */
.payment-mgmt-review-bar {
  display: none !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .payment-mgmt-search { width: 200px; }
  .payment-mgmt-insights-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .payment-mgmt-shell {
    padding: 8px 14px 24px;
  }

  .payment-mgmt-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .payment-mgmt-header-left {
    flex-wrap: wrap;
    gap: 12px;
  }

  .payment-mgmt-header-right {
    justify-content: space-between;
  }

  .payment-mgmt-search { width: 100%; flex: 1; }

  .payment-mgmt-queue-table {
    font-size: 12px;
  }

  .payment-mgmt-queue-table td.payment-mgmt-td-payment,
  .payment-mgmt-queue-table th:nth-child(3) {
    display: none;
  }

  .payment-mgmt-side-panel {
    width: 100vw;
    border-left: none;
    border-top: 1px solid var(--pm-border);
    top: auto;
    height: 88vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }

  .payment-mgmt-side-panel:not([hidden]) {
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .payment-mgmt-queue-table td.payment-mgmt-td-wedding,
  .payment-mgmt-queue-table th:nth-child(2) {
    display: none;
  }
  .payment-mgmt-shortcut-hint { display: none; }
  .payment-mgmt-upcoming-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .payment-mgmt-upcoming-row .pm-up-desc,
  .payment-mgmt-upcoming-row .pm-up-due {
    display: none;
  }
}

@media (max-width: 760px) {
  .payment-mgmt-shell {
    gap: 12px;
    padding: 10px clamp(12px, 4vw, 18px) 22px;
  }

  .payment-mgmt-header {
    gap: 10px;
    padding: 0 0 10px;
  }

  .payment-mgmt-header-left {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .payment-mgmt-title {
    font-size: 15px;
  }

  .payment-mgmt-status-pills {
    gap: 6px;
  }

  .payment-mgmt-status-pills .pm-sep {
    display: none;
  }

  .payment-mgmt-status-pills .pm-pill {
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 8px;
    border-color: var(--pm-border);
    background: var(--pm-bg-soft);
    font-size: 11px;
  }

  .payment-mgmt-header-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px;
  }

  .payment-mgmt-search-wrap {
    min-width: 0;
  }

  .payment-mgmt-search {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  .payment-mgmt-header-right .payment-mgmt-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border-color: var(--pm-border);
    background: var(--pm-bg-soft);
    color: var(--pm-fg-muted);
    font-size: 15px;
  }

  .payment-mgmt-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    border-bottom: none;
    margin: 0;
  }

  .payment-mgmt-tab {
    min-width: 0;
    min-height: 40px;
    justify-content: center;
    padding: 8px 8px;
    border: 1px solid var(--pm-border);
    border-radius: 10px;
    background: var(--pm-bg);
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }

  .payment-mgmt-tab.active {
    border-bottom-color: rgba(37, 99, 235, 0.24);
    background: var(--pm-accent-soft);
  }

  .payment-mgmt-tab-count {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
  }

  .payment-mgmt-meta-line {
    font-size: 11px;
    line-height: 1.45;
  }

  .payment-mgmt-filter-bar {
    gap: 8px;
  }

  .payment-mgmt-chip-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    padding: 0;
    border: none;
    background: transparent;
  }

  .payment-mgmt-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid var(--pm-border);
    background: var(--pm-bg-soft);
    font-size: 11px;
    text-align: center;
  }

  .payment-mgmt-chip.active {
    border-color: rgba(37, 99, 235, 0.22);
    box-shadow: none;
  }

  .payment-mgmt-shortcut-hint {
    display: none;
  }

  .payment-mgmt-queue-wrap {
    overflow: visible;
    border: none;
    background: transparent;
    box-shadow: none;
    scrollbar-gutter: auto;
  }

  .payment-mgmt-queue-table {
    display: block;
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: 12px;
  }

  .payment-mgmt-queue-table thead {
    display: none;
  }

  .payment-mgmt-queue-table tbody {
    display: grid;
    gap: 10px;
  }

  .payment-mgmt-queue-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 8px 12px;
    padding: 12px;
    border: 1px solid var(--pm-border);
    border-radius: 12px;
    background: var(--pm-bg);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  }

  .payment-mgmt-queue-table tbody tr:hover {
    background: var(--pm-bg-soft);
  }

  .payment-mgmt-queue-table tbody tr.is-selected,
  .payment-mgmt-queue-table tbody tr.is-selected:hover {
    background: var(--pm-accent-soft);
  }

  .payment-mgmt-queue-table td,
  .payment-mgmt-queue-table td.payment-mgmt-td-couple,
  .payment-mgmt-queue-table td.payment-mgmt-td-wedding,
  .payment-mgmt-queue-table td.payment-mgmt-td-payment,
  .payment-mgmt-queue-table td.payment-mgmt-td-due,
  .payment-mgmt-queue-table td.payment-mgmt-td-amount,
  .payment-mgmt-queue-table td.payment-mgmt-td-status {
    display: block;
    width: auto;
    max-width: none;
    padding: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .payment-mgmt-queue-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pm-fg-subtle);
  }

  .payment-mgmt-queue-table td.payment-mgmt-td-couple,
  .payment-mgmt-queue-table td.payment-mgmt-td-payment {
    grid-column: 1 / -1;
  }

  .payment-mgmt-queue-table td.payment-mgmt-td-couple {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
  }

  .payment-mgmt-queue-table td.payment-mgmt-td-payment {
    color: var(--pm-fg-muted);
    line-height: 1.35;
  }

  .payment-mgmt-queue-table td.payment-mgmt-td-amount,
  .payment-mgmt-queue-table td.payment-mgmt-td-status {
    text-align: left;
  }

  .payment-mgmt-queue-table .pm-status {
    font-size: 11px;
  }

  .payment-mgmt-side-panel {
    height: min(82vh, 760px);
    border-radius: 18px 18px 0 0;
  }
}

.cal-day.has-wedding-day {
  background: var(--cal-wedding-bg);
}

.cal-day.has-wedding-window:not(.has-wedding-day) {
  background: #fcf7f9;
  box-shadow: inset 0 0 0 1px rgba(139, 80, 102, 0.08);
}

.cal-wedding-chip {
  position: relative;
  border: 1px solid transparent;
}

.cal-wedding-chip.dw-d {
  background: var(--cal-wedding-dayof);
  border-color: var(--cal-wedding-dayof);
}

.cal-wedding-chip.dw-d:hover {
  background: var(--cal-wedding-dayof-hover);
  border-color: var(--cal-wedding-dayof-hover);
}

.cal-wedding-chip.dw-w.is-wedding-day {
  background: var(--cal-wedding);
  border-color: var(--cal-wedding);
}

.cal-wedding-chip.dw-w.is-wedding-day:hover {
  background: var(--cal-wedding-hover);
  border-color: var(--cal-wedding-hover);
}

.cal-wedding-chip.dw-w.is-window-edge {
  background: var(--cal-wedding-window-bg);
  color: var(--cal-wedding-window-text);
  border-color: var(--cal-wedding-window-border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 8px 18px rgba(139, 80, 102, 0.1);
}

.cal-wedding-chip.dw-w.is-window-edge::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 5px;
  background: var(--cal-wedding);
  border-radius: 10px 0 0 10px;
}

.cal-wedding-chip.dw-w.is-window-edge:hover {
  background: #f1dfe7;
  border-color: var(--cal-wedding-accent);
}

.cal-wedding-chip.dw-w.is-window-edge .cal-chip-pkg {
  color: var(--cal-wedding-window-text);
  opacity: 0.92;
}

.cal-list-item.cal-list-item-wedding-main {
  border-left-color: var(--cal-wedding);
}

.cal-list-item.cal-list-item-wedding-dayof {
  border-left-color: var(--cal-wedding-dayof);
}

.cal-list-item.cal-list-item-wedding-window {
  border-left-color: var(--cal-wedding);
  background: #fbf6f8;
  border-color: #ead7df;
}

.cal-list-item.cal-list-item-wedding-window:hover {
  background: #fff;
  border-color: #dcc2cf;
}

.cal-list-badge.cal-list-badge-wedding-main {
  background: var(--cal-wedding);
  color: #fff;
  border-color: var(--cal-wedding);
}

.cal-list-badge.cal-list-badge-wedding-dayof {
  background: var(--cal-wedding-dayof);
  color: #fff;
  border-color: var(--cal-wedding-dayof);
}

.cal-list-badge.cal-list-badge-wedding-window {
  background: var(--cal-wedding-window-bg);
  color: var(--cal-wedding-window-text);
  border-color: var(--cal-wedding-window-border);
}

.cal-mini-dot.wedding.wedding-window {
  background: var(--cal-wedding-accent);
}

.cal-mini-dot.wedding.wedding-day {
  background: var(--cal-wedding);
}

.cal-mini-dot.wedding.wedding-dayof {
  background: var(--cal-wedding-dayof);
}

/* ═══════════════════════════════════════════════════════
   Wedding Detail — Facts grid, overview panels,
   checklist containment, staff summary, responsive
   ═══════════════════════════════════════════════════════ */

/* ── Facts grid (detail hero key-value cards) ── */
#page-wedding-detail .ll-cm-detail-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#page-wedding-detail .ll-cm-detail-fact {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(183,201,223,0.72);
  background: rgba(255,255,255,0.82);
}

#page-wedding-detail .ll-cm-detail-fact-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--staff-text-muted, #7a8ea4);
}

#page-wedding-detail .ll-cm-detail-fact-value {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--staff-text, #1a2232);
  overflow-wrap: anywhere;
}

/* ── Staff summary role/name distinction ── */
.wdetail-staff-summary .s-role {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--staff-text-muted, #7a8ea4);
}

.wdetail-staff-summary .s-name {
  font-weight: 600;
  color: var(--staff-text, #1a2232);
}

/* ── Overview checklist containment ── */
.wdetail-overview-checklist-card .cl-cats-wrap {
  max-height: 460px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(47,95,167,0.22) transparent;
  padding-right: 4px;
}

.wdetail-overview-checklist-card .cl-cats-wrap::-webkit-scrollbar {
  width: 5px;
}

.wdetail-overview-checklist-card .cl-cats-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.wdetail-overview-checklist-card .cl-cats-wrap::-webkit-scrollbar-thumb {
  background: rgba(47,95,167,0.22);
  border-radius: 99px;
}

/* ── Responsive: 1180px ── */
@media (max-width: 1180px) {
  #page-wedding-detail .ll-cm-detail-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wdetail-overview-panels,
  .wdetail-payment-panels {
    grid-template-columns: 1fr;
  }
}

/* ── Responsive: 900px (tablet) ── */
@media (max-width: 900px) {
  #page-wedding-detail .ll-cm-detail-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-wedding-detail .ll-cm-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #page-wedding-detail .ll-cm-detail-hero {
    padding: 18px;
  }

  #page-wedding-detail .ll-cm-detail-title {
    font-size: 26px;
  }

  .wdetail-overview-checklist-card .cl-cats-wrap {
    max-height: 360px;
  }
}

/* ── Responsive: 760px (small tablet / large phone) ── */
@media (max-width: 760px) {
  #page-wedding-detail .ll-cm-detail-facts {
    grid-template-columns: 1fr;
  }

  #page-wedding-detail .ll-cm-detail-hero {
    padding: 16px;
    border-radius: 14px;
  }

  #page-wedding-detail .ll-cm-detail-head {
    flex-direction: column;
    align-items: stretch;
  }

  #page-wedding-detail .ll-cm-detail-title {
    font-size: 22px;
  }

  #page-wedding-detail .ll-cm-detail-sub {
    font-size: 11px;
  }

  #page-wedding-detail .ll-cm-detail-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #page-wedding-detail .wdetail-summary-badge {
    min-height: 68px;
    padding: 10px 12px 10px 14px;
    border-radius: 14px;
  }

  #page-wedding-detail .wdetail-summary-badge-value {
    font-size: 14px;
  }

  #page-wedding-detail .ll-cm-detail-fact {
    padding: 12px 14px;
    border-radius: 12px;
  }

  #page-wedding-detail .ll-cm-detail-fact-value {
    font-size: 13px;
  }

  .wdetail-overview-panels,
  .wdetail-doc-meta-grid,
  .wdetail-payment-panels {
    grid-template-columns: 1fr !important;
  }

  #page-wedding-detail .ll-cm-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-wedding-detail .ll-cm-info-card {
    padding: 14px;
    border-radius: 14px;
  }

  #page-wedding-detail .ll-cm-info-list {
    grid-template-columns: 1fr;
  }

  #page-wedding-detail .ll-cm-info-list-item {
    padding: 12px 13px;
  }

  #page-wedding-detail .ll-cm-info-list-value {
    font-size: 14px;
  }

  .wdetail-overview-checklist-card .cl-cats-wrap {
    max-height: 300px;
  }

  .wdetail-overview-checklist-card .clx-task-grid {
    grid-template-columns: 1fr;
  }

  .wdetail-staff-summary {
    font-size: 11px;
  }

  /* Financial grid single column */
  #page-wedding-detail .ll-cm-financial-top-grid,
  #page-wedding-detail .ll-cm-financial-notes-grid {
    grid-template-columns: 1fr;
  }

  #page-wedding-detail .ll-cm-financial-grid {
    grid-template-columns: 1fr;
  }

  /* Review list single column */
  #page-wedding-detail .ll-cm-review-list {
    grid-template-columns: 1fr;
  }

  /* Task category tabs scroll horizontally */
  #page-wedding-detail .wdetail-task-category-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #page-wedding-detail .wdetail-task-category-tabs::-webkit-scrollbar {
    display: none;
  }
}

/* ── Responsive: 480px (phone) ── */
@media (max-width: 480px) {
  #page-wedding-detail .ll-cm-overview-grid {
    grid-template-columns: 1fr !important;
  }

  #page-wedding-detail .ll-cm-detail-hero {
    padding: 14px;
    gap: 14px;
  }

  #page-wedding-detail .ll-cm-detail-title {
    font-size: 20px;
  }

  #page-wedding-detail .ll-cm-detail-tabs {
    gap: 6px;
  }

  #page-wedding-detail .ll-cm-detail-badges {
    grid-template-columns: 1fr;
  }

  #page-wedding-detail .ll-cm-detail-tab {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    padding: 8px 12px;
    font-size: 11px;
  }

  .wdetail-overview-checklist-card .cl-cats-wrap {
    max-height: 240px;
  }

  .wdetail-overview-checklist-card {
    padding: 14px !important;
  }

  #page-wedding-detail .ll-cm-financial-card {
    padding: 12px;
    border-radius: 12px;
  }

  #page-wedding-detail .ll-cm-financial-save-row {
    flex-direction: column;
    align-items: stretch;
  }

}

/* Compact wedding-detail financial sheet */
#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-detail-body,
#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-body {
  gap: 14px;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-top-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 12px;
  align-items: start;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-notes-grid {
  gap: 12px;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-info-card {
  display: grid;
  gap: 10px;
  padding: 14px 15px;
  border-radius: 14px;
  border-color: rgba(214, 223, 233, 0.92);
  box-shadow: none;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-info-card-title {
  margin-bottom: 0;
  padding-bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #516274;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-hero-stats {
  gap: 8px;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-hero-stats > .ll-cm-stat-card {
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(214, 223, 233, 0.92);
  background: #f8fbfd;
  box-shadow: none;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-hero-stats > .ll-cm-stat-card .ll-cm-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #66788b;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-hero-stats > .ll-cm-stat-card .ll-cm-stat-num {
  margin-top: 4px;
  font-family: 'Jost', 'Helvetica Neue', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
  color: #203145;
  font-variant-numeric: tabular-nums;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-inline-total,
#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-card-total,
#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-subtotal,
#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-total-block strong {
  font-variant-numeric: tabular-nums;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-inline-total {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1d3952;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-doc-note,
#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-tab-note {
  font-size: 12px;
  line-height: 1.5;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-doc-note {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(219, 228, 238, 0.96);
  background: #f7fafc;
  color: #5f7083;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-package-list {
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.55;
  color: #33485d;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-package-list li + li {
  margin-top: 4px;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-section {
  gap: 10px;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-section + .ll-cm-financial-section {
  padding-top: 14px;
  border-top: 1px solid rgba(223, 230, 238, 0.92);
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-section-head {
  align-items: center;
  gap: 10px;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-section-head h3 {
  font-family: 'Jost', 'Helvetica Neue', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5d6d7f;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-subtotal {
  font-size: 13px;
  font-weight: 600;
  color: #1d3952;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-card {
  padding: 12px 13px;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid rgba(214, 223, 233, 0.96);
  background: #fff;
  box-shadow: none;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-card:hover {
  border-color: rgba(193, 205, 218, 0.96);
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-card.is-selected {
  border-color: rgba(63, 104, 149, 0.45);
  background: #f7fbff;
  box-shadow: none;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-card-head {
  gap: 10px;
  align-items: start;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-toggle {
  gap: 9px;
  min-width: 0;
  flex: 1 1 auto;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-toggle > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-toggle input {
  margin-top: 2px;
  accent-color: #355f94;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #1f2f40;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-card-price {
  margin-top: 0;
  font-size: 11px;
  line-height: 1.45;
  color: #6a7b8e;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-card-total {
  min-width: 70px;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  color: #1d3952;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-fields {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-field,
#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-review-field {
  display: grid;
  gap: 4px;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-field-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #6b7b8b;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-input {
  min-height: 34px;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 8px;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-review-textarea {
  min-height: 84px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-warning {
  padding: 7px 10px;
  border: 1px solid rgba(232, 198, 119, 0.65);
  border-radius: 10px;
  background: #fff8eb;
  color: #8a5a00;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-save-row {
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(214, 223, 233, 0.96);
  border-radius: 14px;
  background: #fbfcfe;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-total-block {
  min-width: 0;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-total-block .ll-cm-field-label {
  font-size: 10px;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-total-block strong {
  margin-top: 3px;
  font-size: 18px;
  font-weight: 600;
  color: #1d3952;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-review-save-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-review-save-row .ll-cm-btn {
  min-height: 34px;
  min-width: 96px;
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: 0.04em;
}

#page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-inline-status {
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 1180px) {
  #page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-top-grid,
  #page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-notes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-top-grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  #page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-body {
    gap: 12px;
  }

  #page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-top-grid,
  #page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-notes-grid,
  #page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-grid {
    grid-template-columns: 1fr;
  }

  #page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-save-row,
  #page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-card-head,
  #page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-review-save-row {
    flex-direction: column;
    align-items: stretch;
  }

  #page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-card-total {
    text-align: left;
  }
}

@media (max-width: 480px) {
  #page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-info-card,
  #page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-card {
    padding: 11px 12px;
    border-radius: 12px;
  }

  #page-wedding-detail #wdetail-panel-financial_sheet .ll-cm-financial-save-row {
    padding: 11px 12px;
  }
}

/* Contract Documents */
.ll-cm-contract-section {
  gap: 18px;
}

.ll-cm-contract-primary-wrap,
.ll-cm-contract-supporting-wrap {
  display: grid;
  gap: 14px;
}

.ll-cm-contract-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}

.ll-cm-contract-section-head.is-secondary {
  opacity: 0.92;
}

.ll-cm-contract-section-title {
  margin: 4px 0 0;
  font-family: 'Jost', 'Helvetica Neue', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--staff-text, #1a2232);
}

.ll-cm-contract-section-copy {
  margin: 0;
  max-width: 620px;
  color: var(--staff-text-soft, #546070);
  font-size: 13px;
  line-height: 1.6;
}

.ll-cm-contract-card.is-primary {
  border-color: rgba(47, 95, 167, 0.24);
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(239, 245, 253, 0.96));
}

.ll-cm-contract-card.is-upload {
  border-style: dashed;
  background: #fbfcfe;
}

.ll-cm-contract-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.ll-cm-contract-field {
  gap: 6px;
}

.ll-cm-contract-file-input {
  padding-top: 9px;
  padding-bottom: 9px;
}

.ll-cm-contract-textarea {
  min-height: 108px;
  padding: 12px;
  resize: vertical;
}

.ll-cm-contract-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 38px;
  padding: 10px 0 0;
  color: var(--staff-text, #1a2232);
  font-size: 13px;
  line-height: 1.5;
}

.ll-cm-contract-checkbox input {
  margin-top: 3px;
}

.ll-cm-contract-inline-btn {
  margin-top: 10px;
  width: fit-content;
}

.ll-cm-contract-doc-list {
  display: grid;
  gap: 14px;
}

.ll-cm-contract-empty-secondary {
  border-style: dashed;
  background: #fbfcfe;
}

@media (max-width: 900px) {
  .ll-cm-contract-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .ll-cm-contract-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Focused mobile polish for Weddings, Tasks, and Work Log */
@media (max-width: 768px) {
  #search-section,
  #search-section.staff-section-shell {
    display: block !important;
    padding-top: 8px !important;
  }

  #search-input {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  #page-weddings .card-header > div:first-child {
    padding-right: 58px !important;
  }

  #page-weddings .card-mobile-toggle {
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

}

@media (max-width: 480px) {
  #weddings-topbar {
    gap: 10px !important;
    padding: 0 12px !important;
  }

  #search-section,
  #search-section.staff-section-shell {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #task-modal-head {
    padding: 18px 20px 16px !important;
  }

  #task-modal-overlay .task-modal-body {
    padding: 18px 18px 20px !important;
    gap: 12px !important;
  }

  #task-modal-overlay .task-modal-row-2col {
    gap: 12px !important;
  }

  #task-modal-overlay textarea.tasks-input {
    min-height: 64px !important;
  }
}

@media (max-width: 360px) {
}

@media (max-width: 860px) {
  .staff-hub-shell__eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
  }

  .staff-hub-tabs {
    gap: 8px !important;
  }

  .staff-hub-tab {
    min-height: 44px;
    padding: 10px 12px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.06em !important;
    text-align: center;
  }

#page-checklist-settings .checklist-admin-btn.primary,
#page-portal-bridal-checklist .checklist-admin-btn.primary,
  #page-site-settings .ll-admin-btn.primary {
    min-height: var(--staff-mobile-control-h) !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
  }
}

@media (max-width: 560px) {
  #page-checklist-settings .checklist-admin-item-actions--quad,
  #page-portal-bridal-checklist .checklist-admin-item-actions--quad {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #page-checklist-settings .checklist-admin-item-actions--quad .checklist-admin-inline-btn,
  #page-portal-bridal-checklist .checklist-admin-item-actions--quad .checklist-admin-inline-btn {
    min-width: 0 !important;
    min-height: var(--staff-mobile-control-h-sm) !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.06em !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  #page-checklist-settings .checklist-admin-item-head,
  #page-portal-bridal-checklist .checklist-admin-item-head {
    display: block !important;
  }

  #page-checklist-settings .checklist-admin-item-title,
  #page-portal-bridal-checklist .checklist-admin-item-title,
  #page-checklist-settings .checklist-admin-item-meta,
  #page-portal-bridal-checklist .checklist-admin-item-meta {
    overflow-wrap: anywhere;
  }

  #page-checklist-settings .checklist-admin-item-actions,
  #page-portal-bridal-checklist .checklist-admin-item-actions {
    width: 100% !important;
  }

  #page-checklist-settings .checklist-admin-item-actions--quad,
  #page-portal-bridal-checklist .checklist-admin-item-actions--quad {
    grid-template-columns: 1fr !important;
  }
}

/* Final header stabilization: keep brand, menu, and user controls from colliding. */
#header-inner {
  height: auto !important;
  min-height: 54px !important;
}

#header-top {
  width: 100% !important;
  min-width: 0 !important;
}

#header-top > * {
  min-width: 0 !important;
}

#logo-text-wrap {
  min-width: 0 !important;
}

.ll-header-user {
  flex: 0 0 auto !important;
}

.ll-header-user.visible {
  display: inline-flex !important;
  align-items: center !important;
}

@media (min-width: 861px) {
  #header-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
  }

  #logo-block {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin-right: auto !important;
  }

  #logo-text-name,
  #logo-text-sub {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 860px) {
  #header {
    padding: 14px var(--staff-mobile-gutter) 12px !important;
  }

  #header-top {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "menu brand user" !important;
    align-items: center !important;
    gap: 12px !important;
  }

  #mobile-menu-btn {
    display: flex !important;
    grid-area: menu !important;
    justify-self: start !important;
  }

  #logo-block {
    grid-area: brand !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    pointer-events: auto !important;
  }

  #logo-img {
    width: clamp(28px, 5vw, 34px) !important;
    height: clamp(28px, 5vw, 34px) !important;
    flex: 0 0 auto !important;
  }

  #logo-text-wrap {
    align-items: center !important;
    text-align: center !important;
    gap: 2px !important;
  }

  #logo-text-name {
    max-width: 100% !important;
    font-size: clamp(16px, 4.6vw, 22px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #logo-text-sub {
    display: block !important;
    max-width: 100% !important;
    font-size: clamp(10px, 2.4vw, 12px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: rgba(220, 232, 244, 0.82) !important;
  }

  #logo-text-portal {
    display: none !important;
  }

  .ll-header-user {
    grid-area: user !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .ll-header-user.visible {
    display: inline-flex !important;
  }

  #ll-header-notifications-btn,
  .ll-current-user-avatar {
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 560px) {
  #header-top {
    gap: 10px !important;
  }

  #logo-block {
    gap: 8px !important;
    padding: 0 !important;
  }

  #logo-text-sub {
    display: none !important;
  }
}

@media (max-width: 430px) {
  #header-top {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "menu user"
      "brand brand" !important;
    row-gap: 8px !important;
  }

  #logo-block {
    width: 100% !important;
    padding-top: 2px !important;
  }

  #logo-text-sub {
    display: block !important;
  }
}

.site-settings-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 20px;
  padding: 4px;
  border: 1px solid rgba(29, 49, 71, 0.08);
  border-radius: 10px;
  background: #fafbfc;
}

.site-settings-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: #627287;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  box-shadow: none;
}

.site-settings-tab:hover {
  transform: none;
  color: #1d3147;
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(29, 49, 71, 0.08);
}

.site-settings-tab.active {
  background: #ffffff;
  border-color: rgba(29, 49, 71, 0.08);
  color: #1d3147;
  box-shadow: 0 1px 2px rgba(20, 43, 73, 0.04);
}

.site-settings-panel {
  display: block;
}

.site-settings-panel .checklist-admin-grid > :only-child {
  grid-column: 1 / -1;
}

.site-settings-panel[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .site-settings-tab-bar {
    gap: 10px;
    margin-bottom: 20px;
  }

  .site-settings-tab {
    flex: 1 1 210px;
    justify-content: center;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE UX IMPROVEMENTS
   Comprehensive mobile usability, touch ergonomics,
   safe-area support, and scanability improvements.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Safe-area insets for notched/home-bar devices ────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .staff-mobile-bottom-nav {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }

  /* Ensure body bottom padding accounts for safe area */
  @media (max-width: 900px) {
    body {
      padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }
  }

  #mobile-nav-drawer-panel {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── 2. Bottom nav: bigger tap targets, clearer labels ───── */
@media (max-width: 900px) {
  .staff-mobile-bottom-nav {
    gap: 4px;
    padding: 8px 10px;
  }

  .staff-mobile-bottom-nav button {
    min-height: 52px;
    padding: 6px 4px 8px;
    gap: 3px;
    border-radius: 14px;
    position: relative;
  }

  .staff-mobile-bottom-nav-ico {
    font-size: 20px;
    line-height: 1;
  }

  .staff-mobile-bottom-nav-label {
    font-size: 9.5px;
    letter-spacing: 0.04em;
    font-weight: 600;
    line-height: 1.1;
  }
}

/* ── 3. Mobile header: compact, less vertical space ──────── */
@media (max-width: 900px) {
  #header {
    padding: 10px 14px 8px !important;
    border-radius: 0 0 20px 20px !important;
  }

  #logo-block {
    gap: 10px !important;
  }

  #logo-img {
    width: 36px !important;
    height: 36px !important;
  }

  #logo-text-name {
    font-size: 17px !important;
  }

  #logo-text-sub {
    font-size: 10.5px !important;
  }

  /* Hide the portal subtitle on small screens — saves vertical space */
  #logo-text-portal {
    display: none !important;
  }

  /* Hamburger button: bigger touch target */
  #mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 520px) {
  #header {
    padding: 8px 10px 6px !important;
  }

  #logo-text-name {
    font-size: 15px !important;
  }
}

/* ── 4. Mobile drawer: better grouping, larger targets ───── */
#mobile-nav-drawer-list {
  padding: 8px 8px 28px;
  gap: 1px;
}

.mobile-nav-drawer-btn {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14.5px;
  gap: 14px;
}

.mobile-nav-drawer-ico {
  width: 26px;
  font-size: 18px;
}

/* Drawer close button: bigger touch target */
#mobile-nav-drawer-close {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 18px;
}

/* Drawer section dividers for visual grouping */
.mobile-nav-drawer-btn[data-page="worklogs"] {
  margin-top: 8px;
  position: relative;
}

.mobile-nav-drawer-btn[data-page="worklogs"]::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: rgba(201, 212, 225, 0.6);
}

.mobile-nav-drawer-btn[data-page="tours"] {
  margin-top: 8px;
  position: relative;
}

.mobile-nav-drawer-btn[data-page="tours"]::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: rgba(201, 212, 225, 0.6);
}

.mobile-nav-drawer-btn[data-page="site-settings"] {
  margin-top: 8px;
  position: relative;
}

.mobile-nav-drawer-btn[data-page="site-settings"]::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: rgba(201, 212, 225, 0.6);
}

/* Active drawer item: stronger visual signal */
.mobile-nav-drawer-btn.mnd-active {
  background: var(--staff-primary-soft, rgba(220, 228, 238, 0.7)) !important;
  border-left: 3px solid var(--staff-primary, #326eb8);
  font-weight: 700;
}

/* ── 5. Dashboard mobile improvements ────────────────────── */
@media (max-width: 680px) {
  .dash-shell {
    padding: 10px 10px 20px;
    gap: 8px;
  }

  .dash-hero {
    padding: 10px 12px;
    gap: 8px;
  }

  .dash-hero-name {
    font-size: 14px;
  }

  .dash-hero-summary {
    font-size: 11.5px;
  }

  /* Refresh button: minimum 44px touch target */
  .dash-refresh-btn {
    width: 40px;
    height: 40px;
    font-size: 17px;
    border-radius: 10px;
  }

  .dash-card {
    padding: 12px;
    gap: 8px;
  }

  /* Card header: bigger touch targets for "View all" links */
  .dash-card-link {
    min-height: 36px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: var(--dash-blue-light, #eef5ff);
    color: var(--dash-blue, #2f5fa7);
    transition: background 0.15s;
  }

  .dash-card-link:hover {
    background: var(--dash-blue, #2f5fa7);
    color: #fff;
  }

  /* Task, message, notification items: bigger tap targets */
  .dash-task-item,
  .dash-message-item,
  .dash-notif-item {
    min-height: 48px;
    padding: 8px 4px;
    gap: 10px;
  }

  .dash-task-title,
  .dash-notif-label,
  .dash-wedding-couple,
  .dash-msg-sender {
    font-size: 13.5px;
  }

  .dash-task-due,
  .dash-notif-time,
  .dash-wedding-meta,
  .dash-msg-preview {
    font-size: 11.5px;
  }

  /* Schedule items: slightly taller rows */
  .dash-schedule-item {
    min-height: 44px;
    padding: 8px 0;
  }

  .dash-schedule-label {
    font-size: 13px;
  }

  /* Wedding items: bigger touch target */
  .dash-wedding-item {
    min-height: 48px;
    padding: 10px 12px;
    gap: 12px;
  }

  /* Priority items */
  .dash-priority-item {
    min-height: 48px;
    padding: 10px 12px;
  }

  .dash-priority-label {
    font-size: 13px;
  }

  /* Card title: slightly larger for readability */
  .dash-card-title {
    font-size: 12px;
  }

  /* Empty state */
  .dash-empty {
    padding: 16px 8px;
    font-size: 13px;
  }

  /* Count pills: bigger for touch */
  .dash-count-pill {
    padding: 4px 10px;
    font-size: 12px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
  }

  /* Badges: slightly larger */
  .dash-badge {
    padding: 2px 8px;
    font-size: 11px;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── 6. Payments page: mobile-friendly table ─────────────── */
@media (max-width: 900px) {
  .payments-shell {
    padding: 16px 10px 52px !important;
  }

  .payments-hero {
    padding: 18px 16px !important;
  }

  .payments-table {
    font-size: 12px;
    table-layout: fixed;
  }

  .payments-table th,
  .payments-table td {
    padding: 10px 8px !important;
  }

  .payments-comments-input {
    min-height: 100px;
  }

  .payments-actions {
    padding: 16px 0;
  }

  .payments-actions .checklist-admin-btn {
    width: 100%;
    min-height: 52px;
    font-size: 13px;
  }
}

/* ── 7. Notification items: better mobile density ────────── */
@media (max-width: 900px) {
  .notifications-item {
    padding: 14px 14px;
    border-radius: 16px;
  }

  .notifications-item-title {
    font-size: 15px;
  }

  .notifications-mark-btn {
    min-height: 44px;
    border-radius: 12px;
    font-size: 12px;
  }

}

/* ── 8. Wedding cards on mobile: improved readability ────── */
@media (max-width: 900px) {
  .wedding-card {
    border-radius: 18px !important;
  }

  .card-header {
    padding: 16px 14px 12px !important;
    min-height: 56px;
  }

  .card-couple {
    font-size: 17px;
  }

  .card-meta {
    padding: 12px 14px !important;
  }

  .card-meta-label {
    font-size: 9px;
  }

  .card-meta-value {
    font-size: 13px;
  }

  .card-actions {
    padding: 12px 14px !important;
    gap: 10px;
  }

  .card-actions .edit-btn,
  .card-actions .del-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 11px;
  }

  .card-expand-btn {
    min-height: 44px;
    font-size: 11px;
  }

  .card-checklist-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
}

/* ── 9. General mobile form improvements ─────────────────── */
@media (max-width: 900px) {
  /* All interactive elements: minimum touch target */
  .checklist-admin-btn,
  .btn-save,
  .btn-cancel,
  .tasks-page-add-btn,
  #qa-page-add-btn,
  #tours-add-btn {
    min-height: 48px;
  }

  /* Selects and inputs */
  select,
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="tel"],
  input[type="url"],
  textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  /* Modal improvements on mobile */
  #modal-box,
  #task-modal-box {
    border-radius: 20px 20px 0 0 !important;
  }

  #modal-close,
  .cal-detail-close,
  #task-modal-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Calendar detail modal: full-width on mobile */
  #cal-detail-box {
    width: min(560px, 96vw) !important;
    max-height: 90vh;
  }
}

/* ── 10. Better focus states for touch + keyboard ────────── */
@media (max-width: 900px) {
  :focus-visible {
    outline: 3px solid var(--staff-primary, #326eb8) !important;
    outline-offset: 2px;
  }

  /* Touch device active state feedback */
  .mobile-nav-drawer-btn:active,
  .staff-mobile-bottom-nav button:active,
  .dash-card-link:active,
  .dash-task-item:active,
  .dash-message-item:active,
  .dash-notif-item:active,
  .dash-wedding-item:active,
  .dash-priority-item:active,
  .wedding-card .card-header:active,
  .edit-btn:active,
  .btn-save:active,
  .btn-cancel:active,
  .checklist-admin-btn:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
  }
}

/* ── 11. Mobile scroll optimizations ─────────────────────── */
@media (max-width: 900px) {
  /* Prevent horizontal overflow globally */
  html {
    overflow-x: hidden !important;
  }

  /* Smooth scroll for page content */
  #app-main {
    -webkit-overflow-scrolling: touch;
  }

  /* Horizontal scroll containers get smooth behavior */
  .payments-table-wrap,
  .tasks-owner-strip,
  .vendor-chip-row,
  .stay-subtabs,
  #tours-subtabs,
  .tasks-filter-tabs,
  #page-notifications .notifications-filter-tabs {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

/* ── 12. Improve mobile page picker spacing ──────────────── */
@media (max-width: 900px) {
  body #mobile-page-picker-wrap {
    padding: 8px 10px 6px !important;
  }

  body .mobile-page-picker-card {
    padding: 10px 14px !important;
    border-radius: 16px !important;
    min-height: 48px;
  }

  body #mobile-page-picker {
    min-height: 44px;
    font-size: 16px !important;
  }
}

/* ── 13. Calendar mobile: better touch targets ───────────── */
@media (max-width: 900px) {
  .cal-list-item,
  .cal-chip {
    min-height: 48px;
    padding: 10px 14px;
  }

  .cal-day {
    min-height: 48px;
    padding: 6px;
  }

  .cal-wedding-chip,
  .cal-tour-chip {
    padding: 6px 8px;
    font-size: 11px;
    min-height: 32px;
    display: flex;
    align-items: center;
  }
}

/* ── 14. Tasks page mobile ───────────────────────────────── */
@media (max-width: 900px) {
  .tasks-card {
    border-radius: 18px !important;
  }

  .tasks-card-head {
    padding: 14px 14px 10px;
  }

  .tasks-card-body {
    padding: 0 14px 14px;
  }

  .tasks-item {
    min-height: 48px;
    padding: 10px 0;
  }
}

/* ── 15. Staff chat mobile improvements ──────────────────── */
@media (max-width: 900px) {
  .sc-input-row textarea {
    min-height: 48px;
    font-size: 16px !important;
  }

  .sc-msg-actions button,
  .sc-input-send {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── 16. Scroll-lock when drawer is open ─────────────────── */
body.mobile-drawer-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

#mobile-nav-drawer[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden;
}

#mobile-nav-drawer[aria-hidden="true"] #mobile-nav-drawer-overlay,
#mobile-nav-drawer[aria-hidden="true"] #mobile-nav-drawer-panel {
  pointer-events: none !important;
  visibility: hidden;
}

#mobile-nav-drawer.open[aria-hidden="false"] {
  display: block;
  pointer-events: auto;
  visibility: visible;
}

#mobile-nav-drawer.open[aria-hidden="false"] #mobile-nav-drawer-overlay,
#mobile-nav-drawer.open[aria-hidden="false"] #mobile-nav-drawer-panel {
  pointer-events: auto;
  visibility: visible;
}

.staff-mobile-bottom-nav,
.staff-mobile-bottom-nav button,
#mobile-nav-drawer-list,
.mobile-nav-drawer-btn {
  pointer-events: auto;
  touch-action: manipulation;
}

body.ll-auth-locked .staff-mobile-bottom-nav,
body.ll-auth-locked #mobile-nav-drawer {
  filter: blur(2px);
  pointer-events: none !important;
  user-select: none;
}

body.ll-auth-locked #ll-auth-overlay {
  z-index: 1400;
}

/* ── 17. Reduce motion for users who prefer it ───────────── */
@media (prefers-reduced-motion: reduce) {
  .staff-mobile-bottom-nav button,
  .mobile-nav-drawer-btn,
  .dash-task-item,
  .dash-message-item,
  .dash-wedding-item,
  #mobile-nav-drawer-panel,
  #mobile-nav-drawer-overlay {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Layout-only width pass */
@media (min-width: 901px) {
  #app-main {
    width: calc(100vw - var(--staff-sidebar-left-desktop, 18px) - var(--staff-sidebar-width-desktop, 226px) - (var(--staff-sidebar-gap-desktop, 12px) * 2)) !important;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
  }

  #weddings-actions,
  #stats,
  #search-section,
  #table-section,
  #cal-body,
  #qa-body,
  #tasks-body,
  #wl-body,
  #tours-body,
  #rentals-body,
  #family-body,
  #events-body,
  #meetings-body,
  #wedding-detail-body,
  #payments-body,
  #notifications-body,
  #page-checklist-settings,
  #page-portal-bridal-checklist,
  #page-portal-credentials,
  #page-site-settings,
  #page-reception-template-builder,
  #page-stock-checklists,
  #page-stock-checklist-editor,
  #page-stock-checklist-detail,
  #page-stock-checklist-template,
  #page-stock-checklist-dashboard,
  #page-admin-users,
  #page-admin-permissions {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  .staff-hub-shell,
  .checklist-admin-shell,
  .payments-shell,
  .ll-cm-shell,
  .rtb-shell,
  .notifications-shell {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .checklist-admin-grid {
    grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.7fr);
    gap: clamp(18px, 1.8vw, 28px);
  }

  .checklist-admin-card-stack {
    gap: clamp(16px, 1.5vw, 24px);
  }

  .payments-selector-grid {
    grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);
  }

  .payments-content,
  .payments-table-wrap,
  .wdetail-doc-table-wrap,
  .ll-cm-table-wrap {
    width: 100%;
  }
}

@media (min-width: 1180px) {
  .tasks-shell:not(.tasks-shell-single) {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  }
}

@media (min-width: 1320px) {
  .ll-cm-dashboard:not(.ll-cm-dashboard--detail-only) {
    grid-template-columns: minmax(360px, 0.75fr) minmax(0, 1.5fr);
  }
}

@media (max-width: 900px) {
  #app-main {
    width: 100% !important;
    max-width: none !important;
  }

  .checklist-admin-shell,
  .checklist-admin-status {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .checklist-admin-status {
    overflow-wrap: anywhere;
  }
}

/* ===============================================================
   DESIGN STUDIO ADMIN (Legacy Lane Favorites)
   Staff UI for managing featured palettes and style guide templates
   shown to couples in the Design Studio.
   =============================================================== */

.dsa-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 253, 0.98));
  border: 1px solid rgba(204, 215, 229, 0.9);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(22, 45, 74, 0.06);
}

.dsa-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.dsa-loading,
.dsa-empty {
  padding: 28px 20px;
  text-align: center;
  color: #6a7a8c;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px dashed rgba(153, 168, 188, 0.7);
  border-radius: 14px;
}

.dsa-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dsa-group-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 4px;
}

.dsa-group-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  color: #1f3251;
  margin: 0;
}

.dsa-group-count {
  font-size: 12px;
  color: #6a7a8c;
  background: rgba(31, 66, 113, 0.08);
  padding: 2px 10px;
  border-radius: 999px;
}

.dsa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.dsa-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(204, 215, 229, 0.95);
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(22, 45, 74, 0.07);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dsa-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(22, 45, 74, 0.12);
}

.dsa-card.inactive {
  opacity: 0.64;
  background: #f7f9fc;
}

.dsa-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.dsa-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  color: #1f3251;
  margin: 0;
  line-height: 1.2;
  flex: 1 1 auto;
}

.dsa-card-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

.dsa-card-badge.active {
  background: rgba(46, 125, 50, 0.14);
  color: #2e7d32;
}

.dsa-card-badge.inactive {
  background: rgba(198, 40, 40, 0.12);
  color: #c62828;
}

.dsa-card-description {
  font-size: 12.5px;
  color: #516375;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dsa-card-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dsa-card-swatch {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.dsa-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dsa-card-tag {
  font-size: 10px;
  text-transform: capitalize;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(31, 66, 113, 0.08);
  color: #45597a;
}

.dsa-card-meta {
  font-size: 11px;
  color: #8695a8;
}

.dsa-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(153, 168, 188, 0.4);
  margin-top: auto;
}

.dsa-card-actions button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  font-size: 11.5px;
  border-radius: 8px;
  border: 1px solid rgba(31, 66, 113, 0.2);
  background: #fff;
  color: #1f3251;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.dsa-card-actions button:hover {
  background: rgba(31, 66, 113, 0.06);
  border-color: rgba(31, 66, 113, 0.4);
}

.dsa-card-actions button.danger {
  color: #c62828;
  border-color: rgba(198, 40, 40, 0.2);
}

.dsa-card-actions button.danger:hover {
  background: rgba(198, 40, 40, 0.08);
  border-color: rgba(198, 40, 40, 0.5);
}

/* ── Modal ── */

.dsa-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 38, 0.58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 16px 16px;
  z-index: 9000;
  overflow-y: auto;
  animation: dsa-fade-in 0.18s ease;
}

.dsa-modal-overlay[hidden] {
  display: none !important;
}

@keyframes dsa-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dsa-modal {
  width: min(640px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 40px 80px rgba(8, 20, 40, 0.4);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  animation: dsa-slide-up 0.22s ease;
}

@keyframes dsa-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.dsa-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(204, 215, 229, 0.7);
}

.dsa-modal-header h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  color: #1f3251;
}

.dsa-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(204, 215, 229, 0.9);
  background: #fff;
  color: #45597a;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dsa-modal-close:hover {
  background: rgba(31, 66, 113, 0.06);
  color: #1f3251;
}

.dsa-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dsa-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid rgba(204, 215, 229, 0.7);
  background: #f7f9fc;
  border-radius: 0 0 18px 18px;
}

.dsa-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dsa-form-field label {
  font-size: 12px;
  font-weight: 600;
  color: #45597a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dsa-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 520px) {
  .dsa-form-row {
    grid-template-columns: 1fr;
  }
}

.dsa-form-colors {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.dsa-color-row {
  display: grid;
  grid-template-columns: 46px 100px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px;
  background: #f7f9fc;
  border: 1px solid rgba(204, 215, 229, 0.8);
  border-radius: 10px;
}

.dsa-color-row input[type="color"] {
  width: 40px;
  height: 34px;
  border: none;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  background: transparent;
}

.dsa-color-row input[type="text"] {
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid rgba(204, 215, 229, 0.9);
  border-radius: 8px;
  background: #fff;
  color: #1f3251;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  min-width: 0;
}

.dsa-color-row .dsa-color-name {
  font-family: inherit;
}

.dsa-color-row .dsa-color-remove {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(198, 40, 40, 0.25);
  background: #fff;
  color: #c62828;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.dsa-color-row .dsa-color-remove:hover {
  background: rgba(198, 40, 40, 0.08);
}

.dsa-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 10px 12px;
  background: #f7f9fc;
  border: 1px solid rgba(204, 215, 229, 0.8);
  border-radius: 10px;
}

.dsa-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #1f3251;
  text-transform: capitalize;
  letter-spacing: 0;
  cursor: pointer;
}

.dsa-checkbox-group input[type="checkbox"] {
  accent-color: #1f4271;
}

.dsa-form-error {
  padding: 10px 12px;
  background: rgba(198, 40, 40, 0.08);
  border: 1px solid rgba(198, 40, 40, 0.25);
  border-radius: 8px;
  color: #c62828;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL UI/UX REFINEMENT PASS — 2026-04-09
   Purpose: wider horizontal usage, unified surfaces, calmer typography,
   lighter font weights. Style-only — no content changes.
   Single source of truth for layout/typography normalisation.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens: widen the effective desktop content column ── */
:root {
  --staff-content-max: min(1520px, calc(100vw - var(--staff-sidebar-width) - 72px));
}

/* ── Layout: let primary page containers stretch to the wider column ── */
#app-main {
  width: var(--staff-content-max);
}

@media (min-width: 1025px) {
  #header-inner,
  #weddings-actions,
  #search-section,
  #table-section,
  #cal-body,
  #qa-body,
  #wl-body,
  #tasks-body,
  #tours-body,
  #rentals-body,
  #family-body,
  #events-body,
  #meetings-body,
  #wedding-detail-body,
  #bride-messages-body,
  #notifications-body,
  .staff-page-header,
  .checklist-admin-shell,
  .stay-page-body,
  #page-notifications .notifications-shell {
    max-width: 1520px !important;
  }

  /* Ensure the content inside page shells actually uses the width */
  #cal-body,
  #qa-body,
  #wl-body,
  #tasks-body,
  #tours-body,
  #rentals-body,
  #family-body,
  #events-body,
  #meetings-body,
  #wedding-detail-body,
  #bride-messages-body,
  #notifications-body {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── Descriptive text blocks: allow them to span the container width ── */
.staff-page-sub,
.staff-page-copy,
#qa-empty,
#tasks-empty,
.wl-hist-heading + p,
.notifications-list-sub,
.tasks-list-sub,
.wl-form-sub,
.tour-log-sub {
  max-width: none !important;
}

/* ── Typography refinement: calmer headings across staff pages ── */
.staff-page-title {
  font-size: clamp(26px, 2.4vw, 32px) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.staff-page-kicker {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
}

.staff-page-sub {
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.staff-page-badge {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
}

/* Card titles and list headers */
.tasks-card-title,
.tasks-list-title,
.qa-card-title,
.wl-form-title,
.wl-hist-heading,
.stay-card-title,
.cal-list-couple,
.cal-mobile-empty-title,
.notifications-item-title {
  font-size: clamp(18px, 1.8vw, 22px) !important;
  font-weight: 500 !important;
}

/* Month/date/metric displays — serif but not heavy */
#cal-month-label,
#cal-detail-couple,
.tasks-summary-num {
  font-weight: 500 !important;
}

/* Sub-navigation, tabs, filter chips */
.nav-tab,
.stay-subtab,
.tasks-subtab,
.qa-subtab,
.wl-subtab,
.site-settings-tab,
.notifications-filter-tab {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

.nav-tab.active,
.stay-subtab.active,
.tasks-subtab.active,
.qa-subtab.active,
.wl-subtab.active,
.site-settings-tab.active,
.notifications-filter-tab.active {
  font-weight: 600 !important;
}

/* Buttons — standardized weights/sizes */
.checklist-admin-btn,
.checklist-admin-inline-btn,
.ll-admin-btn,
.ll-cm-btn,
.tasks-page-add-btn,
.tasks-add-btn,
.stay-add-btn,
#add-btn,
.btn-save,
.cal-detail-edit-btn {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* ── Lighter weights: trim over-bolding across misc surfaces ── */
.notifications-item-title,
.notifications-item-sender,
.notifications-item-action,
.notifications-mark-btn,
.notifications-type-badge,
.notifications-unread-dot + span,
.tasks-summary-label,
.wl-avatar-circle,
.guest-stat,
.stay-chip,
.stay-card-meta strong {
  font-weight: 600 !important;
}

.wedding-table th {
  font-weight: 600 !important;
  letter-spacing: 0.08em;
}

/* Table-of-contents/side labels */
.nav-label {
  font-weight: 500 !important;
}

/* Kicker-style labels across the portal */
.notifications-item-time,
.staff-page-kicker,
.wl-subtabs .wl-subtab,
.tour-log-kicker,
.meeting-log-kicker {
  font-weight: 600 !important;
}

/* ── Shared panel surface: unify section shells and card wrappers ── */
.staff-section-shell {
  border-radius: 24px !important;
}

/* ── Mobile: restore fluidity, never inherit the new wider caps ── */
@media (max-width: 1024px) {
  #app-main {
    width: auto !important;
  }

  #header-inner,
  #weddings-actions,
  #search-section,
  #table-section,
  #cal-body,
  #qa-body,
  #wl-body,
  #tasks-body,
  #tours-body,
  #rentals-body,
  #family-body,
  #events-body,
  #meetings-body,
  #wedding-detail-body,
  #bride-messages-body,
  #notifications-body,
  .staff-page-header,
  .checklist-admin-shell,
  .stay-page-body,
  #page-notifications .notifications-shell {
    max-width: none !important;
  }

  .staff-page-title {
    font-size: 26px !important;
  }
}
.wstaff-shell {
  display: grid;
  gap: 22px;
}

.wstaff-section {
  display: grid;
  gap: 12px;
}

.wstaff-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(29, 49, 71, 0.09);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.wstaff-summary-row > span {
  flex: 1 1 140px;
  padding: 10px 16px;
  font-size: 12px;
  color: rgba(29, 49, 71, 0.62);
  letter-spacing: 0.01em;
  border-left: 1px solid rgba(29, 49, 71, 0.07);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.wstaff-summary-row > span:first-child {
  border-left: 0;
}

.wstaff-summary-row strong {
  font-size: 15px;
  font-weight: 600;
  color: #1d3147;
  letter-spacing: -0.005em;
}

.wstaff-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.wstaff-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(29, 49, 71, 0.09);
  border-radius: 10px;
  background: #fff;
}

.wstaff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.wstaff-table th,
.wstaff-table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(29, 49, 71, 0.06);
  vertical-align: middle;
  text-align: left;
}

.wstaff-table th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(29, 49, 71, 0.58);
  background: #fafbfc;
  border-bottom: 1px solid rgba(29, 49, 71, 0.08);
}

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

.wstaff-table tbody tr:hover td {
  background: rgba(245, 247, 250, 0.6);
}

.wstaff-actions-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 180px;
}

.wstaff-mini-btn {
  padding: 5px 10px;
  min-height: auto;
  font-size: 11.5px;
  border-radius: 7px;
}

.wstaff-bulk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid rgba(29, 49, 71, 0.08);
  border-radius: 10px;
  background: #fafbfc;
}

.wstaff-bulk-select,
.wstaff-action-select {
  min-width: 130px;
  max-width: 100%;
  font-size: 12.5px;
}

.wstaff-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #1d3147;
}

.wstaff-select-col {
  width: 34px;
}

.wstaff-name-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.wstaff-name-cell > div:first-child {
  font-weight: 500;
  color: #1d3147;
}

.wstaff-subcell {
  font-size: 11.5px;
  color: rgba(29, 49, 71, 0.6);
  overflow-wrap: anywhere;
}

.wstaff-inline-message {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  border: 1px solid rgba(29, 49, 71, 0.1);
  background: #fafbfc;
}

.wstaff-assignment-row-open td {
  background: rgba(250, 245, 232, 0.5);
}

.wstaff-assignment-row-open .wstaff-open-name {
  font-style: italic;
}

.wstaff-inline-message.is-success {
  color: #1f6a41;
  border-color: rgba(31, 106, 65, 0.18);
  background: rgba(231, 248, 238, 0.9);
}

.wstaff-inline-message.is-error {
  color: #943843;
  border-color: rgba(148, 56, 67, 0.18);
  background: rgba(255, 240, 242, 0.92);
}

.wstaff-inline-message.is-warn {
  color: #7a5a1f;
  border-color: rgba(122, 90, 31, 0.18);
  background: rgba(255, 248, 232, 0.92);
}

.wstaff-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1200;
}

.wstaff-modal {
  width: min(720px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(16, 24, 40, 0.18);
  display: grid;
}

.wstaff-picker-modal {
  width: min(860px, 100%);
}

.wstaff-modal-head,
.wstaff-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(29, 49, 71, 0.08);
}

.wstaff-modal-foot {
  border-bottom: 0;
  border-top: 1px solid rgba(29, 49, 71, 0.08);
  justify-content: flex-end;
}

.wstaff-modal-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.wstaff-picker-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.wstaff-field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: rgba(29, 49, 71, 0.78);
}

.wstaff-field-grow {
  grid-column: span 1;
}

.wstaff-textarea {
  min-height: 88px;
  resize: vertical;
}

.wstaff-empty-cell {
  text-align: center;
  color: rgba(29, 49, 71, 0.68);
}

.wstaff-assignments-table tr.is-muted {
  opacity: 0.68;
}

@media (max-width: 760px) {
  .wstaff-section-head {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .wstaff-section-head > * {
    min-width: 0;
  }

  .wstaff-section-head .ll-cm-btn {
    width: 100%;
  }

  .wstaff-summary-row {
    gap: 8px 12px;
    padding: 10px;
  }

  .wstaff-bulk-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .wstaff-bulk-row > * {
    min-width: 0;
    max-width: 100%;
  }

  .wstaff-checkbox {
    width: 100%;
  }

  .wstaff-bulk-select,
  .wstaff-action-select {
    width: 100%;
    min-width: 0;
  }

  .wstaff-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .wstaff-table,
  .wstaff-table tbody,
  .wstaff-table tr,
  .wstaff-table td {
    display: block;
    width: 100%;
  }

  .wstaff-table {
    border-collapse: separate;
  }

  .wstaff-table thead {
    display: none;
  }

  .wstaff-table tbody {
    display: grid;
    gap: 10px;
  }

  .wstaff-table tr {
    padding: 12px;
    border: 1px solid rgba(29, 49, 71, 0.1);
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
  }

  .wstaff-table td {
    display: grid;
    grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
    gap: 8px 10px;
    align-items: start;
    min-width: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
  }

  .wstaff-table td + td {
    margin-top: 8px;
  }

  .wstaff-table td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(29, 49, 71, 0.64);
  }

  .wstaff-table td > * {
    min-width: 0;
  }

  .wstaff-table td .ll-cm-chip {
    justify-self: start;
  }

  .wstaff-table td.wstaff-select-col {
    width: 100%;
  }

  .wstaff-table td.wstaff-actions-cell::before {
    grid-column: 1 / -1;
  }

  .wstaff-requirements-table td.wstaff-actions-cell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .wstaff-assignments-table td.wstaff-actions-cell,
  .wstaff-picker-table td.wstaff-actions-cell {
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
  }

  .wstaff-assignments-table td.wstaff-actions-cell .wstaff-mini-btn,
  .wstaff-picker-table td.wstaff-actions-cell .wstaff-mini-btn {
    width: auto;
  }

  .wstaff-empty-cell {
    display: block !important;
    padding: 0 !important;
  }

  .wstaff-empty-cell::before {
    content: none;
  }

  .wstaff-picker-controls {
    grid-template-columns: 1fr;
  }

  .wstaff-actions-cell {
    min-width: 0;
  }

  .wstaff-mini-btn {
    width: 100%;
  }
}

@media (max-width: 900px) {
  #task-modal-overlay {
    align-items: flex-start !important;
    justify-content: center !important;
  }

  #task-modal-box {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }

  #task-modal-head {
    flex-shrink: 0;
  }

  #task-modal-overlay .task-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  #task-modal-overlay .task-modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-top: auto;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #ffffff 24px);
  }
}

@media (min-width: 1025px) {
  body.page-group-schedule #app-main {
    width: calc(
      100vw -
      var(--staff-sidebar-left-desktop, 18px) -
      var(--staff-sidebar-width-desktop, 226px) -
      (var(--staff-sidebar-gap-desktop, 12px) * 2)
    ) !important;
    max-width: none !important;
  }

  body.page-group-schedule .staff-hub-shell,
  body.page-group-schedule #tours-body,
  body.page-group-schedule #meetings-body,
  body.page-group-schedule #rentals-body,
  body.page-group-schedule #family-body,
  body.page-group-schedule #events-body {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--staff-content-inline-desktop, 32px) !important;
    padding-right: var(--staff-content-inline-desktop, 32px) !important;
  }
}

@media (max-width: 600px) {
  .qa-toolbar,
  .tasks-page-topbar {
    align-items: stretch !important;
    gap: 10px !important;
  }

  .tasks-list-head-v2 .tasks-filter-tabs,
  .tasks-list-head-v2 .task-type-filter-strip {
    gap: 8px !important;
  }

  .tasks-list-head-v2 .tasks-filter-btn,
  .tasks-list-head-v2 .task-type-filter-btn,
  .qa-filter-btn,
  .tasks-filter-btn,
  .qa-subtab,
  .tasks-subtab,
  .wl-subtab,
  .stay-subtab,
  .nav-tab,
  .staff-hub-tab,
  .site-settings-tab,
  .notifications-filter-tab,
  .cal-filter-chip,
  .owner-filter-chip,
  .meetings-type-btn {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .tasks-list-head-v2 .tasks-filter-btn,
  .tasks-list-head-v2 .task-type-filter-btn,
  .qa-filter-btn,
  .tasks-filter-btn {
    padding: 8px 12px !important;
  }

  .tasks-list-head-v2 .tasks-filter-btn,
  .tasks-list-head-v2 .task-type-filter-btn,
  .qa-filter-btn,
  .tasks-filter-btn,
  .qa-subtab,
  .tasks-subtab,
  .wl-subtab,
  .stay-subtab,
  .nav-tab,
  .staff-hub-tab,
  .site-settings-tab,
  .notifications-filter-tab,
  .cal-filter-chip,
  .owner-filter-chip,
  .meetings-type-btn,
  .checklist-admin-inline-btn,
  .ll-admin-btn,
  .stay-add-btn,
  .tasks-page-add-btn,
  .tasks-add-btn,
  #add-btn,
  .btn-save,
  .cal-detail-edit-btn {
    min-height: 44px;
  }

  .staff-hub-tabs {
    gap: 8px !important;
  }

  .staff-hub-tab {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }

  #stats {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #stats .stat-item {
    flex: 1 1 calc(50% - 8px) !important;
    min-height: 70px;
  }

  #stats .stat-label {
    font-size: 10px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.04em !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .sc-stat-label {
    font-size: 10px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.12em !important;
  }

  .tasks-page-add-btn,
  #qa-page-add-btn {
    width: 100%;
  }

  .wl-label,
  .wl-optional {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  #page-couple-management .ll-cm-field-label,
  #page-portal-access-follow-up .ll-cm-field-label {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }

  #page-portal-access-follow-up .ll-cm-summary-label {
    font-size: 11px !important;
  }

  #page-portal-access-follow-up .ll-cm-summary-tone,
  #page-portal-access-follow-up .ll-cm-summary-share {
    font-size: 10px !important;
  }
}

@media (max-width: 420px) {
  .tasks-list-head-v2 .task-type-filter-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .staff-hub-tab {
    flex-basis: 100%;
  }

  #stats .stat-item {
    flex-basis: calc(50% - 8px) !important;
  }
}

/* Shared full-width staff layout system */
:root {
  --app-edge-padding: clamp(12px, 3vw, 20px);
}

@media (min-width: 901px) {
  :root {
    --app-edge-padding: clamp(16px, 1.8vw, 24px);
    --staff-content-inline-desktop: var(--app-edge-padding);
  }
}

.app-container,
.app-shell,
.app-section {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.page {
  width: 100%;
  max-width: none;
}

#header {
  padding-left: var(--app-edge-padding) !important;
  padding-right: var(--app-edge-padding) !important;
}

#header-inner.app-section {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#app-main.app-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 901px) {
  #app-main.app-container {
    width: calc(
      100vw -
      var(--staff-sidebar-left-desktop, 18px) -
      var(--staff-sidebar-width-desktop, 226px) -
      (var(--staff-sidebar-gap-desktop, 12px) * 2)
    ) !important;
    margin-left: calc(
      var(--staff-sidebar-left-desktop, 18px) +
      var(--staff-sidebar-width-desktop, 226px) +
      var(--staff-sidebar-gap-desktop, 12px)
    ) !important;
    margin-right: var(--staff-sidebar-gap-desktop, 12px) !important;
  }
}

@media (max-width: 900px) {
  #app-main.app-container {
    width: 100% !important;
    margin: 0 !important;
  }
}

#weddings-actions.app-section,
#search-section.app-section,
#table-section.app-section,
#stats {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--app-edge-padding) !important;
  padding-right: var(--app-edge-padding) !important;
}

.app-shell.dash-shell,
.app-shell.checklist-admin-shell,
.app-shell.ll-cm-shell,
.app-shell.error-log-shell,
.app-shell.time-off-shell,
.app-shell.rental-mgmt-shell,
.app-shell.payment-mgmt-shell,
.app-shell.tasks-shell,
#bride-messages-body.app-shell,
#wedding-detail-body.app-shell,
#cal-body.app-shell,
#qa-body.app-shell,
#tasks-body.app-shell,
#wl-body.app-shell,
#tours-body.app-shell,
#rentals-body.app-shell,
#family-body.app-shell,
#events-body.app-shell,
#meetings-body.app-shell {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--app-edge-padding) !important;
  padding-right: var(--app-edge-padding) !important;
}

#modal-scroll-inner {
  padding-left: var(--app-edge-padding) !important;
  padding-right: var(--app-edge-padding) !important;
}

:is(
  .dash-main-grid,
  .checklist-admin-grid,
  .payments-content,
  .payments-summary-grid,
  .bride-msg-shell,
  .ll-cm-summary-grid,
  .ll-cm-toolbar-grid,
  .ll-cm-overview-grid,
  .ll-cm-usage-table-region,
  .ll-cm-review-table-wrap,
  .rtb-summary-grid,
  .wdetail-layout-shell,
  .wstaff-shell
) {
  width: 100%;
  max-width: none;
}

:is(
  .payments-table-wrap,
  .weekly-payroll-table-wrap,
  .payroll-overview-table-wrap,
  .staffing-overview-table-wrap,
  .ll-cm-usage-table-shell,
  .ll-cm-review-table-wrap,
  .wstaff-table-wrap
) {
  width: 100%;
  max-width: none !important;
}

/* Rental / stay polish */
#rentals-body .stay-card-name,
#family-body .stay-card-name,
#events-body .stay-card-name {
  font-size: 24px !important;
  line-height: 1.12 !important;
}

#rentals-body .stay-card-meta-label,
#family-body .stay-card-meta-label,
#events-body .stay-card-meta-label,
#rentals-body .stay-detail-block-label,
#family-body .stay-detail-block-label,
#events-body .stay-detail-block-label {
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
}

#rentals-body .stay-subtab,
#family-body .stay-subtab,
#events-body .stay-subtab,
#meetings-body .stay-subtab {
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
}

#rentals-body .stay-add-btn,
#family-body .stay-add-btn,
#events-body .stay-add-btn,
#meetings-body .stay-add-btn {
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
}

#rentals-body .stay-action-btn,
#family-body .stay-action-btn,
#events-body .stay-action-btn {
  min-height: 42px !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
}

#stay-submit-status.error {
  color: #b54848 !important;
}

#rentals-body .stay-subtab:focus-visible,
#family-body .stay-subtab:focus-visible,
#events-body .stay-subtab:focus-visible,
#meetings-body .stay-subtab:focus-visible,
#rentals-body .stay-add-btn:focus-visible,
#family-body .stay-add-btn:focus-visible,
#events-body .stay-add-btn:focus-visible,
#meetings-body .stay-add-btn:focus-visible,
#rentals-body .stay-action-btn:focus-visible,
#family-body .stay-action-btn:focus-visible,
#events-body .stay-action-btn:focus-visible,
.stay-modal-close:focus-visible,
#stay-modal-body input:focus-visible,
#stay-modal-body select:focus-visible,
#stay-modal-body textarea:focus-visible,
#stay-modal-foot button:focus-visible {
  outline: 2px solid var(--staff-primary, #2f5fa7) !important;
  outline-offset: 2px !important;
}

@media (max-width: 960px) {
  #rentals-body .stay-card-name,
  #family-body .stay-card-name,
  #events-body .stay-card-name {
    font-size: 21px !important;
  }
}

.financial-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: rgba(20, 24, 32, 0.58);
  backdrop-filter: blur(7px);
}

.financial-confirm-overlay[hidden] {
  display: none !important;
}

.financial-confirm-dialog {
  width: min(440px, 100%);
  overflow: hidden;
  border: 1px solid #cfdceb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

.financial-confirm-head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid #dce7f3;
  background: #f5f9fe;
}

.financial-confirm-kicker {
  margin-bottom: 5px;
  color: #657185;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.financial-confirm-title {
  margin: 0;
  color: #222831;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.1;
}

.financial-confirm-message {
  margin: 0;
  padding: 18px 22px;
  color: #303744;
  font-size: 14px;
  line-height: 1.65;
}

.financial-confirm-reason-wrap {
  padding: 0 22px 18px;
}

.financial-confirm-reason-wrap[hidden] {
  display: none !important;
}

.financial-confirm-reason-label {
  display: block;
  margin-bottom: 7px;
  color: #657185;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.financial-confirm-reason-input {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  border: 1.5px solid #c9d8e8;
  border-radius: 6px;
  background: #f8fbff;
  color: #232a35;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 12px;
}

.financial-confirm-reason-input:focus {
  border-color: #2f5fa7;
  background: #fff;
  outline: none;
}

.financial-confirm-reason-error {
  min-height: 18px;
  margin-top: 6px;
  color: #9a3f3f;
  font-size: 12px;
}

.financial-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid #dce7f3;
  background: #f8fbff;
}

.financial-confirm-dialog.is-danger .financial-confirm-head {
  border-bottom-color: #ead4d4;
  background: #fff6f6;
}

.financial-confirm-dialog.is-danger .financial-confirm-kicker {
  color: #9a4f4f;
}

@media (max-width: 560px) {
  .financial-confirm-overlay {
    align-items: flex-end;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .financial-confirm-dialog {
    width: 100%;
  }

  .financial-confirm-actions {
    flex-direction: column-reverse;
  }

  .financial-confirm-actions .checklist-admin-btn {
    width: 100%;
  }
}

/* Final mobile safety layer: keep every staff route inside the viewport. */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body,
  #app-main,
  .app-container,
  .app-shell,
  .app-section,
  .page,
  .page.active,
  .staff-section-shell,
  [id$="-body"],
  [class*="-shell"],
  [class*="-grid"],
  [class*="-panel"],
  [class*="-card"],
  [class*="-row"],
  [class*="-wrap"],
  [class*="-toolbar"],
  [class*="-actions"] {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  img,
  svg,
  canvas,
  video,
  iframe,
  table {
    max-width: 100% !important;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  span,
  strong,
  small,
  em,
  p,
  li,
  td,
  th,
  label,
  button,
  input,
  select,
  textarea,
  .card-couple,
  .couple-name,
  .tasks-card-title,
  .checklist-admin-card-title,
  .checklist-admin-card-sub,
  .ll-cm-card-title,
  .ll-cm-card-sub,
  [class*="-title"],
  [class*="-name"],
  [class*="-summary"],
  [class*="-preview"],
  [class*="-meta"],
  [class*="-value"],
  [class*="-detail"],
  [class*="-sub"],
  [class*="-copy"],
  [class*="-label"],
  [class*="-message"],
  [class*="-attachment"],
  [class*="-file"],
  [class*="-chip"],
  [class*="-badge"] {
    overflow-wrap: anywhere !important;
  }

  .dash-hero,
  .dash-hero-left,
  .dash-hero-right,
  .dash-main-grid,
  .dash-col,
  .dash-card,
  .dash-card-head,
  .dash-task-text,
  .dash-notif-text,
  .dash-msg-body,
  .dash-wedding-info,
  .card-meta,
  .card-meta > div,
  .ll-empty-state-card,
  .ll-empty-state-card > *,
  .cal-list-day,
  .cal-list-item,
  .sc-thread-body,
  .sc-thread-top-row {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .dash-schedule-label,
  .dash-schedule-tag,
  .dash-hero-summary,
  .dash-msg-sender,
  .dash-msg-preview,
  .dash-priority-label,
  .dash-priority-meta,
  .dash-task-title,
  .dash-task-due,
  .dash-notif-label,
  .dash-notif-time,
  .dash-wedding-couple,
  .dash-wedding-meta,
  .card-meta-value,
  .cal-list-date,
  .sc-thread-preview {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }

  .dash-schedule-item {
    flex-wrap: wrap !important;
  }

  .dash-schedule-tag {
    flex: 1 1 96px !important;
  }

  .ll-cm-chip,
  .email-history-meta-chip,
  .email-template-meta-chip,
  .email-diagnostics-meta-chip,
  .bride-msg-thread-name,
  .bride-msg-attachment,
  .sc-thread-name,
  .sc-filter-chip,
  .sc-composer-image-name,
  .sc-composer-upload-summary,
  .qa-composer-file-name,
  .qa-thread-attachment-name,
  .task-detail-mobile-meta,
  .task-attachment-name,
  .task-pdf-name,
  .notifications-filter-tabs > *,
  .notifications-item-message-line,
  .notifications-item-message {
    white-space: normal !important;
  }

  #modal-head,
  #qa-modal-head,
  #cal-detail-head,
  #task-modal-head,
  #task-detail-head,
  #tour-modal-head,
  #stay-modal-head,
  #meeting-modal-head {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #modal-head > :not(button),
  #qa-modal-head > :not(button),
  #cal-detail-head > :not(button),
  #task-modal-head > :not(button),
  #task-detail-head > :not(button),
  #tour-modal-head > :not(button),
  #stay-modal-head > :not(button),
  #meeting-modal-head > :not(button),
  #modal-title,
  #modal-title-sub,
  #qa-modal-title,
  #cal-detail-date,
  #cal-detail-couple,
  #task-modal-title,
  #task-detail-title,
  #task-detail-subtitle,
  #tour-modal-kicker,
  #tour-modal-title,
  #stay-modal-kicker,
  #stay-modal-title,
  #meeting-modal-kicker,
  #meeting-modal-title {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .modal-close-btn,
  .qa-modal-close,
  .cal-detail-close,
  .task-modal-close,
  .tour-modal-close,
  .stay-modal-close,
  .meeting-modal-close {
    flex: 0 0 auto !important;
  }

  #mobile-nav-drawer-panel {
    width: min(360px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  #mobile-nav-drawer-list,
  .mobile-nav-drawer-btn {
    min-width: 0;
  }

  .staff-mobile-bottom-nav {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
  }

  .staff-mobile-bottom-nav button {
    min-width: 0 !important;
  }

  #cal-filter-bar,
  .tasks-owner-strip,
  .task-type-filter-row,
  .task-type-filter-strip,
  .tasks-filter-tabs,
  .vendor-chip-row,
  .stay-subtabs,
  #tours-subtabs,
  #meetings-subtabs,
  #wl-subtabs,
  .site-settings-tabs,
  .settings-tabs,
  .checklist-admin-tabs,
  .ll-cm-detail-tabs,
  .ll-cm-tab-row,
  .email-center-tab-bar,
  .notifications-filter-tabs {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    max-width: 100%;
    scrollbar-width: auto !important;
  }

  #cal-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #cal-filter-bar .cal-filter-chip,
  .tasks-owner-strip > *,
  .task-type-filter-row > *,
  .task-type-filter-strip > *,
  .tasks-filter-tabs > *,
  .vendor-chip-row > *,
  .stay-subtabs > *,
  #tours-subtabs > *,
  #meetings-subtabs > *,
  #wl-subtabs > *,
  .site-settings-tabs > *,
  .settings-tabs > *,
  .checklist-admin-tabs > *,
  .ll-cm-detail-tabs > *,
  .ll-cm-tab-row > *,
  .email-center-tab-bar > *,
  .notifications-filter-tabs > * {
    min-width: 0 !important;
    white-space: normal !important;
  }

  .tasks-owner-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  .tasks-owner-field,
  .tasks-owner-select {
    width: 100% !important;
  }

  .form-grid,
  .checklist-form-grid,
  .task-modal-row-2col,
  .checklist-admin-form-grid,
  .checklist-admin-grid,
  .ll-admin-grid,
  .ll-cm-field-grid,
  .ll-cm-form-grid {
    grid-template-columns: 1fr !important;
  }

  .modal-actions,
  #qa-modal-footer,
  .task-modal-footer,
  .checklist-admin-actions,
  .ll-admin-actions,
  .ll-cm-actions,
  .payments-actions,
  .payroll-actions,
  .staffing-actions,
  .season-overview-actions,
  .email-template-toolbar,
  .email-center-list-item-actions {
    flex-wrap: wrap !important;
    align-items: stretch;
  }

  .modal-actions > button,
  #qa-modal-footer > button,
  .task-modal-footer > button,
  .checklist-admin-actions > button,
  .ll-admin-actions > button,
  .ll-cm-actions > button,
  .payments-actions > button,
  .payroll-actions > button,
  .staffing-actions > button,
  .season-overview-actions > button {
    min-height: 42px;
  }

  #modal-scroll-inner {
    padding: 12px;
    overflow-y: auto;
  }

  #modal-box,
  #qa-modal-box,
  #cal-detail-box,
  #task-modal-box,
  #tour-modal-box,
  #meeting-modal-box,
  #stay-modal-box,
  .financial-confirm-dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto;
  }

  #task-modal-overlay .task-modal-body,
  #qa-modal-body,
  #modal-body,
  #cal-detail-body {
    max-width: 100%;
    min-width: 0;
  }

  .payments-table-wrap,
  .payroll-overview-table-wrap,
  .weekly-payroll-table-wrap,
  .staffing-overview-table-wrap,
  .email-ops-table-wrap,
  .ll-cm-review-table-wrap,
  .so-season-body {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  #cal-filter-bar,
  .tasks-owner-strip {
    grid-template-columns: 1fr !important;
  }

  .modal-actions > button,
  #qa-modal-footer > button,
  .task-modal-footer > button {
    width: 100%;
  }

  .dash-card,
  .wedding-card,
  .tasks-card,
  .checklist-admin-card,
  .ll-admin-card,
  .ll-cm-info-card,
  .ll-cm-financial-card,
  .notifications-settings-card,
  .financial-confirm-dialog {
    border-radius: 10px !important;
  }
}