@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.exfvxuochq.bundle.scp.css';

/* /Components/Dashboard/Dialogs/ClientOptionsDialog.razor.rz.scp.css */
/* Style for the fixed-width section containing icon and label (e.g., "Last Seen:", "OS:") */
.client-detail-label-col[b-3lejc4gw0f] {
    min-width: 100px; /* Adjust this width based on your longest label, e.g., "Rec. Config:" */
    display: flex;
    align-items: center;
    gap: 5px; /* Gap between icon and text */
}
/* /Components/Dashboard/Pages/ClientList.razor.rz.scp.css */
/* สำหรับ Loading State */
.loading-state[b-kce3bltf5m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px; /* ทำให้มีพื้นที่พอสำหรับแสดง */
    color: var(--neutral-foreground-hint);
}

/* สำหรับ Error State */
.error-state[b-kce3bltf5m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background-color: var(--error-fill-rest); /* พื้นหลังสีแดงอ่อน */
    color: var(--error); /* สีข้อความแดงเข้ม */
    border: 1px solid var(--error);
    border-radius: var(--corner-radius-medium);
    padding: 20px;
    text-align: center;
}

/* สำหรับ No Clients State */
.no-clients-state[b-kce3bltf5m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background-color: var(--neutral-fill-rest);
    border: 1px dashed var(--neutral-stroke-divider-rest);
    border-radius: var(--corner-radius-medium);
    padding: 20px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

.no-clients-state .fluent-icon[b-kce3bltf5m] {
    font-size: var(--type-ramp-plus-4-font-size);
    margin-bottom: 10px;
}

.no-clients-state .fluent-label[b-kce3bltf5m] {
    margin-bottom: 10px;
}

/* /Components/Dashboard/Pages/History.razor.rz.scp.css */
.tool-bar[b-ld6udyqhxt] {
    /* background-color: var(--neutral-layer-3); */
    padding: 1px 0 5px 0;
    min-width: 100px;
}

.rdp-indicator[b-ld6udyqhxt] {
    font-weight: bold;
}

.rdp-true[b-ld6udyqhxt] {
    color: var(--accent-fill-rest); /* สีเน้นสำหรับ RDP True */
}

.rdp-false[b-ld6udyqhxt] {
    color: var(--neutral-foreground-hint); /* สีจางๆ สำหรับ RDP False */
}

/* สไตล์สำหรับสถานะ Loading/Error */
.loading-state[b-ld6udyqhxt], .error-state[b-ld6udyqhxt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background-color: var(--neutral-fill-card);
    border-radius: var(--corner-radius-medium);
    box-shadow: var(--elevation-shadow-hover);
    margin-top: 20px;
}

.error-state[b-ld6udyqhxt] {
    color: var(--error);
}

.error-state .error-message[b-ld6udyqhxt] {
    white-space: pre-wrap; /* คงรูปแบบเว้นวรรคและขึ้นบรรทัดใหม่ */
    font-family: monospace;
    background-color: var(--neutral-fill-stealth-hover);
    padding: 10px;
    border-radius: var(--corner-radius-small);
    margin-top: 10px;
    word-break: break-all;
}

/* ---  hide the button text on small screens --- */
.button-text[b-ld6udyqhxt] {
    display: inline; /* Default: show text */
}

@media (max-width: 1024px) {
    .action-column-container[b-ld6udyqhxt] {
        width: 100px;
        flex: 0 0 100px;
    }

        .action-column-container fluent-button[b-ld6udyqhxt] {
            margin: 0 2px;
            padding: 8px; /* Adjust padding if needed to make icon centered */
        }

        /* Hide the span containing the text */
        .action-column-container .button-text[b-ld6udyqhxt] {
            display: none;
        }

        /* Adjust FluentButton's internal content spacing if needed when text is hidden */
        /* You might still need ::deep here if the icon's margin-inline-start isn't 0 by default */
        .action-column-container fluent-button::deep .fluent-button__content[b-ld6udyqhxt] {
            margin-inline-start: 0; /* Ensures icon is at the start when text is hidden */
        }
}
/* /Components/Dashboard/Pages/RecordConfigList.razor.rz.scp.css */
/* /Components/Layout/DashboardLayout.razor.rz.scp.css */
.fluent-body[b-to7pwmbzm5] {
    margin: 5px 0;
    width: calc(100% - 25px);
}

/* Define a CSS Variable for header height (adjust as needed) */
:root[b-to7pwmbzm5] {
    --header-height: 56px; /* Or whatever height your FluentHeader ends up being */
}

/* Optional: Hide sidebar on small screens or make it collapsible via JS */
@media (max-width: 768px) {
    .main-layout-grid[b-to7pwmbzm5] {
        grid-template-columns: 1fr; /* Stack main content if sidebar is hidden or toggled */
    }

    .sidebar-container[b-to7pwmbzm5] {
        display: none; /* Hide sidebar by default on small screens */
        /* Or implement a toggle button in FluentHeader to show/hide it */
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Custom styles for layout elements */
.header-content[b-s9bz4sjwz9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 16px; /* Add some padding to header content */
}

.identity-links[b-s9bz4sjwz9] {
    display: flex;
    gap: 10px; /* Spacing between login/register/logout links */
    align-items: center;
}

/* Adjust FluentMain to fit within the grid */
fluent-main[b-s9bz4sjwz9] {
    padding: 16px; /* Adjust padding for the main content area */
    overflow-y: auto; /* Enable scrolling for main content if it's long */
}

/* Define a CSS Variable for header height (adjust as needed) */
:root[b-s9bz4sjwz9] {
    --header-height: 56px; /* Or whatever height your FluentHeader ends up being */
}

/* Optional: Hide sidebar on small screens or make it collapsible via JS */
@media (max-width: 768px) {
    .main-layout-grid[b-s9bz4sjwz9] {
        grid-template-columns: 1fr; /* Stack main content if sidebar is hidden or toggled */
    }

    .sidebar-container[b-s9bz4sjwz9] {
        display: none; /* Hide sidebar by default on small screens */
        /* Or implement a toggle button in FluentHeader to show/hide it */
    }
}

/* /Components/Pages/Login.razor.rz.scp.css */
.login-page-container[b-8vhaona52o] {
    min-height: 81vh; 
    display: flex; 
    align-items: flex-start; 
    justify-content: center; 
    background: linear-gradient(135deg, #e0e7ff 0%, #f0fdfa 100%); 
    padding: 3rem;
}
/* /Components/Playback/Components/ActiveApplicationsPlayback.razor.rz.scp.css */
#datagrid-container[b-n6aoqapjbk] {
    height: calc(100% - 3rem);
    min-height: 8rem;
    overflow-x: auto;
    overflow-y: auto;
}
/* /Components/Playback/Components/ActiveWindowsPlayback.razor.rz.scp.css */
#datagrid-container[b-thyub5889s] {
    height: calc(100% - 3rem);
    min-height: 8rem;
    overflow-x: auto;
    overflow-y: hidden;
}
/* /Components/Playback/Components/ComputerInfoPlayback.razor.rz.scp.css */
#main-container[b-tvkhdtinhz] {
    height: 100%;
    min-height: 8rem;
    overflow-x: auto;
    overflow-y: scroll;
}
/* /Components/Playback/Components/InstalledAppPlayback.razor.rz.scp.css */
/* /Components/Playback/Components/ProcessPlayback.razor.rz.scp.css */
#datagrid-container[b-ijnajuur65] {
    height: calc(100% - 3rem);
    min-height: 8rem;
    overflow-x: auto;
    overflow-y: hidden;
}
/* /Components/Playback/Components/ScreenshotPlayback.razor.rz.scp.css */
.screenshot-display[b-t3gbxi6evb] {
    /*flex-grow: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;*/
    /* --- เพิ่ม background-color ที่ชัดเจนขึ้นสำหรับส่วนแสดงภาพ --- */
    background-color: #F8F8F8; /* สีเทาอ่อนมาก */
    /*padding: 10px;*/ /* เพิ่ม padding เล็กน้อยเพื่อให้รูปภาพไม่ชิดขอบ */
    border-bottom: 1px solid #D0D0D0; /* เพิ่มเส้นคั่นระหว่างสองส่วน */
}

