/* =====================================================
   SCADA / Telerik Blazor - Utility CSS
   Common layout, spacing, grid, and helper classes
   ===================================================== */

/* Brand colors live in css/ath-brand.css — do not redeclare here. */

/* ------------------------------
   1️⃣ FLEXBOX HELPERS
   ------------------------------ */
.d-flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.align-start {
    align-items: flex-start;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

.gap-xs {
    gap: 0.25rem;
}

.gap-sm {
    gap: 0.5rem;
}

.gap-md {
    gap: 1rem;
}

.gap-lg {
    gap: 2rem;
}

/* ------------------------------
   2️⃣ SPACING HELPERS
   ------------------------------ */
.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: 0.5rem !important;
}

.m-2 {
    margin: 1rem !important;
}

.m-3 {
    margin: 1.5rem !important;
}

.mt-1 {
    margin-top: 0.5rem !important;
}

.mt-2 {
    margin-top: 1rem !important;
}

.mt-3 {
    margin-top: 1.5rem !important;
}

.mb-1 {
    margin-bottom: 0.5rem !important;
}

.mb-2 {
    margin-bottom: 1rem !important;
}

.mb-3 {
    margin-bottom: 1.5rem !important;
}

.ml-1 {
    margin-left: 0.5rem !important;
}

.ml-2 {
    margin-left: 1rem !important;
}

.ml-3 {
    margin-left: 1.5rem !important;
}

.mr-1 {
    margin-right: 0.5rem !important;
}

.mr-2 {
    margin-right: 1rem !important;
}

.mr-3 {
    margin-right: 1.5rem !important;
}

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.5rem !important;
}

.p-2 {
    padding: 1rem !important;
}

.p-3 {
    padding: 1.5rem !important;
}

.pt-1 {
    padding-top: 0.5rem !important;
}

.pt-2 {
    padding-top: 1rem !important;
}

.pt-3 {
    padding-top: 1.5rem !important;
}

.pb-1 {
    padding-bottom: 0.5rem !important;
}

.pb-2 {
    padding-bottom: 1rem !important;
}

.pb-3 {
    padding-bottom: 1.5rem !important;
}

/* ------------------------------
   3️⃣ TEXT & FONT UTILITIES
   ------------------------------ */
.text-start {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-end {
    text-align: right !important;
}

.text-muted {
    color: #6c757d !important;
}

.text-danger {
    color: #dc3545 !important;
}

.text-success {
    color: #198754 !important;
}

.text-warning {
    color: #ffc107 !important;
}

.font-xs {
    font-size: 0.75rem;
}

.font-sm {
    font-size: 0.875rem;
}

.font-md {
    font-size: 1rem;
}

.font-lg {
    font-size: 1.25rem;
}

.font-xl {
    font-size: 1.5rem;
}

.bold {
    font-weight: 600;
}

.light {
    font-weight: 300;
}

/* ------------------------------
   4️⃣ WIDTH / HEIGHT HELPERS
   ------------------------------ */
.w-100 {
    width: 100% !important;
}

.w-75 {
    width: 75% !important;
}

.w-50 {
    width: 50% !important;
}

.w-25 {
    width: 25% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.max-w-400 {
    max-width: 400px;
}

.max-w-600 {
    max-width: 600px;
}

.max-w-800 {
    max-width: 800px;
}

/* ------------------------------
   5️⃣ CARD & CONTAINER STYLES
   ------------------------------ */
.card {
    background-color: var(--kendo-base-bg, #fff);
    border: 1px solid var(--kendo-base-border, #ddd);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 1rem;
    margin-bottom: 1rem;
}

.card-header {
    font-weight: 600;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.25rem;
}

/* ------------------------------
   6️⃣ GRID LAYOUT HELPERS
   ------------------------------ */
.grid {
    display: grid;
    gap: 1rem;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------
   7️⃣ FORM / FIELD ALIGNMENT HELPERS
   ------------------------------ */
.form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.field-inline {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ------------------------------
   8️⃣ SECTION HELPERS
   ------------------------------ */
.section-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
}

.divider {
    border-bottom: 1px solid #ddd;
    margin: 1rem 0;
}

/* ------------------------------
   9️⃣ SMALL UI ENHANCEMENTS
   ------------------------------ */
.shadow-sm {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.shadow-md {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.shadow-lg {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.rounded {
    border-radius: 6px;
}

.rounded-lg {
    border-radius: 12px;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

/* ------------------------------
   🔟 SCADA / TYPICAL PANEL BACKGROUND
   ------------------------------ */
.panel {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 1rem;
}

.form-row {
    display: flex;
    gap: 1rem; /* space between elements */
    align-items: center;
}

.form-row > * {
    flex: 1; /* each takes equal width */
}
.popup-class {
    border-radius: 8px;
}

.popup-class .k-window-titlebar {
    border-radius: 8px;
}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space between fields */
}

/* Horizontal field: label + input side by side */
.field-horizontal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Vertical field: label on top of input */
.field-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.input-group {
    border: 2px solid #f5f5f5;
    border-radius: 8px;
    padding: 1rem 1rem 1rem 1rem;
    position: relative;
    margin: 0.2rem 0;
}

.group-name {
    position: absolute;
    top: -0.8rem;
    left: 1rem;
    background: white;
    padding: 0 0.5rem;
    color: inherit;
    font-size: inherit;
}

/* Main responsive grid layout */
.form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* responsive magic */
    margin-bottom: 1rem;
}

/* Label + input next to each other */
.form-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    /* Ensure label does not shrink */
    .form-item label {
        white-space: nowrap;
        min-width: 120px; /* adjust as needed */
    }

    /* Telerik components take remaining space */
    .form-item > *:not(label) {
        flex: 1;
    }

svg g.button {
    cursor: pointer;
}

    svg g.button rect {
        transition: all 0.2s ease;
    }

    svg g.button:hover rect {
        filter: brightness(0.9);
    }

    svg g.button:active rect {
        filter: brightness(0.75);
    }



    svg g.svg-button rect {
        transition: all 0.15s ease;
        filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.35));
    }

    /* Hover */
    svg g.svg-button:hover rect {
        filter: drop-shadow(0px 2px 0px rgba(0,0,0,0.35));
    }

    /* Press effect */
    svg g.svg-button:active rect {
        transform: translateY(1px);
        filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.35));
    }



.svg-button.pressed rect {
    filter: brightness(0.8);
}
.svg-button.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor:not-allowed;
}

.event-disable {
    pointer-events: none;
    cursor: not-allowed;
}
@keyframes blink {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.svg-blink {
    animation: blink 1s infinite;
}

@media (min-width: 600px) {
    .field-vertical {
        flex-direction: row;
        align-items: center;
    }

        .field-vertical label {
            margin-right: 0.5rem;
        }
}