/* gll-bundle sig:c407dae815e63ecf6625a012af241cbb modern-forms.css */
:root {
--n-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--n-text: rgba(0, 0, 0, 0.95);
--n-text-secondary: #515151;
--n-text-muted: #888888;
--n-bg: #ffffff;
--n-bg-hover: rgba(0, 0, 0, 0.03);
--n-bg-warm: #f7f7f7;
--n-border: rgba(0, 0, 0, 0.1);
--n-border-input: #e6e6e6;
--n-radius-sm: 0;
--n-radius: 0;
--n-radius-lg: 0;
--n-radius-pill: 9999px;
--n-accent: #B8922A;
--n-accent-hover: #9a7820;
--n-accent-bg: rgba(184,146,42,0.06);
--n-success: #0C6826;
--n-danger: #eb5757;
--n-info: #515151;
--n-transition: 0.2s ease;
}

form {
width: 100%;
font-family: var(--n-font);
color: var(--n-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.form-group {
margin-bottom: 20px;
position: relative;
}
.form-group:last-of-type {
margin-bottom: 0;
}
.form-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.form-row > .form-group {
flex: 1;
min-width: 0;
}

.form-group > label,
.form-group > .col-form-label,
label.col-form-label,
.form-label {
display: block;
font-family: var(--n-font);
font-size: 14px;
font-weight: 500;
color: var(--n-text);
margin-bottom: 6px;
line-height: 1.5;
text-transform: none;
letter-spacing: normal;
}

.form-group.row > label.col-form-label,
.form-group.row > .col-form-label {
padding-top: 7px;
font-family: var(--n-font);
font-size: 14px;
font-weight: 500;
color: var(--n-text);
text-transform: none;
}

.required-star {
color: var(--n-danger);
font-weight: 400;
margin-left: 2px;
font-size: 12px;
vertical-align: top;
}

.form-control {
display: block;
width: 100%;
font-family: var(--n-font);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: var(--n-text);
background-color: var(--n-bg);
border: 1px solid var(--n-border-input);
border-radius: var(--n-radius-sm);
padding: 6px 8px;
transition: border-color var(--n-transition), box-shadow var(--n-transition);
outline: none;
appearance: none;
-webkit-appearance: none;
}
.form-control::placeholder {
color: var(--n-text-muted);
opacity: 1;
}
.form-control:hover {
border-color: #c6c6c6;
}
.form-control:focus {
border-color: var(--n-accent);
box-shadow: none;
outline: none;
}
.form-control:disabled,
.form-control[readonly] {
background-color: var(--n-bg-warm);
color: var(--n-text-muted);
border-color: var(--n-border-input);
cursor: not-allowed;
opacity: 0.7;
}

.form-control-sm {
font-size: 14px;
padding: 4px 8px;
}
.form-control-lg {
font-size: 18px;
padding: 8px 12px;
}

textarea.form-control {
min-height: 80px;
resize: vertical;
line-height: 1.6;
}

.form-select,
select.form-control {
display: block;
width: 100%;
font-family: var(--n-font);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: var(--n-text);
background-color: var(--n-bg);
border: 1px solid var(--n-border-input);
border-radius: var(--n-radius-sm);
padding: 6px 32px 6px 8px;
transition: border-color var(--n-transition), box-shadow var(--n-transition);
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23615d59' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.form-select:hover,
select.form-control:hover {
border-color: #c6c6c6;
}
.form-select:focus,
select.form-control:focus {
border-color: var(--n-accent);
box-shadow: none;
outline: none;
}
.form-select:disabled,
select.form-control:disabled {
background-color: var(--n-bg-warm);
color: var(--n-text-muted);
cursor: not-allowed;
opacity: 0.7;
}

.form-check {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 8px;
padding-left: 0;
min-height: auto;
}
.form-check-input[type="checkbox"] {
width: 16px;
height: 16px;
min-width: 16px;
margin: 2px 0 0 0;
border: 1.5px solid var(--n-border-input);
border-radius: 0;
background-color: var(--n-bg);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: all var(--n-transition);
position: relative;
}
.form-check-input[type="checkbox"]:hover {
border-color: #c6c6c6;
}
.form-check-input[type="checkbox"]:checked {
background-color: var(--n-accent);
border-color: var(--n-accent);
}
.form-check-input[type="checkbox"]:checked::after {
content: '';
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.form-check-input[type="checkbox"]:focus {
box-shadow: none;
outline: none;
}
.form-check-label {
font-family: var(--n-font);
font-size: 14px;
font-weight: 400;
color: var(--n-text);
line-height: 1.5;
cursor: pointer;
user-select: none;
}

.form-check-input[type="radio"] {
width: 16px;
height: 16px;
min-width: 16px;
margin: 2px 0 0 0;
border: 1.5px solid var(--n-border-input);
border-radius: 50%;
background-color: var(--n-bg);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: all var(--n-transition);
position: relative;
}
.form-check-input[type="radio"]:hover {
border-color: #c6c6c6;
}
.form-check-input[type="radio"]:checked {
border-color: var(--n-accent);
background-color: var(--n-bg);
}
.form-check-input[type="radio"]:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
background-color: var(--n-accent);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.form-check-input[type="radio"]:focus {
box-shadow: none;
outline: none;
}

.form-switch,
.custom-switch {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
}
.form-switch .form-check-input,
.custom-switch .custom-control-input {
width: 36px;
height: 20px;
min-width: 36px;
margin: 0;
border: none;
border-radius: var(--n-radius-pill);
background-color: #e6e6e6;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: background-color var(--n-transition);
position: relative;
}
.form-switch .form-check-input::after,
.custom-switch .custom-control-input::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 50%;
transition: transform var(--n-transition);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.form-switch .form-check-input:checked,
.custom-switch .custom-control-input:checked {
background-color: var(--n-accent);
}
.form-switch .form-check-input:checked::after,
.custom-switch .custom-control-input:checked::after {
transform: translateX(16px);
}
.form-switch .form-check-input:focus,
.custom-switch .custom-control-input:focus {
box-shadow: none;
outline: none;
}
.form-switch .form-check-label,
.custom-switch .custom-control-label {
font-size: 14px;
font-weight: 400;
color: var(--n-text);
cursor: pointer;
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: var(--n-font);
font-size: 0.72rem;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.18em;
padding: 8px 16px;
border-radius: var(--n-radius-sm);
border: none;
cursor: pointer;
transition: all var(--n-transition);
text-decoration: none;
white-space: nowrap;
user-select: none;
-webkit-font-smoothing: antialiased;
}
.btn:focus-visible {
outline: none;
}

.btn-primary {
background-color: var(--n-accent);
color: #ffffff;
border: none;
}
.btn-primary:hover {
background-color: var(--n-accent-hover);
color: #ffffff;
}
.btn-primary:active {
background-color: #8a6c1b;
color: #ffffff;
}
.btn-primary:disabled {
background-color: var(--n-accent);
color: #ffffff;
opacity: 0.5;
cursor: not-allowed;
}

.btn-secondary,
.btn-default,
.btn-outline-secondary {
background-color: rgba(0, 0, 0, 0.05);
color: var(--n-text);
border: none;
}
.btn-secondary:hover,
.btn-default:hover,
.btn-outline-secondary:hover {
background-color: rgba(0, 0, 0, 0.08);
color: var(--n-text);
}
.btn-secondary:active,
.btn-default:active,
.btn-outline-secondary:active {
background-color: rgba(0, 0, 0, 0.12);
}

.btn-danger {
background-color: rgba(235, 87, 87, 0.08);
color: var(--n-danger);
border: none;
}
.btn-danger:hover {
background-color: rgba(235, 87, 87, 0.14);
color: var(--n-danger);
}
.btn-danger:active {
background-color: rgba(235, 87, 87, 0.2);
}

.btn-success {
background-color: rgba(42, 157, 153, 0.08);
color: var(--n-success);
border: none;
}
.btn-success:hover {
background-color: rgba(42, 157, 153, 0.14);
color: var(--n-success);
}

.btn-info {
background-color: rgba(0, 117, 222, 0.08);
color: var(--n-info);
border: none;
}
.btn-info:hover {
background-color: rgba(0, 117, 222, 0.14);
color: var(--n-info);
}

.btn-link,
.btn-ghost {
background: transparent;
color: var(--n-text-secondary);
padding: 8px 12px;
border: none;
}
.btn-link:hover,
.btn-ghost:hover {
background-color: var(--n-bg-hover);
color: var(--n-text);
text-decoration: none;
}

.btn-sm {
font-size: 13px;
font-weight: 500;
padding: 5px 10px;
}
.btn-lg {
font-size: 16px;
padding: 10px 20px;
}

.btn .icon,
.btn svg,
.btn i {
width: 16px;
height: 16px;
flex-shrink: 0;
}

.btn-group {
display: inline-flex;
gap: 0;
}
.btn-group .btn {
border-radius: 0;
}
.btn-group .btn:first-child {
border-radius: var(--n-radius-sm) 0 0 var(--n-radius-sm);
}
.btn-group .btn:last-child {
border-radius: 0 var(--n-radius-sm) var(--n-radius-sm) 0;
}

.form-text,
.help-block,
small.text-muted {
display: block;
font-family: var(--n-font);
font-size: 12px;
font-weight: 400;
color: var(--n-text-muted);
margin-top: 4px;
line-height: 1.5;
}


.form-control.is-invalid,
.form-select.is-invalid,
select.form-control.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
border-color: var(--n-danger);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
border-color: var(--n-danger);
box-shadow: 0 0 0 2px rgba(235, 87, 87, 0.2);
}
.invalid-feedback,
.form-error {
display: block;
font-family: var(--n-font);
font-size: 12px;
font-weight: 400;
color: var(--n-danger);
margin-top: 4px;
line-height: 1.5;
}

.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
border-color: var(--n-success);
}
.form-control.is-valid:focus,
.form-select.is-valid:focus,
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus {
border-color: var(--n-success);
box-shadow: 0 0 0 2px rgba(42, 157, 153, 0.2);
}
.valid-feedback {
display: block;
font-family: var(--n-font);
font-size: 12px;
font-weight: 400;
color: var(--n-success);
margin-top: 4px;
line-height: 1.5;
}

.input-group {
display: flex;
align-items: stretch;
width: 100%;
}
.input-group .form-control {
flex: 1;
min-width: 0;
border-radius: 0;
}
.input-group .form-control:first-child {
border-radius: var(--n-radius-sm) 0 0 var(--n-radius-sm);
}
.input-group .form-control:last-child {
border-radius: 0 var(--n-radius-sm) var(--n-radius-sm) 0;
}
.input-group-text {
display: flex;
align-items: center;
padding: 6px 10px;
font-family: var(--n-font);
font-size: 14px;
font-weight: 400;
color: var(--n-text-secondary);
background-color: var(--n-bg-warm);
border: 1px solid var(--n-border-input);
white-space: nowrap;
}
.input-group-text:first-child {
border-radius: var(--n-radius-sm) 0 0 var(--n-radius-sm);
border-right: none;
}
.input-group-text:last-child {
border-radius: 0 var(--n-radius-sm) var(--n-radius-sm) 0;
border-left: none;
}
.input-group > .btn {
border-radius: 0;
}
.input-group > .btn:last-child {
border-radius: 0 var(--n-radius-sm) var(--n-radius-sm) 0;
}

.nav-tabs {
display: flex;
border-bottom: 1px solid var(--n-border);
margin-bottom: 20px;
gap: 0;
padding: 0;
list-style: none;
}
.nav-tabs .nav-item {
margin-bottom: -1px;
}
.nav-tabs .nav-link {
display: block;
font-family: var(--n-font);
font-size: 14px;
font-weight: 500;
color: var(--n-text-muted);
padding: 8px 16px;
border: none;
border-bottom: 2px solid transparent;
background: transparent;
cursor: pointer;
transition: color var(--n-transition), border-color var(--n-transition);
text-decoration: none;
white-space: nowrap;
}
.nav-tabs .nav-link:hover {
color: var(--n-text);
border-bottom-color: rgba(0, 0, 0, 0.15);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.active .nav-link {
color: var(--n-text);
border-bottom-color: var(--n-text);
font-weight: 500;
}
.tab-content {
padding-top: 4px;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}

.table {
width: 100%;
font-family: var(--n-font);
border-collapse: collapse;
font-size: 16px;
}
.table thead th {
font-size: 14px;
font-weight: 500;
color: var(--n-text-secondary);
text-transform: none;
letter-spacing: normal;
padding: 8px 12px;
border-bottom: 1px solid var(--n-border);
text-align: left;
white-space: nowrap;
background: transparent;
}
.table tbody td {
font-size: 16px;
font-weight: 400;
color: var(--n-text);
padding: 10px 12px;
border-bottom: 1px solid var(--n-border);
vertical-align: middle;
}
.table tbody tr:last-child td {
border-bottom: none;
}
.table tbody tr:hover {
background-color: var(--n-bg-hover);
}
.table-striped tbody tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.015);
}
.table-striped tbody tr:nth-child(even):hover {
background-color: var(--n-bg-hover);
}
.table-sm th,
.table-sm td {
padding: 6px 10px;
}
.table-sm th {
font-size: 12px;
}
.table-sm td {
font-size: 14px;
}

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

.alert {
font-family: var(--n-font);
font-size: 14px;
font-weight: 400;
padding: 12px 16px;
border-radius: var(--n-radius-lg);
border: 1px solid #e6e6e6;
margin-bottom: 16px;
line-height: 1.5;
}
.alert-success {
background-color: rgba(42, 157, 153, 0.08);
color: #0C6826;
}
.alert-danger,
.alert-error {
background-color: rgba(235, 87, 87, 0.08);
color: #c03a3a;
}
.alert-warning {
background-color: rgba(184, 146, 42, 0.08);
color: #8a6c1b;
}
.alert-info {
background-color: rgba(0, 117, 222, 0.08);
color: #393939;
}
.alert .close,
.alert .btn-close {
background: transparent;
border: none;
font-size: 18px;
cursor: pointer;
opacity: 0.5;
float: right;
line-height: 1;
padding: 0 0 0 12px;
}
.alert .close:hover,
.alert .btn-close:hover {
opacity: 0.8;
}

.pagination {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
padding: 0;
margin: 0;
font-family: var(--n-font);
}
.pagination .page-item .page-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 8px;
font-size: 14px;
font-weight: 400;
color: var(--n-text-secondary);
background: transparent;
border: none;
border-radius: var(--n-radius-sm);
cursor: pointer;
transition: all var(--n-transition);
text-decoration: none;
line-height: 1;
}
.pagination .page-item .page-link:hover {
background-color: var(--n-bg-hover);
color: var(--n-text);
}
.pagination .page-item.active .page-link {
background-color: var(--n-accent-bg);
color: var(--n-accent);
font-weight: 500;
}
.pagination .page-item.disabled .page-link {
color: var(--n-text-muted);
cursor: not-allowed;
opacity: 0.5;
}

