/* =========================================================
   TRUE Catering System — app.css
   Очищена версія: прибрано зайві дублікати правил,
   додано блоки документів замовлення та кнопку формування файлу персоналу.
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    background: #062f1f;
}

body.app-body {
    margin: 0;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    background: #062f1f;
    color: #1f2933;
    overscroll-behavior-y: none;
}

a {
    color: inherit;
}

.topbar {
    width: 100%;
    background: #062f1f;
    padding: 14px 28px;
    color: #ffffff;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}

.brand,
.brand-home-link {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 18px;
    text-decoration: none;
    cursor: pointer;
}

.brand-logo {
    display: block;
    height: 42px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

.user-greeting {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.96);
    color: #0b3524;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    padding: 11px 18px;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.user-greeting::before {
    content: "рџ‘‹";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #e5f4e9;
    border-radius: 50%;
    font-size: 14px;
}

.nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav-link {
    color: #e8f5ec;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    background: #ffffff;
    color: #1f4d36;
}

.nav-notification-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.notification-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #c0392b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.logout-form {
    margin: 0;
}

.logout-btn {
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.logout-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.page {
    padding: 28px;
    background: #123f2a;
}

.calendar-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 28px;
    min-height: calc(100vh - 100px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.calendar-header h1 {
    margin: 0;
    font-size: 32px;
    color: #1f2933;
}

.calendar-header p {
    margin: 8px 0 0;
    color: #607065;
    font-size: 16px;
    line-height: 1.5;
}

.order-header-address {
    margin: 6px 0 0;
    color: #607065;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}

.add-order-btn,
.secondary-btn,
.danger-btn,
.small-action-btn,
.customer-link,
.document-link,
.secondary-small-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}

.add-order-btn {
    background: #2f7d4e;
    color: #ffffff;
    padding: 12px 18px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
}

.add-order-btn:hover {
    background: #25663f;
}

.secondary-btn {
    background: #e4f3e8;
    color: #1f4d36;
    padding: 12px 18px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
}

.secondary-btn:hover {
    background: #d7ecdd;
}

.danger-btn {
    background: #fbe9e7;
    color: #a33a2b;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
}

.danger-btn:hover {
    background: #f7d6d1;
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.calendar-month-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.calendar-month-select,
.calendar-year-input {
    min-height: 42px;
    border: 1px solid #d7e2da;
    border-radius: 14px;
    background: #ffffff;
    color: #1f2933;
    font-size: 14px;
    font-weight: 700;
    padding: 0 12px;
    outline: none;
}

.calendar-month-select {
    min-width: 150px;
}

.calendar-year-input {
    width: 110px;
}

.calendar-table {
    width: 100%;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid #d7e2da;
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
}

.calendar-weekdays div {
    background: #f4faf6;
    padding: 12px;
    text-align: center;
    font-weight: 800;
    color: #607065;
    border-right: 1px solid #d7e2da;
}

.calendar-weekdays div:last-child {
    border-right: none;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid #d7e2da;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
}

.calendar-day:nth-child(7n) {
    border-right: none;
}

.calendar-day-empty {
    background: #f7faf8;
}

.calendar-day-number {
    font-weight: 800;
    margin-bottom: 10px;
    color: #1f2933;
}

.calendar-order-item:hover {
    background: #dcecdf;
}

.calendar-empty-day {
    display: block;
}

.calendar-day-name {
    background: #edf6ef;
    padding: 12px;
    text-align: center;
    font-weight: 700;
    border-right: 1px solid #d7e2da;
    border-bottom: 1px solid #d7e2da;
    color: #1f2933;
}

.day-number {
    font-weight: 700;
    margin-bottom: 10px;
    color: #1f4d36;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.3;
    background: #eef7f0;
    border: 1px solid #cfe3d4;
    padding: 7px 8px;
    border-radius: 10px;
    margin-top: 6px;
}

.event-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: #2f7d4e;
    display: inline-block;
}

.month-statistics-card {
    margin-top: 28px;
    background: #f7faf8;
    border: 1px solid #d7e2da;
    border-radius: 18px;
    padding: 20px;
}

.month-statistics-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.month-statistics-header h2 {
    margin: 0;
    color: #1f2933;
    font-size: 24px;
}

.month-statistics-header p {
    margin: 6px 0 0;
    color: #607065;
    font-size: 14px;
    font-weight: 700;
}

.month-stat-item {
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 16px;
    padding: 16px;
}

.month-stat-wide {
    grid-column: span 2;
}

.customers-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.customer-card {
    background: #f7faf8;
    border: 1px solid #d7e2da;
    border-radius: 18px;
    padding: 20px;
}

.customer-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.customer-card h2 {
    margin: 0;
    font-size: 24px;
    color: #1f2933;
}

.customer-status {
    background: #e4f3e8;
    color: #1f4d36;
    border: 1px solid #c9e3d0;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
}

.customer-info {
    margin: 8px 0;
    color: #344238;
    font-size: 15px;
    line-height: 1.45;
}

.customer-actions {
    margin-top: 18px;
}

.customer-link {
    background: #2f7d4e;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
}

.customer-link:hover {
    background: #25663f;
}

.customers-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 24px;
    max-width: 820px;
}

.customers-search-input {
    flex: 1;
    border: 1px solid #cfdcd3;
    background: #ffffff;
    color: #1f2933;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 15px;
    outline: none;
}

.customers-search-input:focus {
    border-color: #2f7d4e;
    box-shadow: 0 0 0 3px rgba(47, 125, 78, 0.12);
}

.customers-search-btn,
.customers-reset-btn {
    border: none;
    background: #2f7d4e;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.customers-reset-btn {
    background: #e4f3e8;
    color: #1f4d36;
}

.customers-search-btn:hover {
    background: #25663f;
}

.customers-reset-btn:hover {
    background: #d7ecdd;
}

.empty-state,
.empty-inner {
    background: #f7faf8;
    border: 1px dashed #cfdcd3;
    border-radius: 18px;
    padding: 22px;
    color: #607065;
    font-size: 15px;
    font-weight: 700;
}

.empty-state h2 {
    margin: 0 0 8px;
    color: #1f2933;
}

.empty-state p {
    margin: 0 0 14px;
}

.location-card {
    overflow: hidden;
}

.location-photo {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 14px;
    border: 1px solid #d7e2da;
}

.location-address-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.location-address-mini {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #f7fbf7;
    border: 1px solid #d7e2da;
    border-radius: 12px;
    padding: 9px 10px;
}

.location-address-mini p {
    margin: 0;
    color: #2f3b33;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.location-address-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: #2f7d4e;
    margin-top: 6px;
}

.location-contacts-preview {
    margin-top: 14px;
    border-top: 1px solid #e1ebe4;
    padding-top: 12px;
}

.location-contacts-preview.inside-list {
    margin-top: 10px;
    padding-top: 10px;
}

.location-contacts-preview h4 {
    margin: 0 0 10px;
    color: #1f2933;
    font-size: 14px;
    font-weight: 900;
}

.location-contact-mini {
    background: #f7fbf7;
    border: 1px solid #e1ebe4;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.location-contact-mini strong {
    display: block;
    color: #1f2933;
    font-size: 14px;
    font-weight: 900;
}

.location-contact-mini span {
    display: block;
    color: #607065;
    font-size: 12px;
    font-weight: 800;
    margin-top: 2px;
}

.location-contact-mini p {
    margin: 6px 0 0;
    color: #2f3b33;
    font-size: 13px;
    line-height: 1.4;
}

.muted-small-text {
    margin: 0;
    color: #607065;
    font-size: 13px;
    font-weight: 700;
}

.customer-detail-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 26px;
}

.customer-main-info,
.customer-section {
    background: #f7faf8;
    border: 1px solid #d7e2da;
    border-radius: 18px;
    padding: 20px;
}

.customer-main-info h2 {
    margin: 0 0 16px;
    font-size: 28px;
    color: #1f2933;
}

.customer-main-info p {
    margin: 10px 0;
    color: #344238;
    font-size: 16px;
    line-height: 1.5;
}

.customer-section h3 {
    margin: 0;
    font-size: 22px;
    color: #1f2933;
}

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

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

.simple-list-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 14px;
    padding: 14px;
}

.simple-list-item strong {
    color: #1f2933;
    font-size: 16px;
}

.simple-list-item span {
    color: #607065;
    font-size: 14px;
}

.location-list-item,
.order-list-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.location-info,
.order-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: inherit;
    text-decoration: none;
}

.order-row-main:hover strong {
    color: #2f7d4e;
}

.remove-location-form,
.order-delete-form,
.header-delete-form {
    margin: 0;
}

.remove-location-btn {
    border: none;
    background: #fbe9e7;
    color: #a33a2b;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.remove-location-btn:hover {
    background: #f7d6d1;
}

.crm-form {
    max-width: 620px;
    margin: 26px auto 0;
    background: #f7faf8;
    border: 1px solid #d7e2da;
    border-radius: 18px;
    padding: 24px;
}

.calendar-card:has(.crm-form) .calendar-header {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.form-group label {
    font-size: 15px;
    font-weight: 700;
    color: #1f2933;
}

.form-control,
.crm-form input[type="text"],
.crm-form input[type="email"],
.crm-form input[type="number"],
.crm-form input[type="date"],
.crm-form input[type="time"],
.crm-form input[type="file"],
.crm-form select,
.crm-form textarea,
.modal-form select {
    width: 100%;
    border: 1px solid #cfdcd3;
    background: #ffffff;
    color: #1f2933;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px;
    outline: none;
}

.form-control:focus,
.crm-form input:focus,
.crm-form select:focus,
.crm-form textarea:focus,
.modal-form select:focus {
    border-color: #2f7d4e;
    box-shadow: 0 0 0 3px rgba(47, 125, 78, 0.12);
}

textarea.form-control,
.crm-form textarea {
    resize: vertical;
    min-height: 110px;
}

.form-section-title {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #d7e2da;
    color: #1f2933;
    font-size: 18px;
    font-weight: 900;
}

.form-hint {
    margin: 6px 0 18px;
    color: #607065;
    font-size: 14px;
    line-height: 1.5;
}

.errorlist {
    margin: 6px 0 0;
    padding-left: 18px;
    color: #b42318;
    font-size: 14px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.form-checkbox {
    width: 18px;
    height: 18px;
}

.location-edit-form .form-group {
    margin-bottom: 16px;
}

.location-edit-form .form-section-title {
    margin-top: 26px;
    margin-bottom: 8px;
}

.location-edit-form .form-hint {
    margin-bottom: 18px;
}

.inline-address-formset,
.inline-contact-formset {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.inline-address-card,
.inline-contact-card {
    padding: 20px;
    border: 1px solid #d9e5dc;
    border-radius: 20px;
    background: #f8fbf8;
}

.inline-contact-card-header.only-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.dynamic-form-card {
    position: relative;
}

.inline-remove-btn {
    border: none;
    background: #fbe9e7;
    color: #a33a2b;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.inline-remove-btn:hover {
    background: #f5d0ca;
}

.hidden-delete-field {
    display: none;
}

.inline-add-btn {
    width: fit-content;
    margin-top: 10px;
    margin-bottom: 22px;
}

.compact-address-card {
    padding: 14px 16px;
    border-radius: 14px;
}

.compact-address-form-group {
    margin-bottom: 0;
}

.compact-address-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.compact-address-row label {
    margin: 0;
}

.compact-address-row .inline-remove-btn {
    flex-shrink: 0;
    margin: 0;
}

#address-form-list {
    gap: 10px;
}

#address-form-list .form-group {
    margin-bottom: 0;
}

#address-form-list textarea.form-control,
#address-form-list textarea {
    min-height: 52px;
    height: 52px;
    padding: 9px 11px;
    resize: vertical;
}

#address-form-list .inline-remove-btn {
    padding: 5px 11px;
    font-size: 12px;
}

#add-address-form.inline-add-btn {
    margin-top: 8px;
    margin-bottom: 18px;
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
}

.current-location-photo-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 18px;
}

.current-location-photo {
    width: 110px;
    height: 82px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #d7e2da;
}

.current-location-photo-box div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.current-location-photo-box strong {
    color: #1f2933;
    font-size: 16px;
}

.current-location-photo-box span {
    color: #607065;
    font-size: 14px;
}

#id_location_address:disabled {
    background: #eef3ef;
    color: #7d8a82;
    cursor: not-allowed;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(20, 53, 36, 0.62);
    padding: 24px;
    z-index: 1000;
}

.modal-backdrop.is-visible {
    display: flex;
}

.modal-window {
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.modal-header h2 {
    margin: 0;
    font-size: 26px;
    color: #1f2933;
}

.modal-header p {
    margin: 8px 0 0;
    color: #607065;
    font-size: 15px;
    line-height: 1.45;
}

.modal-close-btn {
    border: none;
    background: #e4f3e8;
    color: #1f4d36;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.modal-close-btn:hover {
    background: #d7ecdd;
}

.modal-form {
    margin: 0;
}

.documents-folder {
    display: grid;
    gap: 10px;
}

.document-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 14px;
    padding: 14px;
}

.document-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.document-slot-card {
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 16px;
    padding: 16px;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.document-slot-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.document-slot-header h4 {
    margin: 0;
    font-size: 18px;
    color: #1f2933;
}

.document-empty-text {
    color: #607065;
    font-size: 14px;
    margin: 0 0 14px;
}

.document-slot-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.document-link {
    background: #2f7d4e;
    color: #ffffff;
    padding: 9px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    width: fit-content;
}

.document-link:hover {
    background: #25663f;
}

.secondary-small-btn {
    background: #e4f3e8;
    color: #1f4d36;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    width: fit-content;
}

.secondary-small-btn:hover {
    background: #d7ecdd;
}

.status-inline-form {
    margin: 0;
}

.status-control-work,
.status-work {
    background: #fff4d6;
    color: #8a5a00;
}

.status-control-paid,
.status-paid {
    background: #e4f3e8;
    color: #1f4d36;
}

.status-control-unpaid,
.status-unpaid {
    background: #fbe9e7;
    color: #a33a2b;
}

.document-status-select:hover {
    opacity: 0.86;
}

.document-status-select:disabled {
    opacity: 0.65;
    cursor: wait;
}

.file-preview-row,
.current-file-box,
.current-document-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 18px;
}

.file-preview-row {
    background: transparent;
    border: none;
    padding: 0;
    margin: 16px 0 18px;
}

.current-file-box div,
.current-document-box div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.document-file-name {
    color: #344238;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
    margin: 0;
}

.file-icon {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    height: 54px;
    border-radius: 9px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.4px;
    padding-bottom: 8px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.file-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
}

.file-icon-fold {
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 15px;
    background: rgba(255, 255, 255, 0.65);
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}

.file-icon-label {
    position: relative;
    z-index: 2;
}

.file-icon-excel {
    background: linear-gradient(145deg, #1f7a43, #145c31);
}

.file-icon-word {
    background: linear-gradient(145deg, #2f6fbd, #244f91);
}

.file-icon-pdf {
    background: linear-gradient(145deg, #c13b2a, #8f2018);
}

.file-icon-image {
    background: linear-gradient(145deg, #b1781f, #7d5314);
}

.file-icon-default {
    background: linear-gradient(145deg, #6d7b70, #4d5a51);
}

.document-editor-card {
    min-height: calc(100vh - 180px);
}

.onlyoffice-editor-wrapper {
    width: 100%;
    height: 760px;
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 18px;
    overflow: hidden;
}

#onlyoffice-editor {
    width: 100%;
    height: 100%;
}

.document-preview-card {
    min-height: calc(100vh - 180px);
    overflow: hidden;
}

.document-preview-card .calendar-header {
    margin-bottom: 22px;
}

.image-preview-toolbar,
.document-image-thumbnail {
    display: none !important;
}

.image-preview-shell {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.image-preview-stage {
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    background: transparent;
}

.image-preview {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border: 1px solid #d9e5dc;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    background: #ffffff;
}

.pdf-preview-wrapper {
    width: 100%;
    height: 760px;
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 18px;
    overflow: hidden;
}

.pdf-preview-frame {
    width: 100%;
    height: 100%;
    border: none;
}

.excel-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.excel-viewer-header h2 {
    margin: 0;
    font-size: 24px;
    color: #1f2933;
}

.excel-viewer-header p {
    margin: 6px 0 0;
    color: #607065;
    font-size: 15px;
}

.excel-table-wrapper {
    width: 100%;
    overflow: auto;
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 14px;
}

.excel-preview-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 14px;
}

.excel-preview-table td {
    border: 1px solid #d7e2da;
    padding: 8px 10px;
    min-width: 110px;
    max-width: 260px;
    color: #1f2933;
    vertical-align: top;
    white-space: pre-wrap;
}

.excel-preview-table tr:first-child td {
    background: #edf6ef;
    font-weight: 800;
}

.excel-preview-table tr:nth-child(even) td {
    background: #fbfdfb;
}

.staff-requirements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.staff-role-card {
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 18px;
    padding: 18px;
}

.staff-role-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.staff-role-header h4 {
    margin: 0 0 4px;
    color: #1f2933;
    font-size: 18px;
    font-weight: 900;
}

.staff-role-header p {
    margin: 0;
    color: #607065;
    font-size: 14px;
    font-weight: 700;
}

.staff-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.staff-status-full {
    background: #e4f3e8;
    color: #1f6b3c;
}

.staff-status-needed {
    background: #fff1cf;
    color: #8a5a00;
}

.staff-progress {
    width: 100%;
    height: 9px;
    background: #edf4ef;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 14px;
}

.staff-progress-fill {
    height: 100%;
    background: #2f7d4e;
    border-radius: 999px;
}

.staff-signup-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.staff-signup-person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #f7fbf7;
    border: 1px solid #e1ebe4;
    border-radius: 12px;
    padding: 10px 12px;
}

.staff-signup-person.is-confirmed {
    background: #eef8f1;
    border-color: #b9dfc4;
}

.staff-person-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.staff-person-name {
    color: #1f2933;
    font-size: 14px;
    font-weight: 900;
}

.staff-person-date {
    color: #607065;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.staff-empty-text {
    color: #607065;
    font-size: 14px;
    font-weight: 700;
    background: #f7fbf7;
    border: 1px dashed #cfdcd3;
    border-radius: 12px;
    padding: 12px;
}

.staff-person-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.staff-action-form {
    margin: 0;
}

.staff-confirm-btn::before,
.staff-confirm-btn.is-confirmed::before {
    content: "вњ“";
    font-size: 18px;
    font-weight: 1000;
    line-height: 1;
}

.staff-delete-btn::before {
    content: "Г—";
    font-size: 22px;
    font-weight: 1000;
    line-height: 1;
}

.staff-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 1000;
    line-height: 1;
}

.staff-confirm-icon.confirmed {
    background: #2f7d4e;
    color: #ffffff;
}

.staff-confirm-icon.not-confirmed {
    background: #fbe9e7;
    color: #a33a2b;
}

.staff-person-status-text {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 900;
}

.staff-person-status-text.confirmed {
    background: #dff2e5;
    color: #1f6b3c;
}

.staff-person-status-text.not-confirmed {
    background: #fff1cf;
    color: #8a5a00;
}

.manual-staff-add-card {
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 18px;
}

.manual-staff-add-card h4 {
    margin: 0 0 4px;
    color: #1f2933;
    font-size: 16px;
    font-weight: 900;
}

.manual-staff-add-card p {
    margin: 0 0 14px;
    color: #607065;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.manual-staff-grid .form-group {
    margin: 0;
}

.manual-staff-checkbox-label {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f7fbf7;
    border: 1px solid #d7e2da;
    border-radius: 999px;
    padding: 0 13px;
    color: #2f3b33;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.manual-staff-checkbox-label input {
    width: 16px;
    height: 16px;
    accent-color: #2f7d4e;
}

.staff-order-page-card {
    max-width: 1180px;
    margin: 0 auto;
}

.staff-order-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.staff-signup-section {
    border-color: #cfe1d4;
    background: #f7fbf7;
}

.staff-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.staff-choice-card {
    display: block;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 18px;
    padding: 18px;
    transition: 0.18s ease;
}

.staff-choice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
}

.staff-choice-card.is-selected {
    border-color: #7dbc8a;
    background: #f0f9f2;
}

.staff-choice-card.is-confirmed {
    border-color: #2f7d4e;
    background: #e9f6ed;
}

.staff-choice-card.is-disabled {
    cursor: not-allowed;
    opacity: 0.68;
}

.staff-choice-card.is-disabled:hover {
    transform: none;
    box-shadow: none;
}

.staff-choice-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.staff-choice-top h4 {
    margin: 0 0 5px;
    color: #1f2933;
    font-size: 18px;
    font-weight: 900;
}

.staff-choice-top p {
    margin: 0;
    color: #607065;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.staff-choice-top input {
    width: 22px;
    height: 22px;
    accent-color: #2f7d4e;
    flex: 0 0 auto;
}

.staff-choice-status {
    margin-top: 14px;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 900;
}

.staff-no-role-option,
.staff-no-choice {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin-top: 16px;
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 999px;
    padding: 12px 16px;
    color: #2f3b33;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.staff-no-role-option input,
.staff-no-choice input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #2f7d4e;
}

.staff-form-actions,
.staff-save-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.staff-confirmed-notice {
    margin-bottom: 16px;
    background: #e9f6ed;
    border: 1px solid #b9dfc4;
    border-radius: 16px;
    padding: 14px 16px;
    color: #1f6b3c;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
}

.location-contact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.location-contact-list.compact {
    grid-template-columns: 1fr;
    gap: 10px;
}

.location-contact-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 16px;
    padding: 16px;
}

.location-contact-card.compact {
    display: block;
    padding: 12px;
}

.location-contact-card strong {
    display: block;
    color: #1f2933;
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 3px;
}

.location-contact-card span {
    display: block;
    color: #607065;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 8px;
}

.location-contact-card p {
    margin: 5px 0;
    color: #2f3b33;
    font-size: 14px;
    line-height: 1.45;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.notification-card {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 22px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(42, 75, 52, 0.12);
    box-shadow: 0 14px 34px rgba(34, 55, 42, 0.08);
}

.notification-card.is-unread {
    border-color: rgba(192, 57, 43, 0.35);
    background: linear-gradient(135deg, #ffffff 0%, #fff8f6 100%);
}

.notification-card.is-read {
    opacity: 0.72;
}

.notification-main {
    flex: 1;
    min-width: 0;
}

.notification-topline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.notification-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.notification-status-dot.unread {
    background: #c0392b;
    box-shadow: 0 0 0 5px rgba(192, 57, 43, 0.12);
}

.notification-status-dot.read {
    background: #8a9a8f;
}

.notification-date {
    color: #6f7d73;
    font-size: 13px;
    font-weight: 600;
}

.notification-card h2 {
    margin: 0 0 8px;
    color: #233829;
    font-size: 22px;
    line-height: 1.25;
}

.notification-message {
    margin: 0 0 16px;
    color: #3f5547;
    font-size: 16px;
    line-height: 1.5;
}

.notification-order-info {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(238, 244, 235, 0.72);
}

.notification-order-info p {
    margin: 0;
    color: #3f5547;
    font-size: 14px;
    line-height: 1.45;
}

.notification-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
    min-width: 190px;
}

.notification-actions form {
    margin: 0;
}

.notification-read-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(89, 111, 94, 0.12);
    color: #596f5e;
    font-size: 14px;
    font-weight: 700;
}

.login-page-body {
    min-height: 100vh;
    background: #062f1f;
}

.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 32px;
}

.login-logo-outside {
    display: flex;
    justify-content: center;
}

.login-logo-large {
    width: 260px;
    max-width: 80vw;
    background: #ffffff;
    border-radius: 24px;
    padding: 18px 28px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.22);
}

.login-card {
    width: min(460px, 100%);
    background: #f7fbf7;
    border: 1px solid #d7e2da;
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}

.login-card h1 {
    margin: 0 0 8px;
    color: #1f2933;
    font-size: 30px;
    text-align: center;
}

.login-card p {
    margin: 0 0 24px;
    color: #607065;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    border: 1px solid #cfdcd3;
    background: #ffffff;
    color: #1f2933;
    border-radius: 14px;
    padding: 13px 14px;
    font-size: 15px;
    outline: none;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
    border-color: #2f7d4e;
    box-shadow: 0 0 0 3px rgba(47, 125, 78, 0.12);
}

.login-submit-btn {
    width: 100%;
    margin-top: 12px;
    justify-content: center;
}

.form-error-box {
    background: #fbe9e7;
    color: #9a3325;
    border: 1px solid #f0c9c2;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 700;
}

.month-statistics-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.month-stat-item,
.month-stat-item.month-stat-wide {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 96px !important;
    height: auto !important;
    padding: 16px 18px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

.month-stat-item span {
    display: block !important;
    color: #607065;
    font-size: 12px !important;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 8px;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.month-stat-item strong {
    color: #2f7d4e;
    font-size: 24px !important;
    font-weight: 900;
    display: block !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

@media (max-width: 520px) {
    .month-statistics-grid {
        grid-template-columns: 1fr !important;
    }
}

.inline-text-link {
    color: #2f7d4e;
    font-weight: 900;
    text-decoration: none;
}

.inline-text-link:hover {
    text-decoration: underline;
}

.compact-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.customer-link.secondary {
    background: #e4f3e8;
    color: #1f4d36;
}

.customer-link.secondary:hover {
    background: #d7ecdd;
}

.live-search-form-group {
    position: relative;
}

.live-search-wrapper {
    position: relative;
    width: 100%;
}

.live-search-input {
    width: 100%;
}

.live-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #cfdcd3;
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(24, 55, 36, 0.18);
    z-index: 80;
    padding: 8px;
}

.live-search-results.is-visible {
    display: block;
}

.live-search-result-item {
    width: 100%;
    border: none;
    background: #ffffff;
    color: #1f2933;
    border-radius: 12px;
    padding: 11px 12px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: inherit;
}

.live-search-result-item:hover {
    background: #f1f8f3;
}

.live-search-result-item strong {
    display: block;
    color: #1f2933;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.3;
}

.live-search-result-item span {
    display: block;
    color: #607065;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.live-search-empty {
    padding: 12px;
    color: #607065;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.hidden-live-select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.hidden-live-select select {
    width: 1px;
    height: 1px;
}

.form-section-title:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.calendar-status-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 12px 14px;
    background: #f7faf8;
    border: 1px solid #d7e2da;
    border-radius: 16px;
}

.calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #344238;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.calendar-legend-dot {
    width: 18px;
    height: 18px;
    border-radius: 7px;
    border: 1px solid transparent;
    flex-shrink: 0;
}

.calendar-status-new.calendar-legend-dot {
    background: #ffffff;
    border-color: #1f2933;
}

.calendar-status-calculated.calendar-legend-dot {
    background: #e6e8eb;
    border-color: #c5ccd3;
}

.calendar-status-sent.calendar-legend-dot {
    background: #fff1a8;
    border-color: #e3c94d;
}

.calendar-status-approved.calendar-legend-dot {
    background: #cdeeff;
    border-color: #8cc9e8;
}

.calendar-status-cancelled.calendar-legend-dot {
    background: #ffd0ca;
    border-color: #d95c4d;
}

.calendar-status-in_progress.calendar-legend-dot {
    background: #dff4e4;
    border-color: #9ed4aa;
}

.calendar-status-completed.calendar-legend-dot {
    background: #2f7d4e;
    border-color: #25663f;
}

.order-detail-title-block {
    min-width: 0;
    flex: 1;
}

.staff-confirm-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.staff-confirmed-notice-card {
    border-color: #b9dfc4;
    background: #eef8f1;
}

.order-crm-form {
    max-width: 760px;
}

.staff-count-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.staff-count-grid .form-group {
    margin-bottom: 0;
}

.staff-count-input {
    text-align: center;
    font-size: 18px !important;
    font-weight: 900;
}

.phone-form-group textarea,
.phone-list-input {
    max-width: 360px;
    min-height: 52px !important;
    font-family: Arial, sans-serif;
    line-height: 1.45;
}

.staff-confirm-btn::before,
.staff-confirm-btn.is-confirmed::before,
.staff-delete-btn::before {
    content: none !important;
}

.staff-confirm-btn,
.staff-delete-btn {
    border: none;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border-radius: 50%;
    font-size: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

.staff-confirm-btn {
    background: #e4f3e8;
    color: #1f6b3c;
}

.staff-confirm-btn.is-confirmed {
    background: #2f7d4e;
    color: #ffffff;
}

.staff-confirm-btn:not(:disabled)::after,
.staff-confirm-btn.is-confirmed::after {
    content: "вњ“";
    font-size: 18px;
    font-weight: 1000;
    line-height: 1;
}

.staff-delete-btn::after {
    content: "Г—";
    font-size: 24px;
    font-weight: 1000;
    line-height: 1;
}

.staff-delete-btn {
    background: #fbe9e7;
    color: #a33a2b;
    font-size: 22px !important;
}

.staff-confirm-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.staff-confirm-btn:not(:disabled):hover {
    background: #2f7d4e;
    color: #ffffff;
}

.staff-delete-btn:hover {
    background: #a33a2b;
    color: #ffffff;
}

.company-card-clean-header {
    justify-content: flex-start !important;
}

.company-card-clean-header h2 {
    width: 100%;
}

.customer-card-header .customer-status {
    flex-shrink: 0;
}

.phone-form-group textarea,
.phone-list-input,
textarea.phone-list-input {
    width: 100%;
    max-width: 380px !important;
    min-height: 54px !important;
    max-height: 150px;
    resize: vertical;
    line-height: 1.45;
    font-family: Arial, sans-serif;
}

.phone-form-group .form-hint {
    max-width: 520px;
    margin-top: 4px;
}

.order-detail-header {
    align-items: flex-start !important;
}

.order-header-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    flex-shrink: 0;
}

.order-status-panel {
    min-width: 280px;
    background: #f7faf8;
    border: 1px solid #d7e2da;
    border-radius: 18px;
    padding: 14px;
    display: grid;
    gap: 12px;
}

.order-status-form {
    display: grid;
    gap: 6px;
    margin: 0;
}

.order-status-form label {
    color: #607065;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.order-header-actions {
    justify-content: flex-end;
    margin-top: 0;
}

.document-status-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: 999px !important;
    padding: 8px 28px 8px 13px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    outline: none;
    min-width: 150px;
    text-align: center;
}

.company-order-status-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.status-badge-new {
    background: #ffffff !important;
    color: #1f2933 !important;
    border: 1px solid #1f2933;
    border-color: #1f2933 !important;
}

.status-badge-calculated {
    background: #e6e8eb !important;
    color: #344238 !important;
    border-color: #c5ccd3 !important;
}

.status-badge-sent {
    background: #fff1a8 !important;
    color: #7a5a00 !important;
    border-color: #e3c94d !important;
}

.status-badge-approved {
    background: #cdeeff !important;
    color: #18506b !important;
    border-color: #8cc9e8 !important;
}

.status-badge-cancelled {
    background: #ffd0ca !important;
    color: #9d2f24 !important;
    border-color: #d95c4d !important;
}

.status-badge-in_progress {
    background: #dff4e4 !important;
    color: #1f6b3c !important;
    border-color: #9ed4aa !important;
}

.status-badge-completed {
    background: #2f7d4e !important;
    color: #ffffff !important;
    border-color: #25663f !important;
}

.invoice-badge-none {
    background: #f0f3f1 !important;
    color: #607065 !important;
    border-color: #d7e2da !important;
}

.invoice-badge-needed {
    background: #fff1cf !important;
    color: #8a5a00 !important;
    border-color: #e7c86a !important;
}

.invoice-badge-prepayment_only {
    background: #e8eef7 !important;
    color: #244f91 !important;
    border-color: #b8cbe8 !important;
}

.invoice-badge-paid {
    background: #2f7d4e !important;
    color: #ffffff !important;
    border-color: #25663f !important;
}

.calendar-order-item.calendar-status-new {
    background: #ffffff !important;
    border: 1px solid #1f2933 !important;
}

.calendar-order-item.calendar-status-calculated {
    background: #e6e8eb !important;
    border: 1px solid #c5ccd3 !important;
}

.calendar-order-item.calendar-status-sent {
    background: #fff1a8 !important;
    border: 1px solid #e3c94d !important;
}

.calendar-order-item.calendar-status-approved {
    background: #cdeeff !important;
    border: 1px solid #8cc9e8 !important;
}

.calendar-order-item.calendar-status-cancelled {
    background: #ffd0ca !important;
    border: 1px solid #d95c4d !important;
}

.calendar-order-item.calendar-status-in_progress {
    background: #dff4e4 !important;
    border: 1px solid #9ed4aa !important;
}

.calendar-order-item.calendar-status-completed {
    background: #2f7d4e !important;
    border: 1px solid #25663f !important;
}

.calendar-order-item.calendar-status-completed .calendar-order-title,
.calendar-order-item.calendar-status-completed .calendar-order-guests,
.calendar-order-item.calendar-status-completed .calendar-order-status {
    color: #ffffff !important;
}

.calendar-order-item.calendar-status-completed .calendar-order-status {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff;
}

.manual-staff-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.manual-staff-grid {
    display: grid;
    grid-template-columns: minmax(150px, 180px) minmax(260px, 1fr) 90px 90px auto !important;
    align-items: end;
    gap: 12px;
    flex: 1;
}

.manual-staff-search-group {
    min-width: 260px;
}

.staff-time-input {
    text-align: center;
    font-weight: 900;
}

.staff-confirmed-notice,
.staff-confirmed-notice-card {
    background: #eef8f1 !important;
    border: 1px solid #b9dfc4 !important;
    color: #1f6b3c !important;
}

@media (max-width: 1000px) {
    .topbar {
        padding: 12px 18px !important;
    }

    .topbar-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        flex-wrap: nowrap !important;
    }

    .topbar-left {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .brand {
        padding: 7px 12px !important;
        border-radius: 14px !important;
        flex-shrink: 0 !important;
    }

    .brand-logo {
        height: 34px !important;
        max-width: 150px !important;
    }

    .user-greeting {
        max-width: 155px !important;
        padding: 9px 12px !important;
        font-size: 13px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
    }

    .user-greeting::before {
        width: 20px !important;
        height: 20px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }

    .nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        width: auto !important;
        padding-bottom: 0 !important;
    }

    .nav-link,
    .logout-btn {
        flex: 0 0 auto !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    .notification-badge {
        min-width: 17px !important;
        height: 17px !important;
        padding: 0 5px !important;
        font-size: 10px !important;
        line-height: 17px !important;
    }

    .page {
        padding: 22px !important;
    }

    .calendar-card {
        padding: 26px !important;
        border-radius: 24px !important;
    }

    .calendar-header {
        flex-direction: row !important;
        align-items: center !important;
    }

    .calendar-header h1 {
        font-size: 32px !important;
    }

    .calendar-toolbar {
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    .calendar-month-form {
        width: auto !important;
        order: initial !important;
    }

    .calendar-weekdays,
    .calendar-grid {
        min-width: 0 !important;
    }

    .month-statistics-header {
        flex-direction: row !important;
        align-items: center !important;
    }

    .month-statistics-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .live-search-results {
        max-height: 240px;
    }

    .staff-count-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .order-detail-header {
        flex-direction: column !important;
    }

    .order-header-side {
        width: 100%;
        align-items: stretch;
    }

    .order-status-panel {
        width: 100%;
        min-width: 0;
    }

    .order-header-actions {
        justify-content: flex-start;
    }

    .manual-staff-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .phone-form-group textarea,
    .phone-list-input,
    textarea.phone-list-input {
        max-width: 100% !important;
    }
}

.calendar-order-item-staff {
    background: #ffffff !important;
    border: 1px solid #d7e2da !important;
    box-shadow: none !important;
}

.calendar-order-item-staff:hover {
    background: #f7faf8 !important;
    border-color: #b9cfbf !important;
}

.calendar-order-item-staff .calendar-order-title,
.calendar-order-item-staff .calendar-order-guests {
    color: #1f2933 !important;
}

.calendar-order-item-staff .calendar-order-status,
.calendar-order-item-staff .calendar-order-invoice-status {
    display: none !important;
}

.status-update-meta {
    display: grid;
    gap: 4px;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #dfe8e2;
    color: #607065;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.status-update-meta span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.status-update-meta strong {
    color: #1f2933;
    font-weight: 900;
    text-align: right;
}

.manual-staff-grid-without-time {
    grid-template-columns: minmax(150px, 180px) minmax(280px, 1fr) auto !important;
    align-items: flex-end;
}

.manual-staff-grid-without-time .manual-staff-search-group {
    min-width: 280px;
}

.staff-signup-person-with-time {
    display: grid !important;
    grid-template-columns: auto minmax(180px, 1fr) minmax(280px, auto) auto;
    align-items: center;
    gap: 12px;
}

.staff-time-inline-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    padding: 8px 10px;
    border-radius: 14px;
    background: #f7faf8;
    border: 1px solid #d7e2da;
}

.staff-time-inline-form label {
    display: grid;
    gap: 4px;
    color: #607065;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.staff-time-inline-form .staff-time-input {
    width: 74px;
    min-height: 34px;
    padding: 7px 8px;
    border-radius: 10px;
    font-size: 13px !important;
    font-weight: 900;
    text-align: center;
}

.small-action-btn {
    background: #2f7d4e;
    color: #ffffff;
    border: none;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 900;
    min-height: 34px;
    cursor: pointer;
    white-space: nowrap;
}

.small-action-btn:hover {
    background: #25663f;
}

.staff-order-card .staff-choice-card {
    background: #ffffff;
    border-color: #d7e2da;
}

.staff-order-card .staff-choice-card.is-disabled {
    opacity: 0.72;
    background: #f7faf8;
}

.staff-order-card .staff-choice-card.is-selected {
    border-color: #2f7d4e;
    background: #eef8f1;
}

.staff-order-card .staff-choice-card.is-confirmed {
    border-color: #2f7d4e;
    background: #e4f3e8;
}

.staff-order-card .staff-progress-fill {
    background: #9ec9aa;
}

.staff-choice-status.is-waiting {
    background: #fff7dc;
    color: #7a5a00;
}

.staff-choice-status.is-open {
    background: #eef8f1;
    color: #1f6b3c;
}

.staff-choice-status.is-full {
    background: #f0f3f1;
    color: #607065;
}

.staff-choice-status.is-confirmed {
    background: #2f7d4e;
    color: #ffffff;
}

.staff-person-status-text.admin-added {
    background: #e8eef7;
    color: #244f91;
    display: none !important;
}

@media (max-width: 900px) {
    .manual-staff-grid-without-time {
        grid-template-columns: 1fr !important;
    }

    .staff-signup-person-with-time {
        grid-template-columns: 1fr;
    }

    .staff-confirm-icon-box,
    .staff-person-actions {
        justify-self: flex-start;
    }

    .staff-time-inline-form {
        grid-column: auto;
        width: 100%;
        flex-wrap: wrap;
    }
}

.calendar-order-title,
.calendar-order-guests,
.calendar-order-status {
    max-width: 100%;
}

.order-info-status-block h3 {
    margin: 0 0 12px;
    color: #1f2933;
    font-size: 18px;
    font-weight: 900;
}

.order-info-status-form {
    display: grid;
    gap: 10px;
    max-width: 420px;
}

.order-info-status-form .document-status-select {
    width: 100%;
    max-width: 320px;
    text-align: left;
}

.order-info-status-form .status-update-meta {
    max-width: 420px;
}

.order-detail-simple-header > div:first-child {
    flex: 1;
}

.order-detail-simple-header .order-header-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    flex-shrink: 0;
}

.order-detail-simple-header .order-status-panel {
    width: 300px;
    min-width: 300px;
}

.order-status-panel .document-status-select {
    width: 100%;
    min-width: 0;
    text-align: left;
}

.order-status-panel .status-update-meta {
    width: 100%;
}

.order-detail-simple-header {
    align-items: center !important;
    padding-bottom: 18px;
    gap: 24px;
}

.order-detail-simple-header .order-header-actions {
    justify-content: flex-end;
    margin-top: 0;
}

.order-info-and-status-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.order-status-panel-inside-info {
    width: 100%;
    min-width: 0;
    position: sticky;
    top: 16px;
}

.order-status-panel-inside-info .document-status-select {
    width: 100%;
    min-width: 0;
    text-align: left;
}

.order-status-panel-inside-info .status-update-meta {
    width: 100%;
}

.order-info-status-block {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #d7e2da;
    display: none !important;
}

@media (max-width: 1100px) {
    .month-statistics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .staff-signup-person-with-time {
        grid-template-columns: auto 1fr auto;
    }

    .staff-time-inline-form {
        grid-column: 2 / -1;
        width: fit-content;
    }

    .order-info-and-status-row {
        grid-template-columns: 1fr;
    }

    .order-status-panel-inside-info {
        position: static;
    }
}

.calendar-order-item {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas: "title title"
        "guests status";
    align-items: flex-start;
    justify-items: start;
    column-gap: 8px;
    row-gap: 3px;
    width: fit-content;
    max-width: 100%;
    padding: 7px 8px !important;
    border-radius: 9px;
    background: #e8f2eb;
    color: #1f2d25;
    text-decoration: none;
    line-height: 1.1;
    box-sizing: border-box;
    overflow: hidden;
    position: static !important;
    padding-right: 34px !important;
    gap: 4px;
    flex-direction: column;
    min-height: auto !important;
}

.calendar-order-title {
    grid-area: title;
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: #1f2933;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.calendar-order-meta-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.calendar-order-guests {
    grid-area: guests;
    display: block;
    margin: 0;
    padding: 0;
    color: #344238;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    width: 100%;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-order-status {
    grid-area: status;
    display: none !important;
    align-items: center;
    justify-content: center;
    height: 17px;
    margin: 0;
    padding: 3px 7px !important;
    border-radius: 999px;
    background: #d5eadb;
    color: #267343;
    font-size: 9px !important;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    width: fit-content;
    max-width: calc(100% - 4px);
}

.calendar-order-invoice-status {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    margin-top: 2px;
    padding: 3px 7px !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #344238;
    font-size: 9px !important;
    font-weight: 900;
    line-height: 1.1;
    position: static !important;
    right: 6px;
    bottom: 6px;
    margin: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    justify-content: center;
    flex-shrink: 0;
    min-width: fit-content;
}

.calendar-order-item.calendar-status-completed .calendar-order-title,
.calendar-order-item.calendar-status-completed .calendar-order-guests {
    color: #ffffff !important;
}

.calendar-order-item.calendar-status-completed .calendar-order-invoice-status {
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

.calendar-orders {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.calendar-day {
    min-height: 124px;
    padding: 10px;
    border-right: 1px solid #d7e2da;
    border-bottom: 1px solid #d7e2da;
    background: #ffffff;
    overflow: hidden;
}

.calendar-legend-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    margin: 14px 0 16px;
    padding: 9px 12px;
    border: 1px solid #d7e2da;
    border-radius: 16px;
    background: #f7faf8;
}

.calendar-legend-filter-row .calendar-status-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.calendar-legend-filter-row .calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #344238;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.calendar-legend-filter-row .calendar-legend-dot {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 6px;
}

.calendar-order-filter-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    margin: 0;
}

.calendar-order-filter-field {
    display: flex;
    align-items: center;
    gap: 5px;
}

.calendar-order-filter-field label {
    margin: 0;
    color: #607065;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.calendar-order-filter-select {
    width: auto;
    min-width: 112px;
    max-width: 145px;
    height: 30px;
    margin: 0;
    padding: 4px 26px 4px 9px;
    border: 1px solid #cbd9cf;
    border-radius: 9px;
    background-color: #ffffff;
    color: #253229;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.calendar-order-filter-select:hover {
    border-color: #91b59c;
}

.calendar-order-filter-select:focus {
    outline: none;
    border-color: #2f7d4e;
    box-shadow: 0 0 0 3px rgba(47, 125, 78, 0.11);
}

.calendar-order-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid #efc8c3;
    border-radius: 9px;
    background: #fbe8e5;
    color: #a83a2d;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
}

.calendar-order-filter-reset:hover {
    border-color: #e4aaa2;
    background: #f8d8d3;
    color: #8f2e23;
}

.calendar-filter-active-info {
    display: none !important;
}

@media (max-width: 1280px) {
    .calendar-legend-filter-row {
        gap: 12px;
        padding: 8px 10px;
    }

    .calendar-legend-filter-row .calendar-status-legend {
        gap: 6px 9px;
    }

    .calendar-legend-filter-row .calendar-legend-item {
        font-size: 10px;
    }

    .calendar-legend-filter-row .calendar-legend-dot {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    .calendar-order-filter-field label {
        display: none;
    }

    .calendar-order-filter-select {
        min-width: 105px;
        max-width: 125px;
    }
}

.staff-directory-card {
    overflow: visible;
}

.staff-search-form {
    margin-bottom: 22px;
}

.staff-directory-sections {
    display: grid;
    gap: 24px;
}

.staff-role-directory-section {
    padding: 20px;
    border: 1px solid #d8e4dc;
    border-radius: 20px;
    background: #f8fbf9;
}

.staff-role-directory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.staff-role-directory-header h2 {
    margin: 0 0 4px;
    color: #1f2933;
    font-size: 22px;
    font-weight: 900;
}

.staff-role-directory-header p {
    margin: 0;
    color: #67756b;
    font-size: 13px;
    font-weight: 700;
}

.staff-role-directory-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    background: #2f7d4e;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
}

.staff-directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.staff-directory-person-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #d8e4dc;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(31, 41, 51, 0.05);
}

.staff-directory-photo-link {
    display: block;
    width: 112px;
    height: 132px;
    overflow: hidden;
    border-radius: 16px;
    background: #edf4ef;
    text-decoration: none;
}

.staff-directory-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.staff-directory-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #dcecdf, #f4f8f5);
    color: #2f7d4e;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 1px;
}

.staff-directory-person-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.staff-directory-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.staff-directory-name-row h3 {
    min-width: 0;
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
}

.staff-directory-name-link {
    color: #1f2933;
    text-decoration: none;
}

.staff-directory-name-link:hover {
    color: #2f7d4e;
}

.staff-active-badge,
.staff-inactive-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.staff-active-badge {
    background: #e5f4e9;
    color: #24643d;
    border: 1px solid #bcd9c5;
}

.staff-inactive-badge {
    background: #f3f3f3;
    color: #6b7280;
    border: 1px solid #d5d8dc;
}

.staff-directory-contact {
    margin: 0 0 7px;
    color: #526158;
    font-size: 13px;
    line-height: 1.4;
}

.staff-directory-contact strong {
    color: #1f2933;
}

.staff-directory-role-list,
.staff-profile-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.staff-directory-role-list {
    margin-top: 4px;
}

.staff-profile-role-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 9px;
    border: 1px solid #c9ddcf;
    border-radius: 999px;
    background: #eef7f0;
    color: #2a6841;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
}

.staff-directory-person-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #e3ebe6;
    color: #67756b;
    font-size: 12px;
    font-weight: 700;
}

.staff-directory-person-footer strong {
    color: #2f7d4e;
    font-size: 14px;
}

.staff-role-empty {
    margin: 0;
}

.staff-account-form {
    max-width: 820px;
}

.staff-form-name-grid,
.staff-form-password-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.staff-current-photo-box {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #d8e4dc;
    border-radius: 16px;
    background: #f7faf8;
}

.staff-current-photo {
    width: 88px;
    height: 104px;
    object-fit: cover;
    border-radius: 13px;
}

.staff-current-photo-box div {
    display: grid;
    gap: 5px;
}

.staff-current-photo-box strong {
    color: #1f2933;
    font-size: 14px;
}

.staff-current-photo-box span {
    color: #67756b;
    font-size: 12px;
    line-height: 1.4;
}

.staff-role-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0 8px;
}

.staff-role-checkbox-card {
    position: relative;
    display: block;
    cursor: pointer;
}

.staff-role-checkbox-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.staff-role-checkbox-content {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 12px 14px;
    border: 1px solid #d3dfd7;
    border-radius: 14px;
    background: #ffffff;
    color: #344238;
    transition: border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.staff-role-checkbox-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 1px solid #bdcec2;
    border-radius: 8px;
    background: #f3f7f4;
    color: transparent;
    font-size: 14px;
    font-weight: 900;
}

.staff-role-checkbox-card:hover .staff-role-checkbox-content {
    border-color: #9dbda6;
    background: #f8fbf9;
}

.staff-role-checkbox-card input:checked + .staff-role-checkbox-content {
    border-color: #2f7d4e;
    background: #eaf5ed;
    box-shadow: 0 0 0 3px rgba(47, 125, 78, 0.09);
}

.staff-role-checkbox-card input:checked
+ .staff-role-checkbox-content
.staff-role-checkbox-mark {
    border-color: #2f7d4e;
    background: #2f7d4e;
    color: #ffffff;
}

.staff-role-checkbox-content strong {
    font-size: 13px;
    font-weight: 900;
}

.staff-active-control {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d8e4dc;
    border-radius: 16px;
    background: #f7faf8;
}

.staff-active-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.staff-active-checkbox-label input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: #2f7d4e;
}

.staff-active-checkbox-label span {
    display: grid;
    gap: 3px;
}

.staff-active-checkbox-label strong {
    color: #1f2933;
    font-size: 14px;
}

.staff-active-checkbox-label small {
    color: #67756b;
    font-size: 12px;
    line-height: 1.4;
}

.staff-profile-page {
    overflow: visible;
}

.staff-profile-hero {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 24px;
    padding: 22px;
    border: 1px solid #d8e4dc;
    border-radius: 22px;
    background: linear-gradient(145deg, #f7faf8, #ffffff);
}

.staff-profile-photo-column {
    display: flex;
    justify-content: center;
}

.staff-profile-photo {
    width: 210px;
    height: 260px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(31, 41, 51, 0.12);
}

.staff-profile-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 210px;
    height: 260px;
    border-radius: 20px;
    background: linear-gradient(145deg, #dcecdf, #f4f8f5);
    color: #2f7d4e;
    font-size: 54px;
    font-weight: 900;
    letter-spacing: 2px;
}

.staff-profile-main-column {
    min-width: 0;
}

.staff-profile-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.staff-profile-title-row h2 {
    margin: 0 0 5px;
    color: #1f2933;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
}

.staff-profile-login {
    margin: 0;
    color: #67756b;
    font-size: 13px;
    font-weight: 700;
}

.staff-profile-state {
    padding: 7px 11px;
    font-size: 11px;
}

.staff-profile-main-column .staff-profile-role-list {
    margin: 16px 0 20px;
}

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

.staff-profile-info-item {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #dbe5de;
    border-radius: 14px;
    background: #ffffff;
}

.staff-profile-info-item span {
    color: #718078;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.staff-profile-info-item strong {
    color: #1f2933;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.staff-profile-comment {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #dbe5de;
    border-radius: 14px;
    background: #ffffff;
}

.staff-profile-comment span {
    display: block;
    margin-bottom: 6px;
    color: #718078;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.staff-profile-comment p {
    margin: 0;
    color: #344238;
    font-size: 13px;
    line-height: 1.5;
}

.staff-profile-private-section {
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid #ead7b9;
    border-radius: 18px;
    background: #fffaf2;
}

.staff-profile-private-section .section-header {
    margin-bottom: 12px;
}

.staff-profile-private-section h3 {
    margin: 0;
    color: #4d3a23;
}

.staff-passport-box {
    padding: 14px;
    border: 1px solid #e7d4b7;
    border-radius: 14px;
    background: #ffffff;
    color: #4d3a23;
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.staff-statistics-section,
.staff-history-section,
.staff-self-edit-section {
    margin-top: 24px;
}

.section-subtitle {
    margin: 4px 0 0;
    color: #67756b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.staff-profile-statistics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.staff-profile-total-stat,
.staff-profile-role-stat {
    display: grid;
    gap: 7px;
    min-height: 92px;
    padding: 15px;
    border: 1px solid #d8e4dc;
    border-radius: 16px;
    background: #ffffff;
}

.staff-profile-total-stat {
    background: #eaf5ed;
    border-color: #bdd8c5;
}

.staff-profile-total-stat span,
.staff-profile-role-stat span {
    color: #67756b;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.25;
}

.staff-profile-total-stat strong,
.staff-profile-role-stat strong {
    color: #2f7d4e;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.staff-history-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #d8e4dc;
    border-radius: 16px;
}

.staff-history-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #ffffff;
}

.staff-history-table th,
.staff-history-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #e2e9e4;
    text-align: left;
    vertical-align: middle;
}

.staff-history-table th {
    background: #edf5ef;
    color: #344238;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.staff-history-table td {
    color: #344238;
    font-size: 13px;
    font-weight: 650;
}

.staff-history-table tbody tr:last-child td {
    border-bottom: none;
}

.staff-history-table tbody tr:hover td {
    background: #f8fbf9;
}

.staff-self-profile-form {
    max-width: 760px;
    margin: 0;
}

.staff-account-form .errorlist,
.staff-self-profile-form .errorlist {
    margin: 7px 0 0;
    padding: 0;
    color: #a13e33;
    font-size: 12px;
    font-weight: 800;
    list-style: none;
}

@media (max-width: 1200px) {
    .calendar-order-invoice-status {
        font-size: 8px !important;
        padding: 3px 6px !important;
    }

    .calendar-order-guests {
        font-size: 9px;
    }

    .calendar-order-title {
        font-size: 11px;
    }

    .staff-directory-grid {
        grid-template-columns: 1fr;
    }

    .staff-profile-statistics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .calendar-legend-filter-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .calendar-order-filter-form {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .calendar-order-filter-field label {
        display: block;
    }

    .staff-profile-hero {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .staff-profile-photo,
    .staff-profile-photo-placeholder {
        width: 180px;
        height: 220px;
    }

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

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

.compact-staff-directory {
    display: grid;
    gap: 18px;
}

.compact-staff-role-section {
    padding: 20px;
    border: 1px solid #d7e4db;
    border-radius: 18px;
    background: #f8fbf9;
}

.compact-staff-role-section .staff-role-directory-header {
    margin-bottom: 14px;
}

.compact-staff-role-section .staff-role-directory-header h2 {
    margin: 0 0 4px;
    font-size: 21px;
    line-height: 1.2;
}

.compact-staff-role-section .staff-role-directory-header p {
    margin: 0;
    font-size: 13px;
    color: #65746a;
}

.staff-name-list {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(250px, 1fr)
    );
    gap: 10px;
}

.staff-name-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 50px;
    padding: 12px 15px;
    border: 1px solid #d5e3d9;
    border-radius: 13px;
    background: #ffffff;
    color: #1f2d24;
    text-decoration: none;
    transition: border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.staff-name-list-item:hover {
    border-color: #83b995;
    background: #f1f8f3;
    box-shadow: 0 5px 14px rgba(29, 91, 53, 0.08);
    transform: translateY(-1px);
}

.staff-name-list-text {
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-name-list-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e4f2e8;
    color: #287b48;
    font-size: 17px;
    font-weight: 700;
    transition: background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.staff-name-list-item:hover .staff-name-list-arrow {
    background: #2d854d;
    color: #ffffff;
    transform: translateX(2px);
}

.compact-staff-role-section .staff-role-empty {
    min-height: auto;
    padding: 15px 18px;
    border: 1px dashed #cddbd1;
    border-radius: 12px;
    background: #fbfdfb;
    color: #69766d;
    font-size: 14px;
}

.compact-staff-role-section .staff-role-directory-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 50%;
    background: #2e854f;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.location-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #dce8df;
}

.location-card-title-row h2 {
    margin: 0;
    min-width: 0;
}

.location-card-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.location-card-delete-form {
    margin: 0;
}

.location-card-edit-btn,
.location-card-delete-btn {
    white-space: nowrap;
}

.personnel-section-header {
    align-items: flex-start;
}

.section-header-action-form {
    margin: 0;
    flex-shrink: 0;
}

.generate-staff-file-btn {
    min-height: 44px;
    padding-left: 18px;
    padding-right: 18px;
}

.order-documents-groups {
    display: grid;
    gap: 20px;
}

.order-documents-group {
    border: 1px solid #d7e2da;
    border-radius: 20px;
    padding: 18px;
    background: #ffffff;
}

.executive-documents-group {
    background: #f6fbf7;
}

.admin-documents-group {
    background: #fbfaf6;
}

.order-documents-group-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #dce8df;
}

.order-documents-group-header h4 {
    margin: 0;
    color: #1f2933;
    font-size: 20px;
    font-weight: 900;
}

.order-documents-group-header p {
    margin: 6px 0 0;
    color: #607065;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.order-documents-group .document-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.file-icon-powerpoint {
    background: linear-gradient(145deg, #c85d28, #9a3f18);
}

@media (max-width: 760px) {
    .staff-role-directory-section {
        padding: 14px;
    }

    .staff-directory-person-card {
        grid-template-columns: 82px minmax(0, 1fr);
        padding: 13px;
    }

    .staff-directory-photo-link {
        width: 82px;
        height: 100px;
    }

    .staff-directory-name-row {
        display: grid;
        justify-content: stretch;
    }

    .staff-active-badge,
    .staff-inactive-badge {
        width: fit-content;
    }

    .staff-directory-person-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .staff-form-name-grid,
    .staff-form-password-grid {
        grid-template-columns: 1fr;
    }

    .staff-role-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .staff-profile-hero {
        grid-template-columns: 1fr;
    }

    .staff-profile-photo,
    .staff-profile-photo-placeholder {
        width: min(100%, 260px);
        height: 310px;
    }

    .staff-profile-title-row {
        display: grid;
    }

    .staff-profile-contact-grid {
        grid-template-columns: 1fr;
    }

    .staff-profile-statistics-grid {
        grid-template-columns: 1fr;
    }

    .staff-name-list {
        grid-template-columns: 1fr;
    }

    .compact-staff-role-section {
        padding: 16px;
    }

    .location-card-title-row {
        flex-direction: column;
        align-items: stretch;
    }

    .location-card-title-row,
    .personnel-section-header,
    .order-documents-group-header {
        flex-direction: column;
        align-items: stretch;
    }

    .location-card-actions-row {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .section-header-action-form,
    .generate-staff-file-btn {
        width: 100%;
    }
}


/* =========================================================
   FINAL STAFF/DOCUMENT FIXES — icons and Excel preview
   ========================================================= */

