* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    background: #F7F6F4;
    color: #0E0E11;
    -webkit-font-smoothing: antialiased;
  }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #ECEBE8; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
  button, input { font-family: inherit; }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, monospace; }
  .hoverable:hover { --hover: 1; }
  .btn-home:hover { border-color: #EA2451 !important; background: #F7F6F4 !important; }
  .btn-export:hover { border-color: #EA2451 !important; }
  .row-hover:hover { background: #F7F6F4 !important; }
  .doc-row:hover { background: #F7F6F4 !important; }
  .card-hover:hover { border-color: #EA2451 !important; box-shadow: 0 6px 18px rgba(14,14,17,0.08) !important; }
  .switcher-btn:hover { border-color: #EA2451 !important; }
  .icon-btn:hover { border-color: #EA2451 !important; }
  .doclink:hover { opacity: 0.7; }
  /* Sidebar nav sizing/interaction moved to the REFINEMENT block near the end
     of this file (.nav-item / .nav-item.is-active) so it matches the internal
     team portal proportions and the HRxBoard active-nav treatment. */
  .month-btn:hover { background: #F7F6F4 !important; }
  .doc-tree-node:hover { background: rgba(234,36,81,0.06) !important; }

  /* SKELETON LOADING ANIMATIONS */
  @keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .skeleton {
    background: linear-gradient(90deg, #ECEBE8 25%, #F7F6F4 50%, #ECEBE8 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
  }
  .skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 6px; }
  .skeleton-title { height: 22px; width: 60%; margin-bottom: 12px; border-radius: 6px; }
  .skeleton-card { border-radius: 14px; border: 1px solid #ECEBE8; padding: 18px 20px; background: #fff; }
  .skeleton-block { border-radius: 10px; }

  /* ========== MOBILE RESPONSIVENESS ========== */

  /* --- TABLET (1024px) --- */
  @media(max-width:1024px){
    aside.sidebar{width:220px;}
    header.topbar{padding:0 16px;}
    .search-box{width:200px;}
    /* Editorial main */
    main[style*="max-width"]{padding-left:24px;padding-right:24px;}
  }

  /* --- SMALL TABLET / LARGE PHONE (768px) --- */
  @media(max-width:768px){
    /* LOGIN SCREEN - stack vertically */
    .login-wrapper{flex-direction:column !important;min-height:100vh;}
    .login-hero{padding:32px 24px !important;min-height:auto !important;flex:none !important;}
    .login-hero h1{font-size:28px !important;}
    .login-hero p{font-size:13px !important;}
    .login-stats{gap:16px !important;}
    .login-form-panel{width:100% !important;flex:none !important;padding:32px 24px !important;}

    /* SIDEBAR - offcanvas drawer */
    aside.sidebar{position:fixed !important;left:-270px;top:0;width:264px !important;height:100vh !important;max-height:100vh;overflow-y:auto;transition:left .3s cubic-bezier(.4,0,.2,1);z-index:100;}
    aside.sidebar.open{left:0 !important;}
    
    /* MENU BUTTON */
    #btn-menu{display:flex !important;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #ECEBE8;background:#fff;border-radius:8px;cursor:pointer;color:#0E0E11;font-size:18px;}
    #btn-menu:hover{border-color:#EA2451;background:#F7F6F4;}

    /* TOPBAR */
    header.topbar{padding:0 14px !important;height:auto !important;min-height:56px;flex-wrap:wrap !important;gap:8px;padding-top:10px !important;padding-bottom:10px !important;}
    /* Hide entity switcher on small screens */
    header.topbar .entity-switcher{display:none !important;}

    /* MAIN CONTENT */
    main{padding:20px 14px 80px !important;}

    /* ALL GRIDS - single column */
    .kpi-grid{display:grid !important;grid-template-columns:1fr !important;gap:12px !important;}
    .main-grid{display:flex !important;flex-direction:column !important;gap:16px !important;}
    .cards-grid{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;}
    .modal-detail-grid{grid-template-columns:1fr !important;}

    /* DOCUMENT TABLE - card layout */
    .doc-table-header{display:none !important;}
    .doc-row{display:flex !important;flex-wrap:wrap !important;gap:8px !important;padding:14px 16px !important;}
    .doc-row > *:nth-child(3){font-size:11px !important;color:#8A8A93;width:100%;}
    .doc-row > *:nth-child(5){width:100%;justify-content:flex-start !important;}

    /* EDITORIAL HEADER */
    .editorial-header{height:auto !important;min-height:56px;padding:10px 16px !important;flex-wrap:wrap !important;gap:8px;}
    .editorial-header nav{gap:2px !important;}
    .editorial-header nav span{font-size:12px !important;padding:7px 10px !important;}
    .editorial-header .entity-switcher{display:none !important;}

    /* EDITORIAL HERO BANNER */
    .editorial-hero{padding:20px !important;flex-direction:column !important;gap:20px !important;text-align:center;}
    .editorial-hero > div:first-child{margin:0 auto;}

    /* EDITORIAL MAIN */
    .editorial-main{padding:24px 14px 100px !important;}

    /* EDITORIAL DASHBOARD GRIDS */
    .editorial-grid{display:flex !important;flex-direction:column !important;gap:16px !important;}

    /* MODAL - bottom sheet */
    .modal-overlay{align-items:flex-end !important;padding:0 !important;}
    .modal-content{width:100% !important;max-width:100% !important;border-radius:20px 20px 0 0 !important;max-height:85vh !important;}
    .modal-detail-grid{grid-template-columns:1fr !important;}

    /* FLOATING COMPANY CARD (editorial) */
    .floating-company{left:12px !important;right:12px !important;bottom:12px !important;width:auto !important;}

    /* CATEGORY CHIPS WRAP */
    .cat-chips{gap:6px !important;}
    .cat-chips button{font-size:11px !important;padding:6px 10px !important;}

    /* SIDEBAR OVERLAY BACKDROP */
    body.sidebar-open{overflow:hidden;}
    .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:99;}
    body.sidebar-open .sidebar-overlay{display:block;}
  }

  /* --- PHONE (480px) --- */
  @media(max-width:480px){
    /* LOGIN */
    .login-hero{padding:24px 18px !important;}
    .login-hero h1{font-size:24px !important;}
    .login-stats{gap:14px !important;}
    .login-stats > div > div:first-child{font-size:20px !important;}
    .login-form-panel{padding:24px 16px !important;}
    .login-form-panel h2{font-size:22px !important;}
    .login-form-panel input{padding:10px 12px !important;font-size:13px !important;}
    .login-form-panel button[data-action="login"]{padding:12px !important;font-size:14px !important;}

    /* TOPBAR */
    header.topbar{padding:0 10px !important;min-height:50px;gap:6px;}
    /* Hide month selector on very small */
    header.topbar .month-selector{display:none !important;}

    /* MAIN */
    main{padding:14px 10px 70px !important;font-size:13px;}

    /* COMPLIANCE CARDS */
    .card-hover{padding:12px !important;font-size:13px;}

    /* FONT */
    body{font-size:13px;}

    /* EDITORIAL TITLE */
    .editorial-main h1{font-size:22px !important;}
    .docs-title{font-size:18px !important;}

    /* EDITORIAL HERO */
    .editorial-hero{padding:16px !important;gap:16px !important;}
    .editorial-hero-text{font-size:14px !important;}
    .editorial-hero-stats{gap:16px !important;flex-wrap:wrap;justify-content:center;}
    .editorial-hero-stats > div > div:first-child{font-size:22px !important;}

    /* EDITORIAL ROW ITEMS */
    .row-hover{padding:12px 14px !important;gap:10px !important;flex-wrap:wrap !important;}

    /* UPCOMING DATES */
    .upcoming-date-badge{width:38px !important;padding:4px 0 !important;}
    .upcoming-date-badge > div:first-child{font-size:14px !important;}

    /* MODAL */
    .modal-header{padding:18px 20px !important;}
    .modal-header-title{font-size:17px !important;}
    .modal-body{padding:16px !important;}
    .modal-actions button{font-size:12px !important;padding:10px 12px !important;}

    /* FLOATING COMPANY */
    .floating-company{font-size:12px !important;}
  }

  /* --- EXTRA SMALL PHONE (360px) --- */
  @media(max-width:360px){
    /* LOGIN */
    .login-hero{padding:20px 14px !important;}
    .login-hero h1{font-size:20px !important;}
    .login-hero p{font-size:12px !important;}
    .login-stats{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:8px !important;}
    .login-form-panel{padding:20px 12px !important;}
    .login-form-panel h2{font-size:20px !important;}

    /* TOPBAR */
    header.topbar{padding:0 8px !important;gap:4px;}
    #btn-menu{width:34px !important;height:34px !important;font-size:15px !important;}

    /* MAIN */
    main{padding:12px 8px 60px !important;}

    /* FONT */
    body{font-size:12px;}

    /* CARDS */
    .card-hover{padding:10px !important;font-size:12px;}

    /* SIDEBAR */
    aside.sidebar{width:230px !important;}

    /* EDITORIAL HERO */
    .editorial-hero{border-radius:12px !important;padding:14px !important;}
    .editorial-hero > div:first-child{width:80px !important;height:80px !important;}

    /* FLOATING COMPANY */
    .floating-company{left:8px !important;right:8px !important;bottom:8px !important;border-radius:10px !important;}
  }

  /* Toast slide-up animation */
  @keyframes slideUp {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* Drag-and-drop styles */
  .drop-zone-active {
    background: rgba(234,36,81,0.08) !important;
    border: 2px dashed #EA2451 !important;
    border-radius: 10px;
  }
  .drop-zone-invalid {
    background: rgba(220,38,38,0.05) !important;
    border: 2px dashed #FFB7C8 !important;
    border-radius: 10px;
  }
  .dragging-item {
    opacity: 0.5 !important;
  }
  .drag-over-highlight {
    background: rgba(234,36,81,0.15) !important;
    border-radius: 6px;
    outline: 2px solid rgba(234,36,81,0.5);
    outline-offset: -2px;
  }
  .drag-overlay {
    position: absolute;
    inset: 0;
    background: rgba(234,36,81,0.06);
    border: 2px dashed #EA2451;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    animation: slideUp .2s ease-out;
  }

  /* ========== UPLOADS PANEL ========== */
  .uploads-panel {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 370px;
    max-height: 420px;
    background: #fff;
    border: 1px solid #ECEBE8;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(14,14,17,0.12), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    animation: uploadsPanelIn 0.2s ease-out;
  }
  @keyframes uploadsPanelIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .uploads-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #0E0E11;
    color: #fff;
    flex-shrink: 0;
    min-height: 42px;
  }
  .uploads-panel-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
  }
  .uploads-panel-icon {
    flex-shrink: 0;
    opacity: 0.85;
  }
  .uploads-panel-title {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .uploads-panel-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .uploads-panel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    transition: background 0.15s;
  }
  .uploads-panel-btn:hover {
    background: rgba(255,255,255,0.2);
  }
  .uploads-panel-btn-close:hover {
    background: rgba(220,38,38,0.6);
  }

  .uploads-panel-body {
    overflow-y: auto;
    max-height: 340px;
    padding: 8px 0;
  }

  /* Individual upload items */
  .uploads-item {
    padding: 8px 14px 10px;
    border-bottom: 1px solid #F1F1EF;
    transition: background 0.15s;
  }
  .uploads-item:last-child {
    border-bottom: none;
  }
  .uploads-item:hover {
    background: #F7F6F4;
  }
  .uploads-item-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }
  .uploads-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .uploads-item-name {
    font-size: 12px;
    font-weight: 600;
    color: #0E0E11;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .uploads-item-detail {
    font-size: 11px;
    color: #8A8A93;
    font-weight: 500;
  }
  .uploads-item-detail-done {
    color: #137A50;
  }
  .uploads-item-detail-error {
    color: #BD2044;
  }
  .uploads-item-detail-cancelled {
    color: #A6620B;
  }
  .uploads-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding-top: 1px;
  }
  .uploads-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid #ECEBE8;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    color: #494951;
    transition: border-color 0.15s, color 0.15s;
  }
  .uploads-item-btn:hover {
    border-color: #EA2451;
    color: #0E0E11;
  }
  .uploads-item-btn-done {
    border-color: #BFE7D2;
    color: #137A50;
  }
  .uploads-item-btn-done:hover {
    border-color: #137A50;
  }

  /* Progress bar */
  .uploads-item-progress-track {
    margin-top: 6px;
    height: 4px;
    background: #ECEBE8;
    border-radius: 3px;
    overflow: hidden;
  }
  .uploads-item-progress-bar {
    height: 100%;
    background: #EA2451;
    border-radius: 3px;
    transition: width 0.2s ease-out;
  }
  .uploads-item-progress-done .uploads-item-progress-bar,
  .uploads-item-progress-bar-done {
    background: #1E9E6A;
  }
  .uploads-item-progress-error .uploads-item-progress-bar,
  .uploads-item-progress-bar-error {
    background: #EA2451;
    width: 100%;
    opacity: 0.4;
  }

  /* Status-specific item styling */
  .uploads-item-status-completed {
    opacity: 0.85;
  }
  .uploads-item-status-cancelled {
    opacity: 0.7;
  }

  /* Mobile responsive */
  @media (max-width: 480px) {
    .uploads-panel {
      width: calc(100vw - 16px);
      right: 8px;
      bottom: 8px;
      max-height: 50vh;
    }
  }

  /* ========== CONFLICT RESOLUTION DIALOG ========== */
  .conflict-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14,14,17,0.45);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: conflictFadeIn 0.15s ease-out;
  }
  @keyframes conflictFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .conflict-dialog {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 24px 64px rgba(14,14,17,0.22);
    overflow: hidden;
    animation: conflictSlideIn 0.2s ease-out;
  }
  @keyframes conflictSlideIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .conflict-header {
    padding: 22px 24px 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }
  .conflict-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #FFF3DF;
    color: #A6620B;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .conflict-header-text {
    flex: 1;
    min-width: 0;
  }
  .conflict-title {
    font-size: 16px;
    font-weight: 700;
    color: #0E0E11;
    margin-bottom: 4px;
  }
  .conflict-desc {
    font-size: 13px;
    color: #494951;
    line-height: 1.45;
  }

  /* Existing item card */
  .conflict-existing {
    margin: 0 24px 16px;
    padding: 12px 14px;
    background: #F7F6F4;
    border: 1px solid #ECEBE8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .conflict-existing-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #ECEBE8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .conflict-existing-info {
    flex: 1;
    min-width: 0;
  }
  .conflict-existing-name {
    font-size: 13px;
    font-weight: 600;
    color: #0E0E11;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .conflict-existing-meta {
    font-size: 11px;
    color: #8A8A93;
    margin-top: 2px;
  }

  /* Action buttons */
  .conflict-actions {
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .conflict-btn {
    width: 100%;
    border: 1px solid #ECEBE8;
    background: #fff;
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
  }
  .conflict-btn:hover:not(:disabled) {
    border-color: #EA2451;
    background: #F7F6F4;
  }
  .conflict-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .conflict-btn-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #0E0E11;
  }
  .conflict-btn-hint {
    font-size: 11px;
    color: #8A8A93;
    margin-top: 3px;
    padding-left: 22px;
  }
  .conflict-btn-replace {
    border-color: #FFB7C8;
  }
  .conflict-btn-replace:hover:not(:disabled) {
    border-color: #EA2451;
    background: #FFE8EE;
  }
  .conflict-btn-replace .conflict-btn-content {
    color: #BD2044;
  }
  .conflict-btn-cancel {
    border-color: #ECEBE8;
    background: #F7F6F4;
  }
  .conflict-btn-cancel:hover:not(:disabled) {
    background: #F1F1EF;
  }

  /* Rename section inside conflict dialog */
  .conflict-rename-section {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .conflict-rename-section .conflict-btn-rename {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
  }
  .conflict-rename-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #ECEBE8;
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    background: #fff;
  }
  .conflict-rename-input {
    flex: 1;
    border: none;
    padding: 10px 14px;
    font-size: 13px;
    color: #0E0E11;
    background: #F7F6F4;
    outline: none;
    font-family: inherit;
    min-width: 0;
  }
  .conflict-rename-input:focus {
    background: #fff;
  }
  .conflict-rename-input-error {
    background: #FFE8EE;
  }
  .conflict-rename-submit {
    width: 38px;
    height: 38px;
    border: none;
    background: #0E0E11;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
  }
  .conflict-rename-submit:hover:not(:disabled) {
    background: #26262B;
  }
  .conflict-rename-submit:disabled {
    background: #8A8A93;
    cursor: not-allowed;
  }
  .conflict-rename-error {
    padding: 6px 14px 10px;
    font-size: 11px;
    color: #BD2044;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  /* ========== ERROR BANNERS ========== */
  .error-banners-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
    pointer-events: none;
  }
  .error-banner {
    background: #fff;
    border: 1px solid #FFB7C8;
    border-left: 4px solid #EA2451;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(14,14,17,0.1);
    pointer-events: auto;
    animation: bannerSlideIn 0.25s ease-out;
  }
  @keyframes bannerSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .error-banner-icon {
    color: #EA2451;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .error-banner-text {
    flex: 1;
    min-width: 0;
  }
  .error-banner-message {
    font-size: 13px;
    font-weight: 600;
    color: #0E0E11;
  }
  .error-banner-detail {
    font-size: 11.5px;
    color: #494951;
    margin-top: 3px;
    line-height: 1.4;
  }
  .error-banner-dismiss {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #8A8A93;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
  }
  .error-banner-dismiss:hover {
    color: #BD2044;
    background: #FFE8EE;
  }

  /* Mobile responsive for conflict dialog */
  @media (max-width: 480px) {
    .conflict-dialog {
      max-width: calc(100vw - 24px);
      border-radius: 14px;
    }
    .conflict-header {
      padding: 18px 18px 12px;
    }
    .conflict-existing {
      margin: 0 18px 12px;
    }
    .conflict-actions {
      padding: 0 18px 18px;
    }
    .error-banners-container {
      right: 8px;
      left: 8px;
      max-width: none;
    }
  }

  /* ========== FY CALENDAR SELECTORS ========== */
  #calFYSelect:focus,
  #calFYMonthSelect:focus,
  #calFYSelectInline:focus,
  #calFYMonthSelectInline:focus {
    outline: none;
    border-color: #EA2451;
    box-shadow: 0 0 0 3px rgba(234,36,81,0.12);
  }
  #calFYSelect:hover,
  #calFYMonthSelect:hover,
  #calFYSelectInline:hover,
  #calFYMonthSelectInline:hover {
    border-color: #EA2451;
  }
  [data-action="calFYGo"]:hover {
    background: #26262B !important;
  }
  [data-action="calToday"]:hover {
    border-color: #EA2451 !important;
    background: #F7F6F4 !important;
  }

  /* ========== LAW DETAILS SLIDE-OVER PANEL ========== */
  .lawpanel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14,14,17,0.5);
    backdrop-filter: blur(3px);
    z-index: 70;
    display: flex;
    justify-content: flex-end;
    animation: lawpanelFade .18s ease-out;
  }
  @keyframes lawpanelFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .lawpanel {
    background: #fff;
    width: 480px;
    max-width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px rgba(0,0,0,0.28);
    animation: lawpanelSlideIn .22s cubic-bezier(.4,0,.2,1);
  }
  @keyframes lawpanelSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
  .lawpanel-header {
    background: #0E0E11;
    color: #fff;
    padding: 22px 26px;
    flex: none;
  }
  .lawpanel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px 28px;
  }
  .lawpanel-form-row {
    transition: background .12s, border-color .12s;
  }
  .lawpanel-form-row:hover {
    background: #F7F6F4;
    border-color: #ECEBE8;
  }

  /* Company Data expanded panel: fills the ENTIRE main content area, starting
     exactly at the right edge of the fixed 256px sidebar and extending to the
     right edge of the window. The overlay itself is inset from the left by the
     sidebar width so the sidebar stays fully visible and there is no blurred /
     empty dashboard strip between the sidebar and the panel. Reuses the
     .lawpanel slide-over shell. */
  .lawpanel-overlay.company-data-overlay {
    left: 256px;               /* start right after the fixed sidebar */
    justify-content: stretch;  /* let the panel fill the whole area */
  }
  .lawpanel.company-data-panel {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  /* Tablet: sidebar narrows to 220px (still fixed/visible). */
  @media (max-width: 1024px) {
    .lawpanel-overlay.company-data-overlay { left: 220px; }
  }
  /* Mobile: the sidebar becomes an off-canvas drawer (not occupying layout
     width), so the panel covers the full viewport width. */
  @media (max-width: 768px) {
    .lawpanel-overlay.company-data-overlay { left: 0; }
  }

  /* Dashboard Company Data widget hover affordance (it's a clickable card). */
  .company-data-widget:hover {
    border-color: #ECEBE8;
    box-shadow: 0 10px 26px rgba(14,14,17,0.07);
  }
  #headcountWidget,
  #empMasterWidget {
    cursor: pointer;
  }
  #headcountWidget [data-filterkey] {
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .12s;
  }
  #headcountWidget [data-filterkey]:hover {
    border-color: var(--hrx-brand, #EA2451) !important;
    box-shadow: 0 2px 8px rgba(14,14,17,0.06);
    transform: translateY(-1px);
  }

  /* Employee Master dashboard block — Employee Master + Headcount Snapshot
     split 50/50 on one row, then Office Locations spans the full width. The
     office row (.emp-master-grid--office) is always a single full-width column,
     so only the 50/50 row stacks on small screens. */
  @media (max-width: 720px) {
    .emp-master-grid:not(.emp-master-grid--office) { grid-template-columns: 1fr !important; }
  }

  /* Headcount snapshot grid inside the expanded panel — responsive columns. */
  @media (max-width: 900px) {
    .cd-headcount-grid { grid-template-columns: repeat(4, 1fr) !important; }
  }
  @media (max-width: 460px) {
    .cd-headcount-grid { grid-template-columns: repeat(2, 1fr) !important; }
  }

  /* Mobile: near-full-screen sheet */
  @media (max-width: 640px) {
    .lawpanel {
      width: 100%;
      height: 100vh;
    }
    .lawpanel-header {
      padding: 18px 18px;
    }
    .lawpanel-body {
      padding: 14px 16px 24px;
    }
  }

