/* =========================================================
   5-STAR HMS FRONTEND APP - COMPLETE UI SYSTEM
   ========================================================= */

:root{
    --fs-bg: #f5f7fb;
    --fs-surface: #ffffff;
    --fs-surface-soft: #f8fafc;
    --fs-surface-alt: #f1f5f9;

    --fs-border: #e2e8f0;
    --fs-border-strong: #cbd5e1;

    --fs-text: #0f172a;
    --fs-text-soft: #475569;
    --fs-text-muted: #64748b;

    --fs-primary: #0f172a;
    --fs-primary-2: #1e293b;
    --fs-accent: #d4a017;
    --fs-accent-soft: #fbbf24;

    --fs-success: #16a34a;
    --fs-success-bg: #dcfce7;

    --fs-danger: #dc2626;
    --fs-danger-bg: #fee2e2;

    --fs-warning: #d97706;
    --fs-warning-bg: #ffedd5;

    --fs-yellow: #92400e;
    --fs-yellow-bg: #fef3c7;

    --fs-info: #2563eb;
    --fs-info-bg: #dbeafe;

    --fs-radius-sm: 12px;
    --fs-radius-md: 16px;
    --fs-radius-lg: 20px;
    --fs-radius-xl: 24px;

    --fs-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.05);
    --fs-shadow-md: 0 12px 28px rgba(15, 23, 42, 0.08);
    --fs-shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.12);

    --fs-transition: all .22s ease;
}

/* =========================================================
   GLOBAL / RESET
   ========================================================= */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

body.fivestar-app-menu-open{
    overflow:hidden;
}

.fivestar-app-shell,
.fivestar-app-shell *{
    box-sizing:border-box;
}

