/* ═══════════════════════════════════════════════════════════════
   Azure Portal-Inspired Design System
   Tables & Forms - Light/Dark Mode Support
   ════════════════════════════════════════════════════════════════

   Design Principles:
   - Compact, data-dense layouts
   - Consistent spacing and typography
   - Professional, enterprise-grade aesthetic
   - Excellent readability in both themes
   - WCAG 2.1 AA compliant
   ═══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Design Tokens - Azure Portal Style
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root,
[data-bs-theme="light"] {
    /* Table Colors - Light Mode */
    --azure-table-bg: #ffffff;
    --azure-table-header-bg: #f3f2f1;
    --azure-table-header-text: #323130;
    --azure-table-border: #edebe9;
    --azure-table-row-hover: #f3f2f1;
    --azure-table-row-selected: #edf6fd;
    --azure-table-text: #323130;
    --azure-table-text-secondary: #605e5c;

    /* Form Colors - Light Mode */
    --azure-form-bg: #ffffff;
    --azure-form-border: #8a8886;
    --azure-form-border-hover: #323130;
    --azure-form-border-focus: #0078d4;
    --azure-form-text: #323130;
    --azure-form-label: #323130;
    --azure-form-placeholder: #605e5c;
    --azure-form-disabled-bg: #f3f2f1;
    --azure-form-disabled-text: #a19f9d;

    /* Validation Colors */
    --azure-success: #107c10;
    --azure-success-bg: #dff6dd;
    --azure-error: #a80000;
    --azure-error-bg: #fde7e9;
    --azure-warning: #797673;
    --azure-warning-bg: #fff4ce;
    --azure-info: #0078d4;
    --azure-info-bg: #deecf9;

    /* Spacing - Azure Portal uses 4px grid */
    --azure-spacing-1: 4px;
    --azure-spacing-2: 8px;
    --azure-spacing-3: 12px;
    --azure-spacing-4: 16px;
    --azure-spacing-5: 20px;
    --azure-spacing-6: 24px;
    --azure-spacing-8: 32px;
}

[data-bs-theme="dark"] {
    /* Table Colors - Dark Mode */
    --azure-table-bg: #262624;
    --azure-table-header-bg: #30302E;
    --azure-table-header-text: #e0e0e0;
    --azure-table-border: #3e3e42;
    --azure-table-row-hover: #30302E;
    --azure-table-row-selected: #094771;
    --azure-table-text: #e0e0e0;
    --azure-table-text-secondary: #b3b3b3;

    /* Form Colors - Dark Mode */
    --azure-form-bg: #262624;
    --azure-form-border: #5a5a5a;
    --azure-form-border-hover: #8a8a8a;
    --azure-form-border-focus: #0078d4;
    --azure-form-text: #e0e0e0;
    --azure-form-label: #e0e0e0;
    --azure-form-placeholder: #8a8a8a;
    --azure-form-disabled-bg: #30302E;
    --azure-form-disabled-text: #5a5a5a;

    /* Validation Colors - Dark Mode */
    --azure-success: #6ccb5f;
    --azure-success-bg: #2d3a2e;
    --azure-error: #f48771;
    --azure-error-bg: #3d2b2e;
    --azure-warning: #ffb900;
    --azure-warning-bg: #3d3a2e;
    --azure-info: #4cc2ff;
    --azure-info-bg: #2d3541;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLE SYSTEM - Azure Portal Style
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Base Table Wrapper */
.azure-table-wrapper {
    background: var(--azure-table-bg);
    border: 1px solid var(--azure-table-border);
    border-radius: 4px;
    overflow: hidden;
    transition: background 200ms ease, border-color 200ms ease;
}

/* Azure Table */
.azure-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--azure-table-text);
    background: var(--azure-table-bg);
    margin: 0;
    transition: background 200ms ease;
}

/* Table Header */
.azure-table thead {
    background: var(--azure-table-header-bg);
    position: sticky;
    top: 0;
    z-index: 10;
    transition: background 200ms ease;
}

.azure-table thead th {
    padding: var(--azure-spacing-2) var(--azure-spacing-4);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    color: var(--azure-table-header-text);
    border-bottom: 1px solid var(--azure-table-border);
    white-space: nowrap;
    user-select: none;
    letter-spacing: 0.01em;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* Sortable Headers */
.azure-table thead th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: var(--azure-spacing-6);
}

.azure-table thead th.sortable:hover {
    background: var(--azure-table-row-hover);
}

