/* ============================================
   KASHIKA STAY — Module Styles
   All 7 Operation Modules
   ============================================ */

/* Page visibility */
.module-page { display: none; }
.module-page.active { display: block; }

/* Module Header */
.mod-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-4); }
.mod-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; }
.mod-subtitle { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: var(--space-1); }
.mod-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: all var(--transition-fast); border: 1px solid transparent; text-decoration: none; }
.btn-primary { background: var(--gradient-gold); color: var(--text-inverse); border: none; }
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--text-secondary); border-color: var(--border-subtle); }
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }

/* Filter Bar */
.filter-bar { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; align-items: center; }
.filter-select { background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); outline: none; cursor: pointer; }
.filter-select:focus { border-color: var(--color-primary); }
.filter-input { background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); outline: none; min-width: 200px; }
.filter-input:focus { border-color: var(--color-primary); }

/* Cards Grid */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-6); margin-bottom: var(--space-8); }
.cards-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cards-grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Module Card */
.mod-card { background: var(--gradient-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-6); transition: all var(--transition-base); }
.mod-card:hover { border-color: var(--border-medium); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mod-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.mod-card-icon { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.mod-card-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-1); }
.mod-card-desc { font-size: var(--text-sm); color: var(--text-tertiary); margin-bottom: var(--space-4); line-height: 1.5; }

/* Toggle Switch */
.toggle { position: relative; width: 44px; height: 24px; border-radius: var(--radius-full); background: var(--border-subtle); cursor: pointer; transition: background var(--transition-fast); }
.toggle.active { background: var(--color-primary); }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; transition: transform var(--transition-fast); }
.toggle.active::after { transform: translateX(20px); }

