:root {
    --primary-color: #0a8c7f;
    --secondary-color: #ffa500;
    --accent-color: #fd7175;
    --accent-color-hover: #db5153;
    --background-color: #fff;
    --light-background-color: #c1a17b;
    --medium-background-color: #c1a17b;
    --dark-background-color: #222;
    --text-color: #635645;
    --light-text-color: #fff;
    --light-grey: #eaeaea;
    --primary-font: 'Montserrat', sans-serif;
    --heading-font: 'Montserrat', sans-serif;
}

.status-bar { 

    background-color: var(--dark-background-color);
    color: var(--light-text-color);

}

.status-bar .orange {
    color: var(--medium-background-color);
    top: 10px;
}
.full-background .orange {
    color: var(--light-background-color);
    top: 17px;
    left: 10px;
    font-size: 25px;
}


.card-header {
    background-color: var(--light-background-color);
}

h1,h2,h3,h3,h4,h5,h6,.card-header {
    color: var(--light-text-color);
}

.active>.page-link, .page-link.active {

    background-color: var(--light-background-color);
    border-color: var(--light-background-color);
}
.page-link {

    color: var(--light-background-color);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--accent-color);
    --bs-btn-border-color: var(--accent-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent-color-hover);
    --bs-btn-hover-border-color: var(--accent-color-hover);
    --bs-btn-focus-shadow-rgb: 253, 113, 117;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--accent-color-hover);
    --bs-btn-active-border-color: var(--accent-color-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--accent-color);
    --bs-btn-disabled-border-color: var(--accent-color);
}

.full-background { 
    background: var(--medium-background-color);
 }

.full-background label {
    color: var(--light-text-color) !important;
} 

#sidebar ul ul a {
    background: var(--medium-background-color);
}

.select2-container--default .select2-selection--single {
    border: 1px solid #ddd !important;
    border-radius: 4px;
    height: 32px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px;
    font-size: 14px !important;
}

/* ===== Explorer (layout) ===== */
#explorer-app { font-family: system-ui, Arial, sans-serif; background:#fff; color:#212529; }
#explorer-app .explorer-header { padding:10px 14px; border-bottom:1px solid #e9ecef; display:flex; align-items:center; gap:10px; }
#explorer-app .explorer-body { display:grid; grid-template-columns:320px 1fr; min-height:420px; }
#explorer-app #sidebar { border-right:1px solid #e9ecef; padding:8px; overflow:auto; background:#fafafa; }
#explorer-app #content { padding:10px; overflow:auto; }
#explorer-app .crumb { color:#0d6efd; cursor:pointer; margin-right:6px; }
#explorer-app .crumb::after { content:' / '; color:#6c757d; margin-left:6px; }
#explorer-app .crumb:last-child { color:#212529; pointer-events:none; }
#explorer-app .crumb:last-child::after { content:''; }
#explorer-app table.explorer-grid { width:100%; border-collapse:collapse; background:#fff; }
#explorer-app table.explorer-grid th, #explorer-app table.explorer-grid td { padding:8px 10px; border-bottom:1px solid #e9ecef; text-align:left; }
#explorer-app table.explorer-grid thead th { background:#f8f9fa; position:sticky; top:0; z-index:1; }
#explorer-app td.explorer-actions > button { margin-left:6px; }
#explorer-app .preview { max-width:100%; max-height:70vh; border:1px solid #e9ecef; }

/* ===== jsTree (scoped, Bootstrap-safe) ===== */
#explorer-app #sidebar .jstree-default .jstree-container-ul {
  margin: 0 !important;
  padding: 6px 0 6px 10px !important;      /* small left pad so level 1 isn't on border */
  background: transparent !important;
}
#explorer-app #sidebar .jstree-default .jstree-children { margin-left: 18px !important; } /* standard indent */

