/* Turbo Housekeeping Manager — Frontend UI
   Copyright (c) 2024-2026 Turbo Travel Ltd. All Rights Reserved. */

*,:before,:after{box-sizing:border-box}
:root{--bg:#0F1419;--bg2:#1A2029;--card:#1E2630;--hover:#252F3A;--gold:#D4A853;--green:#3DC97E;--red:#E85454;--orange:#F0943A;--blue:#4A9FD9;--purple:#9B72CF;--text:#E8ECF1;--text2:#8A95A5;--dim:#5A6577;--border:#2A3441;--radius:10px}

/* App Shell */
.thk-app{display:block;min-height:100vh;background:var(--bg);color:var(--text);font-family:'Segoe UI','Heebo',system-ui,sans-serif;direction:rtl;font-size:14px;width:100%;overflow-x:hidden}

/* Sidebar — desktop: fixed right */
.thk-sidebar{width:240px;background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;position:fixed;right:0;top:0;bottom:0;z-index:10001}
.thk-sidebar-brand{padding:20px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.thk-logo{width:36px;height:36px;background:linear-gradient(135deg,var(--gold),#B8923F);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--bg);flex-shrink:0}
.thk-brand-name{font-size:14px;font-weight:700}
.thk-brand-sub{font-size:10px;color:var(--dim)}

.thk-nav{flex:1;padding:12px 8px}
.thk-nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--text2);text-decoration:none;font-size:13px;font-weight:500;transition:all 0.15s;margin-bottom:2px}
.thk-nav-item:hover{background:var(--hover);color:var(--text)}
.thk-nav-item.active{background:rgba(212,168,83,0.12);color:var(--gold)}
.thk-nav-icon{font-size:16px;width:24px;text-align:center}
.thk-sidebar-footer{padding:12px 8px;border-top:1px solid var(--border)}
.thk-logout{color:var(--red)!important}
.thk-copyright{text-align:center;font-size:10px;color:var(--dim);padding:8px 0 4px}

/* Mobile header — hidden on desktop */
.thk-mobile-header{display:none;position:sticky;top:0;z-index:9999;background:var(--bg2);border-bottom:1px solid var(--border);padding:12px 16px;align-items:center;gap:12px}
.thk-hamburger{background:none;border:1px solid var(--border);color:var(--text);font-size:20px;padding:4px 10px;border-radius:6px;cursor:pointer}
.thk-brand{font-weight:700;font-size:14px;color:var(--gold);flex:1}
.thk-user-badge{font-size:11px;background:var(--card);padding:4px 10px;border-radius:6px;color:var(--text2)}
.thk-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:10000}

/* Main — desktop: offset for sidebar */
.thk-main{margin-right:240px;min-height:100vh;width:calc(100% - 240px)}
.thk-page{padding:24px;max-width:1400px}
.thk-page h1{font-size:22px;font-weight:700;margin:0 0 20px}

/* Stats */
.thk-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:20px}
.thk-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;border-right:3px solid var(--border)}
.s-dirty{border-right-color:var(--red)} .s-dirty .thk-stat-n{color:var(--red)}
.s-cleaning{border-right-color:var(--orange)} .s-cleaning .thk-stat-n{color:var(--orange)}
.s-clean{border-right-color:var(--green)} .s-clean .thk-stat-n{color:var(--green)}
.s-maint{border-right-color:var(--purple)} .s-maint .thk-stat-n{color:var(--purple)}
.s-occupied{border-right-color:var(--blue)} .s-occupied .thk-stat-n{color:var(--blue)}
.s-checkout{border-right-color:var(--red)} .s-checkout .thk-stat-n{color:var(--red)}
.s-checkin{border-right-color:var(--green)} .s-checkin .thk-stat-n{color:var(--green)}
.s-total{border-right-color:var(--gold)} .s-total .thk-stat-n{color:var(--gold)}
.thk-stat-n{font-size:26px;font-weight:800;line-height:1}
.thk-stat-l{font-size:11px;color:var(--text2);margin-top:2px}

/* Assignment Bar */
.thk-assign-bar{background:rgba(212,168,83,0.08);border:1px solid rgba(212,168,83,0.3);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}

/* Toolbar */
.thk-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.thk-filters{display:flex;gap:4px;flex-wrap:wrap}
.thk-filter{padding:5px 12px;border:1px solid var(--border);background:var(--card);border-radius:6px;color:var(--text2);font-size:12px;cursor:pointer;font-family:inherit}
.thk-filter:hover{border-color:var(--gold);color:var(--text)}
.thk-filter.active{background:var(--gold);color:var(--bg);border-color:var(--gold)}