.azure-table thead th.sortable::after {
    content: '⇅';
    position: absolute;
    right: var(--azure-spacing-2);
    opacity: 0.3;
    font-size: 11px;
}

.azure-table thead th.sorted-asc::after {
    content: '↑';
    opacity: 1;
}

.azure-table thead th.sorted-desc::after {
    content: '↓';
    opacity: 1;
}

/* Table Body */
.azure-table tbody tr {
    border-bottom: 1px solid var(--azure-table-border);
    transition: background 150ms ease, border-color 200ms ease;
}

.azure-table tbody tr:hover {
    background: var(--azure-table-row-hover);
}

.azure-table tbody tr.selected {
    background: var(--azure-table-row-selected);
}

.azure-table tbody tr:last-child {
    border-bottom: none;
}

.azure-table tbody td {
    padding: var(--azure-spacing-3) var(--azure-spacing-4);
    font-size: 13px;
    color: var(--azure-table-text);
    vertical-align: middle;
    transition: color 200ms ease;
}

/* Compact Table Variant */
.azure-table-compact tbody td,
.azure-table-compact thead th {
    padding: var(--azure-spacing-2) var(--azure-spacing-3);
}

/* Striped Table Variant */
.azure-table-striped tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

[data-bs-theme="dark"] .azure-table-striped tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

/* Bordered Table Variant */
.azure-table-bordered {
    border: 1px solid var(--azure-table-border);
}

.azure-table-bordered thead th,
.azure-table-bordered tbody td {
    border: 1px solid var(--azure-table-border);
}

/* Table Cell Alignment */
.azure-table td.text-center,
.azure-table th.text-center {
    text-align: center;
}

.azure-table td.text-end,
.azure-table th.text-end {
    text-align: right;
}

/* Table Actions Column */
.azure-table-actions {
    width: 120px;
    text-align: right;
    white-space: nowrap;
}

.azure-table-actions-group {
    display: inline-flex;
    gap: var(--azure-spacing-1);
    opacity: 0;
    transition: opacity 150ms ease;
}

.azure-table tbody tr:hover .azure-table-actions-group,
.azure-table tbody tr:focus-within .azure-table-actions-group {
    opacity: 1;
}

.azure-table-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--azure-table-text-secondary);
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
    transition: all 150ms ease;
}

.azure-table-action-btn:hover {
    background: var(--azure-table-row-hover);
    color: var(--azure-table-text);
    border-color: var(--azure-table-border);
}

.azure-table-action-btn:active {
    transform: scale(0.95);
}

/* Table Status Badges */
.azure-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--azure-spacing-1);
    padding: 2px var(--azure-spacing-2);
    border-radius: 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

.azure-status-badge-success {
    background: var(--azure-success-bg);
    color: var(--azure-success);
}

.azure-status-badge-error {
    background: var(--azure-error-bg);
    color: var(--azure-error);
}

.azure-status-badge-warning {
    background: var(--azure-warning-bg);
    color: var(--azure-warning);
}

.azure-status-badge-info {
    background: var(--azure-info-bg);
    color: var(--azure-info);
}

/* Table Empty State */
.azure-table-empty {
    padding: var(--azure-spacing-8);
    text-align: center;
    color: var(--azure-table-text-secondary);
    font-size: 14px;
}

.azure-table-empty-icon {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: var(--azure-spacing-3);
}

/* Table Loading State */
.azure-table-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.azure-table-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid var(--azure-info);
    border-top-color: transparent;
    border-radius: 50%;
    animation: azure-spin 0.8s linear infinite;
}

@keyframes azure-spin {
    to { transform: rotate(360deg); }
}

/* Checkbox Column */
.azure-table-checkbox {
    width: 40px;
    text-align: center;
}

.azure-table-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FORM SYSTEM - Azure Portal Style
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Form Container */
.azure-form {
    max-width: 100%;
}

/* Form Section */
.azure-form-section {
    margin-bottom: var(--azure-spacing-6);
}

.azure-form-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--azure-form-label);
    margin-bottom: var(--azure-spacing-4);
    padding-bottom: var(--azure-spacing-2);
    border-bottom: 1px solid var(--azure-table-border);
    transition: color 200ms ease, border-color 200ms ease;
}

.azure-form-section-subtitle {
    font-size: 13px;
    color: var(--azure-table-text-secondary);
    margin-bottom: var(--azure-spacing-4);
}

/* Form Group */
.azure-form-group {
    margin-bottom: var(--azure-spacing-4);
}