/* =====================================================================
   HRxBOARD DESIGN-SYSTEM ALIGNMENT (Client Portal)
   The client portal renders most chrome via inline styles in the portal
   JS (already remapped to the shared ink/brand tokens). These rules bring
   the body font, display headings, focus rings and pill buttons for the
   panels/modals defined in this stylesheet into line with the landing page.
   ===================================================================== */

body { font-family: var(--hrx-font-sans); }

/* Editorial SERIF display for the big page titles (landing-page character).
   Routed through the shared --hrx-font-display token so the family + fallback
   chain are IDENTICAL to the internal portal and the HRxBoard landing page. */
.login-hero h1,
.editorial-main h1,
.docs-title {
  font-family: var(--hrx-font-display);
  font-weight: 600;
  letter-spacing: -.01em;
}
/* Compact UI headings stay in the clean sans display face (shared token). */
.login-form-panel h2,
.modal-header-title,
.conflict-title {
  font-family: var(--hrx-font-sans);
  letter-spacing: -.02em;
  font-weight: 700;
}

/* Coral focus rings for the fields declared in this stylesheet. */
.conflict-rename-input:focus {
  box-shadow: 0 0 0 3px rgba(234,36,81,.12);
  border-color: #EA2451;
}

/* Rename submit is a BLACK primary action -> ink hover. */
.conflict-rename-submit { background: #0E0E11; }
.conflict-rename-submit:hover:not(:disabled) { background: #26262B; }

/* Uploads progress + drag affordances already remapped to brand; ensure the
   drop-zone active state uses the brand tint consistently. */
.drop-zone-active {
  background: rgba(234,36,81,0.06) !important;
  border-color: #EA2451 !important;
}
.drag-overlay {
  background: rgba(234,36,81,0.06);
  border-color: #EA2451;
}
.drag-over-highlight {
  background: rgba(234,36,81,0.12) !important;
  outline-color: rgba(234,36,81,0.5);
}

/* =====================================================================
   REFINEMENT PASS  (2026-09-29)  ·  Client Portal
   ---------------------------------------------------------------------
   Presentation-only polish for the chrome defined in THIS stylesheet
   (uploads panel, conflict dialog, error banners, law slide-over,
   skeletons). It aligns interaction timing, focus rings, radius and
   hover states with the Internal Portal refinement pass by consuming the
   shared design-tokens.css tokens. No functional/layout changes, no new
   colors/fonts, HRxBoard identity preserved (rose accent, ink, warm white).
   ===================================================================== */

/* ---- Consistent interaction timing across this file's controls -------- */
.uploads-item, .uploads-item-btn, .uploads-panel-btn,
.conflict-btn, .conflict-rename-submit, .error-banner-dismiss,
.lawpanel-form-row {
  transition: background-color var(--hrx-transition-fast),
              border-color var(--hrx-transition-fast),
              color var(--hrx-transition-fast),
              box-shadow var(--hrx-transition-fast);
}

/* ---- Skeletons align to token surfaces + shared radius ---------------- */
.skeleton {
  background: linear-gradient(90deg,
    var(--hrx-surface-cloud) 25%, var(--hrx-surface-muted) 50%, var(--hrx-surface-cloud) 75%);
  border-radius: var(--hrx-radius-sm);
}
.skeleton-card { border-radius: var(--hrx-card-radius); border-color: var(--hrx-border); }

/* ---- Uploads panel — unify radius, tokenized borders/hover ------------ */
.uploads-panel { border-radius: var(--hrx-radius-md); border-color: var(--hrx-border); box-shadow: var(--hrx-shadow-md); }
.uploads-item:hover { background: var(--hrx-hover-surface); }
.uploads-item-btn { border-radius: var(--hrx-radius-sm); border-color: var(--hrx-border); }
.uploads-item-btn:hover { border-color: var(--hrx-brand-ring); color: var(--hrx-text-primary); }

/* ---- Conflict dialog — soft, restrained, consistent radius/hover ------ */
.conflict-dialog { border-radius: var(--hrx-radius-lg); box-shadow: var(--hrx-shadow-lg); }
.conflict-btn { border-radius: var(--hrx-radius-sm); border-color: var(--hrx-border); }
.conflict-btn:hover:not(:disabled) { border-color: var(--hrx-brand-ring); background: var(--hrx-brand-wash); }
.conflict-btn-replace:hover:not(:disabled) { border-color: var(--hrx-brand); background: var(--hrx-danger-soft); }
.conflict-rename-submit { border-radius: 0; }

/* ---- Error banners — tokenized, subtle ------------------------------- */
.error-banner { border-radius: var(--hrx-radius-sm); border-color: var(--hrx-brand-ring); border-left-color: var(--hrx-brand); box-shadow: var(--hrx-shadow-sm); }
.error-banner-dismiss:hover { color: var(--hrx-brand-hover); background: var(--hrx-danger-soft); }

/* ---- Law slide-over — consistent header/body rhythm ------------------ */
.lawpanel-form-row:hover { background: var(--hrx-hover-surface); border-color: var(--hrx-border); }

/* =====================================================================
   CLIENT PORTAL CONSISTENCY PASS  (2026-09-29)
   ---------------------------------------------------------------------
   Makes the Client Portal read as the SAME HRxBoard product as the
   Internal Team Portal: shared Fraunces (display) + Inter (UI) fonts,
   matching sidebar nav proportions, active/hover treatment, header
   typography and card/heading scale. Presentation only — no functional,
   routing, data, or JS-logic changes. Consumes design-tokens.css tokens;
   uses the HRxBoard rose accent (never blue/navy).

   NOTE: the client portal renders most chrome via inline styles in the
   portal JS. These rules target the shared class hooks (.nav-item,
   .topbar, .sidebar, card headings) and use enough specificity / the
   cascade to refine them without touching business logic.
   ===================================================================== */

/* ---------- SIDEBAR NAV — match internal portal, slightly larger ------- */
/* Inactive · hover · active are three distinct states. Active is a subtle
   expansion (a few px taller + more padding) with the rose accent — it must
   not resize the sidebar or jump the layout. */
aside.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: var(--hrx-space-3);
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--hrx-radius-sm);
  cursor: pointer;
  font-family: var(--hrx-font-sans);
  font-size: 15px;                 /* ≈ internal nav, moderately larger */
  font-weight: var(--hrx-weight-medium);
  color: var(--hrx-text-secondary);
  transition: background-color 180ms var(--hrx-ease),
              color 180ms var(--hrx-ease),
              padding 180ms var(--hrx-ease);
}
aside.sidebar .nav-item .nav-ico {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--hrx-text-muted);
  transition: color 180ms var(--hrx-ease);
}
aside.sidebar .nav-item .nav-ico svg { width: 18px; height: 18px; }