/*.screenshot-display img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;*/ /* Ensures the entire image is visible within its bounds */
/*}*/

.controls-container[b-t3gbxi6evb] {
    padding: 10px;
    /* --- เพิ่ม background-color ที่ชัดเจนขึ้นสำหรับส่วนควบคุม --- */
    background-color: #EAEAEA; /* สีเทาอ่อนกลาง */
    /* border-top: 1px solid var(--neutral-stroke-divider-rest); /* ย้ายเส้นคั่นไปที่ด้านล่างของ screenshot-display แทน */
    box-sizing: border-box;
}

/* Loading, Error, Empty States */
.loading-state[b-t3gbxi6evb], .error-state[b-t3gbxi6evb] {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--neutral-fill-card);
    border-radius: var(--corner-radius-medium);
    box-shadow: var(--elevation-shadow-hover);
    margin-top: 20px;
}
/* /Components/Playback/Components/SystemInfoCard.razor.rz.scp.css */
.system-info-card-icon-text[b-idaxla85j0] {
    display: flex;
    align-items: center;
    gap: 14px;
}
/* /Components/Playback/Playback.razor.rz.scp.css */
/* IllegalViewConsoleWeb/Components/Playback/Playback.razor.css */

/* Global/Root Layout - often better in PlaybackLayout.razor.css or app.css if used globally */
html[b-ege8ph4nhu], body[b-ege8ph4nhu], #app[b-ege8ph4nhu] {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent main page scrollbars */
    background-color: var(--neutral-background-rest);
    color: var(--neutral-foreground-rest);
}

/* Loading, Error, Empty States */
.loading-state[b-ege8ph4nhu], .error-state[b-ege8ph4nhu] {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background-color: var(--neutral-fill-card);
    border-radius: var(--corner-radius-medium);
    box-shadow: var(--elevation-shadow-hover);
    margin-top: 20px;
}

.empty-state[b-ege8ph4nhu] {
    /* FluentCard has base styling. Add specific tweaks. */
    text-align: center; /* For text alignment */
    padding: 40px; /* Internal padding */
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--corner-radius);
    /* FluentStack will handle display: flex; flex-direction: column; align-items; justify-content; */
}

.error-state .error-message[b-ege8ph4nhu] {
    color: var(--error-text);
    margin-top: 10px;
}