.shift-container {
        background: #fafafa;
        min-height: 100vh;
    }

    .rm-dark .shift-container {
        background: #30353c;
    }

    .shift-main-card {
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 24px;
        margin-top: 20px;
    }

    .rm-dark .shift-main-card {
        background: #1f2937;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .shift-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #e5e7eb;
    }

    .rm-dark .shift-header {
        border-bottom: 1px solid #374151;
    }

    .shift-title {
        font-size: 24px;
        font-weight: 600;
        color: #2c3e50;
        margin: 0;
    }

    .rm-dark .shift-title {
        color: #f3f4f6;
    }

    .date-filter-section {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 20px;
        margin-bottom: 24px;
    }

    .rm-dark .date-filter-section {
        background: #111827;
        border: 1px solid #374151;
    }

    .date-picker-wrapper {
        border-radius: 4px;
        padding: 12px;
        transition: border-color 0.2s ease;
    }

    .date-picker-label {
        color: #6b7280;
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
    }

    .rm-dark .date-picker-label {
        color: #9ca3af;
    }

    /* Tab Navigation */
    .tab-navigation {
        display: flex;
        gap: 8px;
        margin-bottom: 24px;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 0;
    }

    .rm-dark .tab-navigation {
        border-bottom: 1px solid #374151;
    }

    .tab-button {
        padding: 12px 20px;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        color: #6b7280;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-bottom: -1px;
    }

    .rm-dark .tab-button {
        color: #9ca3af;
    }

    .tab-button:hover {
        color: #374151;
    }

    .rm-dark .tab-button:hover {
        color: #d1d5db;
    }

    .tab-button.active {
        color: #2c3e50;
        border-bottom-color: #FFA305;
    }

    .rm-dark .tab-button.active {
        color: #f3f4f6;
        border-bottom-color: #FFA305;
    }

    /* Summary Cards */
    .summary-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }

    .summary-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 16px;
        text-align: center;
    }

    .rm-dark .summary-card {
        background: #111827;
        border: 1px solid #374151;
    }

    .summary-value {
        font-size: 28px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 4px;
    }

    .rm-dark .summary-value {
        color: #f3f4f6;
    }

    .summary-label {
        color: #6b7280;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .rm-dark .summary-label {
        color: #9ca3af;
    }

    .summary-sublabel {
        color: #9ca3af;
        font-size: 11px;
        margin-top: 4px;
    }

    .rm-dark .summary-sublabel {
        color: #6b7280;
    }

    /* Daily Report Section */
    .daily-reports {
        margin-bottom: 24px;
    }

    .daily-report-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 20px;
        margin-bottom: 16px;
    }

    .rm-dark .daily-report-card {
        background: #1f2937;
        border: 1px solid #374151;
    }

    .daily-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #f3f4f6;
    }

    .rm-dark .daily-header {
        border-bottom: 1px solid #374151;
    }

    .daily-date {
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
    }

    .rm-dark .daily-date {
        color: #f3f4f6;
    }

    .daily-stats {
        display: flex;
        gap: 24px;
        font-size: 13px;
        color: #6b7280;
    }

    .rm-dark .daily-stats {
        color: #9ca3af;
    }

    .daily-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .daily-stat-value {
        font-weight: 600;
        color: #374151;
    }

    .rm-dark .daily-stat-value {
        color: #d1d5db;
    }

    /* Tables */
    .minimal-table {
        width: 100%;
        border-collapse: collapse;
    }

    .minimal-table thead {
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
    }

    .rm-dark .minimal-table thead {
        background: #111827;
        border-bottom: 1px solid #374151;
    }

    .minimal-table thead th, .minimal-table thead tr  {
        padding: 12px;
        text-align: center;
        font-weight: 500;
        font-size: 12px;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .rm-dark .minimal-table thead th, .rm-dark .minimal-table thead tr {
        color: #9ca3af;
    }

    .minimal-table tbody tr {
        border-bottom: 1px solid #f3f4f6;
        transition: background-color 0.2s ease;
    }

    .rm-dark .minimal-table tbody tr {
        border-bottom: 1px solid #374151;
    }

    .minimal-table tbody tr:hover {
        background: #f9fafb;
    }

    .rm-dark .minimal-table tbody tr:hover {
        background: #111827;
    }

    .minimal-table tbody td {
        padding: 12px;
        color: #374151;
        font-size: 14px;
    }

    .rm-dark .minimal-table tbody td {
        color: #d1d5db;
    }

    .minimal-table tbody td:first-child {
        font-weight: 500;
        color: #6b7280;
    }

    .rm-dark .minimal-table tbody td:first-child {
        color: #9ca3af;
    }

    .employee-cell {
        text-align:center;
        font-weight: 500;
        color: #2c3e50;
    }

    .rm-dark .employee-cell {
        color: #f3f4f6;
    }

    .time-cell {
        text-align:center;
        font-family: 'SF Mono', Monaco, monospace;
        font-size: 13px;
        color: #6b7280;
    }

    .rm-dark .time-cell {
        color: #9ca3af;
    }

    .duration-cell {
        text-align:center;
        font-weight: 500;
        color: #374151;
    }

    .rm-dark .duration-cell {
        color: #d1d5db;
    }

    /* Status Badges */
    .status-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .status-active {
        background: #f3f4f6;
        color: #374151;
        border: 1px solid #e5e7eb;
    }

    .rm-dark .status-active {
        background: #374151;
        color: #d1d5db;
        border: 1px solid #4b5563;
    }

    .status-completed {
        background: #f9fafb;
        color: #6b7280;
    }

    .rm-dark .status-completed {
        background: #1f2937;
        color: #9ca3af;
    }

    /* Loading */
    .loading-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 48px;
    }

    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid #f3f4f6;
        border-top: 3px solid #374151;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    .rm-dark .loading-spinner {
        border: 3px solid #374151;
        border-top: 3px solid #9ca3af;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 48px;
        color: #9ca3af;
    }

    .rm-dark .empty-state {
        color: #6b7280;
    }

    .empty-icon {
        font-size: 48px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

    .empty-message {
        font-size: 14px;
        color: #6b7280;
    }

    .rm-dark .empty-message {
        color: #9ca3af;
    }

    /* Collapsible */
    .collapsible-content {
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .toggle-button {
        background: transparent;
        border: 1px solid #e5e7eb;
        border-radius: 4px;
        padding: 6px 12px;
        font-size: 12px;
        color: #6b7280;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .rm-dark .toggle-button {
        border: 1px solid #374151;
        color: #9ca3af;
    }

    .toggle-button:hover {
        background: #f9fafb;
        color: #374151;
    }

    .rm-dark .toggle-button:hover {
        background: #374151;
        color: #d1d5db;
    }

    /* Chart Container */
    .chart-container {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 20px;
        margin-bottom: 24px;
    }

    .rm-dark .chart-container {
        background: #1f2937;
        border: 1px solid #374151;
    }

    .chart-title {
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 16px;
    }

    .rm-dark .chart-title {
        color: #d1d5db;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .shift-main-card {
            padding: 16px;
        }

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

        .daily-stats {
            flex-direction: column;
            gap: 8px;
        }

        .minimal-table {
            font-size: 12px;
        }

        .minimal-table thead th,
        .minimal-table tbody td {
            padding: 8px;
        }

        .tab-button {
            padding: 10px 16px;
            font-size: 13px;
        }
    }
    

        .page-wrapper {
          padding: 2rem;
          background: linear-gradient(135deg, #f3f4f6, #ffffff);
          font-family: 'Segoe UI', sans-serif;
          min-height: 100vh;
        }

        .top-bar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          margin-bottom: 1.5rem;
        }

        .back-button {
          background-color: #4b5563;
          color: white;
          padding: 0.6rem 1.2rem;
          border: none;
          border-radius: 6px;
          font-size: 1rem;
          cursor: pointer;
        }

        .page-title {
          font-size: 1.8rem;
          font-weight: 600;
          color: linear-gradient(135deg, #30353c 0%, #282d34 100%);
          margin-top: 0.5rem;
        }

        .styled-table {
          width: 100%;
          border-collapse: collapse;
          background-color: white;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        }

        .styled-table th, .styled-table td {
          padding: 1rem;
          text-align: left;
          border-bottom: 1px solid #e5e7eb;
        }

        .styled-table thead th {
          background-color: #f9fafb;
          color: #374151;
          font-weight: 600;
        }

        .row-checked {
          background-color: #ecfdf5;
        }

        .icon-button {
          background: none;
          border: none;
          font-size: 1.2rem;
          margin-right: 0.5rem;
          cursor: pointer;
          transition: transform 0.2s;
        }

        .icon-button:hover {
          transform: scale(1.1);
        }

        .icon-button.view {
          color: #4b5563;
        }

        .icon-button.check {
          color: #10b981;
        }

        .icon-button.uncheck {
          color: #ef4444;
        }

        .icon-button.highlight {
          font-size: 1.5rem;
          padding: 0.3rem 0.6rem;
          border-radius: 6px;
          background-color: #f3f4f6;
        }

        .button-group {
          display: flex;
          align-items: center;
        }

        .info-note {
          margin-top: 2rem;
          background-color: #fef3c7;
          color: #92400e;
          padding: 1rem;
          border-radius: 8px;
          font-size: 0.95rem;
          text-align: center;
          box-shadow: 0 0 8px rgba(0,0,0,0.05);
        }

        @media (max-width: 768px) {
          .styled-table th,
          .styled-table td {
            padding: 0.6rem;
            font-size: 0.9rem;
          }

          .page-title {
            font-size: 1.4rem;
          }
        }