/* HOVER — very subtle pink wash + accent (distinct from active). */
aside.sidebar .nav-item:hover {
  background: var(--hrx-brand-wash);
  color: var(--hrx-brand-hover);
}
aside.sidebar .nav-item:hover .nav-ico { color: var(--hrx-brand); }

/* ACTIVE — soft rose background, rose text/icon, slightly larger area. */
aside.sidebar .nav-item.is-active,
aside.sidebar .nav-item.active {
  background: var(--hrx-brand-soft);
  color: var(--hrx-brand-hover);
  font-weight: var(--hrx-weight-semibold);
  min-height: 48px;
  padding: 12px 15px;
}
aside.sidebar .nav-item.is-active .nav-ico,
aside.sidebar .nav-item.active .nav-ico { color: var(--hrx-brand); }

/* Keyboard focus stays visible (accessibility) — rose ring, never blue. */
aside.sidebar .nav-item:focus-visible {
  outline: none;
  box-shadow: var(--hrx-focus-soft);
}

/* Sidebar section label (OVERVIEW / CLIENT ENTITY) — shared label treatment. */
aside.sidebar nav > div:first-child,
aside.sidebar .side-section-label {
  font-family: var(--hrx-font-sans);
  letter-spacing: .14em;
}

/* ---------- SIGN OUT — restrained secondary (matches internal) --------- */
aside.sidebar [data-action="signOut"] {
  font-family: var(--hrx-font-sans);
  font-weight: var(--hrx-weight-semibold);
  transition: background-color var(--hrx-transition-fast),
              color var(--hrx-transition-fast),
              border-color var(--hrx-transition-fast);
}
aside.sidebar [data-action="signOut"]:hover {
  background: var(--hrx-danger-border);
}

