/**
 * Main Stylesheet
 * RTL-compatible truck wheel operations system
 */

@import 'variables.less';

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: @font-family;
    background-color: @bg-secondary;
    color: @text-primary;
    line-height: 1.6;
    direction: rtl;
}

// Container
.container {
    max-width: 1400px;
    margin: 0 auto;
    .padding-rtl(0, @spacing-lg, 0, @spacing-lg);
}

// Header
.header {
    background: @bg-primary;
    border-bottom: 1px solid @border-color;
    box-shadow: @shadow-sm;
    .padding-rtl(@spacing-lg, 0, @spacing-lg, 0);
    
    .header-content {
        .flex-rtl(row);
        justify-content: space-between;
        align-items: center;
    }
    
    h1 {
        font-size: @font-size-2xl;
        color: @primary-color;
        font-weight: 700;
    }
}

// Controls section
.controls-section {
    .card();
    .margin-rtl(@spacing-xl, 0, @spacing-xl, 0);
    padding: @spacing-lg;
    
    .controls-row {
        .flex-rtl(row);
        gap: @spacing-md;
        flex-wrap: wrap;
        align-items: center;
        
        .control-group {
            flex: 1;
            min-width: 200px;
            
            label {
                display: block;
                margin-bottom: @spacing-xs;
                font-size: @font-size-sm;
                font-weight: 500;
                color: @text-secondary;
            }
            
            input, select {
                .input-base();
            }
        }
        
        .button-group {
            .flex-rtl(row);
            gap: @spacing-sm;
        }
    }
}

// Buttons
.btn {
    .button-base();
    
    &.btn-primary {
        background-color: @primary-color;
        color: white;
        
        &:hover:not(:disabled) {
            background-color: @primary-hover;
        }
    }
    
    &.btn-success {
        background-color: @success-color;
        color: white;
        
        &:hover:not(:disabled) {
            background-color: darken(@success-color, 10%);
        }
    }
    
    &.btn-danger {
        background-color: @danger-color;
        color: white;
        
        &:hover:not(:disabled) {
            background-color: darken(@danger-color, 10%);
        }
    }
    
    &.btn-secondary {
        background-color: @secondary-color;
        color: white;
        
        &:hover:not(:disabled) {
            background-color: darken(@secondary-color, 10%);
        }
    }
    
    &.btn-sm {
        padding: @spacing-xs @spacing-md;
        font-size: @font-size-xs;
    }
}

// Table section
.table-section {
    .card();
    padding: @spacing-lg;
    overflow-x: auto;
}

.operations-table {
    .table-base();
    
    thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        white-space: nowrap;
    }
    
    tbody td {
        vertical-align: middle;
        
        &.numeric {
            font-family: 'Courier New', monospace;
            font-weight: 600;
            color: @primary-color;
        }
        
        .action-buttons {
            .flex-rtl(row);
            gap: @spacing-xs;
        }
    }
}

// Totals section - VERY IMPORTANT
.totals-section {
    margin-top: @spacing-lg;
    padding-top: @spacing-lg;
    border-top: 3px solid @primary-color;
    background: linear-gradient(to bottom, @bg-secondary, @bg-primary);
    border-radius: @border-radius-md;
    padding: @spacing-lg;
    
    .totals-grid {
        .grid-rtl(3);
        gap: @spacing-lg;
        
        @media (max-width: 768px) {
            grid-template-columns: 1fr;
        }
    }
    
    .total-item {
        background: white;
        padding: @spacing-lg;
        border-radius: @border-radius-md;
        border: 2px solid @border-color;
        transition: all @transition-base;
        
        &:hover {
            border-color: @primary-color;
            box-shadow: @shadow-md;
            transform: translateY(-2px);
        }
        
        .total-label {
            font-size: @font-size-sm;
            color: @text-secondary;
            margin-bottom: @spacing-sm;
            font-weight: 500;
        }
        
        .total-value {
            font-size: @font-size-3xl;
            font-weight: 700;
            font-family: 'Courier New', monospace;
            direction: ltr;
            .text-align-rtl(right);
            
            &.total-net {
                color: @primary-color;
            }
            
            &.total-custody {
                color: @warning-color;
            }
            
            &.total-disbursed {
                color: @success-color;
            }
        }
        
        .total-currency {
            font-size: @font-size-base;
            color: @text-secondary;
            .margin-rtl(0, @spacing-xs, 0, 0);
        }
    }
}

