/* ===================================================================
   HRJTEK – Documents (Frontend)  •  Clean 6-column table layout
   Columns: [☑] [File Name……] [Modified] [Created by] [File size] [Actions]
   This file intentionally avoids duplicate rules and !important soup.
   =================================================================== */

/* ---- Move modal (kept minimal) ----------------------------------- */
.hrjtek-modal .hrjtek-tree { padding: 8px 12px; max-height: 60vh; overflow: auto; }
.hrjtek-tree ul { list-style: none; margin: 6px 0; padding: 0; }
.hrjtek-tree .mv-node {
  display:block; width:100%; text-align:left; cursor:pointer;
  background:#fff; border:1px solid #e2e8f0; border-radius:6px; padding:8px 10px; margin:3px 0;
}
.hrjtek-tree .mv-node:hover { background:#f8fafc; }
.hrjtek-tree .mv-node.is-selected { outline:2px solid var(--hrjtek-accent, #2563eb); }

/* ===================================================================
   TABLE LAYOUT
   =================================================================== */

/* Define the grid once on the panel so header + rows share it */
.hrjtek-panel.card {
  /* fixed tracks */
  --docs-col-chk : 44px;     /* checkbox */
  --docs-col-mod : 200px;    /* date/time */
  --docs-col-auth: 200px;    /* author */
  --docs-col-size: 110px;    /* 58 KB */
   --docs-col-act: 140px;    /* action buttons area */
  /* File Name gets the rest but cannot push other columns */
  --docs-col-name: minmax(220px, 1fr);

  --docs-grid: var(--docs-col-chk)
               var(--docs-col-name)
               var(--docs-col-mod)
               var(--docs-col-auth)
               var(--docs-col-size)
               var(--docs-col-act);
}

/* Header strip */
.hrjtek-docs-listhead{
  display:grid;
  grid-template-columns: var(--docs-grid);
  align-items:center;
  column-gap:12px;

  padding:12px 16px;
  margin-top:8px;
  background:#f6f9ff;
  border:1px solid #e5edf7;
  border-bottom:0;
  border-radius:14px 14px 0 0;

  color:#1f2b43;
  font-weight:600;
}
.hrjtek-docs-listhead > .hdr-chk{ grid-column:1; display:grid; place-items:center; }
.hrjtek-docs-listhead > .hdr-name{ grid-column:2; }
.hrjtek-docs-listhead > .col.modified{ grid-column:3; }
.hrjtek-docs-listhead > .col.author  { grid-column:4; }
.hrjtek-docs-listhead > .col.size    { grid-column:5; }
.hrjtek-docs-listhead > .col.actions { grid-column:6; 
display:flex;
  align-items:center;
  justify-content:center;   /* header text centered, matches buttons */
  padding-right:0;
}

/* Body wrapper */
#hrjtek-docs-container{
  background:#fff;
  border:1px solid #e5edf7; border-top:0;
  border-radius:0 0 14px 14px;
  overflow:hidden;
}

/* Each row uses the exact same grid */
#hrjtek-docs-container .doc-row{
  display:grid;
  grid-template-columns: var(--docs-grid);
  align-items:center;
  column-gap:12px;

  padding:14px 16px;
  border-top:1px solid #eef3fb;
}
#hrjtek-docs-container .doc-row:first-child{ border-top-color:transparent; }
#hrjtek-docs-container .doc-row:hover{ background:#f9fbff; }

/* Pin cells to their columns */
#hrjtek-docs-container .doc-row > label.chk{ grid-column:1; display:grid; place-items:center; }
#hrjtek-docs-container .doc-row > .name     { grid-column:2; display:flex; align-items:center; gap:10px; min-width:0; }
#hrjtek-docs-container .doc-row > .col.modified{ grid-column:3; white-space:nowrap; color:#667085; }
#hrjtek-docs-container .doc-row > .col.author  { grid-column:4; white-space:nowrap; color:#667085; }
#hrjtek-docs-container .doc-row > .col.size    { grid-column:5; white-space:nowrap; color:#667085; }
#hrjtek-docs-container .doc-row > .col.actions { grid-column:6; display:flex;}

/* Checkbox size */
#hrjtek-docs-container .chk input,
.hrjtek-docs-listhead .hdr-chk input{ width:16px; height:16px; }

/* File name cell: icon + link (truncate long names) */
#hrjtek-docs-container .doc-row .name .ico{
  flex:0 0 auto; width:22px; height:22px; border-radius:6px; background:#e9eef7;
}
#hrjtek-docs-container .doc-row .name .ico.ico-folder{ background:#fde68a; }
#hrjtek-docs-container .doc-row .name .ico.ico-pdf   { background:#fecaca; }
#hrjtek-docs-container .doc-row .name .ico.ico-image { background:#e9d5ff; }
#hrjtek-docs-container .doc-row .name .ico.ico-doc   { background:#dbeafe; }
#hrjtek-docs-container .doc-row .name .ico.ico-sheet { background:#bbf7d0; }

