/* PLANNING MAKER STYLES=========================================*/
   .planning-maker-container {
       background-color: var(--bg-body);
       color: var(--text-main);
       height: calc(100vh - 45px);
       font-family: 'Inter', sans-serif;
       display: flex;
       flex-direction: column;
       position: relative;
       /* Ensure overlay positions correctly relative to this container */
   }

   /* Toolbar */
   .pm-toolbar {
       display: grid;
       grid-template-columns: 1fr auto 1fr;
       align-items: center;
       padding: 12px 24px;
       border-bottom: 1px solid var(--border-panel);
       background: var(--bg-card);
       position: sticky;
       top: 45px;
       z-index: 85;
       /* Fix for desktop visibility */
       min-height: 60px;
       height: auto;
   }

   .pm-toolbar-actions {
       display: flex;
       align-items: center;
       justify-content: flex-end;
       gap: 6px;
   }

   /* Base Visibility Toggles (Desktop Defaults) */
   .pm-desktop-only {
       display: inline-block;
   }

   .pm-mobile-only {
       display: none;
   }

   .pm-desktop-text {
       display: inline;
   }

   .pm-mobile-icon {
       display: none;
   }

   /* Control Layouts */
   .pm-controls {
       display: flex;
       gap: 12px;
       align-items: center;
       justify-content: center;
   }

   .pm-nav {
       display: flex;
       align-items: center;
       background: var(--bg-card);
       border: 1px solid var(--border-panel);
       border-radius: 8px;
       padding: 4px;
   }

   .pm-btn-nav {
       background: transparent;
       border: none;
       width: 32px;
       height: 32px;
       border-radius: 6px;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       color: var(--text-muted);
       transition: all 0.2s;
   }

   .pm-btn-nav:hover {
       background: var(--bg-hover);
       color: var(--text-main);
   }

   .pm-date-range {
       font-size: 14px;
       font-weight: 600;
       margin: 0 12px;
       color: var(--text-main);
       min-width: 180px;
       text-align: center;
       white-space: nowrap;
   }

   .pm-btn-today {
       display: none !important;
       /* Unified with .pm-btn-copy */
   }

   .pm-btn-today:hover {
       border-color: var(--primary);
       color: var(--primary);
       background: var(--bg-hover);
   }

   .pm-hub-select {
       height: 42px;
       padding: 0 12px;
       border-radius: 8px;
       border: 1px solid var(--border-color);
       background: var(--bg-card);
       color: var(--text-main);
       font-size: 15px;
       font-weight: 600;
       cursor: pointer;
       outline: none;
   }

   .pm-hub-select:focus {
       border-color: var(--primary);
   }

   .pm-subtitle {
       display: block;
       font-size: 14px;
       color: #a1a1aa;
       margin-top: 4px;
       display: flex;
       align-items: center;
   }

   .pm-hub-input {
        background: var(--bg-input);
        border: 1px solid var(--border-panel);
        color: var(--text-main);
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 18px;
        font-weight: 600;
        width: 250px;
        outline: none;
    }

   .pm-hub-select {
       background: var(--bg-card);
       border: 1px solid var(--border-panel);
       color: var(--text-main);
       padding: 6px 12px;
       border-radius: 8px;
       font-size: 16px;
       font-weight: 600;
       cursor: pointer;
       outline: none;
       transition: all 0.2s;
       box-shadow: var(--shadow-sm);
   }

   .pm-hub-select:focus {
       border-color: var(--primary);
       box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
   }

   .pm-subtitle:hover i {
       color: var(--text-main) !important;
   }

   .pm-controls {
       display: flex;
       align-items: center;
       gap: 16px;
       font-weight: 500;
       margin-right: 7px;
   }

   .pm-btn-copy {
       display: flex;
       align-items: center;
       gap: 6px;
       padding: 0 12px;
       font-size: 13px;
       font-weight: 600;
       background: var(--bg-card);
       border: 1px solid var(--border-color);
       border-radius: 6px;
       color: var(--text-main);
       cursor: pointer;
       transition: all 0.2s ease;
       box-shadow: var(--shadow-sm);
       height: 36px;
       white-space: nowrap;
   }

   .pm-btn-copy:hover {
       background: var(--bg-hover);
       border-color: var(--primary);
       box-shadow: var(--shadow-md);
       transform: translateY(-1px);
   }

   .pm-btn-copy i {
       font-size: 16px;
       transition: transform 0.2s;
   }

   .pm-btn-copy:hover i {
       transform: scale(1.1);
   }

   /* Specific Button Variations (States) */
   .pm-btn-validated {
       background: rgba(16, 185, 129, 0.05) !important;
       border-color: #10b981 !important;
       color: #10b981 !important;
   }

   .pm-btn-validated i {
       color: #10b981 !important;
   }

   .pm-btn-clear:hover {
       background: rgba(239, 68, 68, 0.05) !important;
       border-color: #ef4444 !important;
   }

   .pm-btn-rotation:hover {
       background: rgba(139, 92, 246, 0.05) !important;
       border-color: #8b5cf6 !important;
   }

   /* Google Button overrides */
   .pm-btn-google.connected {
       background: #10b981 !important;
       border-color: #10b981 !important;
       color: white !important;
   }

   .pm-btn-google.connected i {
       color: white !important;
       -webkit-text-fill-color: white !important;
   }

   .pm-btn-google.revoked {
       background: rgba(245, 158, 11, 0.05) !important;
       border-color: #f59e0b !important;
   }

   .pm-copy-btn {
       width: 28px;
       height: 28px;
       min-width: 28px;
       background: transparent;
       border: none;
       color: var(--text-muted);
       cursor: pointer;
       border-radius: 4px;
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       transition: all 0.2s;
   }

   .pm-member-row:hover .pm-copy-btn {
       opacity: 1;
   }

   .pm-copy-btn:hover {
       background: var(--bg-input);
       color: #3b82f6;
   }

    .pm-view-toggles {
        display: flex;
        background: var(--bg-input);
        padding: 2px;
        border-radius: 8px;
        border: 1px solid var(--border-panel);
    }

   .pm-btn-toggle {
       width: 32px;
       height: 32px;
       background: transparent;
       color: var(--text-muted);
       border: none;
   }

    .pm-btn-toggle.active {
        background: var(--border-panel);
        color: var(--text-main);
    }

   /* Grid Layout */
   .pm-grid-container {
       display: flex;
       flex: 1;
       overflow: auto;
       /* Allow scrolling both directions */
       position: relative;
   }

   /* Sidebar */
   .pm-sidebar {
       width: 250px;
       flex-shrink: 0;
       border-right: 1px solid var(--border-color);
       background: var(--bg-card);
       position: sticky;
       left: 200px;
       top: 0;
       align-self: flex-start;
       /* Width of pm-shifts-sidebar */
       z-index: 10;
   }

    .pm-shifts-sidebar {
        width: 200px;
        flex-shrink: 0;
        border-right: 1px solid var(--border-panel);
        background: var(--bg-card);
        position: sticky;
        left: 0;
        top: 0;
        z-index: 11;
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }

   .planning-maker-container.is-staff .pm-sidebar {
       left: 0;
   }

   .pm-sidebar-content {
       min-height: 100%;
   }

   /* Timeline */
   .pm-timeline {
       flex: 1;
       display: flex;
       flex-direction: column;
       min-width: 800px;
       /* Ensure scroll on small screens */
   }

   /* Headers */
    .pm-header-cell {
        height: 60px;
        min-height: 60px;
        max-height: 60px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 0 20px;
        border-bottom: 1px solid var(--border-panel);
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        position: sticky;
        top: 0;
        z-index: 80;
        background: var(--bg-card);
    }

   .pm-header-team {
       justify-content: flex-start;
   }

    .pm-timeline-header {
        display: flex;
        height: 60px;
        min-height: 60px;
        max-height: 60px;
        box-sizing: border-box;
        border-bottom: 1px solid var(--border-panel);
        position: sticky;
        top: 0;
        z-index: 80;
        background: var(--bg-card);
    }

   .pm-header-day-cell {
       flex: 1;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       border-right: 1px solid var(--border-panel);
   }

   .pm-day-name {
       font-size: 12px;
       color: var(--text-muted);
       text-transform: capitalize;
       margin-bottom: 2px;
   }

   .pm-day-date {
       font-size: 13px;
       font-weight: 600;
       color: var(--text-main);
   }

   /* Rows & Cells */
    .pm-timeline-row {
        display: flex;
        height: 60px;
        /* Reduced from 80px */
        border-bottom: 1px solid var(--border-panel);
    }

   .pm-member-row {
       height: 60px;
       /* Reduced from 80px */
       border-bottom: 1px solid var(--border-panel);
       padding: 0 10px;
       /* Reduced padding */
       display: flex;
       align-items: center;
       transition: background-color 0.15s;
       position: relative;
       /* Context for absolute positioning if needed */
   }

   .pm-member-row.draggable {
       cursor: grab;
   }

   .pm-member-row.draggable:hover {
       background: var(--bg-input);
   }

   .pm-member-row.draggable:active {
       cursor: grabbing;
   }

    .pm-day-cell {
        flex: 1;
        border-right: 1px solid var(--border-panel);
        position: relative;
        padding: 4px 0;
    }

   /* Member Info */
   .pm-member-info {
       display: flex;
       align-items: center;
       gap: 8px;
       /* Reduced gap */
       width: 100%;
       position: relative;
       /* For absolute pos of warning */
       padding-right: 45px;
       /* Increased space for absolute right elements */
   }

   /* Warning Icon positioned top-right of member cell */
   .pm-off-warning-icon {
       position: absolute;
       top: 4px;
       right: 4px;
       color: #ef4444;
       font-size: 14px;
       cursor: pointer;
       z-index: 5;
       margin: 0;
   }

   .pm-member-avatar {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       background: linear-gradient(135deg, var(--primary), var(--primary-dark));
       display: flex;
       align-items: center;
       justify-content: center;
       color: #ffffff;
       font-weight: 800;
       font-size: 13px;
       flex-shrink: 0;
       border: 2px solid var(--bg-card);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   }

   .pm-member-details {
       display: flex;
       flex-direction: column;
       min-width: 0;
       /* Allow truncation */
       margin-right: auto;
   }

   .pm-member-name {
       font-size: 13px;
       font-weight: 600;
       color: var(--text-main);
       display: block;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   /* Member Role Container */
   .pm-member-role {
       font-size: 10px;
       color: var(--text-muted);
       margin-top: 2px;
       display: flex;
       justify-content: flex-start;
       /* Align left */
       width: fit-content;
   }

   .pm-day-date-container {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       width: 100%;
       position: relative;
   }

   .pm-volontariat-indicator {
       cursor: pointer;
       width: 18px;
       height: 18px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.2s ease;
       z-index: 10;
       flex-shrink: 0;
   }

   .pm-volontariat-indicator:hover {
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }

   .pm-leave-indicator {
       cursor: pointer;
       width: 18px;
       height: 18px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.2s ease;
       z-index: 10;
       flex-shrink: 0;
   }

   .pm-leave-indicator:hover {
       box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
   }

   .avatar-circle {
       width: 24px;
       height: 24px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 10px;
       font-weight: 700;
       flex-shrink: 0;
   }

   /* Current day highlight */
   .pm-header-day-cell.is-today {
       background: rgba(59, 130, 246, 0.15);
   }

   .pm-header-day-cell.is-today .pm-day-name,
   .pm-header-day-cell.is-today .pm-day-date {
       color: #3b82f6;
       font-weight: 700;
   }

   .pm-day-cell.is-today {
       background: rgba(59, 130, 246, 0.08);
   }

   /* Holiday highlight (Golden Halo) */
   .pm-header-day-cell.is-holiday {
       background: rgba(251, 191, 36, 0.2) !important;
   }

   .pm-header-day-cell.is-holiday .pm-day-name,
   .pm-header-day-cell.is-holiday .pm-day-date {
       color: #d97706 !important;
       font-weight: 800 !important;
   }

   .pm-day-cell.is-holiday {
       background: rgba(251, 191, 36, 0.1) !important;
   }


   /* Birthday decoration */
   .pm-day-cell.is-birthday {
       background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 146, 60, 0.15) 100%);
       position: relative;
   }

   .pm-day-cell.is-birthday::before {
       content: '??';
       position: absolute;
       top: 4px;
       right: 4px;
       font-size: 10px;
       opacity: 0.6;
   }

   /* Restored Fixed positioning for Hours */
   .pm-member-hours {
       position: absolute;
       top: 24px;
       right: 4px;
       font-size: 12px;
       font-weight: 700;
       color: var(--primary) !important;
       white-space: nowrap;
       text-align: right;
       margin: 0 !important;
       width: auto;
   }

   /* Shift Bars */
   .pm-shift-bar-container {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       height: 50px;
       margin-left: 4px;
       margin-right: 4px;
       /* width and left set by JS */
   }

   .shift-bar {
       width: 100%;
       height: 100%;
       border-radius: 6px;
       display: flex;
       align-items: center;
       padding: 0 8px;
       font-size: 11px;
       font-weight: 600;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
       overflow: hidden;
       position: relative;
       color: var(--sh-text);
   }

   .pm-volontariat-indicator:hover {
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }

   /* Shift+ Branding */
   .sh-plus {
       display: inline-block;
       color: #fbbf24;
       /* Golden yellow */
       background: linear-gradient(135deg, #fbbf24, #d97706);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       font-weight: 800;
       transform: rotate(8deg) skew(-5deg);
       margin-left: 2px;
       filter: drop-shadow(0 0 2px rgba(217, 119, 6, 0.3));
       font-family: 'Inter', sans-serif;
   }

   .shift-bar.striped {
       position: absolute;
       top: 0;
       bottom: 0;
       background: repeating-linear-gradient(45deg,
               rgba(0, 0, 0, 0.08),
               rgba(0, 0, 0, 0.08) 5px,
               rgba(0, 0, 0, 0.15) 5px,
               rgba(0, 0, 0, 0.15) 10px);
       border-left: 1px solid rgba(255, 255, 255, 0.15);
       border-right: 1px solid rgba(255, 255, 255, 0.15);
       z-index: 1;
   }

   .pm-shift-content {
       display: flex;
       flex-direction: column;
       line-height: 1.2;
       z-index: 2;
   }

   .pm-shift-time {
       font-size: 10px;
       opacity: 0.9;
       font-weight: 400;
   }

   /* Color Variants */
    .shift-ouverture {
        background: var(--sh-cyan);
        color: var(--sh-text);
    }

    .shift-ouverture-full {
        background: var(--primary);
        color: white;
    }

    .shift-milieu {
        background: var(--sh-green);
        color: var(--sh-text);
    }

    .shift-off,
    .shift-conge,
    .shift-amenagement {
        background: repeating-linear-gradient(45deg,
                #1a1a24,
                #1a1a24 10px,
                #22222e 10px,
                #22222e 20px) !important;
        color: #ffffff !important;
        align-items: flex-start;
        padding-top: 6px;
        border: 1px solid #222;
    }

    .shift-off,
    .shift-conge,
    .shift-amenagement {
        font-weight: 700 !important;
    }

    /* Ensure text is white on dark striped shifts */
    .shift-bar.shift-off,
    .shift-bar.shift-conge,
    .shift-bar.shift-amenagement {
        color: #ffffff !important;
    }

    .shift-bar.shift-off .pm-shift-time,
    .shift-bar.shift-conge .pm-shift-time,
    .shift-bar.shift-amenagement .pm-shift-time {
        color: rgba(255, 255, 255, 0.8) !important;
    }

   /* Shift Sidebar */
   .pm-shifts-sidebar {
       width: 200px;
       flex-shrink: 0;
       background: var(--bg-card);
       border-right: 1px solid var(--border-panel);
       display: flex;
       flex-direction: column;
       position: sticky;
       left: 0;
       z-index: 11;
   }

   .pm-shifts-header {
       height: 60px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0 16px;
       border-bottom: 1px solid var(--border-panel);
       background: var(--bg-body);
       position: sticky;
       top: 0;
       z-index: 80;
   }

   .pm-shifts-header span {
       font-size: 11px;
       font-weight: 800;
       color: var(--text-muted);
       letter-spacing: 0.1em;
       text-transform: uppercase;
   }

    .pm-shifts-tray {
        display: flex;
        flex-direction: row;
        gap: 6px;
        align-items: center;
        padding: 0 6px;
        border-bottom: 1px solid var(--border-panel);
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        overflow-x: auto;
        overflow-y: hidden;
        box-sizing: border-box;
        background: var(--bg-surface-elevated) !important;
    }

   .pm-add-shift-btn {
       background: none;
       border: none;
       color: var(--text-main);
       cursor: pointer;
       font-size: 18px;
   }

   .pm-shifts-list {
       padding: 15px;
       display: flex;
       flex-direction: column;
       gap: 10px;
       overflow-y: auto;
   }

   .pm-shift-item {
       background: var(--bg-card);
       border: 1px solid var(--border-panel);
       padding: 12px 14px 12px 20px;
       border-radius: 10px;
       cursor: grab;
       display: flex;
       align-items: center;
       justify-content: space-between;
       transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
   }

   .pm-shift-item:hover {

       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       border-color: var(--primary-light);
   }

   .pm-shift-item:active {
       cursor: grabbing;
       transform: scale(0.96);
   }

   .pm-shift-item::before {
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       width: 6px;
       background: var(--shift-color, var(--text-muted));
   }

   /* OFF, Congé, and Aménagement - Unified Striped Black Style */
   .pm-shift-item.is-off,
   .pm-shift-item.is-conge,
   .pm-shift-item.is-amenagement {
       background: repeating-linear-gradient(45deg,
               #1a1a24,
               #1a1a24 10px,
               #22222e 10px,
               #22222e 20px) !important;
       border: 1px solid #222;
       color: #ffffff !important;
       align-items: center !important;
       padding-left: 14px;
   }

   .pm-shift-item.is-off::before,
   .pm-shift-item.is-conge::before {
       display: none;
   }

   .pm-shift-item.is-off .pm-shift-name,
   .pm-shift-item.is-conge .pm-shift-name,
   .pm-shift-item.is-amenagement .pm-shift-name {
       color: #ffffff !important;
   }

   .pm-shift-item.is-off .pm-shift-time,
   .pm-shift-item.is-conge .pm-shift-time,
   .pm-shift-item.is-amenagement .pm-shift-time {
       color: rgba(255, 255, 255, 0.6) !important;
   }

   .pm-shift-content {
       display: flex;
       flex-direction: column;
       gap: 2px;
   }

   .pm-shift-name {
       font-size: 14px;
       font-weight: 700;
       color: var(--text-main);
   }

   .pm-shift-time {
       font-size: 11px;
       font-weight: 500;
       color: var(--text-muted);
       letter-spacing: 0.01em;
   }

   .pm-del-shift-btn {
       background: none;
       border: none;
       color: var(--text-muted);
       cursor: pointer;
   }

   .pm-del-shift-btn:hover {
       color: #ef4444;
   }

   .pm-shifts-header-actions {
       display: flex;
       gap: 8px;
       align-items: center;
   }

   .pm-icon-btn {
       background: var(--bg-card);
       border: 1px solid var(--border-panel);
       width: 28px;
       height: 28px;
       color: var(--text-muted);
       cursor: pointer;
       border-radius: 6px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.2s;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }

   .pm-icon-btn:hover {
       color: var(--primary);
       border-color: var(--primary-light);

   }

   .pm-icon-btn.active {
       color: white;
       background: var(--primary);
       border-color: var(--primary);
   }

   .pm-shift-item-actions {
       display: flex;
       gap: 8px;
       margin-left: 10px;
       opacity: 0.8;
   }

   .pm-shift-item-actions i {
       cursor: pointer;
       font-size: 14px;
       transition: color 0.2s;
   }

   .pm-shift-item-actions i.ri-pencil-line:hover {
       color: var(--primary);
   }

   .pm-shift-item-actions i.ri-delete-bin-line:hover {
       color: var(--danger);
   }

   /* Modal */
   .pm-modal-overlay {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0.5);
       z-index: 2000;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .pm-modal {
       background: var(--bg-card);
       padding: 24px;
       border-radius: 12px;
       width: 350px;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
   }

   .pm-modal h3 {
       margin-top: 0;
       margin-bottom: 20px;
       color: var(--text-main);
   }

   .pm-form-group {
       margin-bottom: 15px;
       display: flex;
       flex-direction: column;
       gap: 5px;
   }

   .pm-form-row {
       display: flex;
       gap: 10px;
   }

   .pm-form-group label {
       font-size: 12px;
       color: var(--text-muted);
   }

   .pm-form-group input,
   .pm-form-group select {
       background: var(--bg-input);
       border: 1px solid var(--border-panel);
       color: var(--text-main);
       padding: 8px;
       border-radius: 4px;
   }

   .pm-color-input {
       height: 40px;
       width: 100%;
   }

   .pm-modal-actions {
       display: flex;
       justify-content: flex-end;
       gap: 10px;
       margin-top: 20px;
   }

   .pm-btn-cancel,
   .pm-btn-save,
   .pm-btn-delete,
   .pm-btn-choice {
       padding: 8px 16px;
       border-radius: 6px;
       font-size: 13px;
       cursor: pointer;
       border: none;
       font-weight: 500;
   }

   .pm-btn-choice {
       background: var(--bg-input);
       color: var(--text-muted);
       border: 1px solid var(--border-panel);
       padding: 6px 12px;
   }

   .pm-btn-choice:hover {
       border-color: var(--primary);
       color: var(--primary);
   }

   .pm-btn-active {
       background: var(--primary) !important;
       color: white !important;
       border-color: var(--primary) !important;
   }

   .pm-btn-cancel {
       background: var(--bg-input);
       color: var(--text-main);
   }

   .pm-btn-save {
       background: #10b981;
       color: white;
   }

   .pm-textarea {
       width: 100%;
       background: var(--bg-input);
       border: 1px solid var(--border-panel);
       color: var(--text-main);
       padding: 8px;
       border-radius: 4px;
       font-family: inherit;
       font-size: 13px;
       resize: vertical;
       min-height: 50px;
   }

   .pm-textarea:focus {
       outline: none;
       border-color: var(--primary);
   }

   /* Custom Confirmation Modal */
   .pm-confirm-modal-overlay {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0.6);
       backdrop-filter: blur(4px);
       z-index: 3000;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .pm-confirm-modal {
       background: var(--bg-card);
       width: 400px;
       border-radius: 16px;
       overflow: hidden;
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
       border: 1px solid var(--border-panel);
       animation: modalSlideIn 0.3s ease-out;
   }

   @keyframes modalSlideIn {
       from {
           transform: translateY(20px);
           opacity: 0;
       }

       to {
           transform: translateY(0);
           opacity: 1;
       }
   }

   .pm-confirm-header {
       padding: 24px 24px 16px;
       display: flex;
       align-items: center;
       gap: 12px;
   }

   .pm-confirm-header i {
       font-size: 24px;
   }

   .pm-confirm-header h3 {
       margin: 0;
       font-size: 18px;
       font-weight: 600;
       color: var(--text-main);
   }

   .pm-confirm-body {
       padding: 0 24px 24px;
       color: var(--text-muted);
       font-size: 15px;
       line-height: 1.6;
   }

   .pm-confirm-footer {
       padding: 16px 24px;
       background: var(--bg-input);
       display: flex;
       justify-content: flex-end;
       gap: 12px;
   }

   /* Type Variants */
   .pm-confirm-modal.info .pm-confirm-header i {
       color: var(--primary);
   }

    .pm-confirm-modal.success .pm-confirm-header i {
        color: var(--success);
    }

    .pm-confirm-modal.warning .pm-confirm-header i {
        color: var(--warning);
    }

    .pm-confirm-modal.danger .pm-confirm-header i {
        color: var(--danger);
    }

    .pm-confirm-modal.danger {
        border-top: 4px solid var(--danger);
    }

    .pm-confirm-modal.info {
        border-top: 4px solid var(--primary);
    }

   /* Comment icon on shift bars */
   .pm-comment-icon {
       position: absolute;
       top: 4px;
       right: 4px;
       font-size: 12px;
       color: rgba(255, 255, 255, 0.8);
       cursor: pointer;
       z-index: 3;
   }

   .pm-comment-icon:hover {
       color: white;
   }

    .pm-btn-save:hover {
        background: var(--success);
    }

    .pm-btn-delete {
        background: var(--danger);
        color: white;
    }

    .pm-btn-delete:hover {
        background: var(--danger);
        filter: brightness(0.9);
    }

   .note-card-title.is-placeholder-title {
       color: var(--text-muted);
       font-weight: 400;
       font-style: italic;
       opacity: 0.6;
   }

   /* ==========================================================================
}

/* =========================================
   MOBILE AGENDA VIEW (Responsive)
   ========================================= */
   .pm-mobile-view {
       display: none;
       /* Hidden by default on desktop */
   }

   /* ===== TABLET BREAKPOINT ===== */
   @media (max-width: 1024px) and (min-width: 769px) {
       .pm-toolbar {
           display: flex !important;
           flex-wrap: wrap;
           gap: 8px;
           padding: 10px 16px;
       }

       .pm-team-info {
           order: 1;
           flex: 0 0 auto;
       }

       .pm-controls {
           order: 2;
           flex: 1 1 auto;
           justify-content: flex-end;
       }

       .pm-toolbar-actions {
           order: 3;
           flex: 0 0 auto;
           gap: 6px;
       }

       .pm-desktop-text {
           display: none !important;
       }
   }

   /* ===== SMARTPHONE BREAKPOINT ===== */
   @media (max-width: 768px) {

       /* Visibility Toggles */
       .pm-desktop-only,
       .pm-desktop-text {
           display: none !important;
       }

       .pm-mobile-only {
           display: block !important;
       }

       .pm-mobile-icon {
           display: inline-block !important;
       }

       /* Disable hover displacement on mobile */
       .pm-shift-item:hover,
       .pm-icon-btn:hover {
           transform: none !important;
       }

       .pm-toolbar {
           display: flex !important;
           justify-content: flex-start !important;
           gap: 4px !important;
           padding: 8px 12px !important;
       }

       /* Google Button & Help: Hidden on phone */
       .pm-toolbar-actions {
           position: static;
           margin: 0;
           display: flex !important;
           gap: 4px !important;
       }

       .pm-btn-google,
       .pm-btn-help {
           display: none !important;
       }

       /* Hide 4-week toggle on phone */
       .pm-btn-fourweek {
           display: none !important;
       }

       /* Hide Management Tools on Mobile */
       .pm-mgmt-btn {
           display: none !important;
       }

       /* Hide Hub Name completely */
       .pm-team-info {
           display: none !important;
       }

       /* Flexible Nav Controls */
       .pm-controls {
           display: flex !important;
           flex: none !important;
           width: auto !important;
           justify-content: flex-start !important;
           gap: 4px !important;
       }

       .pm-nav {
           flex: 1;
           justify-content: space-between;
           min-width: 0;
       }

       .pm-date-range {
           font-size: 11px;
           /* Smaller font on mobile */
           min-width: 0;
           flex: 1;
           margin: 0 4px;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
       }

       /* Today Button: Icon Only */
       .pm-btn-today {
           padding: 0 10px;
           min-width: 36px;
       }

       .pm-btn-today .pm-desktop-text {
           display: none;
       }

       .pm-btn-today .pm-mobile-icon {
           display: block;
           font-size: 16px;
       }

       /* Hide Desktop Grid & Sidebars */
       .pm-grid-container,
       .pm-sidebar,
       .pm-shifts-sidebar {
           display: none !important;
       }

       /* Show Mobile View */
       .pm-mobile-view {
           display: flex;
           flex-direction: column;
           width: 100%;
           /* Adjusted height for compact toolbar (Header ~60px + Toolbar ~50px) */
           height: calc(100vh - 130px);
           background: var(--bg-card);
           border: 1px solid var(--border-panel);
           border-radius: 8px;
           overflow: hidden;
           /* No internal scroll */
       }

       /* ... rest ... */

       .pm-mobile-day {
           flex: 1;
           /* Distribute height equally among 7 days */
           display: flex;
           border-bottom: 1px solid var(--border-panel);
           min-height: 0;
           /* Allow flex shrinking */
       }
    .pm-rotation-panel {
        flex: 1.2;
        display: flex;
        flex-direction: column;
        background: var(--bg-panel);
        border: 1px solid var(--border-panel);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    .pm-rotation-templates {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--bg-panel);
        border: 1px solid var(--border-panel);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    .pm-rotation-panel-header {
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-panel);
        background: var(--bg-card);
        color: var(--text-main);
        box-sizing: border-box;
        width: 100%;
    }
       .pm-mobile-day:last-child {
           border-bottom: none;
       }

       .pm-mobile-day.is-today {
           background: rgba(var(--primary-rgb), 0.05);
       }

       /* Left Col: Date (3 letters + DD) */
       .pm-mobile-date-col {
           width: 60px;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           border-right: 1px solid var(--border-panel);
           padding: 4px;
           background: var(--bg-body-secondary);
           flex-shrink: 0;
           position: relative;
       }

       .pm-mobile-day-text {
           font-size: 11px;
           font-weight: 600;
           color: var(--text-muted);
           text-transform: uppercase;
           line-height: 1;
           margin-bottom: 2px;
       }

       .pm-mobile-day-num {
           font-size: 16px;
           font-weight: 700;
           color: var(--text-main);
           line-height: 1;
       }

       .pm-mobile-today-dot {
           width: 6px;
           height: 6px;
           background: var(--primary);
           border-radius: 50%;
           margin-top: 4px;
       }

       /* Right Col: Shift Content */
       .pm-mobile-content-col {
           flex: 1;
           display: flex;
           padding: 0;
           position: relative;
       }

       .pm-mobile-shift-card {
           flex: 1;
           border-radius: 6px;
           display: flex;
           flex-direction: column;
           justify-content: center;
           padding: 0 12px;
           position: relative;
           cursor: pointer;
           transition: opacity 0.2s;
           border-left: 4px solid rgba(0, 0, 0, 0.1);
       }

       .pm-mobile-shift-card:active {
           opacity: 0.8;
       }

       /* OFF Styling */
       .pm-mobile-shift-card.shift-off {
           background: var(--bg-body-secondary) !important;
           border-left: none;
       }

       .pm-mobile-shift-card.shift-conge {
           background: var(--bg-body-secondary) !important;
           border-left: none;
       }

       .pm-mobile-shift-info {
           display: flex;
           justify-content: space-between;
           align-items: center;
           width: 100%;
       }

       .pm-mobile-shift-title {
           font-size: 14px;
           font-weight: 700;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
       }

       .pm-mobile-shift-time {
           font-size: 12px;
           font-weight: 500;
           opacity: 0.9;
           margin-left: 8px;
       }

       .pm-mobile-break-tag {
           position: absolute;
           bottom: 2px;
           right: 4px;
           font-size: 9px;
           background: rgba(255, 255, 255, 0.8);
           color: #333;
           padding: 1px 4px;
           border-radius: 4px;
           font-weight: 600;
       }

       /* Empty Slot */
       .pm-mobile-empty-slot {
           flex: 1;
           /* transparent or maybe a subtle pattern */
       }
   }

   /* ========== COVERAGE ALERTS & GOOGLE BUTTON ==========*/
   .pm-shift-break-indicator {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 16px;
        height: 100%;
        background: repeating-linear-gradient(45deg,
                transparent,
                transparent 2px,
                var(--border-panel) 2px,
                var(--border-panel) 4px);
        pointer-events: none;
        z-index: 1;
        opacity: 0.3;
        border-left: 1px dashed var(--border-panel);
        border-right: 1px dashed var(--border-panel);
    }

   /* Planning Coverage Alerts */
   .pm-header-day-cell {
       position: relative;
   }

   .pm-header-day-cell.has-alert {
        background: linear-gradient(180deg, var(--bg-badge-danger) 0%, transparent 100%);
    }

   .pm-day-header-content {
       display: flex;
       flex-direction: column;
       align-items: center;
   }

   .pm-day-alerts {
       position: absolute;
       top: 4px;
       right: 4px;
   }

   .pm-day-alert-icon {
       font-size: 16px;
       cursor: help;
       animation: pm-alert-pulse 2s ease-in-out infinite;
   }

   .pm-day-alert-icon.warning {
       color: #f59e0b;
   }

   .pm-day-alert-icon.danger {
       color: #ef4444;
   }

   @keyframes pm-alert-pulse {

       0%,
       100% {
           opacity: 1;
       }

       50% {
           opacity: 0.5;
       }
    } /* Corrected: Added missing closing brace for @keyframes */

    .badge-pill.tech_iti,
    .badge-pill.tech-iti {
        background-color: var(--sh-orange) !important;
        color: var(--sh-text) !important;
    }

    .badge-pill.sector_manager {
        background-color: var(--sh-violet) !important;
        color: var(--sh-text) !important;
    }

    .badge-pill.super_admin {
        background-color: var(--sh-red) !important;
        color: var(--sh-text) !important;
    }

    .avatar-circle {
        border: 1px solid var(--border-panel);
    } /* Corrected: Removed extra closing brace */

   /* Google Calendar Button */
   .pm-btn-google {
       display: flex;
       align-items: center;
       gap: 6px;
       padding: 8px 14px;
       border-radius: 8px;
       border: 1px solid var(--border-color);
       background: var(--bg-card);
       color: var(--text-main);
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.2s ease;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }

   .pm-btn-google:hover {
       background: var(--bg-hover);
       border-color: #d1d5db;

       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }

   .pm-btn-google i {
       font-size: 16px;
   }

   .pm-btn-google:not(.connected):not(.revoked) i {
       background: linear-gradient(135deg, #4285F4, #34A853, #FBBC05, #EA4335);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }

   .pm-btn-google.connected {
       background: linear-gradient(135deg, #10b981 0%, #059669 100%);
       border-color: #059669;
       color: white;
   }

   .pm-btn-google.connected:hover {
       background: linear-gradient(135deg, #059669 0%, #047857 100%);
   }

   .pm-btn-google.revoked {
       background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
       border-color: #d97706;
       color: white;
   }

   .pm-btn-google.revoked:hover {
       background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
   }

   .pm-btn-google-text {
       display: none;
   }

   @media (min-width: 768px) {
       .pm-btn-google-text {
           display: inline;
       }
   }


   /* ========== FINAL CORRECTED STYLES (Consolidated) ==========*/

   /* 1. Amnagement & Custom Shifts */
   .pm-shift-item {
       height: 50px !important;
       min-height: 50px !important;
       padding-top: 0 !important;
       padding-bottom: 0 !important;
       flex-shrink: 0 !important;
   }

   .shift-amenagement,
   /* is-amenagement styling merged into unified OFF/Congé/Aménagement section above */

   /* Hide ::before on generic items, OFF, Cong, Amnagement */
   .pm-shift-item::before,
   .pm-shift-item.is-off::before,
   .pm-shift-item.is-conge::before,
   .pm-shift-item.is-amenagement::before,
   .pm-shift-item.is-custom::before {
       display: none !important;
   }

   /* Only show ::before on items with specific color style */
   .pm-shift-item[style*="--shift-color"]::before {
       display: block !important;
   }

   /* 2. Row & Member Alignment (Global Fix) */
   .pm-member-row,
   .pm-sidebar .pm-member-row,
   .pm-sidebar-content .pm-member-row {
       display: flex !important;
       align-items: center !important;
       height: 60px !important;
       min-height: 60px !important;
       padding: 0 !important;
       padding-left: 10px !important;
       box-sizing: border-box !important;
       position: relative;
   }

   .pm-member-info {
       display: flex !important;
       align-items: center !important;
       height: 100% !important;
       width: 100% !important;
       position: relative !important;
       padding-right: 45px !important;
       /* Space for absolute elements on the right */
       gap: 0 !important;
   }

   .pm-member-avatar {
       margin-right: 10px !important;
       flex-shrink: 0 !important;
   }

   /* Container for Name and Role lines */
   .pm-member-details,
   .pm-member-details-col {
       display: flex !important;
       flex-direction: column !important;
       justify-content: center !important;
       align-items: flex-start !important;
       gap: 2px !important;
       flex: 1;
       min-width: 0;
   }

   .pm-member-name-row,
   .pm-member-bottom-row {
       display: flex !important;
       align-items: center !important;
       width: 100%;
       min-width: 0;
   }

   .pm-member-name {
       margin: 0 !important;
       line-height: 1.2 !important;
       padding: 0 !important;
       display: block !important;
       font-size: 13px !important;
       font-weight: 600 !important;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .pm-member-role {
       margin-top: 2px !important;
       line-height: 1.1 !important;
       padding: 0 !important;
       display: block !important;
       font-size: 10px !important;
   }

   /* 3. Sticky Note & Side Elements Positioning */

   /* Note Icon (Top Right) */
   .pm-member-info .ri-sticky-note-fill,
   .pm-member-info .note-hover-icon {
       position: absolute !important;
       top: 6px !important;
       right: 12px !important;
       margin: 0 !important;
       font-size: 14px !important;
       z-index: 5;
       display: inline-block !important;
       line-height: 1 !important;
   }

   /* Hours (Middle Right) */
   .pm-member-hours {
       position: absolute !important;
       top: 50% !important;
       right: 12px !important;
       transform: translateY(-50%) !important;
       margin: 0 !important;
       font-size: 12px !important;
       font-weight: 700 !important;
       z-index: 5;
       line-height: normal !important;
   }

   /* Copy Button (Bottom Right) */
   .pm-copy-btn {
       position: absolute !important;
       bottom: 6px !important;
       right: 12px !important;
       margin: 0 !important;
       z-index: 10 !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       width: 14px !important;
       /* Matches icon size */
       height: 14px !important;
       padding: 0 !important;
       opacity: 0 !important;
       /* Hide by default, show on row hover */
       transition: opacity 0.2s ease !important;
       background: transparent !important;
       border: none !important;
       color: var(--text-muted) !important;
       line-height: 1 !important;
       cursor: pointer !important;
   }

   .pm-copy-btn i {
       font-size: 14px !important;
       display: block !important;
       line-height: 1 !important;
   }

   .pm-member-row:hover .pm-copy-btn {
       opacity: 1 !important;
   }

   .pm-member-row:hover .note-hover-icon {
       opacity: 0.5 !important;
   }

   .pm-member-row:hover .note-hover-icon:hover {
       opacity: 1 !important;
   }

   /* 4. Shift Bars (Timeline) */
   .pm-shift-bar-container {
       height: 50px !important;
       top: 50% !important;
       transform: translateY(-50%) !important;
   }

   .shift-bar {
       height: 100% !important;
       padding: 0 8px !important;
       display: flex !important;
       align-items: center !important;
   }

   /* 5. Date & Sidebar Headers */
   .pm-header-cell,
   .pm-timeline-header,
   .pm-header-day-cell,
   .pm-shifts-header {
       height: 60px !important;
       min-height: 60px !important;
       max-height: 60px !important;
       box-sizing: border-box !important;
   }

   .pm-header-day-cell {
       display: flex !important;
       flex-direction: column !important;
       align-items: center !important;
       justify-content: center !important;
       gap: 2px !important;
   }

   .pm-day-name,
   .pm-day-date {
       display: block !important;
       text-align: center !important;
       line-height: 1.3 !important;
   }

   /* FINAL DARK MODE FIXES */
   [data-theme="dark"] .pm-btn-today {
       background: var(--bg-card) !important;
       color: var(--text-main) !important;
       border-color: var(--border-color) !important;
   }

   [data-theme="dark"] .pm-btn-google {
       background: var(--bg-card) !important;
       color: var(--text-main) !important;
       border-color: var(--border-color) !important;
   }

   [data-theme="dark"] .pm-btn-today:hover,
   [data-theme="dark"] .pm-btn-google:hover {
       background: var(--bg-hover) !important;
       border-color: var(--primary) !important;
   }


   /* Template Modal Redesign */
   .pm-modal-header {
       display: flex;
       flex-direction: column;
       width: 100%;
       margin-bottom: 20px;
   }

   .pm-modal-title {
       font-size: 20px;
       font-weight: 700;
       color: var(--text-main);
       margin-bottom: 16px;
       text-align: center;
   }

   .pm-modal-tabs {
       display: flex;
       width: 100%;
       border-bottom: 2px solid var(--border-color);
   }

   .pm-modal-tab {
       flex: 1;
       text-align: center;
       padding: 12px;
       cursor: pointer;
       font-weight: 600;
       color: var(--text-muted);
       border-bottom: 2px solid transparent;
       margin-bottom: -2px;
       transition: all 0.2s;
   }

   .pm-modal-tab:hover {
       color: var(--text-main);
       background: var(--bg-hover);
   }

   .pm-modal-close {
       position: absolute;
       top: 16px;
       right: 16px;
       width: 32px;
       height: 32px;
       border-radius: 50%;
       border: none;
       background: rgba(239, 68, 68, 0.1);
       color: #ef4444;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all 0.2s;
       z-index: 10;
   }

   .pm-modal-close:hover {
       background: #ef4444;
       color: white;
       transform: rotate(90deg);
   }

   .pm-modal-close i {
       font-size: 20px;
   }

   .pm-modal-tab.active {
       color: var(--primary);
       border-bottom-color: var(--primary);
   }

   .pm-template-card {
       background: var(--bg-card);
       border: 1px solid var(--border-color);
       border-radius: 12px;
       padding: 0;
       margin-bottom: 12px;
       display: flex;
       flex-direction: row;
       align-items: stretch;
       justify-content: space-between;
       box-shadow: var(--shadow-sm);
       transition: all 0.3s ease;
       overflow: hidden;
       min-height: 85px;
   }

   .pm-template-card:hover {
       box-shadow: var(--shadow-md);
       border-color: var(--primary);
       transform: translateY(-2px);
   }

   .pm-template-info {
       flex: 1;
       min-width: 0;
       display: flex;
       flex-direction: column;
       justify-content: center;
       gap: 4px;
       padding: 14px 20px;
   }

   .pm-template-header-row {
       display: flex;
       align-items: baseline;
       gap: 12px;
       margin-bottom: 2px;
   }

   .pm-template-name {
       font-size: 15px;
       font-weight: 800;
       color: var(--text-main);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .pm-template-date {
       font-size: 12px;
       color: var(--text-muted);
       white-space: nowrap;
       opacity: 0.8;
   }

   .pm-template-description {
       font-size: 12px;
       color: var(--text-muted);
       line-height: 1.5;
       display: -webkit-box;
       line-clamp: 2;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }

   .pm-desc-label {
       font-weight: 900;
       font-size: 10px;
       text-transform: uppercase;
       color: var(--text-main);
       opacity: 0.4;
       margin-right: 5px;
       letter-spacing: 0.5px;
   }

   .pm-template-actions {
       display: flex;
       flex-direction: column;
       width: 60px;
       flex-shrink: 0;
   }

   .pm-btn-apply-icon,
   .pm-btn-delete-icon {
       flex: 1;
       width: 100%;
       border: none;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all 0.2s;
       border-radius: 0;
       margin: 0;
       padding: 0;
       color: white;
       font-size: 0;
   }

   .pm-btn-apply-icon {
       background: #22c55e;
       /* Vibrant Green - Apple Type */
   }

   .pm-btn-apply-icon:hover {
       background: #16a34a;
       filter: brightness(1.1);
   }

   .pm-btn-delete-icon {
       background: #ef4444;
       /* Vibrant Red */
       border-top: 1px solid rgba(255, 255, 255, 0.15);
   }

   .pm-btn-delete-icon:hover {
       background: #dc2626;
       filter: brightness(1.1);
   }

   .pm-btn-apply-icon i,
   .pm-btn-delete-icon i {
       font-size: 20px;
       opacity: 0.9;
   }

   /* Loading Overlay */
   .pm-loading-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.5);
       z-index: 1000;
       /* Increased to cover toolbar (85) and headers (80) */
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       backdrop-filter: blur(2px);
   }

   .pm-spinner {
       width: 40px;
       height: 40px;
       border: 4px solid rgba(255, 255, 255, 0.3);
       border-radius: 50%;
       border-top-color: white;
       animation: spin 1s ease-in-out infinite;
   }

   @keyframes spin {
       to {
           transform: rotate(360deg);
       }
   }

   /* ============================
   PAINT MODE
   ============================ */

   /* Badge inline with hub name */
   .pm-team-info {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
   }

   /* Selected shift: animated golden glow */
   .pm-shift-item.is-paint-selected {
       outline: none !important;
       box-shadow: 0 0 0 3px #f59e0b, 0 0 16px rgba(245, 158, 11, 0.6) !important;
       transform: scale(1.05) !important;
       z-index: 5;
       position: relative;
       animation: pm-shift-selected-glow 1.5s ease-in-out infinite !important;
   }

   @keyframes pm-shift-selected-glow {

       0%,
       100% {
           box-shadow: 0 0 0 3px #f59e0b, 0 0 8px rgba(245, 158, 11, 0.4) !important;
       }

       50% {
           box-shadow: 0 0 0 5px #f59e0b, 0 0 22px rgba(245, 158, 11, 0.7) !important;
       }
   }

   /* Paint target cells: crosshair cursor */
   .pm-day-cell.is-paint-target {
       cursor: crosshair !important;
   }

   .pm-day-cell.is-paint-target:hover {
       background: rgba(245, 158, 11, 0.08) !important;
   }

   /* Paint mode badge */
   .pm-paint-badge {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       margin-left: 12px;
       padding: 4px 12px;
       background: linear-gradient(135deg, #f59e0b, #d97706);
       color: white;
       font-size: 12px;
       font-weight: 700;
       border-radius: 20px;
       letter-spacing: 0.3px;
       animation: pm-paint-pulse 2s ease-in-out infinite;
       white-space: nowrap;
   }

   .pm-paint-badge i {
       font-size: 13px;
   }

   @keyframes pm-paint-pulse {

       0%,
       100% {
           box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
       }

       50% {
           box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
       }
   }

   /* Paint mode active button */
   .pm-icon-btn.active {
       background: var(--primary) !important;
       color: white !important;
   }

   /* Prevent text selection while paint-dragging */
   .pm-timeline-content {
       user-select: none;
       -webkit-user-select: none;
   }

   /* ==========================================================================
   ROTATION MODAL
   ========================================================================== */
   .pm-rotation-modal {
       max-width: 750px !important;
       width: 95% !important;
   }

   .pm-rotation-layout {
       display: flex;
       gap: 20px;
       min-height: 300px;
   }

   .pm-rotation-panel {
       flex: 1.2;
       display: flex;
       flex-direction: column;
       background: var(--bg-body);
       border: 1px solid var(--border-color);
       border-radius: 12px;
       overflow: hidden;
   }

   .pm-rotation-templates {
       flex: 1;
       display: flex;
       flex-direction: column;
       background: var(--bg-body);
       border: 1px solid var(--border-color);
       border-radius: 12px;
       overflow: hidden;
   }

   .pm-rotation-panel-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
       border-bottom: 1px solid var(--border-color);
       background: var(--bg-card);
       color: var(--text-main);
   }

   .pm-rotation-add-btn {
       width: 28px;
       height: 28px;
       border-radius: 6px;
       border: 1px solid var(--border-color);
       background: var(--bg-card);
       color: var(--text-main);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 16px;
       transition: all 0.2s;
   }

   .pm-rotation-add-btn:hover {
       background: #8b5cf6;
       color: white;
       border-color: #8b5cf6;
   }

   .pm-rotation-slots {
       flex: 1;
       padding: 12px;
       display: flex;
       flex-direction: column;
       gap: 8px;
       overflow-y: auto;
       max-height: 300px;
   }

   .pm-rotation-slot {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 12px;
       border: 2px dashed var(--border-color);
       border-radius: 10px;
       min-height: 52px;
       transition: all 0.2s;
       position: relative;
       background: var(--bg-card);
   }

   .pm-rotation-slot.is-filled {
       border-style: solid;
       border-color: rgba(139, 92, 246, 0.3);
       background: rgba(139, 92, 246, 0.05);
   }

   .pm-rotation-slot.drag-over {
       border-color: #8b5cf6;
       background: rgba(139, 92, 246, 0.12);
       box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
   }

   .pm-rotation-slot-num {
       width: 32px;
       height: 32px;
       border-radius: 8px;
       background: linear-gradient(135deg, #6366f1, #8b5cf6);
       color: white;
       font-size: 12px;
       font-weight: 800;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }

   .pm-rotation-slot-content {
       flex: 1;
       min-width: 0;
       border-left: 3px solid #8b5cf6;
       padding-left: 10px;
   }

   .pm-rotation-slot-name {
       font-size: 14px;
       font-weight: 600;
       color: var(--text-main);
       display: block;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .pm-rotation-slot-date {
       font-size: 11px;
       color: var(--text-muted);
   }

   .pm-rotation-slot-empty {
       flex: 1;
       display: flex;
       align-items: center;
       gap: 8px;
       color: var(--text-muted);
       font-size: 13px;
       font-style: italic;
   }

   .pm-rotation-slot-empty i {
       font-size: 18px;
       opacity: 0.5;
   }

   .pm-rotation-slot-remove {
       width: 24px;
       height: 24px;
       border-radius: 6px;
       border: none;
       background: transparent;
       color: var(--text-muted);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.2s;
       flex-shrink: 0;
   }

   .pm-rotation-slot-remove:hover {
       background: #fee2e2;
       color: #ef4444;
   }

   [data-theme="dark"] .pm-rotation-slot-remove:hover {
       background: rgba(239, 68, 68, 0.2);
   }

   .pm-rotation-controls {
       display: flex;
       align-items: center;
       gap: 20px;
       background: transparent;
   }

   .pm-rotation-footer {
       min-height: 70px;
   }

   .pm-rotation-repeat {
       display: flex;
       align-items: center;
       gap: 12px;
   }

   .pm-rotation-repeat label {
       font-size: 13px;
       font-weight: 700;
       color: var(--text-main);
       white-space: nowrap;
   }

   .pm-rotation-repeat-input {
       display: flex;
       align-items: center;
       gap: 0;
       border: 1px solid var(--border-color);
       border-radius: 8px;
       overflow: hidden;
   }

   .pm-rotation-repeat-btn {
       width: 32px;
       height: 32px;
       border: none;
       background: var(--bg-body);
       color: var(--text-main);
       font-size: 16px;
       font-weight: 700;
       cursor: pointer;
       transition: all 0.15s;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .pm-rotation-repeat-btn:hover {
       background: #8b5cf6;
       color: white;
   }

   .pm-rotation-repeat-value {
       width: 36px;
       height: 32px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 16px;
       font-weight: 700;
       color: var(--text-main);
       border-left: 1px solid var(--border-color);
       border-right: 1px solid var(--border-color);
   }

   .pm-rotation-summary {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 13px;
       font-weight: 700;
       color: #8b5cf6;
       white-space: nowrap;
   }

   .pm-collab-text {
        font-weight: 700;
        color: var(--text-muted);
        letter-spacing: 0.5px;
    }

   .pm-rotation-summary i {
       font-size: 16px;
       margin-right: 2px;
   }

   /* Template Library (Right Panel) */
   .pm-rotation-template-list {
       padding: 12px;
       display: flex;
       flex-direction: column;
       gap: 8px;
       overflow-y: auto;
       max-height: 400px;
   }

   .pm-rotation-template-item {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 12px;
       background: var(--bg-card);
       border: 1px solid var(--border-color);
       border-radius: 10px;
       cursor: grab;
       transition: all 0.2s;
   }

   .pm-rotation-template-item:active {
       cursor: grabbing;
   }

   .pm-rotation-template-item:hover {
       border-color: #8b5cf6;
       box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
       transform: translateY(-1px);
   }

   .pm-rotation-drag-handle {
       font-size: 16px;
       color: var(--text-muted);
       flex-shrink: 0;
       opacity: 0.5;
   }

   .pm-rotation-template-item:hover .pm-rotation-drag-handle {
       opacity: 1;
       color: #8b5cf6;
   }

   .pm-rotation-template-info {
       flex: 1;
       min-width: 0;
   }

   .pm-rotation-template-name {
       font-size: 14px;
       font-weight: 600;
       color: var(--text-main);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .pm-rotation-template-date {
       font-size: 11px;
       color: var(--text-muted);
       margin-top: 2px;
   }

   /* ========================================
      TUTORIAL MODAL
      ======================================== */

   .pm-btn-help {
       width: 36px !important;
       min-width: 36px !important;
       height: 36px;
       border-radius: 50% !important;
       display: flex !important;
       align-items: center;
       justify-content: center;
       padding: 0 !important;
       background: var(--bg-card);
       border: 2px solid var(--border-color);
       color: var(--text-muted);
       font-size: 16px;
       transition: all 0.3s ease;
       flex-shrink: 0;
   }

   .pm-btn-help:hover {
       border-color: var(--primary);
       color: var(--primary);
       transform: scale(1.1);
       box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
   }

   .pm-tutorial-modal {
       position: relative;
       padding: 28px 0 0 0 !important;
   }

   .pm-tutorial-modal .pm-modal-close {
       position: absolute;
       top: 12px;
       right: 14px;
       background: none;
       border: none;
       font-size: 22px;
       color: var(--text-muted);
       cursor: pointer;
       opacity: 0.6;
       transition: all 0.2s;
       z-index: 10;
       padding: 4px;
       border-radius: 8px;
   }

   .pm-tutorial-modal .pm-modal-close:hover {
       opacity: 1;
       background: var(--bg-hover);
       color: var(--text-main);
   }

   .pm-tutorial-modal .pm-modal-header {
       padding: 0 28px;
   }

   .pm-tutorial-modal .pm-modal-title {
       font-size: 20px;
       font-weight: 800;
       margin: 0;
   }

   /* Tutorial Tabs */
   .pm-tutorial-tabs {
       display: flex;
       gap: 0;
       padding: 0 24px;
       margin-top: 16px;
       border-bottom: 2px solid var(--border-color);
       overflow-x: auto;
   }

   .pm-tutorial-tabs button {
       background: none;
       border: none;
       padding: 10px 14px;
       font-size: 12.5px;
       font-weight: 600;
       color: var(--text-muted);
       cursor: pointer;
       transition: all 0.2s;
       white-space: nowrap;
       display: flex;
       align-items: center;
       gap: 6px;
       border-bottom: 2px solid transparent;
       margin-bottom: -2px;
       flex-shrink: 0;
   }

   .pm-tutorial-tabs button i {
       font-size: 14px;
   }

   .pm-tutorial-tabs button:hover {
       color: var(--text-main);
   }

   .pm-tutorial-tabs button.active {
       color: var(--primary);
       border-bottom-color: var(--primary);
   }

   /* Tutorial Content */
   .pm-tutorial-content {
       flex: 1;
       overflow-y: auto;
       padding: 20px 28px 28px;
   }

   .pm-tutorial-section {
       animation: pmTutoFadeIn 0.2s ease;
   }

   @keyframes pmTutoFadeIn {
       from {
           opacity: 0;
           transform: translateY(6px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   /* Tutorial Cards */
   .pm-tuto-card {
       display: flex;
       align-items: flex-start;
       gap: 16px;
       padding: 16px;
       background: var(--bg-hover);
       border: 1px solid var(--border-color);
       border-radius: 12px;
       margin-bottom: 20px;
   }

   .pm-tuto-card h4 {
       font-size: 14px;
       font-weight: 700;
       color: var(--text-main);
       margin: 0 0 4px 0;
   }

   .pm-tuto-card p {
       font-size: 12.5px;
       color: var(--text-muted);
       line-height: 1.6;
       margin: 0;
   }

   .pm-tuto-card.pm-tuto-tip {
       background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(249, 115, 22, 0.06));
       border-color: rgba(245, 158, 11, 0.15);
   }

   .pm-tuto-icon {
       width: 40px;
       height: 40px;
       min-width: 40px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
       color: white;
   }

   /* Tutorial Subtitle */
   .pm-tuto-subtitle {
       font-size: 13px;
       font-weight: 700;
       color: var(--text-main);
       margin: 20px 0 10px 0;
       display: flex;
       align-items: center;
       gap: 8px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   .pm-tuto-subtitle i {
       font-size: 15px;
       color: var(--primary);
   }

   /* Tutorial Grid (for toolbar buttons) */
   .pm-tuto-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 8px;
   }

   .pm-tuto-item {
       display: flex;
       flex-direction: column;
       gap: 4px;
       padding: 10px 12px;
       background: var(--bg-card);
       border: 1px solid var(--border-color);
       border-radius: 8px;
       font-size: 12px;
   }

   .pm-tuto-key {
       font-weight: 700;
       font-size: 12px;
       color: var(--text-main);
       display: flex;
       align-items: center;
       gap: 4px;
   }

   .pm-tuto-key i {
       font-size: 14px;
   }

   .pm-tuto-item>span:last-child {
       color: var(--text-muted);
       line-height: 1.4;
   }

   /* Tutorial List */
   .pm-tuto-list {
       display: flex;
       flex-direction: column;
       gap: 6px;
   }

   .pm-tuto-list-item {
       display: flex;
       align-items: flex-start;
       gap: 12px;
       padding: 10px 14px;
       background: var(--bg-card);
       border: 1px solid var(--border-color);
       border-radius: 8px;
       font-size: 12.5px;
       line-height: 1.5;
       color: var(--text-main);
   }

   .pm-tuto-list-item>i {
       flex-shrink: 0;
       margin-top: 1px;
   }

   .pm-tuto-list-item>span {
       flex: 1;
   }

   /* Tutorial Badge */
   .pm-tuto-badge {
       display: inline-flex;
       align-items: center;
       padding: 4px 10px;
       border-radius: 6px;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.5px;
       flex-shrink: 0;
       white-space: nowrap;
   }

   /* Tutorial Step Number */
   .pm-tuto-step {
       width: 24px;
       height: 24px;
       min-width: 24px;
       max-width: 24px;
       flex: 0 0 24px;
       border-radius: 50%;
       background: var(--primary);
       color: white;
       font-size: 12px;
       font-weight: 800;
       display: inline-flex;
       align-items: center;
       justify-content: center;
   }

   /* Responsive */
   @media (max-width: 600px) {
       .pm-rotation-layout {
           flex-direction: column;
       }

       .pm-tuto-grid {
           grid-template-columns: 1fr;
       }

       .pm-tutorial-tabs button {
           padding: 8px 10px;
           font-size: 11px;
       }

       .pm-tutorial-tabs button span {
           display: none;
       }

       .pm-tutorial-content {
           padding: 16px 20px 20px;
       }
   }

   /* =========================================================================
   FOUR-WEEK MODE (28 Days Dense Grid)
========================================================================= */
   .is-four-weeks .pm-timeline {
       min-width: unset;
       width: 100%;
   }

   .is-four-weeks .pm-header-day-cell,
   .is-four-weeks .pm-day-cell {
       min-width: 32px !important;
       /* Extremely compressed to fit 28 cols */
       width: calc(100% / 28) !important;
       padding: 2px !important;
       flex: unset !important;
   }

   .is-four-weeks .pm-sidebar {
       width: 160px !important;
       min-width: 160px !important;
       left: 0;
   }

   .is-four-weeks.pm-grid-container {
       overflow-x: auto;
   }

   .is-four-weeks .pm-member-row {
       padding: 0 4px;
   }

   .is-four-weeks .pm-member-info {
       padding-right: 15px !important;
       /* Overrides the 45px default to let names stretch */
   }

   .is-four-weeks .fw-bar {
       opacity: 0.9;
       font-size: 9px !important;
       /* Micro text */
   }

   .is-four-weeks .fw-bar:hover {
       opacity: 1;
   }

   .is-four-weeks .pm-shift-bar-container {
       margin-left: 0 !important;
   }

   /* Week separator: thicker border on Sundays (every 7th element) */
   .is-four-weeks .pm-header-day-cell:nth-child(7n),
   .is-four-weeks .pm-day-cell:nth-child(7n) {
       border-right: 4px solid #64748b !important;
       /* Thick slate border for clear separation */
   }

   /* Disable 4-week mode button on tablets and mobiles */
   @media (max-width: 1024px) {
       .pm-btn-fourweek {
           display: none !important;
       }
   }