/*
|--------------------------------------------------------------------------
| AE UI - COMPONENTS
|--------------------------------------------------------------------------
|
| Komponenty aplikace:
|
| 1. Cards
| 2. Buttons
| 3. Forms
| 4. Badges
| 5. Alerts
| 6. Tables
| 7. Dropdowns
| 8. Empty states
|
*/


/*
|--------------------------------------------------------------------------
| CARDS
|--------------------------------------------------------------------------
*/

.card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    color: var(--ae-text);
    background: var(--ae-surface);

    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-md);

    box-shadow: var(--ae-shadow-xs);

    overflow: hidden;

    transition:
        background-color var(--ae-transition),
        border-color var(--ae-transition),
        box-shadow var(--ae-transition),
        transform var(--ae-transition);
}

.card-hover:hover {
    border-color: var(--ae-border-strong);
    box-shadow: var(--ae-shadow-sm);
    transform: translateY(-2px);
}

.card-header,
.card-body,
.card-footer {
    position: relative;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 64px;

    padding: 18px 20px;

    border-bottom: 1px solid var(--ae-border);
}

.card-title {
    margin: 0;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.card-subtitle {
    margin-top: 4px;

    font-size: 0.875rem;
    color: var(--ae-text-muted);
}

.card-body {
    flex: 1 1 auto;

    padding: 20px;
}

.card-footer {
    padding: 16px 20px;

    border-top: 1px solid var(--ae-border);

    background: var(--ae-bg-soft);
}

.card-compact .card-header {
    min-height: 52px;
    padding: 14px 16px;
}

.card-compact .card-body {
    padding: 16px;
}

.card-flat {
    box-shadow: none;
}

.card-borderless {
    border: 0;
}

.card-primary {
    border-color: rgba(227, 38, 46, 0.22);
}

.card-primary .card-header {
    background: var(--ae-primary-soft);
}


/*
|--------------------------------------------------------------------------
| STAT CARDS
|--------------------------------------------------------------------------
*/

.stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.stat-card-value {
    margin: 0;

    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 750;
    line-height: 1;
}

.stat-card-label {
    margin-top: 8px;

    color: var(--ae-text-muted);
    font-size: 0.9rem;
}

.stat-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    color: var(--ae-primary);
    background: var(--ae-primary-soft);

    border-radius: var(--ae-radius-md);

    font-size: 1.5rem;
}


/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding: 10px 16px;

    color: var(--ae-text);
    background: var(--ae-surface);

    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-sm);

    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1;

    white-space: nowrap;
    vertical-align: middle;

    cursor: pointer;
    user-select: none;

    transition:
        color var(--ae-transition-fast),
        background-color var(--ae-transition-fast),
        border-color var(--ae-transition-fast),
        box-shadow var(--ae-transition-fast),
        transform var(--ae-transition-fast);
}

.btn:hover {
    background: var(--ae-surface-muted);
    border-color: var(--ae-border-strong);
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible {
    outline: 3px solid rgba(227, 38, 46, 0.22);
    outline-offset: 2px;
}

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

.btn-primary {
    color: var(--ae-text-inverse);
    background: var(--ae-primary);
    border-color: var(--ae-primary);
}

.btn-primary:hover {
    color: var(--ae-text-inverse);
    background: var(--ae-primary-hover);
    border-color: var(--ae-primary-hover);
}

.btn-primary:active {
    background: var(--ae-primary-active);
    border-color: var(--ae-primary-active);
}

.btn-success {
    color: #ffffff;
    background: var(--ae-success);
    border-color: var(--ae-success);
}

.btn-warning {
    color: #ffffff;
    background: var(--ae-warning);
    border-color: var(--ae-warning);
}

.btn-danger {
    color: #ffffff;
    background: var(--ae-danger);
    border-color: var(--ae-danger);
}

.btn-info {
    color: #ffffff;
    background: var(--ae-info);
    border-color: var(--ae-info);
}

.btn-ghost {
    color: var(--ae-text);
    background: transparent;
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--ae-surface-muted);
}

.btn-outline-primary {
    color: var(--ae-primary);
    background: transparent;
    border-color: var(--ae-primary);
}

.btn-outline-primary:hover {
    color: #ffffff;
    background: var(--ae-primary);
}

.btn-sm {
    min-height: 34px;

    padding: 7px 11px;

    border-radius: var(--ae-radius-xs);

    font-size: 0.8125rem;
}