.staff-confirm-btn,
.staff-delete-btn {
    font-size: 0 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
}

.staff-confirm-btn::before,
.staff-confirm-btn.is-confirmed::before,
.staff-delete-btn::before {
    content: none !important;
}

.staff-confirm-btn::after,
.staff-confirm-btn.is-confirmed::after {
    content: "вњ“" !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

.staff-delete-btn::after {
    content: "Г—" !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

.document-excel-preview-wrapper {
    max-height: calc(100vh - 250px);
}


/* =========================================================
   NORMALIZED EXCEL PREVIEW
   ========================================================= */

.document-editor-card .calendar-header {
    align-items: flex-start;
}

.document-editor-card .order-header-actions {
    margin-top: 0;
}

.document-excel-preview-wrapper {
    max-height: calc(100vh - 255px);
    overflow: auto;
    border-radius: 18px;
    border: 1px solid #d4e2d8;
    background: #ffffff;
}

.normalized-excel-preview-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

.normalized-excel-preview-table td {
    min-width: 140px;
    max-width: 360px;
    padding: 14px 16px;
    border-right: 1px solid #d9e7dd;
    border-bottom: 1px solid #d9e7dd;
    color: #1f2933;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    vertical-align: middle;
    background: #ffffff;
}

.normalized-excel-preview-table tr:first-child td,
.normalized-excel-preview-table .excel-preview-title-row td {
    background: #e8f3eb;
    color: #1f2933;
    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

.normalized-excel-preview-table tr:nth-child(even):not(.excel-preview-title-row) td {
    background: #f8fbf9;
}

.normalized-excel-preview-table td:first-child {
    border-left: none;
}

.normalized-excel-preview-table tr:first-child td {
    border-top: none;
}

.normalized-excel-preview-table tr:last-child td {
    border-bottom: none;
}

.normalized-excel-preview-table td:last-child {
    border-right: none;
}

.normalized-excel-preview-table .excel-preview-title-row td {
    padding-top: 18px;
    padding-bottom: 18px;
}

@media (max-width: 760px) {
    .normalized-excel-preview-table {
        min-width: 680px;
    }

    .normalized-excel-preview-table td {
        min-width: 120px;
        padding: 12px 13px;
        font-size: 13px;
    }
}


/* =========================================================
   DOCUMENT FILE MODE
   Excel documents are opened as real files, not as web tables.
   ========================================================= */

.document-slot-card .document-link {
    min-width: 126px;
}

.document-slot-card .file-preview-row {
    min-height: 58px;
}


/* =========================================================
   STAFF CARDS LAYOUT FIX
   ========================================================= */

.staff-requirements-grid {
    grid-template-columns: repeat(
        auto-fit,
        minmax(420px, 1fr)
    ) !important;
}

.staff-signup-person-with-time {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    grid-template-areas:
        "icon main actions"
        "icon time actions" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 10px !important;
}

.staff-signup-person-with-time .staff-confirm-icon-box {
    grid-area: icon !important;
}

.staff-signup-person-with-time .staff-person-main {
    grid-area: main !important;
    min-width: 0 !important;
}

.staff-signup-person-with-time .staff-time-inline-form {
    grid-area: time !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.staff-signup-person-with-time .staff-person-actions {
    grid-area: actions !important;
    align-self: center !important;
}

.staff-time-inline-form label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    color: #607065 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.staff-time-inline-form input {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    text-align: center !important;
}

.staff-time-inline-form .small-action-btn {
    min-height: 38px !important;
    padding: 8px 12px !important;
}

.onlyoffice-editor-wrapper {
    min-height: 760px;
}

@media (max-width: 980px) {
    .staff-requirements-grid {
        grid-template-columns: 1fr !important;
    }

    .staff-signup-person-with-time {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        grid-template-areas:
            "icon main"
            "time time"
            "actions actions" !important;
    }

    .staff-signup-person-with-time .staff-person-actions {
        justify-content: flex-start !important;
    }
}

/* =========================================================
   FINAL FIX — staff icons, greeting icon, staff card layout
   Додати в самий кінець app.css
   ========================================================= */

/* Іконка привітання без битого кодування */
.user-greeting::before {
    content: "\01F44B" !important;
    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif !important;
}

/* Кнопки галочки/хрестика: прибираємо биті символи з HTML/CSS */
.staff-confirm-btn,
.staff-delete-btn {
    position: relative !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-indent: -9999px !important;
}

.staff-confirm-btn::before,
.staff-confirm-btn::after,
.staff-confirm-btn.is-confirmed::before,
.staff-confirm-btn.is-confirmed::after,
.staff-delete-btn::before,
.staff-delete-btn::after {
    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-indent: 0 !important;
    font-family: Arial, sans-serif !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* Галочка через Unicode escape, щоб не ламалось кодування */
.staff-confirm-btn::after,
.staff-confirm-btn.is-confirmed::after {
    content: "\2713" !important;
    font-size: 19px !important;
}

/* Хрестик через Unicode escape, щоб не було “Г” або двох хрестиків */
.staff-delete-btn::after {
    content: "\00D7" !important;
    font-size: 25px !important;
}

/* Щоб картки персоналу не розлазились, коли багато ролей */
.staff-requirements-grid {
    grid-template-columns: repeat(
        auto-fit,
        minmax(520px, 1fr)
    ) !important;
}

/* Нормальна структура одного працівника */
.staff-signup-person-with-time {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    grid-template-areas:
        "icon main actions"
        "icon time actions" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 10px !important;
}

.staff-signup-person-with-time .staff-confirm-icon-box {
    grid-area: icon !important;
}

.staff-signup-person-with-time .staff-person-main {
    grid-area: main !important;
    min-width: 0 !important;
}

.staff-signup-person-with-time .staff-time-inline-form {
    grid-area: time !important;

    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;

    min-width: 0 !important;
    max-width: 100% !important;
}

.staff-signup-person-with-time .staff-person-actions {
    grid-area: actions !important;
    align-self: center !important;
}

.staff-time-inline-form label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    margin: 0 !important;

    color: #607065 !important;
    font-size: 12px !important;
    font-weight: 900 !important;

    white-space: nowrap !important;
}

.staff-time-inline-form input {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    text-align: center !important;
}

.staff-time-inline-form .small-action-btn {
    min-height: 38px !important;
    padding: 8px 12px !important;
}

/* На вузьких екранах усе стає в колонку */
@media (max-width: 980px) {
    .staff-requirements-grid {
        grid-template-columns: 1fr !important;
    }

    .staff-signup-person-with-time {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        grid-template-areas:
            "icon main"
            "time time"
            "actions actions" !important;
    }

    .staff-signup-person-with-time .staff-person-actions {
        justify-content: flex-start !important;
    }
}

/* =========================================================
   COMPANIES LIST — buttons near company title
   ========================================================= */

.company-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #dce8df;
}

.company-card-title-block {
    min-width: 0;
}

.company-card-title-block h2 {
    margin: 0;
}

.company-card-title-block p {
    margin: 8px 0 0;
    color: #607065;
    font-size: 14px;
    font-weight: 800;
}

.company-card-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.company-card-delete-form {
    margin: 0;
}

.company-card-open-btn,
.company-card-edit-btn,
.company-card-delete-btn {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .company-card-title-row {
        flex-direction: column;
        align-items: stretch;
    }

    .company-card-actions-row {
        justify-content: flex-start;
    }
}

.document-editor-page {
    position: relative;
    min-height: calc(100vh - 76px);
    padding: 0;
    background: #f4f7f5;
}

.document-editor-full-wrapper {
    height: calc(100vh - 76px);
    min-height: calc(100vh - 76px);
    border-radius: 0;
    border: none;
    background: #ffffff;
}

.document-editor-back-link {
    position: fixed;
    z-index: 50;
    left: 22px;
    bottom: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 10px 16px;

    border-radius: 999px;
    background: #2f7d4e;
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
    text-decoration: none;

    box-shadow: 0 10px 24px rgba(31, 41, 51, 0.18);
}

.document-editor-back-link:hover {
    background: #25653f;
    color: #ffffff;
}

.crm-messages {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.crm-message {
    padding: 13px 16px;
    border-radius: 16px;
    font-weight: 800;
    line-height: 1.35;
    border: 1px solid rgba(47, 125, 78, 0.22);
    background: #f1f8f3;
    color: #1f2933;
}

.crm-message-error {
    border-color: rgba(185, 28, 28, 0.25);
    background: #fef2f2;
    color: #991b1b;
}

.crm-message-warning {
    border-color: rgba(180, 83, 9, 0.25);
    background: #fff7ed;
    color: #92400e;
}

.crm-message-success {
    border-color: rgba(47, 125, 78, 0.28);
    background: #ecfdf3;
    color: #166534;
}


/* =========================================================
   ОНОВЛЕННЯ ІНТЕРФЕЙСУ ЗАМОВЛЕННЯ, ДОКУМЕНТІВ І КАЛЕНДАРЯ
   ========================================================= */

/* Повідомлення */
.crm-messages {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.crm-message {
    padding: 13px 16px;
    border-radius: 16px;
    border: 1px solid rgba(47, 125, 78, 0.22);
    background: #f1f8f3;
    color: #1f2933;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.crm-message-error {
    border-color: rgba(185, 28, 28, 0.25);
    background: #fef2f2;
    color: #991b1b;
}

.crm-message-warning {
    border-color: rgba(180, 83, 9, 0.25);
    background: #fff7ed;
    color: #92400e;
}

.crm-message-success {
    border-color: rgba(47, 125, 78, 0.28);
    background: #ecfdf3;
    color: #166534;
}

/* Форма замовлення */
.payment-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.payment-fields-grid .form-group {
    margin-bottom: 0;
}

[data-payment-currency-group][hidden] {
    display: none !important;
}

.contact-persons-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.add-contact-person-btn {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 13px;
}

.order-contacts-formset {
    display: grid;
    gap: 14px;
}

.order-contact-form-card {
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 8px 22px rgba(22, 64, 41, 0.05);
}

.order-contact-form-card[hidden] {
    display: none !important;
}

.order-contact-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.order-contact-card-header strong {
    color: #1f2933;
    font-size: 16px;
    font-weight: 900;
}

.order-contact-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.order-contact-fields-grid .form-group {
    margin-bottom: 0;
}

.order-contact-comment-field {
    grid-column: 1 / -1;
}

.order-contact-comment-field textarea {
    min-height: 78px;
}

.order-contacts-empty {
    padding: 18px;
    border: 1px dashed #cfdcd3;
    border-radius: 16px;
    background: #f7faf8;
    color: #607065;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}

.danger-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid #e6aaa3;
    border-radius: 12px;
    background: #ffffff;
    color: #a33a2b;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
}

.danger-outline-btn:hover {
    background: #fbe9e7;
    border-color: #d9897f;
}

/* Інформація про контактних осіб */
.compact-section-header {
    margin-bottom: 14px;
}

.order-contact-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.order-contact-detail-card {
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 16px;
    padding: 15px;
    min-width: 0;
}

.order-contact-detail-card > strong {
    display: block;
    margin-bottom: 10px;
    color: #1f2933;
    font-size: 16px;
    font-weight: 900;
}

.order-contact-detail-card p {
    margin: 7px 0;
    color: #344238;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.order-contact-detail-card p span {
    color: #607065;
    font-weight: 900;
}

/* Статуси та інформація про оплату */
.order-info-and-status-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 18px;
    align-items: start;
}

.order-status-panel-inside-info {
    width: 100%;
    min-width: 0;
    position: sticky;
    top: 18px;
}

.invoice-note-box {
    display: grid;
    gap: 9px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #d7e2da;
    border-radius: 14px;
    background: #ffffff;
}

.invoice-note-box label {
    color: #344238;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}

.invoice-note-input {
    min-height: 92px !important;
    resize: vertical;
}

.invoice-note-save-btn {
    width: 100%;
    min-height: 38px;
}

/* Зворотний зв’язок */
.feedback-section {
    position: relative;
}

.feedback-section-required {
    border: 2px solid #dc2626;
    background: linear-gradient(135deg, #fffafa 0%, #ffffff 100%);
    box-shadow: 0 12px 30px rgba(185, 28, 28, 0.08);
}

.feedback-required-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.feedback-reminder-banner {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.45;
}

.feedback-save-form {
    display: grid;
    gap: 12px;
}

.feedback-save-form textarea {
    width: 100%;
    min-height: 120px;
    border: 1px solid #cfdcd3;
    border-radius: 14px;
    padding: 13px 14px;
    background: #ffffff;
    color: #1f2933;
    font-family: inherit;
    font-size: 15px;
    resize: vertical;
    outline: none;
}

.feedback-save-form textarea:focus {
    border-color: #2f7d4e;
    box-shadow: 0 0 0 3px rgba(47, 125, 78, 0.12);
}

.feedback-save-btn {
    justify-self: end;
}

.feedback-reminder-open {
    overflow: hidden;
}

.feedback-reminder-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.feedback-reminder-modal[hidden] {
    display: none !important;
}

.feedback-reminder-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 47, 31, 0.68);
    backdrop-filter: blur(3px);
}

.feedback-reminder-modal-card {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    padding: 30px;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
    text-align: center;
}

.feedback-reminder-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #f3f5f4;
    color: #344238;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.feedback-reminder-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #dc2626;
    color: #ffffff;
    font-size: 30px;
    font-weight: 900;
}

.feedback-reminder-modal-card h3 {
    margin: 0 0 10px;
    color: #1f2933;
    font-size: 25px;
}

.feedback-reminder-modal-card p {
    margin: 0 0 20px;
    color: #607065;
    font-size: 15px;
    line-height: 1.55;
}

/* Персонал: час і оплата */
.staff-time-payment-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    min-width: 0;
}

.staff-time-payment-grid {
    display: grid;
    grid-template-columns: 78px 78px 110px 90px minmax(160px, 1fr);
    gap: 8px;
    align-items: end;
    min-width: 0;
}

.staff-time-payment-grid label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.staff-time-payment-grid label > span {
    color: #607065;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.staff-time-payment-grid .form-control,
.staff-time-payment-grid input,
.staff-time-payment-grid select {
    min-height: 36px;
    width: 100%;
    padding: 7px 8px;
    border: 1px solid #cfdcd3;
    border-radius: 10px;
    background: #ffffff;
    color: #1f2933;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    outline: none;
}

.staff-time-payment-grid input:focus,
.staff-time-payment-grid select:focus {
    border-color: #2f7d4e;
    box-shadow: 0 0 0 2px rgba(47, 125, 78, 0.12);
}

.staff-payment-note-field {
    min-width: 160px;
}

.staff-time-save-btn {
    min-height: 36px;
    padding: 8px 12px;
}

/* Ролі персоналу: рівні контури */
.staff-choice-card {
    border-width: 2px !important;
    border-color: #d5e1d8 !important;
    outline: none !important;
    box-shadow: none;
}

.staff-choice-card:hover {
    border-color: #9dbda6 !important;
}

.staff-choice-card.is-selected {
    border-color: #2f7d4e !important;
    box-shadow: 0 0 0 3px rgba(47, 125, 78, 0.12) !important;
}

.staff-choice-card.is-confirmed {
    border-color: #1f6b3c !important;
    box-shadow: 0 0 0 3px rgba(31, 107, 60, 0.12) !important;
}

.staff-choice-card input[type="checkbox"],
.staff-choice-card input[type="radio"] {
    margin: 0;
    flex: 0 0 auto;
}

/* Документи */
.order-documents-groups {
    display: grid;
    gap: 18px;
}

.order-documents-group {
    background: #f7faf8;
    border: 1px solid #d7e2da;
    border-radius: 20px;
    padding: 18px;
}

.order-documents-group-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.order-documents-group-header h4,
.admin-file-history-header h4 {
    margin: 0;
    color: #1f2933;
    font-size: 19px;
    font-weight: 900;
}

.order-documents-group-header p,
.admin-file-history-header p {
    margin: 5px 0 0;
    color: #607065;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

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

.document-slot-card {
    min-width: 0;
    overflow: hidden;
}

.document-card-hint {
    margin: 5px 0 0;
    color: #607065;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.document-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border-radius: 999px;
    background: #e4f3e8;
    color: #1f4d36;
    font-size: 13px;
    font-weight: 900;
}

.document-slot-actions-clean {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.document-open-btn,
.document-add-file-btn,
.document-replace-btn {
    min-height: 38px;
}

.document-add-file-btn {
    width: 100%;
}

.send-to-work-form {
    margin: auto 0 0;
}

.send-to-work-btn {
    width: 100%;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    border-radius: 15px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #8f1f18 0%, #b83228 100%);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(143, 31, 24, 0.2);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.send-to-work-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #781711 0%, #a62b22 100%);
    box-shadow: 0 14px 30px rgba(143, 31, 24, 0.27);
}

.send-to-work-btn:active {
    transform: translateY(0);
}

.send-to-work-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 17px;
}

.invoice-files-list {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.invoice-file-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #d7e2da;
    border-radius: 14px;
    background: #ffffff;
}

.invoice-file-item .file-preview-row {
    min-width: 0;
    margin: 0;
}

.invoice-file-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.invoice-file-meta {
    color: #607065;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.invoice-file-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.invoice-file-actions form {
    margin: 0;
}

.invoice-delete-btn {
    min-height: 38px;
}

.invoice-files-upload-form {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #e1ebe4;
}

.invoice-files-upload-label {
    display: grid;
    gap: 8px;
    color: #344238;
    font-size: 13px;
    font-weight: 900;
}

.invoice-files-input {
    width: 100%;
    min-height: 44px;
    border: 1px dashed #9dbda6 !important;
    border-radius: 12px !important;
    padding: 9px !important;
    background: #f7fbf7 !important;
    color: #344238;
}

.invoice-files-upload-btn {
    width: 100%;
    min-height: 42px;
}

.admin-file-history {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #d7e2da;
    border-radius: 18px;
    background: #ffffff;
}

.admin-file-history-header {
    margin-bottom: 13px;
}

.admin-file-history-list {
    display: grid;
    gap: 8px;
}

.admin-file-history-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid #e1ebe4;
    border-radius: 13px;
    background: #f9fcfa;
}

.admin-file-history-marker {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6b7f70;
}

.admin-file-history-added .admin-file-history-marker {
    background: #2f7d4e;
}

.admin-file-history-updated .admin-file-history-marker {
    background: #d39b21;
}

.admin-file-history-deleted .admin-file-history-marker {
    background: #c0392b;
}

.admin-file-history-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.admin-file-history-main strong {
    color: #1f2933;
    font-size: 13px;
    font-weight: 900;
}

.admin-file-history-main span {
    color: #607065;
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.admin-file-history-meta {
    display: grid;
    gap: 3px;
    justify-items: end;
    color: #607065;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

/* Календар: стабільне масштабування */
.calendar-table {
    overflow-x: auto;
    padding-bottom: 3px;
}

.calendar-weekdays,
.calendar-grid {
    min-width: 980px;
}

.calendar-grid {
    align-items: stretch;
}

.calendar-day {
    min-width: 0;
    min-height: 158px;
    padding: 10px;
    border-right: 1px solid #d7e2da;
    border-bottom: 1px solid #d7e2da;
    background: #ffffff;
    overflow: hidden;
}

.calendar-day:nth-last-child(-n + 7) {
    border-bottom: none;
}

.calendar-day-past {
    background: #fbfcfb;
}

.calendar-day-past .calendar-day-number {
    color: #8a978e;
}

.calendar-orders {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.calendar-order-item {
    position: relative;
    display: grid;
    gap: 6px;
    min-width: 0;
    width: 100%;
    padding: 9px;
    border-radius: 11px;
    color: #1f2933;
    text-decoration: none;
    line-height: 1.25;
    overflow: hidden;
}

.calendar-order-title {
    display: block;
    min-width: 0;
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: normal;
}

.calendar-order-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

.calendar-order-time,
.calendar-order-guests {
    color: inherit;
    font-size: 10px;
    font-weight: 800;
    opacity: 0.82;
    min-width: 0;
    overflow-wrap: anywhere;
}

.calendar-order-invoice-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #344238;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

.calendar-invoice-critical {
    border-color: #dc2626 !important;
    box-shadow: inset 0 0 0 2px #dc2626, 0 5px 14px rgba(220, 38, 38, 0.14) !important;
}

.calendar-order-invoice-status.calendar-invoice-critical {
    background: #dc2626 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.calendar-invoice-needed:not(.calendar-invoice-critical) {
    border-color: #e7c86a;
}

.calendar-order-invoice-status.calendar-invoice-needed {
    background: #fff1cf;
    color: #8a5a00;
}

.calendar-order-invoice-status.calendar-invoice-prepayment_only {
    background: #e8eef7;
    color: #244f91;
}

.calendar-order-invoice-status.calendar-invoice-paid {
    background: #e4f3e8;
    color: #1f6b3c;
}

.calendar-order-item.calendar-status-completed.calendar-invoice-critical {
    background: #2f7d4e !important;
    color: #ffffff !important;
}

.calendar-order-item.calendar-status-completed .calendar-order-time {
    color: #ffffff !important;
}

.calendar-order-item-staff {
    min-height: 52px;
}

/* Адаптивність */
@media (max-width: 1280px) {
    .document-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .staff-signup-person-with-time {
        grid-template-columns: auto minmax(160px, 0.7fr) minmax(0, 1.8fr) auto !important;
    }

    .staff-time-payment-grid {
        grid-template-columns: 72px 72px 95px 82px minmax(130px, 1fr);
    }
}

@media (max-width: 1050px) {
    .order-info-and-status-row {
        grid-template-columns: 1fr;
    }

    .order-status-panel-inside-info {
        position: static;
    }

    .staff-signup-person-with-time {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
    }

    .staff-time-payment-form {
        grid-column: 1 / -1;
    }

    .staff-time-payment-grid {
        grid-template-columns: repeat(4, minmax(90px, 1fr));
    }

    .staff-payment-note-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .payment-fields-grid,
    .order-contact-fields-grid,
    .admin-document-cards-grid,
    .document-cards-grid {
        grid-template-columns: 1fr;
    }

    .contact-persons-title-row {
        align-items: stretch;
    }

    .add-contact-person-btn {
        width: 100%;
    }

    .order-contact-detail-grid {
        grid-template-columns: 1fr;
    }

    .invoice-file-item {
        grid-template-columns: 1fr;
    }

    .invoice-file-actions {
        justify-content: flex-start;
    }

    .admin-file-history-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .admin-file-history-meta {
        grid-column: 2;
        justify-items: start;
        white-space: normal;
    }

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

    .staff-payment-note-field {
        grid-column: 1 / -1;
    }

    .staff-time-payment-form {
        grid-template-columns: 1fr;
    }

    .staff-time-save-btn {
        width: 100%;
    }

    .feedback-save-btn {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .calendar-card {
        padding: 18px !important;
    }

    .order-contact-form-card,
    .order-documents-group,
    .admin-file-history {
        padding: 14px;
    }

    .document-slot-actions-clean,
    .invoice-file-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .document-slot-actions-clean > *,
    .invoice-file-actions > *,
    .invoice-file-actions form,
    .invoice-file-actions button,
    .document-slot-actions-clean a {
        width: 100%;
    }

    .feedback-reminder-modal-card {
        padding: 26px 18px 20px;
    }
}


/* =========================================================
   Р—РђР ОБІТОК Р СџР  АЦІВНИКА Р Р€ Р СџР  ОФІЛРвЂ
   ========================================================= */

.staff-earnings-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.staff-earnings-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 110px;
    padding: 18px;
    border: 1px solid #cfe3d4;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f1f8f3 100%
    );
    box-shadow: 0 10px 24px rgba(47, 125, 78, 0.08);
}

.staff-earnings-card > span {
    color: #607065;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.4;
    text-transform: uppercase;
}

.staff-earnings-card > strong,
.staff-earnings-values strong {
    color: #2f7d4e;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.staff-earnings-values {
    display: flex;
    align-items: center;
    gap: 8px 14px;
    flex-wrap: wrap;
}

.staff-history-payment {
    display: block;
    color: #1f6b3c;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.staff-history-payment-note {
    display: block;
    margin-top: 4px;
    max-width: 260px;
    color: #607065;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

.staff-history-table th:last-child,
.staff-history-table td:last-child {
    min-width: 150px;
}

@media (max-width: 760px) {
    .staff-earnings-summary {
        grid-template-columns: 1fr;
    }

    .staff-history-table-wrapper {
        overflow-x: auto;
    }

    .staff-history-table {
        min-width: 720px;
    }
}


/* =========================================================
   ФІНАЛЬНІ ВИПРАВЛЕННЯ ПЕРСОНАЛУ ТА ЗАВАНТАЖЕННЯ ФАЙЛІВ
   ========================================================= */

/* Виправлення пошкоджених символів у псевдоелементах */
.user-greeting::before {
    content: "\1F464" !important;
}

.staff-confirm-btn::after,
.staff-confirm-btn.is-confirmed::after {
    content: "\2713" !important;
}

.staff-delete-btn::after {
    content: "\00D7" !important;
}

/* Сторінка замовлення для персоналу */
.staff-order-card .customer-detail-layout {
    gap: 22px;
}

.staff-order-card .staff-choice-section {
    overflow: visible;
}

.staff-order-card .staff-requirements-grid {
    grid-template-columns: repeat(
        auto-fit,
        minmax(260px, 1fr)
    );
    align-items: stretch;
    gap: 18px;
}

.staff-order-card .staff-choice-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 190px;
    height: 100%;
    padding: 18px;
    overflow: visible;
}

.staff-order-card .staff-choice-top {
    min-width: 0;
}

.staff-order-card .staff-choice-top > div {
    min-width: 0;
    flex: 1;
}

.staff-order-card .staff-choice-top h4,
.staff-order-card .staff-choice-top p,
.staff-order-card .staff-choice-status {
    white-space: normal;
    overflow-wrap: anywhere;
}

.staff-order-card .staff-choice-status {
    margin-top: auto;
}

.staff-choice-notice-spaced {
    margin-top: 22px !important;
    margin-bottom: 0 !important;
}

.staff-confirmed-notice-card {
    padding: 20px !important;
}

.staff-confirmed-notice-card h2 {
    margin: 0 0 14px !important;
}

.staff-confirmed-notice-card p {
    margin: 0 !important;
}

/* У календарі червоним виділяється лише бейдж оплати */
.calendar-order-item.calendar-invoice-critical {
    box-shadow: none !important;
}

.calendar-order-invoice-status.calendar-invoice-critical {
    border: none !important;
    background: #dc2626 !important;
    color: #ffffff !important;
}

/* Один рядок суми оплати працівника */
.staff-signup-person-with-time {
    display: grid !important;
    grid-template-columns:
        auto
        minmax(170px, 1fr)
        minmax(230px, 290px)
        auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0;
}

.staff-payment-amount-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #d7e2da;
    border-radius: 13px;
    background: #ffffff;
}

.staff-payment-amount-label {
    display: grid;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.staff-payment-amount-label > span {
    color: #607065;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.staff-payment-amount-form .staff-payment-input,
.staff-payment-amount-form input[type="number"] {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #cfdcd3;
    border-radius: 10px;
    background: #ffffff;
    color: #1f2933;
    font-family: inherit;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    outline: none;
}

.staff-payment-amount-form .staff-payment-input:focus,
.staff-payment-amount-form input[type="number"]:focus {
    border-color: #2f7d4e;
    box-shadow: 0 0 0 3px rgba(47, 125, 78, 0.12);
}

.staff-payment-save-btn {
    min-height: 38px;
    padding: 8px 12px;
    flex-shrink: 0;
}

/* Старі блоки часу, валюти та коментаря більше не впливають */
.staff-time-payment-form,
.staff-time-payment-grid,
.staff-payment-note-field {
    min-width: 0;
}

/* Нормальне завантаження пропозиції та інших документів */
.crm-form input[type="file"],
.form-control[type="file"] {
    min-height: 54px;
    padding: 7px;
    border: 1px dashed #9dbda6;
    border-radius: 13px;
    background: #f7fbf7;
    color: #344238;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.crm-form input[type="file"]::file-selector-button,
.form-control[type="file"]::file-selector-button {
    min-height: 38px;
    margin-right: 12px;
    padding: 8px 14px;
    border: none;
    border-radius: 10px;
    background: #e4f3e8;
    color: #1f4d36;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.crm-form input[type="file"]::file-selector-button:hover,
.form-control[type="file"]::file-selector-button:hover {
    background: #d4ead9;
}

.current-file-box,
.current-document-box {
    align-items: flex-start;
    min-width: 0;
    overflow: hidden;
}

.current-file-box > div,
.current-document-box > div {
    min-width: 0;
}

.current-file-box strong,
.current-document-box strong,
.current-file-box span,
.current-document-box span {
    white-space: normal;
    overflow-wrap: anywhere;
}

.crm-form .form-actions .add-order-btn,
.crm-form .form-actions .secondary-btn {
    min-height: 44px;
}

/* Кнопки та файли у картці пропозиції */
.proposal-document-card .document-slot-actions-clean {
    display: flex;
    align-items: stretch;
    gap: 9px;
}

.proposal-document-card .document-slot-actions-clean > a {
    flex: 1 1 170px;
    width: auto;
    min-width: 0;
}

.proposal-document-card .send-to-work-form {
    margin-top: 0;
}

/* Адаптивність */
@media (max-width: 1180px) {
    .staff-signup-person-with-time {
        grid-template-columns:
            auto
            minmax(150px, 1fr)
            minmax(210px, 260px)
            auto !important;
    }
}

@media (max-width: 980px) {
    .staff-signup-person-with-time {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto !important;
    }

    .staff-payment-amount-form {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 700px) {
    .staff-order-card .staff-requirements-grid {
        grid-template-columns: 1fr;
    }

    .staff-choice-notice-spaced {
        margin-top: 18px !important;
    }

    .staff-signup-person-with-time {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto !important;
    }

    .staff-payment-amount-form {
        flex-wrap: wrap;
    }

    .staff-payment-amount-label {
        flex-basis: 100%;
    }

    .staff-payment-save-btn {
        width: 100%;
    }

    .proposal-document-card .document-slot-actions-clean {
        flex-direction: column;
    }

    .proposal-document-card .document-slot-actions-clean > a {
        width: 100%;
        flex-basis: auto;
    }
}


/* =========================================================
   ROUND 3 — КАЛЕНДАР, ОПЛАТА ПЕРСОНАЛУ ТА ІСТОРІЯ ФАЙЛІВ
   ========================================================= */

/* Повна назва замовлення в календарі без обрізання трьома крапками */
.calendar-order-item {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.calendar-order-title {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
}

.calendar-order-meta-row {
    align-items: flex-start !important;
}

.calendar-order-invoice-status {
    flex: 0 1 auto !important;
    max-width: 100% !important;
}

.calendar-order-invoice-status.calendar-invoice-prepayment_only {
    background: #f59e0b !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.24) !important;
}

/* Сума оплати працівника окремим акуратним рядком */
.staff-signup-person-with-time {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 8px 12px !important;
    padding: 12px !important;
    overflow: visible !important;
}

.staff-signup-person-with-time .staff-confirm-icon-box {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
}

.staff-signup-person-with-time .staff-person-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
}

.staff-signup-person-with-time .staff-person-actions {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
}

.staff-signup-person-with-time .staff-person-payment-row,
.staff-signup-person-with-time .staff-payment-amount-form {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(120px, 170px) auto !important;
    align-items: end !important;
    justify-content: start !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    padding: 8px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #d7e2da !important;
    border-radius: 12px !important;
}

.staff-payment-amount-label {
    width: 100% !important;
    min-width: 0 !important;
}

.staff-payment-amount-label > span {
    display: block !important;
    margin-bottom: 5px !important;
}

.staff-payment-amount-form .staff-payment-input,
.staff-payment-amount-form input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.staff-payment-save-btn {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Сторінка завантаження документа */
.document-upload-page .calendar-header,
.document-upload-page .document-upload-form {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.document-upload-form {
    padding: 22px !important;
}

.document-upload-form .current-document-box {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 14px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
    background: #ffffff !important;
    border: 1px solid #d7e2da !important;
    border-radius: 16px !important;
}

.document-upload-form .current-document-box > div {
    min-width: 0 !important;
}

.document-upload-form .current-document-box strong {
    display: block !important;
    margin-bottom: 5px !important;
    font-size: 14px !important;
}

.document-upload-form .document-file-name {
    display: block !important;
    margin-bottom: 12px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.document-upload-form .compact-actions {
    justify-content: flex-start !important;
    margin-top: 10px !important;
}

.document-upload-form .document-file-field {
    margin-bottom: 0 !important;
}

.document-upload-form input[type="file"] {
    width: 100% !important;
    min-height: 58px !important;
    padding: 8px !important;
}

/* Картки пропозиції та рахунку */
.admin-document-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
}

.proposal-document-card,
.invoice-multiple-card {
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

.proposal-document-card .document-slot-actions-clean {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.proposal-document-card .document-slot-actions-clean > a {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: center !important;
}

.invoice-files-upload-form {
    display: grid !important;
    gap: 10px !important;
}

.invoice-files-upload-label {
    display: grid !important;
    gap: 8px !important;
}

.invoice-files-upload-form input[type="file"] {
    width: 100% !important;
    min-width: 0 !important;
}

/* Історія змін безпосередньо біля кожного типу файлу */
.document-inline-history {
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid #dfe9e2 !important;
}

.document-inline-history-title {
    margin-bottom: 10px !important;
    color: #1f2933 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.document-inline-history-list {
    display: grid !important;
    gap: 8px !important;
}

.document-inline-history-item {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 9px !important;
    min-width: 0 !important;
    padding: 10px !important;
    background: #f7faf8 !important;
    border: 1px solid #dfe9e2 !important;
    border-radius: 12px !important;
}

.document-inline-history-marker {
    width: 9px !important;
    height: 9px !important;
    margin-top: 5px !important;
    border-radius: 50% !important;
    background: #d49a19 !important;
    box-shadow: 0 0 0 4px rgba(212, 154, 25, 0.12) !important;
}

.document-inline-history-content {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.document-inline-history-content strong,
.document-inline-history-content span {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.document-inline-history-content strong {
    color: #1f2933 !important;
    font-size: 12px !important;
}

.document-inline-history-content span {
    color: #607065 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

.document-inline-history-meta {
    display: grid !important;
    gap: 3px !important;
    justify-items: end !important;
    color: #607065 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.document-inline-history-empty {
    padding: 10px 12px !important;
    background: #f7faf8 !important;
    border: 1px dashed #cfdcd3 !important;
    border-radius: 12px !important;
    color: #607065 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

@media (max-width: 900px) {
    .admin-document-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 700px) {
    .staff-signup-person-with-time {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .staff-signup-person-with-time .staff-person-actions {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        justify-content: flex-end !important;
    }

    .staff-signup-person-with-time .staff-person-payment-row,
    .staff-signup-person-with-time .staff-payment-amount-form {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .staff-payment-save-btn {
        width: 100% !important;
    }

    .document-inline-history-item {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .document-inline-history-meta {
        grid-column: 2 !important;
        justify-items: start !important;
        white-space: normal !important;
    }
}


/* =========================================================
   ROUND 4 — БЕЙДЖІ ОПЛАТИ ТА РЯДОК ПЕРСОНАЛУ
   ========================================================= */

/* У календарі час не показується, залишається лише статус оплати. */
.calendar-order-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin-top: 7px !important;
}

.calendar-order-invoice-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 4px 9px !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(31, 41, 51, 0.14) !important;
}

.calendar-order-invoice-status.calendar-payment-paid {
    background: #f4fff7 !important;
    color: #0f5f32 !important;
    border-color: #0f6b35 !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.7),
        0 3px 10px rgba(15, 107, 53, 0.24) !important;
}

.calendar-order-invoice-status.calendar-payment-prepayment {
    background: #fff2bf !important;
    color: #6f4300 !important;
    border-color: #c97800 !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.7),
        0 3px 10px rgba(201, 120, 0, 0.26) !important;
}

.calendar-order-invoice-status.calendar-payment-unpaid {
    background: #c62828 !important;
    color: #ffffff !important;
    border-color: #7f1d1d !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.86),
        0 3px 11px rgba(127, 29, 29, 0.32) !important;
}

/* Працівник — час роботи — оплата — дії: один горизонтальний рядок. */
.staff-signup-person-with-time {
    display: grid !important;
    grid-template-columns:
        auto
        minmax(170px, 1fr)
        minmax(410px, auto)
        auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    overflow: visible !important;
}

.staff-signup-person-with-time .staff-confirm-icon-box,
.staff-signup-person-with-time .staff-person-main,
.staff-signup-person-with-time .staff-person-actions,
.staff-signup-person-with-time .staff-work-payment-form {
    grid-row: 1 !important;
}

.staff-signup-person-with-time .staff-confirm-icon-box {
    grid-column: 1 !important;
}

.staff-signup-person-with-time .staff-person-main {
    grid-column: 2 !important;
    min-width: 0 !important;
}

.staff-signup-person-with-time .staff-work-payment-form {
    grid-column: 3 !important;
}

.staff-signup-person-with-time .staff-person-actions {
    grid-column: 4 !important;
}

.staff-work-payment-form {
    display: grid !important;
    grid-template-columns: minmax(210px, 250px) minmax(110px, 140px) auto !important;
    align-items: end !important;
    gap: 9px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    background: #ffffff !important;
    border: 1px solid #d7e2da !important;
    border-radius: 13px !important;
}

.staff-work-time-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(90px, 1fr)) !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.staff-work-payment-title {
    grid-column: 1 / -1 !important;
    display: block !important;
    margin-bottom: 1px !important;
    color: #607065 !important;
    font-size: 10px !important;
    font-weight: 1000 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.staff-work-time-fields label,
.staff-payment-field {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.staff-work-time-fields label > span {
    color: #607065 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

.staff-work-payment-form .staff-time-input,
.staff-work-payment-form .staff-payment-input,
.staff-work-payment-form input[type="text"],
.staff-work-payment-form input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border: 1px solid #cfdcd3 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #1f2933 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    outline: none !important;
}

.staff-work-payment-form .staff-time-input:focus,
.staff-work-payment-form .staff-payment-input:focus,
.staff-work-payment-form input:focus {
    border-color: #2f7d4e !important;
    box-shadow: 0 0 0 3px rgba(47, 125, 78, 0.12) !important;
}

.staff-work-payment-save-btn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 13px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Старий дворядковий блок більше не керує розкладкою. */
.staff-signup-person-with-time .staff-person-payment-row,
.staff-signup-person-with-time .staff-payment-amount-form {
    grid-column: auto !important;
    grid-row: auto !important;
}

@media (max-width: 1180px) {
    .staff-signup-person-with-time {
        grid-template-columns: auto minmax(150px, 1fr) auto !important;
    }

    .staff-signup-person-with-time .staff-work-payment-form {
        grid-column: 2 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
    }

    .staff-signup-person-with-time .staff-person-actions {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }
}

@media (max-width: 720px) {
    .staff-signup-person-with-time {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .staff-signup-person-with-time .staff-person-actions {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        justify-content: flex-end !important;
    }

    .staff-signup-person-with-time .staff-work-payment-form {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        grid-template-columns: 1fr !important;
    }

    .staff-work-time-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .staff-work-payment-save-btn {
        width: 100% !important;
    }
}

/* =========================================================
   ROUND 5 — КОМПАКТНИЙ ПЕРСОНАЛ, ДОВГІ НАЗВИ ФАЙЛІВ,
   ОЧИЩЕННЯ ІСТОРІЇ ТА ТЕКСТОВА ЗАКУПКА
   ========================================================= */

/* У блоці персоналу кожна роль займає повну ширину.
   Завдяки цьому працівник, час, оплата і кнопки не стискаються. */
#staff-section .staff-requirements-grid {
    grid-template-columns: 1fr !important;
}

#staff-section .staff-role-card {
    min-width: 0 !important;
}

#staff-section .staff-signup-person-with-time {
    display: grid !important;
    grid-template-columns:
        30px
        minmax(150px, 1fr)
        minmax(330px, 430px)
        66px !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    padding: 10px !important;
}

#staff-section .staff-confirm-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 17px !important;
}

#staff-section .staff-person-main {
    min-width: 0 !important;
}

#staff-section .staff-person-name {
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

#staff-section .staff-person-date {
    font-size: 10px !important;
    white-space: normal !important;
}

#staff-section .staff-work-payment-form {
    display: grid !important;
    grid-template-columns:
        minmax(150px, 1fr)
        minmax(82px, 96px)
        78px !important;
    align-items: end !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 7px !important;
}

#staff-section .staff-work-time-fields {
    grid-template-columns: repeat(2, minmax(66px, 1fr)) !important;
    gap: 5px !important;
}

#staff-section .staff-work-payment-form .staff-time-input,
#staff-section .staff-work-payment-form .staff-payment-input,
#staff-section .staff-work-payment-form input[type="text"],
#staff-section .staff-work-payment-form input[type="number"] {
    height: 35px !important;
    min-height: 35px !important;
    padding: 6px 7px !important;
    font-size: 12px !important;
}

#staff-section .staff-work-payment-title,
#staff-section .staff-work-time-fields label > span {
    font-size: 9px !important;
}

#staff-section .staff-work-payment-save-btn {
    width: 78px !important;
    min-width: 78px !important;
    height: 35px !important;
    min-height: 35px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
}

#staff-section .staff-person-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 30px) !important;
    gap: 6px !important;
    justify-content: end !important;
}

#staff-section .staff-confirm-btn,
#staff-section .staff-delete-btn {
    width: 30px !important;
    height: 30px !important;
}

/* Довга назва поточного документа не витискає кнопки. */
.document-upload-form {
    max-width: 620px !important;
}

.document-upload-form .document-current-file-card {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
}

.document-current-file-main {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
}

.document-current-file-main .document-file-name {
    display: -webkit-box !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.document-current-file-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.document-current-file-actions > a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    white-space: normal !important;
    text-align: center !important;
}

.document-upload-form .document-file-field input[type="file"] {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Довгі назви у картках документів також не ламають сітку. */
.document-slot-card .document-file-name,
.invoice-file-item .document-file-name {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* Заголовок історії та кнопка очищення. */
.document-inline-history-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

.document-inline-history-heading .document-inline-history-title {
    margin: 0 !important;
}

.document-history-clear-form {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.document-history-clear-btn {
    min-height: 30px !important;
    padding: 5px 10px !important;
    border: 1px solid #e4aaa3 !important;
    border-radius: 999px !important;
    background: #fff5f3 !important;
    color: #a33a2b !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.document-history-clear-btn:hover {
    background: #fbe3df !important;
    border-color: #d98176 !important;
}

/* TXT-файл закупки. */
.file-icon-text {
    background: linear-gradient(145deg, #526a5a, #344a3b) !important;
}

.text-document-preview-card {
    min-height: calc(100vh - 100px) !important;
}

.text-document-preview-header {
    align-items: flex-start !important;
}

.text-document-file-name {
    max-width: 760px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.text-document-actions {
    margin-top: 0 !important;
}

.purchase-text-shell {
    width: min(900px, 100%) !important;
    margin: 0 auto !important;
    padding: 22px !important;
    border: 1px solid #d7e2da !important;
    border-radius: 20px !important;
    background: #203044 !important;
    box-shadow: 0 18px 40px rgba(17, 31, 45, 0.16) !important;
}

.purchase-text-preview {
    margin: 0 !important;
    color: #ffffff !important;
    background: transparent !important;
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.45 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    tab-size: 4 !important;
}

.copy-document-status {
    min-height: 24px !important;
    margin-top: 12px !important;
    color: #2f7d4e !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: center !important;
}

@media (max-width: 900px) {
    #staff-section .staff-signup-person-with-time {
        grid-template-columns: 28px minmax(0, 1fr) 62px !important;
    }

    #staff-section .staff-work-payment-form {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        grid-template-columns:
            minmax(150px, 1fr)
            minmax(82px, 100px)
            84px !important;
    }

    #staff-section .staff-person-actions {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    .text-document-preview-header {
        flex-direction: column !important;
    }

    .text-document-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 620px) {
    #staff-section .staff-work-payment-form {
        grid-template-columns: 1fr !important;
    }

    #staff-section .staff-work-payment-save-btn {
        width: 100% !important;
    }

    .document-current-file-actions {
        grid-template-columns: 1fr !important;
    }

    .purchase-text-shell {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .purchase-text-preview {
        font-size: 15px !important;
    }
}

/* =========================================================
   ROUND 6 — КОМПАКТНИЙ РЯДОК ПРАЦІВНИКА
   ========================================================= */

#staff-section .staff-signup-list {
    align-items: flex-start !important;
}

#staff-section .staff-signup-person-with-time {
    display: inline-grid !important;
    grid-template-columns:
        30px
        180px
        auto
        66px !important;
    justify-content: start !important;
    align-items: center !important;
    align-self: flex-start !important;
    width: fit-content !important;
    max-width: 100% !important;
    gap: 9px !important;
    padding: 10px !important;
}

#staff-section .staff-person-main {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    flex: 0 0 180px !important;
}

#staff-section .staff-work-payment-form {
    grid-template-columns:
        160px
        88px
        72px !important;
    width: auto !important;
    min-width: 332px !important;
    max-width: 332px !important;
}

#staff-section .staff-work-time-fields {
    grid-template-columns: repeat(2, 76px) !important;
}

#staff-section .staff-work-payment-save-btn {
    width: 72px !important;
    min-width: 72px !important;
}

@media (max-width: 820px) {
    #staff-section .staff-signup-person-with-time {
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) 62px !important;
        width: 100% !important;
    }

    #staff-section .staff-person-main {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 auto !important;
    }

    #staff-section .staff-work-payment-form {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-template-columns:
            minmax(150px, 1fr)
            minmax(82px, 100px)
            84px !important;
    }
}