.badge {
display: inline-flex;
align-items: center;
font-family: var(--n-font);
font-size: 12px;
font-weight: 500;
padding: 2px 8px;
border-radius: var(--n-radius-sm);
line-height: 1.5;
white-space: nowrap;
}
.badge-primary,
.bg-primary.badge {
background-color: var(--n-accent-bg);
color: var(--n-accent);
}
.badge-secondary,
.bg-secondary.badge {
background-color: rgba(0, 0, 0, 0.05);
color: var(--n-text-secondary);
}
.badge-success,
.bg-success.badge {
background-color: rgba(42, 157, 153, 0.1);
color: var(--n-success);
}
.badge-danger,
.bg-danger.badge {
background-color: rgba(235, 87, 87, 0.1);
color: var(--n-danger);
}
.badge-info,
.bg-info.badge {
background-color: rgba(0, 117, 222, 0.1);
color: var(--n-info);
}
.badge-warning,
.bg-warning.badge {
background-color: rgba(184, 146, 42, 0.1);
color: #8a6c1b;
}

.badge-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.tile-selector {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.tile-selector .tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 12px;
border: 1px solid var(--n-border-input);
border-radius: var(--n-radius);
background: var(--n-bg);
cursor: pointer;
transition: all var(--n-transition);
text-align: center;
font-family: var(--n-font);
font-size: 14px;
color: var(--n-text);
}
.tile-selector .tile:hover {
border-color: #c6c6c6;
background-color: var(--n-bg-hover);
}
.tile-selector .tile.active,
.tile-selector .tile.selected {
border-color: var(--n-accent);
background-color: var(--n-accent-bg);
}
.tile-selector .tile .tile-icon {
font-size: 24px;
color: var(--n-text-secondary);
}
.tile-selector .tile.active .tile-icon,
.tile-selector .tile.selected .tile-icon {
color: var(--n-accent);
}

