/* SubCategory grid layout - NOW 8 COLUMNS WITH CREATED_BY */
.subcategory-grid {
    // SubCategory ID, Name, Image, Category, Brand, Branch, Created By, Actions (8 columns)
    grid-template-columns: 120px 1fr 80px 150px 150px 150px 150px 120px;

    @media (max-width: 1279px) { // xl breakpoint - hide Created By (changed from 2xl)
        grid-template-columns: 120px 1fr 80px 150px 150px 150px 120px;
    }

    @media (max-width: 1279px) { // xl - hide branch
        grid-template-columns: 120px 1fr 80px 150px 150px 120px;
    }

    @media (max-width: 1023px) { // lg - hide brand
        grid-template-columns: 120px 1fr 80px 150px 120px;
    }

    @media (max-width: 767px) { // md - hide category
        grid-template-columns: 120px 1fr 80px 120px;
    }

    @media (max-width: 639px) { // sm - hide image
        grid-template-columns: 120px 1fr 80px;
    }
}

/* Created By Column Styling */
.subcategory-grid > div:nth-child(7) {
    display: flex;
    align-items: center;
    gap: 6px;
}

.subcategory-grid > div:nth-child(7) mat-icon {
    color: #6b7280;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.subcategory-grid > div:nth-child(7) span {
    font-size: 13px;
    color: #374151;
}

.dark .subcategory-grid > div:nth-child(7) mat-icon {
    color: #9ca3af;
}

.dark .subcategory-grid > div:nth-child(7) span {
    color: #d1d5db;
}

.fuse-mat-dense {
    .mat-mdc-form-field-subscript-wrapper { display: none; }
    .mat-mdc-form-field-infix { min-height: 40px; }
}

.fuse-mat-rounded {
    .mat-mdc-form-field-flex {
        border-radius: 20px;
        background-color: rgba(0, 0, 0, 0.04);
        border: none;
    }
    &.mat-focused .mat-mdc-form-field-flex {
        background-color: rgba(0, 0, 0, 0.06);
    }
}

.icon-size-5 { width: 20px; height: 20px; font-size: 20px; }
.icon-size-8 { width: 32px; height: 32px; font-size: 32px; }
.icon-size-16 { width: 64px; height: 64px; font-size: 64px; }

mat-icon-button {
    width: 36px;
    height: 36px;
    mat-icon { transition: all 0.2s ease; }
    &:hover mat-icon { transform: scale(1.1); }
}

mat-form-field {
    &.mat-mdc-form-field { width: 100%; }
    .mat-mdc-text-field-wrapper { background-color: #ffffff; }
}

.subcategory-grid > div:not(.sticky):not(.bg-blue-50) {
    transition: background-color 0.15s ease;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .subcategory-grid { gap: 8px; padding: 12px 16px; }
}

@media (prefers-color-scheme: dark) {
    mat-form-field .mat-mdc-text-field-wrapper {
        background-color: rgba(255, 255, 255, 0.05);
    }
    .fuse-mat-rounded .mat-mdc-form-field-flex {
        background-color: rgba(255, 255, 255, 0.06);
    }
    .subcategory-grid > div:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

.mat-mdc-form-field.mat-focused .mat-mdc-form-field-flex {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

* {
    transition-property: background-color, border-color, color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

mat-paginator { background-color: transparent; }
.font-mono { letter-spacing: 0.05em; }

.mat-mdc-form-field-appearance-outline {
    .mat-mdc-form-field-outline { color: #e5e7eb; }
    &.mat-focused .mat-mdc-form-field-outline { color: #3b82f6; }
}

.mat-mdc-form-field-hint { font-size: 12px; color: #6b7280; }
.mat-mdc-form-field-error { font-size: 12px; }

.mat-mdc-raised-button, .mat-mdc-outlined-button {
    height: 40px;
    line-height: 40px;
}

.border-b, .border-t { border-color: #e5e7eb; }
h2 { font-weight: 600; line-height: 1.2; }
.overflow-hidden { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); }

.flex.gap-1 button:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.transition-colors {
    transition-property: background-color, color;
    transition-duration: 200ms;
}

.text-blue-600 {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

mat-progress-bar { height: 2px; }
.mat-mdc-tooltip { font-size: 12px; padding: 6px 12px; }

@media (max-width: 640px) {
    .text-4xl { font-size: 1.875rem; }
}

button:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.snackbar-success { background-color: #10b981; }
.snackbar-error { background-color: #ef4444; }