@media (max-width: 620px) {
    #staff-section .staff-work-payment-form {
        grid-template-columns: 1fr !important;
    }

    #staff-section .staff-work-time-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =========================================================
   ROUND 7 — ЦЕНТРОВАНИЙ КОМПАКТНИЙ РЯДОК ПРАЦІВНИКА
   ========================================================= */

#staff-section .staff-signup-list {
    width: 100% !important;
    align-items: center !important;
}

#staff-section .staff-signup-person-with-time {
    display: grid !important;
    grid-template-columns:
        30px
        minmax(145px, 165px)
        330px
        68px !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 650px) !important;
    max-width: 650px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 22px !important;
}

#staff-section .staff-signup-person-with-time .staff-confirm-icon-box {
    width: 30px !important;
    min-width: 30px !important;
}

#staff-section .staff-signup-person-with-time .staff-confirm-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 17px !important;
}

#staff-section .staff-signup-person-with-time .staff-person-main {
    width: auto !important;
    min-width: 0 !important;
    max-width: 165px !important;
    flex: initial !important;
}

#staff-section .staff-signup-person-with-time .staff-person-name,
#staff-section .staff-signup-person-with-time .staff-person-date {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

#staff-section .staff-work-payment-form {
    display: grid !important;
    grid-template-columns: 160px 84px 70px !important;
    align-items: end !important;
    width: 330px !important;
    min-width: 330px !important;
    max-width: 330px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    gap: 8px !important;
    border-radius: 16px !important;
}