#hrjtek-docs-container .doc-row .name a{
  color:#2563eb; font-weight:600; text-decoration:none;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Action buttons (Departments style) */
.btn-icon.sm{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:38px; border-radius:10px;
  background:#fff; border:1px solid #dbe2ef; cursor:pointer;
  transition:box-shadow .15s ease, transform .05s ease;
}
.btn-icon.sm .dashicons{ font-size:16px; line-height:1; }
.btn-icon.sm:hover{ box-shadow:0 3px 10px rgba(12,61,244,.12); }
.btn-icon.sm.danger{ border-color:#ffd1d1; }
.btn-icon.sm.danger .dashicons{ color:#d22; }

/* Always show actions (no hover reveal) */
#hrjtek-docs-container .doc-row .col.actions .btn-icon{ opacity:1; visibility:visible; }

/* Empty state */
#hrjtek-docs-container .docs-empty{
  margin:12px; padding:28px;
  border:1px dashed #d7e1f2; border-radius:12px; background:#fbfdff;
  color:#6b7280;
}
.hrjtek-docs-listhead > .col.actions,
#hrjtek-docs-container .doc-row > .col.actions{
  
  justify-content:center;   /* row buttons centered under header */
  padding-right:0;
  
}
/* ---- Smaller action buttons ---- */
.hrjtek-panel #hrjtek-docs-container .doc-row .btn-icon.sm{

  border-radius:8px;
}

.hrjtek-panel #hrjtek-docs-container .doc-row .btn-icon.sm .dashicons{
  font-size:14px;           /* slightly smaller icon */
  line-height:1;
}
/* Header cell text */
.hrjtek-docs-listhead > .col.actions { text-align: left; }

/* Row buttons */
#hrjtek-docs-container .doc-row > .col.actions { justify-content: flex-start; }

/* Document Manager: normalize button padding */
.hrjtek-panel.card .btn,
.hrjtek-panel.card .button,
.hrjtek-panel.card button,
.hrjtek-panel.card input[type="button"],
.hrjtek-panel.card input[type="submit"],
.hrjtek-panel.card input[type="reset"]{
  padding: 8px 15px !important;  /* <- your 15px */
  line-height: 1.2;
}

/* Action pill buttons (rename / delete) must have no inner padding */
.hrjtek-panel.card .btn-icon.sm{
  padding: 0 !important;  /* fixed size comes from width/height */
  box-sizing: border-box;
}

/* --- List view lead visuals ------------------------------------------------ */

/* Inline SVG folder symbol sits like an icon */
.hrjtek-panel #hrjtek-docs-container .doc-row .name .ico-folder-modern {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
  margin-right: 10px;
}

/* Thumbnail for images in list view */
.hrjtek-panel #hrjtek-docs-container .doc-row .name .ico-thumb {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  background: #f3f4f6;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  flex: 0 0 auto;
}

/* Generic file-type icon (keeps spacing consistent for non-images) */
.hrjtek-panel #hrjtek-docs-container .doc-row .name .ico-file {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-block;
  background: #e9eef7; /* base */
  flex: 0 0 auto;
  margin-right: 10px;
}
.hrjtek-panel #hrjtek-docs-container .doc-row .name .ico-file.pdf    { background:#ffe0e0; }
.hrjtek-panel #hrjtek-docs-container .doc-row .name .ico-file.doc    { background:#dbeafe; }
.hrjtek-panel #hrjtek-docs-container .doc-row .name .ico-file.sheet  { background:#d1fae5; }
.hrjtek-panel #hrjtek-docs-container .doc-row .name .ico-file.video  { background:#fde68a; }
.hrjtek-panel #hrjtek-docs-container .doc-row .name .ico-file.audio  { background:#fce7f3; }
.hrjtek-panel #hrjtek-docs-container .doc-row .name .ico-file.archive{ background:#fee2a2; }
.hrjtek-panel #hrjtek-docs-container .doc-row .name .ico-file.txt    { background:#e5e7eb; }


