@media (max-width:1023px) {
  #app {
    --kk-mc-height:32px;
    --kk-mc-icon:32px;
    --kk-mc-field:32px;
    --kk-mc-padding-x:12px;
    --kk-mc-font:12px;
    --kk-mc-line:16px;
    --kk-mc-radius:8px;
    --kk-mc-gap:6px;
    --kk-mc-card-pad:10px;
  }

   
  #app :is(
    #swipe-live-photosheets,
    .staff-screen,
    .staff365-admin-screen,
    .complexes-screen,
    .payroll-screen,
    .complaints-screen,
    .appusers-screen,
    .training-screen,
    .supplies-screen,
    .tree-screen,
    .settings-screen,
    .employee-memo-screen,
    .kk-data-vault,
    .ann-hub-screen--admin-mobile-compact,
    .bid-v2-root
  ) :is(
    .kk-ui-btn,
    .kk-pill,
    .kk-btn-pc:not(.icon),
    .btn-add-gradient,
    .btn-secondary-flat:not(.kk-pin-key),
    .btn-danger-flat,
    .btn-soft,
    .btn-subadd,
    .a-compact-primary,
    .a-compact-control-btn,
    .kk-ui-chip,
    .kk-staff-dept-choice,
    .payroll-mode-tab,
    .supplies-tabbar .sch-tab
  ):not(.modal-overlay *):not(.kk-ui-modal-overlay *):not(.kk-pin-key):not(#swipe-live-schedule-month *):not(#swipe-live-schedule-week *) {
    box-sizing:border-box !important;
    width:auto;
    min-width:0;
    height:var(--kk-mc-height) !important;
    min-height:var(--kk-mc-height) !important;
    max-height:var(--kk-mc-height);
    padding:6px var(--kk-mc-padding-x) !important;
    font-size:var(--kk-mc-font) !important;
    line-height:var(--kk-mc-line) !important;
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
  }

  #app :is(
    #swipe-live-photosheets,
    .staff-screen,
    .staff365-admin-screen,
    .complexes-screen,
    .payroll-screen,
    .complaints-screen,
    .appusers-screen,
    .training-screen,
    .supplies-screen,
    .tree-screen,
    .settings-screen,
    .employee-memo-screen,
    .kk-data-vault,
    .ann-hub-screen--admin-mobile-compact,
    .bid-v2-root
  ) :is(input.input,select.input,select.select,.kk-ui-field):not(.modal-overlay *):not(.kk-ui-modal-overlay *) {
    min-height:var(--kk-mc-field) !important;
    height:var(--kk-mc-field);
    padding-top:0 !important;
    padding-bottom:0 !important;
    border-radius:var(--kk-mc-radius) !important;
    font-size:12px !important;
  }

  #app :is(
    #swipe-live-photosheets,
    .staff-screen,
    .staff365-admin-screen,
    .complexes-screen,
    .payroll-screen,
    .complaints-screen,
    .appusers-screen,
    .training-screen,
    .supplies-screen,
    .tree-screen,
    .settings-screen,
    .employee-memo-screen,
    .kk-data-vault,
    .ann-hub-screen--admin-mobile-compact,
    .bid-v2-root
  ) :is(.kk-ui-icon-btn,.kk-btn-pc.icon):not(.modal-overlay *):not(.kk-ui-modal-overlay *) {
    width:var(--kk-mc-icon) !important;
    min-width:var(--kk-mc-icon) !important;
    height:var(--kk-mc-icon) !important;
    min-height:var(--kk-mc-icon) !important;
    padding:0 !important;
    border-radius:var(--kk-mc-radius) !important;
  }

   
  #app :is(.staff-screen,.complaints-screen,.appusers-screen,.training-screen) {
    padding:10px !important;
    padding-bottom:calc(66px + env(safe-area-inset-bottom)) !important;
  }
  #app #swipe-live-photosheets {
    padding-top:10px !important;
    padding-right:10px !important;
    padding-left:10px !important;
  }
  #app :is(.complexes-screen,.payroll-screen,.supplies-screen,.tree-screen,.settings-screen,.kk-data-vault) {
    padding-right:10px !important;
    padding-left:10px !important;
  }

   
  #app .complaints-screen :is(.complaints-inline-filters,.complaints-kpi-strip > div),
  #app .complaints-screen .kk-list-grid > .rounded-xl,
  #app .appusers-screen .kk-list-grid > .rounded-xl,
  #app .supplies-screen :is(.supplies-items-toolbar,.rounded-xl.bg-white.border.p-5),
  #app .tree-screen .kk-list-grid > .rounded-2xl,
  #app .settings-screen > .p-4 > .bg-white.rounded-2xl,
  #app .employee-memo-screen > header + div {
    padding:8px 10px !important;
  }
  #app .complaints-screen :is(.complaints-inline-filters,.complaints-kpi-strip),
  #app .appusers-screen :is(.appusers-inline-search,.appusers-inline-depts,.appusers-bottom-actions),
  #app .supplies-screen :is(.supplies-tabbar,.supplies-items-commandcard),
  #app .employee-memo-screen > :is(header,div,button,input) {
    margin-bottom:8px !important;
  }
  #app .settings-screen > .p-4 { padding:10px !important; }
  #app .settings-screen > .p-4 > * + * { margin-top:8px !important; }
  #app .settings-screen :is(button,label)[class*="py-2.5"]:not(.kk-pin-key) {
    box-sizing:border-box !important;
    width:auto;
    min-height:32px !important;
    height:32px !important;
    padding:6px 12px !important;
    border-radius:8px !important;
    font-size:12px !important;
    font-weight:500 !important;
    line-height:16px !important;
    white-space:nowrap !important;
  }
  #app .employee-memo-screen > button[style*="padding:12px"] { padding:9px 10px !important; }
  #app .employee-memo-screen {
    box-sizing:border-box !important;
    width:100% !important;
    padding-right:10px !important;
    padding-left:10px !important;
  }
  #app .employee-memo-screen > input[style*="padding:10px"],
  #app .employee-memo-screen > div > :is(input,select) {
    box-sizing:border-box !important;
    min-height:32px !important;
    height:32px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    font-size:12px !important;
  }
   
  #app .kk-data-vault > div:not(.kk-data-vault-header):not(.modal-overlay) {
    padding:10px !important;
    margin-top:8px !important;
    margin-bottom:8px !important;
  }

   
  #app #swipe-live-photosheets .photo-mobile-toolbar {
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:6px !important;
    margin-bottom:8px !important;
    padding:8px !important;
    border-radius:12px !important;
  }
  #app #swipe-live-photosheets .photo-mobile-toolbar > .kk-pill {
    flex:0 0 auto;
    margin:0 !important;
  }
  #app #swipe-live-photosheets .photo-mobile-toolbar > .input {
    flex:1 1 140px;
    min-width:0 !important;
    margin-bottom:0 !important;
  }
  #app #swipe-live-photosheets .photo-mobile-toolbar > select.input {
    flex:0 1 auto;
    margin-bottom:0 !important;
  }
  #app #swipe-live-photosheets .photo-list-grid { gap:8px !important; }
  #app #swipe-live-photosheets .photo-list-grid > div { padding:10px !important; border-radius:12px !important; }

   
  #app .staff-screen .staff-mobile-dept-grid {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:4px !important;
  }
   
  #app .staff-screen .staff-mobile-dept-grid > .kk-staff-dept-choice:not(#swipe-live-schedule-month *):not(#swipe-live-schedule-week *) {
    width:100% !important;
    min-width:0 !important;
    padding-right:4px !important;
    padding-left:4px !important;
    font-size:12px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  #app .staff-screen .staff-inline-filter.kk-fixed-choice-row {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:4px !important;
    width:min(100%,222px) !important;
  }

   
  #app .staff365-admin-screen { padding:10px !important; }
  #app .staff365-admin-screen .staff365-overview { gap:5px !important; margin-bottom:8px !important; }
  #app .staff365-admin-screen .staff365-stat {
    min-height:42px !important;
    padding:6px 8px !important;
    border-radius:9px !important;
    font-size:12px !important;
  }
  #app .staff365-admin-screen .staff365-stat b { font-size:15px !important; }
  #app .staff365-admin-screen .staff365-workspace > aside { margin-bottom:8px !important; }
  #app .staff365-admin-screen .staff365-panel > div:first-child { min-height:34px !important; padding:6px 8px !important; }
  #app .staff365-admin-screen .staff365-row { gap:5px !important; padding:8px 9px !important; }
   

  #app .staff365-admin-screen .staff365-row.staff365-link-row { padding:5px 10px !important; }
  #app .staff365-admin-screen .staff365-link-row .staff365-link-identity { flex-direction:row !important; }
  #app .staff365-admin-screen .staff365-link-row .staff365-actions { flex-wrap:nowrap !important; }
  #app .staff365-admin-screen .staff365-actions { gap:4px !important; }
  #app .staff365-admin-screen .staff365-actions button {
    min-height:32px !important;
    padding:0 8px !important;
    border-radius:7px !important;
    font-size:12px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

   

  #app:not(:has(#swipe-live-schedule-month)):not(:has(#swipe-live-schedule-week))
    .modal-overlay:not(.photo-editor-overlay):not(.detail-sheet-overlay):not(.work-status-picker-overlay):not(.kk-review-overlay):not(.kk-notify-modal-overlay)
    button:not(.kk-pin-key),
  #app .kk-ui-modal-overlay:not(.bid-date-modal-overlay) button:not(.kk-pin-key) {
    box-sizing:border-box !important;
    width:auto;
    min-height:32px !important;
    height:32px !important;
    max-height:32px;
    padding:7px 12px !important;
    border-radius:8px !important;
    font-size:12px !important;
    line-height:16px !important;
    writing-mode:horizontal-tb !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
  }
  #app:not(:has(#swipe-live-schedule-month)):not(:has(#swipe-live-schedule-week))
    .modal-overlay:not(.photo-editor-overlay) .modal-sticky-actions,
  #app .kk-ui-modal-overlay:not(.bid-date-modal-overlay) .kk-ui-modal-footer {
    gap:6px !important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  }

   
  #app .complexes-screen .complexes-mobile-filters {
    margin-bottom:8px !important;
    padding:8px !important;
    border-radius:12px !important;
  }
  #app .complexes-screen .complexes-mobile-filters > div:first-child { gap:5px !important; margin-bottom:6px !important; }
  #app .complexes-screen .complexes-mobile-filters .kk-pill:not(#swipe-live-schedule-month *):not(#swipe-live-schedule-week *) { border-radius:8px !important; }
  #app .complexes-screen .complexes-mobile-filters .kk-uniform-choice-grid { gap:4px !important; }
  #app .complexes-screen .complexes-mobile-filters .kk-uniform-choice-grid:not(.kk-uniform-choice-grid--short) {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  #app .complexes-screen .complexes-mobile-filters .kk-ui-chip { width:100% !important; padding:0 5px !important; font-size:12px !important; }

   
  #app .payroll-screen .payroll-mode-tabs {
    width:100% !important;
    margin-bottom:8px !important;
    padding:3px !important;
    gap:4px !important;
    border-radius:10px !important;
  }
  #app .payroll-screen .payroll-mobile-year-grid {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:4px !important;
  }
  #app .payroll-screen .payroll-mobile-month-grid {
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:4px !important;
  }
  #app .payroll-screen :is(.payroll-mobile-year-grid,.payroll-mobile-month-grid) > .kk-ui-chip {
    width:100% !important;
    min-width:0 !important;
    padding:0 3px !important;
    font-size:12px !important;
  }
  #app .payroll-screen .payroll-mobile-history-actions {
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:4px !important;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #app .payroll-screen .payroll-mobile-history-actions::-webkit-scrollbar { display:none; }
  #app .payroll-screen .payroll-mobile-history-actions > button {
    flex:0 0 auto !important;
    min-height:32px !important;
    height:32px !important;
    padding:0 8px !important;
    border-radius:8px !important;
    font-size:12px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

   
  #app .complaints-screen :is(.complaints-kpi-strip,.kk-uniform-choice-grid),
  #app .appusers-screen :is(.appusers-inline-depts,.appusers-bottom-actions),
  #app .training-screen .kk-uniform-choice-grid,
  #app .supplies-screen :is(.supplies-tabbar,.supplies-items-toolbar),
  #app .tree-screen :is(.tree-header-actions,.tree-commandbar,.tree-datebar,.tree-delivery-actions),
  #app .employee-memo-screen :is(.kk-uniform-choice-grid,.employee-memo-actions),
  #app .kk-data-vault :is(.kk-uniform-choice-grid,.kk-data-vault-retirees) {
    gap:4px !important;
  }
   
  #app .tree-screen .tree-delivery-actions { row-gap:12px !important; }
  #app .kk-data-vault :is(button,summary):not(.modal-overlay *):not(.kk-ui-modal-overlay *):not(.kk-pin-key) {
    box-sizing:border-box !important;
    min-height:32px !important;
    height:32px !important;
    max-height:32px;
    padding:6px 12px !important;
    border-radius:8px !important;
    font-size:12px !important;
    line-height:16px !important;
    writing-mode:horizontal-tb !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
  }
  #app .kk-data-vault .kk-data-vault-retirees { align-items:stretch; flex-direction:row !important; flex-wrap:wrap; }
  #app .kk-data-vault .kk-data-vault-retirees > :is(button,label) { width:auto !important; flex:1 1 210px; }

   


   
  #app .ann-hub-screen--admin-mobile-compact {
    --ann-mobile-control-h:32px;
    --ann-mobile-gap:4px;
  }
  #app .ann-hub-screen[data-ann-mobile-compact-admin="true"] .erp-mobile-a-header {
    gap:6px !important;
    margin-bottom:8px !important;
  }
  #app .ann-hub-screen[data-ann-mobile-compact-admin="true"] [data-ann-mobile-tabs] {
    gap:3px !important;
    margin-bottom:8px !important;
    padding:3px !important;
    border-radius:10px !important;
  }
  #app .ann-hub-screen[data-ann-mobile-compact-admin="true"] [data-ann-mobile-card-list] {
    display:grid !important;
    gap:var(--ann-mobile-gap) !important;
  }
  #app .ann-hub-screen[data-ann-mobile-compact-admin="true"] [data-ann-mobile-card-list] > [data-ann-mobile-card] {
    margin-top:0 !important;
  }
  #app .ann-hub-screen[data-ann-mobile-compact-admin="true"] [data-ann-mobile-card] {
    box-sizing:border-box !important;
    gap:8px !important;
    min-height:48px !important;
    margin-bottom:8px !important;
    padding:7px 9px !important;
    border-radius:11px !important;
  }
  #app .ann-hub-screen[data-ann-mobile-compact-admin="true"] [data-ann-mobile-card-list] > [data-ann-mobile-card] {
    margin-bottom:0 !important;
  }
  #app .ann-hub-screen[data-ann-mobile-compact-admin="true"] [data-ann-mobile-card-icon] {
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    border-radius:8px !important;
    font-size:15px !important;
    line-height:1 !important;
  }
  #app .ann-hub-screen[data-ann-mobile-compact-admin="true"] [data-ann-mobile-card] .text-sm {
    font-size:12px !important;
    line-height:16px !important;
  }
  #app .ann-hub-screen[data-ann-mobile-compact-admin="true"] [data-ann-mobile-card] .text-xs {
    font-size:12px !important;
    line-height:14px !important;
  }
}