/* ---------- HEADER — same pill + serif title as internal portal -------- */
/* The header title "Compliance Dashboard" already uses Fraunces inline; ensure
   the shared family/tracking resolve identically to the internal portal. */
header.topbar { font-family: var(--hrx-font-sans); }

/* ---------- BUTTON TYPOGRAPHY — consistent family/weight --------------- */
.btn-home, .btn-export,
header.topbar button,
[data-action="signOut"] {
  font-family: var(--hrx-font-sans);
  font-weight: var(--hrx-weight-semibold);
}
.btn-home:hover, .btn-export:hover {
  border-color: var(--hrx-brand-ring);
  background: var(--hrx-brand-wash);
  color: var(--hrx-brand-hover);
}

/* ---------- RESPONSIVE GUARDRAILS -------------------------------------- */
/* Larger nav text must never overflow or force the sidebar wider. Long labels
   wrap/ellipsize gracefully; the fixed 256px sidebar width is unchanged. */
aside.sidebar .nav-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  aside.sidebar .nav-item { font-size: 15px; min-height: 44px; }
  aside.sidebar .nav-item.is-active,
  aside.sidebar .nav-item.active { min-height: 46px; }
}

/* ---------- SHARED TYPOGRAPHY CLASSES (match internal portal) ---------- */
/* Card / section heading — editorial serif, matching the internal portal's
   .dash-card-head h2 treatment so both portals read as one product. */