.list-selector {
display: flex;
flex-direction: column;
gap: 4px;
}
.list-selector .list-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: var(--n-radius-sm);
cursor: pointer;
transition: background-color var(--n-transition);
font-family: var(--n-font);
font-size: 14px;
color: var(--n-text);
}
.list-selector .list-item:hover {
background-color: var(--n-bg-hover);
}
.list-selector .list-item.active,
.list-selector .list-item.selected {
background-color: var(--n-accent-bg);
color: var(--n-accent);
}

.card,
.panel {
font-family: var(--n-font);
border: 1px solid var(--n-border);
border-radius: var(--n-radius);
background: var(--n-bg);
overflow: hidden;
}
.card-header,
.panel-heading {
padding: 12px 16px;
font-size: 14px;
font-weight: 500;
color: var(--n-text);
background-color: var(--n-bg-warm);
border-bottom: 1px solid var(--n-border);
}
.card-body,
.panel-body {
padding: 16px;
}
.card-footer,
.panel-footer {
padding: 12px 16px;
background-color: var(--n-bg-warm);
border-top: 1px solid var(--n-border);
}

.modal-content {
font-family: var(--n-font);
border: none;
border-radius: var(--n-radius-lg);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--n-border);
overflow: hidden;
}
.modal-header {
padding: 16px 20px;
border-bottom: 1px solid var(--n-border);
}
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--n-text);
}
.modal-body {
padding: 20px;
}
.modal-footer {
padding: 12px 20px;
border-top: 1px solid var(--n-border);
display: flex;
justify-content: flex-end;
gap: 8px;
}
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.4);
}

