/* Sriggle PMS application shell + shared component styles. Uses design-tokens.css. */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--pms-font-sans); color: var(--pms-text); background: var(--pms-bg); }
a { color: inherit; text-decoration: none; }
h1 { font-size: var(--pms-font-size-xl); margin: 0; }
nav{
    height:100vh;
}

/* Layout grid */
.pms-app { display: grid; grid-template-columns: 248px 1fr; grid-template-rows: 56px 1fr; min-height: 100vh; }
.pms-app:has(.nav-cb:checked) { grid-template-columns: 64px 1fr; }
.pms-app:has(.nav-cb:checked) .pms-nav-link .txt,
.pms-app:has(.nav-cb:checked) .pms-nav-group { display: none; }
.pms-topbar { grid-column: 1 / 3; display: flex; align-items: center; gap: var(--pms-space-4);
    background: var(--pms-surface); border-bottom: 1px solid var(--pms-border); padding: 0 var(--pms-space-4); position: sticky; top: 0; z-index: 20; }
.pms-side { grid-row: 2; background: var(--pms-secondary); color: #cdd8e6; overflow-y: auto; }
.pms-content { grid-row: 2; padding: var(--pms-space-6); overflow-x: hidden; }

/* Top bar */
.pms-burger { background: none; border: 0; font-size: 1.25rem; cursor: pointer; color: var(--pms-text-muted); padding: var(--pms-space-2); }
.pms-topbrand { display: flex; align-items: center; gap: var(--pms-space-2); font-weight: 700; }
.pms-topbrand .logo { display:grid; place-items:center; width:32px; height:32px; border-radius: var(--pms-radius-sm); background: var(--pms-primary); color:#fff; }
.pms-search { flex: 1; max-width: 420px; }
.pms-search input { width:100%; padding: 0.45rem 0.75rem; border:1px solid var(--pms-border); border-radius: 999px; font-size: var(--pms-font-size-sm); }
.pms-topbar .spacer { flex: 1; }
.pms-prop select { padding: 0.4rem 0.6rem; border:1px solid var(--pms-border); border-radius: var(--pms-radius-sm); font-size: var(--pms-font-size-sm); background:#fff; }
.pms-iconbtn { position: relative; background:none; border:0; cursor:pointer; font-size:1.1rem; color: var(--pms-text-muted); padding: var(--pms-space-2); }
.pms-badge-count { position:absolute; top:2px; right:2px; background: var(--pms-error); color:#fff; border-radius:999px; font-size:0.6rem; padding:0 4px; }
.pms-user { display:flex; align-items:center; gap: var(--pms-space-2); font-size: var(--pms-font-size-sm); }
.pms-avatar { width:30px; height:30px; border-radius:50%; background: var(--pms-primary-050); color: var(--pms-primary-600); display:grid; place-items:center; font-weight:700; }
.pms-logout { background:none; border:0; color: var(--pms-text-muted); cursor:pointer; font-size: var(--pms-font-size-sm); }

/* Nav */
.pms-nav-group { padding: var(--pms-space-3) var(--pms-space-4) var(--pms-space-1); font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em; color: #7f93ab; }
.pms-nav-link { display:flex; align-items:center; gap: var(--pms-space-3); padding: 0.55rem var(--pms-space-4); color:#cdd8e6; font-size: var(--pms-font-size-sm); border-left: 3px solid transparent; }
.pms-nav-link:hover { background: rgba(255,255,255,.06); color:#fff; }
.pms-nav-link.active { background: rgba(22,104,227,.18); color:#fff; border-left-color: var(--pms-primary); }
.pms-nav-link .ico { width:18px; text-align:center; }
.nav-collapsed .pms-nav-link .txt, .nav-collapsed .pms-nav-group { display:none; }

/* Page header + breadcrumb */
.pms-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--pms-space-4); margin-bottom: var(--pms-space-6); flex-wrap: wrap; }
.pms-breadcrumb { font-size: var(--pms-font-size-sm); color: var(--pms-text-muted); margin-bottom: var(--pms-space-1); }
.pms-breadcrumb span + span::before { content: "›"; margin: 0 6px; }

/* Cards / stat tiles */
.pms-stat-row { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--pms-space-4); }
.pms-stat { background: var(--pms-surface); border:1px solid var(--pms-border); border-radius: var(--pms-radius-md); padding: var(--pms-space-4); box-shadow: var(--pms-elevation-1); }
.pms-stat .val { font-size: 1.6rem; font-weight: 700; }
.pms-stat .lbl { font-size: var(--pms-font-size-sm); color: var(--pms-text-muted); }
.pms-panel { background: var(--pms-surface); border:1px solid var(--pms-border); border-radius: var(--pms-radius-md); box-shadow: var(--pms-elevation-1); padding: var(--pms-space-6); margin-top: var(--pms-space-6); }
.pms-panel h2 { font-size: var(--pms-font-size-lg); margin: 0 0 var(--pms-space-4); }

/* Tables */
.pms-table { width:100%; border-collapse: collapse; font-size: var(--pms-font-size-sm); }
.pms-table th, .pms-table td { text-align:left; padding: 0.6rem 0.75rem; border-bottom:1px solid var(--pms-border); }
.pms-table th { color: var(--pms-text-muted); font-weight:600; }
.pms-table tbody tr:hover { background: var(--pms-primary-050); }
.pms-table-wrap { overflow-x:auto; }

/* Buttons */
.btn { padding: 0.5rem 0.9rem; border-radius: var(--pms-radius-sm); border:1px solid var(--pms-border); background:#fff; cursor:pointer; font-size: var(--pms-font-size-sm); min-height: 38px; }
.btn.primary { background: var(--pms-primary); color:#fff; border-color: var(--pms-primary); }
.btn.primary:hover { background: var(--pms-primary-600); }
.btn:disabled { opacity:.6; cursor:not-allowed; }

/* Status pill */
.pms-pill { display:inline-flex; align-items:center; gap:6px; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight:600; }
.pms-pill .dot { width:8px; height:8px; border-radius:50%; }

/* Grid cards (room / table) */
.pms-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--pms-space-3); }
.pms-tile { border-radius: var(--pms-radius-md); border:1px solid var(--pms-border); padding: var(--pms-space-3); background:#fff; box-shadow: var(--pms-elevation-1); min-height: 92px; }
.pms-tile .num { font-weight:700; font-size: var(--pms-font-size-lg); }
.pms-tile .meta { font-size: 0.75rem; color: var(--pms-text-muted); }

.pms-muted { color: var(--pms-text-muted); }
.pms-empty { text-align:center; color: var(--pms-text-muted); padding: var(--pms-space-8); }

/* Responsive: collapse the sidebar into an overlay on small screens */
@media (max-width: 1023px) {
    .pms-app, .pms-app:has(.nav-cb:checked) { grid-template-columns: 1fr; }
    .pms-side { position: fixed; top: 56px; bottom: 0; left: 0; width: 248px; z-index: 30; transform: translateX(-100%); transition: transform .2s ease; }
    .pms-app:has(.nav-cb:checked) .pms-side { transform: translateX(0); }
    .pms-app:has(.nav-cb:checked) .pms-nav-link .txt,
    .pms-app:has(.nav-cb:checked) .pms-nav-group { display: revert; }
    .pms-content { grid-row: 2; }
}

/* ============================================================
   Reference-matching component styles (added for UI overhaul)
   ============================================================ */

/* KPI cards with icon chips (dashboard) */
.kpi-row { display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: var(--pms-space-4); }
.kpi { display:flex; align-items:center; gap: var(--pms-space-3); background: var(--pms-surface); border:1px solid var(--pms-border);
    border-radius: var(--pms-radius-md); padding: var(--pms-space-4); box-shadow: var(--pms-elevation-1); }
.kpi .ic { width:44px; height:44px; border-radius: 12px; display:grid; place-items:center; font-size:1.2rem; flex:0 0 auto; }
.kpi .kv { font-size: 1.6rem; font-weight: 700; line-height:1; }
.kpi .kl { font-size: var(--pms-font-size-sm); color: var(--pms-text-muted); margin-top:4px; }
.kpi.blue .ic { background:#e8f1fe; color:#2f80ed; } .kpi.green .ic { background:#e6f6ee; color:#1f9d55; }
.kpi.amber .ic { background:#fcf3d6; color:#e0a800; } .kpi.red .ic { background:#fdecea; color:#d13438; }
.kpi.grey .ic { background:#eef0f2; color:#6b7280; } .kpi.primary .ic { background:var(--pms-primary-050); color:var(--pms-primary); }

/* Layout helpers */
.grid-2 { display:grid; grid-template-columns: 2fr 1fr; gap: var(--pms-space-4); align-items:start; }
.grid-3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--pms-space-4); align-items:start; }
.grid-2c { display:grid; grid-template-columns: 1fr 1fr; gap: var(--pms-space-4); align-items:start; }
@media (max-width: 1023px){ .grid-2, .grid-3, .grid-2c { grid-template-columns: 1fr; } }
.mt0 { margin-top:0 !important; }

/* Filter toolbar */
.pms-toolbar { display:flex; flex-wrap:wrap; gap: var(--pms-space-3); align-items:flex-end; margin-bottom: var(--pms-space-4); }
.pms-toolbar .fld { display:flex; flex-direction:column; gap:4px; }
.pms-toolbar .fld > span { font-size: 0.72rem; color: var(--pms-text-muted); text-transform:uppercase; letter-spacing:.04em; }
.pms-toolbar input, .pms-toolbar select { padding: 0.45rem 0.65rem; border:1px solid var(--pms-border); border-radius: var(--pms-radius-sm); font-size: var(--pms-font-size-sm); background:#fff; min-height:38px; }
.pms-toolbar .grow { flex:1; min-width:180px; }
.pms-toolbar .spacer { flex:1; }

/* Action icon buttons in tables */
.icon-btn { background:none; border:0; cursor:pointer; padding:4px 6px; border-radius:6px; color: var(--pms-text-muted); font-size:1rem; }
.icon-btn:hover { background: var(--pms-primary-050); color: var(--pms-primary); }
.icon-btn.danger:hover { background:#fdecea; color: var(--pms-error); }

/* Pagination */
.pms-pager { display:flex; align-items:center; justify-content:space-between; margin-top: var(--pms-space-4); font-size: var(--pms-font-size-sm); color: var(--pms-text-muted); }
.pms-pager .pages { display:flex; gap:4px; }
.pms-pager button { min-width:34px; height:34px; border:1px solid var(--pms-border); background:#fff; border-radius:8px; cursor:pointer; }
.pms-pager button.active { background: var(--pms-primary); color:#fff; border-color: var(--pms-primary); }
.pms-pager button:disabled { opacity:.5; cursor:not-allowed; }

/* Donut chart */
.donut-wrap { display:flex; align-items:center; gap: var(--pms-space-4); flex-wrap:wrap; }
.donut { position:relative; width:150px; height:150px; flex:0 0 auto; }
.donut .center { position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.donut .center .n { font-size:1.6rem; font-weight:700; } .donut .center .t { font-size:0.7rem; color:var(--pms-text-muted); }
.donut-legend { display:flex; flex-direction:column; gap:6px; font-size: var(--pms-font-size-sm); }
.donut-legend .li { display:flex; align-items:center; gap:8px; }
.donut-legend .sw { width:10px; height:10px; border-radius:3px; }

/* Summary rows (today's summary, price summary, folio totals) */
.sum-list > div { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--pms-border); font-size: var(--pms-font-size-sm); }
.sum-list > div:last-child { border-bottom:0; }
.sum-list .tot { font-weight:700; font-size: var(--pms-font-size-md); border-top:2px solid var(--pms-border); }

/* Definition list for detail panels */
.def { display:grid; grid-template-columns: 130px 1fr; gap:6px 12px; font-size: var(--pms-font-size-sm); }
.def dt { color: var(--pms-text-muted); } .def dd { margin:0; font-weight:500; }

/* Room / assign cards */
.assign-list { display:flex; flex-direction:column; gap:6px; max-height:320px; overflow-y:auto; }
.assign-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--pms-border); border-radius: var(--pms-radius-sm); cursor:pointer; }
.assign-item:hover { border-color: var(--pms-primary); background: var(--pms-primary-050); }
.assign-item.sel { border-color: var(--pms-primary); background: var(--pms-primary-050); }

/* Room status grid cards with guest */
.room-card { border-radius: var(--pms-radius-md); border:1px solid var(--pms-border); overflow:hidden; background:#fff; box-shadow: var(--pms-elevation-1); }
.room-card .rc-top { padding: 10px 12px; }
.room-card .rc-num { font-weight:700; font-size: 1.05rem; }
.room-card .rc-meta { font-size: 0.72rem; color: var(--pms-text-muted); }
.room-card .rc-guest { font-size: 0.78rem; margin-top:4px; }
.room-card .rc-bar { height:4px; }

/* Section subheading */
.floor-head { font-weight:600; margin: var(--pms-space-4) 0 var(--pms-space-2); color: var(--pms-secondary); }
.updated { font-size: var(--pms-font-size-sm); color: var(--pms-text-muted); }

/* Forms */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap: var(--pms-space-4); }
@media (max-width:640px){ .form-grid { grid-template-columns:1fr; } }
.form-grid.one { grid-template-columns:1fr; }
.fg { display:flex; flex-direction:column; gap:4px; margin-bottom: var(--pms-space-3); }
.fg label { font-size: var(--pms-font-size-sm); color: var(--pms-text-muted); }
.fg input, .fg select, .fg textarea { padding:0.55rem 0.7rem; border:1px solid var(--pms-border); border-radius: var(--pms-radius-sm); font-size: var(--pms-font-size-md); }

/* Legend bar */
.legend { display:flex; flex-wrap:wrap; gap: var(--pms-space-4); margin-top: var(--pms-space-4); font-size: var(--pms-font-size-sm); }
.legend .li { display:flex; align-items:center; gap:6px; } .legend .sw { width:12px; height:12px; border-radius:3px; }

.pms-login-shell {
    min-height: 100vh;
    /*display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;*/
    background: #f5f5f5;
    padding:0px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
}

.login-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

    .login-brand img {
        max-width: 350px;
        width: 100%;
        height: auto;
    }
@media (max-width: 768px) {
    .hero-mark{
        width:100% !important;
    }
    .hero-logo {
        height: 200px !important;
    }
    .login-card {
        max-width: 100%;
        padding: 1.5rem;
        max-width: 480px;
    }

    .login-brand img {
        max-width: 350px;
    }
}

@media (max-width: 480px) {
    .pms-login-shell {
        padding: 0.75rem;
    }

    .login-card {
        padding: 1rem;
        border-radius: 8px;
    }

    .login-brand img {
        max-width: 350px;
    }
}

.pms-topbrand img {
    max-width: 400px;
    height: auto;
    width: 100%;
}