.cp-card-title {
  font-family: var(--hrx-font-display);
  font-weight: var(--hrx-weight-semibold);
  font-size: var(--hrx-section-title);   /* 17px */
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--hrx-text-primary);
}
/* Page title — larger editorial serif, matching internal .dash-intro h1. */
.cp-page-title {
  font-family: var(--hrx-font-display);
  font-weight: var(--hrx-weight-semibold);
  font-size: var(--hrx-page-title);      /* 26px */
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--hrx-text-primary);
}

/* ---------- CARD RADIUS — unify toward the internal portal ------------- */
/* The client dashboard cards use a 20px "startup" radius inline; soften toward
   the shared card radius (14px) used across the internal portal, without
   touching layout/padding. Targets the dashboard grids' direct card children. */
.kpi-grid > div,
.main-grid section,
.emp-master-grid > section,
#empMasterWidget,
#officeLocationsWidget,
#headcountWidget {
  border-radius: var(--hrx-card-radius) !important;
}
@media (max-width: 640px) {
  .cp-page-title { font-size: 21px; }
}

/* =====================================================================
   PORTAL-WIDE FONT ENFORCEMENT  (2026-09-29)
   ---------------------------------------------------------------------
   Guarantees the SAME typography everywhere in the client portal — every
   view (Dashboard, Calendar, Documents, Activity, Billing, Employee
   Master), not just the sidebar/dashboard. The portal renders most chrome
   via inline styles; this makes the shared HRxBoard families the default
   so nothing can fall back to a system font, while serif page/section
   titles resolve to the SAME Fraunces token chain as the internal portal
   and the landing page. Mono (invoice #, CIN/PAN) is intentionally kept.
   ===================================================================== */