/* ===== Name cell icon sizing (folders & image previews) ===== */
.hrjtek-panel #hrjtek-docs-container .doc-row .name{
  display:flex; align-items:center; gap:12px; min-width:0;
}

/* container block for all icons */
.hrjtek-panel #hrjtek-docs-container .doc-row .name .name-ico{
  flex:0 0 auto;
  width: 48px;          /* increase if you want it larger */
  height: 38px;
  border-radius: 10px;
  display:inline-grid;
  place-items:center;

  overflow:hidden;
}

/* New bold-outline folder */
.hrjtek-panel #hrjtek-docs-container .doc-row .name .folder-ico .folder-svg2{
  width: 100%;
  height: 100%;
  display: block;
}

/* Keep image preview thumb visually similar in size */
.hrjtek-panel #hrjtek-docs-container .doc-row .name .thumb-ico{
  width: 48px;
  height: 38px;
  border-radius: 10px;
  background:#f2f6ff;
  border:1px solid #e6eefc;
}
.hrjtek-panel #hrjtek-docs-container .doc-row .name .thumb-ico img.name-thumb-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Blue folder SVG fills the box */
.hrjtek-panel #hrjtek-docs-container .doc-row .name .folder-ico{
  background:transparent;
}
.hrjtek-panel #hrjtek-docs-container .doc-row .name .folder-ico .folder-svg{
  width:100%; height:100%; display:block;
}

/* Image preview thumb */
.hrjtek-panel #hrjtek-docs-container .doc-row .name .thumb-ico{
  background:#f2f6ff;
  border:1px solid #e6eefc;
}
.hrjtek-panel #hrjtek-docs-container .doc-row .name .thumb-ico img.name-thumb-img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Fallback small file chips (pdf/doc/sheet/zip…) when not an image */
.hrjtek-panel #hrjtek-docs-container .doc-row .name .filechip{
  width:28px; height:28px;
  border-radius:6px;
  background:#e9eef7;
  border:1px solid #dbe2ef;
}

/* Specific tint by type (optional) */
.hrjtek-panel #hrjtek-docs-container .doc-row .name .filechip.ico-pdf   { background:#ffe4e4; border-color:#ffd2d2; }
.hrjtek-panel #hrjtek-docs-container .doc-row .name .filechip.ico-doc   { background:#e7f0ff; border-color:#d8e6ff; }
.hrjtek-panel #hrjtek-docs-container .doc-row .name .filechip.ico-sheet { background:#e8ffe8; border-color:#d3f5d3; }
.hrjtek-panel #hrjtek-docs-container .doc-row .name .filechip.ico-archive{ background:#fff3db; border-color:#ffe6b8; }

/* Keep the title ellipsis */
.hrjtek-panel #hrjtek-docs-container .doc-row .name a{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:#2563eb; font-weight:600; text-decoration:none;
}


/* list */
#hrjtek-docs-container .doc-row.folder .name .folder-img{
  width:48px; height:36px; object-fit:contain; flex:0 0 auto; border-radius:6px;
}
/* grid */
.doc-card.folder .thumb .folder-thumb{
  width:96px; height:72px; object-fit:contain; display:block; margin:18px auto 10px;
}

/* --- Upload progress bar: overlay (doesn't affect layout) --- */
#hrjtek-docs-uploader { position: relative; }  /* container */

