/* HotelCleanApp - Custom Styles (1:1 match with original React app) */

body {
    background-color: #f3f5f9;
    font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

/* Sidebar: 182px, blue #3b88f9, fixed left */
.ui.vertical.menu.fixed.sidebar-menu {
    width: 182px !important;
    background-color: #3b88f9 !important;
    padding-top: 0;
    overflow-y: auto;
}
.ui.vertical.menu.fixed.sidebar-menu .item {
    color: rgba(255,255,255,0.9) !important;
    font-weight: 600;
    line-height: 40px;
}
.ui.vertical.menu.fixed.sidebar-menu .item i.icon {
    margin-right: 12px !important;
}
.ui.vertical.menu.fixed.sidebar-menu .item:hover {
    background-color: rgba(255,255,255,0.15);
}
.ui.vertical.menu.fixed.sidebar-menu .item.active {
    background-color: rgba(255,255,255,0.2) !important;
}

/* Main content offset for sidebar */
.main-content {
    margin-left: 182px;
    padding: 14px;
    padding-top: 14px;
}

/* Top navbar */
.ui.menu.navbar-menu {
    background-color: #3b88f9 !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
}
.ui.menu.navbar-menu .item,
.ui.menu.navbar-menu .dropdown {
    color: white !important;
}
.ui.menu.navbar-menu .ui.dropdown .menu {
    color: rgba(0,0,0,.87) !important;
}
.ui.menu.navbar-menu .ui.dropdown .menu .item {
    color: rgba(0,0,0,.87) !important;
}

/* Room tile: thicker top border */
.room-tile.ui.basic.button {
    border-top: 2px solid !important;
}

/* Mobile responsive */
@media only screen and (max-width: 767px) {
    .main-content {
        margin-left: 0;
        padding: 10px;
    }
    .sidebar-desktop {
        display: none !important;
    }
}
@media only screen and (min-width: 768px) {
    .sidebar-mobile-toggle {
        display: none !important;
    }
}

/* RoomBlock: Segment as Button (matching original) */
.room-block-btn.ui.button.segment {
    text-align: center;
    padding: 12px 8px;
    margin: 0;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.room-block-btn .room-name {
    font-weight: bold;
    font-size: 17px;
    margin-bottom: 6px;
}
.room-block-btn .room-note {
    font-size: 12px;
    font-weight: normal;
    color: grey;
    margin-bottom: 8px;
    min-height: 18px;
}
/* Disabled icon override (original CSS from RoomBlock) */
.ui.button > .icon:not(.button) {
    height: auto;
}
#disabled-icon {
    background-color: lightgrey !important;
}

/* Floor segment styling */
.floor-segment .ui.segment.secondary {
    font-weight: bold;
}

/* Help button */
.help-btn.ui.button {
    background-color: #5a697b !important;
    color: white !important;
}

/* Date navigation buttons */
.date-nav-group .ui.button {
    margin: 0;
}

/* Legend in info message */
.legend-message .ui.list .item i.icon {
    margin-right: 5px;
}

/* Login page */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #f6f9fe;
}
.login-form {
    max-width: 400px;
    width: 100%;
    padding: 20px;
}

/* Toast notifications */
.toast-container {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 9999;
}
.toast-message {
    padding: 12px 20px;
    border-radius: 4px;
    margin-bottom: 8px;
    color: #fff;
    font-weight: 500;
    animation: toastSlideIn 0.3s ease;
    min-width: 250px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.toast-message.success { background-color: #21ba45; }
.toast-message.warning { background-color: #f2711c; }
.toast-message.error { background-color: #db2828; }
@keyframes toastSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Drag & drop rooms */
.room-picker-container { display: flex; gap: 20px; }
.room-picker-list { flex: 1; min-height: 200px; border: 1px solid rgba(34,36,38,.15); border-radius: .28571429rem; padding: 10px; }
.room-picker-item { background-color: #fff; border: 1px solid #ddd; border-radius: 3px; padding: 8px 12px; margin-bottom: 5px; cursor: grab; }

/* Sync steps */
.sync-step { padding: 8px 0; color: #999; }
.sync-step.active { color: #3b88f9; font-weight: bold; }
.sync-step.completed { color: #21ba45; }

/* Admin */
.admin-content { margin-left: 210px; padding: 14px; }

/* Settings tabs */
.ui.tabular.menu .item { font-weight: 600; }

/* Activity popup */
.activity-popup { max-height: 400px; overflow-y: auto; }

.hidden {
    display: none;
}

.closeLocalPopup {
    width: 1rem;
    height: 1rem;
    float: right;
    cursor: pointer;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/></svg>');
}
.questonMarkPopup {
    width: 3rem;
    height: 3rem;
    float: right;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%235A697B" class="bi bi-question-square-fill" viewBox="0 0 16 16"><path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm3.496 6.033a.237.237 0 0 1-.24-.247C5.35 4.091 6.737 3.5 8.005 3.5c1.396 0 2.672.73 2.672 2.24 0 1.08-.635 1.594-1.244 2.057-.737.559-1.01.768-1.01 1.486v.105a.25.25 0 0 1-.25.25h-.81a.25.25 0 0 1-.25-.246l-.004-.217c-.038-.927.495-1.498 1.168-1.987.59-.444.965-.736.965-1.371 0-.825-.628-1.168-1.314-1.168-.803 0-1.253.478-1.342 1.134-.018.137-.128.25-.266.25h-.825zm2.325 6.443c-.584 0-1.009-.394-1.009-.927 0-.552.425-.94 1.01-.94.609 0 1.028.388 1.028.94 0 .533-.42.927-1.029.927"/></svg>')
}

[role="tab"] {
    padding: .92857143em 1.42857143em;
}

[role="tab"][aria-selected="false"] {
    color: black;
}
[role="tab"][aria-selected="true"] {
    font-weight: 700;
}