.btn-lg {
    min-height: 50px;

    padding: 14px 22px;

    border-radius: var(--ae-radius-md);

    font-size: 1rem;
}

.btn-icon {
    width: 42px;
    min-width: 42px;
    height: 42px;

    padding: 0;
}

.btn-icon.btn-sm {
    width: 34px;
    min-width: 34px;
    height: 34px;
}

.btn-icon.btn-lg {
    width: 50px;
    min-width: 50px;
    height: 50px;
}

.btn-block {
    display: flex;
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| BUTTON GROUP
|--------------------------------------------------------------------------
*/

.btn-group {
    display: inline-flex;
    align-items: stretch;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn + .btn {
    margin-left: -1px;
}

.btn-group .btn:first-child {
    border-top-left-radius: var(--ae-radius-sm);
    border-bottom-left-radius: var(--ae-radius-sm);
}

.btn-group .btn:last-child {
    border-top-right-radius: var(--ae-radius-sm);
    border-bottom-right-radius: var(--ae-radius-sm);
}


/*
|--------------------------------------------------------------------------
| FORMS
|--------------------------------------------------------------------------
*/

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;

    margin-bottom: 8px;

    color: var(--ae-text);
    font-size: 0.9rem;
    font-weight: 650;
}

.form-help {
    margin-top: 7px;

    color: var(--ae-text-muted);
    font-size: 0.8125rem;
}

.form-error {
    margin-top: 7px;

    color: var(--ae-danger);
    font-size: 0.8125rem;
    font-weight: 600;
}

.form-control,
.form-select,
.form-textarea {
    display: block;

    width: 100%;
    min-height: 44px;

    padding: 10px 13px;

    color: var(--ae-text);
    background: var(--ae-surface);

    border: 1px solid var(--ae-border-strong);
    border-radius: var(--ae-radius-sm);

    font-size: 0.9375rem;
    line-height: 1.4;

    outline: none;

    transition:
        color var(--ae-transition-fast),
        background-color var(--ae-transition-fast),
        border-color var(--ae-transition-fast),
        box-shadow var(--ae-transition-fast);
}

.form-control::placeholder,
.form-textarea::placeholder {
    color: var(--ae-text-muted);
    opacity: 0.8;
}

.form-control:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: var(--ae-text-muted);
}

.form-control:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--ae-primary);

    box-shadow:
        0 0 0 4px
        rgba(227, 38, 46, 0.11);
}

.form-control:disabled,
.form-select:disabled,
.form-textarea:disabled {
    color: var(--ae-text-muted);
    background: var(--ae-surface-muted);

    cursor: not-allowed;
}

.form-control.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    border-color: var(--ae-danger);

    box-shadow:
        0 0 0 4px
        rgba(217, 45, 58, 0.10);
}

.form-control.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
    border-color: var(--ae-success);

    box-shadow:
        0 0 0 4px
        rgba(31, 157, 102, 0.10);
}

.form-textarea {
    min-height: 120px;
}

.form-select {
    appearance: none;

    padding-right: 40px;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            var(--ae-text-muted) 50%
        ),
        linear-gradient(
            135deg,
            var(--ae-text-muted) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}


/*
|--------------------------------------------------------------------------
| INPUT GROUP
|--------------------------------------------------------------------------
*/

.input-group {
    display: flex;

    width: 100%;
}

.input-group .form-control {
    min-width: 0;

    border-radius: 0;
}

.input-group .form-control:first-child {
    border-top-left-radius: var(--ae-radius-sm);
    border-bottom-left-radius: var(--ae-radius-sm);
}

.input-group .form-control:last-child {
    border-top-right-radius: var(--ae-radius-sm);
    border-bottom-right-radius: var(--ae-radius-sm);
}

.input-group-addon,
.input-group-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 44px;

    padding: 0 12px;

    color: var(--ae-text-soft);
    background: var(--ae-surface-muted);

    border: 1px solid var(--ae-border-strong);
}

.input-group-addon:first-child,
.input-group-button:first-child {
    border-right: 0;

    border-top-left-radius: var(--ae-radius-sm);
    border-bottom-left-radius: var(--ae-radius-sm);
}

.input-group-addon:last-child,
.input-group-button:last-child {
    border-left: 0;

    border-top-right-radius: var(--ae-radius-sm);
    border-bottom-right-radius: var(--ae-radius-sm);
}

