/**
 * HomeOS AI — components.css
 * Reużywalne komponenty Material Design 3
 * ============================================================
 */

/* ============================================================
   Buttons — MD3
   ============================================================ */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             .5rem;
    padding:         .625rem 1.5rem;
    border-radius:   var(--md-shape-full);
    font-size:       var(--md-label-large);
    font-weight:     500;
    font-family:     var(--font-family);
    line-height:     1.25;
    cursor:          pointer;
    border:          none;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background-color var(--md-motion-short2) var(--md-easing-standard),
                     box-shadow       var(--md-motion-short2) var(--md-easing-standard),
                     color            var(--md-motion-short2) var(--md-easing-standard);
    position:        relative;
    overflow:        hidden;
    user-select:     none;
}

/* Ripple effect layer */
.btn::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: currentColor;
    opacity:    0;
    transition: opacity var(--md-motion-short2) var(--md-easing-standard);
}
.btn:hover::after  { opacity: .08; }
.btn:focus::after  { opacity: .12; }
.btn:active::after { opacity: .16; }

/* Filled */
.btn--filled {
    background: var(--md-primary);
    color:      var(--md-on-primary);
    box-shadow: var(--md-elevation-0);
}
.btn--filled:hover {
    box-shadow: var(--md-elevation-1);
    text-decoration: none;
}

/* Tonal */
.btn--tonal {
    background: var(--md-secondary-container);
    color:      var(--md-on-secondary-container);
}
.btn--tonal:hover {
    box-shadow: var(--md-elevation-1);
    text-decoration: none;
}

/* Outlined */
.btn--outlined {
    background:  transparent;
    color:       var(--md-primary);
    border:      1px solid var(--md-outline);
}
.btn--outlined:hover { text-decoration: none; border-color: var(--md-primary); }

/* Text */
.btn--text {
    background:  transparent;
    color:       var(--md-primary);
    padding:     .625rem 1rem;
}
.btn--text:hover { text-decoration: none; }

/* Elevated */
.btn--elevated {
    background: var(--md-surface-1);
    color:      var(--md-primary);
    box-shadow: var(--md-elevation-1);
}
.btn--elevated:hover {
    box-shadow: var(--md-elevation-2);
    text-decoration: none;
}

/* Danger */
.btn--danger {
    background: var(--md-error);
    color:      var(--md-on-error);
}
.btn--danger:hover { box-shadow: var(--md-elevation-1); text-decoration: none; }

/* Sizes */
.btn--sm { padding: .375rem 1rem; font-size: var(--md-label-medium); }
.btn--lg { padding: .875rem 2rem; font-size: var(--md-title-small); }
.btn--full { width: 100%; }

/* Icon-only button */
.icon-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    border:          none;
    background:      transparent;
    color:           var(--md-on-surface-variant);
    cursor:          pointer;
    transition:      background-color var(--md-motion-short2) var(--md-easing-standard),
                     color            var(--md-motion-short2) var(--md-easing-standard);
    flex-shrink:     0;
}
.icon-btn:hover  { background: var(--md-state-hover); color: var(--md-on-surface); }
.icon-btn:focus  { background: var(--md-state-focus); }
.icon-btn:active { background: var(--md-state-pressed); }
.icon-btn--lg { width: 48px; height: 48px; }

/* FAB — Floating Action Button */
.fab {
    position:    fixed;
    bottom:      2rem;
    right:       2rem;
    width:       56px;
    height:      56px;
    border-radius: var(--md-shape-large);
    background:  var(--md-primary-container);
    color:       var(--md-on-primary-container);
    display:     flex;
    align-items: center;
    justify-content: center;
    box-shadow:  var(--md-elevation-3);
    cursor:      pointer;
    border:      none;
    transition:  box-shadow var(--md-motion-short2) var(--md-easing-standard),
                 transform  var(--md-motion-short2) var(--md-easing-standard);
    z-index:     50;
    text-decoration: none;
}
.fab:hover  { box-shadow: var(--md-elevation-4); transform: scale(1.05); text-decoration: none; }
.fab:active { box-shadow: var(--md-elevation-2); transform: scale(.98); }
.fab--extended { width: auto; padding: 0 1.5rem; gap: .75rem; font-size: var(--md-label-large); font-weight: 500; }
.fab--secondary {
    background: var(--md-secondary-container);
    color:      var(--md-on-secondary-container);
}