/* One row = one line. Keep icons and text on same baseline. */
#explorer-app #sidebar .jstree-default .jstree-node {
  min-height: 20px !important;
  line-height: 20px !important;
}
#explorer-app #sidebar .jstree-default .jstree-anchor {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 20px !important;
  line-height: 20px !important;
  padding: 0 4px !important;
  color: #212529 !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Toggle + icon sizing. Do NOT alter sprite background-size. */
#explorer-app #sidebar .jstree-default .jstree-ocl,
#explorer-app #sidebar .jstree-default .jstree-themeicon,
#explorer-app #sidebar .jstree-default .jstree-icon {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  vertical-align: middle !important;
}
#explorer-app #sidebar .jstree-default .jstree-ocl { margin-right: 4px !important; }
#explorer-app #sidebar .jstree-default .jstree-anchor > .jstree-themeicon { background-size: auto !important; }

/* Light hover/active state (no wholerow plugin) */
#explorer-app #sidebar .jstree-default .jstree-hovered { background:#f8f9fa !important; border-radius:4px !important; }
#explorer-app #sidebar .jstree-default .jstree-clicked { background:#e9ecef !important; border-radius:4px !important; }

/* Neutralize global UL/LI resets */
#explorer-app #sidebar ul.jstree-container-ul,
#explorer-app #sidebar li.jstree-node {
  list-style: none !important;
  text-indent: 0 !important;
}
/* Smaller indent and a touch less left padding on the first level */
#explorer-app #sidebar .jstree-default .jstree-container-ul { padding-left: 6px !important; }
#explorer-app #sidebar .jstree-default .jstree-children { margin-left: 10px !important; } /* try 10px if you want tighter */
#explorer-app #sidebar .jstree-default .jstree-ocl { margin-right: 3px !important; }     /* slightly tighter gap before icon */
@media (min-width: 1400px) {
  #explorer-app .explorer-body { grid-template-columns: 360px 1fr; }
}
@media (max-width: 991.98px) {
  #explorer-app .explorer-body { grid-template-columns: 260px 1fr; }
}


/* --- SharePoint "creating folders" animation used inside SweetAlert --- */
.sp-creating {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 260px;
}
.sp-anim {
  position: relative; width: 140px; height: 80px; margin: 8px auto 2px;
}
.sp-folder {
  position: absolute; width: 44px; height: 34px; border-radius: 6px 6px 4px 4px;
  background: #f3c86a; box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset, 0 1px 2px rgba(0,0,0,0.08);
  transform-origin: 50% 100%;
  animation: sp-pop 1.6s ease-in-out infinite;
}
.sp-folder::before {
  content: ""; position: absolute; left: 6px; top: -6px; width: 18px; height: 8px;
  background: #e7b958; border-radius: 4px 4px 0 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;
}
/* three folders, slightly offset in time/space */
.sp-folder.f1 { left: 10px;  bottom: 18px; animation-delay: 0s;   }
.sp-folder.f2 { left: 48px;  bottom: 10px; animation-delay: .25s; }
.sp-folder.f3 { left: 86px;  bottom: 18px; animation-delay: .5s;  }

@keyframes sp-pop {
  0%, 100% { transform: translateY(0) scale(1);   opacity: .95; }
  50%      { transform: translateY(-6px) scale(1.04); opacity: 1; }
}

.sp-bar {
  margin-top: 10px; width: 140px; height: 6px; background: #eee; border-radius: 999px;
  overflow: hidden; position: relative;
}
.sp-bar > i {
  content: ""; position: absolute; left: -40%; top: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, #0d6efd 0%, #66a6ff 100%);
  border-radius: 999px;
  animation: sp-slide 1.2s ease-in-out infinite;
}
@keyframes sp-slide {
  0%   { left: -40%; width: 30%; }
  50%  { left: 50%;  width: 60%; }
  100% { left: 110%; width: 30%; }
}

.field-error-highlight {
    animation: shake 0.3s ease-in-out, flashBorder 1s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

@keyframes flashBorder {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
    50% { box-shadow: 0 0 5px 2px rgba(255, 0, 0, 0.5); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}