#staff-section .staff-work-time-fields {
    display: grid !important;
    grid-template-columns: repeat(2, 76px) !important;
    width: 160px !important;
    min-width: 160px !important;
    gap: 8px !important;
}

#staff-section .staff-work-payment-form .staff-time-input,
#staff-section .staff-work-payment-form .staff-payment-input,
#staff-section .staff-work-payment-form input[type="text"],
#staff-section .staff-work-payment-form input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 6px 7px !important;
    font-size: 12px !important;
}

#staff-section .staff-work-payment-title,
#staff-section .staff-work-time-fields label > span {
    font-size: 9px !important;
    line-height: 1.1 !important;
}

#staff-section .staff-work-payment-save-btn {
    width: 70px !important;
    min-width: 70px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
}

#staff-section .staff-signup-person-with-time .staff-person-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 30px) !important;
    align-items: center !important;
    justify-content: end !important;
    width: 68px !important;
    min-width: 68px !important;
    gap: 6px !important;
}

#staff-section .staff-signup-person-with-time .staff-confirm-btn,
#staff-section .staff-signup-person-with-time .staff-delete-btn {
    width: 30px !important;
    height: 30px !important;
}

@media (max-width: 760px) {
    #staff-section .staff-signup-person-with-time {
        grid-template-columns: 30px minmax(0, 1fr) 68px !important;
        width: min(100%, 520px) !important;
        max-width: 520px !important;
    }

    #staff-section .staff-signup-person-with-time .staff-person-main {
        max-width: none !important;
    }

    #staff-section .staff-work-payment-form {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: center !important;
        width: min(100%, 330px) !important;
        min-width: 0 !important;
    }
}