/* ============================================================
   Cards — MD3
   ============================================================ */
.card {
    background:    var(--md-surface-1);
    border-radius: var(--md-shape-medium);
    padding:       var(--card-padding);
    transition:    box-shadow var(--md-motion-short2) var(--md-easing-standard);
}
.card--outlined {
    background: transparent;
    border: 1px solid var(--md-outline-variant);
}
.card--elevated {
    background: var(--md-surface-1);
    box-shadow: var(--md-elevation-1);
}
.card--filled {
    background: var(--md-surface-variant);
}
.card--interactive {
    cursor: pointer;
    text-decoration: none;
    display: block;
    color: inherit;
}
.card--interactive:hover {
    box-shadow: var(--md-elevation-2);
    background: var(--md-surface-2);
    text-decoration: none;
}
.card--interactive:active { box-shadow: var(--md-elevation-1); }

.card__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--gap-sm);
    margin-bottom:   var(--card-padding);
}
.card__title   { font-size: var(--md-title-medium); font-weight: 500; }
.card__subtitle { font-size: var(--md-body-small); color: var(--md-on-surface-variant); margin-top: .25rem; }
.card__icon {
    width:           48px;
    height:          48px;
    border-radius:   var(--md-shape-small);
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--md-primary-container);
    color:           var(--md-on-primary-container);
    flex-shrink:     0;
}
.card__body  {}
.card__footer {
    display:      flex;
    align-items:  center;
    gap:          var(--gap-sm);
    margin-top:   var(--card-padding);
    padding-top:  var(--card-padding);
    border-top:   1px solid var(--md-outline-variant);
}

/* Stat card */
.stat-card {
    background:    var(--md-surface-1);
    border-radius: var(--md-shape-medium);
    padding:       var(--card-padding);
    display:       flex;
    flex-direction: column;
    gap:           .5rem;
}
.stat-card__label { font-size: var(--md-label-medium); color: var(--md-on-surface-variant); text-transform: uppercase; letter-spacing: 1px; }
.stat-card__value { font-size: var(--md-headline-medium); font-weight: 500; color: var(--md-on-surface); }
.stat-card__change {
    font-size:  var(--md-body-small);
    display:    flex;
    align-items: center;
    gap:        .25rem;
}
.stat-card__change--up   { color: var(--md-success); }
.stat-card__change--down { color: var(--md-error); }

/* ============================================================
   Forms — MD3 Outlined Text Field
   ============================================================ */
.form-field {
    display:       flex;
    flex-direction: column;
    gap:           .375rem;
    position:      relative;
}

.form-field--row {
    flex-direction: row;
    align-items:    center;
}

.form-field__label {
    font-size:   var(--md-label-large);
    font-weight: 500;
    color:       var(--md-on-surface-variant);
    display:     flex;
    align-items: center;
    justify-content: space-between;
}

.form-field__label-link {
    font-size:   var(--md-body-small);
    font-weight: 400;
}

.form-field__input-wrap {
    position:    relative;
    display:     flex;
    align-items: center;
}

.form-field__icon {
    position:  absolute;
    left:      .875rem;
    color:     var(--md-on-surface-variant);
    font-size: 20px;
    pointer-events: none;
    transition: color var(--md-motion-short2);
}

.form-field__input {
    width:         100%;
    height:        56px;
    padding:       0 1rem;
    padding-left:  3rem;
    background:    #0b0f14;
    border:        1px solid var(--md-outline);
    border-radius: var(--md-shape-extra-small);
    color:         var(--md-on-surface);
    font-size:     var(--md-body-large);
    font-family:   var(--font-family);
    transition:    border-color var(--md-motion-short2),
                   box-shadow   var(--md-motion-short2);
    outline:       none;
}