.dropdown-menu {
font-family: var(--n-font);
border: none;
border-radius: var(--n-radius);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--n-border);
padding: 4px;
background: var(--n-bg);
min-width: 180px;
}
.dropdown-item {
font-size: 14px;
font-weight: 400;
color: var(--n-text);
padding: 6px 12px;
border-radius: var(--n-radius-sm);
cursor: pointer;
transition: background-color var(--n-transition);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--n-bg-hover);
color: var(--n-text);
}
.dropdown-item.active {
background-color: var(--n-accent-bg);
color: var(--n-accent);
}
.dropdown-divider {
border-top: 1px solid var(--n-border);
margin: 4px 0;
}
.dropdown-header {
font-size: 12px;
font-weight: 500;
color: var(--n-text-muted);
padding: 6px 12px 4px;
text-transform: none;
}

.tooltip-inner {
font-family: var(--n-font);
font-size: 12px;
font-weight: 400;
padding: 4px 10px;
border-radius: var(--n-radius-sm);
background: var(--n-text);
color: #fff;
max-width: 240px;
}
.popover {
font-family: var(--n-font);
border: none;
border-radius: var(--n-radius);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--n-border);
}
.popover-header {
font-size: 14px;
font-weight: 500;
padding: 10px 14px;
background: var(--n-bg-warm);
border-bottom: 1px solid var(--n-border);
border-radius: var(--n-radius) var(--n-radius) 0 0;
}
.popover-body {
font-size: 14px;
padding: 10px 14px;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
font-family: var(--n-font) !important;
font-size: 16px !important;
border: 1px solid var(--n-border-input) !important;
border-radius: var(--n-radius-sm) !important;
background: var(--n-bg) !important;
min-height: 34px !important;
padding: 2px 8px !important;
transition: border-color var(--n-transition), box-shadow var(--n-transition) !important;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: var(--n-accent) !important;
box-shadow: none !important;
outline: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--n-text) !important;
line-height: 28px !important;
padding-left: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100% !important;
right: 8px !important;
width: 24px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border: none !important;
width: 8px !important;
height: 8px !important;
border-right: 2px solid var(--n-text-muted) !important;
border-bottom: 2px solid var(--n-text-muted) !important;
transform: rotate(45deg) !important;
margin-top: -6px !important;
margin-left: -4px !important;
left: 50% !important;
top: 50% !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
font-size: 13px !important;
background-color: var(--n-bg-warm) !important;
border: 1px solid var(--n-border) !important;
border-radius: var(--n-radius-sm) !important;
padding: 2px 8px !important;
margin: 2px 4px 2px 0 !important;
color: var(--n-text) !important;
}
.select2-container--default .select2-results__option {
font-family: var(--n-font) !important;
font-size: 14px !important;
padding: 6px 12px !important;
color: var(--n-text) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: var(--n-bg-hover) !important;
color: var(--n-text) !important;
}
.select2-container--default .select2-results__option--selected {
background-color: var(--n-accent-bg) !important;
color: var(--n-accent) !important;
}
.select2-dropdown {
border: none !important;
border-radius: var(--n-radius) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--n-border) !important;
background: var(--n-bg) !important;
overflow: hidden !important;
}
.select2-search--dropdown .select2-search__field {
font-family: var(--n-font) !important;
font-size: 14px !important;
border: 1px solid var(--n-border-input) !important;
border-radius: var(--n-radius-sm) !important;
padding: 6px 8px !important;
}
.select2-search--dropdown .select2-search__field:focus {
border-color: var(--n-accent) !important;
box-shadow: none !important;
outline: none !important;
}