@media (min-width:390px) and (max-width:1023px) {
  #app .staff-screen .staff-mobile-dept-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}

@media (min-width:620px) and (max-width:1023px) {
  #app .staff-screen .staff-mobile-dept-grid { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
}

 







@media (max-width:1023px) {
  #app :is(
    #swipe-live-photosheets,
    .staff-screen,
    .staff365-admin-screen,
    .complexes-screen,
    .payroll-screen,
    .complaints-screen,
    .appusers-screen,
    .training-screen,
    .supplies-screen,
    .tree-screen,
    .settings-screen,
    .employee-memo-screen,
    .kk-data-vault,
    .ann-hub-screen--admin-mobile-compact,
    .confidential-screen,
    .disinfect-screen,
    .holidays-screen,
    .ocr-screen,
    .bizcard-screen,
    .bid-v2-root
  ) :is(
    button.btn-add-gradient,
    button.login-btn,
    button.a-compact-primary,
    button.kk-ui-btn--primary,
    button.kk-btn-pc.primary,
    button[class~="bg-blue-600"]
  ):not(.kk-ui-chip):not(.kk-pill):not(.badge):not(.sch-tab):not(.payroll-mode-tab):not(.kk-staff-dept-choice):not(.bid-v4-chip):not(.w-8):not([style*="position:absolute"]):not(.kk-pin-key):not(#swipe-live-schedule-month *):not(#swipe-live-schedule-week *) {
    box-sizing:border-box !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:56px !important;
    min-height:32px !important;
    height:32px !important;
    max-height:32px !important;
    padding:0 12px !important;
    border-radius:8px !important;
    font-family:inherit !important;
    font-size:12px !important;
    font-weight:500 !important;
    line-height:16px !important;
    letter-spacing:0 !important;
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
  }
}
 