.form-field__input::placeholder { color: var(--md-on-surface-variant); opacity: .6; }
.form-field__input:hover  { border-color: var(--md-on-surface); }
.form-field__input:focus  {
    border-color: var(--md-primary);
    border-width: 2px;
    box-shadow:   0 0 0 3px var(--md-focus-ring);
}
.form-field__input:focus + .form-field__icon,
.form-field__input-wrap:focus-within .form-field__icon { color: var(--md-primary); }

.form-field__input--error { border-color: var(--md-error); }
.form-field__input--error:focus { border-color: var(--md-error); box-shadow: 0 0 0 3px rgba(179,38,30,.15); }

.form-field__error {
    font-size: var(--md-body-small);
    color:     var(--md-error);
    display:   flex;
    align-items: center;
    gap: .25rem;
}

.form-field__helper {
    font-size: var(--md-body-small);
    color:     var(--md-on-surface-variant);
}

.form-field__toggle-password {
    position:    absolute;
    right:       .5rem;
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       var(--md-on-surface-variant);
    padding:     .5rem;
    border-radius: 50%;
}
.form-field__toggle-password:hover { background: var(--md-state-hover); }

textarea.form-field__input {
    height:     auto;
    padding:    .875rem 1rem .875rem 3rem;
    resize:     vertical;
    min-height: 100px;
}

select.form-field__input {
    appearance: none;
    cursor:     pointer;
    padding-right: 2.5rem;
}

.form-field__select-arrow {
    position:  absolute;
    right:     .875rem;
    pointer-events: none;
    color:     var(--md-on-surface-variant);
}

/* Checkbox */
.checkbox {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    cursor:      pointer;
    user-select: none;
}
.checkbox input[type="checkbox"] {
    width:         20px;
    height:        20px;
    border:        2px solid var(--md-outline);
    border-radius: var(--md-shape-extra-small);
    appearance:    none;
    cursor:        pointer;
    background:    transparent;
    transition:    background var(--md-motion-short2), border-color var(--md-motion-short2);
    flex-shrink:   0;
    display:       flex;
    align-items:   center;
    justify-content: center;
}
.checkbox input[type="checkbox"]:checked {
    background:    var(--md-primary);
    border-color:  var(--md-primary);
}
.checkbox input[type="checkbox"]:checked::after {
    content:     '✓';
    color:       var(--md-on-primary);
    font-size:   14px;
    font-weight: 700;
}
.checkbox__label { font-size: var(--md-body-medium); color: var(--md-on-surface); }

