:root {
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: #0f172a;
      background: #f8fafc;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.14), transparent 34%),
        radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.12), transparent 30%),
        #f8fafc;
    }

    button,
    input,
    select {
      font: inherit;
    }

    button {
      border: 0;
      border-radius: 14px;
      background: #0284c7;
      color: white;
      font-weight: 900;
      padding: 11px 15px;
      cursor: pointer;
    }

    button.secondary {
      background: #e2e8f0;
      color: #0f172a;
    }

    button.danger {
      background: #ef4444;
      color: white;
    }

    input {
      width: 100%;
      min-height: 42px;
      border: 1px solid #cbd5e1;
      border-radius: 14px;
      padding: 10px 12px;
      background: white;
      color: #0f172a;
    }

    label {
      display: block;
      font-size: 13px;
      font-weight: 800;
      color: #334155;
      margin-bottom: 6px;
    }

    .hidden {
      display: none !important;
    }

    .login-page {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 22px;
    }

    .login-card {
      width: min(440px, 100%);
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 26px;
      padding: 26px;
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
    }

    .badge {
      display: inline-flex;
      padding: 6px 10px;
      border-radius: 999px;
      background: #e0f2fe;
      color: #075985;
      font-weight: 900;
      font-size: 12px;
      margin-bottom: 12px;
    }

    h1,
    h2,
    h3 {
      margin: 0;
      color: #0f172a;
    }

    h1 {
      font-size: 34px;
      line-height: 1.05;
      margin-bottom: 8px;
    }

    h2 {
      font-size: 22px;
      margin-bottom: 10px;
    }

    p {
      color: #64748b;
      line-height: 1.55;
      margin: 8px 0;
    }

    .form-grid {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }

    .error {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 14px;
      background: #fee2e2;
      color: #991b1b;
      font-weight: 800;
      font-size: 13px;
    }

    .success {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 14px;
      background: #dcfce7;
      color: #166534;
      font-weight: 800;
      font-size: 13px;
    }

    .app-shell {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      padding: 12px 18px;
      background: rgba(255, 255, 255, 0.92);
      border-bottom: 1px solid #e5e7eb;
      backdrop-filter: blur(14px);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .brand-logo {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      background: linear-gradient(135deg, #0284c7, #22c55e);
      color: white;
      display: grid;
      place-items: center;
      font-weight: 1000;
    }

    .brand-title {
      font-weight: 1000;
      line-height: 1.05;
    }

    .brand-subtitle {
      font-size: 12px;
      color: #64748b;
      margin-top: 2px;
    }

    .profile-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
      align-items: center;
    }

    .profile-pill {
      padding: 7px 10px;
      border-radius: 999px;
      background: #f1f5f9;
      color: #334155;
      font-size: 12px;
      font-weight: 800;
      max-width: 280px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .layout {
      display: grid;
      grid-template-columns: 250px 1fr;
      gap: 18px;
      padding: 18px;
      max-width: 1500px;
      width: 100%;
      margin: 0 auto;
    }

    .sidebar {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 24px;
      padding: 12px;
      height: fit-content;
      position: sticky;
      top: 78px;
      box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
    }

    .nav {
      display: grid;
      gap: 7px;
    }

    .nav button {
      width: 100%;
      text-align: left;
      background: transparent;
      color: #334155;
      border-radius: 14px;
      padding: 11px 12px;
    }

    .nav button.active {
      background: #e0f2fe;
      color: #075985;
    }

    .content {
      min-width: 0;
    }

    .card {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 24px;
      padding: 18px;
      box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
      margin-bottom: 18px;
    }

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

    .stat-card {
      padding: 15px;
      border-radius: 18px;
      background: #f8fafc;
      border: 1px solid #e5e7eb;
    }

    .stat-value {
      font-size: 28px;
      font-weight: 1000;
      margin-bottom: 4px;
    }

    .stat-label {
      color: #64748b;
      font-size: 13px;
      font-weight: 800;
    }

    .table-wrap {
      overflow-x: auto;
      border: 1px solid #e5e7eb;
      border-radius: 18px;
      margin-top: 14px;
    }

    table {
      width: 100%;
      min-width: 760px;
      border-collapse: collapse;
      font-size: 14px;
    }

    th,
    td {
      text-align: left;
      padding: 11px 12px;
      border-bottom: 1px solid #e5e7eb;
      vertical-align: top;
    }

    th {
      background: #f8fafc;
      color: #334155;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    tr:last-child td {
      border-bottom: 0;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      padding: 4px 8px;
      border-radius: 999px;
      background: #f1f5f9;
      color: #334155;
      font-size: 12px;
      font-weight: 900;
      margin: 2px;
    }

    .pill.green {
      background: #dcfce7;
      color: #166534;
    }

    .pill.blue {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .pill.orange {
      background: #ffedd5;
      color: #9a3412;
    }

    .permission-groups {
      display: grid;
      gap: 14px;
      margin-top: 14px;
    }

    .permission-group {
      border: 1px solid #e5e7eb;
      border-radius: 18px;
      overflow: hidden;
      background: white;
    }

    .permission-group-head {
      padding: 11px 13px;
      background: #f8fafc;
      border-bottom: 1px solid #e5e7eb;
      font-weight: 1000;
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }

    .permission-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 12px;
    }

    .permission-item {
      padding: 10px;
      border-radius: 14px;
      background: #f8fafc;
      border: 1px solid #e5e7eb;
    }

    .permission-code {
      display: block;
      margin-top: 4px;
      color: #64748b;
      font-size: 11px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    @media (max-width: 900px) {
      .layout {
        grid-template-columns: 1fr;
        padding: 12px;
      }

      .sidebar {
        position: static;
      }

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

      .topbar {
        align-items: flex-start;
        display: grid;
      }

      .profile-strip {
        justify-content: flex-start;
      }

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

      .permission-list {
        grid-template-columns: 1fr;
      }
    }
  
    .actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      margin: 14px 0;
    }

    .form-panel {
      margin: 14px 0;
      padding: 16px;
      border-radius: 20px;
      background: #f8fafc;
      border: 1px solid #e5e7eb;
    }

    .form-two-col {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 14px;
    }

    .checkbox-row {
      display: flex;
      gap: 8px;
      align-items: center;
      font-weight: 800;
      color: #334155;
    }

    .checkbox-row input {
      width: auto;
      min-height: auto;
    }

    .checkbox-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 8px;
    }

    .checkbox-card {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      padding: 10px;
      border-radius: 14px;
      background: white;
      border: 1px solid #e5e7eb;
      font-size: 13px;
      line-height: 1.3;
    }

    .checkbox-card input {
      width: auto;
      min-height: auto;
      margin-top: 2px;
    }

    .login-fields-box {
      margin-top: 12px;
      padding: 12px;
      border-radius: 16px;
      background: white;
      border: 1px solid #e5e7eb;
    }

    @media (max-width: 900px) {
      .form-two-col,
      .checkbox-list {
        grid-template-columns: 1fr;
      }
    }

  
    textarea {
      width: 100%;
      min-height: 88px;
      border: 1px solid #cbd5e1;
      border-radius: 14px;
      padding: 10px 12px;
      background: white;
      color: #0f172a;
      resize: vertical;
      font: inherit;
    }

    .permission-checkbox-groups {
      display: grid;
      gap: 12px;
      margin-top: 10px;
    }

    .permission-checkbox-module {
      border: 1px solid #e5e7eb;
      border-radius: 18px;
      overflow: hidden;
      background: white;
    }

    .permission-checkbox-module-head {
      padding: 10px 12px;
      background: #f8fafc;
      border-bottom: 1px solid #e5e7eb;
      font-weight: 1000;
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }

    .permission-checkbox-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 12px;
    }

    @media (max-width: 900px) {
      .permission-checkbox-grid {
        grid-template-columns: 1fr;
      }
    }

  

    /* CLEAN_SCHEDULE_MODULE_V3_START */

    #cleanScheduleBox.clean-schedule-empty {
      display: block !important;
      min-height: 0 !important;
      border: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      text-align: initial !important;
      color: inherit !important;
    }

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

    .clean-schedule-toolbar {
      display: grid;
      grid-template-columns: repeat(4, minmax(180px, 1fr));
      gap: 12px;
      margin: 12px 0 16px;
    }

    .new-pdf-wrap {
      width: 100%;
      overflow: auto;
      border: 1px solid #000;
      background: #fff;
      max-height: calc(100vh - 245px);
    }

    .new-pdf-table {
      width: max-content;
      min-width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-family: "Times New Roman", Times, serif;
      font-size: 12px;
      color: #000;
      background: #fff;
    }

    .new-pdf-table td,
    .new-pdf-table th {
      border: 1px solid #000;
      padding: 1px 2px;
      height: 18px;
      min-width: 39px;
      max-width: 39px;
      text-align: center;
      vertical-align: middle;
      line-height: 1.05;
      box-sizing: border-box;
    }

    .new-pdf-left,
    .new-pdf-month,
    .new-pdf-name {
      min-width: 216px !important;
      max-width: 216px !important;
      width: 216px !important;
    }

    .new-pdf-title-row td {
      height: 20px;
      font-size: 15px;
      font-weight: 900;
      text-align: center;
      text-transform: uppercase;
    }

    .new-pdf-month {
      font-size: 22px;
      font-weight: 900;
      text-align: center !important;
      background: #f6e4cf;
    }

    .new-pdf-name {
      font-weight: 900;
      text-align: left !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-left: 8px !important;
    }

    .new-pdf-day {
      background: #fff;
      font-weight: 900;
    }

    .new-pdf-day-week,
    .new-pdf-day-num {
      display: block;
      color: #1d4ed8;
      line-height: 1;
      font-weight: 900;
    }

    .new-pdf-day.weekend .new-pdf-day-week,
    .new-pdf-day.weekend .new-pdf-day-num {
      color: #dc2626;
    }

    .new-color-therapist { background: #fff200; }
    .new-color-specialist { background: #cfe8ff; }
    .new-color-surgeon { background: #00e51f; }
    .new-color-anest { background: #20dce5; }
    .new-color-assistant { background: #f6c2b8; }
    .new-color-assistant-orit { background: #ff9800; }
    .new-color-admin { background: #ff7be5; }
    .new-color-manager { background: #cfe8ff; }

    .new-pdf-cell {
      cursor: pointer;
      position: relative;
      background: #fff;
    }

    .new-pdf-cell:hover {
      outline: 2px solid #0284c7;
      outline-offset: -2px;
      background: #eff6ff;
    }

    .new-pdf-cell.has-shift::after {
      content: "✎";
      position: absolute;
      right: 2px;
      top: 1px;
      font-size: 9px;
      color: #0284c7;
      opacity: 0;
      line-height: 1;
    }

    .new-pdf-cell.has-shift:hover::after {
      opacity: 1;
    }

    .new-pdf-shift {
      display: inline-block;
      min-width: 28px;
      padding: 1px 2px;
      font-family: "Times New Roman", Times, serif;
      font-size: 11px;
      line-height: 1.05;
      font-weight: 900;
      border: 0;
      border-radius: 0;
      color: #000;
      pointer-events: auto;
      cursor: pointer;
    }

    .new-pdf-shift.code-l { background: #f5e1d2; }
    .new-pdf-shift.code-s { background: #f5c6c6; }
    .new-pdf-shift.code-spr { background: #f3c4d8; }
    .new-pdf-shift.code-b1 { background: #f5df8b; }
    .new-pdf-shift.code-b2 { background: #f5b5b5; }
    .new-pdf-shift.code-b2s { background: #f2a6a6; }
    .new-pdf-shift.code-short { background: #fff59d; }
    .new-pdf-shift.code-x { background: #ffffff; }

    .new-manager-title td {
      background: #cfe8ff !important;
      color: #000 !important;
      font-family: "Times New Roman", Times, serif !important;
      font-size: 18px !important;
      font-weight: 900 !important;
      text-align: center !important;
      height: 28px !important;
      white-space: nowrap !important;
    }

    .new-manager-title strong {
      color: #ff0000 !important;
      font-weight: 900 !important;
    }

    #newScheduleModal.hidden {
      display: none !important;
    }

    body.new-schedule-modal-open {
      overflow: hidden;
    }

    body.new-schedule-modal-open::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 999;
      background: rgba(15, 23, 42, 0.48);
      backdrop-filter: blur(5px);
    }

    #newScheduleModal:not(.hidden) {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000;
      width: min(980px, calc(100vw - 28px));
      max-height: calc(100vh - 36px);
      overflow: auto;
      padding: 22px;
      border-radius: 26px;
      background: #ffffff;
      border: 1px solid rgba(226, 232, 240, 0.95);
      box-shadow: 0 30px 90px rgba(15, 23, 42, 0.34);
    }

    .new-schedule-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .new-schedule-wide {
      grid-column: 1 / -1;
    }

    .new-schedule-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 999px;
      background: #f1f5f9;
      color: #0f172a;
      font-size: 24px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .new-code-buttons {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .new-code-buttons button {
      background: #f1f5f9;
      color: #0f172a;
      border-radius: 12px;
      padding: 9px 12px;
    }

    .new-code-buttons button.active {
      background: #0284c7;
      color: white;
    }

    .new-date-picker {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      overflow: hidden;
    }

    .new-date-picker button {
      min-height: 54px;
      background: white;
      color: #0f172a;
      border-radius: 0;
      border-right: 1px solid #e5e7eb;
      border-bottom: 1px solid #e5e7eb;
      padding: 5px;
      font-weight: 900;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
    }

    .new-date-picker button.selected {
      background: #0284c7 !important;
      color: white !important;
    }

    .new-date-picker button.weekend:not(.selected) {
      background: #fff1f2;
      color: #dc2626;
    }

    .new-date-picker button.occupied:not(.selected) {
      background: #fff7ed;
    }

    .modal-date-shifts {
      display: flex;
      gap: 2px;
      flex-wrap: wrap;
      justify-content: center;
      min-height: 14px;
      line-height: 1;
    }

    .modal-date-shift {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 14px;
      padding: 0 3px;
      border-radius: 5px;
      font-size: 10px;
      font-weight: 1000;
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fecaca;
      white-space: nowrap;
    }

    .new-date-picker button.selected .modal-date-shift {
      background: rgba(255,255,255,.95);
      color: #0f172a;
    }

    #newScheduleDeleteButton {
      background: #fee2e2 !important;
      color: #991b1b !important;
    }

    @media (max-width: 900px) {
      .clean-schedule-toolbar,
      .new-schedule-grid {
        grid-template-columns: 1fr;
      }
    }

    /* CLEAN_SCHEDULE_MODULE_V3_END */

  
    /* WIDE_SITE_LAYOUT_RESTORE_START */

    :root {
      --app-max-width: 1880px;
    }

    body {
      overflow-x: hidden;
    }

    .app,
    .layout,
    .main,
    main,
    .content,
    .page,
    .container,
    .wrapper {
      max-width: var(--app-max-width) !important;
    }

    .main,
    main,
    .content,
    .page,
    .container,
    .wrapper {
      width: min(var(--app-max-width), calc(100vw - 32px)) !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .card,
    .section-card,
    .panel {
      max-width: none !important;
    }

    #schedulesSection,
    #schedulesSection .card,
    #schedulesSection .section-card,
    #schedulesSection .panel {
      width: 100% !important;
      max-width: none !important;
    }

    #cleanScheduleBox,
    #cleanScheduleBox .new-pdf-wrap {
      width: 100% !important;
      max-width: none !important;
    }

    /* чтобы таблица графика могла быть шире и прокручиваться внутри себя */
    #cleanScheduleBox .new-pdf-wrap {
      overflow-x: auto !important;
    }

    /* WIDE_SITE_LAYOUT_RESTORE_END */

  


  
    /* SAFE_WORKSPACE_WIDTH_RESTORE_START */

    :root {
      --safe-sidebar-width: 220px;
      --safe-page-gap: 16px;
      --safe-page-padding: 12px;
    }

    /*
      НЕ трогаем header/topbar.
      Расширяем только область под шапкой: меню + контент.
    */

    .layout {
      width: calc(100vw - var(--safe-page-padding) * 2) !important;
      max-width: none !important;
      margin: 12px auto !important;
      display: grid !important;
      grid-template-columns: var(--safe-sidebar-width) minmax(0, 1fr) !important;
      gap: var(--safe-page-gap) !important;
      align-items: start !important;
      box-sizing: border-box !important;
    }

    .sidebar {
      width: var(--safe-sidebar-width) !important;
      min-width: var(--safe-sidebar-width) !important;
      max-width: var(--safe-sidebar-width) !important;
      box-sizing: border-box !important;
    }

    .content {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      box-sizing: border-box !important;
    }

    .content .card,
    #schedulesSection,
    #schedulesSection.card,
    #schedulesSection .card {
      width: 100% !important;
      max-width: none !important;
      box-sizing: border-box !important;
    }

    #cleanScheduleBox,
    #cleanScheduleBox .new-pdf-wrap {
      width: 100% !important;
      max-width: none !important;
    }

    #cleanScheduleBox .new-pdf-wrap {
      overflow: auto !important;
    }

    #cleanScheduleBox .new-pdf-table {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    @media (max-width: 900px) {
      .layout {
        display: block !important;
        width: calc(100vw - 16px) !important;
      }

      .sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-bottom: 12px !important;
      }
    }

    /* SAFE_WORKSPACE_WIDTH_RESTORE_END */

  
    /* SCHEDULE_MANAGEMENT_DROPDOWN_V1_START */

    .schedule-management-box {
      position: relative;
      display: inline-flex;
      align-items: center;
      margin-left: 8px;
    }

    .schedule-management-box.hidden {
      display: none !important;
    }

    .schedule-management-menu {
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      z-index: 120;
      min-width: 245px;
      padding: 8px;
      border: 1px solid #dbe4ef;
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
    }

    .schedule-management-menu.hidden {
      display: none !important;
    }

    .schedule-management-menu button {
      width: 100%;
      justify-content: flex-start;
      margin: 0 0 6px 0;
      text-align: left;
    }

    .schedule-management-menu button:last-child {
      margin-bottom: 0;
    }

    .schedule-management-note {
      padding: 6px 8px 8px;
      font-size: 12px;
      color: #64748b;
      line-height: 1.25;
    }

    .schedule-hidden-original-control {
      display: none !important;
    }

    #cleanScheduleBox.schedule-readonly .new-pdf-cell {
      cursor: default !important;
    }

    #cleanScheduleBox.schedule-readonly .new-pdf-cell:hover {
      outline: none !important;
      background: inherit !important;
    }

    #cleanScheduleBox.schedule-readonly .new-pdf-cell::after {
      display: none !important;
    }

    /* SCHEDULE_MANAGEMENT_DROPDOWN_V1_END */
    /* GLOBAL_X_MODAL_UI_V1_START */

    #newBranchSelect.global-x-disabled {
      opacity: 0.65;
      cursor: not-allowed;
      background: #eef2f7;
    }

    .global-x-note {
      margin-top: 6px;
      padding: 8px 10px;
      border-radius: 10px;
      background: #fff7d6;
      color: #7c4a03;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.25;
    }

    .global-x-note.hidden {
      display: none !important;
    }

    /* GLOBAL_X_MODAL_UI_V1_END */

  
    /* GLOBAL_MANAGER_MODAL_UI_V1_START */

    #newBranchSelect.global-manager-disabled {
      opacity: 0.65;
      cursor: not-allowed;
      background: #eef2f7;
    }

    .global-manager-note {
      margin-top: 6px;
      padding: 8px 10px;
      border-radius: 10px;
      background: #e8f3ff;
      color: #075985;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.25;
    }

    .global-manager-note.hidden {
      display: none !important;
    }

    /* GLOBAL_MANAGER_MODAL_UI_V1_END */

  
    /* SHIFT_TEMPLATE_EDITOR_UI_V1_START */

    .template-editor-modal {
      position: fixed;
      inset: 0;
      z-index: 10030;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(15, 23, 42, 0.45);
      padding: 20px;
    }

    .template-editor-modal.hidden {
      display: none !important;
    }

    .template-editor-card {
      width: min(1100px, 96vw);
      max-height: 90vh;
      overflow: auto;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
      padding: 18px;
    }

    .template-editor-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .template-editor-head h3 {
      margin: 0;
      font-size: 22px;
      font-weight: 900;
    }

    .template-editor-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }

    .template-editor-table th,
    .template-editor-table td {
      border-bottom: 1px solid #e5e7eb;
      padding: 8px;
      vertical-align: middle;
      text-align: left;
    }

    .template-editor-table input {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 7px 9px;
      font: inherit;
    }

    .template-editor-table input[type="checkbox"] {
      width: auto;
    }

    .template-editor-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 14px;
    }

    .template-editor-status {
      margin-top: 10px;
      font-weight: 800;
    }

    .template-editor-status.error {
      color: #991b1b;
    }

    .template-editor-status.ok {
      color: #166534;
    }

    /* SHIFT_TEMPLATE_EDITOR_UI_V1_END */

  
    /* SHIFT_TEMPLATE_CRUD_AUTOSYNC_UI_V1_START */

    .template-add-panel {
      display: grid;
      grid-template-columns: 2fr 1fr 110px 110px 90px 110px 130px;
      gap: 8px;
      align-items: center;
      padding: 10px;
      margin: 10px 0 14px;
      border: 1px solid #dbeafe;
      border-radius: 14px;
      background: #eff6ff;
    }

    .template-add-panel input {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 10px;
      font: inherit;
      background: #fff;
    }

    .template-row-delete {
      margin-left: 6px;
      background: #fee2e2 !important;
      color: #991b1b !important;
    }

    .template-row-delete:hover {
      background: #fecaca !important;
    }

    /* SHIFT_TEMPLATE_CRUD_AUTOSYNC_UI_V1_END */

  
    /* SOLID_SHIFT_CELL_COLORS_V1_START */

    #cleanScheduleBox .new-pdf-cell.has-shift {
      background-clip: padding-box !important;
    }

    #cleanScheduleBox .new-pdf-cell.has-shift .new-pdf-shift {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      color: #000 !important;
      font-weight: 900 !important;
      padding: 0 2px !important;
      margin: 0 1px !important;
    }

    #cleanScheduleBox .new-pdf-cell.has-shift .new-pdf-shift + .new-pdf-shift::before {
      content: " ";
    }

    /* SOLID_SHIFT_CELL_COLORS_V1_END */