.input-group-button {
    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| CHECKBOX AND RADIO
|--------------------------------------------------------------------------
*/

.form-check {
    display: flex;
    align-items: flex-start;

    gap: 9px;
}

.form-check-input {
    appearance: none;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin: 2px 0 0;

    background: var(--ae-surface);

    border: 1px solid var(--ae-border-strong);
    border-radius: 5px;

    cursor: pointer;

    transition:
        background-color var(--ae-transition-fast),
        border-color var(--ae-transition-fast),
        box-shadow var(--ae-transition-fast);
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:checked {
    background-color: var(--ae-primary);
    border-color: var(--ae-primary);

    box-shadow:
        inset 0 0 0 4px var(--ae-primary);
}

.form-check-input[type="checkbox"]:checked {
    background-image:
        linear-gradient(
            45deg,
            transparent 45%,
            #ffffff 45%,
            #ffffff 55%,
            transparent 55%
        ),
        linear-gradient(
            -45deg,
            transparent 40%,
            #ffffff 40%,
            #ffffff 52%,
            transparent 52%
        );

    background-position:
        3px 7px,
        7px 5px;

    background-size:
        6px 6px,
        8px 8px;

    background-repeat: no-repeat;
}

.form-check-input[type="radio"]:checked {
    box-shadow:
        inset 0 0 0 4px var(--ae-primary),
        inset 0 0 0 7px var(--ae-surface);
}

.form-check-label {
    color: var(--ae-text-soft);
    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| SWITCH
|--------------------------------------------------------------------------
*/

.form-switch {
    display: inline-flex;
    align-items: center;

    gap: 10px;
}

.form-switch-input {
    appearance: none;

    position: relative;

    width: 42px;
    height: 24px;

    flex: 0 0 42px;

    background: var(--ae-border-strong);

    border: 0;
    border-radius: var(--ae-radius-round);

    cursor: pointer;

    transition: background-color var(--ae-transition-fast);
}

.form-switch-input::after {
    content: "";

    position: absolute;
    top: 3px;
    left: 3px;

    width: 18px;
    height: 18px;

    background: #ffffff;

    border-radius: 50%;

    box-shadow: var(--ae-shadow-xs);

    transition: transform var(--ae-transition-fast);
}

.form-switch-input:checked {
    background: var(--ae-primary);
}

.form-switch-input:checked::after {
    transform: translateX(18px);
}


/*
|--------------------------------------------------------------------------
| BADGES
|--------------------------------------------------------------------------
*/

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    min-height: 24px;

    padding: 4px 8px;

    color: var(--ae-text-soft);
    background: var(--ae-surface-muted);

    border: 1px solid transparent;
    border-radius: var(--ae-radius-round);

    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}

.badge-primary {
    color: var(--ae-primary);
    background: var(--ae-primary-soft);
}

.badge-success {
    color: var(--ae-success);
    background: rgba(31, 157, 102, 0.12);
}

.badge-warning {
    color: #b56d00;
    background: rgba(233, 161, 34, 0.15);
}

.badge-danger {
    color: var(--ae-danger);
    background: rgba(217, 45, 58, 0.12);
}

.badge-info {
    color: var(--ae-info);
    background: rgba(40, 120, 208, 0.12);
}

.badge-outline {
    color: var(--ae-text-soft);
    background: transparent;
    border-color: var(--ae-border);
}


/*
|--------------------------------------------------------------------------
| ALERTS
|--------------------------------------------------------------------------
*/

.alert {
    position: relative;

    padding: 14px 16px;

    color: var(--ae-text);
    background: var(--ae-surface);

    border: 1px solid var(--ae-border);
    border-left-width: 4px;
    border-radius: var(--ae-radius-sm);

    font-size: 0.9rem;
}

.alert-title {
    margin: 0 0 4px;

    font-weight: 750;
}

.alert p:last-child {
    margin-bottom: 0;
}

.alert-primary {
    background: var(--ae-primary-soft);
    border-color: rgba(227, 38, 46, 0.25);
    border-left-color: var(--ae-primary);
}

.alert-success {
    background: rgba(31, 157, 102, 0.10);
    border-color: rgba(31, 157, 102, 0.22);
    border-left-color: var(--ae-success);
}

.alert-warning {
    background: rgba(233, 161, 34, 0.11);
    border-color: rgba(233, 161, 34, 0.24);
    border-left-color: var(--ae-warning);
}

.alert-danger {
    background: rgba(217, 45, 58, 0.10);
    border-color: rgba(217, 45, 58, 0.22);
    border-left-color: var(--ae-danger);
}

.alert-info {
    background: rgba(40, 120, 208, 0.10);
    border-color: rgba(40, 120, 208, 0.22);
    border-left-color: var(--ae-info);
}


/*
|--------------------------------------------------------------------------
| TABLES
|--------------------------------------------------------------------------
*/

.table-responsive {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;

    color: var(--ae-text);

    background: transparent;
}

.table th,
.table td {
    padding: 13px 16px;

    border-bottom: 1px solid var(--ae-border);

    text-align: left;
    vertical-align: middle;
}

.table th {
    color: var(--ae-text-soft);
    background: var(--ae-bg-soft);

    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;

    white-space: nowrap;
}

.table tbody tr {
    transition: background-color var(--ae-transition-fast);
}

.table-hover tbody tr:hover {
    background: var(--ae-surface-muted);
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table-compact th,
.table-compact td {
    padding: 9px 12px;
}

.table-striped tbody tr:nth-child(even) {
    background: var(--ae-bg-soft);
}

.table-actions {
    width: 1%;
    white-space: nowrap;
}

.table-empty {
    padding: 48px 20px !important;

    color: var(--ae-text-muted);
    text-align: center !important;
}


/*
|--------------------------------------------------------------------------
| LIST
|--------------------------------------------------------------------------
*/

.list {
    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 0;

    list-style: none;
}

.list-item {
    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 52px;

    padding: 12px 16px;

    border-bottom: 1px solid var(--ae-border);
}

.list-item:last-child {
    border-bottom: 0;
}

.list-item-hover {
    transition: background-color var(--ae-transition-fast);
}

.list-item-hover:hover {
    background: var(--ae-surface-muted);
}


/*
|--------------------------------------------------------------------------
| DROPDOWN
|--------------------------------------------------------------------------
*/

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    z-index: 1000;

    top: calc(100% + 8px);
    right: 0;

    display: none;

    min-width: 190px;

    padding: 6px;

    color: var(--ae-text);
    background: var(--ae-surface-raised);

    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-sm);

    box-shadow: var(--ae-shadow-md);
}

.dropdown.open .dropdown-menu,
.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;

    gap: 10px;

    width: 100%;
    min-height: 38px;

    padding: 9px 11px;

    color: var(--ae-text-soft);
    background: transparent;

    border: 0;
    border-radius: var(--ae-radius-xs);

    font-size: 0.9rem;
    text-align: left;

    cursor: pointer;
}