/* ============================================================
   Tables
   ============================================================ */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--md-shape-medium);
    border: 1px solid var(--md-outline-variant);
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--md-body-medium);
}
.table th {
    background:  var(--md-surface-3);
    color:       var(--md-on-surface-variant);
    font-size:   var(--md-label-medium);
    font-weight: 500;
    text-align:  left;
    padding:     .75rem 1rem;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.table td {
    padding:    .875rem 1rem;
    border-top: 1px solid var(--md-outline-variant);
    color:      var(--md-on-surface);
    vertical-align: middle;
}
.table tbody tr:hover td { background: var(--md-state-hover); }
.table tbody tr:first-child td { border-top: none; }

/* ============================================================
   Badges / Chips
   ============================================================ */
.badge {
    display:       inline-flex;
    align-items:   center;
    gap:           .25rem;
    padding:       .2em .75em;
    border-radius: var(--md-shape-full);
    font-size:     var(--md-label-small);
    font-weight:   500;
    line-height:   1.5;
    white-space:   nowrap;
}
.badge--primary   { background: var(--md-primary-container);   color: var(--md-on-primary-container); }
.badge--secondary { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.badge--success   { background: var(--md-success-container);   color: var(--md-on-success-container); }
.badge--error     { background: var(--md-error-container);     color: var(--md-on-error-container); }
.badge--warning   { background: var(--md-warning-container);   color: var(--md-on-warning-container); }
.badge--surface   { background: var(--md-surface-variant);     color: var(--md-on-surface-variant); }

.chip {
    display:       inline-flex;
    align-items:   center;
    gap:           .375rem;
    padding:       .375rem .875rem;
    border-radius: var(--md-shape-small);
    font-size:     var(--md-label-large);
    border:        1px solid var(--md-outline-variant);
    cursor:        pointer;
    background:    transparent;
    color:         var(--md-on-surface-variant);
    transition:    background var(--md-motion-short2), border-color var(--md-motion-short2);
}
.chip:hover { background: var(--md-state-hover); border-color: var(--md-on-surface-variant); }
.chip--active { background: var(--md-secondary-container); border-color: transparent; color: var(--md-on-secondary-container); }
.chip .material-symbols-rounded { font-size: 18px; }

/* ============================================================
   Modal — MD3 Dialog
   ============================================================ */
.modal {
    position:  fixed;
    inset:     0;
    z-index:   var(--z-modal);
    display:   flex;
    align-items: center;
    justify-content: center;
    padding:   1rem;
}
.modal[hidden] { display: none; }

.modal__backdrop {
    position:   absolute;
    inset:      0;
    background: var(--md-scrim);
    z-index:    -1;
    animation:  fadeIn var(--md-motion-medium2) var(--md-easing-standard);
}

.modal__container {
    background:    var(--md-surface-3);
    border-radius: var(--md-shape-extra-large);
    padding:       1.5rem;
    max-width:     560px;
    width:         100%;
    box-shadow:    var(--md-elevation-5);
    animation:     scaleIn var(--md-motion-medium3) var(--md-easing-decelerate);
    position:      relative;
    max-height:    90vh;
    overflow-y:    auto;
}
.modal__container--search {
    max-width: 680px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--md-shape-extra-large);
}

.modal__header {
    display:      flex;
    align-items:  center;
    gap:          .75rem;
    margin-bottom: 1rem;
}
.modal__title { font-size: var(--md-headline-small); font-weight: 500; flex: 1; }
.modal__body  { color: var(--md-on-surface-variant); margin-bottom: 1.5rem; }
.modal__footer {
    display:         flex;
    justify-content: flex-end;
    gap:             .5rem;
}

/* ============================================================
   Dropdown
   ============================================================ */
.dropdown {
    position:      absolute;
    top:           calc(100% + .5rem);
    left:          0;
    background:    var(--md-surface-3);
    border-radius: var(--md-shape-medium);
    box-shadow:    var(--md-elevation-3);
    min-width:     200px;
    z-index:       var(--z-dropdown);
    overflow:      hidden;
    animation:     scaleIn var(--md-motion-short3) var(--md-easing-decelerate);
    transform-origin: top left;
}
.dropdown--right { left: auto; right: 0; transform-origin: top right; }
.dropdown[hidden] { display: none; }

.dropdown__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .75rem 1rem;
    border-bottom:   1px solid var(--md-outline-variant);
}
.dropdown__title   { font-size: var(--md-title-small); font-weight: 500; }
.dropdown__body    { max-height: 400px; overflow-y: auto; }
.dropdown__footer  { padding: .5rem; border-top: 1px solid var(--md-outline-variant); }
.dropdown__divider { height: 1px; background: var(--md-outline-variant); margin: .25rem 0; }
.dropdown__empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             .5rem;
    padding:         2rem 1rem;
    color:           var(--md-on-surface-variant);
    font-size:       var(--md-body-small);
}
.dropdown__empty .material-symbols-rounded { font-size: 32px; opacity: .5; }

.dropdown__item {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    padding:     .75rem 1rem;
    color:       var(--md-on-surface);
    font-size:   var(--md-body-medium);
    cursor:      pointer;
    transition:  background var(--md-motion-short1);
    text-decoration: none;
    border:      none;
    background:  none;
    width:       100%;
    text-align:  left;
}
.dropdown__item:hover  { background: var(--md-state-hover); text-decoration: none; }
.dropdown__item--danger { color: var(--md-error); }
.dropdown__item .material-symbols-rounded { font-size: 20px; color: var(--md-on-surface-variant); flex-shrink: 0; }
.dropdown__item--danger .material-symbols-rounded { color: var(--md-error); }

