.bops-app,
.bops-fields {
    box-sizing: border-box;
}

.bops-app *,
.bops-fields * {
    box-sizing: inherit;
}

.bops-app {
    --bops-border: color-mix(in srgb, currentColor 14%, transparent);
    --bops-muted: color-mix(in srgb, currentColor 68%, transparent);
    --bops-surface: color-mix(in srgb, Canvas 96%, currentColor 4%);
    max-width: 920px;
    margin: 0 auto;
    color: inherit;
}

.bops-panel {
    display: none;
    padding: 18px;
    border: 1px solid var(--bops-border);
    border-radius: 8px;
    background: Canvas;
}

.bops-panel.is-active,
.bops-app.bops-panel,
.bops-app > .bops-panel:first-child {
    display: block;
}

.bops-panel h2 {
    margin: 0 0 24px;
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
    font-weight: 800;
    line-height: 1.25;
}

.bops-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}

.bops-page-header h2 {
    margin: 0;
    font-weight: 800;
}

.bops-app .bops-panel h2,
.bops-app.bops-panel h2,
.bops-app .bops-page-header h2 {
    font-weight: 800;
}

.bops-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid #ABD6A7;
    border-radius: 50%;
    background: #ABD6A7;
    color: #fff !important;
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
}

.bops-icon-button:hover,
.bops-icon-button:focus {
    color: #fff !important;
}

.bops-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    margin: 0 0 14px;
}

.bops-nav .bops-nav-logo {
    min-height: 0;
    border: 0;
    border-radius: 0;
    padding: 0 6px 0 0;
    background: transparent;
}

.bops-nav-logo img {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.bops-mobile-title {
    display: none;
}

.bops-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    border: 0;
    border-radius: 0;
    padding: 5px 0;
    background: transparent;
    color: var(--bops-muted) !important;
    font-weight: 700;
    text-decoration: none;
    position: relative;
}

.bops-nav a:not(.bops-nav-logo)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--bops-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.18s ease;
}

.bops-nav a:hover,
.bops-nav a:focus,
.bops-nav a.is-active {
    color: inherit !important;
}

.bops-nav a.is-active::after {
    transform: scaleX(1);
}

.bops-nav-logout {
    margin: 0 0 0 auto;
}

.bops-module-layout {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.bops-module-content {
    min-width: 0;
}

.bops-subnav {
    display: grid;
    gap: 2px;
    position: sticky;
    top: 16px;
    border-right: 1px solid var(--bops-border);
    padding-right: 12px;
}

.bops-subnav a {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 0;
    border-radius: 0;
    padding: 7px 10px 7px 0;
    color: var(--bops-muted);
    font-weight: 700;
    text-decoration: none;
    position: relative;
}

.bops-subnav a:hover,
.bops-subnav a:focus,
.bops-subnav a.is-active {
    color: inherit;
}

.bops-subnav a.is-active {
    font-weight: 700;
}

.bops-subnav a.is-active::before {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: -12px;
    width: 3px;
    border-radius: 999px;
    background: var(--bops-accent);
}

.bops-settings-tab-nav {
    margin-bottom: 18px;
}

.bops-settings-panel {
    margin-top: 0;
}

.bops-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bops-dashboard-hero {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bops-border);
}

.bops-dashboard-user {
    display: flex;
    gap: 20px;
    align-items: center;
    min-width: 0;
}

.bops-dashboard-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.bops-dashboard-user p,
.bops-dashboard-user h2,
.bops-dashboard-user span,
.bops-dashboard-meta strong,
.bops-dashboard-meta span {
    display: block;
    margin: 0;
}

.bops-dashboard-user p,
.bops-dashboard-user span,
.bops-dashboard-meta span {
    color: var(--bops-muted);
}

.bops-dashboard-user h2 {
    font-size: 1.4rem;
    line-height: 1.15;
}

.bops-dashboard-meta {
    text-align: right;
    white-space: nowrap;
}

.bops-action-card {
    display: grid;
    gap: 8px;
    min-height: 120px;
    border: 1px solid var(--bops-border);
    border-radius: 8px;
    padding: 16px;
    background: Canvas;
    color: inherit;
}

.bops-card-heading {
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
    justify-self: start;
}

.bops-card-title {
    color: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.bops-card-title:hover,
.bops-card-title:focus {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bops-card-heading .dashicons {
    width: 22px;
    height: 22px;
    font-size: 22px;
    line-height: 1;
    color: var(--bops-muted);
    transform: translateY(3px);
}

.bops-action-card span {
    color: var(--bops-muted);
    line-height: 1.45;
}

.bops-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.bops-card-stats small {
    display: inline-flex;
    gap: 4px;
    align-items: baseline;
    color: var(--bops-muted);
}

.bops-card-stat-list {
    display: grid;
    gap: 6px;
    width: 100%;
}

.bops-card-stat-list small {
    justify-content: space-between;
    gap: 12px;
}

.bops-card-stats b {
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
}

.bops-dashboard-tasks {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--bops-border);
    padding-bottom: 18px;
}

.bops-section-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
    justify-content: space-between;
}

.bops-section-heading h3 {
    margin: 0;
    font-size: 1.65rem;
    line-height: 1.2;
}

.bops-app .bops-dashboard-tasks .bops-section-heading h3 {
    font-size: 1.65rem;
}

.bops-dashboard-tasks .bops-section-heading span {
    font-size: 0.88rem;
}

.bops-app .bops-dashboard-tasks .bops-section-heading span {
    font-size: 0.88rem;
}

.bops-section-heading span,
.bops-muted-text {
    color: var(--bops-muted);
}

.bops-dashboard-task-list {
    display: grid;
    gap: 10px;
}

.bops-dashboard-task-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    align-items: start;
    border: 1px solid var(--bops-border);
    border-radius: 8px;
    padding: 12px;
    background: Canvas;
}

.bops-dashboard-task-item.is-done {
    border-color: #1f9d55;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #1f9d55 45%, transparent);
}