.azure-form-group-inline {
    display: flex;
    align-items: center;
    gap: var(--azure-spacing-4);
}

/* Form Label */
.azure-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--azure-form-label);
    margin-bottom: var(--azure-spacing-1);
    transition: color 200ms ease;
}

.azure-form-label-required::after {
    content: ' *';
    color: var(--azure-error);
}

.azure-form-label-optional {
    font-weight: 400;
    color: var(--azure-table-text-secondary);
    margin-left: var(--azure-spacing-1);
}

/* Form Input */
.azure-form-input,
.azure-form-select,
.azure-form-textarea {
    width: 100%;
    padding: var(--azure-spacing-2) var(--azure-spacing-3);
    font-size: 13px;
    font-family: inherit;
    color: var(--azure-form-text);
    background: var(--azure-form-bg);
    border: 1px solid var(--azure-form-border);
    border-radius: 2px;
    outline: none;
    transition: all 150ms ease;
}

.azure-form-input::placeholder,
.azure-form-textarea::placeholder {
    color: var(--azure-form-placeholder);
}

.azure-form-input:hover,
.azure-form-select:hover,
.azure-form-textarea:hover {
    border-color: var(--azure-form-border-hover);
}

.azure-form-input:focus,
.azure-form-select:focus,
.azure-form-textarea:focus {
    border-color: var(--azure-form-border-focus);
    box-shadow: 0 0 0 1px var(--azure-form-border-focus);
}

/* Textarea */
.azure-form-textarea {
    min-height: 80px;
    resize: vertical;
}

/* Input Sizes */
.azure-form-input-sm {
    padding: var(--azure-spacing-1) var(--azure-spacing-2);
    font-size: 12px;
}

.azure-form-input-lg {
    padding: var(--azure-spacing-3) var(--azure-spacing-4);
    font-size: 14px;
}

/* Disabled State */
.azure-form-input:disabled,
.azure-form-select:disabled,
.azure-form-textarea:disabled {
    background: var(--azure-form-disabled-bg);
    color: var(--azure-form-disabled-text);
    cursor: not-allowed;
    border-color: var(--azure-table-border);
}

/* Validation States */
.azure-form-group.is-valid .azure-form-input,
.azure-form-group.is-valid .azure-form-select,
.azure-form-group.is-valid .azure-form-textarea {
    border-color: var(--azure-success);
}

.azure-form-group.is-valid .azure-form-input:focus,
.azure-form-group.is-valid .azure-form-select:focus,
.azure-form-group.is-valid .azure-form-textarea:focus {
    box-shadow: 0 0 0 1px var(--azure-success);
}

.azure-form-group.is-invalid .azure-form-input,
.azure-form-group.is-invalid .azure-form-select,
.azure-form-group.is-invalid .azure-form-textarea {
    border-color: var(--azure-error);
}

.azure-form-group.is-invalid .azure-form-input:focus,
.azure-form-group.is-invalid .azure-form-select:focus,
.azure-form-group.is-invalid .azure-form-textarea:focus {
    box-shadow: 0 0 0 1px var(--azure-error);
}

/* Form Feedback */
.azure-form-feedback {
    display: flex;
    align-items: flex-start;
    gap: var(--azure-spacing-1);
    margin-top: var(--azure-spacing-1);
    font-size: 12px;
}

.azure-form-feedback-success {
    color: var(--azure-success);
}

.azure-form-feedback-error {
    color: var(--azure-error);
}

.azure-form-feedback-warning {
    color: var(--azure-warning);
}

.azure-form-feedback-info {
    color: var(--azure-info);
}

.azure-form-feedback-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Form Help Text */
.azure-form-help {
    display: block;
    margin-top: var(--azure-spacing-1);
    font-size: 12px;
    color: var(--azure-table-text-secondary);
    transition: color 200ms ease;
}

/* Checkbox & Radio */
.azure-form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--azure-spacing-2);
    margin-bottom: var(--azure-spacing-2);
}

.azure-form-check-input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid var(--azure-form-border);
    transition: all 150ms ease;
}

.azure-form-check-input:hover {
    border-color: var(--azure-form-border-hover);
}

.azure-form-check-input:focus {
    outline: 2px solid var(--azure-form-border-focus);
    outline-offset: 2px;
}

.azure-form-check-label {
    font-size: 13px;
    color: var(--azure-form-text);
    cursor: pointer;
    user-select: none;
    transition: color 200ms ease;
}