.fivestar-app-shell{
    display:flex;
    min-height:100vh;
    background:
        radial-gradient(circle at top left, rgba(212,160,23,.09), transparent 18%),
        radial-gradient(circle at top right, rgba(37,99,235,.05), transparent 20%),
        linear-gradient(180deg, #f7f8fb 0%, #f2f5fa 100%);
    color:var(--fs-text);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    line-height:1.5;
}

.fivestar-app-shell a{
    text-decoration:none;
}

[hidden]{
    display:none !important;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.fivestar-app-sidebar{
    width:280px;
    background:
        radial-gradient(circle at top, rgba(212,160,23,.16), transparent 18%),
        linear-gradient(180deg, #0b1220 0%, #111827 55%, #0f172a 100%);
    color:#fff;
    padding:24px 18px;
    display:flex;
    flex-direction:column;
    gap:24px;
    position:sticky;
    top:0;
    height:100vh;
    z-index:30;
    box-shadow:12px 0 32px rgba(15,23,42,.22);
    border-right:1px solid rgba(255,255,255,.05);
}

.fivestar-app-brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.fivestar-app-brand-mark{
    width:50px;
    height:50px;
    border-radius:16px;
    background:linear-gradient(180deg,#f7d774 0%,#d4a017 100%);
    color:#1b1b1b;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:18px;
    flex-shrink:0;
    box-shadow:0 12px 24px rgba(212,160,23,.28);
}

.fivestar-app-brand-title{
    font-size:18px;
    font-weight:800;
    line-height:1.2;
    color:#fff;
}

.fivestar-app-brand-subtitle{
    font-size:12px;
    color:#cbd5e1;
    margin-top:4px;
}

.fivestar-app-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.fivestar-app-nav-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-radius:16px;
    color:#e2e8f0;
    font-size:14px;
    font-weight:800;
    transition:var(--fs-transition);
    border:1px solid transparent;
}

.fivestar-app-nav-link:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
    border-color:rgba(255,255,255,.06);
}

.fivestar-app-nav-link.is-active{
    background:linear-gradient(180deg,#ffffff 0%,#fffaf0 100%);
    color:#0f172a;
    box-shadow:0 10px 24px rgba(255,255,255,.14);
    border-color:rgba(212,160,23,.20);
}

.fivestar-app-nav-icon{
    width:22px;
    text-align:center;
    font-size:16px;
    flex-shrink:0;
}

.fivestar-app-sidebar-footer{
    margin-top:auto;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.fivestar-app-user-card{
    padding:14px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.fivestar-app-user-name{
    font-size:14px;
    font-weight:800;
    color:#fff;
}

.fivestar-app-user-role{
    margin-top:4px;
    font-size:12px;
    color:#cbd5e1;
}

.fivestar-app-logout{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 14px;
    border-radius:14px;
    background:linear-gradient(180deg,#ef4444 0%,#dc2626 100%);
    color:#fff;
    font-weight:800;
    font-size:14px;
    box-shadow:var(--fs-shadow-sm);
    transition:var(--fs-transition);
}

.fivestar-app-logout:hover{
    transform:translateY(-1px);
    box-shadow:var(--fs-shadow-md);
}

/* =========================================================
   MAIN / HEADER
   ========================================================= */

.fivestar-app-main{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}

.fivestar-app-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 24px;
    border-bottom:1px solid rgba(212,160,23,.14);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);
    position:sticky;
    top:0;
    z-index:20;
    box-shadow:0 6px 18px rgba(15,23,42,.04);
}

.fivestar-app-header-left{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.fivestar-app-menu-toggle{
    display:none;
    border:none;
    background:linear-gradient(180deg,#111827 0%,#0f172a 100%);
    color:#fff;
    border-radius:12px;
    width:42px;
    height:42px;
    font-size:18px;
    cursor:pointer;
    box-shadow:var(--fs-shadow-sm);
}

.fivestar-app-page-title{
    margin:0;
    font-size:28px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:-.03em;
    color:var(--fs-text);
}

.fivestar-app-page-meta{
    margin-top:5px;
    color:var(--fs-text-muted);
    font-size:13px;
}

.fivestar-app-role-pill{
    display:inline-flex;
    align-items:center;
    padding:10px 14px;
    border-radius:999px;
    background:linear-gradient(180deg,#fff8e1 0%,#fef3c7 100%);
    color:#8a5b00;
    border:1px solid rgba(212,160,23,.22);
    font-size:13px;
    font-weight:800;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

.fivestar-app-content{
    padding:24px;
}

/* =========================================================
   SHARED PANEL / CARD SYSTEM
   ========================================================= */

.fivestar-app-panel,
.fivestar-app-card,
.fivestar-room-card,
.fivestar-booking-card,
.fivestar-reservation-card,
.fivestar-product-card,
.fivestar-sale-card,
.fivestar-room-bill-card,
.fivestar-audit-card,
.fivestar-guest-bill-card{
    background:linear-gradient(180deg,#ffffff 0%,#fffdfa 100%);
    border:1px solid rgba(212,160,23,.12);
    border-radius:var(--fs-radius-lg);
    box-shadow:var(--fs-shadow-sm);
    transition:var(--fs-transition);
    position:relative;
    overflow:hidden;
}

.fivestar-app-panel::before,
.fivestar-app-card::before,
.fivestar-room-card::before,
.fivestar-booking-card::before,
.fivestar-reservation-card::before,
.fivestar-product-card::before,
.fivestar-sale-card::before,
.fivestar-room-bill-card::before,
.fivestar-audit-card::before,
.fivestar-guest-bill-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#c99700 0%,#f7d774 40%,#d4a017 100%);
}

.fivestar-app-panel:hover,
.fivestar-app-card:hover,
.fivestar-room-card:hover,
.fivestar-booking-card:hover,
.fivestar-reservation-card:hover,
.fivestar-product-card:hover,
.fivestar-sale-card:hover,
.fivestar-room-bill-card:hover,
.fivestar-audit-card:hover,
.fivestar-guest-bill-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--fs-shadow-md);
    border-color:rgba(212,160,23,.24);
}

.fivestar-app-panel{
    padding:20px;
}

.fivestar-app-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
    flex-wrap:wrap;
}

.fivestar-app-panel-head h2{
    margin:0;
    font-size:18px;
    font-weight:900;
    color:var(--fs-text);
    letter-spacing:-.02em;
}

/* =========================================================
   CARDS
   ========================================================= */

.fivestar-app-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
    margin-bottom:20px;
}

.fivestar-app-card{
    padding:18px 18px 16px;
    min-height:132px;
}

.fivestar-app-card-label{
    color:var(--fs-text-muted);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:12px;
}

.fivestar-app-card-value{
    color:var(--fs-text);
    font-size:30px;
    font-weight:900;
    line-height:1.1;
    letter-spacing:-.02em;
}

.fivestar-app-card-meta{
    margin-top:10px;
    color:var(--fs-text-soft);
    font-size:12px;
    line-height:1.5;
}

/* =========================================================
   QUICK LINKS
   ========================================================= */

.fivestar-app-quick-links{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:12px;
}

.fivestar-app-quick-link{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:16px;
    border:1px solid var(--fs-border);
    border-radius:16px;
    color:var(--fs-text);
    background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);
    min-height:110px;
    transition:var(--fs-transition);
    box-shadow:var(--fs-shadow-sm);
}

.fivestar-app-quick-link:hover{
    transform:translateY(-2px);
    border-color:var(--fs-border-strong);
    box-shadow:var(--fs-shadow-md);
}

.fivestar-app-quick-link-icon{
    font-size:22px;
}

/* =========================================================
   FORM SYSTEM
   ========================================================= */

.fivestar-app-form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
}

.fivestar-app-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.fivestar-app-field label{
    font-size:13px;
    font-weight:800;
    color:var(--fs-text-soft);
    letter-spacing:.01em;
}

.fivestar-app-input,
.fivestar-app-select,
.fivestar-app-textarea{
    width:100%;
    min-height:46px;
    padding:12px 14px;
    border:1px solid var(--fs-border);
    border-radius:14px;
    background:#fff;
    color:var(--fs-text);
    font-size:14px;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.03);
    transition:var(--fs-transition);
}

.fivestar-app-input:focus,
.fivestar-app-select:focus,
.fivestar-app-textarea:focus{
    border-color:#93c5fd;
    box-shadow:0 0 0 4px rgba(37,99,235,.10);
    outline:none;
}

.fivestar-app-textarea{
    min-height:110px;
    resize:vertical;
}

.fivestar-app-field-help{
    font-size:12px;
    color:var(--fs-text-muted);
    line-height:1.5;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.fivestar-app-primary-btn,
.fivestar-app-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:12px 16px;
    border-radius:14px;
    border:none;
    text-decoration:none;
    cursor:pointer;
    font-weight:800;
    font-size:14px;
    transition:var(--fs-transition);
    box-shadow:var(--fs-shadow-sm);
}

.fivestar-app-primary-btn:hover,
.fivestar-app-btn:hover{
    transform:translateY(-1px);
    box-shadow:var(--fs-shadow-md);
}

.fivestar-app-primary-btn,
.fivestar-app-btn--primary{
    background:linear-gradient(180deg,#111827 0%,#0b1220 100%);
    color:#fff;
    border:1px solid #111827;
}

.fivestar-app-btn{
    background:#fff;
    color:var(--fs-text);
    border:1px solid rgba(212,160,23,.18);
}

.fivestar-app-btn--danger{
    background:linear-gradient(180deg,#ef4444 0%,#dc2626 100%);
    color:#fff;
    border-color:#dc2626;
}

.fivestar-app-btn--muted{
    background:var(--fs-surface-soft);
    color:var(--fs-text);
    border-color:var(--fs-border);
}

/* =========================================================
   TOGGLE / ACCORDION UI
   ========================================================= */

[data-fs-toggle-target],
[data-fs-accordion-target]{
    position:relative;
}

[data-fs-toggle-target].is-open,
[data-fs-accordion-target].is-open{
    background:linear-gradient(180deg,#0f172a 0%,#111827 100%) !important;
    color:#fff !important;
    border-color:#0f172a !important;
}

.fivestar-app-collapsible-panel,
.fivestar-app-history-panel,
.fivestar-app-form-panel{
    margin-top:16px;
}

.fivestar-app-collapsible-panel.is-open,
.fivestar-app-history-panel.is-open,
.fivestar-app-form-panel.is-open{
    animation:fivestarFadeDown .22s ease;
}

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

.fivestar-app-history-wrap{
    margin-top:18px;
    padding-top:4px;
}

.fivestar-app-history-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.fivestar-app-history-title h3{
    margin:0;
    font-size:16px;
    font-weight:900;
    color:var(--fs-text);
}

.fivestar-app-history-count{
    font-size:12px;
    color:var(--fs-text-muted);
    font-weight:800;
}

.fivestar-app-section-divider{
    margin:18px 0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(212,160,23,.26), transparent);
}

/* =========================================================
   TABLES
   ========================================================= */

.fivestar-app-table-wrap,
.fivestar-report-table-wrap{
    overflow-x:auto;
    border:1px solid rgba(212,160,23,.10);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--fs-shadow-sm);
}

.fivestar-app-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width:720px;
}

.fivestar-app-table th,
.fivestar-app-table td{
    padding:14px 16px;
    border-bottom:1px solid #edf2f7;
    vertical-align:top;
    text-align:left;
    font-size:14px;
}

.fivestar-app-table th{
    background:linear-gradient(180deg,#fafaf9 0%,#f8fafc 100%);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--fs-text-muted);
    font-weight:900;
    border-bottom:1px solid var(--fs-border);
}

.fivestar-app-table tbody tr:nth-child(odd) td{
    background:#fffdfa;
}

.fivestar-app-table tbody tr:nth-child(even) td{
    background:#ffffff;
}

.fivestar-app-table tbody tr:hover td{
    background:#fff8e7;
}

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

/* =========================================================
   BADGES
   ========================================================= */

.fivestar-app-badge{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    line-height:1;
}

.fivestar-app-badge--green{background:var(--fs-success-bg);color:#166534;}
.fivestar-app-badge--red{background:var(--fs-danger-bg);color:#991b1b;}
.fivestar-app-badge--orange{background:var(--fs-warning-bg);color:#9a3412;}
.fivestar-app-badge--yellow{background:var(--fs-yellow-bg);color:var(--fs-yellow);}
.fivestar-app-badge--slate{background:#e2e8f0;color:#334155;}

/* =========================================================
   NOTES / ALERTS / EMPTY
   ========================================================= */

.fivestar-app-note{
    padding:14px 16px;
    border-radius:16px;
    background:linear-gradient(180deg,#fffaf0 0%,#fef3c7 100%);
    color:#8a5b00;
    border:1px solid rgba(212,160,23,.22);
    font-size:14px;
    box-shadow:var(--fs-shadow-sm);
}

.fivestar-app-alert{
    padding:14px 16px;
    border-radius:16px;
    background:linear-gradient(180deg,#fff1f2 0%,#ffe4e6 100%);
    color:#b91c1c;
    border:1px solid #fecaca;
    font-size:14px;
    box-shadow:var(--fs-shadow-sm);
}

.fivestar-app-empty-state{
    padding:18px;
    border-radius:16px;
    background:#f8fafc;
    border:1px dashed var(--fs-border-strong);
    color:var(--fs-text-muted);
    font-size:14px;
}

.fivestar-app-placeholder{
    text-align:center;
    padding:40px 20px;
    border:1px dashed var(--fs-border-strong);
    border-radius:18px;
    background:#f8fafc;
}

.fivestar-app-placeholder-icon{
    font-size:38px;
    margin-bottom:14px;
}

.fivestar-app-placeholder h3{
    margin:0 0 10px;
    font-size:22px;
    font-weight:900;
}

.fivestar-app-placeholder p{
    margin:0;
    color:var(--fs-text-muted);
    max-width:620px;
    margin-inline:auto;
}

/* =========================================================
   LISTS - CLEAR SEPARATION BETWEEN ENTRIES
   ========================================================= */

.fivestar-app-list,
.fivestar-owner-list,
.fivestar-mgmt-list,
.fivestar-report-summary-list,
.fivestar-booking-payment-log,
.fivestar-product-stock-log,
.fivestar-sale-item-log,
.fivestar-room-bill-log,
.fivestar-guest-bill-log{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.fivestar-app-list-item,
.fivestar-owner-list-item,
.fivestar-mgmt-list-item,
.fivestar-report-summary-item,
.fivestar-booking-payment-item,
.fivestar-product-stock-log-item,
.fivestar-sale-item-log-item,
.fivestar-room-bill-log-item,
.fivestar-guest-bill-log-item{
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:14px 14px 14px 18px;
    border:1px solid var(--fs-border);
    border-radius:16px;
    box-shadow:var(--fs-shadow-sm);
    transition:var(--fs-transition);
    overflow:hidden;
}

.fivestar-app-list-item::before,
.fivestar-owner-list-item::before,
.fivestar-mgmt-list-item::before,
.fivestar-report-summary-item::before,
.fivestar-booking-payment-item::before,
.fivestar-product-stock-log-item::before,
.fivestar-sale-item-log-item::before,
.fivestar-room-bill-log-item::before,
.fivestar-guest-bill-log-item::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:5px;
    background:#cbd5e1;
}

/* alternating colored separation */
.fivestar-app-list .fivestar-app-list-item:nth-child(4n+1),
.fivestar-owner-list .fivestar-owner-list-item:nth-child(4n+1),
.fivestar-mgmt-list .fivestar-mgmt-list-item:nth-child(4n+1),
.fivestar-report-summary-list .fivestar-report-summary-item:nth-child(4n+1),
.fivestar-booking-payment-log .fivestar-booking-payment-item:nth-child(4n+1),
.fivestar-product-stock-log .fivestar-product-stock-log-item:nth-child(4n+1),
.fivestar-sale-item-log .fivestar-sale-item-log-item:nth-child(4n+1),
.fivestar-room-bill-log .fivestar-room-bill-log-item:nth-child(4n+1),
.fivestar-guest-bill-log .fivestar-guest-bill-log-item:nth-child(4n+1){
    background:linear-gradient(180deg,#fffdf7 0%,#fffbeb 100%);
}
.fivestar-app-list .fivestar-app-list-item:nth-child(4n+1)::before,
.fivestar-owner-list .fivestar-owner-list-item:nth-child(4n+1)::before,
.fivestar-mgmt-list .fivestar-mgmt-list-item:nth-child(4n+1)::before,
.fivestar-report-summary-list .fivestar-report-summary-item:nth-child(4n+1)::before,
.fivestar-booking-payment-log .fivestar-booking-payment-item:nth-child(4n+1)::before,
.fivestar-product-stock-log .fivestar-product-stock-log-item:nth-child(4n+1)::before,
.fivestar-sale-item-log .fivestar-sale-item-log-item:nth-child(4n+1)::before,
.fivestar-room-bill-log .fivestar-room-bill-log-item:nth-child(4n+1)::before,
.fivestar-guest-bill-log .fivestar-guest-bill-log-item:nth-child(4n+1)::before{
    background:#f59e0b;
}

.fivestar-app-list .fivestar-app-list-item:nth-child(4n+2),
.fivestar-owner-list .fivestar-owner-list-item:nth-child(4n+2),
.fivestar-mgmt-list .fivestar-mgmt-list-item:nth-child(4n+2),
.fivestar-report-summary-list .fivestar-report-summary-item:nth-child(4n+2),
.fivestar-booking-payment-log .fivestar-booking-payment-item:nth-child(4n+2),
.fivestar-product-stock-log .fivestar-product-stock-log-item:nth-child(4n+2),
.fivestar-sale-item-log .fivestar-sale-item-log-item:nth-child(4n+2),
.fivestar-room-bill-log .fivestar-room-bill-log-item:nth-child(4n+2),
.fivestar-guest-bill-log .fivestar-guest-bill-log-item:nth-child(4n+2){
    background:linear-gradient(180deg,#f7fbff 0%,#eff6ff 100%);
}
.fivestar-app-list .fivestar-app-list-item:nth-child(4n+2)::before,
.fivestar-owner-list .fivestar-owner-list-item:nth-child(4n+2)::before,
.fivestar-mgmt-list .fivestar-mgmt-list-item:nth-child(4n+2)::before,
.fivestar-report-summary-list .fivestar-report-summary-item:nth-child(4n+2)::before,
.fivestar-booking-payment-log .fivestar-booking-payment-item:nth-child(4n+2)::before,
.fivestar-product-stock-log .fivestar-product-stock-log-item:nth-child(4n+2)::before,
.fivestar-sale-item-log .fivestar-sale-item-log-item:nth-child(4n+2)::before,
.fivestar-room-bill-log .fivestar-room-bill-log-item:nth-child(4n+2)::before,
.fivestar-guest-bill-log .fivestar-guest-bill-log-item:nth-child(4n+2)::before{
    background:#2563eb;
}

.fivestar-app-list .fivestar-app-list-item:nth-child(4n+3),
.fivestar-owner-list .fivestar-owner-list-item:nth-child(4n+3),
.fivestar-mgmt-list .fivestar-mgmt-list-item:nth-child(4n+3),
.fivestar-report-summary-list .fivestar-report-summary-item:nth-child(4n+3),
.fivestar-booking-payment-log .fivestar-booking-payment-item:nth-child(4n+3),
.fivestar-product-stock-log .fivestar-product-stock-log-item:nth-child(4n+3),
.fivestar-sale-item-log .fivestar-sale-item-log-item:nth-child(4n+3),
.fivestar-room-bill-log .fivestar-room-bill-log-item:nth-child(4n+3),
.fivestar-guest-bill-log .fivestar-guest-bill-log-item:nth-child(4n+3){
    background:linear-gradient(180deg,#f7fef9 0%,#ecfdf5 100%);
}
.fivestar-app-list .fivestar-app-list-item:nth-child(4n+3)::before,
.fivestar-owner-list .fivestar-owner-list-item:nth-child(4n+3)::before,
.fivestar-mgmt-list .fivestar-mgmt-list-item:nth-child(4n+3)::before,
.fivestar-report-summary-list .fivestar-report-summary-item:nth-child(4n+3)::before,
.fivestar-booking-payment-log .fivestar-booking-payment-item:nth-child(4n+3)::before,
.fivestar-product-stock-log .fivestar-product-stock-log-item:nth-child(4n+3)::before,
.fivestar-sale-item-log .fivestar-sale-item-log-item:nth-child(4n+3)::before,
.fivestar-room-bill-log .fivestar-room-bill-log-item:nth-child(4n+3)::before,
.fivestar-guest-bill-log .fivestar-guest-bill-log-item:nth-child(4n+3)::before{
    background:#16a34a;
}

.fivestar-app-list .fivestar-app-list-item:nth-child(4n+4),
.fivestar-owner-list .fivestar-owner-list-item:nth-child(4n+4),
.fivestar-mgmt-list .fivestar-mgmt-list-item:nth-child(4n+4),
.fivestar-report-summary-list .fivestar-report-summary-item:nth-child(4n+4),
.fivestar-booking-payment-log .fivestar-booking-payment-item:nth-child(4n+4),
.fivestar-product-stock-log .fivestar-product-stock-log-item:nth-child(4n+4),
.fivestar-sale-item-log .fivestar-sale-item-log-item:nth-child(4n+4),
.fivestar-room-bill-log .fivestar-room-bill-log-item:nth-child(4n+4),
.fivestar-guest-bill-log .fivestar-guest-bill-log-item:nth-child(4n+4){
    background:linear-gradient(180deg,#fff7f7 0%,#fff1f2 100%);
}
.fivestar-app-list .fivestar-app-list-item:nth-child(4n+4)::before,
.fivestar-owner-list .fivestar-owner-list-item:nth-child(4n+4)::before,
.fivestar-mgmt-list .fivestar-mgmt-list-item:nth-child(4n+4)::before,
.fivestar-report-summary-list .fivestar-report-summary-item:nth-child(4n+4)::before,
.fivestar-booking-payment-log .fivestar-booking-payment-item:nth-child(4n+4)::before,
.fivestar-product-stock-log .fivestar-product-stock-log-item:nth-child(4n+4)::before,
.fivestar-sale-item-log .fivestar-sale-item-log-item:nth-child(4n+4)::before,
.fivestar-room-bill-log .fivestar-room-bill-log-item:nth-child(4n+4)::before,
.fivestar-guest-bill-log .fivestar-guest-bill-log-item:nth-child(4n+4)::before{
    background:#dc2626;
}

.fivestar-app-list-item:hover,
.fivestar-owner-list-item:hover,
.fivestar-mgmt-list-item:hover,
.fivestar-report-summary-item:hover,
.fivestar-booking-payment-item:hover,
.fivestar-product-stock-log-item:hover,
.fivestar-sale-item-log-item:hover,
.fivestar-room-bill-log-item:hover,
.fivestar-guest-bill-log-item:hover{
    transform:translateY(-1px);
    box-shadow:var(--fs-shadow-md);
    border-color:var(--fs-border-strong);
}

.fivestar-app-list-title,
.fivestar-owner-list-title,
.fivestar-mgmt-list-title{
    font-size:14px;
    font-weight:800;
    color:var(--fs-text);
}

.fivestar-app-list-meta,
.fivestar-owner-list-meta,
.fivestar-mgmt-list-meta{
    margin-top:4px;
    font-size:12px;
    color:var(--fs-text-muted);
}

.fivestar-app-list-value,
.fivestar-owner-list-value,
.fivestar-mgmt-list-value{
    font-size:16px;
    font-weight:900;
    color:var(--fs-text);
    text-align:right;
    white-space:nowrap;
}

.fivestar-app-list-time{
    font-size:12px;
    color:var(--fs-text-muted);
    white-space:nowrap;
}

/* =========================================================
   MODULE-SPECIFIC ENHANCEMENT BOXES
   ========================================================= */

.fivestar-booking-meta-box,
.fivestar-reservation-meta-box,
.fivestar-product-meta-box,
.fivestar-sale-card-box,
.fivestar-room-bill-box,
.fivestar-guest-bill-box,
.fivestar-room-card-notes,
.fivestar-audit-box,
.fivestar-owner-mini-card,
.fivestar-mgmt-mini-card,
.fivestar-settings-mini-card,
.fivestar-report-summary-item{
    border:1px solid var(--fs-border);
    border-radius:16px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.fivestar-booking-meta-label,
.fivestar-reservation-meta-label,
.fivestar-product-meta-label,
.fivestar-sale-card-box-label,
.fivestar-room-bill-box-label,
.fivestar-guest-bill-box-label,
.fivestar-audit-box-label,
.fivestar-owner-mini-label,
.fivestar-mgmt-mini-label,
.fivestar-settings-mini-label{
    color:var(--fs-text-muted);
    font-size:12px;
    margin-bottom:6px;
    font-weight:700;
}

.fivestar-booking-meta-value,
.fivestar-reservation-meta-value,
.fivestar-product-meta-value,
.fivestar-sale-card-box-value,
.fivestar-room-bill-box-value,
.fivestar-guest-bill-box-value,
.fivestar-audit-box-value,
.fivestar-owner-mini-value,
.fivestar-mgmt-mini-value,
.fivestar-settings-mini-value{
    color:var(--fs-text);
    font-weight:900;
}

/* =========================================================
   ROOM STATUS BOARD / ROOMS PAGE
   ========================================================= */

.fivestar-app-shell .fivestar-room-layout{
    display:grid !important;
    grid-template-columns:minmax(340px,430px) 1fr !important;
    gap:22px !important;
    align-items:start !important;
}

.fivestar-app-shell .fivestar-room-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;
    gap:18px !important;
}

.fivestar-app-shell .fivestar-room-card{
    padding:18px !important;
    border-radius:20px !important;
    box-shadow:var(--fs-shadow-sm) !important;
}

.fivestar-app-shell .fivestar-room-card-head{
    display:flex !important;
    justify-content:space-between !important;
    align-items:flex-start !important;
    gap:14px !important;
    margin-bottom:14px !important;
}

.fivestar-app-shell .fivestar-room-card-title{
    font-size:24px !important;
    font-weight:900 !important;
    margin:0 !important;
    color:#0f172a !important;
    letter-spacing:-.03em;
}

.fivestar-app-shell .fivestar-room-card-subtitle{
    font-size:13px !important;
    color:#64748b !important;
    margin-top:4px !important;
    font-weight:700;
}

.fivestar-app-shell .fivestar-room-card-price{
    font-size:20px !important;
    font-weight:900 !important;
    color:#8a5b00 !important;
    margin-top:10px !important;
}

.fivestar-app-shell .fivestar-room-card-notes{
    margin-top:12px !important;
    padding:12px 14px !important;
    border-radius:14px !important;
    background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%) !important;
    color:#475569 !important;
    border:1px solid #e2e8f0 !important;
    font-size:13px !important;
    line-height:1.6;
}

.fivestar-app-shell .fivestar-room-card-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin-top:16px !important;
}

.fivestar-app-inline-stats{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:12px !important;
}

.fivestar-app-inline-stat{
    min-width:120px;
    padding:14px 16px !important;
    border-radius:16px !important;
    border:1px solid rgba(212,160,23,.12) !important;
    background:linear-gradient(180deg,#fff 0%,#fffdfa 100%) !important;
    box-shadow:var(--fs-shadow-sm) !important;
}

.fivestar-app-inline-stat-label{
    font-size:11px !important;
    text-transform:uppercase;
    letter-spacing:.08em !important;
    color:#6b7280 !important;
    font-weight:900 !important;
    margin-bottom:8px !important;
}

.fivestar-app-inline-stat-value{
    font-size:22px !important;
    font-weight:900 !important;
    color:#0f172a !important;
}

/* =========================================================
   AUTH SCREEN
   ========================================================= */

.fivestar-app-standalone{
    min-height:70vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:var(--fs-bg);
}

.fivestar-app-auth-card{
    width:min(100%,420px);
    background:#fff;
    border:1px solid var(--fs-border);
    border-radius:24px;
    padding:32px 24px;
    text-align:center;
    box-shadow:var(--fs-shadow-lg);
}

.fivestar-app-auth-mark{
    width:64px;
    height:64px;
    border-radius:18px;
    background:linear-gradient(180deg,#fbbf24 0%,#f59e0b 100%);
    color:#111827;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:24px;
    margin:0 auto 18px;
    box-shadow:0 10px 24px rgba(245,158,11,.26);
}

.fivestar-app-auth-card h1{
    margin:0 0 12px;
    font-size:28px;
    font-weight:900;
}

.fivestar-app-auth-card p{
    margin:0 0 20px;
    color:var(--fs-text-muted);
}

/* =========================================================
   MOBILE
   ========================================================= */

.fivestar-app-overlay{
    display:none;
}

@media (max-width: 1180px){
    .fivestar-app-grid--dashboard{
        grid-template-columns:1fr;
    }
}

@media (max-width: 980px){
    .fivestar-app-menu-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    .fivestar-app-sidebar{
        position:fixed;
        left:0;
        top:0;
        bottom:0;
        transform:translateX(-100%);
        transition:transform .25s ease;
        width:280px;
        height:100vh;
    }

    .fivestar-app-sidebar.is-open{
        transform:translateX(0);
    }

    .fivestar-app-overlay{
        position:fixed;
        inset:0;
        background:rgba(15,23,42,.45);
        z-index:25;
    }

    .fivestar-app-overlay.is-open{
        display:block;
    }

    .fivestar-app-header{
        padding:18px 16px;
    }

    .fivestar-app-content{
        padding:16px;
    }

    .fivestar-app-page-title{
        font-size:22px;
    }

    .fivestar-app-shell .fivestar-room-layout{
        grid-template-columns:1fr !important;
    }

    .fivestar-app-shell .fivestar-room-grid{
        grid-template-columns:1fr !important;
    }
}

@media (max-width: 640px){
    .fivestar-app-cards{
        grid-template-columns:1fr;
    }

    .fivestar-app-role-pill{
        display:none;
    }

    .fivestar-app-quick-links{
        grid-template-columns:1fr 1fr;
    }

    .fivestar-app-form-grid{
        grid-template-columns:1fr;
    }

    .fivestar-app-card{
        padding:16px;
    }

    .fivestar-app-panel{
        padding:16px;
    }

    .fivestar-app-card-value{
        font-size:26px;
    }

    .fivestar-app-page-title{
        font-size:20px;
    }
}




/* =========================================================
   REPORTS / TABLE OVERFLOW FIX
   ========================================================= */

/* let report panels show scrollbars properly */
.fivestar-reports-layout .fivestar-app-panel,
.fivestar-report-table-wrap,
.fivestar-app-table-wrap{
    overflow: visible !important;
}

/* stack report filter column earlier so report content gets more width */
@media (max-width: 1280px){
    .fivestar-reports-layout{
        grid-template-columns: 1fr !important;
    }
}

/* stronger horizontal scroll support for report tables */
.fivestar-report-table-wrap,
.fivestar-app-table-wrap{
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
    padding-bottom: 10px;
    margin-bottom: 2px;
    border-radius: 18px;
}

/* make sure wide report tables can scroll instead of being cut off */
.fivestar-report-table-wrap .fivestar-app-table{
    min-width: 1100px;
}

/* reservation report specifically tends to be wider */
.fivestar-report-table-wrap .fivestar-app-table th,
.fivestar-report-table-wrap .fivestar-app-table td{
    white-space: nowrap;
}

/* styled scrollbar for desktop browsers */
.fivestar-report-table-wrap::-webkit-scrollbar,
.fivestar-app-table-wrap::-webkit-scrollbar{
    height: 12px;
}

.fivestar-report-table-wrap::-webkit-scrollbar-track,
.fivestar-app-table-wrap::-webkit-scrollbar-track{
    background: #e2e8f0;
    border-radius: 999px;
}

.fivestar-report-table-wrap::-webkit-scrollbar-thumb,
.fivestar-app-table-wrap::-webkit-scrollbar-thumb{
    background: linear-gradient(90deg, #c99700 0%, #d4a017 100%);
    border-radius: 999px;
}

.fivestar-report-table-wrap::-webkit-scrollbar-thumb:hover,
.fivestar-app-table-wrap::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(90deg, #b98900 0%, #c89212 100%);
}






/* =========================================================
   VISUAL DEPTH / SECTION CONTRAST TUNING
   Make cards and section containers slightly darker than
   the main app background for easier visual mapping
   ========================================================= */

:root{
    --fs-bg: #f4f6fa;
    --fs-surface: #eef2f7;
    --fs-surface-soft: #e9eef5;
    --fs-surface-alt: #e4ebf3;
}

/* main page background stays the lightest */
.fivestar-app-shell{
    background:
        radial-gradient(circle at top left, rgba(212,160,23,.07), transparent 18%),
        radial-gradient(circle at top right, rgba(37,99,235,.04), transparent 20%),
        linear-gradient(180deg, #f7f9fc 0%, #f1f5fa 100%) !important;
}

/* all panels / cards slightly darker than page background */
.fivestar-app-panel,
.fivestar-app-card,
.fivestar-room-card,
.fivestar-booking-card,
.fivestar-reservation-card,
.fivestar-product-card,
.fivestar-sale-card,
.fivestar-room-bill-card,
.fivestar-audit-card,
.fivestar-guest-bill-card{
    background:  linear-gradient(180deg, #f7f9fc 0%, #f1f5fa 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
}

/* inner sub-boxes inside cards a bit lighter so hierarchy is clear */
.fivestar-booking-meta-box,
.fivestar-reservation-meta-box,
.fivestar-product-meta-box,
.fivestar-sale-card-box,
.fivestar-room-bill-box,
.fivestar-guest-bill-box,
.fivestar-room-card-notes,
.fivestar-audit-box,
.fivestar-owner-mini-card,
.fivestar-mgmt-mini-card,
.fivestar-settings-mini-card,
.fivestar-report-summary-item,
.fivestar-app-inline-stat{
    background: linear-gradient(180deg, #f6f8fc 0%, #eff4fa 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

/* list records should still stand out clearly */
.fivestar-app-list-item,
.fivestar-owner-list-item,
.fivestar-mgmt-list-item,
.fivestar-booking-payment-item,
.fivestar-product-stock-log-item,
.fivestar-sale-item-log-item,
.fivestar-room-bill-log-item,
.fivestar-guest-bill-log-item{
    border-color: rgba(148, 163, 184, 0.20) !important;
}

/* filter/forms panels can also feel more grounded */
.fivestar-app-input,
.fivestar-app-select,
.fivestar-app-textarea{
    background: #fdfefe !important;
}

/* report/table wrappers slightly darker for separation */
.fivestar-app-table-wrap,
.fivestar-report-table-wrap{
    background: linear-gradient(180deg, #edf2f8 0%, #e8eef6 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
}

/* keep table body readable on top of darker wrappers */
.fivestar-app-table td,
.fivestar-report-table td{
    background: #fdfefe !important;
}

.fivestar-app-table tbody tr:nth-child(odd) td,
.fivestar-report-table tbody tr:nth-child(odd) td{
    background: #f8fbff !important;
}

.fivestar-app-table tbody tr:hover td,
.fivestar-report-table tbody tr:hover td{
    background: #eef5ff !important;
}