.hrjtek-upbar{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;               /* sit just under the button pills */
  height: 4px;
  border-radius: 999px;
  background: #dbeafe;        /* light indigo track */
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.hrjtek-upbar .in{
  width: 0%;
  height: 100%;
  background: #2563eb;        /* indigo fill */
  transition: width .18s ease;
}

/* hide the bar when not in use */
.hrjtek-upbar.is-hidden { display: none; }

#hrjtek-docs-uploader { position: relative; }
.hrjtek-upbar{
  position: absolute; left: 0; right: 0; bottom: -8px;
  height: 4px; border-radius: 999px; background:#dbeafe; overflow:hidden;
}
.hrjtek-upbar .in{ height:100%; width:0%; background:#2563eb; transition:width .18s ease; }
.hrjtek-upbar.is-hidden{ display:none; }
span.hint {
    font-size: 16px;
}
button:focus, .menu-toggle:hover, button:hover, .ast-button:hover, .ast-custom-button:hover .button:hover, .ast-custom-button:hover, input[type=reset]:hover, input[type=reset]:focus, input#submit:hover, input#submit:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:hover, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:focus, body .wp-block-file .wp-block-file__button:hover, body .wp-block-file .wp-block-file__button:focus, .woocommerce-js a.button:hover, .woocommerce button.button:hover, .woocommerce .woocommerce-message a.button:hover, .woocommerce #respond input#submit:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce input.button.alt:hover, .woocommerce input.button:hover, .woocommerce button.button.alt.disabled:hover, .wc-block-grid__products .wc-block-grid__product .wp-block-button__link:hover, [CLASS*="wc-block"] button:hover, .woocommerce-js .astra-cart-drawer .astra-cart-drawer-content .woocommerce-mini-cart__buttons .button:not(.checkout):not(.ast-continue-shopping):hover, .woocommerce-js .astra-cart-drawer .astra-cart-drawer-content .woocommerce-mini-cart__buttons a.checkout:hover, .woocommerce button.button.alt.disabled.wc-variation-selection-needed:hover, [CLASS*="wc-block"] .wc-block-components-button:hover, [CLASS*="wc-block"] .wc-block-components-button:focus

 {
    
    background-color:  #2563eb !important; 
    color:#fff;
   
}

/* ===== GRID VIEW ===== */

/* Hide the list header when grid view is active */
.hrjtek-panel.is-grid .hrjtek-docs-listhead{ display:none !important; }
/* (if your browser supports :has, this also auto-works even without the JS class) */
.hrjtek-panel:has(#hrjtek-docs-container[data-view="grid"]) .hrjtek-docs-listhead{ display:none !important; }

/* Turn the container into a responsive card grid */
#hrjtek-docs-container[data-view="grid"]{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:22px;
  border:0;                 /* remove list borders */
  background:transparent;
  padding:10px 0 6px;
  overflow:visible;
}

/* Card shell */
#hrjtek-docs-container[data-view="grid"] .doc-card{
  background:#fff;
  border:1px solid #e6eefc;
  border-radius:16px;
  box-shadow:0 1px 6px rgba(42,70,140,.06);
  overflow:hidden;
}

/* Thumb area */
#hrjtek-docs-container[data-view="grid"] .doc-card .thumb{
  position:relative;
  background:linear-gradient(180deg,#eaf2ff 0%, #dfe9ff 100%);
  aspect-ratio: 16/11;                      /* keeps height consistent */
  display:flex; align-items:center; justify-content:center;
}

/* Top-left checkbox */

#hrjtek-docs-container[data-view="grid"] .doc-card .doc-chk{
  position:absolute; top:10px; left:10px; width:16px; height:16px;
}

/* Top-right actions (rename, delete) */
#hrjtek-docs-container[data-view="grid"] .doc-card .button-link{
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; display:grid; place-items:center;
  background:#fff; border:1px solid #e6eefc; border-radius:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
#hrjtek-docs-container[data-view="grid"] .doc-card .button-link.doc-rename{ right:56px; } /* pen sits left of trash */

/* Full clickable overlay to open */
#hrjtek-docs-container[data-view="grid"] .doc-card .stretch{ position:absolute; inset:0; }

/* Bottom meta strip (name + count/size) */
#hrjtek-docs-container[data-view="grid"] .doc-card .meta{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  padding:10px 12px;
  color:#fff;
  background:linear-gradient(180deg, transparent 0, rgba(0,0,0,.25) 55%, rgba(0,0,0,.45) 100%);
}
#hrjtek-docs-container[data-view="grid"] .doc-card .meta .name{
  font-weight:700; max-width:70%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#hrjtek-docs-container[data-view="grid"] .doc-card .meta .count{ opacity:.9; font-size:13px; }