@media (max-width: 430px) {
    #staff-section .staff-signup-person-with-time {
        width: 100% !important;
        padding: 10px !important;
    }

    #staff-section .staff-work-payment-form {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 280px !important;
    }

    #staff-section .staff-work-time-fields {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #staff-section .staff-work-payment-save-btn {
        width: 100% !important;
    }
}


/* =========================================================
   ROUND 8 — РОЗШИРЕНИЙ РЯДОК ПРАЦІВНИКА ДЛЯ ДОВГИХ ПІБ
   ========================================================= */

#staff-section .staff-signup-list {
    align-items: stretch !important;
}

#staff-section .staff-signup-person-with-time {
    grid-template-columns:
        34px
        minmax(250px, 1fr)
        390px
        76px !important;
    width: min(100%, 940px) !important;
    max-width: 940px !important;
    min-height: 86px !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    margin: 0 auto !important;
}

#staff-section .staff-signup-person-with-time .staff-person-main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-right: 4px !important;
}

#staff-section .staff-signup-person-with-time .staff-person-name {
    font-size: 15px !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

#staff-section .staff-signup-person-with-time .staff-person-date,
#staff-section .staff-signup-person-with-time .staff-person-status-text {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

#staff-section .staff-work-payment-form {
    grid-template-columns: 180px 96px 90px !important;
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
}

