/**
 * Logical UI - Components
  */

/*************************/
/* Logos                 */
/*************************/
.lw-logo-holder {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lw-logo-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-900);
}

.lw-logo{
    position: relative;
    width: 32px;
    height: 32px;
    background: var(--teal-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}
.lw-logo::before {
    content: 'L';
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1;
}
.lw-logo i {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 10px;
    background: var(--neutral-0);
    color: var(--teal-500);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--teal-500);
    width: 14px;
    height: 14px;
}

html[data-mode="admin"] .lw-logo {
    background: var(--amber-500);
}
html[data-mode="admin"] .lw-logo i {
    border: 2px solid var(--amber-500);
    color: var(--amber-500);
}

.lw-logo-lg {
    width: 48px;
    height: 48px;
}
.lw-logo-lg::before {
    font-size: 22px;
}
.lw-logo-lg i {
    font-size: 14px;
    width: 20px;
    height: 20px;
    top: -7px;
    right: -7px;
}

.lw-logo-sm {
    width: 24px;
    height: 24px;
}
.lw-logo-sm::before {
    font-size: 11px;
}
.lw-logo-sm i {
    font-size: 8px;
    width: 11px;
    height: 11px;
    top: -4px;
    right: -4px;
}

/*************************/
/* Cards                 */
/*************************/
.lw-card {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-100);
    padding: var(--sp-3);
}

.lw-card-raised {
    box-shadow: var(--shadow-md);
}

.lw-dd-card {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-100);
}

.lw-card-placeholder {
    border: 1px dashed var(--neutral-200);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-500);
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
}
.lw-card-placeholder:hover {
    border-color: var(--teal-400);
    background: var(--teal-50);
}
.lw-card-placeholderIcon {
    width: 36px;
    height: 36px;
    background: var(--neutral-100);
    color: var(--neutral-500);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lw-card-placeholder:hover .lw-card-placeHolderIcon {
    background: var(--teal-500);
    color: #FFFFFF;
}

/*************************/
/* Text                  */
/*************************/
.lw-section-title {
    font-size: var(--text-x1);
    font-weight: 600;
    color: var(--neutral-900);
    margin-bottom: 8px;
}
.lw-section-title i {
    margin-right: 10px;
}

.lw-section-subtitle {
    font-size: var(--text-sm);
    color: var(--neutral-400);
}

/*************************/
/* Forms                 */
/*************************/
.lw-formSection {
    padding: 5px;
    border-bottom: 1px solid var(--neutral-100);
}
.lw-formSection-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--neutral-400);
    margin-bottom: 10px;
}

.lw-formFooter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background: var(--neutral-100);
}

.lw-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 20px;
}
.lw-field-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--neutral-800);
}
.lw-field-hint {
    font-size: var(--text-xs);
    color: var(--neutral-400);
    margin-top: 2px;
}
.lw-field-error {
    font-size: var(--text-xs);
    color: var(--color-danger);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.lw-input {
    font-family: var(--font);
    font-size: var(--text-sm);
    background: var(--neutral-0);
    color: var(--neutral-900);
    border: 1px solid var(--neutral-200);
    padding: 9px 12px;
    width: 100%;
    appearance: none;
    outline: none;
}
.lw-input::placeholder {
    color: var(--neutral-400);
}
.lw-input:focus {
    border: 1px solid var(--teal-400);
    box-shadow: 0 0 0 3px rgb(30 144 144/.12);
}
html[data-mode="admin"] .lw-input:focus {
    border: 1px solid var(--amber-400);
}

.lw-inputAddon {
    display: flex;
    align-items: stretch;
}
.lw-inputAddon-text {
    display: flex;
    align-items: center;
    padding: 0px 10px;
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-right: none;
    font-size: var(--text-sm);
    color: var(--neutral-500);
    flex-shrink: 0;
}
.lw-inputAddon input {
    flex: 1;
}

.lw-search-input {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--neutral-50);
    border: 1px solid var(--neutral-100);
    padding: 7px 12px;
    width: 100%;
    max-width: 360px;
    cursor: text;
    color: var(--neutral-400);
    font-size: 14px;
}