/* Base UI font for the whole portal app + all controls (shared sans token). */
#app,
#app input,
#app select,
#app textarea,
#app button {
  font-family: var(--hrx-font-sans);
}

/* Preserve intentional monospace (data identifiers) — never overridden. */
#app .mono,
#app [class*="mono"] {
  font-family: var(--hrx-font-mono);
}

/* All editorial serif headings resolve to the shared display token so the
   Fraunces family + fallback chain are identical across every portal view,
   even where an inline font-family was set. Same visual result — this only
   unifies the fallback order. */
.login-hero h1,
.editorial-main h1,
.docs-title,
.cp-page-title,
.cp-card-title {
  font-family: var(--hrx-font-display) !important;
}

/* =====================================================================
   SLIDE-OVER PANEL HEADER TYPOGRAPHY  (2026-09-29)
   ---------------------------------------------------------------------
   Shared classes for the dark slide-over panel headers (Employee Master,
   Office Locations) so their eyebrow / title / subtitle are driven by ONE
   place instead of duplicated inline styles, and stay identical. Uses the
   shared HRxBoard sans token (panel titles are compact UI headings, sans —
   matching the Employee Master panel). Presentation only.
   ===================================================================== */
.cp-panel-eyebrow {
  font-family: var(--hrx-font-sans);
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: var(--hrx-weight-semibold);
  color: rgba(255, 255, 255, 0.6);
}
.cp-panel-title {
  font-family: var(--hrx-font-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.25;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-panel-sub {
  font-family: var(--hrx-font-sans);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 5px;
}

/* Full-view back/close button (Employee Master & Office Locations) */
.btn-view-close {
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn-view-close:hover {
  background: var(--hrx-surface-muted, #F7F6F4) !important;
  color: var(--hrx-text-primary, #0E0E11) !important;
  border-color: var(--hrx-border-strong, rgba(14,14,17,.14)) !important;
}

/* Location Summary responsive grid */
.cd-loc-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 720px;
}
@media (max-width: 640px) {
  .cd-loc-summary-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Company data & Office Locations table sticky columns */
.cd-sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 var(--hrx-border, #ECEBE8);
}
th.cd-sticky-col {
  background: var(--hrx-surface-muted, #F7F6F4) !important;
  z-index: 2;
}
td.cd-sticky-col {
  background: #fff !important;
}

/* Change Password form focus */
#cp-current-password:focus,
#cp-new-password:focus,
#cp-confirm-password:focus {
  border-color: var(--hrx-brand, #EA2451) !important;
  box-shadow: 0 0 0 3px rgba(234, 36, 81, 0.12) !important;
}

/* ========================================================================== */
/* EMPLOYEE MANAGEMENT RECENT ACTIVITY — INLINE COLLAPSIBLE RIGHT SIDEBAR     */
/* ========================================================================== */
/*
 * INLINE COLLAPSIBLE SIDEBAR — NOT an overlay/modal/drawer.
 * The sidebar is a flex sibling of <main> inside the content column
 * (.cp-main-row). When .cp-main-row has .with-emp-activity, <main> shrinks and
 * this sidebar expands beside it, so the page content reflows to the left.
 * There is deliberately NO full-screen scrim and NO background blur/darkening.
 */

/* The content row that holds <main> + the sidebar. */
.cp-main-row {
  position: relative;
}

/*
 * The main content shrinks automatically (flex:1 + min-width:0) as the sidebar
 * animates its width in, so the reflow is smooth and in sync with the sidebar's
 * open transition — no explicit transition needed on the content itself.
 */
.cp-main-content {
  min-width: 0;
}

/* The sidebar itself: fixed width on desktop, slides in via width/opacity. */
.emp-act-sidebar {
  flex: none;
  width: 420px;
  align-self: stretch;
  background: #FAFAFA;
  border-left: 1px solid #ECEBE8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -8px 0 24px rgba(14, 14, 17, 0.05);
  /* Stick to the viewport so the list stays in view while the page scrolls. */
  position: sticky;
  top: 68px; /* height of the topbar */
  height: calc(100vh - 68px);
}
/* Entrance animation plays ONLY on the first render after opening (the JS adds
 * .is-opening once), so re-renders triggered by data loading don't re-flash. */
.emp-act-sidebar.is-opening {
  animation: empActSidebarIn .32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes empActSidebarIn {
  from { width: 0; opacity: 0; }
  to { width: 420px; opacity: 1; }
}
/* Reverse slide-out on close — mirrors the open animation. forwards keeps the
 * collapsed end state until the JS unmounts the element (see closeEmpActivityDrawer). */
.emp-act-sidebar.is-closing {
  animation: empActSidebarOut .3s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}
@keyframes empActSidebarOut {
  from { width: 420px; opacity: 1; }
  to { width: 0; opacity: 0; }
}

.emp-act-header {
  background: #0E0E11;
  color: #fff;
  padding: 22px 26px;
  flex: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.emp-act-tag {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
}

.emp-act-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
  line-height: 1.25;
  margin-top: 6px;
}

.emp-act-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 4px;
}

.emp-act-close-btn {
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
  flex: none;
}
.emp-act-close-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.emp-act-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 32px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Activity card styles */
.emp-act-card {
  background: #ffffff;
  border: 1px solid #ECEBE8;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(14, 14, 17, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.emp-act-card:hover {
  border-color: #DCDAD5;
  box-shadow: 0 3px 10px rgba(14, 14, 17, 0.06);
}

.emp-act-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.emp-act-card-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.emp-act-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.emp-act-icon-box.uploaded {
  background: #EFF6FF;
  color: #2563EB;
}
.emp-act-icon-box.updated, .emp-act-icon-box.replaced, .emp-act-icon-box.edited {
  background: #F5F3FF;
  color: #7C3AED;
}
.emp-act-icon-box.removed, .emp-act-icon-box.deleted, .emp-act-icon-box.disabled {
  background: #FEF2F2;
  color: #DC2626;
}
.emp-act-icon-box.added, .emp-act-icon-box.created {
  background: #ECFDF5;
  color: #059669;
}

.emp-act-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #0E0E11;
  line-height: 1.35;
  word-break: break-word;
}

.emp-act-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  flex: none;
  white-space: nowrap;
}
.emp-act-badge.uploaded {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid rgba(29, 78, 216, 0.15);
}
.emp-act-badge.updated, .emp-act-badge.replaced, .emp-act-badge.edited {
  background: #F5F3FF;
  color: #6D28D9;
  border: 1px solid rgba(109, 40, 217, 0.15);
}
.emp-act-badge.removed, .emp-act-badge.deleted, .emp-act-badge.disabled {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid rgba(185, 28, 28, 0.15);
}
.emp-act-badge.added, .emp-act-badge.created {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid rgba(4, 120, 87, 0.15);
}

.emp-act-detail-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 2px;
}

.emp-act-detail-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  line-height: 1.45;
}

.emp-act-label {
  font-weight: 600;
  color: #6B7280;
  flex: none;
  font-size: 12.5px;
}

.emp-act-emp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #0E0E11;
  background: #F7F6F4;
  border: 1px solid #ECEBE8;
  padding: 2px 9px;
  border-radius: 6px;
}

.emp-act-desc-text {
  color: #374151;
  font-size: 13px;
  word-break: break-word;
}

.emp-act-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #F3F4F6;
  flex-wrap: wrap;
  font-size: 12px;
  color: #6B7280;
}

