/**
 * Kommunale Exzellenz Suite - CSS Utility Classes
 * ==================================================
 * Central utility classes to eliminate code duplication across product CSS files
 * Created: September 24, 2025
 */

/*
   CSS VARIABLES - Layout and behavior-specific
 */
:root {
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 5px;
    --radius-lg: 8px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 61, 131, 0.2);
    --shadow-lg: 0 5px 15px rgba(0, 61, 131, 0.2);

    /* Backward compatibility mappings */
    --primary-blue: var(--primary-color);
    --primary-blue-dark: var(--primary-color-dark);
    --primary-blue-light: var(--primary-color-light);
}

/*
   BUTTON UTILITIES - Consistent button styling across all products
 */

/* Base button styles - Shared by all button types (no HTML changes needed) */
.btn-primary,
.btn-secondary,
.btn-save,
.btn-cancel,
.btn-danger,
.btn-primary-active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    text-align: center;
    outline: none;
    line-height: 1.5;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-save:disabled,
.btn-cancel:disabled,
.btn-danger:disabled,
.btn-primary-active:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-save:hover:not(:disabled),
.btn-cancel:hover:not(:disabled),
.btn-danger:hover:not(:disabled),
.btn-primary-active:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Button-specific styles - Only unique properties */

/* Primary button - Main actions */
.btn-primary {
    background-color: var(--primary-blue);
    color: var(--color-white);
    border-color: var(--primary-blue);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-blue-dark);
    border-color: var(--primary-blue-dark);
}

/* Secondary button - Alternative actions */
.btn-secondary {
    background-color: var(--color-gray-light);
    color: var(--color-text);
    border-color: var(--color-gray-dark);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-gray);
    box-shadow: var(--shadow-md); /* Override default shadow */
}


/* Save button - Positive actions */
.btn-save {
    background-color: var(--color-success);
    color: var(--color-white);
    border-color: var(--color-success);
}

.btn-save:hover:not(:disabled) {
    background-color: #218838;
    border-color: #1e7e34;
    box-shadow: var(--shadow-md); /* Override default shadow */
}

/* Cancel button - Negative/abort actions */
.btn-cancel {
    background-color: var(--color-gray-light);
    color: var(--color-text);
    border: 1px solid var(--color-gray-dark); /* Override 2px transparent */
}

.btn-cancel:hover:not(:disabled) {
    background-color: var(--color-gray);
    box-shadow: var(--shadow-sm); /* Override default shadow */
}

/* Danger button - Destructive actions */
.btn-danger {
    background-color: var(--color-danger);
    color: var(--color-white);
    border-color: var(--color-danger);
}

.btn-danger:hover:not(:disabled) {
    background-color: #c82333;
    border-color: #bd2130;
    box-shadow: var(--shadow-md); /* Override default shadow */
}

/* Size variants */
.btn-sm {
    padding: 6px 12px;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 1.1rem;
}

/* Full width button */
.btn-block {
    width: 100%;
}

/* Primary button with active/expanded state - Orange when active */
.btn-primary-active {
    background-color: var(--primary-blue);
    color: var(--color-white);
    border-color: var(--primary-blue);
}

.btn-primary-active:hover:not(:disabled) {
    background-color: var(--primary-blue-dark);
    border-color: var(--primary-blue-dark);
}

/* Active state - Orange branding color */
.btn-primary-active.active {
    background-color: var(--color-departments); /* #FF9800 - Brand orange */
    color: var(--color-white);
    border-color: #e68900; /* Darker orange for border */
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.btn-primary-active.active:hover {
    background-color: #e68900; /* Darker orange on hover */
    border-color: #cc7a00; /* Even darker border */
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
}

/*
   FORM UTILITIES - Consistent form styling
 */

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9rem;
}

.form-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.95rem;
    border: 1px solid #ced4da;
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 61, 131, 0.1);
}

.form-input:disabled {
    background-color: var(--color-gray-light);
    cursor: not-allowed;
}

.form-textarea {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.95rem;
    border: 1px solid #ced4da;
    border-radius: var(--radius-sm);
    resize: vertical;
    min-height: 100px;
}

