UNPKG

component-library-mustafa-akagunduz

Version:

Air Command System projesi için geliştirilmiş React component kütüphanesi

3 lines 30.3 kB
:root{--btn-primary-bg:#5a67d8;--btn-primary-hover:#4c51bf;--btn-primary-text:#fff;--btn-danger-bg:#e53e3e;--btn-danger-hover:#c53030;--btn-danger-text:#fff;--btn-success-bg:#38a169;--btn-success-hover:#2f855a;--btn-success-text:#fff;--btn-secondary-bg-light:#e2e8f0;--btn-secondary-hover-light:#cbd5e0;--btn-secondary-text-light:#2d3748;--btn-ghost-hover-light:#f7fafc;--btn-ghost-text-light:#4a5568}[data-theme=dark]{--btn-secondary-bg-dark:#4a5568;--btn-secondary-hover-dark:#2d3748;--btn-secondary-text-dark:#e2e8f0;--btn-ghost-hover-dark:#2d3748;--btn-ghost-text-dark:#a0aec0}.btn{align-items:center;border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:500;gap:8px;justify-content:center;outline:none;position:relative;transition:all .2s ease-in-out;white-space:nowrap}.btn:focus-visible{outline:2px solid var(--btn-primary-bg);outline-offset:2px}.btn--small{border-radius:6px;font-size:14px;padding:8px 12px}.btn--medium{font-size:16px;padding:12px 16px}.btn--large{border-radius:10px;font-size:18px;padding:16px 24px}.btn--primary{background-color:var(--btn-primary-bg);color:var(--btn-primary-text)}.btn--primary:hover:not(.btn--disabled){background-color:var(--btn-primary-hover);transform:translateY(-1px)}.btn--secondary{background-color:var(--btn-secondary-bg-light,var(--btn-secondary-bg-dark));border:1px solid transparent;color:var(--btn-secondary-text-light,var(--btn-secondary-text-dark))}[data-theme=dark] .btn--secondary{background-color:var(--btn-secondary-bg-dark);color:var(--btn-secondary-text-dark)}.btn--secondary:hover:not(.btn--disabled){background-color:var( --btn-secondary-hover-light,var(--btn-secondary-hover-dark) )}[data-theme=dark] .btn--secondary:hover:not(.btn--disabled){background-color:var(--btn-secondary-hover-dark)}.btn--danger{background-color:var(--btn-danger-bg);color:var(--btn-danger-text)}.btn--danger:hover:not(.btn--disabled){background-color:var(--btn-danger-hover);transform:translateY(-1px)}.btn--success{background-color:var(--btn-success-bg);color:var(--btn-success-text)}.btn--success:hover:not(.btn--disabled){background-color:var(--btn-success-hover);transform:translateY(-1px)}.btn--ghost{background-color:transparent;border:1px solid;color:var(--btn-ghost-text-light,var(--btn-ghost-text-dark))}[data-theme=dark] .btn--ghost{color:var(--btn-ghost-text-dark)}.btn--ghost:hover:not(.btn--disabled){background-color:var(--btn-ghost-hover-light,var(--btn-ghost-hover-dark))}[data-theme=dark] .btn--ghost:hover:not(.btn--disabled){background-color:var(--btn-ghost-hover-dark)}.btn--disabled{cursor:not-allowed;opacity:.5;transform:none!important}.btn--full-width{width:100%}.btn--loading .btn__content{opacity:.7}.btn__icon{align-items:center;display:flex;font-size:.9em}.btn__icon--left{margin-right:-4px}.btn__icon--right{margin-left:-4px}.btn__spinner{animation:spin 1s linear infinite;border:2px solid transparent;border-radius:50%;border-top-color:currentcolor;height:16px;width:16px}@keyframes spin{to{transform:rotate(1turn)}}.btn:active:not(.btn--disabled){transform:translateY(0)}.input{background-color:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:8px;box-sizing:border-box;color:var(--text-primary);font-family:inherit;font-size:16px;padding:12px 16px;transition:all .2s ease}.input--outlined{background-color:transparent;border:2px solid var(--border-primary)}.input:focus{background-color:var(--bg-primary);border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(76,111,255,.1);outline:none}.input:disabled{cursor:not-allowed;opacity:.6}.input--error,.input--error:focus{border-color:var(--error)}.input--error:focus{box-shadow:0 0 0 3px hsla(0,100%,71%,.1)}.input::placeholder{color:var(--text-tertiary)}.input--full-width{width:100%}.input--outlined:focus{background-color:var(--bg-secondary)}.login-form{background-color:var(--bg-primary);color:var(--text-primary);display:flex;flex-direction:column;gap:32px;max-width:360px;padding:40px 32px;width:100%}.login-form__header{text-align:center}.login-form__title{color:var(--accent-primary);font-size:32px;font-weight:400;line-height:1.2;margin-bottom:8px}.login-form__title-bold{font-weight:700}.login-form__subtitle{color:var(--text-secondary);font-size:20px;font-weight:400}[data-theme=dark] .login-form__title{color:#fff;font-size:32px;font-weight:400;line-height:1.2;margin-bottom:8px}[data-theme=dark] .login-form__title-bold{font-weight:700}[data-theme=dark] .login-form__subtitle{color:#fff!important;font-size:20px;font-weight:400}.login-form__form{display:flex;flex-direction:column;gap:24px}.login-form__field{display:flex;flex-direction:column;gap:8px}.login-form__label{color:var(--text-primary);font-size:12px;font-weight:500}[data-theme=dark] .login-form__label{color:#fff!important}[data-theme=light] .login-form__label{color:#000!important}.login-form__input{background-color:transparent!important;font-size:14px!important}.login-form__input::placeholder{color:#3f3f3f!important;font-size:14px}[data-theme=light] .login-form__input{border-color:#3f3f3f!important}[data-theme=light] .login-form__input,[data-theme=light] .login-form__input:focus{background-color:transparent!important;color:#3f3f3f!important}[data-theme=dark] .login-form__input{border-color:#3f3f3f!important}[data-theme=dark] .login-form__input,[data-theme=dark] .login-form__input:focus{background-color:transparent!important;color:#fff!important}.login-form__error{color:var(--error);font-size:12px;margin-top:4px}.login-form__login-error{align-items:center;background-color:transparent;border:1px solid #dc2626;border-radius:4px;display:flex;gap:12px;justify-content:center;margin:0;padding:12px 16px}.login-form__error-icon{flex-shrink:0;height:19px;width:20px}.login-form__error-text{color:#dc2626;font-size:14px;font-weight:500}.login-form__footer{border-top:none;bottom:24px;left:50%;padding-top:0;position:absolute;transform:translateX(-50%)}.login-form__controls,.login-form__footer{align-items:center;display:flex;justify-content:center}.login-form__controls{flex-direction:row;gap:12px}.login-form__theme-btn{align-items:center;background-color:transparent;border:1px solid hsla(0,0%,100%,.3);border-radius:4px;color:#fff;cursor:pointer;display:flex;height:32px;justify-content:center;padding:8px;transition:all .2s ease;width:32px}.login-form__theme-btn:hover{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.5)}.login-form__theme-btn svg{fill:#fff;color:#fff;height:16px;width:16px}.login-form__lang-btn{align-items:center;background-color:transparent;border:1px solid hsla(0,0%,100%,.3);border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:12px;font-weight:700;height:32px;justify-content:center;padding:0;transition:all .2s ease;width:32px}.login-form__lang-btn:hover{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.5)}[data-theme=light] .login-form__lang-btn,[data-theme=light] .login-form__theme-btn{background-color:transparent;border-color:#171215;color:#171215}[data-theme=light] .login-form__lang-btn:hover,[data-theme=light] .login-form__theme-btn:hover{background-color:#171215!important;border-color:#171215!important;color:#fff!important}[data-theme=light] .login-form__theme-btn svg{fill:#171215!important;color:#171215!important}[data-theme=light] .login-form__theme-btn svg path{fill:#171215!important}[data-theme=light] .login-form__theme-btn:hover svg{fill:#fff!important;color:#fff!important}[data-theme=light] .login-form__theme-btn:hover svg path{fill:#fff!important}[data-theme=dark] .login-form__lang-btn:hover,[data-theme=dark] .login-form__theme-btn:hover{background-color:hsla(0,0%,100%,.1)!important;border-color:hsla(0,0%,100%,.5)!important}.login-form__lang-btn:focus-visible,.login-form__theme-btn:focus-visible{outline:2px solid hsla(0,0%,100%,.6);outline-offset:2px}.login-form__lang-btn:active,.login-form__theme-btn:active{transform:translateY(1px)}.login-form .btn{margin-top:8px}@media (max-width:480px){.login-form{max-width:100%;padding:32px 24px}.login-form__controls{gap:10px}.login-form__lang-btn,.login-form__theme-btn{height:28px;width:28px}.login-form__theme-btn svg{height:14px;width:14px}.login-form__lang-btn{font-size:11px}}.navbar{align-items:center;display:flex;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;height:50px;justify-content:space-between;max-width:100vw;overflow:hidden;padding:0 16px;transition:background-color .2s ease;width:100%}.navbar--light{background-color:#5876ee;color:#fff}.navbar--dark{background-color:#171215;color:#fff}.navbar__left{align-items:center;display:flex;flex-shrink:0}.navbar__logo{color:inherit;font-size:16.5px;font-weight:400;white-space:nowrap}.navbar__logo-bold{font-weight:700}.navbar__right{flex-shrink:1;gap:16px;min-width:0;padding-right:16px}.navbar__right,.navbar__user-info{align-items:center;display:flex}.navbar__welcome{color:inherit;font-size:14px;font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navbar__controls{align-items:center;display:flex;flex-shrink:0;gap:12px}.navbar__theme-btn{align-items:center;background-color:transparent;border:1px solid hsla(0,0%,100%,.3);border-radius:4px;color:#fff;cursor:pointer;display:flex;height:32px;justify-content:center;padding:8px;transition:all .2s ease;width:32px}.navbar__theme-btn:hover{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.5)}.navbar__theme-btn svg{fill:#fff;color:#fff;height:16px;width:16px}.navbar__lang-btn{align-items:center;background-color:transparent;border:1px solid hsla(0,0%,100%,.3);border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:12px;font-weight:700;height:32px;justify-content:center;padding:0;transition:all .2s ease;width:32px}.navbar__lang-btn:hover{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.5)}.navbar__logout-btn.btn{background:transparent!important;border:1px solid hsla(0,0%,100%,.3)!important;border-radius:4px!important;color:#fff!important;font-size:14px!important;font-weight:500!important;min-height:32px!important;min-width:57px!important;padding:6px 8px!important;transition:all .2s ease!important;width:auto!important}.navbar__logout-btn.btn:hover:not(.btn--disabled){background-color:hsla(0,0%,100%,.1)!important;border-color:hsla(0,0%,100%,.5)!important;transform:none!important}.navbar--light .navbar__lang-btn,.navbar--light .navbar__theme-btn{background-color:transparent;border-color:#fff;color:#fff}.navbar--light .navbar__lang-btn:hover,.navbar--light .navbar__theme-btn:hover{background-color:transparent!important;border-color:#fff!important;color:#fff!important;cursor:pointer}.navbar--light .navbar__theme-btn svg{fill:#fff!important;color:#fff!important}.navbar--light .navbar__theme-btn svg path{fill:#fff!important}.navbar--light .navbar__theme-btn:hover svg{fill:#fff!important;color:#fff!important}.navbar--light .navbar__theme-btn:hover svg path{fill:#fff!important}.navbar--light .navbar__logout-btn.btn,.navbar--light .navbar__logout-btn.btn:hover:not(.btn--disabled){background-color:transparent!important;border-color:#fff!important;color:#fff!important}.navbar--light .navbar__logout-btn.btn:hover:not(.btn--disabled){cursor:pointer;transform:none!important}.navbar--dark .navbar__lang-btn:hover,.navbar--dark .navbar__logout-btn.btn:hover:not(.btn--disabled),.navbar--dark .navbar__theme-btn:hover{background-color:hsla(0,0%,100%,.1)!important;border-color:hsla(0,0%,100%,.5)!important;transform:none!important}.navbar__lang-btn:focus-visible,.navbar__logout-btn.btn:focus-visible,.navbar__theme-btn:focus-visible{outline:2px solid hsla(0,0%,100%,.6)!important;outline-offset:2px!important}.navbar__lang-btn:active,.navbar__logout-btn.btn:active:not(.btn--disabled),.navbar__theme-btn:active{transform:translateY(1px)!important}@media (max-width:1366px){.navbar{padding:0 16px}.navbar__right{gap:12px}.navbar__welcome{font-size:13px}}@media (max-width:1024px){.navbar{padding:0 16px}.navbar__right{gap:8px}.navbar__welcome{font-size:12px;max-width:200px}.navbar__controls{gap:8px}}@media (max-width:768px){.navbar{padding:0 16px}.navbar__logo{font-size:14px}.navbar__welcome{display:none}.navbar__controls,.navbar__right{gap:6px}.navbar__lang-btn,.navbar__theme-btn{height:28px!important;width:28px!important}.navbar__theme-btn svg{height:14px!important;width:14px!important}.navbar__logout-btn.btn{font-size:12px!important;height:28px!important;min-width:45px!important;padding:6px!important}}@media (max-width:480px){.navbar{padding:0 16px}.navbar__logo{font-size:12px}.navbar__lang-btn,.navbar__theme-btn{height:24px!important;width:24px!important}.navbar__theme-btn svg{height:12px!important;width:12px!important}.navbar__logout-btn.btn{font-size:10px!important;height:24px!important;min-width:35px!important;padding:4px!important}}@media (max-width:360px){.navbar{padding:0 16px}.navbar__controls{gap:4px}.navbar__logout-btn.btn{font-size:9px!important;min-width:30px!important;padding:3px!important}.navbar__logo{font-size:10px}.navbar__theme-btn svg{height:12px!important;width:12px!important}}.combobox{font-size:15px;position:relative;width:320px}.combobox__trigger{align-items:center;background-color:var(--input-background);border-radius:4px;color:var(--text-color);cursor:pointer;display:flex;height:32px;justify-content:space-between;padding:0 12px;transition:all .2s ease}[data-theme=dark] .combobox__trigger{border:1px solid #666}[data-theme=light] .combobox__trigger{border:1px solid #000}.combobox__trigger:hover{border-color:var(--border-hover-color)}.combobox__trigger:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-color-20);outline:none}.combobox--disabled .combobox__trigger{background-color:var(--disabled-background);border-color:var(--disabled-border);color:var(--disabled-text);cursor:not-allowed}.combobox__value{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.combobox__arrow{color:var(--text-secondary);font-size:12px;transition:transform .2s ease}.combobox__arrow--open{transform:rotate(180deg)}.combobox--disabled .combobox__arrow{color:var(--disabled-text)}.combobox__dropdown{background-color:var(--dropdown-background);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.25);left:0;margin-top:2px;max-height:200px;overflow-y:auto;position:absolute;right:0;top:100%;z-index:1000}.combobox__list{list-style:none;margin:0;padding:0}.combobox__option{align-items:center;color:var(--text-color);cursor:pointer;display:flex;height:28px;padding:0 12px;transition:background-color .1s ease}.combobox__option--hovered,.combobox__option:hover{background-color:#424242}[data-theme=light] .combobox__option--hovered,[data-theme=light] .combobox__option:hover{background-color:#424242;color:#fff}.combobox__option--selected{background-color:#5876ee;color:#fff}.combobox__option--selected.combobox__option--hovered,.combobox__option--selected:hover{background-color:#5876ee}[data-theme=dark]{--dropdown-background:#1a1a1a}[data-theme=light]{--dropdown-background:#fff}[data-theme=light] .combobox__option{color:#424242}[data-theme=light] .combobox__option--selected{color:#fff}.autocomplete{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;position:relative;width:100%}.autocomplete__trigger{align-items:center;background-color:var(--autocomplete-bg);border:1px solid var(--autocomplete-border);border-radius:4px;color:var(--autocomplete-text);display:flex;justify-content:space-between;min-height:40px;transition:all .2s ease}.autocomplete__trigger-content{align-items:center;cursor:pointer;display:flex;flex:1;padding:8px 12px}.autocomplete__trigger-content:focus{outline:none}.autocomplete__trigger:focus-within{border-color:var(--autocomplete-checkbox);box-shadow:0 0 0 2px rgba(59,130,246,.2)}.autocomplete__trigger:hover:not(.autocomplete--disabled){border-color:var(--autocomplete-border-hover)}[data-theme=light] .autocomplete{--autocomplete-bg:#fff;--autocomplete-text:#374151;--autocomplete-border:#d1d5db;--autocomplete-border-hover:#9ca3af;--autocomplete-dropdown-bg:#fff;--autocomplete-dropdown-border:#e5e7eb;--autocomplete-option-hover:#f3f4f6;--autocomplete-option-selected:#dbeafe;--autocomplete-checkbox:#2563eb;--autocomplete-search-bg:#fff}[data-theme=dark] .autocomplete{--autocomplete-bg:#171215;--autocomplete-text:#d1d5db;--autocomplete-border:#6b7280;--autocomplete-border-hover:#9ca3af;--autocomplete-dropdown-bg:#171215;--autocomplete-dropdown-border:#374151;--autocomplete-option-hover:#4b5563;--autocomplete-option-selected:#1e40af;--autocomplete-checkbox:#3b82f6;--autocomplete-search-bg:#171215}.autocomplete--disabled .autocomplete__trigger{background-color:#f3f4f6;border-color:#d1d5db;color:#9ca3af;cursor:not-allowed}.autocomplete--disabled .autocomplete__trigger-content{cursor:not-allowed}.autocomplete__value{flex:1;font-size:14px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.autocomplete__trigger-input{background-color:transparent!important;border:none!important;border-radius:4px!important;box-shadow:none!important;color:var(--autocomplete-text)!important;flex:1!important;font-size:14px!important;margin:4px 8px!important;min-height:24px!important;outline:none!important;padding:4px 8px!important;width:auto!important}.autocomplete__trigger-input::placeholder{color:#9ca3af!important}.autocomplete__arrow{border-radius:2px;color:var(--autocomplete-text);cursor:pointer;flex-shrink:0;font-size:12px;margin:8px;padding:4px;transition:transform .2s ease}.autocomplete__arrow:hover{background-color:var(--autocomplete-option-hover)}.autocomplete__arrow--open{transform:rotate(180deg)}.autocomplete--disabled .autocomplete__arrow{color:#9ca3af;cursor:not-allowed}.autocomplete--disabled .autocomplete__arrow:hover{background-color:transparent}.autocomplete__dropdown{background-color:var(--autocomplete-dropdown-bg);border:1px solid var(--autocomplete-dropdown-border);border-radius:4px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);display:flex;flex-direction:column;left:0;margin-top:2px;max-height:240px;overflow:hidden;position:absolute;right:0;top:100%;z-index:1000}.autocomplete__list{flex:1;list-style:none;margin:0;overflow-y:auto;padding:4px 0}.autocomplete__option{align-items:center;color:var(--autocomplete-text);cursor:pointer;display:flex;gap:8px;min-height:36px;padding:8px 12px;transition:background-color .1s ease}.autocomplete__option--hovered,.autocomplete__option:hover{background-color:var(--autocomplete-option-hover)}.autocomplete__option--selected,.autocomplete__option--selected.autocomplete__option--hovered,.autocomplete__option--selected:hover{background-color:var(--autocomplete-option-selected)}.autocomplete__checkbox{align-items:center;background-color:transparent;border:1px solid var(--autocomplete-border);border-radius:2px;color:#fff;display:flex;flex-shrink:0;font-size:10px;font-weight:700;height:16px;justify-content:center;width:16px}.autocomplete__option--selected .autocomplete__checkbox{background-color:var(--autocomplete-checkbox);border-color:var(--autocomplete-checkbox)}.autocomplete__label{flex:1;font-size:14px;line-height:1.4}.autocomplete__no-results{color:#9ca3af;font-size:14px;font-style:italic;padding:12px;text-align:center}@media (max-width:768px){.autocomplete__dropdown{max-height:200px}.autocomplete__option{min-height:40px;padding:10px 12px}}.modal-overlay{align-items:center;animation:modalOverlayFadeIn .2s ease-out;background-color:rgba(0,0,0,.5);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:9999}.modal{animation:modalSlideIn .3s ease-out;background-color:var(--bg-primary);border:1px solid var(--border-primary);border-radius:8px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);max-height:90vh;max-width:90vw;outline:none;overflow:hidden}[data-theme=dark] .modal{background-color:#000;border-color:#444;box-shadow:0 20px 25px -5px rgba(0,0,0,.4),0 10px 10px -5px rgba(0,0,0,.2)}[data-theme=dark] .modal__description,[data-theme=dark] .modal__label{color:#fff}[data-theme=light] .modal{border-color:#e5e5e5}.modal__header{align-items:center;border-bottom:1px solid var(--border-primary);display:flex;justify-content:space-between;padding:20px 24px}.modal__title{color:var(--text-primary);font-size:18px;font-weight:600;margin:0}.modal__close{align-items:center;background:transparent;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:14px;height:32px;justify-content:center;transition:all .2s ease;width:32px}.modal__close:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.modal__close:focus{background-color:var(--bg-secondary);box-shadow:0 0 0 2px var(--accent-primary);outline:none}.modal__content{padding:24px}@keyframes modalOverlayFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal--update{width:400px}.modal--update .modal__content{display:flex;flex-direction:column;gap:20px}.modal__field{display:flex;flex-direction:column;gap:8px}.modal__label{color:var(--text-primary);font-size:14px;font-weight:500}.modal__actions{border-top:1px solid var(--border-primary);display:flex;gap:12px;justify-content:flex-end;margin:8px -24px 0;padding:16px 24px 0}.modal--delete{width:440px}.modal__description{color:var(--text-secondary);font-size:14px;line-height:1.5;margin:0 0 24px}.modal__actions .btn--secondary{border:1px solid #666}[data-theme=dark] .modal__actions .btn--secondary{background-color:#000;border-color:#666;color:#fff}[data-theme=dark] .modal__actions .btn--secondary:hover{background-color:#1a1a1a}[data-theme=light] .modal__actions .btn--secondary{background-color:#fff;border-color:#666;color:#424242}[data-theme=light] .modal__actions .btn--secondary:hover{background-color:#f5f5f5}[data-theme=light] .modal__title{color:#424242}.modal__actions .btn--danger{background-color:#dc2626!important}.modal__actions .btn--danger:hover:not(.btn--disabled){background-color:#b91c1c!important}@media (max-width:480px){.modal{margin:16px;max-width:calc(100vw - 32px)}.modal--delete,.modal--update{width:100%}.modal__header{padding:16px 20px}.modal__content{padding:20px}.modal__actions{flex-direction:column-reverse}}.toast-item{align-items:center;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);box-sizing:border-box;color:#fff;display:flex;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;gap:12px;min-height:60px;opacity:0;padding:8px 32px 8px 16px;position:relative;transform:translateX(100%);transition:all .3s ease-in-out;width:280px}.toast-item.toast-multiline{min-height:80px}.toast-item.toast-visible{opacity:1;transform:translateX(0)}.toast-icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px}.toast-icon svg{display:block;height:20px;width:20px}.toast-success{background-color:#34c759}.toast-error{background-color:#dc2626}.toast-content{display:flex;flex:1;flex-direction:column;justify-content:center;min-height:44px;min-width:0}.toast-title{font-weight:700;margin:0}.toast-message,.toast-title{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.3}.toast-message{word-wrap:break-word;font-weight:400;margin:2px 0 0;opacity:.9}.toast-close{align-items:center;background:none;border:none;border-radius:4px;color:hsla(0,0%,100%,.8);cursor:pointer;display:flex;font-size:16px;height:20px;justify-content:center;line-height:1;position:absolute;right:8px;top:8px;transition:all .2s ease;width:20px}.toast-close:hover{background-color:hsla(0,0%,100%,.1);color:#fff}.toast-error .toast-close{color:hsla(0,0%,100%,.8)}.toast-error .toast-close:hover{background-color:hsla(0,0%,100%,.1);color:#fff}.table-container{background-color:var(--table-bg,#fff);color:var(--table-text,#000);display:flex;flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;height:calc(100% - 32px);margin:16px;position:relative;width:calc(100% - 32px)}[data-theme=light] .table-container{--table-bg:#fff;--table-text:#000;--table-border:#e5e7eb;--table-header-bg:#f8f9fa;--table-header-text:#374151;--table-row-border:#f3f4f6;--table-row-hover:#f9fafb;--table-selected-bg:#bdc311}[data-theme=dark] .table-container{--table-bg:#171215;--table-text:#fff;--table-border:#374151;--table-header-bg:#111827;--table-header-text:#d1d5db;--table-row-border:#374151;--table-row-hover:#374151;--table-selected-bg:#bdc311}.table-header{background-color:var(--table-bg);border-bottom:none;justify-content:space-between;padding:16px 0}.table-header,.table-info{align-items:center;display:flex}.table-info{padding-left:0}.table-count{color:var(--table-text);font-size:14px!important;font-weight:500;line-height:1.2;white-space:nowrap}.table-actions{align-items:center;display:flex;gap:8px;padding-right:16px}.table-actions .btn{font-size:12px!important;line-height:1.2!important;white-space:nowrap!important}.show-history-btn.btn{background-color:#bdc311!important;border-color:#bdc311!important;color:#000!important}.show-history-btn.btn:hover:not(.btn--disabled){background-color:#bdc311!important;border-color:#bdc311!important;cursor:pointer;transform:none!important}.show-history-btn.btn.btn--disabled{background-color:#bdc311!important;border-color:#bdc311!important;color:#000!important;opacity:.5!important}[data-theme=light] .table-actions .btn--secondary:not(.show-history-btn){background-color:transparent!important;border-color:#000!important;color:#000!important}[data-theme=light] .table-actions .btn--secondary:not(.show-history-btn):hover:not(.btn--disabled){background-color:transparent!important;border-color:#000!important;color:#000!important;cursor:pointer;transform:none!important}[data-theme=dark] .table-actions .btn--secondary:not(.show-history-btn){background-color:transparent!important;border-color:#5876ee!important;color:#fff!important}[data-theme=dark] .table-actions .btn--secondary:not(.show-history-btn):hover:not(.btn--disabled){background-color:transparent!important;border-color:#5876ee!important;color:#fff!important;cursor:pointer;transform:none!important}.table-actions .btn--danger{background-color:transparent!important;border:1px solid #ff3b30!important;color:#ff3b30!important}.table-actions .btn--danger:hover:not(.btn--disabled){background-color:transparent!important;border-color:#ff3b30!important;color:#ff3b30!important;cursor:pointer;transform:none!important}.table-wrapper{background-color:var(--table-bg);flex:1;overflow:auto}.table-wrapper::-webkit-scrollbar{height:6px;width:6px}.table-wrapper::-webkit-scrollbar-track{background:transparent}[data-theme=light] .table-wrapper::-webkit-scrollbar-thumb{background:#f8f8f8;border:none;border-radius:0}[data-theme=light] .table-wrapper::-webkit-scrollbar-thumb:hover{background:#d0d0d0}[data-theme=dark] .table-wrapper::-webkit-scrollbar-thumb{background:#424242;border:none;border-radius:0}[data-theme=dark] .table-wrapper::-webkit-scrollbar-thumb:hover{background:#525252}[data-theme=light] .table-wrapper{scrollbar-color:#f8f8f8 transparent;scrollbar-width:thin}[data-theme=dark] .table-wrapper{scrollbar-color:#424242 transparent;scrollbar-width:thin}.table{border-collapse:collapse;font-size:14px;width:100%}.table-head{background-color:var(--table-bg);position:sticky;top:0;z-index:10}.table-header-cell{border-bottom:2px solid #5876ee;color:#5876ee;font-size:14px;font-weight:600;letter-spacing:.05em;padding:12px 16px;text-align:left;text-transform:uppercase;white-space:nowrap}.table-header-cell.sortable{cursor:pointer;transition:background-color .2s ease;user-select:none}.table-header-cell.sortable:hover{background-color:var(--table-row-hover)}.header-content{align-items:center;display:flex;gap:4px;justify-content:flex-start}.header-label{font-size:14px}.sort-indicator{color:#3b82f6;font-size:12px;font-weight:600}.table-body .table-row{border-bottom:1px solid var(--table-row-border);cursor:pointer;transition:all .2s ease}.table-row{min-height:40px;transition:background-color .15s ease}.table-row td{padding:13px 16px}[data-theme=light] .table-body .table-row:nth-child(odd){background-color:var(--table-bg)}[data-theme=light] .table-body .table-row:nth-child(2n){background-color:#f8f8f8}[data-theme=dark] .table-body .table-row:nth-child(odd){background-color:var(--table-bg)}[data-theme=dark] .table-body .table-row:nth-child(2n){background-color:#1d1b1d}[data-theme=dark] .table-body .table-row.multi-selected,[data-theme=dark] .table-body .table-row.selected:not(.multi-selected),[data-theme=light] .table-body .table-row.multi-selected,[data-theme=light] .table-body .table-row.selected:not(.multi-selected){--table-text:#000;background-color:var(--table-selected-bg)!important}.table-row.multi-selected *,.table-row.selected *{color:#000!important}.table-row.multi-selected .classification-indicator,.table-row.selected .classification-indicator{border-color:#000!important}.table-cell{color:var(--table-text);font-size:14px;line-height:1.4;padding:12px 16px;vertical-align:middle}.table-empty{align-items:center;color:var(--table-header-text);display:flex;font-style:italic;justify-content:center;padding:40px 20px}.table-container.blur-active .table-header,.table-container.blur-active .table-wrapper{filter:blur(4px);pointer-events:none;transition:filter .3s ease}.selection-indicator{background:rgba(33,150,243,.1);border-radius:12px;color:#2196f3;font-size:12px;font-weight:600;margin-left:16px;padding:2px 8px}.table-actions .btn:disabled{cursor:not-allowed;opacity:.5;pointer-events:none}@media (max-width:768px){.table-header{align-items:stretch;flex-direction:column;gap:12px}.table-actions{flex-wrap:wrap;justify-content:center;padding-right:0}.table-info{padding-left:0}.table-cell,.table-header-cell{padding:8px 12px}.table-count{text-align:center}}[data-theme=dark] .btn--secondary:not(.show-history-btn):hover:not(.btn--disabled),[data-theme=dark] .btn--secondary:not(.show-history-btn):not(.btn--disabled){border-color:#5876ee!important}