.selectize-input {
font-family: var(--n-font) !important;
font-size: 16px !important;
border: 1px solid var(--n-border-input) !important;
border-radius: var(--n-radius-sm) !important;
padding: 4px 8px !important;
background: var(--n-bg) !important;
box-shadow: none !important;
transition: border-color var(--n-transition), box-shadow var(--n-transition) !important;
}
.selectize-input.focus {
border-color: var(--n-accent) !important;
box-shadow: none !important;
}
.selectize-input .item {
font-size: 13px !important;
background: var(--n-bg-warm) !important;
border: 1px solid var(--n-border) !important;
border-radius: var(--n-radius-sm) !important;
padding: 2px 8px !important;
color: var(--n-text) !important;
}
.selectize-input .item .remove {
font-size: 14px !important;
color: var(--n-text-muted) !important;
border-left: 1px solid var(--n-border) !important;
margin-left: 6px !important;
padding-left: 6px !important;
}
.selectize-input .item .remove:hover {
color: var(--n-danger) !important;
background: none !important;
}
.selectize-dropdown {
font-family: var(--n-font) !important;
border: none !important;
border-radius: var(--n-radius) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--n-border) !important;
margin-top: 4px !important;
}
.selectize-dropdown .option {
font-size: 14px !important;
padding: 6px 12px !important;
color: var(--n-text) !important;
}
.selectize-dropdown .option:hover,
.selectize-dropdown .active {
background-color: var(--n-bg-hover) !important;
color: var(--n-text) !important;
}
.selectize-dropdown .selected {
background-color: var(--n-accent-bg) !important;
color: var(--n-accent) !important;
}