.form-select {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.95rem;
    border: 1px solid #ced4da;
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    cursor: pointer;
}

/* Form container for expandable forms */
.form-container {
    background-color: var(--primary-blue);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.form-container .form-input,
.form-container .form-textarea,
.form-container .form-select {
    background-color: var(--color-white);
}

/* Form actions - button container */
.form-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* Form actions - buttons should take equal width */
.form-actions .btn-primary,
.form-actions .btn-secondary,
.form-actions .btn-danger,
.form-actions .btn-save,
.form-actions .btn-cancel {
    flex: 1;
}

/*
   HIERARCHY UTILITIES - Consistent hierarchy visualization
 */

.hierarchy-item {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: 2px;
    background-color: var(--color-white);
    border-left: 6px solid transparent;
    transition: all var(--transition-fast);
}

/* Level-based border colors */
.hierarchy-level-0 {
    border-left-color: var(--color-primary, var(--primary-blue));
    border-left-width: 6px;
}

.hierarchy-level-1 {
    border-left-color: var(--color-primary, var(--primary-blue));
    opacity: 0.8;
    margin-left: var(--spacing-lg);
}

.hierarchy-level-2 {
    border-left-color: var(--color-primary, var(--primary-blue));
    opacity: 0.6;
    margin-left: calc(var(--spacing-lg) * 2);
}

.hierarchy-level-3 {
    border-left-color: var(--color-primary, var(--primary-blue));
    opacity: 0.4;
    margin-left: calc(var(--spacing-lg) * 3);
}

/* Department hierarchy (green) */
.hierarchy-departments .hierarchy-level-0 {
    border-left-color: var(--color-departments);
}

.hierarchy-departments .hierarchy-level-1 {
    border-left-color: var(--color-departments);
}

.hierarchy-departments .hierarchy-level-2 {
    border-left-color: var(--color-departments);
}

/* Task hierarchy (blue) */
.hierarchy-tasks .hierarchy-level-0 {
    border-left-color: var(--color-tasks);
}

.hierarchy-tasks .hierarchy-level-1 {
    border-left-color: var(--color-tasks);
}

.hierarchy-tasks .hierarchy-level-2 {
    border-left-color: var(--color-tasks);
}

/* Directive hierarchy (orange) */
.hierarchy-directives .hierarchy-level-0 {
    border-left-color: var(--color-directives);
}

.hierarchy-directives .hierarchy-level-1 {
    border-left-color: var(--color-directives);
}

.hierarchy-directives .hierarchy-level-2 {
    border-left-color: var(--color-directives);
}

/*
   CARD UTILITIES - Consistent card styling
 */

.card {
    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.card-header {
    padding: var(--spacing-md);
    margin: calc(var(--spacing-md) * -1);
    margin-bottom: var(--spacing-md);
    background-color: var(--color-gray-light);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-weight: 600;
}

.card-body {
    padding: 0;
}

.card-footer {
    padding: var(--spacing-md);
    margin: calc(var(--spacing-md) * -1);
    margin-top: var(--spacing-md);
    background-color: var(--color-gray-light);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/*
   BADGE UTILITIES - Consistent badge styling
 */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.badge-primary {
    background-color: var(--primary-blue);
    color: var(--color-white);
}

.badge-success {
    background-color: var(--color-success);
    color: var(--color-white);
}

.badge-danger {
    background-color: var(--color-danger);
    color: var(--color-white);
}

.badge-warning {
    background-color: var(--color-warning);
    color: var(--color-text);
}

.badge-department {
    background-color: var(--color-departments);
    color: var(--color-white);
}

.badge-task {
    background-color: var(--color-tasks);
    color: var(--color-white);
}

.badge-directive {
    background-color: var(--color-directives);
    color: var(--color-white);
}

/*
   SPACING UTILITIES - Consistent spacing
 */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--spacing-xs); }
.pt-2 { padding-top: var(--spacing-sm); }
.pt-3 { padding-top: var(--spacing-md); }
.pt-4 { padding-top: var(--spacing-lg); }
.pt-5 { padding-top: var(--spacing-xl); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--spacing-xs); }
.pb-2 { padding-bottom: var(--spacing-sm); }
.pb-3 { padding-bottom: var(--spacing-md); }
.pb-4 { padding-bottom: var(--spacing-lg); }
.pb-5 { padding-bottom: var(--spacing-xl); }

