.mobile-menu-toggle,
.mobile-nav-head,
.mobile-nav-language,
.mobile-nav-backdrop,
.mobile-planning-tools,
.mobile-project-selection,
.mobile-drawer-close,
.mobile-project-backdrop {
    display: none;
}

.drawer-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dialog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 900px) {
    
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        min-width: 0;
        font-size: var(--kp-fs-15);
    }

    body.mobile-nav-open,
    body.project-drawer-open {
        overflow: hidden !important;
    }

    img,
    svg {
        max-width: 100%;
    }

    input,
    select,
    textarea,
    button {
        min-width: 0;
        max-width: 100%;
        touch-action: manipulation;
    }

    .app-main {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 12px 10px 28px !important;
    }

    .app-footer {
        padding: 12px 10px 18px;
        font-size: var(--kp-fs-12);
    }

    .page-shell,
    .page-card,
    .settings-shell,
    .auth-card,
    .install-card,
    .communication-page,
    .notifications-page,
    .audit-page {
        width: 100%;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    
    .app-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 3000 !important;
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) auto !important;
        align-items: center;
        gap: 8px;
        min-height: 64px;
        padding: 8px 10px !important;
        background: #fff !important;
        border-bottom: 1px solid var(--kp-border);
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .mobile-menu-toggle {
        display: flex;
        width: 46px;
        height: 46px;
        padding: 0;
        border: 1px solid var(--kp-border);
        border-radius: 12px;
        background: #fff;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 3px;
        background: var(--kp-nav);
    }

    .brand {
        min-width: 0;
        justify-self: start;
    }

    .brand img {
        width: min(138px, 36vw) !important;
        max-height: 40px;
    }

    .brand span {
        display: none !important;
    }

    .header-actions {
        width: auto !important;
        min-width: 0;
        justify-content: flex-end !important;
        gap: 7px;
    }

    .desktop-language-switch {
        display: none !important;
    }

    .notification-button {
        width: 44px;
        height: 44px;
        border-radius: 11px;
        font-size: var(--kp-fs-18);
    }

    .notification-button b {
        min-width: 20px;
        height: 20px;
        font-size: var(--kp-fs-9);
    }

    .user-menu summary {
        display: grid;
        place-items: center;
        width: 46px;
        max-width: 46px;
        height: 44px;
        padding: 0 !important;
        border-radius: 11px;
        font-size: 0;
    }

    .user-menu summary::before {
        content: '👤';
        font-size: var(--kp-fs-18);
    }

    .user-popover {
        position: fixed;
        right: 10px;
        top: 68px;
        z-index: 3300;
        width: min(320px, calc(100vw - 20px));
        max-height: calc(100dvh - 82px);
        overflow: auto;
        border-radius: 14px;
    }

    .user-popover > a,
    .user-popover form button {
        min-height: 44px;
        font-size: var(--kp-fs-13);
    }

    .main-nav {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
        z-index: 3200 !important;
        width: min(340px, 88vw) !important;
        height: 100dvh !important;
        max-height: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        padding: 12px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: 22px 0 70px rgba(10, 31, 34, .24) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-105%) !important;
        transition: transform .22s ease !important;
        pointer-events: none !important;
    }

    body.mobile-nav-open .main-nav {
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    .main-nav > a {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 50px !important;
        padding: 12px 14px !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        color: #34474b !important;
        font-size: var(--kp-fs-15) !important;
        line-height: 1.25 !important;
        font-weight: 760 !important;
        white-space: normal !important;
        text-decoration: none !important;
    }

    .main-nav > a:hover,
    .main-nav > a:focus {
        background: color-mix(in srgb, var(--kp-primary), #fff 92%) !important;
        border-color: color-mix(in srgb, var(--kp-primary), #fff 78%) !important;
        color: var(--kp-primary) !important;
    }

    .mobile-nav-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        flex: 0 0 auto !important;
        margin: 0 0 8px !important;
        padding: 7px 4px 14px !important;
        border-bottom: 1px solid var(--kp-border) !important;
    }

    .mobile-nav-head strong,
    .mobile-nav-head small {
        display: block !important;
    }

    .mobile-nav-head strong {
        font-size: var(--kp-fs-16) !important;
        color: var(--kp-nav) !important;
    }

    .mobile-nav-head small {
        margin-top: 3px !important;
        color: #788589 !important;
        font-size: var(--kp-fs-11) !important;
    }

    .mobile-nav-close {
        display: grid !important;
        place-items: center !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        border: 1px solid var(--kp-border) !important;
        border-radius: 11px !important;
        background: #fff !important;
        color: #607075 !important;
        font-size: var(--kp-fs-24) !important;
        line-height: 1 !important;
    }

    .mobile-nav-language {
        display: block !important;
        flex: 0 0 auto !important;
        margin-top: auto !important;
        padding: 14px 4px 4px !important;
        border-top: 1px solid var(--kp-border) !important;
    }

    .mobile-nav-language > span {
        display: block !important;
        margin-bottom: 8px !important;
        color: #6d797d !important;
        font-size: var(--kp-fs-11) !important;
        font-weight: 850 !important;
        text-transform: uppercase !important;
        letter-spacing: .08em !important;
    }

    .mobile-nav-language .language-switch {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        width: 100% !important;
    }

    .mobile-nav-language .language-switch button {
        width: 100% !important;
        height: 44px !important;
        font-size: var(--kp-fs-12) !important;
    }

    .mobile-nav-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 2990 !important;
        border: 0 !important;
        background: rgba(10, 29, 32, .42) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .2s ease, visibility .2s ease !important;
    }

    body.mobile-nav-open .mobile-nav-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    
    .page-head,
    .kp-page-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 14px;
    }

    .page-head h1,
    .kp-page-head h1 {
        font-size: var(--kp-fs-27) !important;
        line-height: 1.08;
    }

    .page-head p,
    .kp-page-head p {
        font-size: var(--kp-fs-13_5) !important;
        line-height: 1.5;
    }

    .eyebrow,
    .kp-eyebrow {
        font-size: var(--kp-fs-10_5) !important;
    }

    .head-actions {
        width: 100%;
        gap: 8px;
    }

    .head-actions .btn-primary-kp,
    .head-actions .subtle-btn,
    .head-actions .kp-btn {
        flex: 1 1 auto;
    }

    .btn-primary-kp,
    .subtle-btn,
    .danger-btn,
    .icon-btn,
    .mini-add,
    .table-action,
    .kp-btn {
        min-height: 44px;
        font-size: var(--kp-fs-12_5) !important;
    }

    .mini-add {
        width: 42px;
        height: 42px;
    }

    .form-card input,
    .form-card select,
    .form-card textarea,
    .settings-card input,
    .settings-card select,
    .settings-card textarea,
    .inline-create input,
    .inline-create select,
    .inline-create textarea,
    .dialog-card input,
    .dialog-card select,
    .dialog-card textarea,
    .install-card input,
    .install-card select,
    .login-card input,
    .login-card select,
    .filter-bar input,
    .filter-bar select,
    .planning-filters input,
    .planning-filters select,
    .planning-actions select,
    .drawer-search,
    .bulk-table input,
    .bulk-table select,
    .kp-form-card input,
    .kp-form-card select,
    .kp-form-card textarea,
    .kp-login-card-small input,
    .kp-report-filter select,
    .kp-report-filter input {
        min-height: 44px;
        font-size: var(--kp-fs-16) !important;
    }

    .form-card label,
    .settings-card label,
    .inline-create label,
    .dialog-card label,
    .install-card label,
    .login-card label,
    .kp-form-card label,
    .kp-login-card-small label {
        font-size: var(--kp-fs-12) !important;
    }

    .field-help,
    .validation,
    .text-danger,
    .form-message,
    .kp-form-message {
        font-size: var(--kp-fs-11_5) !important;
    }

    .form-grid,
    .kp-form-grid,
    .check-grid,
    .two-column-settings,
    .branding-layout,
    .email-template-grid,
    .communication-grid,
    .dashboard-grid,
    .import-flow {
        grid-template-columns: 1fr !important;
    }

    .settings-card,
    .form-card,
    .panel,
    .bulk-card,
    .kp-card {
        padding: 14px;
        border-radius: 13px;
    }

    .panel-head h2 {
        font-size: var(--kp-fs-19) !important;
    }

    
    .settings-tabs {
        top: 66px;
        justify-content: flex-start;
        max-width: calc(100vw - 20px);
        margin-inline: -2px;
        padding: 5px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .settings-tabs::-webkit-scrollbar {
        display: none;
    }

    .settings-tabs a {
        display: flex;
        align-items: center;
        min-height: 42px;
        font-size: var(--kp-fs-11_5) !important;
    }

    .language-tabs {
        overflow-x: auto;
        white-space: nowrap;
    }

    .language-tabs a {
        display: flex;
        align-items: center;
        min-height: 42px;
        font-size: var(--kp-fs-11_5) !important;
    }

    .brand-preview,
    .board-preview {
        position: static !important;
        max-width: 100%;
        overflow: hidden;
    }

    .board-preview {
        overflow-x: auto;
    }

    .board-preview-head,
    .board-preview-row {
        min-width: 360px;
    }

    .color-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px;
    }

    .metric-card {
        padding: 13px;
    }

    .metric-card strong {
        font-size: var(--kp-fs-23) !important;
    }

    .metric-card span {
        font-size: var(--kp-fs-10_5) !important;
        line-height: 1.35;
    }

    .announcement p,
    .handover p,
    .action-item p,
    .notification-row p,
    .notes-list p,
    .notification-card p {
        font-size: var(--kp-fs-12) !important;
        line-height: 1.5;
    }

    .announcement small,
    .handover small,
    .action-item small,
    .notification-row small,
    .notes-list small {
        font-size: var(--kp-fs-10) !important;
    }

    .notification-card h3 {
        font-size: var(--kp-fs-13) !important;
    }

    .notification-actions {
        flex-wrap: wrap;
    }

    .action-item {
        grid-template-columns: 7px minmax(0, 1fr);
        gap: 8px;
    }

    .action-item > :last-child {
        grid-column: 2;
    }

    .communication-grid .panel {
        padding: 13px;
    }

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

    .announcement,
    .handover,
    .action-item {
        word-break: break-word;
    }

    
    .table-card,
    .kp-table-wrap,
    .kp-register-wrap,
    .kp-longterm-wrap,
    .bulk-card,
    .table-responsive,
    .responsive-table-wrap,
    .register-wrap,
    .longterm-wrap,
    .board-scroll,
    .bulk-scroll,
    .preview-table-wrap,
    .import-preview {
        max-width: 100% !important;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 650px;
    }

    .kp-table {
        min-width: 620px;
    }

    .data-table th,
    .kp-table th {
        font-size: var(--kp-fs-10_5) !important;
    }

    .data-table td,
    .kp-table td {
        font-size: var(--kp-fs-12_5) !important;
    }

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

    .project-card {
        padding: 13px;
    }

    .project-card h2 {
        font-size: var(--kp-fs-17) !important;
    }

    .project-card p {
        font-size: var(--kp-fs-12) !important;
    }

    .project-card .project-actions {
        flex-wrap: wrap;
    }

    .custom-field-row,
    .department-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .custom-field-row small,
    .department-row small {
        font-size: var(--kp-fs-11) !important;
    }

    .kp-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    
    .project-filter-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .project-filter-bar .switch-inline {
        grid-column: 1 / -1;
    }

    .project-management-table thead {
        display: none;
    }

    .project-management-table,
    .project-management-table tbody,
    .project-management-table tr,
    .project-management-table td {
        display: block;
        width: 100%;
    }

    .project-management-table {
        min-width: 0 !important;
    }

    .project-management-table tr {
        position: relative;
        margin: 0 0 10px;
        padding: 12px 50px 12px 18px;
        border: 1px solid var(--kp-border);
        border-radius: 13px;
        background: #fff;
    }

    .project-management-table td {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 8px;
        padding: 5px 0 !important;
        border: 0 !important;
        text-align: left !important;
        font-size: var(--kp-fs-12_5) !important;
    }

    .project-management-table td::before {
        content: attr(data-label);
        color: #7a878b;
        font-size: var(--kp-fs-10_5) !important;
        font-weight: 800;
    }

    .project-management-table .color-column {
        position: absolute;
        left: 7px;
        top: 11px;
        bottom: 11px;
        display: block;
        width: 6px !important;
        padding: 0 !important;
    }

    .project-management-table .color-column::before {
        display: none;
    }

    .project-color-dot {
        width: 6px;
        height: 100%;
    }

    .project-management-table .row-actions {
        position: absolute;
        right: 8px;
        top: 8px;
        display: block;
        width: auto !important;
    }

    .project-management-table .row-actions::before {
        display: none;
    }

    
    .responsive-data-table:not(.project-management-table) thead {
        display: none;
    }

    .responsive-data-table:not(.project-management-table),
    .responsive-data-table:not(.project-management-table) tbody,
    .responsive-data-table:not(.project-management-table) tr,
    .responsive-data-table:not(.project-management-table) td {
        display: block;
        width: 100%;
    }

    .responsive-data-table:not(.project-management-table) {
        min-width: 0 !important;
    }

    .responsive-data-table:not(.project-management-table) tr {
        position: relative;
        margin-bottom: 10px;
        padding: 11px 50px 11px 12px;
        border: 1px solid var(--kp-border);
        border-radius: 12px;
        background: #fff;
    }

    .responsive-data-table:not(.project-management-table) td {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 8px;
        padding: 5px 0 !important;
        border: 0 !important;
        text-align: left !important;
        font-size: var(--kp-fs-12_5) !important;
    }

    .responsive-data-table:not(.project-management-table) td::before {
        content: attr(data-label);
        color: #7a878b;
        font-size: var(--kp-fs-10_5) !important;
        font-weight: 800;
    }

    .responsive-data-table:not(.project-management-table) .row-actions {
        position: absolute;
        right: 7px;
        top: 7px;
        display: block;
        width: auto !important;
    }

    .responsive-data-table:not(.project-management-table) .row-actions::before {
        display: none;
    }

    .table-card {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .inline-menu > div {
        position: fixed;
        z-index: 3500;
        left: 10px;
        right: 10px;
        top: auto;
        bottom: 10px;
        min-width: 0;
    }

    .inline-menu a,
    .inline-menu button {
        min-height: 44px;
        font-size: var(--kp-fs-12) !important;
    }

    .contact-create-grid {
        grid-template-columns: 1fr !important;
    }

    .contact-create-grid .btn-primary-kp {
        width: 100%;
    }

    .contact-table-card {
        overflow: visible !important;
    }

    
    .planning-topbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
        margin-bottom: 10px;
        padding: 11px;
        border-radius: 13px;
    }

    .week-nav {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px auto;
        gap: 7px;
        width: 100%;
        align-items: center;
    }

    .week-nav > div {
        min-width: 0;
    }

    .week-nav span {
        font-size: var(--kp-fs-9_5) !important;
    }

    .week-nav strong {
        font-size: var(--kp-fs-22) !important;
    }

    .week-nav small {
        font-size: var(--kp-fs-10_5) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .week-nav .subtle-btn {
        padding-inline: 10px;
    }

    .planning-filters {
        grid-column: auto !important;
        grid-row: auto !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
        width: 100%;
    }

    .planning-filters input {
        min-width: 0 !important;
    }

    .planning-filters button {
        grid-column: 1 / -1;
    }

    .planning-actions,
    .planning-v2 .planning-actions {
        display: flex !important;
        width: 100%;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 7px;
        overflow-x: auto !important;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .planning-actions::-webkit-scrollbar,
    .planning-v2 .planning-actions::-webkit-scrollbar {
        display: none;
    }

    .planning-actions > * {
        flex: 0 0 auto;
    }

    .planning-actions select {
        max-width: 165px;
    }

    .board-mode-switch {
        flex: 0 0 auto;
    }

    .board-mode-switch a {
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: var(--kp-fs-11) !important;
    }

    .scope-control {
        flex: 0 0 auto;
        font-size: var(--kp-fs-10) !important;
    }

    .scope-control span {
        display: none;
    }

    .scope-control select {
        min-width: 130px !important;
    }

    .week-status {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        font-size: var(--kp-fs-9_5) !important;
    }

    .export-menu a,
    .export-menu button {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 9px 12px;
        font-size: var(--kp-fs-11) !important;
    }

    
    .mobile-planning-tools {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 9px;
    }

    .mobile-project-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 46px;
        padding: 10px 13px;
        border: 1px solid var(--kp-primary);
        border-radius: 10px;
        background: var(--kp-primary);
        color: #fff;
        font-size: var(--kp-fs-13);
        font-weight: 850;
    }

    .mobile-board-hint {
        min-width: 0;
        color: #748186;
        font-size: var(--kp-fs-10_5);
        line-height: 1.4;
    }

    .mobile-project-selection {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 9px;
        padding: 10px 11px;
        border: 1px solid color-mix(in srgb, var(--kp-primary), #fff 72%);
        border-radius: 10px;
        background: color-mix(in srgb, var(--kp-primary), #fff 94%);
    }

    .mobile-project-selection[hidden] {
        display: none;
    }

    .mobile-project-selection span,
    .mobile-project-selection strong {
        display: block;
    }

    .mobile-project-selection span {
        font-size: var(--kp-fs-9);
        color: #748186;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .mobile-project-selection strong {
        margin-top: 2px;
        font-size: var(--kp-fs-12);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-project-selection > div {
        min-width: 0;
    }

    .mobile-project-selection button {
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 9px;
        background: #fff;
        color: #607075;
        font-size: var(--kp-fs-20);
    }

    .planning-workspace,
    .planning-v2 .planning-workspace {
        position: relative;
        display: block !important;
        min-height: 0;
        border-radius: 12px;
        overflow: visible !important;
        background: transparent;
        box-shadow: none;
    }

    .project-drawer,
    .planning-v2 .project-drawer {
        position: fixed !important;
        z-index: 2700;
        left: 10px;
        top: 74px !important;
        bottom: 10px;
        display: flex !important;
        flex-direction: column !important;
        width: min(370px, calc(100vw - 20px));
        max-height: none !important;
        border: 1px solid var(--kp-border) !important;
        border-radius: 15px;
        background: #f8fbfb;
        box-shadow: 0 28px 80px rgba(10, 31, 34, .28);
        overflow: hidden !important;
        transform: translateX(calc(-100% - 24px));
        transition: transform .22s ease;
    }

    .project-drawer.mobile-open,
    .planning-v2 .project-drawer.mobile-open {
        transform: translateX(0);
    }

    .mobile-project-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 2600;
        border: 0;
        background: rgba(10, 29, 32, .38);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s ease, visibility .2s ease;
    }

    .mobile-project-backdrop.show,
    body.project-drawer-open .mobile-project-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-drawer-close {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid var(--kp-border);
        border-radius: 10px;
        background: #fff;
        color: #667579;
        font-size: var(--kp-fs-22);
    }

    .drawer-head {
        flex: 0 0 auto;
        padding: 11px 10px 8px;
    }

    .drawer-head h2 {
        font-size: var(--kp-fs-14) !important;
    }

    .drawer-search {
        flex: 0 0 auto;
        width: calc(100% - 20px);
        margin: 0 10px 8px;
    }

    .project-list,
    .people-drawer .employee-token-list {
        display: block !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 0 8px 10px;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .project-token {
        width: 100%;
        min-height: 54px;
        margin: 5px 0;
        text-align: left;
        cursor: pointer;
    }

    .project-token strong {
        font-size: var(--kp-fs-12) !important;
    }

    .project-token span {
        font-size: var(--kp-fs-10_5) !important;
    }

    .project-token.selected {
        border-color: var(--project-color);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--project-color), transparent 70%);
    }

    .employee-token-wrap {
        grid-template-columns: minmax(0, 1fr) 42px;
    }

    .employee-token {
        min-height: 50px;
    }

    .employee-token-copy strong {
        font-size: var(--kp-fs-12_5) !important;
    }

    .employee-token-copy small {
        font-size: var(--kp-fs-10_5) !important;
    }

    .token-more {
        width: 42px;
        height: 42px;
    }

    .team-list {
        flex: 0 0 auto;
        max-height: 185px;
        overflow-y: auto;
    }

    .team-token strong {
        font-size: var(--kp-fs-12) !important;
    }

    .team-token small {
        font-size: var(--kp-fs-10) !important;
    }

    .unplan-drop-zone {
        flex: 0 0 auto;
        min-height: 78px;
        margin: 8px 9px 10px;
        display: grid;
        place-items: center;
    }

    .unplan-drop-zone span {
        display: none;
    }

    .unplan-drop-zone strong {
        font-size: var(--kp-fs-11) !important;
    }

    .unplan-drop-zone small {
        font-size: var(--kp-fs-9_5) !important;
    }

    .drawer-links {
        flex: 0 0 auto;
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .drawer-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: var(--kp-fs-11_5) !important;
    }

    
    .board-shell {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--kp-border);
        border-radius: 12px;
        overflow: hidden;
        background: var(--plan-bg);
    }

    .board-scroll {
        width: 100%;
        height: auto !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    
    .planning-grid {
        grid-template-columns: 178px repeat(var(--day-count), 145px) !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    .grid-total-head,
    .week-total-cell {
        display: none !important;
    }

    .grid-corner,
    .day-header {
        min-height: 60px;
        padding: 7px;
    }

    .grid-corner {
        left: 0 !important;
    }

    .grid-corner span {
        font-size: var(--kp-fs-10) !important;
    }

    .grid-corner small {
        font-size: var(--kp-fs-9_5) !important;
    }

    .day-header {
        position: sticky;
        top: 0;
        z-index: 24;
    }

    .day-header span {
        font-size: var(--kp-fs-10) !important;
    }

    .day-header strong {
        font-size: var(--kp-fs-20) !important;
    }

    .day-header small {
        font-size: var(--kp-fs-9_5) !important;
    }

    .planning-grid .day-header {
        width: auto;
    }

    .planning-cell,
    .planning-drop-cell {
        min-height: 78px;
        padding: 6px;
        gap: 4px;
        align-content: flex-start;
    }

    .planning-cell.tap-ready,
    .planning-drop-cell.tap-ready {
        cursor: pointer;
    }

    .planning-cell.tap-ready:empty::after,
    .planning-drop-cell.tap-ready:empty::after {
        content: '＋';
        display: grid;
        place-items: center;
        width: 100%;
        height: 34px;
        border: 1px dashed color-mix(in srgb, var(--kp-primary), #fff 55%);
        border-radius: 8px;
        color: var(--kp-primary);
        font-size: var(--kp-fs-18);
        opacity: .65;
    }

    .planning-block {
        min-width: 100%;
        flex: 1 1 100%;
        height: max(38px, var(--plan-block-height));
        padding: 5px 6px;
        touch-action: manipulation;
    }

    .block-copy strong {
        font-size: var(--kp-fs-10_5) !important;
    }

    .block-copy small {
        font-size: var(--kp-fs-9_5) !important;
    }

    
    .project-centric-grid {
        grid-template-columns: 178px repeat(var(--day-count), 154px) !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    .project-centric-grid .grid-total-head,
    .project-centric-grid .project-occupancy {
        display: none !important;
    }

    .project-centric-grid .project-corner,
    .project-centric-grid .project-row-head {
        position: sticky !important;
        left: 0 !important;
    }

    .project-centric-grid .project-corner {
        z-index: 40 !important;
        min-width: 178px !important;
        width: 178px !important;
    }

    .project-centric-grid .project-row-head {
        z-index: 18 !important;
        width: 178px !important;
        min-width: 178px !important;
        min-height: 78px;
        grid-template-columns: 6px minmax(0, 1fr) 38px;
        gap: 8px;
        padding: 8px;
        background: #fff;
    }

    .project-row-head strong {
        font-size: var(--kp-fs-12_5) !important;
        line-height: 1.2;
    }

    .project-row-head span {
        margin-top: 2px;
        font-size: var(--kp-fs-10_5) !important;
        line-height: 1.25;
    }

    .project-row-head small {
        margin-top: 3px;
        font-size: var(--kp-fs-9_5) !important;
        line-height: 1.25;
    }

    .employee-assignment {
        min-width: 122px;
        min-height: 40px;
        padding: 5px 6px;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 6px;
    }

    .mini-avatar {
        width: 27px;
        height: 27px;
        font-size: var(--kp-fs-10) !important;
    }

    .employee-assignment .block-copy strong {
        font-size: var(--kp-fs-10_5) !important;
    }

    .employee-assignment .block-copy small {
        font-size: var(--kp-fs-9_5) !important;
    }

    
    .employee-centric-grid {
        grid-template-columns: 178px repeat(var(--day-count), 150px) !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    .employee-centric-grid .grid-total-head,
    .employee-centric-grid .week-total-cell {
        display: none !important;
    }

    .employee-centric-grid .employee-cell,
    .employee-centric-grid .grid-corner {
        position: sticky !important;
        left: 0 !important;
    }

    .employee-centric-grid .grid-corner {
        z-index: 40 !important;
        width: 178px !important;
        min-width: 178px !important;
    }

    .employee-centric-grid .employee-cell {
        z-index: 18 !important;
        width: 178px !important;
        min-width: 178px !important;
        min-height: 76px;
        grid-template-columns: 32px minmax(0, 1fr) 38px;
        grid-template-rows: auto;
        gap: 7px;
        padding: 7px;
        background: var(--plan-employee);
    }

    .employee-avatar {
        width: 31px;
        height: 31px;
        border-radius: 9px;
        font-size: var(--kp-fs-10) !important;
    }

    .employee-meta strong {
        font-size: var(--kp-fs-11_5) !important;
    }

    .employee-meta span,
    .employee-meta a {
        font-size: var(--kp-fs-9_5) !important;
    }

    .employee-meta a {
        display: none;
    }

    .capacity-mini {
        text-align: right;
        white-space: nowrap;
    }

    .capacity-mini b {
        font-size: var(--kp-fs-10_5) !important;
    }

    .capacity-mini span {
        font-size: var(--kp-fs-9_5) !important;
    }

    .employee-centric-grid .planning-drop-cell {
        min-height: 76px;
    }

    
    .context-menu {
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        bottom: 10px;
        width: auto !important;
        max-width: none !important;
        z-index: 3600;
    }

    .context-title {
        font-size: var(--kp-fs-12) !important;
    }

    .context-menu a,
    .context-menu button {
        min-height: 46px;
        font-size: var(--kp-fs-12_5) !important;
    }

    .copy-assignment-box {
        grid-template-columns: 1fr;
    }

    .copy-assignment-box .subtle-btn {
        width: 100%;
    }

    .kp-dialog,
    .export-email-dialog {
        width: 100% !important;
        max-width: none !important;
        max-height: 90dvh !important;
        margin: auto 0 0 !important;
        border-radius: 18px 18px 0 0 !important;
        overflow: auto;
    }

    .kp-dialog::backdrop,
    .export-email-dialog::backdrop {
        background: rgba(12, 29, 32, .48);
    }

    .dialog-card,
    .export-email-dialog .dialog-card {
        width: 100% !important;
        max-height: calc(90dvh - 8px);
        padding: 16px 14px 18px;
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 18px 18px 0 0;
    }

    .dialog-card h3 {
        font-size: var(--kp-fs-21) !important;
    }

    .dialog-grid,
    .export-email-dialog .dialog-grid {
        grid-template-columns: 1fr !important;
    }

    .dialog-card footer {
        position: sticky;
        bottom: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 16px -14px -18px;
        padding: 11px 14px 14px;
        background: #fff;
        border-top: 1px solid var(--kp-border);
    }

    .dialog-card footer > span {
        display: none;
    }

    .dialog-card footer .danger-btn,
    .dialog-card footer .subtle-btn {
        grid-column: 1;
    }

    .dialog-card footer .btn-primary-kp {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .dialog-close {
        width: 42px;
        height: 42px;
    }

    .export-email-status {
        min-height: 20px;
        font-size: var(--kp-fs-11) !important;
    }

    .undo-toast {
        left: 10px;
        right: 10px;
        bottom: 10px;
        justify-content: space-between;
        font-size: var(--kp-fs-11_5);
    }

    .undo-toast button {
        min-height: 38px;
        font-size: var(--kp-fs-11_5);
    }

    
    .longterm-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }

    .longterm-toolbar .filter-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .longterm-toolbar .filter-bar button {
        grid-column: 1 / -1;
    }

    .longterm-export {
        align-self: flex-start;
    }

    .longterm-wrap,
    .kp-longterm-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .longterm-grid,
    .kp-longterm-grid {
        grid-template-columns: 180px repeat(var(--weeks), 60px) !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    .longterm-corner,
    .kp-longterm-corner,
    .longterm-project,
    .kp-longterm-project {
        width: 180px;
        min-width: 180px;
    }

    .longterm-corner,
    .kp-longterm-corner {
        font-size: var(--kp-fs-10_5) !important;
    }

    .longterm-head strong,
    .kp-longterm-head strong {
        font-size: var(--kp-fs-11) !important;
    }

    .longterm-head small,
    .kp-longterm-head small {
        font-size: var(--kp-fs-9_5) !important;
    }

    .longterm-project,
    .kp-longterm-project {
        min-height: 58px;
    }

    .longterm-project strong,
    .kp-longterm-project strong {
        font-size: var(--kp-fs-11_5) !important;
    }

    .longterm-project small,
    .kp-longterm-project small {
        font-size: var(--kp-fs-10) !important;
    }

    .longterm-cell,
    .kp-longterm-cell {
        min-height: 58px;
        padding-block: 19px;
    }

    
    .report-filter,
    .kp-report-filter {
        display: grid !important;
        grid-template-columns: 1fr 120px;
        gap: 8px;
        width: 100%;
    }

    .report-filter button,
    .kp-report-filter button {
        grid-column: 1 / -1;
    }

    .register-title,
    .kp-register-title {
        grid-template-columns: 7px minmax(0, 1fr);
        padding: 12px;
    }

    .register-title h2,
    .kp-register-title h2 {
        font-size: var(--kp-fs-18) !important;
    }

    .register-title small,
    .kp-register-title small {
        font-size: var(--kp-fs-10) !important;
    }

    .register-title > b,
    .kp-register-title > b {
        grid-column: 2;
        font-size: var(--kp-fs-16) !important;
    }

    .register-wrap,
    .kp-register-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .register-table,
    .kp-register-table {
        min-width: 760px;
    }

    .register-table th,
    .kp-register-table th {
        font-size: var(--kp-fs-10) !important;
    }

    .register-table td,
    .kp-register-table td {
        font-size: var(--kp-fs-11_5) !important;
    }

    .register-table th:first-child,
    .register-table td:first-child,
    .kp-register-table th:first-child,
    .kp-register-table td:first-child {
        min-width: 165px;
    }

    
    .bulk-table {
        min-width: 1180px !important;
    }

    .bulk-table th {
        font-size: var(--kp-fs-9_5) !important;
    }

    .bulk-table input,
    .bulk-table select {
        font-size: var(--kp-fs-16) !important;
    }

    .bulk-actions {
        position: sticky;
        left: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .bulk-actions > * {
        flex: 1 1 150px;
    }

    .import-step h2 {
        font-size: var(--kp-fs-17) !important;
    }

    .import-step p {
        font-size: var(--kp-fs-12) !important;
    }

    
    .kp-login-shell,
    .auth-main {
        max-width: 100%;
        overflow-x: hidden;
    }

    .login-layout {
        display: block !important;
        min-height: 100vh;
    }

    .login-story {
        min-height: auto !important;
        padding: 28px 20px !important;
    }

    .login-story h1 {
        font-size: var(--kp-fs-35) !important;
    }

    .login-story p {
        font-size: var(--kp-fs-14) !important;
    }

    .login-features {
        display: none;
    }

    .login-card {
        width: calc(100% - 20px) !important;
        margin: 10px auto 24px !important;
        padding: 21px !important;
        border-radius: 17px;
    }

    .login-logo img {
        max-width: 185px;
        margin-bottom: 18px;
    }

    .login-card h2 {
        font-size: var(--kp-fs-23);
    }

    .login-card > p {
        font-size: var(--kp-fs-12_5);
    }

    .kp-login-card-small {
        width: calc(100% - 20px) !important;
        margin: 18px auto !important;
        padding: 18px !important;
    }

    .install-body {
        padding: 10px !important;
    }

    .install-shell {
        width: 100%;
    }

    .install-brand {
        align-items: flex-start;
    }

    .install-mark {
        width: 48px;
        height: 48px;
    }

    .install-brand h1 {
        font-size: var(--kp-fs-23);
    }

    .install-brand p {
        font-size: var(--kp-fs-12);
    }

    .install-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .install-card {
        padding: 14px;
        border-radius: 15px;
    }

    .seed-option {
        min-height: 60px;
    }

    .seed-option strong {
        font-size: var(--kp-fs-12_5) !important;
    }

    .seed-option small,
    .confirm-box {
        font-size: var(--kp-fs-10_5) !important;
    }
}

@media (max-width: 520px) {
    
    .app-header {
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        gap: 6px;
        padding-inline: 7px !important;
    }

    .mobile-menu-toggle {
        width: 42px;
        height: 42px;
    }

    .brand img {
        width: min(120px, 33vw) !important;
    }

    .notification-button {
        width: 40px;
        height: 40px;
    }

    .user-menu summary {
        width: 40px;
        max-width: 40px;
        height: 40px;
    }

    .app-main {
        padding: 9px 8px 24px !important;
    }

    .page-head h1,
    .kp-page-head h1 {
        font-size: var(--kp-fs-25) !important;
    }

    .head-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .head-actions > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .metric-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .metric-card strong {
        font-size: var(--kp-fs-22) !important;
    }

    .metric-card span {
        font-size: var(--kp-fs-10) !important;
    }

    .week-nav {
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    }

    .week-nav .subtle-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .planning-filters {
        grid-template-columns: 1fr !important;
    }

    .planning-filters button {
        grid-column: auto !important;
    }

    .mobile-board-hint {
        display: none;
    }

    .project-drawer,
    .planning-v2 .project-drawer {
        left: 6px;
        right: 6px;
        top: 68px !important;
        bottom: 6px;
        width: auto;
    }

    
    .planning-grid {
        grid-template-columns: 164px repeat(var(--day-count), 140px) !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    .project-centric-grid {
        grid-template-columns: 164px repeat(var(--day-count), 148px) !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    .project-centric-grid .project-corner,
    .project-centric-grid .project-row-head {
        width: 164px !important;
        min-width: 164px !important;
    }

    .project-centric-grid .project-corner {
        min-width: 164px !important;
    }

    .project-row-head {
        grid-template-columns: 5px minmax(0, 1fr) 36px;
        padding: 7px;
    }

    .project-row-head strong {
        font-size: var(--kp-fs-12) !important;
    }

    .project-row-head span {
        font-size: var(--kp-fs-10) !important;
        white-space: normal;
        line-height: 1.2;
        max-height: 30px;
    }

    .project-row-head small {
        font-size: var(--kp-fs-9_5) !important;
    }

    .employee-assignment {
        min-width: 116px;
    }

    .employee-centric-grid {
        grid-template-columns: 164px repeat(var(--day-count), 144px) !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    .employee-centric-grid .grid-corner,
    .employee-centric-grid .employee-cell {
        width: 164px !important;
        min-width: 164px !important;
    }

    .employee-centric-grid .employee-cell {
        grid-template-columns: 30px minmax(0, 1fr) 36px;
        padding: 6px;
    }

    .planning-cell,
    .planning-drop-cell {
        min-height: 78px;
    }

    .day-header strong {
        font-size: var(--kp-fs-19) !important;
    }

    .filter-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .filter-bar > input:first-child {
        grid-column: 1 / -1;
    }

    .filter-bar button {
        min-height: 44px;
    }

    .project-management-table td,
    .responsive-data-table:not(.project-management-table) td {
        grid-template-columns: 98px minmax(0, 1fr);
    }

    .color-grid {
        grid-template-columns: 1fr !important;
    }

    .report-filter,
    .kp-report-filter,
    .longterm-toolbar .filter-bar {
        grid-template-columns: 1fr !important;
    }

    .longterm-grid,
    .kp-longterm-grid {
        grid-template-columns: 170px repeat(var(--weeks), 58px) !important;
    }

    .longterm-corner,
    .kp-longterm-corner,
    .longterm-project,
    .kp-longterm-project {
        width: 170px;
        min-width: 170px;
    }

    .form-actions,
    .kp-form-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .form-actions > *:last-child,
    .kp-form-actions > *:last-child {
        grid-column: 2;
    }

    .form-actions > *:only-child,
    .kp-form-actions > *:only-child {
        grid-column: 1 / -1;
    }

    .panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .panel-head > *:last-child {
        width: 100%;
    }

    .data-table {
        min-width: 600px;
    }

    .bulk-table {
        min-width: 1120px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-nav,
    .mobile-nav-backdrop,
    .project-drawer,
    .mobile-project-backdrop {
        transition: none !important;
    }
}



.mobile-cell-add {
    display: none;
}

@media (max-width: 900px), (pointer: coarse) {
    .mobile-project-selection small {
        display: block;
        margin-top: 3px;
        color: #68777b;
        font-size: var(--kp-fs-10) !important;
        line-height: 1.25;
    }

    .mobile-project-selection {
        position: sticky;
        top: 68px;
        z-index: 55;
        box-shadow: 0 8px 22px rgba(19, 51, 55, .08);
    }

    .planning-drop-cell.tap-ready {
        outline: 2px solid color-mix(in srgb, var(--kp-primary), transparent 54%);
        outline-offset: -3px;
    }

    .planning-drop-cell.tap-ready > .mobile-cell-add {
        position: absolute;
        right: 7px;
        bottom: 7px;
        z-index: 24;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 2px solid #fff;
        border-radius: 11px;
        background: var(--kp-primary);
        color: #fff;
        box-shadow: 0 4px 12px rgba(11, 111, 116, .28);
        font-size: var(--kp-fs-23);
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
        touch-action: manipulation;
    }

    .planning-drop-cell.tap-ready > .mobile-cell-add:active {
        transform: scale(.94);
    }

    .planning-drop-cell[data-mobile-adding="true"] > .mobile-cell-add {
        opacity: .55;
        pointer-events: none;
    }
}


@media (max-width: 600px) {
    .planning-v2 .planning-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1.35fr) minmax(128px, .85fr) !important;
        gap: 8px !important;
        width: 100% !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .planning-v2 .planning-actions > * {
        min-width: 0 !important;
        max-width: none !important;
    }

    .planning-v2 .board-mode-switch {
        grid-column: 1;
        width: 100%;
    }

    .planning-v2 .board-mode-switch a {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        padding-inline: 7px;
    }

    .planning-v2 .scope-control {
        grid-column: 2;
        width: 100%;
    }

    .planning-v2 .scope-control select {
        width: 100%;
        min-width: 0 !important;
        max-width: none !important;
    }

    .planning-v2 .week-status {
        grid-column: 1;
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .planning-v2 #weekStatus {
        grid-column: 2;
        width: 100%;
        max-width: none !important;
    }

    .planning-v2 #copyWeekButton {
        grid-column: 1;
        width: 100%;
        min-width: 0;
    }

    .planning-v2 .export-menu {
        grid-column: 2;
        width: 100%;
    }

    .planning-v2 .export-menu a,
    .planning-v2 .export-menu button {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        padding-inline: 7px;
    }
}


@media (max-width: 600px) {
    .users-management-table tr {
        padding: 12px !important;
        margin-bottom: 8px !important;
        display: grid !important;
        grid-template-columns: 1fr auto;
        gap: 4px 10px;
    }

    .users-management-table td {
        grid-column: 1 / -1;
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 3px 0 !important;
        min-height: 0 !important;
        align-items: start;
    }

    .users-management-table td:first-child {
        padding-top: 0 !important;
    }

    .users-management-table td:first-child strong {
        font-size: var(--kp-fs-14);
        line-height: 1.25;
    }

    .users-management-table td:first-child small {
        margin-top: 2px;
        overflow-wrap: anywhere;
    }

    .users-management-table .kp-actions {
        position: static !important;
        grid-column: 1 / -1;
        display: flex !important;
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        padding-top: 7px !important;
        margin-top: 3px;
        border-top: 1px solid #edf1f1 !important;
    }

    .users-management-table .kp-actions::before {
        display: none !important;
    }

    .users-management-table .kp-actions .kp-btn {
        min-height: 34px;
        padding: 6px 10px;
    }
}


@media (max-width: 900px) {
    .planning-attention-strip{align-items:flex-start;margin:8px 0;padding:8px 9px}.planning-attention-main{gap:5px}.planning-attention-main>strong{width:100%;margin-bottom:1px}.attention-chip{min-height:27px;padding:4px 7px;font-size: var(--kp-fs-9_5)}.attention-recent-toggle{padding:5px 2px;font-size: var(--kp-fs-9_5)}.staffing-gap-list{grid-template-columns:1fr}.planning-insight-panel{padding:8px}.recent-change-list>div{grid-template-columns:38px 1fr;font-size: var(--kp-fs-9_5)}.mobile-planning-tools{grid-template-columns:1fr auto!important}.mobile-today-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border:1px solid var(--kp-border);border-radius:10px;background:#fff;color:var(--kp-primary);font-size: var(--kp-fs-10);font-weight:850;text-decoration:none}.mobile-board-hint{grid-column:1/-1}.staffing-gap-badge{right:2px;top:2px;min-width:23px;height:18px;font-size: var(--kp-fs-8)}.day-capacity-badge{right:2px;top:2px;font-size: var(--kp-fs-7_5);padding:1px 4px}.suggestion-row{align-items:stretch;flex-direction:column}.suggestion-row .btn-primary-kp{width:100%}.staffing-requirements-grid{grid-template-columns:1fr}.project-token-wrap{grid-template-columns:minmax(0,1fr) 34px}.project-token-wrap .favorite-toggle{width:34px;height:34px}.notification-page-head-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.notification-page-head-actions form,.notification-page-head-actions button{width:100%}
}
@media (max-width: 600px) {
    .planning-attention-strip{display:grid;grid-template-columns:1fr auto}.planning-attention-main{min-width:0}.planning-insight-panel{margin-inline:0}.staffing-requirements-grid label{grid-template-columns:minmax(0,1fr) 70px}.copy-preview-summary{flex-wrap:wrap}.copy-preview-summary b{width:100%;margin-left:0}.notification-page-head-actions{grid-template-columns:1fr}
}

@media (max-width: 600px){.entity-delete-zone{display:grid;grid-template-columns:1fr;gap:10px}.entity-delete-zone .danger-btn{width:100%}}


@media (max-width: 900px), (pointer: coarse) {
    
    .project-centric-grid,
    .employee-centric-grid {
        isolation: isolate !important;
    }

    
    .project-centric-grid .planning-drop-cell,
    .employee-centric-grid .planning-drop-cell {
        position: relative !important;
        z-index: 0 !important;
        isolation: isolate !important;
    }

    .project-centric-grid .planning-drop-cell.tap-ready > .mobile-cell-add,
    .employee-centric-grid .planning-drop-cell.tap-ready > .mobile-cell-add {
        z-index: 2 !important;
    }

    
    .project-centric-grid .project-row-head,
    .employee-centric-grid .employee-cell {
        position: sticky !important;
        left: 0 !important;
        z-index: 100 !important;
        background: #fff !important;
        isolation: isolate !important;
        transform: translateZ(0);
    }

    .employee-centric-grid .employee-cell {
        background: var(--plan-employee) !important;
    }

    
    .project-centric-grid .project-corner,
    .employee-centric-grid .grid-corner {
        position: sticky !important;
        left: 0 !important;
        z-index: 120 !important;
        isolation: isolate !important;
        transform: translateZ(0);
    }
}


@media (max-width: 900px) {
    .system-announcement-banner {
        grid-template-columns: 34px minmax(0,1fr) auto;
        gap: 9px;
        margin-bottom: 10px;
        padding: 10px;
    }
    .system-announcement-copy strong { font-size: var(--kp-fs-12_5); }
    .system-announcement-copy p { font-size: var(--kp-fs-10_5); }

    .feedback-layout { grid-template-columns: 1fr; }
    .feedback-create-card { position: static; }
    .feedback-card { padding: 12px; }
    .feedback-filter { grid-template-columns: 1fr; }

    .backup-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .backup-test-form { align-items: stretch; flex-direction: column; }
    .backup-test-form .subtle-btn { width: 100%; }
    .backup-history-table { overflow-x: auto !important; border: 1px solid var(--kp-border) !important; background: #fff !important; }
    .backup-history-table .data-table { min-width: 760px; }

    .import-file-row { align-items: stretch; flex-direction: column; }
    .import-file-picker { width: 100%; min-height: 48px; }
    .import-upload-form .btn-primary-kp { width: 100%; }

    .system-announcement-admin-card > summary { grid-template-columns: 1fr auto; }
    .system-announcement-type { grid-column: 1; justify-self: start; }
    .system-announcement-admin-card > summary > div { grid-column: 1 / -1; grid-row: 2; }
    .system-announcement-admin-card > summary > .status-pill { grid-column: 2; grid-row: 1; }
}

@media (max-width: 600px) {
    .system-announcement-banner { grid-template-columns: 30px minmax(0,1fr) auto; border-radius: 11px; }
    .system-announcement-icon { width: 30px; height: 30px; border-radius: 8px; }
    .backup-metrics { grid-template-columns: 1fr 1fr; gap: 7px; }
    .backup-metrics .metric-card { padding: 11px; }
    .backup-metrics .metric-card strong { font-size: var(--kp-fs-14); }
}

@media (max-width: 900px) {
    .user-popover {
        padding: 10px !important;
    }
    .user-popover .user-menu-group > summary {
        min-height: 46px;
        padding: 10px 8px;
    }
    .user-popover .user-menu-group > div > a {
        min-height: 44px;
        padding: 10px 11px;
        font-size: var(--kp-fs-13);
    }
    .user-popover .user-menu-logout button {
        min-height: 44px;
        font-size: var(--kp-fs-13);
    }
}

@media (max-width: 900px){
    .replacement-gap-toast{left:12px;right:12px;bottom:76px;width:auto;max-width:none;grid-template-columns:46px minmax(0,1fr) auto;gap:11px;padding:13px 12px 14px;border-radius:17px;transform-origin:center bottom}
    .replacement-gap-icon{width:46px;height:46px;border-radius:14px}
    .replacement-gap-icon svg{width:23px;height:23px}
    .replacement-gap-title{font-size:var(--kp-fs-13)}
    .replacement-gap-message{font-size:var(--kp-fs-10_5)}
    .replacement-gap-hint{font-size:var(--kp-fs-9_5)}
    .replacement-gap-primary{min-height:44px;padding-inline:12px;font-size:var(--kp-fs-10_5)}
    .replacement-gap-close{width:44px;height:44px;font-size:var(--kp-fs-18)}
    .replacement-gap-choice{align-items:stretch}
    .suggestion-dialog{width:min(620px,calc(100% - 20px));max-width:620px}
}
@media (max-width: 520px){
    .replacement-gap-toast{left:9px;right:9px;bottom:70px;grid-template-columns:42px minmax(0,1fr) 42px;align-items:start;gap:10px;padding:12px 11px 65px;border-radius:16px}
    .replacement-gap-icon{width:42px;height:42px;border-radius:12px}
    .replacement-gap-icon svg{width:21px;height:21px}
    .replacement-gap-copy{padding-top:1px}
    .replacement-gap-eyebrow{font-size:var(--kp-fs-8)}
    .replacement-gap-title{font-size:var(--kp-fs-12_5)}
    .replacement-gap-message{font-size:var(--kp-fs-10);line-height:1.34}
    .replacement-gap-hint{margin-top:3px;font-size:var(--kp-fs-9)}
    .replacement-gap-actions{display:contents}
    .replacement-gap-primary{position:absolute;left:11px;right:11px;bottom:11px;width:calc(100% - 22px);min-height:44px}
    .replacement-gap-close{grid-column:3;grid-row:1;justify-self:end}
    .suggestion-dialog{width:calc(100% - 12px);max-width:none;margin:auto 6px 6px;border-radius:20px 20px 14px 14px}
    .suggestion-dialog .dialog-card{padding:15px 14px 13px}
    .suggestion-dialog .dialog-card header{margin-bottom:9px;padding-bottom:10px}
    .suggestion-dialog .dialog-card h3{font-size:var(--kp-fs-17)}
    .suggestion-dialog .suggestion-list{max-height:58vh;gap:7px}
    .suggestion-dialog .suggestion-row{padding:11px;border-radius:11px}
    .suggestion-dialog .suggestion-row .btn-primary-kp{width:100%;min-height:44px;margin-top:4px}
    .suggestion-dialog .dialog-card footer{display:block;margin-top:10px;padding-top:10px}
    .suggestion-dialog .dialog-card footer .subtle-btn{width:100%;min-height:44px}
}