/* AUDIT_LOG_UI_V1_START */

.audit-log-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.audit-log-filters label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: #374151;
}

.audit-log-table-wrap {
  overflow-x: auto;
}

.audit-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.audit-log-table th,
.audit-log-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.audit-log-table th {
  color: #374151;
  font-weight: 700;
  background: #f9fafb;
}

.audit-log-action {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2ff;
  font-weight: 700;
  white-space: nowrap;
}

.audit-log-json {
  max-height: 260px;
  overflow: auto;
  background: #111827;
  color: #f9fafb;
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .audit-log-filters {
    grid-template-columns: 1fr;
  }
}

/* AUDIT_LOG_UI_V1_END */



/* SCHEDULE_MANAGEMENT_REFACTOR_V1_START */

.clean-schedule-header {
  align-items: flex-start;
  gap: 12px;
}

.schedule-management-box {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
  margin-left: auto;
  z-index: 30;
}

.schedule-management-box.hidden {
  display: none !important;
}

.schedule-management-toggle {
  min-width: 190px;
  white-space: nowrap;
}

.schedule-management-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

.schedule-management-menu.hidden {
  display: none !important;
}

.schedule-management-note {
  padding: 8px 10px;
  border-radius: 10px;
  background: #eff6ff;
  color: #475569;
  font-size: 12px;
  line-height: 1.3;
}

.schedule-management-menu button {
  width: 100%;
  margin: 0;
  justify-content: center;
}

#scheduleManagementMenu #shiftTemplateEditorButton {
  width: 100%;
  margin: 0;
}

/* SCHEDULE_MANAGEMENT_REFACTOR_V1_END */

/* NEW_CODE_BUTTONS_TEMPLATE_COLORS_V1_START */

#newCodeButtons button.shift-template-colored-code-button {
  background: var(--shift-template-button-bg) !important;
  color: var(--shift-template-button-text) !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

#newCodeButtons button.shift-template-colored-code-button:hover {
  filter: brightness(0.97);
}

#newCodeButtons button.shift-template-colored-code-button.active {
  outline: 3px solid #0ea5e9 !important;
  outline-offset: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(14, 165, 233, 0.25);
}

/* NEW_CODE_BUTTONS_TEMPLATE_COLORS_V1_END */