@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    margin: 0;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s;
}

/* YENİ: Sistem Seçim Ekranı Stili */
#system-selector {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s, transform 0.5s;
}

canvas {
    touch-action: none;
    outline: none;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.fade-out {
    opacity: 0;
    pointer-events: none;
}

.input-label {
    @apply text-[11px] font-semibold text-sf-dark/70 dark:text-gray-300 block mb-1;
}

.input-field {
    @apply w-full px-3 py-2 bg-white border-2 border-sf-blue rounded-xl text-sm font-bold text-sf-dark focus:ring-2 ring-sf-blue/50 outline-none transition h-12;
}

.stepper-btn {
    @apply w-10 h-full text-xl text-sf-dark/70 hover:bg-sf-blue hover:text-white transition-colors active:scale-95 flex items-center justify-center font-light;
}

.toggle-label {
    @apply flex flex-col items-center p-2 bg-white rounded-lg border border-gray-200 cursor-pointer hover:bg-blue-50 hover:border-sf-blue/30 transition group;
}

.toggle-text {
    @apply text-[9px] font-bold text-sf-dark/60 dark:text-gray-400 group-hover:text-sf-blue dark:group-hover:text-sf-blue transition-colors mb-1 text-center leading-tight;
}

/* Accentuated toggles */
#lbl-mod-brace input:checked~.toggle-text,
#lbl-mod-brace:hover .toggle-text {
    @apply text-sf-accent;
}

#lbl-mod-guard input:checked~.toggle-text,
#lbl-mod-guard:hover .toggle-text {
    @apply text-red-600;
}

#lbl-mod-toe input:checked~.toggle-text,
#lbl-mod-toe:hover .toggle-text {
    @apply text-orange-700;
}

#lbl-mod-anchor input:checked~.toggle-text,
#lbl-mod-anchor:hover .toggle-text {
    @apply text-purple-600;
}

#lbl-mod-worker input:checked~.toggle-text,
#lbl-mod-worker:hover .toggle-text {
    @apply text-orange-500;
}

#lbl-mod-building input:checked~.toggle-text,
#lbl-mod-building:hover .toggle-text {
    @apply text-sf-dark;
}

#lbl-mod-cantilever input:checked~.toggle-text,
#lbl-mod-cantilever:hover .toggle-text {
    @apply text-indigo-600;
}

#lbl-mod-dims input:checked~.toggle-text,
#lbl-mod-dims:hover .toggle-text {
    @apply text-green-600;
}

/* YENİ: İskele Filesi Vurgusu */
#lbl-mod-netting input:checked~.toggle-text,
#lbl-mod-netting:hover .toggle-text {
    @apply text-green-700;
}


input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: auto;
    margin: 0;
}

.variable-input-field {
    @apply w-full p-2 bg-white border-2 border-sf-blue rounded-xl text-sm font-bold text-sf-dark h-10 shadow-md transition-all duration-200 hover:shadow-lg hover:shadow-sf-blue/10 focus:border-sf-blue focus:shadow-xl focus:shadow-sf-blue/30 focus:ring-0 outline-none dark:border-sf-blue dark:bg-gray-600 dark:text-white dark:focus:border-sf-blue;
}



.history-btn {
    @apply p-2 rounded-xl text-sf-dark/60 hover:text-sf-blue hover:bg-gray-100 disabled:opacity-30 disabled:hover:bg-transparent disabled:cursor-not-allowed transition;
}

.face-header {
    @apply flex justify-between items-center bg-sf-blue/5 text-sf-dark font-extrabold text-sm p-2 rounded-lg mb-2 border-l-4 border-sf-blue;
}

.facade-item {
    @apply bg-gray-50 p-3 rounded-lg border border-gray-200 shadow-sm space-y-3;
}

/* Simülasyon Paneli için Stiller */
.sim-btn {
    @apply p-3 flex-1 flex flex-col items-center justify-center bg-white rounded-xl shadow-md border-2 border-sf-blue/20 hover:bg-sf-blue/10 hover:border-sf-blue transition-all active:scale-95 disabled:opacity-40 disabled:hover:bg-white disabled:cursor-not-allowed dark:bg-gray-700 dark:border-sf-blue/50 dark:hover:bg-sf-blue/20 dark:disabled:bg-gray-700 dark:disabled:hover:bg-gray-700;
}

.sim-btn svg {
    @apply h-6 w-6 mb-1 text-sf-blue dark:text-sf-blue/80;
}

.sim-btn span {
    @apply text-[10px] font-bold text-sf-dark/80 dark:text-gray-200;
}

.sim-btn-exit {
    @apply bg-red-100 border-red-300 hover:bg-red-200 dark:bg-red-900/50 dark:border-red-600/80 dark:hover:bg-red-800/50;
}

.sim-btn-exit svg {
    @apply text-red-600 dark:text-red-400;
}

.sim-btn-exit span {
    @apply text-red-600 dark:text-red-400;
}

/* Simülasyon Hız Kaydırıcısı */
input[type=range].sim-speed-slider {
    @apply w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700;
}

input[type=range].sim-speed-slider::-webkit-slider-thumb {
    @apply w-4 h-4 bg-sf-blue rounded-full appearance-none cursor-pointer active:scale-125 transition-transform;
}

/* YENİ: Kutu Seçim Stili */
#selection-box {
    position: absolute;
    border: 2px dashed #0A2873;
    /* sf-blue */
    background-color: rgba(10, 40, 115, 0.1);
    /* sf-blue/10 */
    pointer-events: none;
    z-index: 100;
    display: none;
    /* hidden by default */
}