.lw-textarea {
    width: 100%;
    min-height: 6em;
    border: 1px solid var(--neutral-200);
    color: var(--neutral-900);
    padding: 9px 12px;
    outline: none;
}
.lw-textarea:focus {
    border: 1px solid var(--teal-400);
    box-shadow: 0 0 0 3px rgb(30 144 144/.12);
}
html[data-mode="admin"] .lw-textarea:focus {
    border: 1px solid var(--amber-400);
}

/*************************/
/* Buttons               */
/*************************/
.lw-btn {
    justify-content: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    padding: 10px 20px;
    position: relative;
}
.lw-btn i {
    margin-right: 5px;
}

.lw-btn-primary {
    background: var(--teal-500);
    color: white;
    border-color: var(--teal-500);
}
.lw-btn-primary:hover {
    background: var(--teal-600);
    border-color: var(--teal-600);
}
html[data-mode="admin"] .lw-btn-primary {
    background: var(--amber-500);
    border-color: var(--amber-500);
    color: var(--neutral-900);
}
html[data-mode="admin"] .lw-btn-primary:hover {
    background: var(--amber-600);
    border-color: var(--amber-600);
}

.lw-btn-secondary {
    background: var(--neutral-0);
    color: var(--neutral-700);
    border-color: var(--neutral-200);
}
.lw-btn-secondary:hover {
    background: var(--neutral-50);
    border-color: var(--neutral-300);
}

.lw-btn-danger {
    background: var(--color-danger);
    color: white;
    border-color: var(--color-danger);
}
.lw-btn-danger:hover {
    background: #B91C1C;
}

.lw-modal-btn {
    padding: 5px 10px;
}

/** Dividers, spacers etc **/
.lw-divider {
    height: 1px;
    background: var(--neutral-100);
    margin-top: 5px;
    margin-bottom: 10px;
}

/*************************/
/* Alerts, warning etc   */
/*************************/
.lw-alert {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid;
    font-size: var(--text-sm);
    line-height: 1.5;
}
.lw-alert i {
    margin-top: 1px;
    flex-shrink: 0;
    font-size: 16px;
}

.lw-alert-content {
    flex: 1;
}

.lw-alert-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.lw-alert-success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.lw-alert-warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning);
}

.lw-alert-danger {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

.lw-alert-info {
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
    color: var(--color-info);
}

.lw-alert-neutral {
    background: var(--color-neutral-bg);
    border-color: var(--color-neutral-border);
    color: var(--color-neutral);
}

/*************************/
/* User things           */
/*************************/
.lw-avatar {
    width: 28px;
    height: 28px;
    background: var(--teal-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--teal-600);
    flex-shrink: 0;
}
html[data-mode="admin"] .lw-avatar {
    background: var(--amber-100);
    color: var(--amber-600);
}
.lw-avatar span {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-900);
}

/*************************/
/* Drop downs            */
/*************************/
.lw-dd-section {
    padding: 4px 0;
}
.lw-dd-section a {
    text-decoration: none;
}

.lw-dd-divider {
    height: 1px;
    background: var(--neutral-100);
}

.lw-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 13px;
    color: var(--neutral-700);
    cursor: pointer;
}
.lw-dd-item:hover {
    background: var(--neutral-50);
    color: var(--neutral-900);
}
.lw-dd-item i {
    font-size: 15px;
    color: var(--neutral-400);
    width: 15px;
    flex-shrink: 0;
}

.lw-dd-item-danger {
    color: var(--color-danger);
}
.lw-dd-item-danger:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}
.lw-dd-item-danger i {
    color: var(--color-danger);
}

.lw-dd-item-warning {
    color: var(--color-warning);
}
.lw-dd-item-warning:hover {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}
.lw-dd-item-warning i {
    color: var(--color-warning);
}

/*************************/
/* Toaster (yum)         */
/*************************/
div#lw-toastContainer {
    margin-top: 10px;
    justify-content: center;
    position: relative;
    z-index: 9999;
}

.lw-toast {
    width: 250px;
    padding: 10px;
    border-left: 3px solid;
    margin-bottom: 10px;
    z-index: 9999;
}

.lw-toast-holder {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    font-weight: 600;
    position: relative;
    z-index: 9999;
}
.lw-toast-holder i {
    flex-shrink: 0;
    font-size: 16px;
}

.lw-toast-close {
    margin-left: auto;
    display: none;
}
.lw-toast-close.visible {
    display: block;
}
.lw-toast-close i {
    font-size: 15px;
    color: var(--neutral-400);
    cursor: pointer;
}