#staff-section .staff-work-time-fields {
    grid-template-columns: repeat(2, 86px) !important;
    width: 180px !important;
    min-width: 180px !important;
}

#staff-section .staff-work-payment-form .staff-time-input,
#staff-section .staff-work-payment-form .staff-payment-input,
#staff-section .staff-work-payment-form input[type="text"],
#staff-section .staff-work-payment-form input[type="number"] {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 13px !important;
}

#staff-section .staff-work-payment-save-btn {
    width: 90px !important;
    min-width: 90px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 12px !important;
}

#staff-section .staff-signup-person-with-time .staff-person-actions {
    width: 76px !important;
    min-width: 76px !important;
    grid-template-columns: repeat(2, 34px) !important;
    gap: 8px !important;
}

#staff-section .staff-signup-person-with-time .staff-confirm-btn,
#staff-section .staff-signup-person-with-time .staff-delete-btn {
    width: 34px !important;
    height: 34px !important;
}

@media (max-width: 1080px) {
    #staff-section .staff-signup-person-with-time {
        grid-template-columns:
            34px
            minmax(210px, 1fr)
            370px
            76px !important;
        width: 100% !important;
        max-width: none !important;
    }

    #staff-section .staff-work-payment-form {
        grid-template-columns: 170px 92px 84px !important;
        width: 370px !important;
        min-width: 370px !important;
        max-width: 370px !important;
    }

    #staff-section .staff-work-time-fields {
        grid-template-columns: repeat(2, 81px) !important;
        width: 170px !important;
        min-width: 170px !important;
    }

    #staff-section .staff-work-payment-save-btn {
        width: 84px !important;
        min-width: 84px !important;
    }
}

@media (max-width: 850px) {
    #staff-section .staff-signup-person-with-time {
        grid-template-columns: 34px minmax(0, 1fr) 76px !important;
        width: 100% !important;
    }

    #staff-section .staff-work-payment-form {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: center !important;
        width: min(100%, 430px) !important;
        min-width: 0 !important;
        max-width: 430px !important;
        grid-template-columns: minmax(170px, 1fr) 96px 90px !important;
    }

    #staff-section .staff-work-time-fields {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(78px, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    #staff-section .staff-work-payment-form {
        grid-template-columns: 1fr !important;
        max-width: 320px !important;
    }

    #staff-section .staff-work-payment-save-btn {
        width: 100% !important;
    }
}


/* =========================================================
   ROUND 9 — ШИРОКА БІЛА ФОРМА ЧАСУ/ОПЛАТИ БЕЗ НАКЛАДАНЬ
   ========================================================= */

#staff-section .staff-signup-person-with-time {
    grid-template-columns:
        36px
        minmax(300px, 1fr)
        minmax(620px, 680px)
        92px !important;
    width: min(100%, 1280px) !important;
    max-width: 1280px !important;
    min-height: 94px !important;
    padding: 14px 16px !important;
    gap: 16px !important;
    align-items: center !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#staff-section .staff-work-payment-form {
    width: 680px !important;
    min-width: 680px !important;
    max-width: 680px !important;
    min-height: 74px !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    grid-template-columns: 300px 145px 145px !important;
    align-items: end !important;
    overflow: visible !important;
    justify-self: stretch !important;
}

#staff-section .staff-work-time-fields {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    grid-template-columns: repeat(2, 142px) !important;
    gap: 12px !important;
}

#staff-section .staff-work-time-field,
#staff-section .staff-payment-amount-label {
    min-width: 0 !important;
}

#staff-section .staff-work-payment-form .staff-time-input,
#staff-section .staff-work-payment-form .staff-payment-input,
#staff-section .staff-work-payment-form input[type="text"],
#staff-section .staff-work-payment-form input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
}

#staff-section .staff-work-payment-save-btn {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 8px 14px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
}

#staff-section .staff-signup-person-with-time .staff-person-main {
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
}

#staff-section .staff-signup-person-with-time .staff-person-name {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

#staff-section .staff-signup-person-with-time .staff-person-actions {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 40px) !important;
    gap: 12px !important;
    justify-content: center !important;
}

#staff-section .staff-signup-person-with-time .staff-confirm-btn,
#staff-section .staff-signup-person-with-time .staff-delete-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

@media (max-width: 1180px) {
    #staff-section .staff-signup-person-with-time {
        grid-template-columns:
            36px
            minmax(260px, 1fr)
            minmax(560px, 620px)
            88px !important;
        max-width: none !important;
        width: 100% !important;
        gap: 12px !important;
    }

    #staff-section .staff-work-payment-form {
        width: 620px !important;
        min-width: 620px !important;
        max-width: 620px !important;
        grid-template-columns: 270px 130px 130px !important;
    }

    #staff-section .staff-work-time-fields {
        width: 270px !important;
        min-width: 270px !important;
        max-width: 270px !important;
        grid-template-columns: repeat(2, 129px) !important;
    }

    #staff-section .staff-work-payment-save-btn {
        width: 130px !important;
        min-width: 130px !important;
        max-width: 130px !important;
    }
}

@media (max-width: 980px) {
    #staff-section .staff-signup-person-with-time {
        grid-template-columns: 36px minmax(0, 1fr) 92px !important;
        width: 100% !important;
    }

    #staff-section .staff-work-payment-form {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: center !important;
        width: min(100%, 680px) !important;
        min-width: 0 !important;
        max-width: 680px !important;
        grid-template-columns: minmax(260px, 1fr) 145px 145px !important;
    }

    #staff-section .staff-work-time-fields {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    #staff-section .staff-work-payment-form {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 360px !important;
    }

    #staff-section .staff-work-payment-save-btn {
        width: 100% !important;
        max-width: none !important;
    }
}


/* =========================================================
   ROUND 10 — ЩЕ ШИРША ФОРМА ЧАСУ/ОПЛАТИ, БЕЗ НАКЛАДАНЬ
   ========================================================= */