.dropdown__user-info {
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.dropdown__user-info strong { font-size: var(--md-body-medium); font-weight: 500; }
.dropdown__user-info small  { font-size: var(--md-body-small); color: var(--md-on-surface-variant); }

/* ============================================================
   Alerts
   ============================================================ */
.alert {
    display:       flex;
    align-items:   flex-start;
    gap:           .75rem;
    padding:       .875rem 1.25rem;
    border-radius: var(--md-shape-small);
    font-size:     var(--md-body-medium);
    line-height:   1.5;
}
.alert--error   { background: var(--md-error-container);   color: var(--md-on-error-container); }
.alert--success { background: var(--md-success-container); color: var(--md-on-success-container); }
.alert--warning { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.alert--info    { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.alert .material-symbols-rounded { flex-shrink: 0; margin-top: .1rem; }

/* ============================================================
   Search Modal
   ============================================================ */
.search-modal {
    display: flex;
    flex-direction: column;
}
.search-modal__input-wrap {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    padding:     1rem 1.25rem;
    border-bottom: 1px solid var(--md-outline-variant);
}
.search-modal__icon  { color: var(--md-on-surface-variant); font-size: 24px; flex-shrink: 0; }
.search-modal__input {
    flex:        1;
    border:      none;
    background:  transparent;
    color:       var(--md-on-surface);
    font-size:   var(--md-title-medium);
    outline:     none;
    font-family: var(--font-family);
}
.search-modal__input::placeholder { color: var(--md-on-surface-variant); }
.search-modal__esc {
    background:  var(--md-surface-variant);
    color:       var(--md-on-surface-variant);
    border-radius: var(--md-shape-extra-small);
    padding:     .2em .5em;
    font-size:   var(--md-label-small);
    font-family: var(--font-family-mono);
}
.search-modal__results {
    padding:   .5rem;
    max-height: 400px;
    overflow-y: auto;
}
.search-modal__hint {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .5rem;
    padding:        2rem;
    color:          var(--md-on-surface-variant);
    font-size:      var(--md-body-small);
}
.search-modal__hint .material-symbols-rounded { font-size: 32px; opacity: .5; }

/* ============================================================
   Empty state
   ============================================================ */
.empty-state {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    gap:             1rem;
    padding:         3rem 1rem;
    color:           var(--md-on-surface-variant);
}
.empty-state__icon {
    width:        80px;
    height:       80px;
    border-radius: 50%;
    background:   var(--md-surface-variant);
    display:      flex;
    align-items:  center;
    justify-content: center;
}
.empty-state__icon .material-symbols-rounded { font-size: 40px; opacity: .7; }
.empty-state__title   { font-size: var(--md-title-large); font-weight: 500; color: var(--md-on-surface); }
.empty-state__message { font-size: var(--md-body-medium); max-width: 360px; }

/* ============================================================
   Divider
   ============================================================ */
.divider { height: 1px; background: var(--md-outline-variant); margin: var(--gap-md) 0; }
.divider--vertical { width: 1px; height: auto; align-self: stretch; margin: 0 var(--gap-md); }

/* ============================================================
   Avatar
   ============================================================ */
.avatar {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--md-primary-container);
    color:           var(--md-on-primary-container);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       var(--md-title-small);
    font-weight:     500;
    overflow:        hidden;
    flex-shrink:     0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 32px; height: 32px; font-size: var(--md-label-medium); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--md-title-medium); }
.avatar--xl { width: 80px; height: 80px; font-size: var(--md-headline-small); }

/* ============================================================
   Pagination
   ============================================================ */
.pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .25rem;
    flex-wrap:       wrap;
    padding:         var(--gap-md) 0;
}
.pagination__btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    border:          none;
    background:      transparent;
    color:           var(--md-on-surface-variant);
    font-size:       var(--md-label-large);
    cursor:          pointer;
    transition:      background var(--md-motion-short2), color var(--md-motion-short2);
    text-decoration: none;
}
.pagination__btn:hover  { background: var(--md-state-hover); color: var(--md-on-surface); text-decoration: none; }
.pagination__btn--active {
    background: var(--md-primary);
    color:      var(--md-on-primary);
}
.pagination__btn--active:hover { background: var(--md-primary); }
.pagination__btn:disabled { opacity: .38; cursor: not-allowed; }