/*
   TEXT UTILITIES - Typography helpers
 */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--primary-blue); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-muted { color: var(--color-gray-dark); }

.font-bold { font-weight: 600; }
.font-normal { font-weight: normal; }

/*
   DISPLAY UTILITIES - Layout helpers
 */

.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }

.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }

/*
   ENTWICKLUNG GRAY/BLUE BUTTON VARIANTS - Municipal conservative design
 */

/* Municipal gray variants completely removed - all buttons now use standard styling */



/*
   SPECIALIZED BUTTON UTILITIES - Context-specific button styles
 */


/* Copy buttons in terminal output */
.copy-btn {
    background: #374151;
    color: #e5e7eb;
    border: 1px solid #4b5563;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.copy-btn:hover {
    background: #4b5563;
    color: white;
}


/* Unified Action Button - Municipal grade styling (replaces conflicting item-action-btn + btn-*-gray combinations) */
.action-btn,
.form-action-btn {
    background: #f8f9fa;
    border: 1px solid #003D83;
    color: black;
    padding: 8px;
    width: 32px;
    height: 32px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 500;
}

.action-btn:hover:not(:disabled),
.form-action-btn:hover:not(:disabled) {
    background: #e9ecef;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 61, 131, 0.2);
}

.action-btn:disabled,
.form-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Check/status buttons */
.btn-check {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--success-color, #10b981);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-check:hover:not(:disabled) {
    background: var(--success-hover, #059669);
    transform: translateY(-1px);
}

.btn-check:disabled {
    background: var(--border-gray);
    cursor: not-allowed;
    transform: none;
}

.btn-check .button-icon {
    font-size: var(--font-size-sm);
}

.btn-check.btn-missing {
    background: #f59e0b;
}

.btn-check.btn-missing:hover:not(:disabled) {
    background: #d97706;
}

.btn-check.btn-ok {
    background: #6b7280;
}

.btn-check.btn-ok:hover:not(:disabled) {
    background: #4b5563;
}

/* Clear search button */
.clear-search-btn {
    padding: var(--spacing-xs);
    border: 1px solid var(--border-gray);
    border-radius: var(--border-radius-sm);
    background: #fee2e2;
    color: #dc2626;
    cursor: pointer;
    font-size: var(--font-size-sm);
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-out;
    opacity: 1;
    transform: scale(1);
}

.clear-search-btn:hover {
    background: #fecaca;
    transform: scale(1.05);
}

.clear-search-btn[style*="display: none"] {
    opacity: 0;
    transform: scale(0.8);
}

/* Filter management buttons */
.clear-all-filters-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    background-color: var(--bg-white);
    color: var(--text-gray);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-all-filters-btn:hover {
    background: var(--bg-light);
    transform: translateY(-1px);
}

.clear-filters-btn {
    align-self: flex-start;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    background-color: var(--bg-light);
    color: var(--text-gray);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-filters-btn:hover {
    background: var(--bg-white);
    transform: translateY(-1px);
}

/* Assignment and filter buttons */
.assign-filter-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: background-color 0.2s ease;
}

.assign-filter-btn:hover {
    background-color: var(--primary-color-dark);
}

.filter-assign-btn {
    margin-top: var(--spacing-xs);
    width: 100%;
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.filter-assign-btn:hover {
    background-color: var(--primary-color-dark);
}

@media (max-width: 600px) {
    .filter-assign-btn {
        padding: var(--spacing-sm);
        font-size: var(--font-size-md);
    }
}

/*
   RESPONSIVE UTILITIES - Mobile-first helpers
 */

@media (max-width: 768px) {
    .mobile-hide { display: none; }
    .mobile-block { display: block; }
    .mobile-full { width: 100%; }
}

@media (min-width: 769px) {
    .desktop-hide { display: none; }
    .desktop-block { display: block; }
}