#staff-section .staff-signup-person-with-time {
    display: grid !important;
    grid-template-columns:
        42px
        minmax(360px, 1fr)
        minmax(780px, 920px)
        104px !important;
    width: 100% !important;
    max-width: 1500px !important;
    min-height: 110px !important;
    padding: 18px 20px !important;
    gap: 20px !important;
    align-items: center !important;
    justify-content: center !important;
}

#staff-section .staff-work-payment-form {
    width: 920px !important;
    min-width: 820px !important;
    max-width: 920px !important;
    min-height: 82px !important;
    padding: 14px 18px !important;
    display: grid !important;
    grid-template-columns: 390px 180px 180px !important;
    gap: 16px !important;
    align-items: end !important;
    overflow: visible !important;
}

#staff-section .staff-work-time-fields {
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;
    display: grid !important;
    grid-template-columns: 185px 185px !important;
    gap: 14px !important;
}

#staff-section .staff-work-payment-form .staff-time-input,
#staff-section .staff-work-payment-form .staff-payment-input,
#staff-section .staff-work-payment-form input[type="text"],
#staff-section .staff-work-payment-form input[type="number"] {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 17px !important;
    padding: 8px 14px !important;
}

#staff-section .staff-work-payment-save-btn {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    height: 48px !important;
    min-height: 48px !important;
    font-size: 16px !important;
}

#staff-section .staff-signup-person-with-time .staff-person-main {
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
}

#staff-section .staff-signup-person-with-time .staff-person-name {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
}

#staff-section .staff-signup-person-with-time .staff-person-actions {
    width: 104px !important;
    min-width: 104px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

@media (max-width: 1280px) {
    #staff-section .staff-signup-person-with-time {
        grid-template-columns: 42px minmax(260px, 1fr) minmax(720px, 820px) 104px !important;
    }

    #staff-section .staff-work-payment-form {
        width: 820px !important;
        min-width: 720px !important;
        max-width: 820px !important;
        grid-template-columns: 330px 160px 160px !important;
    }

    #staff-section .staff-work-time-fields {
        width: 330px !important;
        min-width: 330px !important;
        max-width: 330px !important;
        grid-template-columns: 158px 158px !important;
    }

    #staff-section .staff-work-payment-save-btn {
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
    }
}

@media (max-width: 980px) {
    #staff-section .staff-signup-person-with-time {
        grid-template-columns: 42px minmax(0, 1fr) 104px !important;
    }

    #staff-section .staff-work-payment-form {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: minmax(260px, 1fr) minmax(140px, 170px) minmax(130px, 160px) !important;
    }

    #staff-section .staff-work-time-fields {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    }
}

/* Збільшена висота фото локації */
.location-photo {
    height: 300px;
}

/* Повне ПІБ у списку персоналу без обрізання */
.staff-name-list {
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(100%, 340px), 1fr)
    );
}

.staff-name-list-item {
    align-items: flex-start;
    min-height: 50px;
    height: auto;
}

.staff-name-list-text {
    flex: 1;
    min-width: 0;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.35;
}

.staff-name-list-arrow {
    flex-shrink: 0;
}

/* Компактна картка сервіс-менеджера */
.service-manager-signup-card {
    width: fit-content;
    min-width: 300px;
    max-width: 100%;
    align-self: flex-start;
    padding: 10px 12px;
    gap: 18px;
}

.service-manager-signup-card .staff-person-main {
    flex: 0 1 auto;
}

.service-manager-signup-card .staff-person-name {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.service-manager-signup-card .staff-person-actions {
    flex-shrink: 0;
}

/* Сервіс-менеджери зверху та по центру */
.staff-role-card:has(.service-manager-signup-card) {
    order: -100;
    grid-column: 1 / -1;
    width: min(100%, 460px);
    justify-self: center;
    padding: 16px;
}

.staff-role-card:has(.service-manager-signup-card) .staff-role-header {
    align-items: center;
    margin-bottom: 12px;
}

.staff-role-card:has(.service-manager-signup-card) .staff-signup-list {
    align-items: center;
}

.staff-role-card:has(.service-manager-signup-card)
.service-manager-signup-card {
    width: min(100%, 340px);
    min-width: 0;
    align-self: center;
}

/* Сервіс-менеджер у картці персоналу для працівників */
.staff-choice-service-managers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.staff-choice-service-manager-name {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 7px 12px;
    border: 1px solid #b9d8c1;
    border-radius: 999px;
    background: #eaf6ed;
    color: #245f3a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.staff-choice-service-manager-name::before {
    content: "Сервіс-менеджер:";
    margin-right: 6px;
    color: #5d7765;
    font-size: 12px;
    font-weight: 600;
}

/* =========================================================
   ORDER DETAIL — ДОДАТИ В КІНЕЦЬ app.css
   ========================================================= */

/* Картки з інформацією про захід */
.order-overview-card {
    padding: 22px !important;
    overflow: hidden;
}

.order-overview-heading {
    margin-bottom: 18px !important;
}

.order-overview-heading h2 {
    margin-bottom: 4px !important;
}

.order-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.order-info-card {
    min-width: 0;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(28, 66, 43, 0.05);
}

.order-info-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.order-info-card-title h3 {
    margin: 0;
    color: #1f2933;
    font-size: 18px;
    font-weight: 900;
}

.order-info-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    background: #e4f3e8;
    color: #1f6b3c;
    font-size: 12px;
    font-weight: 900;
}

.order-info-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.order-info-list > div {
    display: grid;
    grid-template-columns: minmax(105px, 0.42fr) minmax(0, 1fr);
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid #edf2ee;
}

.order-info-list > div:first-child {
    padding-top: 0;
    border-top: 0;
}

.order-info-list dt {
    color: #718078;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.4;
    text-transform: uppercase;
}

.order-info-list dd {
    min-width: 0;
    margin: 0;
    color: #26372c;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Початковий статус рахунку «—» */
#invoice-status-select:not(.invoice-badge-needed):not(.invoice-badge-prepayment_only):not(.invoice-badge-paid) {
    background: #f0f3f1 !important;
    color: #607065 !important;
    border-color: #d7e2da !important;
}

/* Персонал: стабільні повноширинні блоки */
#staff-section .staff-requirements-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
}

#staff-section .staff-role-card {
    min-width: 0 !important;
    width: 100% !important;
    padding: 18px !important;
    overflow: hidden !important;
}

#staff-section .staff-signup-person-with-time {
    display: grid !important;
    grid-template-columns:
        38px
        minmax(190px, 1fr)
        minmax(520px, 2fr)
        92px !important;
    grid-template-areas: "icon main form actions" !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 14px !important;
    gap: 14px !important;
    align-items: center !important;
    justify-content: stretch !important;
}

#staff-section .staff-signup-person-with-time .staff-confirm-icon-box {
    grid-area: icon !important;
}

#staff-section .staff-signup-person-with-time .staff-person-main {
    grid-area: main !important;
    min-width: 0 !important;
}

#staff-section .staff-signup-person-with-time .staff-work-payment-form {
    grid-area: form !important;
}

#staff-section .staff-signup-person-with-time .staff-person-actions {
    grid-area: actions !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

#staff-section .staff-work-payment-form {
    display: grid !important;
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(115px, 130px)
        minmax(120px, 145px)
        auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 10px !important;
    gap: 10px !important;
    align-items: end !important;
    overflow: visible !important;
}

#staff-section .staff-work-time-fields {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

#staff-section .staff-work-time-fields > label,
#staff-section .staff-clothing-size-field,
#staff-section .staff-payment-field {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#staff-section .staff-work-payment-title {
    display: block;
    color: #607065 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
}

#staff-section .staff-time-range-combined,
#staff-section .staff-clothing-size-input,
#staff-section .staff-payment-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid #cfdcd3 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #1f2933 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    outline: none !important;
}

#staff-section .staff-time-range-combined:focus,
#staff-section .staff-clothing-size-input:focus,
#staff-section .staff-payment-input:focus {
    border-color: #2f7d4e !important;
    box-shadow: 0 0 0 3px rgba(47, 125, 78, 0.12) !important;
}

#staff-section .staff-work-payment-save-btn {
    width: auto !important;
    min-width: 105px !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
}

/* Коментар між адміністраторськими та виконавчими файлами */
.order-comment-section {
    padding: 20px;
    background:
        linear-gradient(135deg, #f8fbf8 0%, #eef7f0 100%);
    border: 1px solid #cfe1d4;
    border-radius: 18px;
}

.order-comment-header {
    margin-bottom: 14px;
}

.order-comment-header h4 {
    margin: 0 0 5px;
    color: #1f2933;
    font-size: 19px;
    font-weight: 900;
}

.order-comment-header p {
    margin: 0;
    color: #607065;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.order-comment-form {
    display: grid;
    gap: 12px;
}

.order-comment-input {
    min-height: 120px !important;
    resize: vertical;
}

.order-comment-save-btn {
    justify-self: end;
}

.order-comment-readonly {
    min-height: 80px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #d7e2da;
    border-radius: 14px;
    color: #344238;
    font-size: 14px;
    line-height: 1.55;
}

/* Перетягування файлів */
.file-drop-zone {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 112px;
    padding: 18px;
    background: #f8fbf8;
    border: 2px dashed #b8cfbe;
    border-radius: 16px;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.file-drop-zone:hover,
.file-drop-zone.is-dragover {
    background: #edf7ef;
    border-color: #2f7d4e;
}

.file-drop-zone.is-dragover {
    transform: scale(1.01);
}

.file-drop-zone.has-files {
    border-style: solid;
    border-color: #7dbc8a;
    background: #eef8f1;
}

.file-drop-zone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #2f7d4e;
    color: #ffffff;
    font-size: 28px;
    font-weight: 500;
}

.file-drop-zone-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.file-drop-zone-copy strong {
    color: #1f2933;
    font-size: 15px;
    font-weight: 900;
}

.file-drop-zone-copy span {
    color: #607065;
    font-size: 13px;
    font-weight: 700;
}

.file-drop-zone-selection {
    grid-column: 1 / -1;
    min-width: 0;
    padding-top: 10px;
    border-top: 1px solid #dce8df;
    color: #456050;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.file-drop-zone input[type="file"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

/* Рівно п’ять виконавчих файлів на широкому екрані */
.executive-document-cards-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
}

.executive-document-cards-grid .document-slot-card {
    min-width: 0 !important;
    min-height: 220px !important;
}

.executive-document-cards-grid .file-preview-row {
    min-width: 0 !important;
    align-items: flex-start !important;
}

.executive-document-cards-grid .document-file-name {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.executive-document-cards-grid .document-slot-actions {
    width: 100%;
}

.executive-document-cards-grid .document-link,
.executive-document-cards-grid .secondary-small-btn {
    width: 100% !important;
    white-space: normal !important;
    text-align: center;
}

/* Адаптивність */
@media (max-width: 1400px) {
    .executive-document-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1100px) {
    .order-overview-grid {
        grid-template-columns: 1fr;
    }

    #staff-section .staff-signup-person-with-time {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            92px !important;
        grid-template-areas:
            "icon main actions"
            "form form form" !important;
    }

    #staff-section .staff-work-payment-form {
        grid-template-columns:
            minmax(180px, 1fr)
            minmax(110px, 130px)
            minmax(120px, 145px)
            auto !important;
    }
}

@media (max-width: 820px) {
    .executive-document-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #staff-section .staff-work-payment-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #staff-section .staff-work-payment-save-btn {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (max-width: 560px) {
    .order-info-list > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .executive-document-cards-grid {
        grid-template-columns: 1fr !important;
    }

    #staff-section .staff-signup-person-with-time {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        grid-template-areas:
            "icon main"
            "form form"
            "actions actions" !important;
    }

    #staff-section .staff-signup-person-with-time .staff-person-actions {
        justify-content: flex-end !important;
    }

    #staff-section .staff-work-payment-form {
        grid-template-columns: 1fr !important;
    }

    .file-drop-zone {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .file-drop-zone-icon {
        justify-self: center;
    }

    .order-comment-save-btn {
        width: 100%;
        justify-self: stretch;
    }
}

/* =========================================================
   СЕРВІС-МЕНЕДЖЕР У БЛОЦІ ПЕРСОНАЛУ
   ДОДАТИ В САМИЙ КІНЕЦЬ app.css
   ========================================================= */

#staff-section .staff-role-card:has(.service-manager-signup-card) {
    padding-bottom: 18px !important;
}

#staff-section .staff-role-card:has(.service-manager-signup-card)
.staff-signup-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 2px !important;
}

#staff-section .service-manager-signup-card {
    width: min(560px, 100%) !important;
    min-height: 82px !important;
    margin: 0 auto !important;
    padding: 14px 16px !important;
    border: 1px solid #b9dfc4 !important;
    border-radius: 16px !important;
    background: #eef8f1 !important;
    box-shadow: 0 10px 24px rgba(47, 125, 78, 0.10) !important;
}

#staff-section .service-manager-signup-card .staff-person-main {
    align-items: center !important;
    text-align: center !important;
    gap: 5px !important;
}

#staff-section .service-manager-signup-card .staff-person-name {
    font-size: 16px !important;
    line-height: 1.25 !important;
}

#staff-section .service-manager-signup-card .staff-person-date {
    white-space: normal !important;
    text-align: center !important;
}

#staff-section .service-manager-signup-card .staff-person-actions {
    flex: 0 0 auto !important;
}

@media (max-width: 620px) {
    #staff-section .service-manager-signup-card {
        width: 100% !important;
    }

    #staff-section .service-manager-signup-card .staff-person-main {
        align-items: flex-start !important;
        text-align: left !important;
    }

    #staff-section .service-manager-signup-card .staff-person-date {
        text-align: left !important;
    }
}

/* =========================================================
   СЕРВІС-МЕНЕДЖЕР — КОМПАКТНИЙ ГОРИЗОНТАЛЬНИЙ БЛОК
   ДОДАТИ В САМИЙ КІНЕЦЬ app.css
   ========================================================= */

#staff-section .staff-role-card:has(.service-manager-signup-card) {
    display: grid !important;
    grid-template-columns: minmax(240px, 0.8fr) minmax(360px, 1.4fr) !important;
    align-items: center !important;
    gap: 22px !important;
    min-height: 0 !important;
    padding: 18px 20px !important;
}

#staff-section .staff-role-card:has(.service-manager-signup-card)
.staff-role-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 0 !important;
    min-width: 0 !important;
}

#staff-section .staff-role-card:has(.service-manager-signup-card)
.staff-role-header > div {
    min-width: 0 !important;
}

#staff-section .staff-role-card:has(.service-manager-signup-card)
.staff-role-header h4 {
    margin: 0 0 4px !important;
}

#staff-section .staff-role-card:has(.service-manager-signup-card)
.staff-role-header p {
    margin: 0 !important;
}

#staff-section .staff-role-card:has(.service-manager-signup-card)
.staff-signup-list {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#staff-section .service-manager-signup-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #b9dfc4 !important;
    border-radius: 15px !important;
    background: #eef8f1 !important;
    box-shadow: none !important;
}

#staff-section .service-manager-signup-card .staff-person-main {
    align-items: flex-start !important;
    text-align: left !important;
    gap: 4px !important;
}

#staff-section .service-manager-signup-card .staff-person-name {
    font-size: 16px !important;
    line-height: 1.25 !important;
}

#staff-section .service-manager-signup-card .staff-person-date {
    white-space: normal !important;
    text-align: left !important;
}

#staff-section .service-manager-signup-card .staff-person-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    #staff-section .staff-role-card:has(.service-manager-signup-card) {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

@media (max-width: 560px) {
    #staff-section .staff-role-card:has(.service-manager-signup-card)
    .staff-role-header {
        align-items: flex-start !important;
    }

    #staff-section .service-manager-signup-card {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
}

/* =========================================================
   КОМПАНІЯ — ВІДСТУПИ ПОШУКУ, ФІЛЬТРА ТА КАРТОК
   ДОДАТИ В САМИЙ КІНЕЦЬ app.css
   ========================================================= */

.company-customer-search-bar,
.company-invoice-filter-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin: 18px 0 !important;
    padding: 0 !important;
}

.company-customer-search-field {
    display: flex !important;
    align-items: stretch !important;
    gap: 10px !important;
    flex: 1 1 520px !important;
    min-width: 0 !important;
}

.company-customer-search-field .customers-search-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 260px !important;
    margin: 0 !important;
}

.company-customer-search-field .customers-search-btn,
.company-customer-search-bar .customers-reset-btn,
.company-invoice-filter-row .customers-reset-btn {
    min-height: 44px !important;
    margin: 0 !important;
    align-self: stretch !important;
}

.company-customer-search-bar .customers-reset-btn {
    flex: 0 0 auto !important;
}

.company-invoice-filter-row {
    justify-content: flex-start !important;
    padding: 14px 16px !important;
    background: #ffffff !important;
    border: 1px solid #d7e2da !important;
    border-radius: 14px !important;
}

.company-invoice-filter-row label {
    margin: 0 !important;
    color: #344238 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.company-invoice-filter-row .calendar-order-filter-select {
    min-width: 220px !important;
    min-height: 44px !important;
    margin: 0 !important;
}

.company-customer-search-bar + .simple-list,
.company-invoice-filter-row + .simple-list {
    margin-top: 16px !important;
}

.customer-section .simple-list {
    gap: 12px !important;
}

.customer-section .simple-list-item {
    margin: 0 !important;
    padding: 16px !important;
}

.customer-section > .section-header {
    margin-bottom: 0 !important;
}

.customer-section > .section-header + .company-customer-search-bar,
.customer-section > .section-header + .company-invoice-filter-row {
    margin-top: 18px !important;
}

.customer-section .empty-inner {
    margin-top: 16px !important;
}

@media (max-width: 760px) {
    .company-customer-search-bar,
    .company-invoice-filter-row {
        align-items: stretch !important;
    }

    .company-customer-search-field {
        flex-basis: 100% !important;
    }

    .company-customer-search-field .customers-search-input {
        min-width: 0 !important;
    }

    .company-customer-search-bar .customers-reset-btn,
    .company-invoice-filter-row .customers-reset-btn,
    .company-invoice-filter-row .calendar-order-filter-select {
        width: 100% !important;
    }

    .company-invoice-filter-row label {
        width: 100% !important;
    }
}

/* =========================================================
   МОБІЛЬНИЙ КАЛЕНДАР — НЕ СТИСКАТИ 7 ДНІВ У ВУЗЬКИЙ ЕКРАН
   ДОДАТИ В САМИЙ КІНЕЦЬ app.css
   ========================================================= */