/* Input Group (with prefix/suffix) */
.azure-input-group {
    display: flex;
    align-items: stretch;
}

.azure-input-group .azure-form-input {
    flex: 1;
    border-radius: 0;
}

.azure-input-group .azure-form-input:first-child {
    border-radius: 2px 0 0 2px;
}

.azure-input-group .azure-form-input:last-child {
    border-radius: 0 2px 2px 0;
}

.azure-input-group-prefix,
.azure-input-group-suffix {
    display: flex;
    align-items: center;
    padding: 0 var(--azure-spacing-3);
    font-size: 13px;
    color: var(--azure-table-text-secondary);
    background: var(--azure-table-header-bg);
    border: 1px solid var(--azure-form-border);
    white-space: nowrap;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.azure-input-group-prefix {
    border-right: none;
    border-radius: 2px 0 0 2px;
}

.azure-input-group-suffix {
    border-left: none;
    border-radius: 0 2px 2px 0;
}

.azure-input-group-suffix-btn {
    height: 100%;
    padding: 0 var(--azure-spacing-3);
    font-size: 13px;
    color: var(--azure-form-text);
    background: var(--azure-table-header-bg);
    border: 1px solid var(--azure-form-border);
    border-left: none;
    border-radius: 0 2px 2px 0;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.azure-input-group-suffix-btn:hover {
    background: var(--azure-table-row-hover);
}

.azure-input-group-suffix-btn:active {
    background: var(--azure-table-border);
}

/* Form Actions */
.azure-form-actions {
    display: flex;
    align-items: center;
    gap: var(--azure-spacing-3);
    margin-top: var(--azure-spacing-6);
    padding-top: var(--azure-spacing-4);
    border-top: 1px solid var(--azure-table-border);
    transition: border-color 200ms ease;
}

.azure-form-actions-end {
    justify-content: flex-end;
}

/* Buttons - Azure Portal Style */
.azure-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--azure-spacing-2);
    padding: var(--azure-spacing-2) var(--azure-spacing-4);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    color: var(--azure-form-text);
    background: var(--azure-form-bg);
    border: 1px solid var(--azure-form-border);
    border-radius: 2px;
    cursor: pointer;
    outline: none;
    transition: all 150ms ease;
    user-select: none;
}

.azure-btn:hover {
    background: var(--azure-table-header-bg);
    border-color: var(--azure-form-border-hover);
}

.azure-btn:active {
    transform: scale(0.98);
}

.azure-btn:focus-visible {
    outline: 2px solid var(--azure-form-border-focus);
    outline-offset: 2px;
}

.azure-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary Button */
.azure-btn-primary {
    color: #ffffff;
    background: #0078d4;
    border-color: #0078d4;
}

.azure-btn-primary:hover {
    background: #106ebe;
    border-color: #106ebe;
    color: #ffffff;
}

/* Secondary Button */
.azure-btn-secondary {
    background: var(--azure-table-header-bg);
}

/* Danger Button */
.azure-btn-danger {
    color: #ffffff;
    background: var(--azure-error);
    border-color: var(--azure-error);
}

.azure-btn-danger:hover {
    background: #960000;
    border-color: #960000;
    color: #ffffff;
}

/* Success Button */
.azure-btn-success {
    color: #ffffff;
    background: var(--azure-success);
    border-color: var(--azure-success);
}

.azure-btn-success:hover {
    background: #0e6b0e;
    border-color: #0e6b0e;
    color: #ffffff;
}

/* Button Sizes */
.azure-btn-sm {
    padding: var(--azure-spacing-1) var(--azure-spacing-3);
    font-size: 12px;
}

.azure-btn-lg {
    padding: var(--azure-spacing-3) var(--azure-spacing-5);
    font-size: 14px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE DESIGN
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
    /* Stack table on mobile */
    .azure-table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack form groups */
    .azure-form-group-inline {
        flex-direction: column;
        align-items: stretch;
    }

    /* Stack form actions */
    .azure-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .azure-btn {
        width: 100%;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ACCESSIBILITY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .azure-table tbody tr:hover {
        outline: 2px solid currentColor;
    }

    .azure-form-input:focus,
    .azure-form-select:focus,
    .azure-form-textarea:focus {
        outline: 3px solid var(--azure-form-border-focus);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .azure-table tbody tr,
    .azure-form-input,
    .azure-form-select,
    .azure-form-textarea,
    .azure-btn {
        transition: none;
    }
}

/* Screen Reader Only */
.azure-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}