/* Buttons */
.thk-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:6px;font-size:12px;font-family:inherit;cursor:pointer;text-decoration:none;transition:all 0.15s}
.thk-btn:hover{background:var(--hover);border-color:var(--gold);color:var(--gold)}
.thk-btn-gold{background:linear-gradient(135deg,var(--gold),#B8923F);color:var(--bg);border-color:var(--gold);font-weight:600}
.thk-btn-gold:hover{opacity:0.9;color:var(--bg)}
.thk-btn-lg{padding:12px 24px;font-size:14px}
.thk-btn-sm{padding:4px 8px;font-size:11px}

/* Select */
.thk-select{padding:4px 8px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:6px;font-size:12px;font-family:inherit}
.thk-select-sm{padding:2px 6px;font-size:11px}

/* Floor / Room Grid */
.thk-floor{margin-bottom:20px}
.thk-floor-label{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.thk-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}

.thk-room{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;cursor:pointer;transition:all 0.15s}
.thk-room:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.3)}
.thk-room.selected{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.thk-room.has-co{border-right:3px solid var(--red)}
.thk-room-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.thk-room-num{font-size:18px;font-weight:800}
.thk-room-type{font-size:9px;background:var(--bg);padding:2px 6px;border-radius:3px;color:var(--dim);font-weight:600}

.thk-room-st{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;margin-bottom:3px}
.st-dot{width:5px;height:5px;border-radius:50%}
.st-dirty{background:rgba(232,84,84,0.12);color:var(--red)} .st-dirty .st-dot{background:var(--red)}
.st-cleaning{background:rgba(240,148,58,0.12);color:var(--orange)} .st-cleaning .st-dot{background:var(--orange);animation:pulse 1.5s infinite}
.st-clean{background:rgba(61,201,126,0.12);color:var(--green)} .st-clean .st-dot{background:var(--green)}
.st-inspected{background:rgba(74,159,217,0.12);color:var(--blue)} .st-inspected .st-dot{background:var(--blue)}
.st-maintenance{background:rgba(155,114,207,0.12);color:var(--purple)} .st-maintenance .st-dot{background:var(--purple)}
.st-dnd{background:rgba(100,100,100,0.12);color:var(--dim)}
.st-guest-in-house{background:rgba(91,106,191,0.15);color:#7B8ED9} .st-guest-in-house .st-dot{background:#5b6abf}
.r-guest-in-house{border-right:3px solid #5b6abf}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}

.thk-room-bk{font-size:9px;color:var(--dim);font-weight:500}
.thk-room-guest{font-size:11px;margin:2px 0}
.thk-room-meta{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin-top:4px}
.thk-room-clnr{display:flex;align-items:center;gap:3px}
.thk-room-times{display:flex;gap:6px;font-size:9px;color:var(--dim);margin-top:3px}
.thk-dim{color:var(--dim)}

.thk-mini-av{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:8px;font-weight:700;color:#fff;flex-shrink:0}
.thk-av-md{width:28px;height:28px;font-size:12px}

/* Panels */
.thk-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.thk-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.thk-panel h3{padding:12px 16px;margin:0;font-size:14px;border-bottom:1px solid var(--border)}
.thk-clnr-row,.thk-maint-row{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid rgba(255,255,255,0.03)}
.thk-clnr-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.thk-cs-active{background:var(--green);box-shadow:0 0 4px rgba(61,201,126,0.5)}
.thk-cs-break{background:var(--orange)}
.thk-cs-off{background:var(--dim)}
.thk-clnr-info{flex:1;display:flex;flex-direction:column;gap:1px}
.thk-clnr-info span{font-size:10px;color:var(--text2)}
.thk-maint-pri{width:3px;min-height:24px;border-radius:2px;flex-shrink:0}
.pri-high{background:var(--red)} .pri-medium{background:var(--orange)} .pri-low{background:var(--blue)}
.thk-maint-info{flex:1;display:flex;flex-direction:column;gap:1px}
.thk-maint-info span{font-size:10px;color:var(--text2)}
.thk-empty-panel{text-align:center;padding:20px;color:var(--dim)}

/* Cards */
.thk-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.thk-card h2{margin:0 0 12px;font-size:16px}
.thk-card-gold{background:rgba(212,168,83,0.06);border-color:rgba(212,168,83,0.3)}

/* Forms */
.thk-form-group{margin-bottom:12px}
.thk-form-group label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:4px}
.thk-form-group input,.thk-form-group select,.thk-form-group textarea{width:100%;padding:8px 12px;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:6px;font-family:inherit;font-size:13px}
.thk-form-group textarea{resize:vertical}
.thk-form-group input:focus,.thk-form-group select:focus,.thk-form-group textarea:focus{border-color:var(--gold);outline:none}
.thk-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.thk-file-input{padding:12px!important;border-style:dashed!important;cursor:pointer}

/* Table */
.thk-table-wrap{overflow-x:auto}
.thk-table{width:100%;border-collapse:collapse;font-size:13px}
.thk-table th{background:var(--bg2);padding:10px 12px;text-align:right;font-size:11px;color:var(--text2);font-weight:600;border-bottom:1px solid var(--border)}
.thk-table td{padding:10px 12px;border-bottom:1px solid var(--border)}
.thk-table tr:hover td{background:var(--hover)}

/* Notices */
.thk-notice{padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;font-size:13px}
.thk-notice-success{background:rgba(61,201,126,0.1);border:1px solid rgba(61,201,126,0.3);color:var(--green)}
.thk-notice-error{background:rgba(232,84,84,0.1);border:1px solid rgba(232,84,84,0.3);color:var(--red)}

/* Empty State */
.thk-empty{text-align:center;padding:60px 20px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.thk-empty h2{margin-bottom:8px}
.thk-empty p{color:var(--dim);margin-bottom:20px}

/* Modal */
.thk-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.thk-modal{background:var(--bg2);border:1px solid var(--border);border-radius:12px;width:480px;max-width:95vw;max-height:85vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,0.5)}
.thk-modal-hd{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border)}
.thk-modal-hd h3{margin:0}
.thk-modal-hd button{background:none;border:1px solid var(--border);color:var(--text2);border-radius:6px;padding:4px 10px;font-size:14px;cursor:pointer}
.thk-modal-bd{padding:20px}
.thk-modal-ft{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px}

/* Login */
.thk-login-wrapper{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif}
.thk-login-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:40px;width:360px;max-width:90vw;text-align:center}
.thk-login-box h2{margin:12px 0 4px;font-size:20px}
.thk-login-box p{color:var(--dim);font-size:13px;margin-bottom:20px}
.thk-login-logo{font-size:48px;margin-bottom:4px}
.thk-login-box input[type="text"],.thk-login-box input[type="password"]{width:100%;padding:10px 14px;margin-bottom:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:8px;font-size:14px}
.thk-login-box input[type="submit"]{width:100%;padding:12px;background:linear-gradient(135deg,var(--gold),#B8923F);color:var(--bg);border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;margin-top:8px}
.thk-login-box label{display:block;text-align:right;font-size:12px;color:var(--text2);margin-bottom:4px}
.thk-login-footer{margin-top:24px;font-size:11px;color:var(--dim)}
.thk-error{text-align:center;padding:40px;font-size:18px}

/* Print */
@media print{.thk-sidebar,.thk-mobile-header,.thk-toolbar,.thk-assign-bar{display:none!important}.thk-main{margin:0!important;width:100%!important}.thk-app{background:#fff;color:#000}.thk-room,.thk-stat,.thk-panel,.thk-card{background:#fff;border-color:#ddd;color:#000}}

/* Desktop only */
@media(min-width:901px){
    .thk-mobile-header{display:none!important}
    .thk-overlay{display:none!important}
}

/* ============ MOBILE & TABLET ============ */
@media(max-width:900px){
    /* Hide desktop sidebar completely */
    .thk-sidebar{
        position:fixed!important;
        right:-280px!important;
        top:0!important;
        bottom:0!important;
        width:260px!important;
        z-index:10001!important;
        transition:right 0.3s ease!important;
        box-shadow:none!important;
    }
    .thk-sidebar.open{
        right:0!important;
        box-shadow:-4px 0 24px rgba(0,0,0,0.5)!important;
    }

    /* Show mobile header */
    .thk-mobile-header{display:flex!important}

    /* Main takes FULL width */
    .thk-main{
        margin-right:0!important;
        margin-left:0!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }
    .thk-page{padding:12px!important;max-width:100%!important}
    .thk-page h1{font-size:18px!important}

    /* Stats: 2 columns */
    .thk-stats{grid-template-columns:repeat(2,1fr)!important;gap:6px!important}
    .thk-stat{padding:10px!important}
    .thk-stat-n{font-size:22px!important}

    /* Room grid: 2 columns */
    .thk-rooms{grid-template-columns:repeat(2,1fr)!important;gap:6px!important}

    /* Panels: stack */
    .thk-panels{grid-template-columns:1fr!important}

    /* Forms: single column */
    .thk-form-row{grid-template-columns:1fr!important}

    /* Page header: stack */
    .thk-page-header{flex-direction:column!important;align-items:stretch!important}
    .thk-actions{flex-wrap:wrap!important;justify-content:flex-start!important}

    /* Toolbar: stack */
    .thk-toolbar{flex-direction:column!important;align-items:stretch!important;gap:8px!important}
    .thk-filters{flex-wrap:wrap!important}

    /* Assign bar */
    .thk-assign-bar{flex-direction:column!important;align-items:stretch!important;gap:8px!important}

    /* Table scroll */
    .thk-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
}

@media(max-width:480px){
    .thk-rooms{grid-template-columns:1fr!important}
    .thk-stats{grid-template-columns:repeat(2,1fr)!important}
    .thk-page{padding:8px!important}
    .thk-stat{padding:8px!important}
    .thk-stat-n{font-size:18px!important}
    .thk-room{padding:10px!important}
    .thk-room-num{font-size:16px!important}
    .thk-btn{padding:5px 10px!important;font-size:11px!important}
    .thk-btn-lg{padding:10px 16px!important;font-size:13px!important}
}

/* Page Header */
.thk-page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.thk-page-header h1{margin:0}
.thk-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Toast */
.thk-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--bg2);border:1px solid var(--green);color:var(--text);padding:12px 24px;border-radius:var(--radius);font-size:14px;font-weight:600;z-index:20000;transition:transform 0.3s;box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.thk-toast.show{transform:translateX(-50%) translateY(0)}