.emp-act-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Tablet / narrower desktop: a slightly slimmer sidebar. */
@media (max-width: 1100px) {
  .emp-act-sidebar {
    width: 360px;
  }
  @keyframes empActSidebarIn {
    from { width: 0; opacity: 0; }
    to { width: 360px; opacity: 1; }
  }
  @keyframes empActSidebarOut {
    from { width: 360px; opacity: 1; }
    to { width: 0; opacity: 0; }
  }
}

/*
 * Small screens: stacking the content beside a sidebar is too cramped, so the
 * sidebar overlays the content area (still within the page, still non-modal)
 * and takes the full width. It is NOT a darkened/blurred modal — the content
 * simply sits behind it and reflow is unnecessary at this size.
 */
@media (max-width: 760px) {
  .emp-act-sidebar {
    position: fixed;
    top: 68px;
    right: 0;
    bottom: 0;
    height: auto;
    width: min(420px, 100vw);
    z-index: 60;
  }
  /* On mobile the sidebar is fixed/full-width, so it slides in via transform
   * (not width). Still only on the first render after opening. */
  .emp-act-sidebar.is-opening {
    animation: empActSidebarSlideIn .3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes empActSidebarSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
  /* On mobile the sidebar is fixed/full-width, so it slides OUT via transform. */
  .emp-act-sidebar.is-closing {
    animation: empActSidebarSlideOut .3s cubic-bezier(0.4, 0, 1, 1) forwards;
  }
  @keyframes empActSidebarSlideOut {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
  }
  .emp-act-header {
    padding: 18px 20px;
  }
  .emp-act-body {
    padding: 16px 16px 24px;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .cp-main-content,
  .emp-act-sidebar,
  .emp-act-sidebar.is-opening,
  .emp-act-sidebar.is-closing {
    transition: none;
    animation: none;
  }
}


/* ===================== Workflows (Employee Forms) ====================== */
/* Inline spinner shown inside the "Generating links…" button. Reuses the
   existing @keyframes spin defined above. */
.wf-spinner{
  display:inline-block;
  width:14px;height:14px;
  margin-right:8px;
  vertical-align:-2px;
  border:2px solid rgba(255,255,255,0.45);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .6s linear infinite;
}