/* SERVE_EMPLOYEE_FILE_EXPLORER_20260929 */


.serve-explorer-shell-host{
 position:relative !important;
}


.serve-employee-explorer{
 position:absolute;

 left:0;
 right:0;
 bottom:0;

 z-index:60;

 display:flex;
 flex-direction:column;

 min-width:0;
 min-height:0;

 background:#fff;
}


.serve-employee-explorer[hidden]{
 display:none !important;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.serve-explorer-toolbar{
 flex:0 0 auto;

 display:flex;
 align-items:center;

 gap:10px;

 padding:
  14px 28px 10px;

 border-bottom:
  1px solid #ededf0;
}


.serve-explorer-nav-buttons{
 display:flex;
 gap:6px;
}


.serve-explorer-square{
 width:40px;
 height:40px;

 display:grid;
 place-items:center;

 border:
  1px solid #dedee3;

 border-radius:11px;

 background:#fff;
 color:#111;

 font:inherit;
 font-size:19px;
 font-weight:700;

 cursor:pointer;
}


.serve-explorer-square:hover{
 background:#f5f5f7;
}


.serve-explorer-square.small{
 width:36px;
 height:36px;

 font-size:14px;
}


.serve-explorer-breadcrumb{
 flex:1 1 auto;

 min-width:100px;
 height:40px;

 display:flex;
 align-items:center;

 gap:4px;

 overflow-x:auto;

 padding:
  0 10px;

 box-sizing:border-box;

 border:
  1px solid #dedee3;

 border-radius:11px;

 background:#fff;

 scrollbar-width:none;
}


.serve-explorer-breadcrumb::-webkit-scrollbar{
 display:none;
}


.serve-explorer-breadcrumb button{
 flex:0 0 auto;

 min-height:28px;

 padding:
  0 8px;

 border:0;
 border-radius:7px;

 background:transparent;
 color:#111;

 font:inherit;
 font-size:10px;
 font-weight:750;

 cursor:pointer;
}


.serve-explorer-breadcrumb button:hover{
 background:#f0f0f3;
}


.serve-explorer-breadcrumb span{
 color:#aaaab0;

 font-size:12px;
}


.serve-explorer-search{
 width:
  min(
   290px,
   24vw
  );

 height:40px;

 flex:0 0 auto;

 display:flex;
 align-items:center;

 gap:7px;

 padding:
  0 11px;

 box-sizing:border-box;

 border:
  1px solid #dedee3;

 border-radius:11px;

 background:#f7f7f9;
}


.serve-explorer-search span{
 color:#77777d;

 font-size:16px;
}


.serve-explorer-search input{
 width:100%;
 min-width:0;

 border:0;
 outline:0;

 background:transparent;
 color:#111;

 font:inherit;
 font-size:10px;
}


/* ============================================================
   COMMANDBAR
   ============================================================ */

.serve-explorer-commandbar{
 flex:0 0 auto;

 min-height:54px;

 display:flex;
 align-items:center;
 justify-content:space-between;

 gap:12px;

 padding:
  7px 28px;

 box-sizing:border-box;

 border-bottom:
  1px solid #ededf0;
}


.serve-explorer-command-left,
.serve-explorer-command-right{
 display:flex;
 align-items:center;

 gap:7px;
}


.serve-explorer-primary,
.serve-explorer-secondary,
.serve-explorer-selection-actions button{
 min-height:36px;

 padding:
  0 12px;

 border-radius:10px;

 font:inherit;
 font-size:9px;
 font-weight:800;

 cursor:pointer;
}


.serve-explorer-primary{
 border:
  1px solid #111;

 background:#111;
 color:#fff;
}


.serve-explorer-secondary{
 border:
  1px solid #dedee3;

 background:#fff;
 color:#111;
}


.serve-explorer-selection-actions{
 display:flex;
 align-items:center;

 gap:3px;

 margin-left:4px;

 padding-left:8px;

 border-left:
  1px solid #e3e3e7;
}


.serve-explorer-selection-actions[hidden]{
 display:none !important;
}


.serve-explorer-selection-actions button{
 border:0;

 background:transparent;
 color:#55555b;
}


.serve-explorer-selection-actions button:hover{
 background:#f3f3f5;
 color:#111;
}


.serve-explorer-selection-actions button.danger{
 color:#b3261e;
}


.serve-explorer-select{
 height:36px;

 padding:
  0 30px 0 10px;

 border:
  1px solid #dedee3;

 border-radius:10px;

 background:#fff;
 color:#111;

 font:inherit;
 font-size:9px;
 font-weight:750;
}


.serve-explorer-view-switch{
 display:flex;

 padding:3px;

 border-radius:10px;

 background:#f0f0f3;
}


.serve-explorer-view-switch button{
 min-height:30px;

 padding:
  0 10px;

 border:0;
 border-radius:7px;

 background:transparent;
 color:#77777d;

 font:inherit;
 font-size:8px;
 font-weight:800;

 cursor:pointer;
}


.serve-explorer-view-switch button.active{
 background:#fff;
 color:#111;

 box-shadow:
  0 1px 3px
  rgba(0,0,0,.08);
}


/* ============================================================
   CONTENT
   ============================================================ */

.serve-explorer-dropzone{
 flex:1 1 auto;

 min-height:0;

 overflow:auto;

 padding:18px 28px;

 box-sizing:border-box;

 background:#fff;
}


.serve-explorer-loading,
.serve-explorer-empty{
 min-height:260px;

 display:flex;
 align-items:center;
 justify-content:center;
 flex-direction:column;

 gap:7px;

 color:#85858b;

 text-align:center;
}


.serve-explorer-empty-icon{
 width:54px;
 height:54px;

 display:grid;
 place-items:center;

 margin-bottom:5px;

 border-radius:16px;

 background:#f2f2f4;
 color:#77777d;

 font-size:23px;
}


.serve-explorer-empty strong{
 color:#111;

 font-size:13px;
}


.serve-explorer-empty span{
 font-size:9px;
}


/* ============================================================
   FILE ICON
   ============================================================ */

.serve-explorer-icon{
 position:relative;

 display:inline-flex;

 flex:0 0 auto;
}


.serve-explorer-icon.folder{
 width:46px;
 height:34px;

 margin-top:6px;

 border-radius:
  5px 7px 7px 7px;

 background:#e7e7eb;
}


.serve-folder-tab{
 position:absolute;

 left:0;
 top:-6px;

 width:22px;
 height:10px;

 border-radius:
  5px 5px 0 0;

 background:#e7e7eb;
}


.serve-explorer-icon.file{
 width:40px;
 height:49px;

 display:grid;
 place-items:end center;

 padding-bottom:7px;

 box-sizing:border-box;

 border:
  1px solid #d9d9de;

 border-radius:6px;

 background:#fff;
}


.serve-explorer-icon.file::after{
 content:"";

 position:absolute;

 top:-1px;
 right:-1px;

 width:12px;
 height:12px;

 border-left:
  1px solid #d9d9de;

 border-bottom:
  1px solid #d9d9de;

 border-radius:
  0 6px 0 4px;

 background:#f4f4f6;
}


.serve-explorer-icon.file span{
 font-size:7px;
 font-weight:850;
}


/* ============================================================
   TILES
   ============================================================ */

.serve-explorer-tiles{
 display:grid;

 grid-template-columns:
  repeat(
   auto-fill,
   minmax(132px,1fr)
  );

 gap:10px;
}


.serve-explorer-tile{
 min-width:0;
 min-height:126px;

 display:flex;
 align-items:center;
 justify-content:center;
 flex-direction:column;

 gap:8px;

 padding:14px 10px;

 box-sizing:border-box;

 border:
  1px solid transparent;

 border-radius:13px;

 background:#fff;

 cursor:default;

 outline:none;
}


.serve-explorer-tile:hover{
 background:#f7f7f9;
}


.serve-explorer-tile.selected{
 border-color:#b8ccef;
 background:#eef4ff;
}


.serve-explorer-tile.drop-target{
 outline:
  2px solid #111;
}


.serve-explorer-tile-name{
 width:100%;

 overflow:hidden;

 color:#111;

 font-size:10px;
 font-weight:750;

 text-align:center;
 text-overflow:ellipsis;

 white-space:nowrap;
}


.serve-explorer-tile-meta{
 color:#929298;

 font-size:8px;
}


/* ============================================================
   LIST
   ============================================================ */

.serve-explorer-list{
 display:grid;

 grid-template-columns:
  repeat(
   auto-fill,
   minmax(260px,1fr)
  );

 gap:4px 12px;
}


.serve-explorer-list-row{
 min-width:0;
 min-height:54px;

 display:grid;

 grid-template-columns:
  42px minmax(0,1fr) auto;

 align-items:center;

 gap:10px;

 padding:
  5px 9px;

 box-sizing:border-box;

 border:
  1px solid transparent;

 border-radius:10px;

 outline:none;

 cursor:default;
}


.serve-explorer-list-row:hover{
 background:#f7f7f9;
}


.serve-explorer-list-row.selected{
 border-color:#b8ccef;
 background:#eef4ff;
}


.serve-explorer-list-row.drop-target{
 outline:
  2px solid #111;
}


.serve-explorer-list-row
.serve-explorer-icon.folder{
 width:31px;
 height:23px;

 margin-top:4px;
}


.serve-explorer-list-row
.serve-folder-tab{
 width:15px;
 height:7px;

 top:-4px;
}


.serve-explorer-list-row
.serve-explorer-icon.file{
 width:27px;
 height:34px;

 padding-bottom:4px;
}


.serve-explorer-list-row
.serve-explorer-icon.file span{
 font-size:5px;
}


.serve-explorer-list-name{
 min-width:0;

 overflow:hidden;

 font-size:10px;
 font-weight:750;

 text-overflow:ellipsis;

 white-space:nowrap;
}


.serve-explorer-list-type{
 color:#929298;

 font-size:8px;
}


/* ============================================================
   DETAILS
   ============================================================ */

.serve-explorer-details{
 min-width:760px;

 border:
  1px solid #e8e8ec;

 border-radius:12px;

 overflow:hidden;
}


.serve-explorer-detail-head,
.serve-explorer-detail-row{
 display:grid;

 grid-template-columns:
  minmax(260px,2fr)
  minmax(110px,.7fr)
  minmax(90px,.5fr)
  minmax(160px,.8fr);

 align-items:center;
}


.serve-explorer-detail-head{
 min-height:38px;

 background:#f5f5f7;

 color:#77777d;

 font-size:8px;
 font-weight:800;
}


.serve-explorer-detail-head > div,
.serve-explorer-detail-row > div{
 min-width:0;

 padding:
  0 12px;
}


.serve-explorer-detail-row{
 min-height:52px;

 border-top:
  1px solid #ededf0;

 color:#55555b;

 font-size:9px;

 outline:none;

 cursor:default;
}


.serve-explorer-detail-row:hover{
 background:#f8f8fa;
}


.serve-explorer-detail-row.selected{
 background:#eef4ff;
}


.serve-explorer-detail-row.drop-target{
 outline:
  2px solid #111;

 outline-offset:-2px;
}


.serve-explorer-detail-name{
 display:flex;
 align-items:center;

 gap:10px;

 color:#111;

 font-weight:750;
}


.serve-explorer-detail-name > span{
 min-width:0;

 overflow:hidden;

 text-overflow:ellipsis;

 white-space:nowrap;
}


.serve-explorer-detail-row
.serve-explorer-icon.folder{
 width:29px;
 height:21px;

 margin-top:3px;
}


.serve-explorer-detail-row
.serve-folder-tab{
 width:14px;
 height:6px;

 top:-4px;
}


.serve-explorer-detail-row
.serve-explorer-icon.file{
 width:25px;
 height:31px;

 padding-bottom:4px;
}


.serve-explorer-detail-row
.serve-explorer-icon.file span{
 font-size:5px;
}


/* ============================================================
   FOOTER
   ============================================================ */

.serve-explorer-footer{
 min-height:32px;

 flex:0 0 auto;

 display:flex;
 align-items:center;
 justify-content:space-between;

 gap:15px;

 padding:
  0 28px;

 box-sizing:border-box;

 border-top:
  1px solid #ededf0;

 background:#fafafa;

 color:#85858b;

 font-size:8px;
}


/* ============================================================
   CONTEXT MENU
   ============================================================ */

.serve-explorer-context-menu{
 position:fixed;

 z-index:9900;

 width:180px;

 padding:6px;

 box-sizing:border-box;

 border:
  1px solid #dfdfe4;

 border-radius:12px;

 background:#fff;

 box-shadow:
  0 14px 38px
  rgba(0,0,0,.15);
}


.serve-explorer-context-menu[hidden]{
 display:none !important;
}


.serve-explorer-context-menu button{
 width:100%;
 min-height:35px;

 padding:
  0 10px;

 border:0;
 border-radius:8px;

 background:transparent;
 color:#111;

 font:inherit;
 font-size:9px;
 font-weight:700;

 text-align:left;

 cursor:pointer;
}


.serve-explorer-context-menu button:hover{
 background:#f3f3f5;
}


.serve-explorer-context-menu button.danger{
 color:#b3261e;
}


.serve-explorer-context-separator{
 height:1px;

 margin:5px;

 background:#ededf0;
}


/* ============================================================
   GENERIC DIALOG
   ============================================================ */

.serve-explorer-dialog-overlay,
.serve-explorer-preview-overlay{
 position:fixed;
 inset:0;

 z-index:9950;

 display:none;
 align-items:center;
 justify-content:center;

 padding:24px;

 background:
  rgba(20,20,24,.28);

 backdrop-filter:
  blur(4px);
}


.serve-explorer-dialog-overlay.open,
.serve-explorer-preview-overlay.open{
 display:flex;
}


.serve-explorer-dialog{
 width:
  min(
   470px,
   calc(100vw - 32px)
  );

 box-sizing:border-box;

 padding:25px;

 border:
  1px solid #dfdfe4;

 border-radius:22px;

 background:#fff;

 box-shadow:
  0 25px 70px
  rgba(0,0,0,.18);
}


.serve-explorer-dialog h3{
 margin:
  0 0 18px;

 font-size:19px;
}


.serve-explorer-dialog-copy{
 margin:
  -7px 0 18px;

 color:#77777d;

 font-size:10px;
 line-height:1.5;
}


.serve-explorer-dialog-field{
 display:grid;

 gap:6px;
}


.serve-explorer-dialog-field > span{
 color:#66666c;

 font-size:9px;
 font-weight:750;
}


.serve-explorer-dialog-field input,
.serve-explorer-dialog-field select{
 width:100%;
 height:48px;

 padding:
  0 12px;

 box-sizing:border-box;

 border:
  1px solid #dcdce1;

 border-radius:12px;

 outline:none;

 background:#f5f5f7;
 color:#111;

 font:inherit;
 font-size:12px;
}


.serve-explorer-dialog-actions{
 display:flex;
 align-items:center;
 justify-content:flex-end;

 gap:8px;

 margin-top:20px;
}


.serve-explorer-dialog-actions button{
 min-height:40px;

 padding:
  0 14px;

 border-radius:11px;

 font:inherit;
 font-size:9px;
 font-weight:800;

 cursor:pointer;
}


.serve-explorer-dialog-actions
button.secondary{
 border:
  1px solid #dedee3;

 background:#fff;
 color:#111;
}


.serve-explorer-dialog-actions
button.primary{
 border:
  1px solid #111;

 background:#111;
 color:#fff;
}


.serve-explorer-dialog-actions
button.danger{
 border:
  1px solid #b3261e;

 background:#b3261e;
 color:#fff;
}


/* ============================================================
   PREVIEW
   ============================================================ */

.serve-explorer-preview-modal{
 width:
  min(
   1000px,
   calc(100vw - 48px)
  );

 height:
  min(
   760px,
   calc(100vh - 48px)
  );

 display:flex;
 flex-direction:column;

 overflow:hidden;

 border:
  1px solid #dfdfe4;

 border-radius:24px;

 background:#fff;

 box-shadow:
  0 28px 90px
  rgba(0,0,0,.2);
}


.serve-explorer-preview-head{
 flex:0 0 auto;

 display:flex;
 align-items:center;
 justify-content:space-between;

 gap:20px;

 padding:
  17px 20px;

 border-bottom:
  1px solid #ededf0;
}


.serve-explorer-preview-head h3{
 margin:0;

 font-size:16px;
}


.serve-explorer-preview-head p{
 margin:
  4px 0 0;

 color:#85858b;

 font-size:8px;
}


.serve-explorer-preview-actions{
 display:flex;
 align-items:center;

 gap:8px;
}


.serve-explorer-preview-actions button{
 min-height:38px;

 padding:
  0 13px;

 border:
  1px solid #dedee3;

 border-radius:10px;

 background:#fff;
 color:#111;

 font:inherit;
 font-size:9px;
 font-weight:800;

 cursor:pointer;
}


.serve-explorer-preview-actions
button.close{
 width:40px;
 height:40px;

 padding:0;

 border:0;
 border-radius:50%;

 background:#f1f1f3;

 font-size:21px;
}


.serve-explorer-preview-body{
 flex:1 1 auto;

 min-height:0;

 display:flex;
 align-items:center;
 justify-content:center;

 overflow:auto;

 background:#f5f5f7;
}


.serve-explorer-preview-image{
 max-width:100%;
 max-height:100%;

 object-fit:contain;
}


.serve-explorer-preview-frame{
 width:100%;
 height:100%;

 border:0;

 background:#fff;
}


.serve-explorer-preview-text{
 width:100%;
 min-height:100%;

 margin:0;

 padding:24px;

 box-sizing:border-box;

 overflow:auto;

 background:#fff;
 color:#222;

 font:
  12px/1.55
  ui-monospace,
  SFMono-Regular,
  Menlo,
  monospace;

 white-space:pre-wrap;
}


.serve-explorer-preview-fallback{
 display:flex;
 align-items:center;
 justify-content:center;
 flex-direction:column;

 gap:10px;

 color:#77777d;
}


.serve-explorer-preview-fallback strong{
 margin-top:8px;

 color:#111;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1000px){

 .serve-explorer-toolbar{
  flex-wrap:wrap;

  padding:
   12px 16px 9px;
 }


 .serve-explorer-breadcrumb{
  flex:
   1 1 calc(100% - 100px);
 }


 .serve-explorer-search{
  width:100%;
  flex:1 1 100%;
 }


 .serve-explorer-commandbar{
  flex-wrap:wrap;

  padding:
   7px 16px;
 }


 .serve-explorer-command-left,
 .serve-explorer-command-right{
  flex-wrap:wrap;
 }


 .serve-explorer-dropzone{
  padding:
   14px 16px;
 }


 .serve-explorer-footer{
  padding:
   0 16px;
 }

}


/* SERVE_EMPLOYEE_EXPLORER_LAYER_REPAIR_20260929 */

/*
 * employeeFileOverlay liegt selbst sehr hoch.
 * Dialoge des Explorers müssen darüber liegen.
 */

.serve-explorer-context-menu{
 z-index:100100 !important;
}


.serve-explorer-dialog-overlay,
.serve-explorer-preview-overlay{
 z-index:100200 !important;
}


/*
 * Explorer beginnt exakt unter dem
 * kompakten Aktenkopf und füllt den Rest.
 */
.serve-employee-explorer{
 min-height:0 !important;
}


/*
 * Die Toolbar darf nicht unnötig wachsen.
 */
.serve-explorer-toolbar,
.serve-explorer-commandbar{
 flex-shrink:0 !important;
}


/* SERVE_EXPLORER_FOLDER_STABLE_VISUAL_20260930 */


/* Ordner bewusst schwarz */
.serve-explorer-icon.folder,
.serve-explorer-icon.folder
.serve-folder-tab{
 background:#111 !important;
}


/*
 * Details-Bug:
 * die alte Regel ".serve-explorer-detail-name > span"
 * trifft auch das Icon, weil das Icon selbst ein span ist.
 */
.serve-explorer-detail-name
> .serve-explorer-icon{
 overflow:visible !important;

 text-overflow:clip !important;

 white-space:normal !important;
}


.serve-explorer-detail-name
> span:not(.serve-explorer-icon){
 min-width:0;

 overflow:hidden;

 text-overflow:ellipsis;

 white-space:nowrap;
}


/* Ordner sind Navigationselemente */
.serve-explorer-tile[data-entry-type="folder"],
.serve-explorer-list-row[data-entry-type="folder"],
.serve-explorer-detail-row[data-entry-type="folder"]{
 cursor:pointer !important;
}


/*
 * Keine Layoutbewegung für Hover/Selected:
 * Borderbreite bleibt immer gleich.
 */
.serve-explorer-tile,
.serve-explorer-list-row{
 box-sizing:border-box;
}


/*
 * Browser darf Text/Bild beim normalen Ordnerklick
 * nicht markieren.
 */
.serve-explorer-tile[data-entry-type="folder"],
.serve-explorer-list-row[data-entry-type="folder"],
.serve-explorer-detail-row[data-entry-type="folder"]{
 user-select:none;
}


/* SERVE_DOCUMENTS_SINGLE_OWNER_20260930 */

/*
 * Personal → Dokumente gehört ausschließlich dem neuen Explorer.
 *
 * Alte Stammdaten-/Dokumenten-Inhalte dürfen während dieses
 * Modus nicht für einen einzelnen Frame sichtbar werden.
 */
#employeeFileOverlay.serve-documents-explorer-mode
#employeeFileContent
> .employee-file-body{
 position:relative !important;

 padding:0 !important;
}


/*
 * Solange der neue Dokumentenmodus aktiv ist, wird jeglicher
 * Legacy-Inhalt im Body verborgen.
 */
#employeeFileOverlay.serve-documents-explorer-mode
#employeeFileContent
> .employee-file-body
> :not(#serveEmployeeExplorer){
 display:none !important;
}