/* Left meta icon – uses your image file */
#hrjtek-docs-container[data-view="grid"] .doc-card .meta .ico-folder-modern{
  width:22px; height:22px; flex:0 0 22px;
  background: url("../images/folder-icon.jpg") center/contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.20));
}
.doc-card.folder .thumb .meta {
   
     left: 0px !important; 
    right: 0px !important;
 
    bottom: 0px !important;
    padding: 5px 12px !important;
    background: linear-gradient(90deg, #0b63ce 0%, #0a7dff 100%) !important;
  
}
/* Keep list-row styles from bleeding into grid */
#hrjtek-docs-container[data-view="grid"] .doc-row{ display:none !important; }


.button
{
    background: linear-gradient(90deg, #0b63ce 0%, #0a7dff 100%);
    color:#fff;
    font-size: 16px;
}
button:hover{
     color:#fff;
     background-color: #FFF;
}
.view-switch{
    padding: 9px;
     border-radius: 0 px;
}
.view-switch .viewbtn{
    border-radius: 0px;
}
.view-switch .viewbtn.is-active{
        padding: 10px !important;
            background: #fff;
}
.view-switch .viewbtn:hover{
     
            background: #fff;
}
span.dashicons.dashicons-grid-view:hover {
     padding:0px;
            background: #fff;
}
span.dashicons.dashicons-menu:hover
 {
      padding:0px;
            background: #fff;
}

/* Select-all pill in the breadcrumb (Grid view) */
.hrjtek-docs-breadcrumb .grid-checkall{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid #e6eefc;
  background:#f6f9ff;
  border-radius:999px;
  font-size:13px;
  color:#334155;
}
.hrjtek-docs-breadcrumb .grid-checkall input{
  width:16px; height:16px;
}

/* Ensure action buttons sit above the full-card overlay link */
.hrjtek-portal .doc-card .thumb .button-link,
.hrjtek-portal .doc-card .thumb .chk {
  position: relative;
  z-index: 3;
}

.hrjtek-portal .doc-card .thumb .folder-open.stretch {
  position: absolute; /* it already likely is; this is just to be safe */
  inset: 0;
  z-index: 2;         /* below buttons */
}

/* ===== Grid card layering so checkbox beats full-card link ===== */
#hrjtek-docs-container[data-view="grid"] .doc-card .thumb { position: relative; }

/* Full-card link sits under controls */
#hrjtek-docs-container[data-view="grid"] .doc-card .thumb .folder-open.stretch {
  position: absolute; inset: 0; z-index: 1;
}

/* Checkbox (label) in top-left above the stretch link */
#hrjtek-docs-container[data-view="grid"] .doc-card .thumb .chk.chk-grid {
  position: absolute; top: 8px; left: 8px; z-index: 4;
}

/* Action buttons in top-right above the stretch link */
#hrjtek-docs-container[data-view="grid"] .doc-card .thumb .button-link.doc-rename,
#hrjtek-docs-container[data-view="grid"] .doc-card .thumb .button-link.doc-del {
  position: absolute; top: 8px; z-index: 4;
}
#hrjtek-docs-container[data-view="grid"] .doc-card .thumb .button-link.doc-rename { right: 50px; }
#hrjtek-docs-container[data-view="grid"] .doc-card .thumb .button-link.doc-del    { right: 8px;  }

/* Media sits at the bottom layer */
#hrjtek-docs-container[data-view="grid"] .doc-card .thumb .thumb-img,
#hrjtek-docs-container[data-view="grid"] .doc-card .thumb .folder-thumb { position: relative; z-index: 0; }

.doc-card .thumb { position: relative; }
.doc-card .thumb .folder-open.stretch { position:absolute; inset:0; z-index:1; } /* click layer */
.doc-card .thumb .button-link,
.doc-card .thumb .chk.chk-grid { position:absolute; z-index:2; } /* above overlay */

/* ===================================================================
   RESPONSIVE
   - Hide some meta columns on narrower screens, keep alignment intact.
   =================================================================== */
@media (max-width: 1100px){
  .hrjtek-panel.card { --docs-col-mod: 170px; --docs-col-auth: 180px; --docs-col-name: minmax(200px, 1fr);}
}

@media (max-width: 920px){
  .hrjtek-panel.card { --docs-col-auth: 0px; }  /* effectively hides author below */
  .hrjtek-docs-listhead .col.author,
  #hrjtek-docs-container .doc-row > .col.author{ display:none; }
  .hrjtek-panel.card {
    --docs-grid: var(--docs-col-chk) var(--docs-col-name) var(--docs-col-mod) var(--docs-col-size) var(--docs-col-act);
  }
  .hrjtek-docs-listhead,
  #hrjtek-docs-container .doc-row{ grid-template-columns: var(--docs-grid); }
  .hrjtek-docs-listhead .col.modified{ grid-column:3; }
  .hrjtek-docs-listhead .col.size    { grid-column:4; }
  .hrjtek-docs-listhead .col.actions { grid-column:5; }
  #hrjtek-docs-container .doc-row > .col.modified{ grid-column:3; }
  #hrjtek-docs-container .doc-row > .col.size    { grid-column:4; }
  #hrjtek-docs-container .doc-row > .col.actions { grid-column:5; }
}
@media (max-width: 680px){
  .hrjtek-docs-listhead .col.modified,
  #hrjtek-docs-container .doc-row > .col.modified{ display:none; }
  .hrjtek-panel.card {
    --docs-grid: var(--docs-col-chk) var(--docs-col-name) var(--docs-col-size) var(--docs-col-act);
  }
  .hrjtek-docs-listhead,
  #hrjtek-docs-container .doc-row{ grid-template-columns: var(--docs-grid); }
  .hrjtek-docs-listhead .col.size    { grid-column:3; }
  .hrjtek-docs-listhead .col.actions { grid-column:4; }
  #hrjtek-docs-container .doc-row > .col.size    { grid-column:3; }
  #hrjtek-docs-container .doc-row > .col.actions { grid-column:4; }
}
.hrjtek-form-grid {
  display: grid;
  gap: 16px;
}