@media (max-width: 900px) {
    /* Календар прокручується горизонтально, а не стискає слова по літерах */
    .calendar-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-gutter: stable;
        padding-bottom: 8px;
    }

    .calendar-weekdays,
    .calendar-grid {
        width: max-content !important;
        min-width: 1050px !important;
        grid-template-columns: repeat(7, minmax(150px, 1fr)) !important;
    }

    .calendar-weekdays {
        position: sticky;
        top: 0;
        z-index: 3;
    }

    .calendar-weekdays > div {
        width: 150px !important;
        min-width: 150px !important;
        padding: 10px 8px !important;
        font-size: 13px !important;
    }

    .calendar-day {
        width: 150px !important;
        min-width: 150px !important;
        min-height: 118px !important;
        padding: 8px !important;
        overflow: hidden !important;
    }

    .calendar-day-number {
        margin-bottom: 7px !important;
        font-size: 14px !important;
        line-height: 1.1 !important;
    }

    .calendar-orders {
        width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    .calendar-order-item,
    .calendar-order-item-staff {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 8px !important;
        gap: 6px !important;
        overflow: hidden !important;
        border-radius: 10px !important;
    }

    .calendar-order-title,
    .calendar-order-item-staff .calendar-order-title {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        overflow: hidden !important;
        text-overflow: clip !important;
    }

    .calendar-order-meta-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 5px !important;
        margin: 0 !important;
    }

    .calendar-order-invoice-status {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 5px 7px !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        box-sizing: border-box !important;
    }

    .calendar-order-guests,
    .calendar-order-status {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Верх календаря на телефоні */
    .calendar-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }

    .calendar-header h1 {
        font-size: 26px !important;
        line-height: 1.15 !important;
    }

    .calendar-header .add-order-btn {
        width: 100% !important;
    }

    .calendar-toolbar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .calendar-toolbar > .secondary-btn {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 8px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .calendar-month-form {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 94px !important;
        width: 100% !important;
        gap: 8px !important;
        order: -1 !important;
    }

    .calendar-month-select,
    .calendar-year-input {
        width: 100% !important;
        min-width: 0 !important;
    }

    .calendar-month-form .secondary-btn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .calendar-legend-filter-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    .calendar-legend-filter-row .calendar-status-legend {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        overflow-x: auto !important;
        padding-bottom: 5px !important;
        -webkit-overflow-scrolling: touch;
    }

    .calendar-legend-filter-row .calendar-legend-item {
        flex: 0 0 auto !important;
    }

    .calendar-order-filter-form {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .calendar-order-filter-field {
        display: grid !important;
        gap: 5px !important;
        min-width: 0 !important;
    }

    .calendar-order-filter-field label {
        white-space: normal !important;
    }

    .calendar-order-filter-select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .calendar-order-filter-reset {
        align-self: end !important;
    }
}

@media (max-width: 560px) {
    .page {
        padding: 10px !important;
    }

    .calendar-card {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .calendar-weekdays,
    .calendar-grid {
        min-width: 910px !important;
        grid-template-columns: repeat(7, minmax(130px, 1fr)) !important;
    }

    .calendar-weekdays > div,
    .calendar-day {
        width: 130px !important;
        min-width: 130px !important;
    }

    .calendar-day {
        min-height: 108px !important;
        padding: 7px !important;
    }

    .calendar-order-item,
    .calendar-order-item-staff {
        padding: 7px !important;
    }

    .calendar-order-title,
    .calendar-order-item-staff .calendar-order-title {
        font-size: 11px !important;
        line-height: 1.28 !important;
    }

    .calendar-order-invoice-status {
        padding: 5px 6px !important;
        font-size: 9px !important;
    }

    .calendar-order-filter-form {
        grid-template-columns: 1fr !important;
    }

    .calendar-order-filter-reset {
        width: 100% !important;
        min-height: 40px !important;
        border-radius: 12px !important;
    }
}

/* =========================================================
   МОБІЛЬНА ШАПКА + АЛЬБОМНА ОРІЄНТАЦІЯ
   ДОДАТИ В САМИЙ КІНЕЦЬ app.css
   ========================================================= */

/* Прибираємо горизонтальне прокручування всієї сторінки */
html,
body.app-body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

body.app-body.mobile-nav-open {
    overflow: hidden !important;
}

.topbar,
.topbar-inner,
.topbar-left,
.page,
.calendar-card {
    max-width: 100%;
    min-width: 0;
}

.mobile-nav-toggle {
    display: none;
}

/* =========================================================
   ТЕЛЕФОН І ПЛАНШЕТ
   ========================================================= */

@media (max-width: 1000px) {
    .topbar {
        position: relative !important;
        z-index: 1000 !important;
        width: 100% !important;
        overflow: visible !important;
        padding:
            calc(10px + env(safe-area-inset-top))
            calc(12px + env(safe-area-inset-right))
            10px
            calc(12px + env(safe-area-inset-left)) !important;
    }

    .topbar-inner {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .topbar-left {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .brand,
    .brand-home-link {
        flex: 0 0 auto !important;
        padding: 6px 9px !important;
        border-radius: 13px !important;
    }

    .brand-logo {
        width: auto !important;
        height: 31px !important;
        max-width: 118px !important;
    }

    .user-greeting {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 180px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        box-shadow: none !important;
    }

    .user-greeting::before {
        display: none !important;
    }

    /* Нормальна кнопка меню замість білого прямокутника */
    .mobile-nav-toggle {
        position: relative !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        border-radius: 13px !important;
        background: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        cursor: pointer !important;
        z-index: 1002 !important;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-nav-toggle span {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        transition:
            transform 0.18s ease,
            opacity 0.18s ease !important;
    }

    .mobile-nav-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-nav-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-nav-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    /* Меню більше не прокручується горизонтально разом із шапкою */
    .nav {
        position: fixed !important;
        top: calc(72px + env(safe-area-inset-top)) !important;
        right: calc(12px + env(safe-area-inset-right)) !important;
        left: auto !important;
        bottom: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: 7px !important;
        width: min(330px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(
            100dvh
            - 92px
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
        ) !important;
        padding: 12px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 18px !important;
        background: #0a3827 !important;
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-10px) scale(0.98) !important;
        transform-origin: top right !important;
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            visibility 0.18s ease !important;
        z-index: 1001 !important;
    }

    .nav.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    .nav-link,
    .logout-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 10px 13px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .nav-link.active {
        background: #ffffff !important;
        color: #1f4d36 !important;
    }

    .logout-form {
        width: 100% !important;
    }

    .logout-btn {
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.10) !important;
    }

    .nav-notification-link {
        justify-content: space-between !important;
    }

    .page {
        width: 100% !important;
        min-width: 0 !important;
        padding:
            12px
            calc(10px + env(safe-area-inset-right))
            calc(12px + env(safe-area-inset-bottom))
            calc(10px + env(safe-area-inset-left)) !important;
        overflow: visible !important;
    }

    .calendar-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 16px !important;
        border-radius: 18px !important;
        overflow: visible !important;
    }

    /* Усе, що справді ширше екрана, прокручується лише у своєму блоці */
    .calendar-table,
    .excel-table-wrapper,
    .table-scroll,
    .responsive-table-wrapper {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
}

/* =========================================================
   ВУЗЬКИЙ ПОРТРЕТНИЙ ЕКРАН
   ========================================================= */

@media (max-width: 560px) and (orientation: portrait) {
    .topbar {
        padding:
            calc(8px + env(safe-area-inset-top))
            calc(9px + env(safe-area-inset-right))
            8px
            calc(9px + env(safe-area-inset-left)) !important;
    }

    .topbar-inner {
        gap: 8px !important;
    }

    .brand-logo {
        height: 28px !important;
        max-width: 102px !important;
    }

    .user-greeting {
        max-width: 132px !important;
        padding: 7px 9px !important;
        font-size: 11px !important;
    }

    .mobile-nav-toggle {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
    }

    .nav {
        top: calc(66px + env(safe-area-inset-top)) !important;
        right: calc(9px + env(safe-area-inset-right)) !important;
        width: calc(
            100vw
            - 18px
            - env(safe-area-inset-left)
            - env(safe-area-inset-right)
        ) !important;
        max-width: none !important;
    }
}

/* =========================================================
   АЛЬБОМНА ОРІЄНТАЦІЯ ТЕЛЕФОНА
   ========================================================= */

@media
    (max-width: 1000px)
    and (orientation: landscape)
    and (max-height: 520px) {

    .topbar {
        padding:
            calc(6px + env(safe-area-inset-top))
            calc(10px + env(safe-area-inset-right))
            6px
            calc(10px + env(safe-area-inset-left)) !important;
    }

    .brand,
    .brand-home-link {
        padding: 5px 8px !important;
    }

    .brand-logo {
        height: 27px !important;
        max-width: 105px !important;
    }

    .user-greeting {
        max-width: 165px !important;
        padding: 7px 9px !important;
        font-size: 11px !important;
    }

    .mobile-nav-toggle {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
    }

    .nav {
        top: calc(56px + env(safe-area-inset-top)) !important;
        right: calc(10px + env(safe-area-inset-right)) !important;
        width: min(340px, 46vw) !important;
        max-height: calc(
            100dvh
            - 68px
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
        ) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 10px !important;
    }

    .nav-link,
    .logout-btn {
        min-height: 38px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    .logout-form {
        grid-column: 1 / -1 !important;
    }

    .page {
        padding:
            8px
            calc(10px + env(safe-area-inset-right))
            calc(8px + env(safe-area-inset-bottom))
            calc(10px + env(safe-area-inset-left)) !important;
    }

    .calendar-card {
        padding: 14px !important;
    }

    .calendar-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .calendar-header h1 {
        font-size: 24px !important;
    }

    .calendar-header .form-actions {
        width: auto !important;
        margin-top: 0 !important;
    }

    .calendar-toolbar {
        display: grid !important;
        grid-template-columns: auto minmax(280px, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .calendar-month-form {
        display: grid !important;
        grid-template-columns: minmax(120px, 1fr) 88px auto !important;
        width: 100% !important;
        gap: 7px !important;
    }

    .calendar-month-form .secondary-btn {
        grid-column: auto !important;
    }

    .calendar-legend-filter-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
    }

    .calendar-status-legend {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   ДЕСКТОП
   ========================================================= */

@media (min-width: 1001px) {
    .mobile-nav-toggle {
        display: none !important;
    }

    .nav {
        position: static !important;
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: visible !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* =========================================================
   КАЛЕНДАР У АЛЬБОМНІЙ ОРІЄНТАЦІЇ — КАРТКИ ЗАМОВЛЕНЬ
   ДОДАТИ В САМИЙ КІНЕЦЬ app.css
   ========================================================= */

@media
    (max-width: 1000px)
    and (orientation: landscape)
    and (max-height: 520px) {

    /* Даємо кожному дню достатню ширину */
    .calendar-table {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .calendar-weekdays,
    .calendar-grid {
        width: max-content !important;
        min-width: 1330px !important;
        grid-template-columns:
            repeat(7, minmax(190px, 190px)) !important;
    }

    .calendar-weekdays > div,
    .calendar-day {
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
    }

    .calendar-day {
        min-height: 150px !important;
        padding: 9px !important;
        overflow: hidden !important;
    }

    .calendar-orders {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Кожне замовлення займає окремий нормальний блок */
    .calendar-day .calendar-order-item,
    .calendar-day .calendar-order-item-staff {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 9px !important;
        gap: 7px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Забороняємо ламати ім’я та назву локації посеред слова */
    .calendar-day .calendar-order-title,
    .calendar-day .calendar-order-item-staff .calendar-order-title {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        overflow: visible !important;
    }

    .calendar-day .calendar-order-meta-row {
        position: static !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 5px !important;
        overflow: hidden !important;
    }

    /* Статус рахунку залишається всередині своєї картки */
    .calendar-day .calendar-order-invoice-status {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 5px 8px !important;
        box-sizing: border-box !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .calendar-day .calendar-order-guests,
    .calendar-day .calendar-order-status {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* =========================================================
   ПРІОРИТЕТНІСТЬ ПЕРСОНАЛУ
   ДОДАТИ В САМИЙ КІНЕЦЬ app.css
   ========================================================= */

.staff-priority-form-group {
    position: relative;
}

.staff-priority-select {
    cursor: pointer;
}

.staff-priority-preview {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    margin-top: 10px;
    padding: 8px 13px;
    border: 1px solid #dce7df;
    border-radius: 12px;
    background: #f8fbf9;
    color: #294838;
    box-sizing: border-box;
}

.staff-priority-preview-dot,
.staff-priority-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.92),
        0 0 0 4px rgba(35, 72, 52, 0.10);
}

.staff-priority-preview strong {
    font-size: 14px;
    line-height: 1.2;
}

.staff-priority-preview-green {
    border-color: #b9d9c4;
    background: #edf8f0;
}

.staff-priority-preview-yellow {
    border-color: #eadb8e;
    background: #fff9db;
}

.staff-priority-preview-orange {
    border-color: #efc292;
    background: #fff1e3;
}

.staff-priority-preview-red {
    border-color: #e8aaa4;
    background: #fff0ee;
}

.staff-priority-green,
.staff-priority-green .staff-priority-preview-dot,
.staff-priority-dot.staff-priority-green {
    background: #2f7d4e !important;
}

.staff-priority-yellow,
.staff-priority-yellow .staff-priority-preview-dot,
.staff-priority-dot.staff-priority-yellow {
    background: #e3c94d !important;
}

.staff-priority-orange,
.staff-priority-orange .staff-priority-preview-dot,
.staff-priority-dot.staff-priority-orange {
    background: #e67e22 !important;
}

.staff-priority-red,
.staff-priority-red .staff-priority-preview-dot,
.staff-priority-dot.staff-priority-red {
    background: #c0392b !important;
}

.staff-priority-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 12px;
}

.staff-priority-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #597064;
    font-size: 13px;
    line-height: 1.2;
}

.staff-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 27px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    box-sizing: border-box;
}

.staff-priority-badge.staff-priority-green {
    border-color: #9fc9ad;
    background: #e8f5ec !important;
    color: #1d6238;
}

.staff-priority-badge.staff-priority-yellow {
    border-color: #dfc95f;
    background: #fff6c8 !important;
    color: #77620b;
}

.staff-priority-badge.staff-priority-orange {
    border-color: #e7aa6a;
    background: #ffead5 !important;
    color: #9a4d0b;
}

.staff-priority-badge.staff-priority-red {
    border-color: #dc8d86;
    background: #ffe5e2 !important;
    color: #982d25;
}

.staff-priority-badge-under-photo {
    width: 100%;
    max-width: 190px;
    margin-top: 9px;
}

/* Поточне фото у формі редагування */
.staff-current-photo-box .staff-priority-badge {
    width: fit-content;
    max-width: 100%;
    margin-top: 9px;
}

/* Список персоналу */
.staff-name-list-item-with-photo {
    align-items: center;
    min-height: 88px;
}

.staff-directory-person {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.staff-directory-photo-wrap {
    display: flex;
    flex: 0 0 76px;
    flex-direction: column;
    align-items: center;
    width: 76px;
    min-width: 76px;
}

.staff-directory-photo,
.staff-directory-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 2px solid #ffffff;
    border-radius: 16px;
    background: #e8f1eb;
    box-shadow: 0 5px 14px rgba(23, 74, 47, 0.13);
    object-fit: cover;
    box-sizing: border-box;
}

.staff-directory-photo-placeholder {
    color: #2e6548;
    font-size: 17px;
    font-weight: 800;
}

.staff-directory-photo-wrap .staff-priority-badge {
    width: 76px;
    min-height: 22px;
    margin-top: 5px;
    padding: 3px 5px;
    font-size: 9px;
    line-height: 1.1;
}

/* Адміністративний профіль працівника */
.staff-profile-photo-column {
    align-items: center;
}

.staff-profile-photo-column .staff-priority-badge {
    width: 100%;
    max-width: 220px;
}

@media (max-width: 700px) {
    .staff-priority-legend {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .staff-priority-preview {
        width: 100%;
    }

    .staff-name-list-item-with-photo {
        min-height: 82px;
        padding: 10px;
    }

    .staff-directory-person {
        gap: 10px;
    }

    .staff-directory-photo-wrap {
        flex-basis: 68px;
        width: 68px;
        min-width: 68px;
    }

    .staff-directory-photo,
    .staff-directory-photo-placeholder {
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }

    .staff-directory-photo-wrap .staff-priority-badge {
        width: 68px;
        font-size: 8px;
    }
}

@media (max-width: 430px) {
    .staff-priority-legend {
        grid-template-columns: 1fr;
    }

    .staff-directory-photo-wrap {
        flex-basis: 62px;
        width: 62px;
        min-width: 62px;
    }

    .staff-directory-photo,
    .staff-directory-photo-placeholder {
        width: 48px;
        height: 48px;
    }

    .staff-directory-photo-wrap .staff-priority-badge {
        width: 62px;
        padding-right: 3px;
        padding-left: 3px;
    }
}

/* =========================================================
   ВИПРАВЛЕННЯ ПОЗНАЧКИ ПРІОРИТЕТНОСТІ ПІД ФОТО
   ДОДАТИ В САМИЙ КІНЕЦЬ app.css
   ========================================================= */

/* Фото і позначка завжди стоять вертикально */
.staff-profile-photo-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-width: 0 !important;
}

.staff-profile-photo-column .staff-profile-photo,
.staff-profile-photo-column .staff-profile-photo-placeholder {
    position: relative !important;
    display: flex !important;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
}

/* Позначка строго під фото */
.staff-profile-photo-column .staff-priority-badge-under-photo {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 220px !important;
    min-height: 32px !important;
    margin: 10px auto 0 !important;
    padding: 6px 12px !important;
    box-sizing: border-box !important;
}

/* Назву кольору не показуємо — колір видно по самій позначці */
.staff-priority-badge-under-photo {
    font-size: 0 !important;
    line-height: 0 !important;
}

.staff-priority-badge-under-photo::after {
    content: "Пріоритетність";
    display: block;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
}

/* У списку персоналу теж лишається тільки слово */
.staff-directory-photo-wrap .staff-priority-badge-under-photo {
    min-height: 24px !important;
    margin-top: 5px !important;
    padding: 4px 3px !important;
}

.staff-directory-photo-wrap .staff-priority-badge-under-photo::after {
    font-size: 8px;
    line-height: 1.05;
}

/* На телефоні позначка не виїжджає збоку */
@media (max-width: 700px) {
    .staff-profile-photo-column {
        width: 100% !important;
    }

    .staff-profile-photo-column .staff-priority-badge-under-photo {
        width: min(100%, 220px) !important;
    }
}

/* =========================================================
   ОСТАТОЧНЕ ВИПРАВЛЕННЯ ТЕКСТУ ПРІОРИТЕТНОСТІ
   ДОДАТИ В САМИЙ КІНЕЦЬ app.css
   ========================================================= */

/* Прибираємо старий текст із псевдоелемента */
.staff-priority-badge-under-photo::after {
    content: none !important;
    display: none !important;
}

/* Повертаємо звичайний текст із HTML */
.staff-priority-badge-under-photo {
    font-size: 10px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

/* У списку персоналу робимо мітку трохи ширшою */
.staff-directory-photo-wrap {
    flex-basis: 104px !important;
    width: 104px !important;
    min-width: 104px !important;
}

.staff-directory-photo-wrap .staff-priority-badge-under-photo {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    min-height: 24px !important;
    margin-top: 6px !important;
    padding: 4px 6px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
}

/* У профілі працівника */
.staff-profile-photo-column .staff-priority-badge-under-photo {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* Мобільна версія */
@media (max-width: 700px) {
    .staff-directory-photo-wrap {
        flex-basis: 94px !important;
        width: 94px !important;
        min-width: 94px !important;
    }

    .staff-directory-photo-wrap .staff-priority-badge-under-photo {
        width: 94px !important;
        min-width: 94px !important;
        max-width: 94px !important;
        font-size: 8px !important;
    }
}