@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
:root{--primary:#6366f1;--bg:#edf3f9;--card:#fff;--text:#1a202e;--muted:#607086;--border:#e3eaf2;--shadow:0 2px 12px rgba(26,32,46,.07)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:var(--text);background:var(--bg)}
body{font-size:14px}.container-wrap{display:flex;min-height:100vh}.sidenav{width:272px;flex:0 0 272px;background:#fff;border-right:1px solid var(--border);position:fixed;left:0;top:0;bottom:0;z-index:50;overflow:auto}.content-wrap{margin-left:272px;min-height:100vh;flex:1;min-width:0}
.sidebar-header{height:64px;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:12px}.branding,.toolbar-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-size:20px;font-weight:600}.branding img,.toolbar-brand img{width:32px;height:32px;object-fit:contain}.sidemenu-collapse,.toolbar-menu{border:0;background:transparent;font-size:20px;color:#526074;cursor:pointer;margin-left:auto}
.sidebar-main{padding-bottom:24px}.user-panel{text-align:center;padding:22px 16px 18px;border-bottom:1px solid var(--border)}.user-avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;margin-bottom:8px}.user-name{font-size:15px;font-weight:600}.user-email{font-size:12px;color:var(--muted);margin-top:3px}.user-actions{display:flex;justify-content:center;gap:18px;margin-top:16px}.user-actions a{color:#526074;text-decoration:none;font-size:12px}
.sidemenu-wrapper{padding:10px 8px}.sidemenu{list-style:none;padding:0;margin:0}.menu-divider{padding:18px 12px 8px;color:#8a96a7;font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.08em}.menu-item{margin:2px 0}.menu-heading{width:100%;min-height:42px;display:flex;align-items:center;gap:9px;border:0;background:transparent;border-radius:8px;color:#536176;text-decoration:none;padding:8px 11px;text-align:left;cursor:pointer}.menu-heading:hover{background:#f5f7ff;color:var(--primary)}.menu-item.active>.menu-heading{background:#eef0ff;color:var(--primary)}.menu-icon-container{width:28px;display:flex;justify-content:center}.menu-icon-wrapper{display:flex;align-items:center;justify-content:center}.material-icons{font-family:'Material Icons' !important;font-size:19px;line-height:1}.menu-content{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.menu-name{white-space:nowrap}.menu-badge{font-size:10px;border-radius:12px;padding:2px 7px;background:#ef4444;color:#fff}.menu-label{font-size:10px;padding:2px 6px;border-radius:4px;background:#eef0ff;color:var(--primary)}.menu-arrow{font-size:22px;color:#9aa5b4}.submenu{display:none;padding-left:18px}.menu-item.has-children.open>.submenu{display:block}.menu-item.has-children.open>.menu-heading .menu-arrow{transform:rotate(90deg)}
.toolbar{height:64px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 18px;gap:10px;position:sticky;top:0;z-index:30}.toolbar-menu{margin:0}.toolbar-brand{font-size:20px}.toolbar-brand img{width:30px;height:30px}.flex-fill{flex:1}.toolbar-icon{border:0;background:transparent;color:#596579;font-size:18px;cursor:pointer;padding:7px}.toolbar-user{display:flex;align-items:center;gap:8px;text-decoration:none;color:#3d4757;font-weight:500}.toolbar-user img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.content{padding:24px 28px;min-height:calc(100vh - 64px)}.blade-page{max-width:1600px;margin:0 auto}.page-header{margin:0 0 18px}.page-header h1,.page-header h2{margin:0;font-size:24px;font-weight:500}.page-header p{margin:6px 0;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;margin-left:-12px;margin-right:-12px}.row>[class*="col-"]{padding:0 12px;margin-bottom:24px}.col-sm-12{width:100%}.col-sm-8{width:66.6667%}.col-sm-6{width:50%}.col-sm-4{width:33.3333%}.col-sm-3{width:25%}.col-lg-8{width:66.6667%}.col-lg-4{width:33.3333%}
.lux-card{background:var(--card);border:1px solid #e5ebf2;border-radius:10px;box-shadow:var(--shadow);overflow:hidden}.lux-card-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}.lux-card-body{padding:18px}.lux-card-title{margin:0;font-size:17px;font-weight:600}.lux-card-subtitle{margin:0;color:var(--muted);font-size:14px}
.lux-form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.lux-form-field label{font-size:13px;color:#4e5b6d}.lux-form-field input,.lux-form-field select,.lux-form-field textarea,.lux-form-field .mat-input-element{width:100%;border:1px solid #ccd5e1;border-radius:5px;padding:9px 11px;min-height:40px;background:#fff;color:#253044;outline:0}.lux-form-field input:focus,.lux-form-field select:focus,.lux-form-field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(99,102,241,.1)}.lux-form-error{color:#dc2626;font-size:11px}.lux-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #d4dce7;background:#fff;color:#465267;border-radius:5px;padding:8px 13px;text-decoration:none;cursor:pointer}.lux-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.lux-table{width:100%;border-collapse:collapse}.lux-table th,.lux-table td{padding:11px 13px;border-bottom:1px solid var(--border);text-align:left}.lux-table th{font-size:12px;color:#67758a;background:#fafbfc}.lux-scroll{overflow-y:auto;overflow-x:hidden}.lux-progress{height:7px;border-radius:99px;background:#e6ebf2;overflow:hidden}.lux-progress:before{content:"";display:block;width:65%;height:100%;background:var(--primary)}.lux-spinner{width:22px;height:22px;border:3px solid #e6ebf2;border-top-color:var(--primary);border-radius:50%;display:inline-block}
.lux-chart-placeholder{height:180px;border:1px dashed #d7dee8;border-radius:8px;background:linear-gradient(180deg,#fff,#fafbff);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#98a3b2;gap:15px}.chart-bars{display:flex;align-items:flex-end;gap:7px;height:70px}.chart-bars i{width:14px;background:#6366f1;border-radius:5px 5px 2px 2px}.chart-bars i:nth-child(1){height:28%}.chart-bars i:nth-child(2){height:60%}.chart-bars i:nth-child(3){height:42%}.chart-bars i:nth-child(4){height:80%}.chart-bars i:nth-child(5){height:52%}
.footer{padding:18px 28px;color:#8a96a7;font-size:12px}
.auth-page{background:#edf3f9}.auth-container{min-height:100vh}.login-container{min-height:100vh;display:flex;background:#fff}.login-image-container{width:55%;background:#eef0ff;overflow:hidden}.login-image{width:100%;height:100%;object-fit:cover}.login-form-section{width:45%;padding:48px 8%;display:flex;flex-direction:column;justify-content:center}.login-logo img{width:54px}.welcome-msg{font-size:14px;color:#536176;font-weight:400;margin:20px 0 8px}.login-type-toggle{display:flex;gap:8px;margin-bottom:22px}.login-title{font-size:28px;margin:0 0 24px}.login-form{max-width:460px}.form-options{display:flex;justify-content:space-between;align-items:center;margin:8px 0 20px}.forget-pwd{color:var(--primary);text-decoration:none}.login-btn{width:100%;padding:11px;background:var(--primary);color:#fff;border:0;border-radius:5px}.social-login{text-align:center;margin-top:25px}.social-icons{display:flex;justify-content:center;gap:12px}.social-icon{border:1px solid var(--border);background:#fff;border-radius:50%;width:42px;height:42px}.social-icon img{max-width:22px;max-height:22px}.signup-link{text-align:center;margin-top:20px}.signup-link a{color:var(--primary)}
@media(max-width:1100px){.col-sm-3{width:50%}.col-sm-4{width:50%}.col-sm-8{width:100%}.login-image-container{width:45%}.login-form-section{width:55%;padding:40px}}
@media(max-width:800px){.sidenav{transform:translateX(-100%);transition:.2s}.sidenav.open{transform:translateX(0)}.content-wrap{margin-left:0}.col-sm-3,.col-sm-4,.col-sm-6,.col-sm-8{width:100%}.login-container{display:block}.login-image-container,.login-form-section{width:100%}.login-image-container{height:220px}.content{padding:18px}.hide-small{display:none}}

.login-container{display:flex;min-height:calc(100vh - 40px);background:#f0f2f5;align-items:stretch;box-shadow:0 0 20px rgba(0,0,0,.1);margin:20px;border-radius:30px;overflow:hidden}.login-image-container{flex:1;display:flex;justify-content:center;align-items:center;background:#fff;overflow:hidden}.login-image{max-width:100%;height:100%;width:100%;object-fit:cover}.login-form-section{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;background:#fff}.login-logo img{max-width:150px;height:80px;object-fit:contain}.welcome-msg{font-size:28px;color:#333;margin:0 0 10px;text-align:center}.login-type-toggle{display:flex;margin-bottom:30px;border-radius:25px;overflow:hidden;background:#e0e0e0}.login-type-toggle button{padding:10px 20px;border:0;background:transparent;cursor:pointer;font-size:16px;color:#555}.login-type-toggle button.active{background:#007bff;color:#fff}.login-title{font-size:24px;color:#333;margin:0 0 20px}.login-form{width:100%;max-width:400px}.login-form .lux-form-field{width:100%;margin-bottom:15px}.form-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.forget-pwd{color:#007bff;text-decoration:none}.login-btn{width:100%;padding:12px;font-size:18px;border-radius:5px;background:#007bff;color:#fff;height:45px;border:0}.social-login{margin-top:30px;text-align:center}.social-icons{display:flex;justify-content:center;gap:15px}.social-icon{background:#f0f2f5;border:1px solid #ddd;border-radius:50%;width:50px;height:50px;display:flex;justify-content:center;align-items:center}.social-icon img{width:24px;height:24px}.signup-link{margin-top:30px;color:#777}.signup-link a{color:#007bff}@media(max-width:768px){.login-container{flex-direction:column;margin:0;border-radius:0}.login-image-container{display:none}.login-form-section{padding:20px}}

/* ==========================================================
   Luxuria Angular -> Blade compatibility layer
   Keeps the existing Blade markup visually close to the
   original Angular Material application while it is static.
   ========================================================== */

/* Material Icons: icon names must render as glyphs, not text. */
.material-icons,
.material-icons-outlined,
mat-icon,
.mat-icon {
  font-family: 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
}
.material-icons-outlined { font-family: 'Material Icons Outlined' !important; }

/* Angular Material button equivalents. */
button[mat-icon-button],
button.tbl-header-btn,
button.tbl-action-btn,
button.export-button,
button[class*="mat-mdc-icon-button"] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 2px;
  border: 1px solid #d4dce7;
  border-radius: 6px;
  background: #fff;
  color: #465267;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: none;
  font: inherit;
}
button[mat-icon-button]:hover,
button.tbl-header-btn:hover,
button.tbl-action-btn:hover {
  background: #f4f6fa;
  border-color: #bcc7d5;
}
button[mat-icon-button] mat-icon,
button.tbl-header-btn mat-icon,
button.tbl-action-btn mat-icon { margin: 0; }

/* Header toolbar actions. */
.right-side-btn {
  float: right;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}
.tbl-header-btn.text-red { color: #ef4444; }
.tbl-header-btn.text-green { color: #16a34a; }
.tbl-header-btn.text-blue { color: #2563eb; }
.tbl-header-btn.text-dark-grey { color: #4b5563; }

/* Angular card components used throughout the converted pages. */
mat-card,
mat-card-header,
mat-card-content,
mat-card-actions,
mat-card-title,
mat-card-subtitle {
  display: block;
}
mat-card-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
mat-card-content { padding: 18px; }
mat-card-title { margin: 0; font-size: 17px; font-weight: 600; }
mat-card-subtitle { color: var(--muted); margin-top: 4px; }

/* Angular form fields converted to normal HTML. */
mat-form-field {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  width: 100%;
  margin: 0 0 10px;
  vertical-align: middle;
}
mat-form-field .mat-input-element,
mat-form-field input,
mat-form-field textarea,
mat-form-field select {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #ccd5e1;
  border-radius: 5px;
  background: #fff;
  color: #253044;
  outline: none;
}
mat-form-field mat-label,
mat-form-field .mat-label {
  display: block;
  margin-bottom: 5px;
  color: #596579;
  font-size: 12px;
}
mat-form-field mat-icon[matsuffix] {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

/* Menus are popup components in Angular. They must not occupy page space
   until JS explicitly opens them. */
mat-menu { display: none !important; }
mat-menu button[mat-menu-item],
button[mat-menu-item] {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  background: #fff;
  color: #465267;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Static table equivalent for Angular mat-table markup. */
.responsive_table,
.table-scroll,
.overflow-auto { width: 100%; }
.responsive_table,
.table-scroll { overflow-x: auto; }
.advance-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  table-layout: auto;
}
.advance-table mat-header-row,
.advance-table mat-row,
.advance-table .mat-header-row,
.advance-table .mat-row {
  display: table-row;
  height: auto;
}
.advance-table mat-header-cell,
.advance-table mat-cell,
.advance-table .mat-header-cell,
.advance-table .mat-cell {
  display: table-cell;
  padding: 11px 13px;
  min-height: 48px;
  vertical-align: middle;
  border-bottom: 1px solid #edf0f4;
  text-align: left;
}
.advance-table mat-header-cell,
.advance-table .mat-header-cell {
  background: #fafbfc;
  color: #67758a;
  font-size: 12px;
  font-weight: 600;
}
.advance-table mat-row:hover,
.advance-table .mat-row:hover { background: #f8fafc; }
.advance-table mat-header-row:empty,
.advance-table mat-row:empty { display: none; }

/* Checkboxes/radios from Angular Material. */
mat-checkbox,
mat-radio-button,
mat-slide-toggle {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
mat-checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #aeb8c6;
  border-radius: 4px;
  background: #fff;
}
mat-checkbox::after { content: ''; }

/* Progress components. */
mat-progress-bar {
  display: block;
  width: 100%;
  height: 7px;
  margin: 5px 0;
  border-radius: 99px;
  background: #e6ebf2;
  overflow: hidden;
}
mat-progress-bar::after {
  content: '';
  display: block;
  width: 65%;
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
}
mat-progress-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid #e6ebf2;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: luxuria-spin .8s linear infinite;
}
@keyframes luxuria-spin { to { transform: rotate(360deg); } }

mat-paginator {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  color: #596579;
}

/* Common table/action controls that were Angular components in the source. */
.tblActnDropdownBtn {
  min-height: 40px !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 12px !important;
}
.tblActnDropdownBtn:hover { background: #f4f6fa !important; }
.tbl-icon { width: 20px; height: 20px; min-width: 20px; }
.tbl-action-btn { width: 40px !important; height: 40px !important; }

/* Breadcrumbs and page headers used by the converted Angular pages. */
.page-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.page-title { margin: 0; font-size: 24px; font-weight: 500; }
.breadcrumb { display: flex; gap: 7px; list-style: none; padding: 0; margin: 0; }
.breadcrumb-item { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.breadcrumb-item .separator { font-size: 16px; }

/* Generic Angular action buttons that lost their Material CSS. */
button[mat-button],
button[mat-raised-button],
button[mat-flat-button],
button[mat-stroked-button],
a.mat-button,
a.mat-raised-button {
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid #d4dce7;
  border-radius: 5px;
  background: #fff;
  color: #465267;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
button[mat-raised-button]:hover,
button[mat-button]:hover,
button[mat-stroked-button]:hover { background: #f4f6fa; }

/* Keep the original grid usable on narrow screens. */
@media (max-width: 900px) {
  .right-side-btn { float: none; justify-content: flex-start; padding: 0; }
  .page-header-inner { align-items: flex-start; flex-direction: column; }
  .advance-table { min-width: 720px; }
}

/* =========================================================
   LUXURIA STATIC BLADE / ANGULAR-MATERIAL COMPATIBILITY
   ========================================================= */
html, body { width:100%; min-width:320px; }
body { background:#edf3f9; color:#182230; font-family:Inter,Roboto,Arial,sans-serif; }

/* Angular Material host elements are now normal HTML elements. */
.mat-card, .mat-mdc-card, .lux-card {
  display:block;
  background:#fff;
  border:1px solid #e4eaf1;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(31,42,55,.07);
  margin-bottom:16px;
  overflow:hidden;
}
.mat-card-header, .mat-mdc-card-header, .lux-card-header {
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 15px;
  border-bottom:1px solid #edf0f4;
  background:#fff;
}
.mat-card-content, .mat-mdc-card-content, .lux-card-body { padding:15px !important; }
.mat-card-title, .mat-mdc-card-title, .lux-card-title { margin:0; font-size:17px; line-height:28px; font-weight:500; }
.mat-card-subtitle, .mat-mdc-card-subtitle, .lux-card-subtitle { color:#67758a; font-size:13px; }
.mat-card-actions, .mat-mdc-card-actions { padding:10px 15px; display:flex; gap:8px; align-items:center; }
.mat-card-footer { padding:12px 15px; border-top:1px solid #edf0f4; }

/* Buttons - explicit class selectors because Angular attributes are removed. */
button.mat-button, a.mat-button,
button.mat-raised-button, a.mat-raised-button,
button.mat-flat-button, a.mat-flat-button,
button.mat-stroked-button, a.mat-stroked-button,
.mat-button, .mat-raised-button, .mat-flat-button, .mat-stroked-button {
  appearance:none;
  min-height:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 15px;
  border:1px solid #d4dce7;
  border-radius:5px;
  background:#fff;
  color:#37465b;
  font:500 14px/1 Inter,Roboto,Arial,sans-serif;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:none;
}
.mat-button:hover, .mat-raised-button:hover, .mat-stroked-button:hover { background:#f5f7fb; border-color:#c5cfdd; }
.mat-flat-button, .mat-raised-button { background:#6366f1; color:#fff; border-color:#6366f1; }
.mat-flat-button:hover, .mat-raised-button:hover { background:#5558dc; color:#fff; }
.mat-fab, .mat-mini-fab { border:0; border-radius:50%; background:#6366f1; color:#fff; width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.mat-mini-fab { width:40px; height:40px; }
.mat-icon-button {
  appearance:none;
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #d5dce6 !important;
  border-radius:5px !important;
  background:#fff !important;
  color:#4b5a70;
  cursor:pointer;
  box-shadow:none !important;
}
.mat-icon-button:hover { background:#f1f4f8 !important; }
.tbl-header-btn.mat-icon-button { width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important; margin:2px; }
.tbl-action-btn.mat-icon-button { width:40px !important; height:40px !important; border:0 !important; background:transparent !important; }
.mat-menu-item {
  width:100%; min-height:40px; height:40px; border:0; border-radius:0; background:#fff; color:#37465b;
  display:flex; align-items:center; gap:9px; padding:0 14px; font:400 14px/1 Inter,Roboto,Arial,sans-serif; text-align:left; cursor:pointer;
}
.mat-menu-item:hover { background:#f4f6fa; }
.mat-menu { min-width:170px; background:#fff; border:1px solid #e0e6ed; border-radius:6px; box-shadow:0 5px 20px rgba(30,40,55,.14); padding:5px 0; z-index:100; }
.mat-menu { display:none; }
.mat-menu.show, .mat-menu.open { display:block; }
.show-hide-column { display:none; background:#fff; border:1px solid #e0e6ed; border-radius:6px; box-shadow:0 5px 20px rgba(30,40,55,.14); padding:10px; }
.show-hide-column.show, .show-hide-column.open { display:block; }

/* Icons */
.material-icons, .material-icons-outlined, .mat-icon {
  font-family:'Material Icons' !important;
  font-weight:normal !important;
  font-style:normal !important;
  font-size:20px !important;
  line-height:20px !important;
  letter-spacing:normal;
  text-transform:none;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  vertical-align:middle;
}
.material-icons-outlined { font-family:'Material Icons Outlined' !important; }
.feather-icon { display:inline-flex; align-items:center; justify-content:center; }

/* Form controls */
.mat-form-field { display:flex; flex-direction:column; gap:5px; position:relative; margin-bottom:14px; }
.mat-label, .mat-form-field .search-label { color:#4e5b6d; font-size:13px; line-height:20px; }
.mat-form-field input, .mat-form-field select, .mat-form-field textarea,
.mat-input, .mat-input-element {
  width:100%; min-height:40px; border:1px solid #ccd5e1; border-radius:5px; background:#fff; color:#253044; padding:8px 11px; outline:0; font:400 14px/1.4 Inter,Roboto,Arial,sans-serif;
}
.mat-form-field input:focus, .mat-form-field select:focus, .mat-form-field textarea:focus { border-color:#6366f1; box-shadow:0 0 0 2px rgba(99,102,241,.1); }
.mat-error { color:#dc2626; font-size:12px; margin-top:2px; }
.mat-hint { color:#8b96a7; font-size:11px; }
.mat-select { appearance:auto; }
.mat-checkbox { display:inline-flex; align-items:center; gap:8px; min-height:32px; cursor:pointer; }
.mat-checkbox input { width:18px; height:18px; accent-color:#6366f1; cursor:pointer; }
.amenity-checkbox-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:4px 12px; padding:14px 16px; border:1px solid #e3e7ee; border-radius:8px; background:#f9fafc; }
.amenity-checkbox { font-size:13.5px; color:#37424a; }
.reg-form-v2 .amenity-checkbox-grid input[type="checkbox"] { width:18px; height:18px; padding:0; border:1.5px solid #333f4d; border-radius:4px; appearance:auto; accent-color:#6366f1; }
.mat-radio-group { display:flex; flex-wrap:wrap; gap:14px; }
.mat-radio-button { display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.mat-radio-button input { accent-color:#6366f1; }
.mat-slide-toggle { display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.mat-slide-toggle input { width:36px; height:20px; accent-color:#6366f1; }
.mat-button-toggle-group { display:inline-flex; border:1px solid #d3dae5; border-radius:5px; overflow:hidden; }
.mat-button-toggle { border:0; border-right:1px solid #d3dae5; border-radius:0; min-height:38px; padding:0 14px; background:#fff; cursor:pointer; }
.mat-button-toggle:last-child { border-right:0; }
.mat-chip, .mat-chip-option, .mat-chip-row { display:inline-flex; align-items:center; gap:5px; border-radius:18px; background:#eef1f7; color:#4e5c70; padding:5px 11px; font-size:12px; margin:2px; }

/* Progress / spinner */
.mat-progress-bar { display:block; width:100%; height:8px; background:#e8edf3; border-radius:20px; overflow:hidden; position:relative; }
.mat-progress-bar::before { content:''; position:absolute; left:0; top:0; bottom:0; width:65%; background:#6366f1; border-radius:20px; }
.progress-bar-extra-small { height:5px; } .progress-bar-small { height:10px; } .progress-bar-medium { height:15px; } .progress-bar-big { height:20px; }
.progress-orange .mat-progress-bar::before, .progress-orange { --progress:#ffa500; }
.progress-orange::before, .progress-orange .mat-progress-bar::before { background:#ffa500; }
.progress-green::before, .progress-green .mat-progress-bar::before { background:#00b85a; }
.progress-red::before, .progress-red .mat-progress-bar::before { background:#ff4d4d; }
.mat-progress-spinner, .lux-spinner { width:28px !important; height:28px !important; display:inline-block; border:3px solid #e5eaf1; border-top-color:#6366f1; border-radius:50%; animation:luxuria-spin .8s linear infinite; }
@keyframes luxuria-spin { to { transform:rotate(360deg); } }
.login-btn .lux-spinner { display:none; width:18px !important; height:18px !important; border-width:2px; margin-left:8px; vertical-align:middle; }
.login-btn.is-loading { pointer-events:none; opacity:.85; }
.login-btn.is-loading .lux-spinner { display:inline-block; }

/* Table / data-grid */
.table-header-toolbar { width:100%; }
.right-side-btn { float:right; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:3px; padding:0 10px; }
.search-box { min-width:0; }
.search-box .material-icons { position:absolute; right:10px; bottom:10px; }
.advance-table, .mat-mdc-table, .lux-table { width:100%; border-collapse:collapse; background:#fff; box-shadow:none; }
.advance-table th, .advance-table td, .mat-mdc-table th, .mat-mdc-table td, .lux-table th, .lux-table td { padding:10px 12px; border-bottom:1px solid #edf0f4; vertical-align:middle; text-align:left; }
.advance-table th, .mat-mdc-table th, .lux-table th { color:#626d7c; background:#f7f8fa; font-size:12px; font-weight:600; white-space:nowrap; }
.advance-table tr:hover td, .mat-mdc-table tr:hover td { background:#fafbfc; }
.responsive_table, .table-scroll, .overflow-auto { width:100%; overflow:auto; }
.table-img { width:34px; height:34px; border-radius:50%; object-fit:cover; background:#f1f3f6; margin-right:10px; }
.truncate-text { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.mobile-label { display:none; }
.tbl-icon { min-width:20px; }
.tbl-action-btn { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; }
.tblActnDropdownBtn { width:100% !important; min-height:40px !important; border:0 !important; border-radius:0 !important; background:#fff !important; display:flex !important; align-items:center !important; gap:8px; padding:8px 12px !important; text-align:left; cursor:pointer; }
.tblActnDropdownBtn:hover { background:#f4f6fa !important; }
.tbl-spinner { display:flex; align-items:center; justify-content:center; padding:18px; }
.no-results { padding:16px; color:#6f7b8b; text-align:center; }

/* Toolbar / page structure */
.header-style { display:flex; justify-content:space-between; align-items:center; }
.page-header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 18px; }
.page-title { margin:0; font-size:24px; line-height:1.3; font-weight:500; }
.breadcrumb { display:flex; list-style:none; padding:0; margin:0; gap:7px; }
.breadcrumb-item { display:flex; align-items:center; gap:7px; color:#607086; }

/* Generic utility classes used by the original SCSS. */
.text-muted { color:#96a2b4 !important; }
.text-red { color:#f44336 !important; } .text-green { color:#198754 !important; } .text-blue { color:#3b82f6 !important; } .text-indigo { color:#6366f1 !important; } .text-orange { color:#fd7e14 !important; } .text-dark-grey { color:#67707c !important; }
.col-red { color:#ff4d4d !important; } .col-green { color:#45b449 !important; } .col-blue { color:#3b82f6 !important; } .col-indigo { color:#6366f1 !important; } .col-brown { color:#964b00 !important; } .col-orange { color:#fd7e14 !important; }
.badge { display:inline-block; min-width:18px; padding:3px 9px; font-size:12px; line-height:18px; background:#757575; border-radius:4px; }
.badge-solid-red { color:#f11541; background:rgba(241,21,65,.15); font-weight:500; } .badge-solid-purple { color:#6f42c1; background:rgba(111,66,193,.15); font-weight:500; } .badge-solid-green { color:#198754; background:rgba(25,135,84,.15); font-weight:500; } .badge-solid-blue { color:#0d6efd; background:rgba(13,110,253,.15); font-weight:500; } .badge-solid-orange { color:#fd7e14; background:rgba(253,126,20,.15); font-weight:500; } .badge-solid-brown { color:#964b00; background:rgba(150,75,0,.15); font-weight:500; } .badge-solid-indigo { color:#6366f1; background:rgba(99,102,241,.15); font-weight:500; }

/* Common spacing/typography utilities used throughout the converted pages. */
.d-flex{display:flex !important}.d-block{display:block !important}.d-none{display:none !important}.align-items-center{align-items:center !important}.justify-content-between{justify-content:space-between !important}.justify-content-center{justify-content:center !important}.flex-wrap{flex-wrap:wrap !important}.w-full{width:100% !important}.text-center{text-align:center !important}.text-right{text-align:right !important}.cursor-pointer{cursor:pointer}.m-0{margin:0 !important}.m-2{margin:2px !important}.m-t-4{margin-top:4px !important}.m-t-8{margin-top:8px !important}.m-t-16{margin-top:16px !important}.m-t-48{margin-top:48px !important}.m-b-8{margin-bottom:8px !important}.m-b-16{margin-bottom:16px !important}.p-8{padding:8px !important}.p-16{padding:16px !important}.f-s-12{font-size:12px}.f-s-14{font-size:14px}.f-s-16{font-size:16px}.f-s-18{font-size:18px}.f-w-500{font-weight:500}.f-w-600{font-weight:600}

/* Responsive table labels and grid */
@media(max-width:960px){
  .right-side-btn{float:none;justify-content:flex-start;padding:0;margin-top:10px;}
  .col-sm-3,.col-sm-4{width:50%;}
  .col-sm-8{width:100%;}
}
@media(max-width:600px){
  .col-sm-3,.col-sm-4,.col-sm-6,.col-sm-8,.col-sm-12{width:100%;}
  .mobile-label{width:100px;display:inline-block;font-weight:600;color:#667386;}
  .advance-table{min-width:720px;}
  .content{padding:18px 14px;}
  .right-side-btn{flex-wrap:wrap;}
  .page-header-inner{align-items:flex-start;flex-direction:column;}
}


/* ================================================================
   Luxuria v4 - static listing/table layout fix
   The Angular-to-Blade conversion previously left <th>/<td> and
   Angular wrapper divs directly inside <table>.  The Blade tables
   have now been normalized; these rules keep every listing compact,
   aligned and horizontally scrollable like the Angular application.
   ================================================================ */

/* Valid table structure and predictable column sizing. */
table.advance-table {
  display: table !important;
  width: 100% !important;
  min-width: 1050px;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #fff;
}
table.advance-table thead { display: table-header-group !important; }
table.advance-table tbody { display: table-row-group !important; }
table.advance-table tr { display: table-row !important; }
table.advance-table th,
table.advance-table td {
  display: table-cell !important;
  box-sizing: border-box;
  padding: 11px 12px !important;
  height: 48px;
  vertical-align: middle !important;
  border-bottom: 1px solid #edf0f4 !important;
  background: #fff;
  white-space: nowrap;
}
table.advance-table thead th {
  height: 50px;
  background: #f7f8fa !important;
  color: #657286;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}
table.advance-table tbody tr:hover td { background:#fafbfc !important; }
table.advance-table .static-preview-row td { color:#334155; }

/* Keep the checkbox column narrow. */
table.advance-table th:first-child,
table.advance-table td:first-child { width:48px; min-width:48px; max-width:48px; padding-left:14px !important; padding-right:8px !important; }

/* Read-only listing tables (e.g. guest profile stay history) that skip
   the row-select checkbox column - undo the squeeze above so their
   first real column isn't crushed to 48px. */
table.advance-table.no-select-col th:first-child,
table.advance-table.no-select-col td:first-child { width:auto; min-width:0; max-width:none; padding-left:16px !important; padding-right:16px !important; }

/* Common icon/data columns should never expand excessively. */
table.advance-table .tbl-icon { width:20px; min-width:20px; max-width:20px; margin-right:6px; }
table.advance-table .table-img { width:34px; height:34px; min-width:34px; display:inline-block; vertical-align:middle; }
table.advance-table .truncate-text { display:inline-block; max-width:220px; vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.advance-table .mobile-label { display:none !important; }
table.advance-table .order-list { display:inline-flex; align-items:center; padding:0; margin:0; list-style:none; }

/* Empty image placeholders from the static conversion must not show their alt text. */
table.advance-table img.table-img[src=""],
table.advance-table img.table-img:not([src]) { display:none !important; }

/* Progress columns. */
table.advance-table .progress-container { display:flex; align-items:center; gap:8px; min-width:120px; }
table.advance-table .progress-container .mat-progress-bar { flex:1; min-width:70px; }
table.advance-table .progress-text { min-width:32px; font-size:12px; text-align:right; }

/* Action column and buttons. */
table.advance-table th:last-child { min-width:145px; }
table.advance-table td:last-child { min-width:145px; white-space:nowrap; }
table.advance-table .tbl-action-btn { width:38px !important; height:38px !important; min-width:38px !important; margin-right:4px; }

/* Standalone Angular context-menu content was visible in the previous
   conversion. It is an overlay in Angular and must not occupy the page. */
.lux-context-menu-static { display:none !important; }

/* The static column menu is opened by JS later; don't let its contents
   become part of the listing flow. */
.show-hide-column { position:absolute; right:0; top:42px; z-index:1000; }

/* Search/header area matches the original compact table toolbar. */
.table-header-toolbar { min-height:58px; }
.table-header-toolbar .row { align-items:flex-start; }
.table-header-toolbar .col-sm-8 { padding-right:18px; }
.table-header-toolbar .col-sm-4 { position:relative; min-height:42px; }
.table-header-toolbar .search-box { position:relative; margin:0 !important; }
.table-header-toolbar .search-box input { height:40px; padding-right:38px; }
.right-side-btn { margin-top:0; }

/* Spinner should sit below the table rather than changing its height. */
.tbl-spinner { min-height:44px; padding:12px; }

@media (max-width: 900px) {
  table.advance-table { min-width:900px; }
  .content { padding:18px; }
}

/* =========================================================
   Luxuria v5 - real static listing layout
   ========================================================= */
.lux-listing-table {
  width:100% !important;
  min-width:900px !important;
  display:table !important;
  table-layout:auto !important;
  border-collapse:collapse !important;
  background:#fff !important;
}
.lux-listing-table thead,
.lux-listing-table tbody { display:table-header-group !important; }
.lux-listing-table tbody { display:table-row-group !important; }
.lux-listing-table tr { display:table-row !important; }
.lux-listing-table th,
.lux-listing-table td {
  display:table-cell !important;
  vertical-align:middle !important;
  box-sizing:border-box !important;
}
.lux-listing-table thead th {
  height:52px !important;
  padding:12px 14px !important;
  background:#f8fafc !important;
  color:#59677a !important;
  font-size:13px !important;
  font-weight:600 !important;
  text-align:left !important;
  border-bottom:1px solid #e7edf4 !important;
  white-space:nowrap !important;
}
.lux-listing-table tbody td {
  padding:16px 14px !important;
  border-bottom:1px solid #edf1f5 !important;
}
.lux-listing-table .col-select {
  width:52px !important;
  min-width:52px !important;
  max-width:52px !important;
  text-align:center !important;
}
.lux-listing-table .col-actions {
  width:130px !important;
  min-width:130px !important;
  white-space:nowrap !important;
}
.lux-listing-table .no-data-row td {
  height:170px !important;
  text-align:center !important;
  color:#7c8797 !important;
  background:#fff !important;
}
.lux-listing-table .no-results {
  padding:25px !important;
  text-align:center !important;
  color:#7c8797 !important;
}
.lux-card-body > .overflow-auto {
  overflow-x:auto !important;
  overflow-y:visible !important;
}
.lux-card-body .responsive_table,
.lux-card-body .table-scroll {
  width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}
/* Never allow converted Angular context menus to become page content. */
.lux-context-menu-static,
div.lux-context-menu-static,
.mat-menu.lux-context-menu-static {
  display:none !important;
  visibility:hidden !important;
  position:absolute !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
}
/* No fake menu entries on an empty static listing. */
.lux-listing-table + .lux-context-menu-static,
.lux-listing-table ~ .lux-context-menu-static { display:none !important; }
/* Empty/placeholder image must not print its alt text. */
.lux-listing-table img.table-img:not([src]),
.lux-listing-table img.table-img[src=""] { display:none !important; }
/* Toolbar alignment */
.table-header-toolbar { width:100% !important; }
.table-header-toolbar .row { display:flex !important; width:100% !important; align-items:center !important; }
.table-header-toolbar .col-sm-8 { display:flex !important; align-items:center !important; gap:16px; flex:1 1 auto !important; min-width:0 !important; }
.table-header-toolbar .col-sm-4 { flex:0 0 auto !important; width:auto !important; min-width:250px !important; }
.table-header-toolbar .right-side-btn { float:none !important; justify-content:flex-end !important; align-items:center !important; }
.table-header-toolbar .table-header { font-size:15px; font-weight:600; color:#1a202e; white-space:nowrap; }
.table-header-toolbar .search-box { width:300px; max-width:100%; flex:0 0 auto; }
.table-header-toolbar .search-label { position:absolute; left:0; top:0; width:0; height:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Remove unused static column popup from normal flow; JS can open it later. */
.table-header-toolbar .show-hide-column { display:none !important; }

/* =========================================================
   Luxuria sidebar toggle + active menu state
   ========================================================= */
body.sidebar-collapsed .sidenav {
    width: 0 !important;
    flex-basis: 0 !important;
    transform: translateX(-100%) !important;
    overflow: hidden !important;
    border-right: 0 !important;
}
body.sidebar-collapsed .content-wrap {
    margin-left: 0 !important;
}

.sidenav {
    transition: width .22s ease, transform .22s ease;
}
.content-wrap {
    transition: margin-left .22s ease;
}

/* The left/top hamburger is always clickable on desktop. */
.sidemenu-collapse,
.toolbar-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 6px;
}
.sidemenu-collapse:hover,
.toolbar-menu:hover {
    background: #f3f6fb;
}

/* The sidebar's own collapse/expand button: a circular blue-outlined
   chevron next to the logo (distinct from the mobile toolbar hamburger,
   which keeps the square hover style above). */
.sidemenu-collapse {
    border-radius: 50% !important;
    border: 1.5px solid var(--primary) !important;
    color: var(--primary) !important;
    margin-left: auto;
}
.sidemenu-collapse .material-icons { font-size: 18px; transition: transform .2s ease; }
.sidemenu-collapse:hover { background: #eef0ff !important; }
body.sidebar-collapsed .sidemenu-collapse .material-icons { transform: rotate(180deg); }

/* Active child + its expanded parent. */
.sidemenu .menu-item.active > .menu-heading {
    background: #eef0ff !important;
    color: var(--primary) !important;
}
.sidemenu .menu-item.active > .menu-heading .menu-name {
    color: var(--primary) !important;
    font-weight: 600;
}
.sidemenu .menu-item.has-children.open > .submenu {
    display: block !important;
}
.sidemenu .menu-item.has-children.open > .menu-heading .menu-arrow {
    transform: rotate(90deg);
}

/* Keep nested menu children inside the sidebar. */
.sidemenu-wrapper,
.sidemenu-wrapper .sidemenu {
    overflow: visible;
}
.sidemenu .submenu .menu-heading {
    min-height: 38px;
    padding-top: 6px;
    padding-bottom: 6px;
}

@media (max-width: 800px) {
    body.sidebar-collapsed .sidenav {
        width: 272px !important;
        transform: translateX(-100%) !important;
    }
    body:not(.sidebar-collapsed) .sidenav.open {
        width: 272px !important;
        transform: translateX(0) !important;
    }
}

/* =========================================================
   Luxuria profile pages - static Blade layout
   These rules replace the Angular Material/profile component
   styles that were lost during the Angular -> Blade conversion.
   ========================================================= */

/* Small utility classes used by profile/setting templates. */
.float-end { float:right !important; }
.m-4 { margin:4px !important; }
.m-8 { margin:8px !important; }
.m-16 { margin:16px !important; }
.m-t-12 { margin-top:12px !important; }
.m-t-16 { margin-top:16px !important; }
.m-t-24 { margin-top:24px !important; }
.m-t-32 { margin-top:32px !important; }
.m-l-8 { margin-left:8px !important; }
.m-l-16 { margin-left:16px !important; }
.m-r-8 { margin-right:8px !important; }
.m-r-16 { margin-right:16px !important; }
.m-l-auto { margin-left:auto !important; }
.m-b-16 { margin-bottom:16px !important; }
.m-b-24 { margin-bottom:24px !important; }
.p-0 { padding:0 !important; }
.p-t-8 { padding-top:8px !important; }
.p-l-8 { padding-left:8px !important; }
.p-r-8 { padding-right:8px !important; }
.text-muted { color:var(--muted) !important; }
.text-dark-grey { color:#526074 !important; }
.f-s-20 { font-size:20px !important; }
.f-s-22 { font-size:22px !important; }
.f-s-24 { font-size:24px !important; }
.f-w-500 { font-weight:500 !important; }
.f-w-600 { font-weight:600 !important; }
.w-full { width:100% !important; }
.r-4 { border-radius:4px !important; }
.r-8 { border-radius:8px !important; }

/* Profile overview page. */
.profileStyles { width:100%; }
.profile-page { width:100%; background:transparent; }
.profile-page > .profile-header { margin-bottom:24px; }
.profile-header { background:#fff; border:1px solid #e5ebf2; border-radius:10px; overflow:hidden; box-shadow:var(--shadow); }
.cover-container { position:relative; height:190px; overflow:hidden; background:#e9eef5; }
.cover-container .bg-image { display:block; width:100%; height:100%; object-fit:cover; }
.cover-container .header-nav { position:absolute; top:14px; right:14px; list-style:none; margin:0; padding:0; display:flex; align-items:center; }
.cover-container .header-nav li { margin:0 0 0 8px !important; }
.mat-mini-fab { box-shadow:0 2px 8px rgba(20,30,45,.15); }
.mat-color-primary { background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; }
.mat-color-warn { background:#ef4444 !important; border-color:#ef4444 !important; color:#fff !important; }
.profile-info { background:#fff; padding:18px 22px 20px; }
.profile-info > .row { margin-left:-12px; margin-right:-12px; align-items:center; }
.profile-info .row > [class*="col-"] { margin-bottom:0; }
.user-detail { min-height:64px; display:flex; align-items:center; }
.profile-img { flex:0 0 auto; width:64px; height:64px; }
.profile-img img { display:block; width:64px; height:64px; object-fit:cover; border-radius:50%; border:3px solid #fff; box-shadow:0 2px 8px rgba(30,40,55,.15); }
.social-info ul { list-style:none; gap:34px; }
.social-info .post { min-width:70px; text-align:center; }
.social-info .post h3 { margin:0; font-size:14px; color:#334155; }
.social-info .post p { margin:0; }

.profileStyles + .row { margin-top:0; }
.profileStyles + .row > .col-sm-4,
.profileStyles + .row > .col-sm-8 { min-width:0; }
.profileStyles + .row .lux-card { height:auto; }
.aboutMeCard .card-header { padding:16px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.aboutMeCard .card-header-inner { min-width:0; }
.aboutMeCard .card-body { padding:18px; }
.aboutMeCard .card-body > div:first-child { line-height:1.6; color:#526074; }
.aboutMeCard hr { border:0; border-top:1px solid var(--border); margin:18px 0; }
.icons2 { color:#526074; cursor:pointer; }
.profile-img-gallery { list-style:none; margin:0 !important; padding:0 !important; }
.profile-img-gallery > li { list-style:none; padding-left:4px !important; padding-right:4px !important; margin-bottom:8px !important; }
.profile-img-gallery img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; }
.profile-img-gallery a { display:block; }
.friendsGroup .profile-img-gallery > li { position:relative; }
.friendsGroup .profile-img-gallery img { aspect-ratio:1/1; }
.friendsGroup .css-142zhr7 { padding-top:6px; text-align:center; }
.friendsGroup .userName { margin:0; font-size:12px; color:#526074; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.online-dot { position:absolute; right:8px; bottom:25px; width:10px; height:10px; border:2px solid #fff; border-radius:50%; }
.bg-pink-400 { background:#ec4899; }
.bg-green-400 { background:#22c55e; }
.bg-yellow-400 { background:#eab308; }

.postCard { width:100%; }
.postCard > .row { align-items:center; margin-left:0; margin-right:0; }
.postCard > .row > * { margin-bottom:0; }
.profile-pic { width:42px; height:42px; flex:0 0 42px; object-fit:cover; border-radius:50%; }
.postCard .userDetails { margin-left:12px; min-width:0; }
.postCard .userName,
.profilePostHeader .userName { margin:0; font-size:14px; font-weight:600; color:#263246; }
.postCard .postType { margin-top:3px; border:0; background:transparent; color:#718096; font-size:12px; outline:0; }
.postCard textarea { width:100%; min-height:100px; margin-top:16px; resize:vertical; border:1px solid #d7dee8; border-radius:6px; padding:11px 12px; font:inherit; }
.postCard .icon { font-size:21px; cursor:pointer; }
.postBtn { margin-left:auto; min-height:36px; padding:8px 18px; border:1px solid var(--primary); border-radius:5px; cursor:pointer; }
.profilePostHeader { min-width:0; }
.profilePostHeader > .d-flex { align-items:center; }
.profilePostHeader .userDetails { margin-left:12px; }
.profilePostHeader .postTime { margin:3px 0 0; font-size:12px; color:#8a96a7; }
.profilePostHeader .headerIcon { margin-left:auto; position:relative; }
.profilePostContent p { line-height:1.65; color:#526074; }
.profilePostContent img { display:block; max-height:520px; object-fit:cover; border-radius:6px; }
.lux-card > [align="start"] { display:flex; gap:6px; padding:0 18px 14px; }
.lux-card > [align="start"] .mat-button { min-height:36px; }
.mat-icon-button { appearance:none; border:0; background:transparent; color:#526074; min-width:36px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer; }
.mat-icon-button:hover { background:#f4f6fa; }
.mat-menu-item { display:flex; align-items:center; gap:8px; width:100%; padding:9px 12px; border:0; background:#fff; color:#465267; text-align:left; cursor:pointer; }
.headerIcon > div:not(.open),
.profilePostHeader .m-l-auto > div:not(.open) { display:none; }

/* Profile settings page. */
.blade-page > .lux-card > .lux-card-header .profilePostHeader { width:100%; }
.blade-page > .lux-card > .lux-card-header .profile-pic { width:48px; height:48px; flex-basis:48px; }
.blade-page > .lux-card > :not(.lux-card-header) { background:transparent; }
.blade-page > .lux-card > div > div > .material-icons { vertical-align:middle; }
.blade-page > .lux-card > div > div > .m-16 { margin-left:16px !important; margin-right:16px !important; }
.uploadImg { display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.avatarDetails { position:relative; width:110px; height:110px; }
.avatarDetails .hoverable { display:block; position:relative; width:110px; height:110px; overflow:hidden; border-radius:50%; border:1px solid #d8e0ea; background:#f5f7fa; cursor:pointer; }
.avatarDetails .hoverable img { display:block; width:100%; height:100%; object-fit:cover; }
.avatarDetails .hover-text { position:absolute; inset:auto 0 0; padding:7px; text-align:center; background:rgba(0,0,0,.55); color:#fff; font-size:12px; }
.avatarDetails .background { position:absolute; inset:0; border-radius:50%; pointer-events:none; }
#fileInput { display:none; }
.securityPreference { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 0; }
.securityPreference.border-bottom { border-bottom:1px solid var(--border); }
.securityPreference .m-b-24 { margin-bottom:0 !important; flex:1; }
.securityPreference small { display:block; margin-top:6px; line-height:1.5; color:#7b8798; }
.securityPreference > label { position:relative; flex:0 0 42px; width:42px; height:24px; border-radius:999px; background:#d5dce6; cursor:pointer; }
.securityPreference > label::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.personalDetails .row,
.securityDetails .row { margin-bottom:0; }
.form-field-full { width:100%; }
.btn-space { min-height:38px; padding:8px 16px; border:1px solid var(--primary); border-radius:5px; cursor:pointer; margin-right:6px; }

/* Responsive profile pages. */
@media (max-width:1100px) {
  .profile-info .social-info ul { float:none !important; justify-content:flex-start; margin-top:16px !important; }
  .profile-info .col-sm-4 { width:100%; }
  .profile-info .col-sm-8 { width:100%; }
  .profileStyles + .row > .col-sm-4,
  .profileStyles + .row > .col-sm-8 { width:100%; }
}
@media (max-width:700px) {
  .cover-container { height:150px; }
  .profile-info { padding:16px; }
  .social-info ul { gap:18px; }
  .uploadImg { align-items:flex-start; }
  .securityPreference { align-items:flex-start; }
}

/* Page-specific wrappers keep profile rules from affecting other modules. */
.profile-overview-page .profileStyles,
.profile-overview-page > .row,
.profile-settings-page > .lux-card { width:100%; }
.profile-settings-page > .lux-card > div:not(.lux-card-header) { padding:0; }
.profile-settings-page > .lux-card > div > div > .m-16 { margin-top:14px !important; margin-bottom:20px !important; }
.profile-settings-page > .lux-card .lux-card { box-shadow:none; }
.profile-settings-page > .lux-card .lux-card-header { background:#fff; }
.profile-settings-page .lux-form-field { position:relative; }
.profile-settings-page .lux-form-field > .feather-icon { position:absolute; right:10px; bottom:10px; z-index:1; color:#6b778a; }
.profile-settings-page .lux-form-field > input,
.profile-settings-page .lux-form-field > select,
.profile-settings-page .lux-form-field > textarea { padding-right:36px; }
.profile-settings-page .securityDetails .lux-form-field > .p-l-8.p-r-8 { position:absolute; right:6px; bottom:7px; z-index:1; }
.profile-settings-page .securityDetails .lux-form-field > .p-l-8.p-r-8 + input { padding-right:42px; }
.profile-settings-page h2 { font-size:17px; }

/* ================================================================
   Luxuria v8 - Occupancy / Front Office page layout
   These pages use Bootstrap-style col-md-* names and a few
   Angular-origin classes. The original static CSS only defined
   col-sm-* so the content collapsed into the upper-left corner.
   ================================================================ */

/* Bootstrap-compatible grid used by the converted Blade pages. */
.container { width:100%; max-width:1600px; margin-left:auto; margin-right:auto; padding-left:0; padding-right:0; }
.row { display:flex !important; flex-wrap:wrap !important; margin-left:-12px !important; margin-right:-12px !important; }
.row > [class*="col-"] { box-sizing:border-box; padding-left:12px !important; padding-right:12px !important; }
.col-md-1 { width:8.333333% !important; }
.col-md-2 { width:16.666667% !important; }
.col-md-3 { width:25% !important; }
.col-md-4 { width:33.333333% !important; }
.col-md-5 { width:41.666667% !important; }
.col-md-6 { width:50% !important; }
.col-md-7 { width:58.333333% !important; }
.col-md-8 { width:66.666667% !important; }
.col-md-9 { width:75% !important; }
.col-md-10 { width:83.333333% !important; }
.col-md-11 { width:91.666667% !important; }
.col-md-12 { width:100% !important; }
.mb-3 { margin-bottom:16px !important; }
.mb-4 { margin-bottom:24px !important; }
.m-b-24 { margin-bottom:24px !important; }
.m-b-16 { margin-bottom:16px !important; }

/* Common page shell. */
.blade-page { width:100%; max-width:1600px; margin:0 auto; }
.blade-page > .page-header-inner { min-height:34px; margin-bottom:14px; }
.blade-page .page-header-inner h1:empty,
.blade-page .page-header-inner h1 small:empty { display:none; }

/* ---------------------------------------------------------------
   OCCUPANCY
   --------------------------------------------------------------- */
.statistics-dashboard { width:100%; }
.statistics-dashboard .row { align-items:stretch; }
.stat-card {
  min-height:88px;
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:17px 18px;
  background:#fff;
  border:1px solid #e3eaf2;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(31,42,55,.06);
}
.stat-icon {
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:#eef0ff;
  color:#6366f1;
}
.stat-content { min-width:0; }
.stat-value { font-size:24px; line-height:1.15; font-weight:600; color:#1d2737; }
.stat-label { margin-top:4px; color:#66758a; font-size:13px; }

.refresh-controls {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin:0 0 20px;
}
.refresh-button, .clear-btn, .maintenance-btn, .action-btn {
  appearance:none;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 13px;
  border:1px solid #ccd6e3;
  border-radius:5px;
  background:#fff;
  color:#344257;
  cursor:pointer;
  font:500 14px/1 Inter,Arial,sans-serif;
}
.refresh-button:hover, .clear-btn:hover, .action-btn:hover, .maintenance-btn:hover { background:#f5f7fb; }
.auto-refresh-toggle { display:flex; align-items:center; gap:8px; color:#66758a; }
.toggle-switch { width:38px; height:21px; border-radius:999px; background:#d5dce6; position:relative; cursor:pointer; }
.toggle-switch::after { content:""; position:absolute; width:15px; height:15px; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.last-updated { display:flex; align-items:center; gap:6px; color:#718096; }

.filterBody {
  width:100%;
  padding:20px;
  margin-bottom:22px;
  background:#fff;
  border:1px solid #e3eaf2;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(31,42,55,.06);
}
.filter-header { margin-bottom:16px; }
.filter-title { margin:0; font-size:18px; font-weight:600; color:#263246; }
.results-count { color:#68778b; font-size:13px; }
.example-full-width { width:100%; position:relative; }
.example-full-width > .material-icons,
.example-full-width > .material-icons-outlined { position:absolute; right:10px; bottom:10px; color:#607086; pointer-events:none; }
.example-full-width input,
.example-full-width select,
.example-full-width textarea { width:100%; }
.mat-select { appearance:auto; }
.mat-datepicker-toggle { position:absolute; right:6px; bottom:6px; width:30px; height:30px; border:0; background:transparent; cursor:pointer; }
.mat-datepicker { display:none !important; }

.rooms-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:18px;
  width:100%;
}
.room-card-wrapper { min-width:0; }
.room-card {
  width:100%;
  overflow:hidden;
  background:#fff;
  border:1px solid #e3eaf2;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(31,42,55,.06);
}
.room-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid #edf0f4; }
.room-number { display:flex; flex-direction:column; gap:2px; min-width:0; }
.room-label { color:#7b8798; font-size:12px; }
.room-value { font-size:19px; font-weight:600; color:#263246; }
.floor-info { color:#7b8798; font-size:12px; }
.room-badges { flex:0 0 auto; }
.status-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:14px; background:#eef7ef; color:#27813d; font-size:12px; }
.status-badge.pending { background:#fdf1de; color:#d99a2b; }
.status-badge.progress { background:#e4eefd; color:#2270e0; }
.status-badge.urgent { background:#fde8e8; color:#e4483f; }
.status-badge.completed { background:#eef7ef; color:#27813d; }
.review-stars { display:inline-flex; }
.review-stars i { font-size:16px; }

/* ===================================================================
   DASHBOARD — full line/area chart cards (Hotel Occupancy Rate,
   Booking Trends)
   =================================================================== */
.metric-top-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:16px; }
.rate-value-lg { font-size:32px; font-weight:700; line-height:1.1; }
.metric-top-row .rate-label { margin-top:2px; color:#67758a; font-size:13px; }
.trend-pill { display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:14px; background:#e3f6ea; color:#1e9d54; font-size:12.5px; font-weight:700; }
.trend-pill .material-icons { font-size:15px; }
.trend-pill.down { background:#fdeee0; color:#d3760f; }
.metric-cols { display:flex; gap:28px; padding:14px 0; margin-bottom:16px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.metric-cols .metric-col { display:flex; flex-direction:column; gap:3px; }
.metric-cols .metric-label { font-size:12px; color:#8a96a7; }
.metric-cols .metric-value { font-size:16px; font-weight:700; color:#1a202e; }

.booking-stats-v2 { display:flex; gap:36px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.booking-stats-v2 .stat-value-lg { font-size:30px; font-weight:700; line-height:1.1; }
.booking-stats-v2 .stat-label { margin-top:2px; color:#67758a; font-size:13px; }

.period-selector { display:inline-flex; align-items:center; gap:4px; }
.period-selector .material-icons { font-size:18px; }

.line-chart-wrap { position:relative; display:flex; align-items:stretch; gap:4px; width:100%; }
.line-chart-svg { display:block; overflow:visible; }
.line-chart-ytitle { writing-mode:vertical-rl; transform:rotate(180deg); font-size:11px; color:#98a3b2; white-space:nowrap; padding:20px 0; flex:0 0 auto; }

/* ===================================================================
   DASHBOARD — Current Booking table (matches the reference spacing:
   taller rows, avatar + linked name, plain phone/date text)
   =================================================================== */
.current-booking-table th, .current-booking-table td { padding:14px 16px; font-size:13.5px; }
.current-booking-table .name-link { color:var(--primary); font-weight:600; text-decoration:none; }
.current-booking-table .name-link:hover { text-decoration:underline; }
.current-booking-table .table-avatar-cell img { width:32px; height:32px; }

/* ===================================================================
   DASHBOARD — Revenue Summary
   =================================================================== */
.total-revenue-section-v2 { text-align:center; padding:6px 0 18px; }
.amount-v2 { font-size:34px; font-weight:800; color:#0f1720; }
.change-v2 { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:6px; color:#1e9d54; font-weight:700; font-size:14px; }
.change-v2 .material-icons { font-size:17px; }
.period-label-v2 { margin-top:4px; color:#8a96a7; font-size:12.5px; }
.revenue-breakdown .breakdown-header h4 { margin:0 0 12px; font-size:14px; font-weight:700; color:#1a202e; }
.category-list-v2 { display:flex; flex-direction:column; }
.category-item-v2 { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid #f0f2f5; }
.category-item-v2:last-child { border-bottom:0; }
.category-icon-v2 { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:0 0 38px; color:#fff; }
.category-icon-v2 .material-icons { font-size:19px; }
.icon-solid-blue { background:#4f5fe0; }
.icon-solid-green { background:#22ad63; }
.icon-solid-teal { background:#22b8cf; }
.icon-solid-amber { background:#f0a83c; }
.category-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.category-name-v2 { font-size:13.5px; color:#465267; }
.category-amount-v2 { font-size:14.5px; font-weight:700; color:#1a202e; }
.category-metrics-v2 { text-align:right; display:flex; flex-direction:column; gap:2px; flex:0 0 auto; }
.category-percentage-v2 { font-size:14.5px; font-weight:700; color:#1a202e; }
.category-change-v2 { display:inline-flex; align-items:center; gap:2px; font-size:12px; font-weight:600; justify-content:flex-end; }
.category-change-v2 .material-icons { font-size:14px; }

/* ===================================================================
   DASHBOARD — Guest Origins
   =================================================================== */
.countries-list-v2 { display:flex; flex-direction:column; gap:10px; }
.country-item-v2 { display:flex; align-items:center; gap:14px; padding:13px 16px; background:#f7f8fa; border-radius:12px; }
.country-badge { width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid #e5e9f0; box-shadow:0 1px 3px rgba(20,26,38,.08); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:#334155; flex:0 0 40px; }
.country-details-v2 { flex:1; min-width:0; }
.country-name-v2 { font-size:14px; font-weight:700; color:#1a202e; }
.country-stats-v2 { margin-top:2px; font-size:12.5px; color:#8a96a7; display:flex; gap:8px; }
.country-stats-v2 .revenue-v2 { color:#1e9d54; font-weight:600; }
.country-metrics-v2 { flex:0 0 150px; }
.metrics-top-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.country-percentage-v2 { font-size:14px; font-weight:700; color:#1a202e; }
.country-growth-v2 { display:inline-flex; align-items:center; gap:2px; font-size:12px; font-weight:600; }
.country-growth-v2 .material-icons { font-size:14px; }
.country-progress-track { height:5px; border-radius:4px; background:#e5e9f0; overflow:hidden; }
.country-progress-fill { height:100%; border-radius:4px; }

@media (max-width:640px) {
  .country-item-v2 { flex-wrap:wrap; }
  .country-metrics-v2 { flex-basis:100%; }
}

/* ===================================================================
   DASHBOARD — Customer Review (rebuilt without the .row/.col grid
   classes, which caused negative-margin horizontal overflow inside
   the scrollable card and clipped the left edge of every row)
   =================================================================== */
.review-block-v2 { padding:14px 4px; border-bottom:1px solid #f0f2f5; }
.review-block-v2:last-of-type { border-bottom:0; }
.review-header-v2 { display:flex; align-items:flex-start; gap:12px; }
.review-avatar-v2 { width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 44px; background:#eef0ff; }
.review-meta-v2 { flex:1; min-width:0; }
.review-name-row-v2 { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.review-name-v2 { font-size:15px; font-weight:600; color:#1a202e; }
.review-time-v2 { font-size:12px; color:#8a96a7; white-space:nowrap; }
.review-stars { margin-top:4px; display:inline-flex; }
.review-text-v2 { margin:10px 0 8px; color:#465267; font-size:13.5px; line-height:1.6; }
.review-actions-v2 { display:flex; gap:16px; }
.review-thumb-v2 { border:0; background:transparent; padding:0; cursor:pointer; color:#465267; display:flex; align-items:center; }
.review-thumb-v2.down { color:#dc3545; }
.review-thumb-v2 .material-icons { font-size:18px; }

/* ===================================================================
   DASHBOARD — Guest List
   =================================================================== */
.guest-list-v2 { display:flex; flex-direction:column; gap:8px; }
.guest-row-v2 { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; background:#f3f2fc; }
.guest-avatar-v2 { width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 40px; background:#eef0ff; }
.guest-details-v2 { flex:1; min-width:0; }
.guest-name-v2 { font-size:13.5px; font-weight:600; color:#1a202e; }
.guest-room-v2 { font-size:12px; color:#8a96a7; margin-top:1px; }
.guest-schedule-v2 { text-align:right; flex:0 0 auto; }
.guest-date-v2 { font-size:13px; font-weight:700; color:#1a202e; }
.guest-time-v2 { font-size:12px; color:#8a96a7; margin-top:1px; }

/* ===================================================================
   DASHBOARD — multi-series smooth line chart (Booking Source)
   =================================================================== */
.multi-line-legend { display:flex; justify-content:center; gap:22px; margin-top:10px; }
.multi-line-legend-item { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#465267; }
.multi-line-legend-item .legend-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }

/* ===================================================================
   OCCUPANCY PAGE — KPI cards
   =================================================================== */
.occupancy-kpi-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-bottom:20px; }
.occupancy-kpi-card { position:relative; overflow:hidden; border-radius:14px; padding:22px 24px; color:#fff; box-shadow:0 10px 22px rgba(20,26,38,.14); }
.occupancy-kpi-card .kpi-icon-box { position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; }
.occupancy-kpi-card .kpi-icon-box .material-icons { font-size:22px; }
.occupancy-kpi-card .kpi-number { font-size:36px; font-weight:800; line-height:1; }
.occupancy-kpi-card .kpi-label { margin-top:8px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.92; }
.occupancy-kpi-card.tone-purple { background:linear-gradient(135deg,#8b7cf0,#6a5cf0); }
.occupancy-kpi-card.tone-green { background:linear-gradient(135deg,#3ec876,#1e9d54); }
.occupancy-kpi-card.tone-orange { background:linear-gradient(135deg,#f5905a,#e4573f); }
.occupancy-kpi-card.tone-blue { background:linear-gradient(135deg,#4f8ef7,#2f6fe4); }

/* ===================================================================
   OCCUPANCY PAGE — toolbar (refresh / auto-refresh / last updated)
   =================================================================== */
.occupancy-toolbar { display:flex; align-items:center; gap:24px; flex-wrap:wrap; background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px 20px; margin-bottom:20px; }
.occupancy-toolbar .refresh-btn { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px; border-radius:8px; border:0; background:var(--primary); color:#fff; font-weight:600; font-size:13.5px; cursor:pointer; }
.occupancy-toolbar .refresh-btn .material-icons { font-size:18px; }
.auto-refresh-row { display:flex; align-items:center; gap:9px; font-size:13.5px; color:#465267; }
.lux-switch { position:relative; display:inline-block; width:38px; height:20px; flex:0 0 38px; }
.lux-switch input { opacity:0; width:0; height:0; }
.lux-switch .slider { position:absolute; inset:0; background:#d7dee8; border-radius:20px; cursor:pointer; transition:.15s; }
.lux-switch .slider:before { content:""; position:absolute; width:16px; height:16px; left:2px; top:2px; background:#fff; border-radius:50%; transition:.15s; }
.lux-switch input:checked + .slider { background:var(--primary); }
.lux-switch input:checked + .slider:before { transform:translateX(18px); }
.last-updated-row { display:flex; align-items:center; gap:6px; color:#1e9d54; font-size:13.5px; margin-left:auto; }
.last-updated-row .material-icons { font-size:17px; }

/* ===================================================================
   OCCUPANCY PAGE — Room Filters
   =================================================================== */
.occ-filter-card { margin-bottom:22px; }
.occ-filter-header { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:#1a202e; margin-bottom:18px; }
.occ-filter-header .material-icons { color:#6b7280; }
.occ-search-row { display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.occ-search-box { flex:1; min-width:220px; position:relative; }
.occ-search-box input { width:100%; height:44px; padding:0 40px 0 14px; border:1px solid var(--border); border-radius:9px; font-size:14px; }
.occ-search-box .material-icons { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#98a3b2; }
.occ-results-pill { flex:0 0 auto; padding:8px 16px; border-radius:20px; background:#eef0ff; color:var(--primary); font-weight:700; font-size:13px; white-space:nowrap; }
.occ-filter-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:16px; }
.occ-filter-field label { display:block; font-size:11.5px; color:#8a96a7; margin-bottom:6px; }
.occ-filter-field .field-shell { position:relative; }
.occ-filter-field select, .occ-filter-field input { width:100%; height:42px; padding:0 34px 0 12px; border:1px solid var(--border); border-radius:8px; font-size:13.5px; color:#1a202e; background:#fff; appearance:none; }
.occ-filter-field select { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%2367758a'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; }
.occ-filter-field .field-shell .material-icons { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:18px; color:#98a3b2; pointer-events:none; }
.occ-clear-btn { display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 16px; border-radius:8px; border:0; background:#dc3545; color:#fff; font-weight:600; font-size:13.5px; cursor:pointer; }

/* ===================================================================
   OCCUPANCY PAGE — Room cards
   =================================================================== */
.rooms-grid-v2 { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.room-card-v2 { background:#fff; border:1px solid var(--border); border-top:4px solid #cbd5e1; border-radius:12px; display:flex; flex-direction:column; overflow:hidden; }
.room-card-v2.status-occupied { border-top-color:#e4483f; }
.room-card-v2.status-available { border-top-color:#1e9d54; }
.room-card-v2.status-cleaning { border-top-color:#2f6fe4; }
.room-card-v2.status-reserved { border-top-color:#f0653c; }
.room-card-v2.status-booked { border-top-color:#f0a83c; }
.room-card-v2.status-maintenance { border-top-color:#6b7280; }
.room-card-header-v2 { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:16px 16px 8px; }
.room-card-header-v2 .room-label { display:block; font-size:11px; color:#8a96a7; letter-spacing:.05em; font-weight:600; text-transform:uppercase; }
.room-card-header-v2 .room-number-v2 { font-size:26px; font-weight:800; color:#1a202e; line-height:1.15; }
.room-card-header-v2 .room-floor { font-size:12px; color:#8a96a7; }
.room-status-pill { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; font-size:11px; font-weight:700; color:#fff; text-transform:uppercase; white-space:nowrap; }
.room-status-pill .material-icons { font-size:13px; }
.room-status-pill.status-occupied { background:#e4483f; }
.room-status-pill.status-available { background:#1e9d54; }
.room-status-pill.status-cleaning { background:#2f6fe4; }
.room-status-pill.status-reserved { background:#f0653c; }
.room-status-pill.status-booked { background:#f0a83c; }
.room-status-pill.status-maintenance { background:#6b7280; }
.room-card-body-v2 { padding:6px 16px 14px; display:flex; flex-direction:column; gap:9px; flex:1; }
.room-detail-row { display:flex; align-items:center; gap:8px; font-size:13px; color:#334155; }
.room-detail-row .material-icons { font-size:16px; color:#8a96a7; }
.room-detail-row .max-occ { color:#8a96a7; font-size:12px; }
.room-rate-amount { color:#1e9d54; font-weight:700; }
.room-guest-row { display:flex; align-items:center; gap:8px; font-size:13px; }
.vip-chip { padding:2px 8px; border-radius:6px; background:#fdf1de; color:#b8860b; font-size:10.5px; font-weight:800; }
.room-ref-row { color:#8a96a7; font-size:12px; }
.room-stay-box { border:1px solid #dbe6fb; background:#eef4fe; border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; gap:4px; }
.room-stay-box .stay-row { display:flex; align-items:center; gap:7px; font-size:12px; color:#2f6fe4; }
.room-stay-box .material-icons { font-size:15px; }
.room-housekeeping-row { font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.room-housekeeping-row.clean { color:#1e9d54; }
.room-housekeeping-row.dirty { color:#dc3545; }
.room-housekeeping-row .material-icons { font-size:16px; }
.room-amenities-title { display:flex; align-items:center; gap:6px; font-size:12px; color:#8a96a7; font-weight:600; margin-top:2px; }
.room-amenities-title .material-icons { font-size:15px; color:#f0a83c; }
.room-amenities-icons { display:flex; flex-wrap:wrap; gap:8px; }
.room-amenities-icons .material-icons { font-size:16px; color:#1e9d54; }
.room-note-banner { background:#fdf6e3; border:1px solid #f3e2ad; border-radius:7px; padding:8px 10px; font-size:12px; color:#8a6d1f; }
.room-card-footer-v2 { padding:12px 16px 16px; margin-top:auto; }
.room-card-footer-v2 button, .room-card-footer-v2 a { width:100%; height:38px; border-radius:8px; border:0; color:#fff; font-weight:600; font-size:13px; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; text-decoration:none; box-sizing:border-box; }
.room-card-footer-v2 .btn-guest { background:var(--primary); }
.room-card-footer-v2 .btn-add-guest { background:#7c4b4b; }
.no-rooms-message-v2 { grid-column:1 / -1; text-align:center; padding:50px 20px; color:#8a96a7; }
.no-rooms-message-v2 .material-icons { font-size:38px; color:#c3cbd6; margin-bottom:10px; }

/* ===================================================================
   OCCUPANCY PAGE — Guest Details modal
   =================================================================== */
.room-modal-backdrop .lux-modal { max-width:940px; }
.room-modal-header-v2 { background:linear-gradient(135deg,#8b7cf0,#6a5cf0); color:#fff; padding:18px 22px; display:flex; align-items:center; gap:12px; }
.room-modal-header-v2 .modal-icon { background:rgba(255,255,255,.22); color:#fff; }
.room-modal-header-v2 h3 { color:#fff; margin:0; }
.room-modal-header-v2 .room-modal-status { font-size:12px; opacity:.9; margin-top:3px; }
.room-modal-header-v2 .lux-modal-close { color:#fff; }
.room-modal-header-v2 .lux-modal-close:hover { background:rgba(255,255,255,.18); }
.room-modal-body-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.room-modal-col { border-top:3px solid #cbd5e1; border-radius:10px; background:#fafbfc; padding:16px; }
.room-modal-col.col-green { border-top-color:#1e9d54; }
.room-modal-col.col-blue { border-top-color:#2f6fe4; }
.room-modal-col.col-orange { border-top-color:#f0a83c; }
.room-modal-col-title { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:#1a202e; margin-bottom:14px; }
.room-modal-field { background:#fff; border:1px solid #edf0f4; border-radius:8px; padding:10px 12px; margin-bottom:10px; }
.room-modal-field:last-child { margin-bottom:0; }
.room-modal-field-label { display:flex; align-items:center; gap:6px; font-size:10.5px; color:#8a96a7; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.room-modal-field-label .material-icons { font-size:14px; }
.room-modal-field-value { font-size:14px; font-weight:600; color:#1a202e; word-break:break-word; }
.room-modal-field-value.link { color:var(--primary); }
.room-modal-field-sub { font-size:11.5px; color:#8a96a7; margin-top:2px; }
.room-modal-ref-pill { display:inline-block; padding:4px 10px; border-radius:6px; background:#e4eefd; color:#2f6fe4; font-weight:700; font-size:13px; }
.room-modal-hk-pill { display:inline-block; padding:3px 10px; border-radius:12px; background:#e3f6ea; color:#1e9d54; font-size:12px; font-weight:700; }
.room-modal-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:14px 22px 20px; border-top:1px solid var(--border); }
.room-modal-footer .last-cleaned { display:flex; align-items:center; gap:6px; color:#8a96a7; font-size:12.5px; }
.room-modal-footer .last-cleaned .material-icons { font-size:15px; }
.room-modal-footer .footer-actions { display:flex; align-items:center; gap:16px; }
.room-modal-edit-link { display:inline-flex; align-items:center; gap:5px; color:var(--primary); font-weight:600; font-size:13px; background:transparent; border:0; cursor:pointer; text-decoration:none; }
.room-modal-edit-link .material-icons { font-size:16px; }

/* ===================================================================
   GENERIC MODAL — tabbed body + colored section headers
   (used by the Add New Guest modal, reusable elsewhere)
   =================================================================== */
.lux-modal-header.tone-green { background:linear-gradient(135deg,#3ec876,#1e9d54); }
.lux-modal-header.tone-green h3 { color:#fff; }
.lux-modal-header.tone-green .modal-icon { background:rgba(255,255,255,.25); color:#fff; }
.lux-modal-header.tone-green .lux-modal-close { color:#fff; }
.lux-modal-header.tone-green .lux-modal-close:hover { background:rgba(255,255,255,.2); }
.lux-modal-header-sub { font-size:13px; opacity:.9; margin-top:2px; }

.lux-modal-body.scrollable { max-height:60vh; overflow-y:auto; }

.modal-tabs { display:flex; border-bottom:1px solid var(--border); margin:-22px -22px 20px; padding:0 22px; position:sticky; top:0; background:#fff; z-index:1; }
.modal-tabs button { flex:1; padding:14px 10px; border:0; background:transparent; font-weight:600; font-size:13.5px; color:#67758a; cursor:pointer; border-bottom:2px solid transparent; }
.modal-tabs button.active { color:var(--primary); border-bottom-color:var(--primary); }
.modal-tab-panel { display:none; }
.modal-tab-panel.active { display:block; }

.modal-section-header { display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:#1a202e; padding-bottom:10px; margin-bottom:18px; border-bottom:2px solid #d6ecd9; }
.modal-section-header.tone-green .material-icons { color:#1e9d54; }

.modal-form-grid .lux-form-field .field-input .material-icons.dark { color:#1a202e; }

.modal-room-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:20px; background:#e3f6ea; color:#1e9d54; font-weight:600; font-size:13px; }
.modal-room-pill .material-icons { font-size:16px; }
.modal-cancel-link { border:0; background:transparent; color:var(--primary); font-weight:600; font-size:13.5px; display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.modal-cancel-link .material-icons { font-size:16px; }

.lux-checkbox-row { display:flex; align-items:center; gap:8px; font-size:13.5px; color:#334155; }
.lux-checkbox-row input { width:17px; height:17px; accent-color:var(--primary); }

/* ===================================================================
   FRONT OFFICE — Check-in/Check-out
   =================================================================== */
.cio-kpi-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-bottom:20px; }
.cio-kpi-card { position:relative; overflow:hidden; border-radius:14px; padding:22px 24px; display:flex; flex-direction:column; gap:4px; }
.cio-kpi-number { font-size:34px; font-weight:800; line-height:1; }
.cio-kpi-label { font-size:14px; font-weight:600; }
.cio-kpi-icon { position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:34px; opacity:.55; }
.cio-kpi-card.tone-pink { background:linear-gradient(135deg,#f3ddf7,#e7c9ed); }
.cio-kpi-card.tone-pink .cio-kpi-number, .cio-kpi-card.tone-pink .cio-kpi-label, .cio-kpi-card.tone-pink .cio-kpi-icon { color:#7c3aa8; }
.cio-kpi-card.tone-green { background:linear-gradient(135deg,#d9f5e0,#c3ecce); }
.cio-kpi-card.tone-green .cio-kpi-number, .cio-kpi-card.tone-green .cio-kpi-label, .cio-kpi-card.tone-green .cio-kpi-icon { color:#1e8049; }
.cio-kpi-card.tone-blue { background:linear-gradient(135deg,#d6eafd,#c1ddf8); }
.cio-kpi-card.tone-blue .cio-kpi-number, .cio-kpi-card.tone-blue .cio-kpi-label, .cio-kpi-card.tone-blue .cio-kpi-icon { color:#1c5fac; }
.cio-kpi-card.tone-amber { background:linear-gradient(135deg,#fce9c9,#f7dba3); }
.cio-kpi-card.tone-amber .cio-kpi-number, .cio-kpi-card.tone-amber .cio-kpi-label, .cio-kpi-card.tone-amber .cio-kpi-icon { color:#a8710f; }

.cio-checkin-btn { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 18px; border-radius:20px; border:0; background:#ece9fb; color:#6a5cf0; font-weight:600; font-size:13.5px; cursor:pointer; white-space:nowrap; }
.cio-checkin-btn:hover { background:#e0dbf7; }
.cio-checkin-btn .material-icons { font-size:17px; }

.cio-booking-id { color:#2f6fe4; font-weight:700; font-size:13px; }
.cio-guest-name { font-weight:600; color:#1a202e; font-size:13.5px; }
.cio-guest-email { color:#8a96a7; font-size:12px; }
.cio-room-number { font-weight:700; color:#1a202e; font-size:14px; }
.cio-room-type { color:#8a96a7; font-size:12px; }
.cio-stay-row { display:flex; align-items:center; gap:6px; font-size:12.5px; color:#465267; margin-bottom:3px; }
.cio-stay-row:last-child { margin-bottom:0; }
.cio-stay-row .material-icons { font-size:14px; color:#98a3b2; }
.cio-status-pill { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:14px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.cio-status-pill .material-icons { font-size:14px; }
.cio-status-pill.pending { background:#fde8ec; color:#d43f6a; }
.cio-status-pill.checked-in { background:#e3f6ea; color:#1e9d54; }
.cio-status-pill.checked-out { background:#e4eefd; color:#2f6fe4; }
.cio-status-pill.confirmed { background:#eef0ff; color:#6366f1; }
.cio-table .table-avatar-cell img { width:36px; height:36px; }

@media (max-width:1100px) {
  .cio-kpi-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px) {
  .cio-kpi-grid { grid-template-columns:1fr; }
}

@media (max-width:1100px) {
  .occupancy-kpi-grid { grid-template-columns:repeat(2, 1fr); }
  .occ-filter-grid { grid-template-columns:repeat(2, 1fr); }
  .rooms-grid-v2 { grid-template-columns:repeat(2, 1fr); }
  .room-modal-body-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .occupancy-kpi-grid { grid-template-columns:1fr; }
  .occ-filter-grid { grid-template-columns:1fr; }
  .rooms-grid-v2 { grid-template-columns:1fr; }
  .last-updated-row { margin-left:0; }
}

/* ===================================================================
   SIDEBAR — expanded submenu shown as a rounded lavender card with
   dot bullets, matching the reference design (the empty
   <span class="material-icons"></span> already reserved for each
   submenu row's icon slot is repurposed as the bullet dot).
   =================================================================== */
.submenu { margin:2px 10px 8px 38px; padding:5px 8px; background:#f0f0fb; border-radius:10px; }
.submenu .menu-item { margin:1px 0; }
.submenu .menu-heading { min-height:34px; padding:6px 10px; border-radius:7px; color:#6b7488; font-size:13.5px; gap:6px; }
.submenu .menu-heading:hover { background:rgba(99,102,241,.08); color:#4b5568; }
.submenu .menu-icon-container { width:16px; }
.submenu .menu-icon-wrapper .material-icons:empty { display:block; width:7px; height:7px; border-radius:50%; background:#c7ccf7; margin:0 auto; }
.submenu .menu-item.active > .menu-heading { background:#e3e1fb; color:var(--primary); font-weight:600; }
.submenu .menu-item.active > .menu-heading .material-icons:empty { background:var(--primary); }
.room-content { padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.room-type,.room-bed,.room-occupancy,.room-rate,.guest-info,.booking-ref,.date-info,.housekeeping-status,.amenities-title { display:flex; align-items:center; gap:8px; min-width:0; color:#536176; }
.detail-icon { width:20px; flex:0 0 20px; color:#65758b; }
.max-occupancy,.room-rate small,.booking-ref small,.date-info small,.notes-text { color:#7b8798; }
.rate-amount { font-weight:600; color:#263246; }
.vip-chip { margin-left:4px; padding:3px 7px; border-radius:12px; background:#fff1d9; color:#a96a00; font-size:11px; }
.stay-dates { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.room-amenities { padding-top:4px; }
.amenities-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.amenity-icon { width:20px; height:20px; color:#6b778a; }
.room-notes { padding-top:4px; }
.room-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid #edf0f4; }
.no-rooms-message {
  grid-column:1 / -1;
  padding:42px 20px;
  text-align:center;
  color:#718096;
  background:#fff;
  border:1px dashed #d6deea;
  border-radius:10px;
}
.no-rooms-icon { display:block; margin:0 auto 10px; font-size:34px; color:#a0aec0; }
.no-rooms-message h3 { margin:0 0 6px; color:#4a5568; font-size:17px; }
.no-rooms-message p { margin:0 0 16px; }

/* ---------------------------------------------------------------
   CHECK-IN / CHECK-OUT
   --------------------------------------------------------------- */
.checkinout-container { width:100%; }
.statistics-section .row { align-items:stretch; }
.statistics-section .stat-card { height:100%; min-height:82px; }
.checkinout-container .stat-content { width:100%; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; align-items:center; }
.checkinout-container .stat-number { grid-column:1/-1; min-height:20px; font-size:22px; font-weight:600; color:#1d2737; }
.checkinout-container .stat-label { grid-column:1; grid-row:2; margin:0; }
.checkinout-container .stat-icon { grid-column:2; grid-row:1/3; margin-left:auto; }
.reservations-section { width:100%; }
.card-actions { margin-left:auto; }
.checkin-btn { min-height:38px; padding:0 14px; border:1px solid var(--primary); border-radius:5px; background:var(--primary); color:#fff; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.table-controls { display:flex; width:100%; margin-bottom:18px; }
.controls-left { width:100%; max-width:100%; }
.search-field { position:relative; width:100%; }
.search-field input { padding-right:40px !important; }
.table-container { width:100%; overflow-x:auto; }
.checkinout-table { width:100%; min-width:980px; border-collapse:collapse; table-layout:auto; background:#fff; }
.checkinout-table thead { display:table-header-group; }
.checkinout-table tbody { display:table-row-group; }
.checkinout-table tr { display:table-row; }
.checkinout-table th,
.checkinout-table td { display:table-cell; padding:12px 11px; min-height:50px; vertical-align:middle; text-align:left; border-bottom:1px solid #edf0f4; white-space:nowrap; }
.checkinout-table th { background:#f7f8fa; color:#5f6f84; font-size:12px; font-weight:600; }
.checkinout-table td { color:#3d4a5d; }
.guest-info { display:flex; align-items:center; gap:10px; }
.guest-avatar { width:36px; height:36px; flex:0 0 36px; }
.guest-image { width:36px; height:36px; border-radius:50%; object-fit:cover; background:#edf0f4; }
.guest-details { display:flex; flex-direction:column; gap:2px; }
.guest-details .guest-name { font-weight:600; color:#2d3748; }
.guest-email { font-size:11px; color:#8a96a7; }
.room-info { display:flex; flex-direction:column; gap:2px; }
.room-number { font-weight:600; }
.room-type { color:#7b8798; font-size:12px; }
.date-info { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.action-buttons { display:flex; align-items:center; gap:5px; }
.mat-icon-button { width:36px; height:36px; }
.table-footer { display:flex; justify-content:space-between; align-items:center; padding-top:14px; color:#718096; font-size:13px; }
.pagination-info { min-height:20px; }

/* ---------------------------------------------------------------
   GUEST REGISTRATION
   --------------------------------------------------------------- */
.registration-container { width:100%; }
.registration-card { width:100%; }
.registration-card > .lux-card-header { min-height:66px; }
.registration-card > .lux-card-body { padding:22px !important; }
.form-grid { width:100%; }
.form-section { width:100%; padding:0 0 24px; margin:0 0 24px; border-bottom:1px solid #edf0f4; }
.form-section:last-of-type { margin-bottom:0; border-bottom:0; }
.section-title { display:flex; align-items:center; gap:8px; margin:0 0 18px; color:#263246; font-size:17px; font-weight:600; }
.section-icon { color:#526074; font-size:20px; }
.registration-form .row { margin-bottom:0; }
.registration-form .row > [class*="col-"] { margin-bottom:2px; }
.registration-form .lux-form-field { position:relative; }
.registration-form .lux-form-field input,
.registration-form .lux-form-field select,
.registration-form .lux-form-field textarea { min-height:40px; }
.registration-form .lux-form-field textarea { min-height:90px; resize:vertical; }
.registration-form .lux-form-field > .color-icon { position:absolute; right:10px; bottom:9px; color:#64748b; pointer-events:none; }
.registration-form .lux-form-field > input:has(+ .color-icon),
.registration-form .lux-form-field > textarea:has(+ .color-icon) { padding-right:38px; }
.document-upload .upload-section > label { display:block; margin-bottom:8px; color:#4e5b6d; font-size:13px; }
.document-upload-area { width:100%; min-height:150px; padding:26px; border:1px dashed #cdd7e4; border-radius:8px; background:#fafbfc; text-align:center; }
.upload-placeholder { cursor:pointer; color:#66758a; }
.upload-icon { display:block; margin:0 auto 8px; font-size:34px; color:#7c89a0; }
.upload-placeholder p { margin:0 0 6px; color:#4d5c70; }
.upload-placeholder small { color:#8a96a7; }
.uploaded-files { display:none; }
.form-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:4px; }
.form-actions .mat-raised-button { min-height:40px; padding:0 16px; }
.form-actions .mat-button { min-height:40px; }

/* ===================================================================
   REGISTRATION FORM — bold-bordered fields with dark trailing icons
   =================================================================== */
.reg-form-v2 .section-title-v2 { display:flex; align-items:center; gap:8px; margin:0 0 20px; color:#2f6fe4; font-size:17px; font-weight:700; }
.reg-form-v2 .section-title-v2 .material-icons { color:#2f6fe4; font-size:21px; }
.reg-form-v2 .field-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.reg-form-v2 .field-grid .full { grid-column:1 / -1; }
.reg-form-v2 .field-box { position:relative; }
.reg-form-v2 .field-box input,
.reg-form-v2 .field-box select,
.reg-form-v2 .field-box textarea { width:100%; height:52px; padding:0 44px 0 16px; border:1.5px solid #333f4d; border-radius:10px; font-size:15px; color:#1a202e; background:#fff; appearance:none; }
.reg-form-v2 .field-box textarea { height:auto; min-height:96px; padding-top:14px; resize:vertical; }
.reg-form-v2 .field-box select { padding-right:16px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7'><path d='M0 0l6 7 6-7z' fill='%231a202e'/></svg>"); background-repeat:no-repeat; background-position:right 16px center; }
.reg-form-v2 .field-box .material-icons { position:absolute; right:14px; top:26px; transform:translateY(-50%); color:#1a202e; font-size:20px; pointer-events:none; }
.reg-form-v2 .field-box textarea ~ .material-icons { top:22px; transform:none; }
.reg-form-v2 .field-box input::placeholder,
.reg-form-v2 .field-box textarea::placeholder { color:#1a202e; opacity:.78; }

/* Explicit color helpers used by these pages. */
.mat-color-primary { color:var(--primary); }
button.mat-color-primary { background:var(--primary); border-color:var(--primary); color:#fff; }
button.mat-color-primary:hover { background:#5558dc; }
.mat-color-warn { color:#dc3545; }
button.mat-color-warn { border-color:#d4dce7; background:#fff; color:#dc3545; }
button.mat-color-accent { color:#7c3aed; }

@media (max-width:1100px) {
  .col-md-3,.col-md-4 { width:50% !important; }
  .col-md-8 { width:100% !important; }
  .col-md-6 { width:50% !important; }
}
@media (max-width:700px) {
  .content { padding:18px 14px; }
  .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11 { width:100% !important; }
  .stat-card { min-height:76px; }
  .filterBody,.registration-card > .lux-card-body { padding:16px !important; }
  .lux-card-header { flex-wrap:wrap; }
  .card-actions { width:100%; margin-left:0; }
  .stay-dates { grid-template-columns:1fr; }
}

/* ===================================================================
   MODAL / DIALOG (generic, reusable across list pages)
   Usage: trigger  data-modal-open="modal-id"
          backdrop <div class="lux-modal-backdrop" id="modal-id"> ... </div>
          close    data-modal-close on any element inside it
   =================================================================== */
body.modal-open { overflow:hidden; }
.lux-modal-backdrop { display:none; position:fixed; inset:0; z-index:1000; align-items:flex-start; justify-content:center; padding:48px 16px; overflow:auto; background:rgba(20,26,38,.55); }
.lux-modal-backdrop.open { display:flex; }
.lux-modal { width:100%; max-width:640px; background:#fff; border-radius:12px; box-shadow:0 24px 60px rgba(20,26,38,.32); animation:luxModalIn .16s ease; }
.lux-modal.lux-modal-sm { max-width:480px; }
.lux-modal-header { display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--border); }
.lux-modal-header .modal-icon { width:36px; height:36px; border-radius:50%; background:#eef0ff; color:var(--primary); display:flex; align-items:center; justify-content:center; flex:0 0 36px; }
.lux-modal-header h3 { margin:0; font-size:17px; font-weight:600; flex:1; color:#1a202e; }
.lux-modal-close { width:32px; height:32px; border-radius:7px; border:0; background:transparent; color:#8a96a7; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 32px; }
.lux-modal-close:hover { background:#f4f6fa; color:#334155; }
.lux-modal-body { padding:22px; }
.lux-modal-footer { display:flex; align-items:center; gap:10px; padding:6px 22px 22px; }
.lux-modal-footer button:disabled { opacity:.5; cursor:not-allowed; }
@keyframes luxModalIn { from { transform:translateY(-8px); opacity:0; } to { transform:translateY(0); opacity:1; } }

.modal-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.modal-form-grid .full { grid-column:1 / -1; }
.modal-form-grid .lux-form-field label { display:block; font-size:12px; font-weight:600; color:#67758a; margin-bottom:6px; }
.modal-form-grid .lux-form-field .field-input { position:relative; display:flex; align-items:center; }
.modal-form-grid .lux-form-field input,
.modal-form-grid .lux-form-field select { width:100%; height:42px; padding:0 34px 0 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; color:#1a202e; background:#fff; }
.modal-form-grid .lux-form-field select { padding-right:32px; appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%2367758a'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; }
.modal-form-grid .lux-form-field textarea { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; resize:vertical; min-height:80px; }
.modal-form-grid .field-input .material-icons { position:absolute; right:10px; font-size:19px; color:#98a3b2; pointer-events:none; }
.modal-form-grid .field-hint { margin-top:5px; font-size:11px; color:#98a3b2; }
.modal-form-grid .field-error { margin-top:5px; font-size:12px; color:#dc3545; }
.modal-daterange { display:flex; align-items:center; gap:8px; }
.modal-daterange input { text-align:center; }

.lux-radio-group { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.lux-radio-group > .group-label { font-size:14px; color:#465267; font-weight:500; }
.lux-radio { display:inline-flex; align-items:center; gap:7px; font-size:14px; color:#334155; cursor:pointer; }
.lux-radio input[type="radio"] { width:17px; height:17px; accent-color:var(--primary); cursor:pointer; }
.reg-form-v2 .lux-radio-group input[type="radio"] { width:17px; height:17px; padding:0; border:none; border-radius:50%; appearance:auto; accent-color:var(--primary); }

/* ---------------------------------------------------------------
   GUEST PICKER (searchable combobox on Add/Edit Booking)
   --------------------------------------------------------------- */
.guest-picker-row { display:flex; align-items:flex-end; gap:12px; }
.guest-picker-row .field-box { flex:0 1 60%; min-width:0; margin-bottom:0; }
.quick-add-guest-btn { flex:0 1 40%; min-width:150px; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; height:52px; padding:0 18px; border:1.5px solid #333f4d; border-radius:10px; background:#fff; color:#37424a; font-size:14px; font-weight:500; cursor:pointer; }
.quick-add-guest-btn:hover { background:#f5f7fb; border-color:#6366f1; color:#6366f1; }
.quick-add-guest-btn:hover .material-icons { color:#6366f1; }
.quick-add-guest-btn .material-icons { font-size:19px; color:#6366f1; }
.guest-picker-menu { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40; max-height:260px; overflow-y:auto; background:#fff; border:1px solid #e3e7ee; border-radius:10px; box-shadow:0 8px 24px rgba(31,42,55,.12); }
.guest-picker-item { display:flex; flex-direction:column; gap:2px; padding:10px 14px; cursor:pointer; }
.guest-picker-item:hover, .guest-picker-item.active { background:#f5f7fb; }
.guest-picker-item .name { font-size:14px; font-weight:600; color:#1a202e; }
.guest-picker-item .meta { font-size:12px; color:#67758a; }
.guest-picker-item.empty { cursor:default; color:#67758a; font-size:13.5px; }
.guest-picker-item.add-new { color:#6366f1; font-weight:600; cursor:pointer; }

/* ===================================================================
   ACTION DROPDOWN MENU (kebab "..." trigger on table rows)
   =================================================================== */
.action-menu { position:relative; display:inline-flex; }
.action-menu-trigger { width:32px; height:32px; border-radius:7px; border:0; background:transparent; color:#67758a; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.action-menu-trigger:hover { background:#f4f6fa; color:#334155; }
.mat-menu-item .material-icons { font-size:18px; color:#8a96a7; }
.mat-menu-item.danger { color:#dc3545; }
.mat-menu-item.danger .material-icons { color:#dc3545; }

/* ===================================================================
   TABLE CELL HELPERS (avatar, dates, phone, status pills)
   =================================================================== */
.table-avatar-cell { display:flex; align-items:center; gap:10px; }
.table-avatar-cell img { width:32px; height:32px; border-radius:50%; object-fit:cover; flex:0 0 32px; background:#eef0ff; }
.table-avatar-cell .avatar-fallback { width:32px; height:32px; border-radius:50%; flex:0 0 32px; background:#eef0ff; color:var(--primary); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }

.table-date-cell { display:inline-flex; align-items:center; gap:6px; color:#465267; }
.table-date-cell .material-icons { font-size:16px; color:#8a96a7; }
.table-phone-cell { display:inline-flex; align-items:center; gap:6px; color:#22a35a; font-weight:500; }
.table-phone-cell .material-icons { font-size:16px; }

.status-pill { display:inline-flex; align-items:center; padding:4px 11px; border-radius:6px; font-size:12px; font-weight:600; line-height:16px; white-space:nowrap !important; overflow-wrap:normal; word-break:keep-all; }
.status-select-inline { height:32px; padding:0 8px; border:1px solid var(--border); border-radius:6px; font-size:12.5px; color:#37424a; background:#fff; cursor:pointer; }
table.advance-table .col-status,
table.advance-table .col-payment { min-width:118px; }
table.advance-table .col-name { min-width:170px; }

/* ===================================================================
   GUEST COMPLAINT — priority/status pills, room number
   =================================================================== */
.status-pill.priority-medium { background:#fdecd2; color:#d99a2b; }
.status-pill.priority-high { background:#fbdde6; color:#d23f6a; }
.status-pill.priority-low { background:#d7f0f7; color:#1f93b0; }
.status-pill.complaint-open { background:#fde0e0; color:#e14b4b; }
.status-pill.complaint-resolved { background:#dff5e3; color:#1e9d54; }
.status-pill.complaint-inprogress { background:#fdecd2; color:#d99a2b; }
.complaint-room { color:#2f6fe4; font-weight:600; }
.name-link { color:var(--primary); font-weight:600; }

/* ===================================================================
   ALL GUESTS / ALL ROOMS — pills, table helper cells
   =================================================================== */
.table-mail-cell { display:inline-flex; align-items:center; gap:6px; color:#465267; }
.table-mail-cell .material-icons { font-size:16px; color:#e14b4b; }
.status-pill.tier-gold { background:#fdecd2; color:#b8860b; }
.status-pill.tier-platinum { background:#ece9fb; color:#7c5cf0; }
.status-pill.tier-silver { background:#d7f0f7; color:#1f93b0; }
.status-pill.tier-bronze { background:#f3e4d2; color:#a56a35; }
.status-pill.tier-diamond { background:#e1f4fb; color:#0f8bb8; }
.status-pill.status-active { background:#dff5e3; color:#1e9d54; }
.status-pill.room-status-booked { background:#e4eefd; color:#2f6fe4; }
.status-pill.room-status-open { background:#dff5e3; color:#1e9d54; }
.status-pill.room-status-inactive { background:#fdecd2; color:#d99a2b; }
.status-pill.status-booked { background:#e4eefd; color:#2f6fe4; }
.status-pill.status-checkin { background:#dff5e3; color:#1e9d54; }
.status-pill.status-checkout { background:#ece9fb; color:#7c5cf0; }
.status-pill.status-cancelled { background:#fde0e0; color:#e14b4b; }
.rooms-table .table-avatar-cell img,
#roomsTable .table-avatar-cell img { width:32px; height:32px; border-radius:6px; object-fit:cover; }

/* ===================================================================
   ADD ROOM — compact upload area, reuses .reg-form-v2 fields
   =================================================================== */
.reg-form-v2 .field-box label { display:block; font-size:11.5px; color:#8a96a7; margin-bottom:6px; }
.upload-choose-btn { border:0; background:#ece9fb; color:#6a5cf0; font-weight:600; font-size:13px; padding:9px 18px; border-radius:20px; cursor:pointer; white-space:nowrap; }

/* ===================================================================
   CANCEL BOOKINGS — refund status pills
   =================================================================== */
.status-pill.refund-processed { background:#dff5e3; color:#1e9d54; }
.status-pill.refund-pending { background:#fdecd2; color:#d99a2b; }
.status-pill.refund-cancelled { background:#fde0e0; color:#e14b4b; }
.sort-arrow { font-size:14px !important; vertical-align:middle; color:#465267; }

/* ===================================================================
   ROOM CLEANING — status/priority pills
   =================================================================== */
.status-pill.cleaning-scheduled { background:#e4eefd; color:#2f6fe4; }
.status-pill.cleaning-completed { background:#dff5e3; color:#1e9d54; }
.status-pill.cleaning-inprogress { background:#fdecd2; color:#d99a2b; }
.status-pill.cleaning-priority-standard { background:#e4eefd; color:#2f6fe4; }
.status-pill.cleaning-priority-high { background:#fdecd2; color:#d99a2b; }
.status-pill.cleaning-priority-low { background:#dff5e3; color:#1e9d54; }

/* ===================================================================
   HOUSEKEEPING — Cleaning Schedule (card grid)
   =================================================================== */
.sched-header-row { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.sched-title { margin:0; font-size:22px; font-weight:700; color:#1a202e; }
.sched-subtitle { margin:4px 0 0; color:#67758a; font-size:13.5px; }
.sched-add-btn { display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 18px; border-radius:20px; border:0; background:#ece9fb; color:#6a5cf0; font-weight:600; font-size:13.5px; cursor:pointer; white-space:nowrap; }
.sched-add-btn:hover { background:#e0dbf7; }
.sched-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.sched-card .lux-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; border-bottom:1px solid var(--border); }
.sched-card .room-info { display:flex; flex-direction:column; gap:2px; }
.sched-card .room-title { margin:0; font-size:20px; font-weight:800; color:#1a202e; }
.sched-card .task-type { color:#67758a; font-size:13px; }
.task-details { display:flex; flex-direction:column; gap:16px; }
.detail-item { display:flex; align-items:flex-start; gap:10px; }
.detail-item .detail-icon { color:#8a96a7; font-size:18px; margin-top:1px; }
.detail-content { display:flex; flex-direction:column; gap:2px; }
.detail-label { font-size:10.5px; color:#8a96a7; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.detail-value { font-size:14px; font-weight:600; color:#1a202e; }
.notes-item { border-top:1px dashed var(--border); padding-top:14px; }
.notes-item .detail-value.notes-text { font-style:italic; font-weight:400; color:#465267; }
.sched-card .card-actions { display:flex; justify-content:flex-end; gap:6px; padding:10px 18px 16px; }
.sched-card .action-btn { border:0; background:transparent; width:32px; height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sched-card .action-btn:hover { background:#f4f6fa; }
.status-pill.sched-inprogress { background:#fdecd2; color:#d99a2b; }
.status-pill.sched-pending { background:#e4eefd; color:#2f6fe4; }
.status-pill.sched-completed { background:#dff5e3; color:#1e9d54; }

@media (max-width:1100px) { .sched-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px) { .sched-grid { grid-template-columns:1fr; } }

/* ===================================================================
   HOUSEKEEPING — Room Status Board
   =================================================================== */
.rsb-card { border-top:4px solid #cbd5e1; }
.rsb-card.rsb-ready { border-top-color:#1e9d54; }
.rsb-card.rsb-dirty { border-top-color:#e4483f; }
.rsb-card.rsb-cleaning { border-top-color:#f0a83c; }
.rsb-card.rsb-inspected { border-top-color:#2f6fe4; }
.rsb-card.rsb-ooo { border-top-color:#6b7280; }
.rsb-card .lux-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; border-bottom:0; padding-bottom:6px; }
.rsb-card .room-number { font-size:24px; font-weight:800; color:#1a202e; display:block; }
.rsb-card .room-type { font-size:11.5px; color:#8a96a7; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.rsb-status-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; white-space:nowrap; }
.rsb-status-pill .dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.rsb-status-pill.rsb-ready { background:#dff5e3; color:#1e9d54; }
.rsb-status-pill.rsb-ready .dot { background:#1e9d54; }
.rsb-status-pill.rsb-dirty { background:#fde0e0; color:#e4483f; }
.rsb-status-pill.rsb-dirty .dot { background:#e4483f; }
.rsb-status-pill.rsb-cleaning { background:#fdecd2; color:#d99a2b; }
.rsb-status-pill.rsb-cleaning .dot { background:#d99a2b; }
.rsb-status-pill.rsb-inspected { background:#e4eefd; color:#2f6fe4; }
.rsb-status-pill.rsb-inspected .dot { background:#2f6fe4; }
.rsb-status-pill.rsb-ooo { background:#eef1f5; color:#5c6b81; }
.rsb-status-pill.rsb-ooo .dot { background:#5c6b81; }
.rsb-occupancy-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; font-size:12.5px; font-weight:600; }
.rsb-occupancy-pill .material-icons { font-size:15px; }
.rsb-occupancy-pill.vacant { background:#dff5e3; color:#1e9d54; }
.rsb-occupancy-pill.occupied { background:#fde0e0; color:#e4483f; }
.rsb-card .lux-card-body { padding-top:6px; padding-bottom:6px; }
.rsb-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px 16px; border-top:1px solid var(--border); }
.rsb-last-cleaned { display:flex; align-items:flex-start; gap:8px; color:#67758a; font-size:12.5px; }
.rsb-last-cleaned .material-icons { font-size:16px; color:#8a96a7; }

/* ===================================================================
   HOUSEKEEPING — Lost and Found
   =================================================================== */
.lf-card .lux-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; border-bottom:1px solid var(--border); }
.lf-card .lf-title { margin:0; font-size:18px; font-weight:700; color:#1a202e; }
.lf-card .lf-location { color:#67758a; font-size:13px; margin-top:2px; }
.lf-status-pill { display:inline-flex; align-items:center; padding:5px 13px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; white-space:nowrap; }
.lf-status-pill.lf-found { background:#e4eefd; color:#2f6fe4; }
.lf-status-pill.lf-returned { background:#dff5e3; color:#1e9d54; }
.lf-status-pill.lf-claimed { background:#fdecd2; color:#d99a2b; }
.lf-card .card-actions { display:flex; justify-content:flex-end; gap:6px; padding:10px 18px 16px; }
.status-cancelled { background:#fdeee0; color:#c9720f; }
.status-booked { background:#e3f6ea; color:#1e9d54; }
.status-checkin { background:#e4eefd; color:#2270e0; }
.status-checkout { background:#efe7fb; color:#7c4fd0; }
.payment-paid { background:#e3f6ea; color:#1e9d54; }
.payment-unpaid { background:#fdeee0; color:#d3760f; }

/* ===================================================================
   TABLE FOOTER / PAGINATION
   =================================================================== */
.table-footer { display:flex; justify-content:flex-end; align-items:center; gap:22px; padding-top:16px; color:#67758a; font-size:13px; flex-wrap:wrap; }
.pagination-info { min-height:20px; display:flex; align-items:center; gap:8px; }
.pagination-size { height:32px; padding:0 26px 0 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; color:#334155; background:#fff; appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%2367758a'/></svg>"); background-repeat:no-repeat; background-position:right 8px center; }
.pagination-controls { display:flex; align-items:center; gap:2px; }
.pagination-controls button { width:30px; height:30px; border-radius:6px; border:0; background:transparent; color:#465267; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.pagination-controls button:hover:not(:disabled) { background:#f4f6fa; }
.pagination-controls button:disabled { color:#c3cbd6; cursor:not-allowed; }

/* ===================================================================
   DASHBOARD — KPI cards with mini charts
   =================================================================== */
.kpi-card-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kpi-value { margin:2px 0 8px; font-size:26px; font-weight:700; color:#1a202e; }
.kpi-trend { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; }
.kpi-trend .material-icons { font-size:16px; }
.kpi-trend.up { color:#16a34a; }
.kpi-trend.down { color:#f97316; }
.kpi-chart { flex:0 0 auto; width:112px; height:56px; display:flex; align-items:flex-end; }
.kpi-chart svg { display:block; overflow:visible; }
.kpi-bars { display:flex; align-items:flex-end; gap:5px; height:56px; width:100%; }
.kpi-bars i { flex:1; display:block; border-radius:3px 3px 1px 1px; background:#f7941d; }
.kpi-bars.tone-orange i { background:linear-gradient(180deg,#ffb04d,#f7941d); }

/* ===================================================================
   DASHBOARD — Room Availability
   =================================================================== */
.room-availability-progress { display:flex; height:14px; border-radius:8px; overflow:hidden; margin-bottom:22px; background:#f0f2f5; }
.room-availability-progress .progress-bar { height:100%; }
.room-availability-progress .progress-bar.occupied { background:#f4a259; }
.room-availability-progress .progress-bar.reserved { background:#f8cb9c; }
.room-availability-progress .progress-bar.available { background:#fbe4c8; }
.room-availability-progress .progress-bar.not-ready { background:#a8e6bf; }
.room-availability-stats { display:grid; grid-template-columns:1fr 1fr; gap:20px 26px; }
.room-availability-stats .stat-item { padding-left:14px; border-left:3px solid #e5e7eb; }
.room-availability-stats .occupied-label { border-color:#f4a259; }
.room-availability-stats .reserved-label { border-color:#f8cb9c; }
.room-availability-stats .available-label { border-color:#fbe4c8; }
.room-availability-stats .not-ready-label { border-color:#a8e6bf; }
.room-availability-stats .stat-label { display:block; color:#67758a; font-size:13px; margin-bottom:4px; }
.room-availability-stats .stat-value { font-size:22px; font-weight:700; color:#1a202e; }

/* ===================================================================
   DASHBOARD — Reservation stacked bar chart
   =================================================================== */
.chart-legend { display:flex; justify-content:flex-end; gap:18px; font-size:12px; color:#465267; margin-bottom:12px; }
.chart-legend .legend-dot { width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:6px; }
.chart-legend .legend-dot.booked { background:#7c5cf0; }
.chart-legend .legend-dot.canceled { background:#f5a524; }
.stacked-bar-chart { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; height:220px; padding:0 4px; border-bottom:1px solid var(--border); }
.stacked-bar-chart .bar-col { display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; height:100%; justify-content:flex-end; }
.stacked-bar-chart .bar-stack { width:100%; max-width:34px; display:flex; flex-direction:column-reverse; border-radius:6px 6px 3px 3px; overflow:hidden; }
.stacked-bar-chart .seg { display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; }
.stacked-bar-chart .seg-booked { background:#7c5cf0; }
.stacked-bar-chart .seg-canceled { background:#f5a524; }
.stacked-bar-chart .bar-day { font-size:12px; color:#67758a; }

/* ===================================================================
   DASHBOARD — Quick Access
   =================================================================== */
.access-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.access-item { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 10px; border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer; }
.access-item:hover { border-color:#c7d2fe; background:#fafbff; }
.access-item .item-icon { position:relative; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.access-item .item-icon .material-icons { font-size:22px; }
.access-item .item-icon .badge { position:absolute; top:-6px; right:-8px; min-width:18px; height:18px; padding:0 4px; border-radius:50%; background:#2f6fe4; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.access-item .item-icon .badge.badge-red { background:#e4483f; }
.icon-bg-blue { background:#e4eefd; color:#2f6fe4; }
.icon-bg-green { background:#e3f6ea; color:#1e9d54; }
.icon-bg-amber { background:#fdf1de; color:#d99a2b; }
.icon-bg-red { background:#fde8e8; color:#e4483f; }
.icon-bg-purple { background:#efe7fb; color:#7c4fd0; }
.icon-bg-grey { background:#eef1f5; color:#5c6b81; }
.access-item .item-icon .badge.badge-purple { background:#7c4fd0; }
.access-item .item-title { font-size:13px; font-weight:600; color:#334155; text-align:center; }

/* ===================================================================
   DASHBOARD — Service Requests
   =================================================================== */
.service-request-summary .summary-stats { display:flex; gap:10px; margin-bottom:14px; }
.service-request-summary .stat-item { flex:1; text-align:center; padding:12px 6px; border-radius:8px; background:#f7f8fa; }
.service-request-summary .stat-item .stat-value { font-size:20px; font-weight:700; }
.service-request-summary .stat-item .stat-label { font-size:11px; color:#67758a; text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }
.service-request-summary .stat-item.pending .stat-value { color:#d99a2b; }
.service-request-summary .stat-item.progress .stat-value { color:#2f6fe4; }
.service-request-summary .stat-item.urgent .stat-value { color:#e4483f; }
.requests-section .section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.requests-section .section-title { font-size:13px; font-weight:600; color:#334155; }
.requests-section .view-all-btn { border:0; background:transparent; color:var(--primary); font-size:12px; font-weight:600; cursor:pointer; padding:0; }
.request-item { display:flex; align-items:flex-start; gap:10px; padding:10px 2px; border-bottom:1px solid #f0f2f5; }
.request-item:last-child { border-bottom:0; }
.request-icon { width:34px; height:34px; border-radius:8px; background:#fdeee0; color:#d3760f; display:flex; align-items:center; justify-content:center; flex:0 0 34px; }
.request-icon .material-icons { font-size:17px; }
.request-details { flex:1; min-width:0; }
.request-title { font-size:13px; font-weight:600; color:#1a202e; margin-bottom:2px; }
.request-meta { display:flex; gap:8px; font-size:11.5px; color:#8a96a7; }
.request-status { text-align:right; flex:0 0 auto; }
.request-status .status-badge { display:inline-flex; }
.request-status .estimated-time { display:flex; align-items:center; gap:3px; justify-content:flex-end; margin-top:5px; font-size:11px; color:#98a3b2; }
.request-status .estimated-time .material-icons { font-size:13px; }
.quick-actions { display:flex; gap:10px; margin-top:14px; }
.quick-actions .action-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; height:36px; border-radius:7px; border:1px solid var(--border); background:#fff; color:#465267; font-size:12.5px; font-weight:600; cursor:pointer; }
.quick-actions .action-btn:hover { background:#f7f8fa; }
.quick-actions .action-btn .material-icons { font-size:16px; }

/* ===================================================================
   DASHBOARD — Guest Purpose donut
   =================================================================== */
.guest-demographics-snapshot .view-selector { display:flex; gap:8px; margin-bottom:16px; }
.guest-demographics-snapshot .view-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; height:36px; border-radius:8px; border:1px solid var(--border); background:#fff; color:#465267; font-size:12.5px; font-weight:600; cursor:pointer; }
.guest-demographics-snapshot .view-btn .material-icons { font-size:15px; }
.guest-demographics-snapshot .view-btn.active { background:#2f6fe4; border-color:#2f6fe4; color:#fff; }
.guest-demographics-snapshot .chart-container { display:flex; justify-content:center; padding:6px 0 4px; }
.custom-legend { margin-top:6px; }
.custom-legend .legend-item { display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid #f0f2f5; }
.custom-legend .legend-item:last-child { border-bottom:0; }
.custom-legend .legend-indicator { display:flex; align-items:center; gap:8px; }
.custom-legend .color-dot { width:10px; height:10px; border-radius:50%; }
.custom-legend .legend-label { font-size:13px; color:#334155; font-weight:500; }
.custom-legend .legend-stats { text-align:right; }
.custom-legend .guest-count { font-size:13px; font-weight:700; color:#1a202e; margin-right:4px; }
.custom-legend .percentage { font-size:12px; color:#8a96a7; }
.summary-footer { margin-top:10px; padding-top:12px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:center; gap:8px; color:#67758a; font-size:13px; }
.summary-footer .summary-icon { color:var(--primary); font-size:18px; }
.summary-footer strong { color:#1a202e; font-size:15px; }

@media (max-width:640px) {
  .modal-form-grid { grid-template-columns:1fr; }
  .lux-modal { max-width:94vw; }
  .stacked-bar-chart { overflow-x:auto; }
}

/* Roles table has no select-checkbox column, so its first (real content)
   column must not inherit the 48px width meant for that checkbox. */
#rolesTable th:first-child,
#rolesTable td:first-child { width:auto; min-width:220px; max-width:none; padding-left:12px !important; }

/* Wider modal variant for forms with too many fields for the default
   640px width (e.g. Edit Room's full field set). */
.lux-modal.lux-modal-lg { max-width:820px; }
@media (max-width:860px) { .lux-modal.lux-modal-lg { max-width:94vw; } }

/* ---------------------------------------------------------------
   ADD FOOD ORDER: two-column cart layout (menu on the left, a live
   running order summary on the right, like a restaurant POS screen).
   --------------------------------------------------------------- */
.food-order-layout { display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:start; }
@media (max-width:960px) { .food-order-layout { grid-template-columns:1fr; } }
.food-order-layout .lux-card { margin-bottom:20px; }
.food-order-guest-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:16px; }
@media (max-width:760px) { .food-order-guest-grid { grid-template-columns:1fr 1fr; } }
.food-order-guest-grid label { display:block; margin-bottom:6px; color:#37424a; font-weight:500; font-size:13.5px; }
.food-order-guest-grid input[readonly] { background:#f5f7fb; color:#67758a; }

.menu-toolbar { display:flex; gap:12px; margin-bottom:14px; }
.menu-toolbar input[type="text"] { flex:1 1 auto; }
.menu-toolbar select { flex:0 0 200px; }
@media (max-width:600px) { .menu-toolbar { flex-wrap:wrap; } .menu-toolbar select { flex:1 1 100%; } }

.menu-item-thumb { display:flex; align-items:center; gap:10px; }
.menu-item-thumb .icon-badge { width:34px; height:34px; border-radius:8px; background:#eef1fd; color:#6366f1; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.menu-add-btn { display:inline-flex; align-items:center; gap:4px; height:34px; padding:0 14px; border:1.5px solid #6366f1; border-radius:8px; background:#fff; color:#6366f1; font-size:13px; font-weight:600; cursor:pointer; }
.menu-add-btn:hover { background:#6366f1; color:#fff; }
.menu-add-btn:disabled { opacity:.5; cursor:default; background:#f5f7fb; border-color:#dfe4ea; color:#8a96a7; }

.order-summary-card .lux-card-body { padding-top:6px; }
.order-summary-list { display:flex; flex-direction:column; gap:12px; max-height:360px; overflow-y:auto; margin-bottom:14px; }
.order-summary-empty { text-align:center; color:#8a96a7; font-size:13.5px; padding:24px 8px; }
.order-line { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:12px; border-bottom:1px solid #f0f2f5; }
.order-line:last-child { border-bottom:0; padding-bottom:0; }
.order-line-info { min-width:0; }
.order-line-name { font-size:13.5px; font-weight:600; color:#1a202e; display:block; }
.order-line-price { font-size:12px; color:#8a96a7; }
.order-line-controls { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.qty-stepper { display:flex; align-items:center; gap:0; border:1px solid #dfe4ea; border-radius:8px; overflow:hidden; }
.qty-stepper button { width:26px; height:26px; border:0; background:#f5f7fb; color:#37424a; font-size:15px; line-height:1; cursor:pointer; }
.qty-stepper button:hover { background:#eef1fd; color:#6366f1; }
.qty-stepper .qty-value { width:26px; text-align:center; font-size:13px; font-weight:600; }
.order-line-total { width:56px; text-align:right; font-size:13.5px; font-weight:600; color:#1a202e; }
.order-line-remove { width:26px; height:26px; border:0; background:none; color:#e2544d; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.order-line-remove:hover { color:#c73a33; }
.order-line-remove .material-icons { font-size:18px; }

.order-totals { border-top:1px solid var(--border); padding-top:12px; margin-bottom:14px; }
.order-totals .row { display:flex; justify-content:space-between; font-size:13.5px; color:#67758a; padding:4px 0; }
.order-totals .row.grand { border-top:1px solid var(--border); margin-top:6px; padding-top:10px; font-size:16px; font-weight:700; color:#1a202e; }
.order-totals .row.grand span:last-child { color:#6366f1; }
.order-summary-actions { display:flex; gap:10px; }
.order-summary-actions .mat-flat-button { flex:1 1 auto; justify-content:center; }

/* ---------------------------------------------------------------
   KITCHEN DISPLAY: full-screen ticket board for kitchen staff -
   large touch targets, an elapsed-time badge that escalates color
   the longer a ticket waits, and a 5s poll (see the inline script)
   instead of a manual refresh.
   --------------------------------------------------------------- */
.kds-toolbar { display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid #e5ebf2; border-radius:10px; padding:14px 18px; margin-bottom:20px; }
.kds-toolbar-left { display:flex; align-items:baseline; gap:8px; }
.kds-count { font-size:26px; font-weight:700; color:#1a202e; }
.kds-count-label { color:#67758a; font-size:13.5px; }
.kds-toolbar-right { display:flex; align-items:center; gap:8px; color:#67758a; font-size:13px; }
.kds-live-dot { width:9px; height:9px; border-radius:50%; background:#1e9d54; box-shadow:0 0 0 0 rgba(30,157,84,.6); animation:kdsPulse 1.8s infinite; }
@keyframes kdsPulse { 0% { box-shadow:0 0 0 0 rgba(30,157,84,.5); } 70% { box-shadow:0 0 0 8px rgba(30,157,84,0); } 100% { box-shadow:0 0 0 0 rgba(30,157,84,0); } }

.kds-empty { text-align:center; padding:70px 20px; color:#8a96a7; background:#fff; border:1px dashed #d7dee8; border-radius:12px; }
.kds-empty .material-icons { font-size:46px; opacity:.5; margin-bottom:10px; }

.kds-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px; }
.kds-card { background:#fff; border:1px solid #e5ebf2; border-radius:14px; padding:18px; box-shadow:0 2px 10px rgba(26,32,46,.06); display:flex; flex-direction:column; gap:12px; border-top:4px solid #d7dee8; }
.kds-card.kds-status-pending { border-top-color:#e4483f; }
.kds-card.kds-status-preparing { border-top-color:#f0a83c; }

.kds-card-top { display:flex; align-items:center; justify-content:space-between; }
.kds-room { font-size:22px; font-weight:700; color:#1a202e; }
.kds-time-pill { font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px; }
.kds-time-pill.kds-time-ok { background:#dff5e3; color:#1e9d54; }
.kds-time-pill.kds-time-warn { background:#fdecd2; color:#d99a2b; }
.kds-time-pill.kds-time-late { background:#fbdde6; color:#d23f6a; }

.kds-guest { color:#67758a; font-size:13.5px; }

.kds-items { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.kds-items li { font-size:15px; color:#1a202e; }
.kds-qty { font-weight:700; color:#6366f1; margin-right:2px; }

.kds-notes { display:flex; align-items:flex-start; gap:6px; background:#fff7e6; border:1px solid #fde3b0; border-radius:8px; padding:8px 10px; font-size:12.5px; color:#8a6d1f; }
.kds-notes .material-icons { font-size:16px; flex-shrink:0; }

.kds-card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:6px; border-top:1px solid #f0f2f5; }
.kds-status-pill-pending { background:#fbdde6; color:#d23f6a; }
.kds-status-pill-preparing { background:#fdecd2; color:#d99a2b; }

.kds-action-btn { display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 16px; border:0; border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer; color:#fff; }
.kds-action-btn:disabled { opacity:.6; cursor:default; }
.kds-btn-start { background:#f0a83c; }
.kds-btn-start:hover:not(:disabled) { background:#d99a2b; }
.kds-btn-ready { background:#1e9d54; }
.kds-btn-ready:hover:not(:disabled) { background:#178745; }

@media (max-width:600px) { .kds-toolbar { flex-direction:column; align-items:flex-start; gap:8px; } }

/* ===================================================================
   Photo upload widget (Add/Edit Guest, Add/Edit Room)
   =================================================================== */
.photo-upload-widget { display:flex; align-items:center; gap:16px; }
.photo-preview {
  width:84px; height:84px; border-radius:50%; flex:0 0 84px;
  background:#eef0ff; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border:1px solid var(--border);
}
.photo-preview img { width:100%; height:100%; object-fit:cover; }
.photo-preview .material-icons { font-size:38px; color:var(--primary); }
.photo-upload-btn {
  display:inline-flex; align-items:center; gap:7px; border:1px solid #d4dce7;
  background:#fff; color:#465267; border-radius:5px; padding:9px 15px;
  cursor:pointer; font:500 13px/1 Inter,Roboto,Arial,sans-serif; transition:background .15s,border-color .15s;
}
.photo-upload-btn:hover { background:#f5f7ff; border-color:var(--primary); color:var(--primary); }
.photo-upload-btn .material-icons { font-size:18px; }
.photo-upload-widget input[type="file"] {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Table listing avatar-cell icon fallback, used when a module supports
   photos but a given row has none uploaded yet. */
.avatar-fallback { display:flex; align-items:center; justify-content:center; color:var(--primary); }
.table-avatar-cell .avatar-fallback.material-icons { font-size:18px; }
.guest-avatar-v2.avatar-fallback.material-icons { font-size:20px; }

/* ===================================================================
   Room photo gallery (Add/Edit Room)
   =================================================================== */
.room-gallery-grid { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.room-gallery-item {
  position:relative; width:96px; height:96px; border-radius:8px; overflow:hidden;
  border:2px solid var(--border); background:#eef0ff;
}
.room-gallery-item.is-main { border-color:var(--primary); }
.room-gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
.room-gallery-item-actions {
  position:absolute; inset:0; background:rgba(15,23,32,.55); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
  opacity:0; transition:opacity .15s;
}
.room-gallery-item:hover .room-gallery-item-actions { opacity:1; }
.room-gallery-item-actions button {
  appearance:none; border:0; background:rgba(255,255,255,.92); color:#37424a;
  border-radius:4px; padding:3px 8px; font-size:11px; font-weight:600; cursor:pointer; line-height:1.4;
}
.room-gallery-item-actions button.is-active { background:var(--primary); color:#fff; }
.room-gallery-main-badge {
  position:absolute; top:4px; left:4px; background:var(--primary); color:#fff;
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:3px; line-height:1.4;
}
.room-gallery-add {
  width:96px; height:96px; border-radius:8px; border:2px dashed #ccd5e1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; color:#8a96a7; cursor:pointer; background:#fafbfc; transition:border-color .15s,color .15s;
}
.room-gallery-add:hover { border-color:var(--primary); color:var(--primary); }
.room-gallery-add .material-icons { font-size:24px; }
.room-gallery-add span.gallery-add-label { font-size:11px; font-weight:600; }
.room-gallery-add input[type="file"] {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}