/* FILE: style.css */

html,
body {
    overscroll-behavior: none;
    touch-action: none;       /* Disable browser zooming/scrolling globally */
    user-select: none;        /* STOP THE BLUE STREAKS */
    -webkit-user-select: none; /* Safari/Chrome specific fix */
    -webkit-touch-callout: none; /* Stop long-press context menus */
}

body {
    font-family: 'Inter', sans-serif;
    /* Prevents pull-to-refresh on mobile */
}

#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    touch-action: none;
    /* The most important fix: tells the browser to let our JS handle all touch gestures */
}

#canvas-container.panning {
    cursor: grabbing;
}

#canvas-container.door-placement {
    cursor: crosshair;
}

#canvas-container.trim-placement {
    cursor: crosshair;
}

#canvas-container.kiosk-mode,
#canvas-container.employee-mode,
#canvas-container.security-mode {
    cursor: pointer;
}

/* START: New cursor for Maintenance Mode */
#canvas-container.maintenance-mode {
    cursor: default;
}

/* END: New cursor for Maintenance Mode */

.control-panel {
    scrollbar-width: thin;
    scrollbar-color: #4a5568 #2d3748;
}

.control-panel::-webkit-scrollbar {
    width: 8px;
}

.control-panel::-webkit-scrollbar-track {
    background: #2d3748;
}

.control-panel::-webkit-scrollbar-thumb {
    background-color: #4a5568;
    border-radius: 4px;
}

.color-swatch,
.bg-swatch,
.text-color-swatch,
.door-color-swatch,
.parking-line-color-swatch,
.status-color-swatch {
    transition: all 0.2s ease-in-out;
}

.color-swatch.selected,
.bg-swatch.selected,
.text-color-swatch.selected,
.door-color-swatch.selected,
.parking-line-color-swatch.selected,
.status-color-swatch.selected {
    transform: scale(1.2);
    box-shadow: 0 0 0 3px #60a5fa;
    /* ring-blue-400 */
}

.floor-button.active {
    background-color: #3b82f6;
    /* bg-blue-600 */
    color: white;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

/* Simple toggle switch style */
.toggle-checkbox:checked {
    right: 0;
    border-color: #60a5fa;
}

.toggle-checkbox:checked+.toggle-label {
    background-color: #60a5fa;
}

/* Style for selected item in load list */
.load-item.selected {
    background-color: #3b82f6;
    /* bg-blue-600 */
}

/* FILE: style.css */

/* ... (your existing styles) ... */

.keypad-btn {
    background-color: #374151; /* bg-gray-700 */
    color: #ffffff;           /* text-white */
    font-weight: 700;        /* font-bold */
    padding-top: 1rem;       /* py-4 */
    padding-bottom: 1rem;
    border-radius: 0.5rem;   /* rounded-lg */
    transition: transform 0.2s;
}
.keypad-btn:hover {
    background-color: #4B5563; /* hover:bg-gray-600 */
    transform: scale(1.05);
}

.pin-dot {
    width: 1rem;             /* w-4 */
    height: 1rem;            /* h-4 */
    background-color: #4B5563; /* bg-gray-600 */
    border-radius: 9999px;   /* rounded-full */
    transition: background-color 0.2s;
}

.pin-dot.active {
    background-color: #38bdf8; /* bg-sky-400 */
}

#rockScapeColorPalette .selected {
    border-color: #facc15; /* A bright, obvious yellow */
    transform: scale(1.1);
}

/* --- SURFACE PRO SCROLL FIX --- */
/* This overrides the "touch-action: none" just for the side panels */
.control-panel,
.overflow-y-auto,
#traceList,
#securityManagementList,
#loadLayoutList {
    touch-action: pan-y !important; /* Allow vertical scrolling with finger */
}

/* Make scrollbars easier to grab on touchscreens */
::-webkit-scrollbar {
    width: 16px;
}
::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border: 4px solid transparent;
    background-clip: content-box;
    border-radius: 8px;
}

/* Kiosk Location Switcher Buttons */
.location-grid-btn {
    transition: transform 0.2s, background-color 0.2s;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.location-grid-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}
.location-grid-btn:active {
    transform: translateY(0);
}

/* When viewing a remote location in Employee Mode */
body.remote-view-active #kiosk-ui-overlay {
    border: 8px solid #f97316; /* Orange Border */
    box-sizing: border-box;
}

body.remote-view-active::after {
    content: "READ ONLY MODE";
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #f97316;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 24px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.8;
}

/* --- 4K MONITOR AUTO-SCALER --- */
/* This only activates if the width is greater than 3000 pixels */
@media (min-width: 3000px) {
    body {
        zoom: 2.5; /* Bumps everything up 2.5x size */
    }
    
    /* Optional: Fix for 3D Canvas if zoom messes up mouse alignment */
    /* We might need to tweak this later, but zoom is the easiest first step */
}