// Modal
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    
    &.active {
        display: flex;
    }
    
    .modal-content {
        background: @bg-primary;
        border-radius: @border-radius-xl;
        max-width: 800px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: @shadow-xl;
        
        .modal-header {
            padding: @spacing-lg;
            border-bottom: 1px solid @border-color;
            .flex-rtl(row);
            justify-content: space-between;
            align-items: center;
            
            h2 {
                font-size: @font-size-xl;
                font-weight: 600;
            }
            
            .modal-close {
                background: none;
                border: none;
                font-size: @font-size-2xl;
                cursor: pointer;
                color: @text-secondary;
                transition: color @transition-base;
                
                &:hover {
                    color: @danger-color;
                }
            }
        }
        
        .modal-body {
            padding: @spacing-lg;
        }
        
        .modal-footer {
            padding: @spacing-lg;
            border-top: 1px solid @border-color;
            .flex-rtl(row);
            justify-content: flex-end;
            gap: @spacing-md;
        }
    }
}

// Form
.form-grid {
    .grid-rtl(2);
    gap: @spacing-lg;
    
    @media (max-width: 768px) {
        grid-template-columns: 1fr;
    }
    
    .form-group {
        &.full-width {
            grid-column: 1 / -1;
        }
        
        label {
            display: block;
            margin-bottom: @spacing-sm;
            font-size: @font-size-sm;
            font-weight: 500;
            color: @text-primary;
            
            .required {
                color: @danger-color;
                .margin-rtl(0, @spacing-xs, 0, 0);
            }
        }
        
        input, textarea, select {
            .input-base();
        }
        
        textarea {
            resize: vertical;
            min-height: 100px;
        }
        
        .error-message {
            color: @danger-color;
            font-size: @font-size-xs;
            margin-top: @spacing-xs;
            display: none;
            
            &.show {
                display: block;
            }
        }
    }
}

// Autocomplete
.autocomplete-container {
    position: relative;
    
    .autocomplete-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid @border-color;
        border-top: none;
        border-radius: 0 0 @border-radius-md @border-radius-md;
        max-height: 200px;
        overflow-y: auto;
        box-shadow: @shadow-md;
        z-index: 100;
        display: none;
        
        &.show {
            display: block;
        }
        
        .suggestion-item {
            padding: @spacing-sm @spacing-md;
            cursor: pointer;
            transition: background-color @transition-fast;
            
            &:hover, &.active {
                background-color: @bg-secondary;
            }
        }
    }
}

// Loading spinner
.spinner {
    border: 3px solid @border-color;
    border-top: 3px solid @primary-color;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: @spacing-lg auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

// Alert messages
.alert {
    padding: @spacing-md @spacing-lg;
    border-radius: @border-radius-md;
    margin-bottom: @spacing-md;
    
    &.alert-success {
        background-color: lighten(@success-color, 45%);
        color: darken(@success-color, 10%);
        border: 1px solid @success-color;
    }
    
    &.alert-error {
        background-color: lighten(@danger-color, 45%);
        color: darken(@danger-color, 10%);
        border: 1px solid @danger-color;
    }
}

// Empty state
.empty-state {
    text-align: center;
    padding: @spacing-2xl;
    color: @text-secondary;
    
    .empty-icon {
        font-size: 4rem;
        margin-bottom: @spacing-lg;
        opacity: 0.3;
    }
    
    p {
        font-size: @font-size-lg;
    }
}

// Responsive
@media (max-width: 768px) {
    .container {
        .padding-rtl(0, @spacing-md, 0, @spacing-md);
    }

    .header {
        .header-content {
            flex-direction: column !important;
            gap: @spacing-sm;
            text-align: center;

            h1 {
                font-size: @font-size-xl;
            }
        }
    }

    .controls-section {
        padding: @spacing-md;

        .controls-row {
            flex-direction: column !important;

            .control-group {
                width: 100%;
                min-width: unset;
            }

            .button-group {
                flex-direction: column !important;
                width: 100%;

                .btn {
                    width: 100%;
                    text-align: center;
                }
            }
        }
    }

    .table-section {
        padding: @spacing-sm;
    }

    .operations-table {
        font-size: @font-size-xs;

        th, td {
            padding: @spacing-xs @spacing-sm;
            white-space: nowrap;
        }

        .action-buttons {
            flex-direction: column !important;
            gap: 4px;
        }
    }

    .modal {
        .modal-content {
            width: 98%;
            margin: @spacing-xs;
            max-height: 95vh;
        }

        .modal-footer {
            flex-direction: column !important;

            .btn {
                width: 100%;
                text-align: center;
            }
        }
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .totals-section {
        padding: @spacing-md;

        .totals-grid {
            grid-template-columns: 1fr;
        }

        .total-value {
            font-size: @font-size-xl;
        }
    }
}

@media (max-width: 480px) {
    .header h1 {
        font-size: @font-size-lg;
    }

    .btn {
        font-size: @font-size-xs;
        padding: @spacing-xs @spacing-sm;
    }
}