.flatpickr-calendar {
font-family: var(--n-font) !important;
border: none !important;
border-radius: var(--n-radius-lg) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--n-border) !important;
overflow: hidden !important;
}
.flatpickr-months .flatpickr-month {
font-family: var(--n-font) !important;
color: var(--n-text) !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
font-family: var(--n-font) !important;
font-size: 14px !important;
font-weight: 500 !important;
}
.flatpickr-day {
font-family: var(--n-font) !important;
font-size: 13px !important;
border-radius: var(--n-radius-sm) !important;
color: var(--n-text) !important;
}
.flatpickr-day:hover {
background: var(--n-bg-hover) !important;
border-color: transparent !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
background: var(--n-accent) !important;
border-color: var(--n-accent) !important;
color: #fff !important;
}
.flatpickr-day.inRange {
background: var(--n-accent-bg) !important;
border-color: transparent !important;
color: var(--n-text) !important;
box-shadow: none !important;
}
.flatpickr-day.today {
border-color: var(--n-accent) !important;
background: var(--n-accent-bg) !important;
}
.flatpickr-weekday {
font-family: var(--n-font) !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--n-text-muted) !important;
}
.flatpickr-time input {
font-family: var(--n-font) !important;
font-size: 14px !important;
}

.tox.tox-tinymce {
border: 1px solid var(--n-border-input) !important;
border-radius: var(--n-radius-sm) !important;
font-family: var(--n-font) !important;
}
.tox .tox-toolbar__primary {
background: var(--n-bg-warm) !important;
border-bottom: 1px solid var(--n-border) !important;
}
.tox .tox-tbtn {
border-radius: var(--n-radius-sm) !important;
color: var(--n-text-secondary) !important;
}
.tox .tox-tbtn:hover {
background: var(--n-bg-hover) !important;
color: var(--n-text) !important;
}
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
background: var(--n-accent-bg) !important;
color: var(--n-accent) !important;
}
.tox .tox-edit-area__iframe {
font-family: var(--n-font) !important;
}
.tox .tox-statusbar {
border-top: 1px solid var(--n-border) !important;
font-family: var(--n-font) !important;
font-size: 12px !important;
color: var(--n-text-muted) !important;
}