@media (max-width:1023px) {
  #app :is(
    #swipe-live-photosheets,
    .staff-screen,
    .staff365-admin-screen,
    .complexes-screen,
    .payroll-screen,
    .complaints-screen,
    .appusers-screen,
    .training-screen,
    .supplies-screen,
    .tree-screen,
    .settings-screen,
    .employee-memo-screen,
    .kk-data-vault,
    .ann-hub-screen--admin-mobile-compact,
    .confidential-screen,
    .disinfect-screen,
    .holidays-screen,
    .ocr-screen,
    .bizcard-screen,
    .bid-v2-root
  ) :is(
    button.btn-secondary-flat,
    button.btn-danger-flat,
    button.kk-ui-btn--secondary,
    button.kk-ui-btn--danger,
    button.kk-btn-pc.secondary
  ):not(.kk-ui-chip):not(.kk-pill):not(.badge):not(.sch-tab):not(.payroll-mode-tab):not(.kk-staff-dept-choice):not(.bid-v4-chip):not(.w-8):not([style*="position:absolute"]):not(.kk-pin-key):not(#swipe-live-schedule-month *):not(#swipe-live-schedule-week *) {
    box-sizing:border-box !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:56px !important;
    min-height:32px !important;
    height:32px !important;
    max-height:32px !important;
    padding:0 12px !important;
    border-radius:8px !important;
    font-family:inherit !important;
    font-size:12px !important;
    font-weight:500 !important;
    line-height:16px !important;
    letter-spacing:0 !important;
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
  }
}