/* Stat Row */
.stat-row { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.stat-row:last-child { border-bottom: none; }
.stat-label { font-size: var(--text-sm); color: var(--text-tertiary); }
.stat-value { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }

/* Progress Bar */
.progress { height: 8px; background: var(--bg-primary); border-radius: var(--radius-full); overflow: hidden; margin-top: var(--space-2); }
.progress-fill { height: 100%; border-radius: var(--radius-full); transition: width 1s ease; }
.progress-fill.gold { background: var(--gradient-gold); }
.progress-fill.blue { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
.progress-fill.green { background: linear-gradient(90deg, #22C55E, #4ADE80); }
.progress-fill.red { background: linear-gradient(90deg, #EF4444, #F87171); }
.progress-fill.purple { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }

/* ======== BOOKINGS MODULE ======== */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-header { padding: var(--space-2); text-align: center; font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; }
.cal-day { padding: var(--space-3); min-height: 80px; background: var(--bg-secondary); border-radius: var(--radius-sm); font-size: var(--text-xs); position: relative; cursor: pointer; transition: background var(--transition-fast); }
.cal-day:hover { background: var(--color-primary-subtle); }
.cal-day-num { font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-1); }
.cal-day.today { border: 1px solid var(--color-primary); }
.cal-day.other-month { opacity: 0.3; }
.cal-event { font-size: 10px; padding: 1px 4px; border-radius: 3px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event.booked { background: rgba(200, 164, 86, 0.25); color: var(--color-primary); }
.cal-event.checkin { background: rgba(34, 197, 94, 0.2); color: #22C55E; }
.cal-event.checkout { background: rgba(59, 130, 246, 0.2); color: #3B82F6; }

/* Room Status Grid */
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
.room-chip { padding: var(--space-3); border-radius: var(--radius-md); text-align: center; font-size: var(--text-xs); font-weight: 600; cursor: pointer; transition: all var(--transition-fast); }
.room-chip.available { background: rgba(34, 197, 94, 0.12); color: #22C55E; border: 1px solid rgba(34, 197, 94, 0.25); }
.room-chip.occupied { background: var(--color-primary-subtle); color: var(--color-primary); border: 1px solid rgba(200, 164, 86, 0.25); }
.room-chip.maintenance { background: rgba(212, 69, 26, 0.1); color: var(--color-accent); border: 1px solid rgba(212, 69, 26, 0.2); }
.room-chip-name { font-size: var(--text-sm); font-weight: 600; margin-bottom: 2px; }
.room-chip-status { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }

/* ======== BILLING MODULE ======== */
.invoice-card { background: var(--gradient-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; }
.invoice-header-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.invoice-number { font-family: var(--font-display); font-weight: 600; color: var(--color-primary); }
.invoice-amount { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.tax-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: var(--space-4) var(--space-6); background: var(--bg-primary); }
.tax-item { display: flex; justify-content: space-between; font-size: var(--text-sm); }
.tax-label { color: var(--text-tertiary); }
.tax-value { color: var(--text-primary); font-weight: 500; }

/* ======== CLIENTS MODULE ======== */
.client-card { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); transition: background var(--transition-fast); cursor: pointer; }
.client-card:hover { background: var(--color-primary-subtle); }
.client-avatar { width: 48px; height: 48px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-sm); flex-shrink: 0; }
.client-avatar.gold { background: var(--color-primary-subtle); color: var(--color-primary); }
.client-avatar.blue { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }
.client-avatar.purple { background: rgba(168, 85, 247, 0.15); color: #A78BFA; }
.client-avatar.green { background: rgba(34, 197, 94, 0.15); color: #22C55E; }
.client-name { font-weight: 600; color: var(--text-primary); font-size: var(--text-sm); }
.client-meta { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
.client-stats { margin-left: auto; text-align: right; }
.client-visits { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
.client-spend { font-size: var(--text-xs); color: var(--text-tertiary); }
.loyalty-badge { font-size: var(--text-xs); font-weight: 700; padding: 2px 10px; border-radius: var(--radius-full); }
.loyalty-badge.platinum { background: linear-gradient(135deg, #C8A456, #E0C978); color: #2D1B00; }
.loyalty-badge.gold { background: rgba(200, 164, 86, 0.2); color: var(--color-primary); }
.loyalty-badge.silver { background: rgba(148, 163, 184, 0.2); color: #94A3B8; }

/* ======== GROWTH MODULE ======== */
.metric-card { text-align: center; padding: var(--space-6); }
.metric-icon { font-size: 2rem; margin-bottom: var(--space-3); }
.metric-val { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; color: var(--text-primary); }
.metric-label { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: var(--space-1); }
.metric-change { font-size: var(--text-xs); font-weight: 600; margin-top: var(--space-2); }
.metric-change.up { color: #22C55E; }
.metric-change.down { color: var(--color-accent); }

.channel-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; }
.channel-name { font-size: var(--text-sm); color: var(--text-primary); font-weight: 500; min-width: 120px; }
.channel-bar-wrap { flex: 1; }
.channel-value { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); min-width: 60px; text-align: right; }

/* ======== ACCOUNTS MODULE ======== */
.ledger-row { display: flex; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.ledger-row:hover { background: var(--color-primary-subtle); }
.ledger-date { color: var(--text-tertiary); min-width: 90px; }
.ledger-desc { flex: 1; color: var(--text-primary); }
.ledger-type { min-width: 80px; }
.ledger-amount { min-width: 100px; text-align: right; font-weight: 600; font-family: var(--font-display); }
.ledger-amount.credit { color: #22C55E; }
.ledger-amount.debit { color: var(--color-accent); }

/* ======== STAFF MODULE ======== */
.staff-card { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4); background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); transition: all var(--transition-fast); }
.staff-card:hover { border-color: var(--color-primary); }
.staff-avatar { width: 52px; height: 52px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-lg); flex-shrink: 0; }
.staff-name { font-weight: 600; color: var(--text-primary); }
.staff-role { font-size: var(--text-xs); color: var(--color-primary); margin-top: 2px; }
.staff-dept { font-size: var(--text-xs); color: var(--text-tertiary); }
.staff-status { margin-left: auto; text-align: right; }
.shift-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); text-transform: uppercase; }
.shift-badge.morning { background: rgba(234, 179, 8, 0.15); color: #EAB308; }
.shift-badge.evening { background: rgba(168, 85, 247, 0.15); color: #A78BFA; }
.shift-badge.night { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }
.shift-badge.off { background: rgba(148, 163, 184, 0.1); color: #64748B; }

/* ======== AI AGENTS MODULE ======== */
.agent-card { position: relative; overflow: hidden; }
.agent-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.agent-card.active-agent::before { background: var(--gradient-gold); }
.agent-card.inactive-agent::before { background: var(--border-subtle); }
.agent-status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.agent-status-dot.online { background: #22C55E; box-shadow: 0 0 6px #22C55E; }
.agent-status-dot.offline { background: #64748B; }
.agent-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.agent-metric { text-align: center; padding: var(--space-3); background: var(--bg-primary); border-radius: var(--radius-md); }
.agent-metric-val { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); }
.agent-metric-label { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }

/* ======== RESPONSIVE MODULES ======== */
@media (max-width: 1200px) { .cards-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .cards-grid-3, .cards-grid-2, .cards-grid { grid-template-columns: 1fr; }
  .mod-header { flex-direction: column; align-items: flex-start; }
  .cal-grid { grid-template-columns: repeat(7, 1fr); font-size: 10px; }
  .cal-day { min-height: 50px; padding: var(--space-2); }
  .room-grid { grid-template-columns: repeat(2, 1fr); }
}