.dropdown-item:hover {
    color: var(--ae-text);
    background: var(--ae-surface-muted);
}

.dropdown-item-danger {
    color: var(--ae-danger);
}

.dropdown-divider {
    height: 1px;

    margin: 6px 0;

    background: var(--ae-border);
}


/*
|--------------------------------------------------------------------------
| EMPTY STATE
|--------------------------------------------------------------------------
*/

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 260px;

    padding: 40px 24px;

    text-align: center;
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    margin-bottom: 20px;

    color: var(--ae-primary);
    background: var(--ae-primary-soft);

    border-radius: var(--ae-radius-lg);

    font-size: 2rem;
}

.empty-state-title {
    margin-bottom: 8px;

    font-size: 1.15rem;
    font-weight: 750;
}

.empty-state-text {
    max-width: 440px;

    margin-bottom: 20px;

    color: var(--ae-text-muted);
}


/*
|--------------------------------------------------------------------------
| DIVIDER
|--------------------------------------------------------------------------
*/

.divider {
    width: 100%;
    height: 1px;

    background: var(--ae-border);
}

.divider-vertical {
    width: 1px;
    min-height: 24px;

    background: var(--ae-border);
}


/*
|--------------------------------------------------------------------------
| MOBILE COMPONENTS
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {
    .card-header {
        min-height: 56px;
        padding: 15px 16px;
    }

    .card-body {
        padding: 16px;
    }

    .card-footer {
        padding: 14px 16px;
    }

    .btn-mobile-block {
        display: flex;
        width: 100%;
    }

    .table th,
    .table td {
        padding: 11px 13px;
    }
}