.form-control[type="file"] {
padding: 4px 8px;
font-size: 14px;
cursor: pointer;
}
.form-control[type="file"]::file-selector-button {
font-family: var(--n-font);
font-size: 13px;
font-weight: 500;
padding: 4px 12px;
margin-right: 10px;
background-color: rgba(0, 0, 0, 0.05);
color: var(--n-text);
border: none;
border-radius: var(--n-radius-sm);
cursor: pointer;
transition: background-color var(--n-transition);
}
.form-control[type="file"]::file-selector-button:hover {
background-color: rgba(0, 0, 0, 0.08);
}

.file-upload-zone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px;
border: 2px dashed var(--n-border-input);
border-radius: var(--n-radius);
background: var(--n-bg);
cursor: pointer;
transition: all var(--n-transition);
text-align: center;
}
.file-upload-zone:hover {
border-color: var(--n-accent);
background-color: var(--n-accent-bg);
}
.file-upload-zone.dragover {
border-color: var(--n-accent);
background-color: var(--n-accent-bg);
}
.file-upload-zone .upload-icon {
font-size: 28px;
color: var(--n-text-muted);
}
.file-upload-zone .upload-text {
font-size: 14px;
color: var(--n-text-secondary);
}
.file-upload-zone .upload-hint {
font-size: 12px;
color: var(--n-text-muted);
}

.progress {
height: 6px;
background-color: rgba(0, 0, 0, 0.05);
border-radius: var(--n-radius-pill);
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: var(--n-accent);
border-radius: var(--n-radius-pill);
transition: width 0.4s ease;
}
.progress-bar-success {
background-color: var(--n-success);
}
.progress-bar-danger {
background-color: var(--n-danger);
}

.breadcrumb {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
padding: 0;
margin: 0;
font-family: var(--n-font);
font-size: 14px;
}
.breadcrumb-item {
color: var(--n-text-muted);
}
.breadcrumb-item a {
color: var(--n-text-secondary);
text-decoration: none;
transition: color var(--n-transition);
}
.breadcrumb-item a:hover {
color: var(--n-text);
}
.breadcrumb-item.active {
color: var(--n-text);
font-weight: 500;
}
.breadcrumb-item + .breadcrumb-item::before {
content: '/';
color: var(--n-text-muted);
margin-right: 4px;
}

fieldset {
border: none;
padding: 0;
margin: 0 0 24px 0;
}
fieldset legend,
.form-section-title {
font-family: var(--n-font);
font-size: 16px;
font-weight: 600;
color: var(--n-text);
padding-bottom: 8px;
margin-bottom: 16px;
border-bottom: 1px solid var(--n-border);
width: 100%;
}
.form-section-description {
font-size: 14px;
color: var(--n-text-secondary);
margin-bottom: 16px;
line-height: 1.5;
}
.form-divider {
border: none;
border-top: 1px solid var(--n-border);
margin: 20px 0;
}

.spinner,
.loading-spinner {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-left-color: var(--n-accent);
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.btn .spinner {
width: 14px;
height: 14px;
border-width: 2px;
}
.btn-primary .spinner {
border-color: rgba(255, 255, 255, 0.3);
border-left-color: #fff;
}

.form-actions {
display: flex;
align-items: center;
gap: 8px;
padding-top: 20px;
margin-top: 24px;
border-top: 1px solid var(--n-border);
}
.form-actions-right {
justify-content: flex-end;
}
.form-actions-between {
justify-content: space-between;
}

.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
}
.empty-state .empty-icon {
font-size: 40px;
color: var(--n-text-muted);
margin-bottom: 12px;
opacity: 0.6;
}
.empty-state .empty-title {
font-family: var(--n-font);
font-size: 16px;
font-weight: 500;
color: var(--n-text);
margin-bottom: 4px;
}
.empty-state .empty-description {
font-family: var(--n-font);
font-size: 14px;
color: var(--n-text-secondary);
max-width: 360px;
line-height: 1.5;
}