.hrjtek-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hrjtek-field label {
  font-weight: 600;
  color: #000;
}

.hrjtek-access-panel select[multiple] {
  min-height: 160px;
}

/* Modal container */
.hrjtek-modal .modal-dialog {
  background: #ffffff;
  border-radius: 12px;
  max-width: 820px;
  width: 100%;
  margin: 60px auto;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

/* Header */
.modal-bar {
  background: linear-gradient(137deg, #0C3DF4 0%, #02B4FE 100%);
  color: #fff;
  padding: 14px 20px;
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
}

/* Body */
.hrjtek-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Fields */
.hrjtek-field label {
  font-size: 13px;
  font-weight: 600;
  color: #000;
  margin-bottom: 6px;
}

/* Inputs */
.hrjtek-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  background: #fff;
  transition: 0.2s;
}

.hrjtek-input:focus {
  border-color: #0C3DF4;
  box-shadow: 0 0 0 2px rgba(12,61,244,0.1);
  outline: none;
}

/* Multi select */
.hrjtek-multi {
  min-height: 120px;
  padding: 8px;
}

/* Footer */
.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #eee;
  background: #f9fafb;
}

/* Buttons */
.btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

.btn.primary {
  background: linear-gradient(137deg, #0C3DF4 0%, #02B4FE 100%);
  color: #fff;
  border: none;
}

.hrjtek-modal .modal-dialog {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.hrjtek-modal-body {
  overflow-y: auto;
}
.hrjtek-modal .modal-dialog {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.hrjtek-modal-body {
  overflow-y: auto;
}
.hrjtek-access-panel[hidden] {
  display: none !important;
}
.doc-card .thumb {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  min-height: 200px;
  background: #eef3fb;
}

.doc-card .thumb img.thumb-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
#hrjtek-docs-container {
  position: relative;
  transition: opacity 0.15s ease;
}



#hrjtek-docs-container.is-loading::after {
  content: "Loading...";
  position: absolute;
  inset: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #2563eb;
  background: rgba(255,255,255,0.75);
  border-radius: 12px;
}

#hrjtek-docs-container {
  position: relative;
  transition: opacity 0.15s ease;
  min-height: 160px;
}

#hrjtek-docs-container.is-loading {
  opacity: 0;
  pointer-events: none;
}

#hrjtek-docs-container.is-loading::after {
  content: "Loading...";
  position: absolute;
  inset: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #2563eb;
  background: rgba(255,255,255,0.82);
  border-radius: 12px;
}

.employee-docs-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 6px 0 14px;
}

.employee-docs-topbar .hrjtek-docs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.employee-docs-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
}

.employee-docs-search {
  flex: 1 1 auto;
}

.employee-docs-search .hrjtek-input {
  width: 100%;
}

.employee-docs-topbar .view-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: #f6f9ff;
  border: 1px solid #e5edf7;
  border-radius: 12px;
  flex: 0 0 auto;
}

.employee-docs-topbar .view-switch .viewbtn {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.employee-docs-topbar .view-switch .viewbtn.is-active {
  background: #fff;
  box-shadow: 0 2px 8px rgba(12, 61, 244, 0.10);
}

/* View toggle buttons: reset generic focus/hover styling */
.view-switch .viewbtn,
.view-switch .viewbtn:hover,
.view-switch .viewbtn:focus,
.view-switch .viewbtn:active {
  background: transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
  outline: none;
}

/* Active toggle button stays highlighted */
.view-switch .viewbtn.is-active,
.view-switch .viewbtn.is-active:hover,
.view-switch .viewbtn.is-active:focus,
.view-switch .viewbtn.is-active:active {
  background: #ffffff !important;
  color: #2563eb !important;
  box-shadow: 0 2px 8px rgba(12, 61, 244, 0.10) !important;
}

/* Optional: subtle focus ring instead of blue fill */
.view-switch .viewbtn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.25);
  outline-offset: 2px;
}