.lw-toast-dismiss {
    display: none;
}
.lw-toast-dismiss.visible {
    padding-top: 10px;
    display: block;
}

.lw-toast-dismissButton {
    justify-content: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-800);
    border: 1px solid var(--neutral-200);
    background: var(--neutral-0);
    cursor: pointer;
    white-space: nowrap;
    padding: 5px 10px;
}
.lw-toast-dismissButton:hover {
    background: var(--neutral-50);
    border-color: var(--neutral-300);
}

.lw-toast-success {
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.lw-toast-warning {
    border-color: var(--color-warning-border);
    color: var(--color-warning);
}

.lw-toast-danger {
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

.lw-toast-info {
    border-color: var(--color-info-border);
    color: var(--color-info);
}

/*************************/
/* Modals                */
/*************************/
.lw-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0/.4);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.lw-modal-overlay.visible {
    display: flex;
}

.lw-card-modal {
    width: 500px;
}

.lw-modal-header {
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    padding: 5px 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--neutral-100);
}
.lw-modal-header-title {
    font-weight: 600;
    color: var(--neutral-900);
}
.lw-modal-header-close {
    color: var(--neutral-400);
    cursor: pointer;
}

.lw-modal-content {
    padding: 5px 5px;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
}

.lw-modal-footer {
    border-top: 1px solid var(--neutral-100);
    display: flex;
    justify-content: right;
    gap: 10px;
    padding-top: 10px;
}

.lw-modal-content-destructiveIcon {
    width: 36px;
    height: 36px;
    background: var(--color-danger-bg);
    color: var(--color-danger);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lw-modal-content-detailTitle {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-900);
}
.lw-modal-content-detailContent {
    font-size: 13px;
    color: var(--neutral-500);
}

/*************************/
/* Data forms            */
/*************************/
.lw-dataForm-header {
    padding: 14px 20px;
    border: 1px solid var(--neutral-100);
    border-bottom: none;
    background: var(--neutral-25);
}
.lw-dataForm-header-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-900);
}
.lw-dataForm-header-description {
    font-size: 12px;
    color: var(--neutral-400);
}

.lw-dataForm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 20px;
    border: 1px solid var(--neutral-100);
    border-bottom: none;
}
.lw-dataForm-row-label {
    flex: 0 0 auto;
    width: 350px;
}
.lw-dataForm-row-input {
    flex: 1;
}
.lw-dataForm-row-label-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-900);
}
.lw-dataForm-row-label-description {
    font-size: 12px;
    color: var(--neutral-400);
}

.lw-dataForm-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    background: var(--neutral-50);
    border: 1px solid var(--neutral-100);
    border-top: 2px solid var(--neutral-100);
}

/*************************/
/* Data tables           */
/*************************/
.lw-dataTable-wrap {
    background: #FFFFFF;
    border: 1px solid var(--neutral-200);
}

.lw-dataTable {
    width: 100%;
    border-collapse: collapse;
}

.lw-dataTable thead {
    background: var(--neutral-25);
    border-bottom: 1px solid var(--neutral-200);
}

.lw-dataTable th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--neutral-400);
    padding: 10px 14px;
}

.lw-dataTable tbody tr {
    border-bottom: 1px solid var(--neutral-100);
}
.lw-dataTable tbody tr:last-child {
    border-bottom: none;
}
.lw-dataTable tbody tr:hover {
    background: var(--neutral-25);
}

.lw-dataTable td {
    padding: 13px 14px;
    font-size:13px;
    color: var(--neutral-700);
    vertical-align: middle;
}

.lw-dataTable-rowTitle {
    font-weight: 500;
    color: var(--neutral-700);
    margin-bottom: 2px;
}
.lw-dataTable-rowDescription {
    font-size: 12px;
    color: var(--neutral-400);
    line-height: 1.4;
}

.lw-dataTable-options {
    display: flex;
    justify-content: right;
    gap: 10px;
}
.lw-dataTable-btn {
    padding: 5px 10px;
}


.lw-actionMenu-DD {
    position: absolute;
    display: none;
    right: 0;
    top: 25px;
    z-index: 1000;
}
.lw-actionMenu-DD.open {
    display: block;
}