.bops-dashboard-task-item > div:first-child {
    display: grid;
    justify-items: start;
}

.bops-dashboard-task-item strong,
.bops-dashboard-task-item p {
    margin: 0;
}

.bops-dashboard-task-item p {
    margin-top: 4px;
    color: var(--bops-muted);
    line-height: 1.45;
}

.bops-dashboard-task-item small {
    margin-top: 4px;
    color: var(--bops-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.bops-dashboard-task-meta {
    display: grid;
    gap: 2px;
    min-width: 92px;
    text-align: right;
}

.bops-dashboard-task-meta strong {
    color: inherit;
    font-size: 0.98rem;
    line-height: 1.2;
}

.bops-dashboard-task-meta span,
.bops-dashboard-task-meta small {
    color: var(--bops-muted);
}

.bops-task-done-link {
    display: block;
    width: max-content;
    margin-top: 5px;
    color: inherit;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bops-task-done-link.is-done {
    color: #146c3d;
}

.bops-task-filters {
    position: relative;
    margin: 8px 0 18px;
}

.bops-task-period-note {
    margin: 0 0 12px;
}

.bops-task-calendar {
    display: grid;
    gap: 10px;
    width: min(420px, calc(100vw - 40px));
}

.bops-task-calendar-dropdown {
    position: relative;
    align-self: end;
    flex: 0 0 44px;
}

.bops-task-calendar-dropdown summary {
    list-style: none;
}

.bops-task-calendar-dropdown summary::-webkit-details-marker {
    display: none;
}

.bops-task-calendar-dropdown[open] .bops-task-calendar {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    padding: 14px;
    border: 1px solid var(--bops-border);
    border-radius: 8px;
    background: Canvas;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

.bops-task-calendar-heading {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    text-align: center;
}

.bops-task-calendar-heading a {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bops-border);
    border-radius: 8px;
    color: inherit;
    font-size: 1.35rem;
    line-height: 1;
    text-decoration: none;
}

.bops-task-calendar-heading a:last-child {
    justify-self: end;
}

.bops-task-calendar-heading strong {
    font-size: 1rem;
}

.bops-task-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.bops-task-calendar-weekday {
    color: var(--bops-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.bops-task-calendar-day {
    display: inline-flex;
    aspect-ratio: 1;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bops-border);
    border-radius: 8px;
    background: Canvas;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.bops-task-calendar-day.is-empty {
    border-color: transparent;
    background: transparent;
}

.bops-task-calendar-day.is-in-period {
    border-color: color-mix(in srgb, #FF695D 50%, var(--bops-border));
}

.bops-task-calendar-day.has-tasks {
    border-color: #FF695D;
    background: color-mix(in srgb, #FF695D 18%, Canvas);
    color: #b73931;
}

.bops-time-calendar {
    background: Canvas;
}

.bops-time-calendar-scroll {
    width: 100%;
    max-height: min(70vh, 720px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bops-time-calendar-scroll::-webkit-scrollbar {
    display: none;
}

.bops-time-calendar-grid {
    display: grid;
    grid-template-columns: max-content repeat(var(--bops-time-calendar-staff-count), minmax(92px, 1fr)) max-content;
    min-width: max-content;
    column-gap: 18px;
    row-gap: 0;
    align-items: stretch;
    font-size: 0.92rem;
}

.bops-time-calendar-cell {
    min-height: 38px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 9%, transparent);
    padding: 9px 0;
    color: var(--bops-muted);
    text-align: left;
    white-space: nowrap;
}

.bops-time-calendar-header {
    position: sticky;
    top: 0;
    z-index: 4;
    background: Canvas;
    color: var(--bops-muted);
    font-weight: 800;
}

.bops-time-calendar-cell.has-hours {
    color: inherit;
    font-weight: 800;
}

.bops-time-calendar-cell.has-hours.is-under {
    color: #f59e0b;
}

.bops-time-calendar-cell.has-hours.is-complete {
    color: #ABD6A7;
}

.bops-time-calendar-cell.has-hours.is-over {
    color: #FF695D;
}

.bops-time-calendar-date-col {
    position: sticky;
    left: 0;
    z-index: 3;
    padding-right: 8px;
    background: Canvas;
    color: color-mix(in srgb, currentColor 36%, transparent);
    font-weight: 800;
}

.bops-time-calendar-header.bops-time-calendar-date-col {
    z-index: 5;
}

.bops-time-calendar-total-col {
    color: inherit;
    font-weight: 800;
}

.bops-time-calendar-footer {
    background: Canvas;
    color: inherit;
    font-weight: 800;
}

.bops-fields {
    display: grid;
    gap: 14px;
}

.bops-product-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bops-product-fields label:last-child {
    grid-column: 1 / -1;
}

.bops-location-form,
.bops-position-form,
.bops-task-form {
    margin-bottom: 32px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--bops-border);
}

.bops-location-form h2,
.bops-position-form h2,
.bops-task-form h2 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    line-height: 1.25;
}

.bops-task-form form {
    display: grid;
    gap: 16px;
}

.bops-location-form .bops-checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin: 10px 0 0;
    border: 0;
    padding: 0;
}

.bops-location-form form > label + .bops-checkbox-group {
    margin-top: 16px;
}

.bops-location-form .bops-checkbox-group legend {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    color: var(--bops-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.bops-location-form .bops-checkbox-group label {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    width: auto;
    min-height: 34px;
    margin: 0;
    border: 1px solid var(--bops-border);
    border-radius: 6px;
    padding: 7px 10px;
    background: var(--bops-surface);
}

.bops-location-form .bops-checkbox-group input {
    width: auto;
    min-height: 0;
    margin: 0;
}

.bops-location-form .bops-actions,
.bops-position-form .bops-actions,
.bops-task-form .bops-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    margin-top: 16px;
}

.bops-location-form .bops-actions .bops-button,
.bops-position-form .bops-actions .bops-button,
.bops-task-form .bops-actions .bops-button {
    width: auto;
    min-width: 160px;
    margin-top: 0;
}

.bops-location-form .bops-actions a,
.bops-position-form .bops-actions a,
.bops-task-form .bops-actions a {
    font-weight: 700;
}

.bops-location-list,
.bops-position-list,
.bops-task-list {
    gap: 12px;
}

.bops-location-list-item,
.bops-position-list-item,
.bops-task-list-item {
    align-items: start;
    gap: 10px 16px;
}

.bops-location-list-body,
.bops-task-list-details {
    display: grid;
    gap: 4px;
}

.bops-location-list-body strong,
.bops-task-list-main strong {
    line-height: 1.25;
}

.bops-task-list-item {
    padding: 12px 16px;
    align-items: center;
}

.bops-task-list-main {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.bops-task-list-main strong {
    min-width: 0;
}

.bops-task-list-main a {
    flex: 0 0 auto;
    color: var(--bops-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.bops-task-list-details {
    grid-column: 1 / -1;
    margin-top: 6px;
}

.bops-task-schedule-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.bops-task-form-schedule-fields {
    margin-top: 4px;
}

.bops-users-form {
    display: grid;
    gap: 18px;
}

.bops-users-list {
    gap: 12px;
}

.bops-user-location-item {
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    align-items: start;
    gap: 14px 20px;
}

.bops-user-location-heading {
    display: grid;
    gap: 4px;
}

.bops-user-location-heading strong {
    line-height: 1.25;
}

.bops-user-assignment-fields {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.bops-user-position-field {
    display: grid;
    gap: 5px;
    max-width: 360px;
}

.bops-user-position-field span {
    color: var(--bops-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.bops-user-location-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    width: 100%;
    margin: 0;
    border: 0;
    padding: 0;
}

.bops-user-location-options legend {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    color: var(--bops-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.bops-user-location-options label {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    width: auto;
    min-height: 34px;
    margin: 0;
    border: 1px solid var(--bops-border);
    border-radius: 6px;
    padding: 7px 10px;
    background: var(--bops-surface);
}

.bops-user-location-options input {
    width: auto;
    min-height: 0;
    margin: 0;
}

.bops-users-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.bops-users-actions .bops-button {
    width: auto;
    min-width: 180px;
}

.bops-location-list-body span {
    display: block;
    font-size: 0.92rem;
    line-height: 1.35;
}

.bops-product-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bops-product-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    border: 1px solid var(--bops-border);
    background: Canvas;
}

.bops-product-table th,
.bops-product-table td {
    border-bottom: 1px solid var(--bops-border);
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}

.bops-product-table th {
    background: var(--bops-surface);
    color: var(--bops-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.bops-product-table input {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--bops-border);
    border-radius: 6px;
    padding: 8px 10px;
    background: Canvas;
    color: inherit;
    font: inherit;
}

.bops-product-table input[readonly] {
    background: var(--bops-surface);
}

.bops-sheet-items-grid {
    display: grid;
    gap: 0;
}

.bops-sheet-product-picker {
    display: grid;
    gap: 6px;
}

.bops-sheet-product-picker label {
    display: grid;
    gap: 6px;
    width: 100%;
}

.bops-sheet-item-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 6px 10px;
    align-items: end;
    border-bottom: 1px solid var(--bops-border);
    padding: 10px 0;
}

.bops-sheet-item-title {
    grid-column: 1 / 4;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    min-width: 0;
    line-height: 1.2;
}

.bops-sheet-item-title strong {
    font-weight: 700;
}

.bops-sheet-item-title span {
    color: var(--bops-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.bops-sheet-item-row label {
    display: grid;
    gap: 4px;
    margin: 0;
}

.bops-sheet-item-row label span {
    color: var(--bops-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.bops-sheet-item-row input {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--bops-border);
    border-radius: 6px;
    padding: 8px 10px;
    background: Canvas;
    color: inherit;
    font: inherit;
}

.bops-sheet-item-row input[readonly] {
    background: var(--bops-surface);
}

.bops-order-item-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.bops-order-item-row .bops-sheet-item-title {
    grid-column: 1;
}

.bops-order-item-row label {
    grid-column: 1 / -1;
}

.bops-order-toggle {
    justify-self: start;
    color: #FF695D;
    font-weight: 700;
    text-decoration: none;
}

.bops-order-products {
    display: grid;
    gap: 4px;
    margin-top: 4px;
}

.bops-order-product-line {
    display: flex;
    gap: 8px;
    align-items: baseline;
    color: var(--bops-muted);
    font-size: 0.92rem;
}

.bops-order-product-line strong {
    color: var(--bops-text);
}

.bops-order-status-form {
    margin: 2px 0;
}

.bops-order-status-form select {
    width: auto;
    min-height: 36px;
    padding: 6px 34px 6px 10px;
    font-size: 0.92rem;
}

.bops-list-item[data-bops-order-list-item].is-order-primita {
    border-color: #f59e0b;
}

.bops-list-item[data-bops-order-list-item].is-order-acceptata {
    border-color: #ABD6A7;
}

.bops-list-item[data-bops-order-list-item] > strong,
.bops-list-item[data-bops-order-list-item] > span,
.bops-list-item[data-bops-order-list-item] > .bops-order-status-form,
.bops-list-item[data-bops-order-list-item] > .bops-order-toggle,
.bops-list-item[data-bops-order-list-item] > .bops-order-products {
    grid-column: 1;
}

.bops-list-item[data-bops-order-list-item] > .bops-list-actions {
    grid-row: 1 / span 5;
    grid-column: 2;
}

.bops-sheet-item-remove {
    align-self: start;
    color: #FF695D !important;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 1px;
}

.bops-custom-items {
    display: grid;
    gap: 6px;
    margin-top: 14px;
}

.bops-compact-header {
    margin-bottom: 0;
}

.bops-compact-header h3 {
    margin: 0;
    font-size: 1rem;
}

.bops-custom-item-row {
    grid-template-columns: minmax(220px, 1fr) minmax(92px, max-content) minmax(130px, max-content) minmax(92px, max-content) auto;
    gap: 4px 8px;
    align-items: end;
    padding: 8px 0;
}

.bops-custom-item-row label:first-of-type {
    min-width: 220px;
}

.bops-remove-custom-item {
    align-self: end;
    color: #FF695D !important;
    margin-bottom: 9px;
}

.bops-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    margin: 0 0 32px;
}

.bops-filter-form.is-loading,
.bops-list.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

.bops-filter-form + .bops-list,
.bops-filter-form + .bops-time-entry-groups {
    margin-top: 8px;
}

.bops-filter-form label {
    display: grid;
    flex: 0 1 auto;
    gap: 6px;
    margin: 0;
    min-width: 120px;
    max-width: 100%;
}

.bops-filter-form span {
    color: var(--bops-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.bops-filter-form input,
.bops-filter-form select {
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--bops-border);
    border-radius: 6px;
    padding: 10px 12px;
    background: Canvas;
    color: inherit;
    font: inherit;
}

.bops-app .choices,
.bops-fields .choices {
    width: 100%;
    margin: 0;
    color: inherit;
    font: inherit;
}

.bops-filter-form .choices {
    width: auto;
    min-width: 160px;
    max-width: 100%;
}

.bops-app .choices__inner,
.bops-fields .choices__inner {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--bops-border);
    border-radius: 6px;
    padding: 9px 42px 9px 12px;
    background: Canvas;
    color: inherit;
    font: inherit;
}

.bops-app .choices[data-type*="select-one"] .choices__inner,
.bops-fields .choices[data-type*="select-one"] .choices__inner {
    padding-bottom: 9px;
}

.bops-app .choices__list--single,
.bops-fields .choices__list--single {
    width: 100%;
    padding: 0;
}

.bops-app .choices__item,
.bops-fields .choices__item {
    color: inherit;
    font: inherit;
}

.bops-app .choices__placeholder,
.bops-fields .choices__placeholder {
    opacity: 1;
}

.bops-app .choices[data-type*="select-one"]::after,
.bops-fields .choices[data-type*="select-one"]::after {
    right: 16px;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.85;
    transform: rotate(45deg);
}

.bops-app .choices[data-type*="select-one"].is-open::after,
.bops-fields .choices[data-type*="select-one"].is-open::after {
    margin-top: -1px;
    transform: rotate(225deg);
}

.bops-app .choices.is-focused .choices__inner,
.bops-app .choices.is-open .choices__inner,
.bops-fields .choices.is-focused .choices__inner,
.bops-fields .choices.is-open .choices__inner {
    border-color: color-mix(in srgb, var(--bops-accent) 55%, currentColor 15%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bops-accent) 16%, transparent);
}

.bops-app .choices__list--dropdown,
.bops-app .choices__list[aria-expanded],
.bops-fields .choices__list--dropdown,
.bops-fields .choices__list[aria-expanded] {
    z-index: 30;
    overflow: hidden;
    border: 1px solid var(--bops-border);
    border-radius: 6px;
    background: Canvas;
    color: inherit;
}

.bops-app .choices__list--dropdown .choices__item,
.bops-app .choices__list[aria-expanded] .choices__item,
.bops-fields .choices__list--dropdown .choices__item,
.bops-fields .choices__list[aria-expanded] .choices__item {
    padding: 10px 12px;
    font-size: 1rem;
    white-space: nowrap;
}

.bops-app .choices__list--dropdown .choices__item--selectable.is-highlighted,
.bops-app .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
.bops-fields .choices__list--dropdown .choices__item--selectable.is-highlighted,
.bops-fields .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: color-mix(in srgb, var(--bops-accent) 12%, Canvas 88%);
}

.bops-app .choices__input,
.bops-fields .choices__input {
    margin: 0;
    background: Canvas;
    color: inherit;
    font: inherit;
}

.bops-app .bops-filter-form .bops-filter-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: end;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    padding: 0;
    font: inherit;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    flex: 0 0 44px;
}

.bops-app .bops-filter-form .bops-filter-icon-button .dashicons {
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
}

.bops-app .bops-filter-form .bops-filter-icon-button-primary {
    border: 1px solid #FF695D;
    background: #FF695D;
    color: #fff;
}

.bops-app .bops-filter-form .bops-filter-icon-button-secondary {
    border: 1px solid #FF695D;
    background: var(--bops-surface);
    color: #FF695D;
}

.bops-timeclock-card {
    display: grid;
    gap: 16px;
    margin: 0 0 16px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    border-radius: 8px;
    background: Canvas;
    box-shadow: 0 10px 28px color-mix(in srgb, currentColor 7%, transparent);
}

.bops-timeclock-card.is-clocked-in {
    border-color: color-mix(in srgb, #ABD6A7 70%, currentColor 12%);
    background: linear-gradient(180deg, color-mix(in srgb, #ABD6A7 12%, Canvas 88%), Canvas 46%);
}

.bops-timeclock-card.is-clocked-out {
    border-color: color-mix(in srgb, #FF695D 42%, currentColor 12%);
}

.bops-timeclock-status {
    display: grid;
    gap: 4px;
}

.bops-timeclock-status strong,
.bops-timeclock-status span,
.bops-timeclock-card p {
    margin: 0;
}

.bops-timeclock-status strong {
    color: color-mix(in srgb, currentColor 92%, transparent);
    font-size: clamp(1.45rem, 1.12rem + 1.2vw, 2rem);
    font-weight: 700;
    line-height: 1.05;
}

.bops-timeclock-status span,
.bops-timeclock-message {
    color: var(--bops-muted);
    font-size: 0.95rem;
}

.bops-timeclock-hero {
    display: grid;
    gap: 16px;
    align-items: end;
}

.bops-timeclock-start {
    display: grid;
    gap: 2px;
    justify-items: start;
}

.bops-timeclock-start span {
    color: var(--bops-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.bops-timeclock-start strong {
    color: color-mix(in srgb, currentColor 95%, transparent);
    font-size: clamp(2.8rem, 2.1rem + 4vw, 4.6rem);
    font-weight: 800;
    line-height: 0.95;
}

.bops-timeclock-timeline {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, #ABD6A7 35%, var(--bops-border));
    border-radius: 8px;
    background: color-mix(in srgb, #ABD6A7 10%, Canvas 90%);
}

.bops-timeclock-timeline-head,
.bops-timeclock-timeline-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.bops-timeclock-timeline-head span,
.bops-timeclock-timeline-meta {
    color: var(--bops-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.bops-timeclock-timeline-head strong {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: right;
}

.bops-timeclock-track {
    position: relative;
    overflow: hidden;
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.bops-timeclock-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #ABD6A7;
    transition: width 240ms ease;
}

.bops-timeclock-card form {
    display: grid;
    gap: 12px;
    margin: 0;
}

.bops-timeclock-card .bops-button {
    margin-top: 0;
    width: 100%;
}

.bops-timeclock-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    border-radius: 8px;
}

.bops-timeclock-action-button[disabled] {
    opacity: 0.42;
    cursor: not-allowed;
}

.bops-timeclock-action-in {
    background: #ABD6A7;
    border-color: #ABD6A7;
    color: #fff;
}

.bops-timeclock-action-out {
    background: #FF695D;
    border-color: #FF695D;
    color: #fff;
}

.bops-app .bops-timeclock-mode {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.bops-app .bops-timeclock-mode button[type="button"] {
    appearance: none;
    display: inline;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    color: color-mix(in srgb, currentColor 34%, transparent);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bops-app .bops-timeclock-mode button[type="button"]:hover,
.bops-app .bops-timeclock-mode button[type="button"]:focus {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.bops-app .bops-timeclock-mode button[type="button"].is-active {
    color: #FF695D;
}

.bops-app .bops-timeclock-mode button + button::before {
    content: "/";
    display: inline-block;
    margin: 0 8px 0 0;
    color: color-mix(in srgb, currentColor 28%, transparent);
    text-decoration: none;
}

.bops-timeclock-manual {
    display: grid;
    gap: 10px;
}

.bops-timeclock-retroactive {
    padding: 10px;
    border: 1px solid var(--bops-border);
    border-radius: 8px;
    background: color-mix(in srgb, Canvas 92%, currentColor 8%);
}

.bops-timeclock-datetime-group {
    display: grid;
    gap: 6px;
}

.bops-timeclock-datetime-group > strong {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.2;
}

.bops-timeclock-datetime-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(104px, 0.62fr);
    gap: 8px;
    min-width: 0;
}

.bops-timeclock-manual-link {
    justify-self: start;
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bops-timeclock-time {
    display: grid;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.bops-timeclock-time span {
    color: var(--bops-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.bops-timeclock-time input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--bops-border);
    border-radius: 6px;
    padding: 10px 12px;
    background: Canvas;
    color: inherit;
    font: inherit;
}

.bops-timeclock-message.is-error {
    color: #b42318;
}

@media (min-width: 681px) {
    .bops-timeclock-card {
        padding: 22px;
    }

    .bops-timeclock-hero {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .bops-timeclock-start {
        justify-items: end;
        text-align: right;
    }

    .bops-timeclock-timeline {
        padding: 16px;
    }
}

.bops-time-entries-grid {
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 12px;
}

.bops-time-entry-card {
    position: relative;
    container-type: inline-size;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "main progress"
        "main progress";
    gap: 10px 14px;
    align-items: start;
    min-height: 0;
    padding: 16px;
    background: color-mix(in srgb, Canvas 97%, currentColor 3%);
}

.bops-time-entry-main {
    grid-area: main;
    display: grid;
    gap: 6px;
    min-width: 0;
}

.bops-time-entry-main strong {
    font-size: clamp(0.9rem, 0.84rem + 0.2vw, 1rem);
    line-height: 1.2;
}

.bops-time-entry-main span {
    color: var(--bops-muted);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
}

.bops-time-entry-progress {
    --bops-progress-color: #FF695D;
    grid-area: progress;
    display: grid;
    place-items: center;
    justify-self: end;
    width: min(28.6cqw, 106px);
    min-width: 68px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, Canvas 82%, transparent 84%),
        conic-gradient(var(--bops-progress-color) var(--bops-progress), color-mix(in srgb, currentColor 10%, transparent) 0);
}

@supports not (width: 1cqw) {
    .bops-time-entry-progress {
        width: clamp(68px, 19.8vw, 106px);
    }

    .bops-time-entry-progress strong {
        font-size: clamp(0.82rem, 2.4vw, 1.05rem);
    }
}

.bops-time-entry-card.is-under .bops-time-entry-progress {
    --bops-progress-color: #f59e0b;
}

.bops-time-entry-card.is-complete .bops-time-entry-progress {
    --bops-progress-color: #ABD6A7;
}

.bops-time-entry-card.is-overtime {
    border-color: color-mix(in srgb, #FF695D 70%, currentColor 12%);
}

.bops-time-entry-card.is-overtime .bops-time-entry-progress {
    --bops-progress-color: #FF695D;
}

.bops-time-entry-progress > div {
    display: grid;
    gap: 1px;
    justify-items: center;
    line-height: 1;
}

.bops-time-entry-progress strong {
    font-size: clamp(0.82rem, 3.1cqw, 1.05rem);
    font-weight: 800;
    white-space: nowrap;
}

.bops-time-entry-progress span {
    color: var(--bops-muted);
    font-size: 0.7rem;
    font-weight: 800;
}

.bops-time-entry-card-actions {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-self: start;
    margin-top: 2px;
}

.bops-time-entry-card-actions a {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #FF695D;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.bops-time-entry-card-actions a:hover,
.bops-time-entry-card-actions a:focus {
    color: #FF695D;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bops-icon-only-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--bops-muted);
    cursor: pointer;
}

.bops-icon-only-button:hover,
.bops-icon-only-button:focus {
    border-color: transparent;
    background: transparent;
    color: #FF695D;
}

.bops-time-entry-card-actions .bops-danger-link {
    color: #FF695D;
}

.bops-time-entry-dialog {
    width: min(720px, calc(100vw - 28px));
    max-height: calc(100vh - 40px);
    border: 1px solid var(--bops-border);
    border-radius: 8px;
    padding: 18px;
    background: Canvas;
    color: inherit;
    box-shadow: 0 18px 60px color-mix(in srgb, currentColor 18%, transparent);
}

.bops-time-entry-dialog::backdrop {
    background: color-mix(in srgb, currentColor 28%, transparent);
}

.bops-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}

.bops-dialog-header strong {
    font-size: 1.25rem;
    line-height: 1.2;
}

.bops-icon-only-button {
    padding: 0;
    font: inherit;
}

.bops-time-entry-groups {
    gap: 16px;
}

.bops-time-entry-group {
    display: grid;
    gap: 8px;
}

.bops-time-entry-group header {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--bops-border);
}

.bops-time-entry-group header span {
    color: var(--bops-muted);
    font-weight: 700;
}

.bops-time-entry-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 10px;
    align-items: end;
    margin-top: 10px;
}

.bops-time-entry-form label {
    display: grid;
    gap: 6px;
    margin: 0;
}

.bops-time-entry-form span {
    color: var(--bops-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.bops-time-entry-form input {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--bops-border);
    border-radius: 6px;
    padding: 8px 10px;
    background: Canvas;
    color: inherit;
    font: inherit;
}

.bops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bops-full {
    grid-column: 1 / -1;
}

.bops-fields label {
    display: grid;
    gap: 6px;
    margin: 0;
}

.bops-fields fieldset label {
    display: inline;
    margin-right: 12px;
}

.bops-fields span {
    color: var(--bops-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.bops-fields input:not([type="checkbox"]):not([type="radio"]),
.bops-fields select,
.bops-fields textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--bops-border);
    border-radius: 6px;
    padding: 10px 12px;
    background: Canvas;
    color: inherit;
    font: inherit;
}

.bops-fields textarea {
    min-height: 110px;
    resize: vertical;
}

.bops-button {
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    border: 0;
    border-radius: 6px;
    padding: 12px 16px;
    background: ButtonText;
    color: ButtonFace;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.bops-button:disabled,
.bops-button[aria-disabled="true"] {
    background: color-mix(in srgb, ButtonText 18%, Canvas);
    color: color-mix(in srgb, CanvasText 45%, Canvas);
    cursor: not-allowed;
    opacity: 0.7;
}

.bops-button-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 128px;
    margin-top: 0;
    text-decoration: none;
}

.bops-button-secondary {
    border: 1px solid var(--bops-border);
    background: var(--bops-surface);
    color: inherit;
}

.bops-settings-section-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bops-settings-section-header h2 {
    margin: 0 0 4px;
}

.bops-settings-section-header p {
    margin: 0;
    color: var(--bops-muted);
}

.bops-permission-rules {
    display: grid;
    gap: 10px;
}

.bops-permission-rule-row {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 16px;
}

.bops-permission-rule-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-right: 64px;
}

.bops-permission-rule-group {
    display: grid;
    gap: 8px;
    align-content: start;
}

.bops-permission-rule-title {
    color: var(--bops-muted);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.bops-permission-rule-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 10px;
}

.bops-permission-rule-fields-wide {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
}

.bops-permission-rule-fields label {
    display: grid;
    gap: 6px;
}

.bops-permission-rule-fields label > span {
    color: var(--bops-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.bops-permission-rule-fields select {
    width: 100%;
    min-height: 42px;
}

.bops-permission-rule-remove {
    position: absolute;
    top: 14px;
    right: 16px;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.bops-form-message {
    min-height: 22px;
    margin-top: 10px;
    color: var(--bops-muted);
    font-weight: 700;
}

.bops-form-message.is-error {
    color: #b42318;
}

.bops-hidden,
.bops-app [hidden] {
    display: none !important;
}

.bops-inline-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
}

.bops-inline-create-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.bops-inline-create-form .bops-fields {
    margin: 0;
}

.bops-inline-create-form .bops-button {
    margin-top: 0;
    min-height: 44px;
}

.bops-request-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bops-request-vacation-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bops-request-item {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px 18px;
}

.bops-request-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.bops-request-copy p {
    margin: 0;
}

.bops-request-status-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

.bops-request-status-form select,
.bops-request-status-form input,
.bops-request-status-form .bops-button {
    width: auto;
    min-height: 42px;
    margin: 0;
}

.bops-request-status-form .choices {
    width: auto;
    min-width: 150px;
}

.bops-request-status-form select,
.bops-request-status-form input {
    border: 1px solid var(--bops-border);
    border-radius: 6px;
    padding: 9px 12px;
    background: Canvas;
    color: inherit;
    font: inherit;
}

.bops-request-status-form .bops-button {
    min-width: 120px;
    padding: 9px 14px;
}

.bops-request-actions {
    margin-left: auto;
    white-space: nowrap;
}

.bops-separated-list {
    margin-top: 24px;
}

.bops-notice {
    margin: 0 0 12px;
    border-left: 4px solid #2271b1;
    padding: 12px 14px;
    background: color-mix(in srgb, #2271b1 10%, Canvas);
}

.bops-notice.is-error {
    border-left-color: #b42318;
    background: color-mix(in srgb, #b42318 10%, Canvas);
}

.bops-readings-editor,
.bops-reading-rows {
    display: grid;
    gap: 14px;
}

.bops-reading-row {
    display: grid;
    gap: 12px;
    border: 1px solid var(--bops-border);
    border-radius: 8px;
    padding: 12px;
    background: Canvas;
}

.bops-reading-head {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr)) auto auto auto;
    gap: 10px;
    align-items: end;
}

.bops-reading-head label {
    display: grid;
    gap: 6px;
    margin: 0;
}

.bops-reading-head span {
    color: var(--bops-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.bops-reading-head input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--bops-border);
    border-radius: 6px;
    padding: 10px 12px;
    background: Canvas;
    color: inherit;
    font: inherit;
}

.bops-reading-head .bops-danger-link {
    align-self: center;
    color: #b42318;
    font-weight: 700;
}

.bops-link-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bops-reading-table {
    min-width: 420px;
}

.bops-signature-field {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bops-signature-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    min-height: 88px;
    border: 1px solid var(--bops-border, #dcdcde);
    border-radius: 6px;
    background: #fff;
}

.bops-signature-preview:empty::before {
    content: "Fara semnatura";
    color: #646970;
}

.bops-signature-preview img {
    display: block;
    max-width: 100%;
    max-height: 86px;
    object-fit: contain;
}

.bops-list {
    display: grid;
    gap: 10px;
}

.bops-list-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--bops-border);
    border-radius: 8px;
}

.bops-list-item span {
    color: var(--bops-muted);
}

.bops-inline-edit-field {
    display: grid;
    gap: 4px;
    margin: 0;
}

.bops-inline-edit-field span {
    font-size: 0.78rem;
    font-weight: 700;
}

.bops-inline-edit-field input {
    min-height: 38px;
    border: 1px solid var(--bops-border);
    border-radius: 6px;
    padding: 8px 10px;
    background: Canvas;
    color: inherit;
    font: inherit;
}

.bops-list-item.is-inactive {
    opacity: 0.72;
}

.bops-list-actions {
    display: inline-flex;
    grid-row: 1 / span 2;
    grid-column: 2;
    gap: 10px;
    align-self: center;
}

.bops-list-actions a {
    font-weight: 700;
}

.bops-list-actions .bops-danger-link {
    color: #FF695D;
}

.bops-product-links {
    grid-row: auto;
    grid-column: 1;
    align-self: start;
}

.bops-product-toggle {
    grid-row: 1 / span 3;
    grid-column: 2;
    align-self: center;
    justify-self: end;
}

.bops-product-toggle .bops-toggle-field > span:last-child {
    display: none;
}

.bops-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
}

.bops-pagination a,
.bops-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    border: 1px solid var(--bops-border);
    border-radius: 6px;
    padding: 6px 10px;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.bops-pagination span {
    border-color: #FF695D;
    background: #FF695D;
    color: #fff;
}

.bops-inline-toggle,
.bops-checkbox-field {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.bops-toggle-field {
    display: inline-flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.bops-toggle-field input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bops-toggle-control {
    position: relative;
    width: 54px;
    min-width: 54px;
    height: 30px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 18%, transparent);
    transition: background 0.16s ease;
}

.bops-toggle-control::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px color-mix(in srgb, #000 20%, transparent);
    transition: transform 0.16s ease;
}

.bops-toggle-field input:checked + .bops-toggle-control {
    background: #FF695D;
}

.bops-toggle-field input:checked + .bops-toggle-control::after {
    transform: translateX(24px);
}

.bops-inline-toggle {
    font-weight: 700;
    cursor: pointer;
}

.bops-login-remember {
    justify-self: start;
}

.bops-login-remember > span:last-child {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
}

.bops-inline-toggle input,
.bops-checkbox-field input {
    width: auto;
    min-height: 0;
    margin: 0;
}

.post-type-bops_product .bops-fields,
.post-type-bops_sheet .bops-fields {
    max-width: 860px;
}

.bops-compact-list .bops-list-item {
    padding-top: 10px;
    padding-bottom: 10px;
}

.bops-production-summary {
    display: flex;
    grid-column: 1 / -1;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    min-width: 0;
}

.bops-production-summary strong {
    min-width: 0;
}

.bops-production-summary span {
    flex: 0 0 auto;
    color: inherit;
    font-weight: 700;
}

.bops-compact-list-item span {
    font-size: 0.92rem;
}

.bops-production-meta:empty {
    display: none;
}

.bops-production-meta {
    grid-column: 1 / -1;
}

@media (max-width: 680px) {
    .bops-app {
        max-width: none;
    }

    .bops-app:has(> .bops-nav) {
        padding-top: 62px;
    }

    .bops-card-grid {
        grid-template-columns: 1fr;
    }

    .bops-dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .bops-dashboard-meta {
        text-align: left;
    }

    .bops-dashboard-task-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
        padding: 10px;
    }

    .bops-dashboard-task-meta {
        min-width: 76px;
        text-align: right;
    }

    .bops-task-calendar-dropdown {
        position: static;
    }

    .bops-task-calendar-dropdown[open] .bops-task-calendar {
        left: 0;
        right: 0;
        width: 100%;
        max-width: calc(100vw - 40px);
    }

    .bops-time-calendar-grid {
        grid-template-columns: max-content repeat(var(--bops-time-calendar-staff-count), minmax(82px, 1fr)) max-content;
        column-gap: 14px;
        font-size: 0.84rem;
    }

    .bops-time-calendar-cell {
        min-height: 34px;
        padding: 8px 0;
    }

    .bops-nav {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1000;
        display: flex;
        flex-wrap: nowrap;
        gap: 14px;
        align-items: center;
        margin: 0;
        padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
        border-bottom: 1px solid var(--bops-border);
        background: color-mix(in srgb, Canvas 96%, transparent);
        box-shadow: 0 8px 22px color-mix(in srgb, currentColor 10%, transparent);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        backdrop-filter: blur(12px);
        scrollbar-width: none;
    }

    body.admin-bar .bops-nav {
        top: 46px;
    }

    .bops-nav::-webkit-scrollbar {
        display: none;
    }

    .bops-nav .bops-nav-logo {
        position: sticky;
        left: 0;
        z-index: 1;
        flex: 0 0 42px;
        padding: 0 6px 0 0;
        background: color-mix(in srgb, Canvas 96%, transparent);
    }

    .bops-nav-logo img {
        width: 36px;
        height: 36px;
    }

    .bops-mobile-title {
        display: none;
        align-items: center;
        font-size: 1.1rem;
        line-height: 1.2;
    }

    .bops-nav a:not(.bops-nav-logo) {
        flex: 0 0 auto;
        min-height: 0;
        padding: 6px 0;
        white-space: nowrap;
    }

    .bops-nav-logout {
        flex: 0 0 auto;
        margin-left: 0;
    }

    .bops-nav-logout a {
        width: auto;
    }

    .bops-subnav {
        position: static;
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-right: 0;
        border-bottom: 1px solid var(--bops-border);
        padding: 0 0 8px;
    }

    .bops-subnav::-webkit-scrollbar {
        display: none;
    }

    .bops-subnav a {
        flex: 0 0 auto;
        width: auto;
        min-height: 0;
        padding: 7px 0;
        white-space: nowrap;
    }

    .bops-subnav a.is-active::before {
        top: auto;
        right: 0;
        bottom: 2px;
        left: 0;
        width: auto;
        height: 2px;
    }

    .bops-settings-section-header {
        display: grid;
    }

    .bops-permission-rule-row {
        grid-template-columns: 1fr;
    }

    .bops-permission-rule-main {
        grid-template-columns: 1fr;
        padding-right: 0;
    }

    .bops-permission-rule-fields,
    .bops-permission-rule-fields-wide {
        grid-template-columns: 1fr;
    }

    .bops-permission-rule-remove {
        position: static;
        justify-self: start;
        min-height: 28px;
    }

    .bops-module-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .bops-time-entry-form {
        grid-template-columns: 1fr;
    }

    .bops-inline-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .bops-inline-create-form {
        grid-template-columns: 1fr;
    }

    .bops-reading-head {
        grid-template-columns: 1fr;
    }

    .bops-button-inline {
        width: 100%;
    }

    .bops-panel {
        padding: 12px;
    }

    .bops-page-header,
    .bops-section-heading {
        margin-bottom: 12px;
    }

    .bops-filter-form {
        gap: 8px;
        margin-bottom: 16px;
    }

    .bops-filter-form label {
        flex: 1 1 132px;
        gap: 4px;
        min-width: 0;
    }

    .bops-product-productions-filters label:first-of-type {
        flex-basis: 100%;
    }

    .bops-product-productions-filters label:nth-of-type(2),
    .bops-product-productions-filters label:nth-of-type(3) {
        flex: 1 1 calc(50% - 4px);
    }

    .bops-task-filters label {
        flex: 1 1 0;
        min-width: 104px;
    }

    .bops-filter-form span {
        font-size: 0.82rem;
    }

    .bops-filter-form input,
    .bops-filter-form select {
        min-height: 40px;
        padding: 8px 10px;
    }

    .bops-filter-form .choices__inner {
        min-height: 40px;
        padding: 8px 34px 8px 10px;
        font-size: 16px;
        line-height: 1.2;
    }

    .bops-app .bops-filter-form .bops-filter-icon-button {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        flex-basis: 40px;
    }

    .bops-grid {
        grid-template-columns: 1fr;
    }

    .bops-product-fields {
        grid-template-columns: 1fr;
    }

    .bops-product-fields label:last-child {
        grid-column: auto;
    }

    .bops-sheet-items-grid {
        gap: 0;
    }

    .bops-sheet-item-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) auto;
        gap: 6px 8px;
        border-bottom: 1px solid var(--bops-border);
        padding: 10px 0 12px;
    }

    .bops-order-item-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .bops-sheet-item-title {
        grid-column: 1 / 4;
        gap: 5px;
        font-size: 0.95rem;
    }

    .bops-order-item-row .bops-sheet-item-title,
    .bops-order-item-row label {
        grid-column: 1 / -1;
    }

    .bops-sheet-item-remove {
        font-size: 0.9rem;
    }

    .bops-sheet-item-row label {
        gap: 2px;
    }

    .bops-sheet-item-row label span {
        display: block;
        color: var(--bops-muted);
        font-size: 0.75rem;
        font-weight: 700;
    }

    .bops-sheet-item-row input {
        min-height: 32px;
        border: 1px solid var(--bops-border) !important;
        box-shadow: none !important;
        outline: 0;
        border-radius: 4px;
        padding: 5px 7px;
        background: color-mix(in srgb, currentColor 5%, transparent);
        font-size: 0.95rem;
    }

    .bops-sheet-item-row input[readonly] {
        background: color-mix(in srgb, currentColor 5%, transparent);
    }

    .bops-custom-items {
        margin-top: 12px;
    }

    .bops-custom-item-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) auto;
        gap: 5px 8px;
        padding: 8px 0 10px;
    }

    .bops-custom-item-row label:first-of-type {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .bops-compact-header {
        align-items: center;
        gap: 8px;
    }

    .bops-compact-header .bops-button-inline {
        min-width: 0;
        width: auto;
        min-height: 36px;
        padding: 8px 10px;
    }

    .bops-list-item {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .bops-list-actions {
        grid-row: auto;
        grid-column: auto;
        justify-content: flex-start;
    }

    .bops-list-actions a {
        align-self: auto;
    }

    .bops-task-list-details {
        grid-column: auto;
    }

    .bops-list-item[data-bops-order-list-item] > .bops-list-actions {
        grid-row: auto;
        grid-column: auto;
    }

    .bops-list-item[data-bops-product-list-item] {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .bops-list-item[data-bops-product-list-item] > strong,
    .bops-list-item[data-bops-product-list-item] > span,
    .bops-product-links {
        grid-column: 1;
    }

    .bops-product-toggle {
        grid-row: 1 / span 3;
        grid-column: 2;
    }

    .bops-request-form-grid,
    .bops-request-vacation-fields,
    .bops-request-item {
        grid-template-columns: 1fr;
    }

    .bops-request-actions {
        margin-left: 0;
    }

    .bops-request-status-form select,
    .bops-request-status-form input,
    .bops-request-status-form .choices,
    .bops-request-status-form .bops-button {
        width: 100%;
    }
}