.toast {
font-family: var(--n-font);
font-size: 14px;
border: none;
border-radius: var(--n-radius);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
background: var(--n-bg);
overflow: hidden;
}
.toast-header {
font-size: 13px;
font-weight: 500;
color: var(--n-text);
border-bottom: 1px solid var(--n-border);
padding: 8px 12px;
background: transparent;
}
.toast-body {
padding: 10px 12px;
color: var(--n-text-secondary);
}

.form-control[type="color"] {
width: 48px;
height: 34px;
padding: 3px;
cursor: pointer;
}

.form-range,
input[type="range"].form-control {
width: 100%;
height: 4px;
padding: 0;
background: transparent;
border: none;
appearance: none;
-webkit-appearance: none;
}
.form-range::-webkit-slider-track {
height: 4px;
background: rgba(0, 0, 0, 0.1);
border-radius: var(--n-radius-pill);
}
.form-range::-webkit-slider-thumb {
width: 16px;
height: 16px;
margin-top: -6px;
background: var(--n-accent);
border: 2px solid #fff;
border-radius: 50%;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
transition: transform var(--n-transition);
}
.form-range::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
.form-range::-moz-range-track {
height: 4px;
background: rgba(0, 0, 0, 0.1);
border-radius: var(--n-radius-pill);
border: none;
}
.form-range::-moz-range-thumb {
width: 16px;
height: 16px;
background: var(--n-accent);
border: 2px solid #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.form-inline {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
}
.form-inline .form-group {
margin-bottom: 0;
}
.form-inline .form-control {
width: auto;
}

.list-group {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
list-style: none;
border-radius: var(--n-radius);
border: 1px solid var(--n-border);
overflow: hidden;
}
.list-group-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-family: var(--n-font);
font-size: 14px;
color: var(--n-text);
background: var(--n-bg);
border-bottom: 1px solid var(--n-border);
text-decoration: none;
transition: background-color var(--n-transition);
}
.list-group-item:last-child {
border-bottom: none;
}
.list-group-item:hover {
background-color: var(--n-bg-hover);
}
.list-group-item.active {
background-color: var(--n-accent-bg);
color: var(--n-accent);
border-color: var(--n-border);
}

@media (max-width: 768px) {
.form-control,
.form-select,
select.form-control {
font-size: 16px; 
}
.form-group.row {
flex-direction: column;
}
.form-group.row > label.col-form-label,
.form-group.row > .col-form-label {
padding-top: 0;
margin-bottom: 6px;
width: 100%;
max-width: 100%;
flex: none;
}
.form-group.row > [class*="col-"] {
width: 100%;
max-width: 100%;
flex: none;
padding-left: 0;
padding-right: 0;
}
.form-row {
flex-direction: column;
gap: 0;
}
.form-row > .form-group {
width: 100%;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
.form-inline .form-control {
width: 100%;
}
.form-actions {
flex-direction: column-reverse;
}
.form-actions .btn {
width: 100%;
justify-content: center;
}
.tile-selector {
grid-template-columns: repeat(2, 1fr);
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.btn-group {
flex-direction: column;
width: 100%;
}
.btn-group .btn {
border-radius: 0;
width: 100%;
}
.btn-group .btn:first-child {
border-radius: var(--n-radius-sm) var(--n-radius-sm) 0 0;
}
.btn-group .btn:last-child {
border-radius: 0 0 var(--n-radius-sm) var(--n-radius-sm);
}
}
@media (max-width: 480px) {
.tile-selector {
grid-template-columns: 1fr;
}
.pagination {
flex-wrap: wrap;
justify-content: center;
}
.modal-content {
border-radius: var(--n-radius) var(--n-radius) 0 0;
margin: 0;
}
}

@media print {
.form-control,
.form-select,
select.form-control {
border-color: #c6c6c6 !important;
box-shadow: none !important;
}
.btn {
border: 1px solid #c6c6c6 !important;
box-shadow: none !important;
}
.form-actions,
.btn-group {
page-break-inside: avoid;
}
.alert {
border: 1px solid #c6c6c6 !important;
}
}

*:focus-visible {
outline: 2px solid var(--n-accent);
outline-offset: 2px;
}
.form-check-input:focus-visible {
outline: 2px solid var(--n-accent);
outline-offset: 2px;
}
.sr-only,
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}