/* ========================================================================
   Army OCS Database · master stylesheet
   (duplicates & legacy rules removed / unified)
   ===================================================================== */

/* ---------- Global tokens ------------------------------------------------ */
:root{
  --navbar-height : 56px;   /* fixed-top Bootstrap default */
  --footer-height : 4rem;   /* ≈ 64 px */
}

html,body{height:100%}
body{
  margin:0;
  line-height:1.5;
  box-sizing:border-box;
}

/* ---------- NAVBAR ------------------------------------------------------- */
.navbar{
  box-shadow:0 4px 6px rgba(0,0,0,.1);
  transition:all .3s ease-in-out;
  z-index:1050;
}

/* ---------- SIDEBAR ------------------------------------------------------ */
.sidebar{
  position:fixed;
  top:var(--navbar-height);
  left:0;
  width:271px;
  height:calc(100vh - var(--navbar-height));
  background:#3c3b3a;
  color:#fff;
  overflow-y:auto;
  padding-top:1.5rem;
  transition:width .3s ease;
  z-index:1040;
}
.sidebar.collapsed{width:60px}

.sidebar a{
  display:block;
  padding:10px 15px;
  font-size:14px;
  text-decoration:none;
  white-space:nowrap;
  color:#fff;
}
.sidebar a:hover          {background:#4b4a48}
.sidebar a.active         {background:#5a5a5a;font-weight:700;border-left:4px solid yellow}
.sidebar .submenu         {padding-left:2.5rem;font-size:13px}
.sidebar .submenu-level2  {padding-left:3.5rem;font-size:12px}

/* collapse mode ▸ keep only icons */
.sidebar.collapsed a     {text-align:center;font-size:0}
.sidebar.collapsed a .bi {font-size:1.25rem}

#toggleSidebarBtn{
  min-width:40px;
  padding:.375rem .5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem;
}
.sidebar.collapsed #toggleSidebarBtn{margin:0 auto}
.sidebar.collapsed #menuLabel{display:none}

/* ---------- MAIN WRAPPER / CONTENT -------------------------------------- */
.content-wrapper{
  margin-left:271px;
  padding:20px;
  padding-top:var(--navbar-height);  /* never hide under navbar */
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition:margin-left .3s ease;
}
.content-wrapper.expanded{margin-left:60px}

.content{
  flex-grow:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* hero helper used on landing page */
.hero-center{
  min-height:calc(100vh - var(--navbar-height) - var(--footer-height));
  display:flex;
  justify-content:center;
  align-items:center;
}

/* ---------- FOOTER ------------------------------------------------------- */
.footer{
  width:100%;
  min-height:var(--footer-height);
  background:#f8f9fa;
  padding:10px 0;
  text-align:center;
  box-shadow:0 -2px 6px rgba(0,0,0,.1);
}

/* ---------- LANDING LOGO ------------------------------------------------- */
.landing-logo{
  max-height:calc(100vh - var(--navbar-height) - var(--footer-height) - 1rem);
  width:clamp(300px,60vw,900px);
  height:auto;
}

/* ---------- ANIMATION ---------------------------------------------------- */
.come-in{
  transform:translateY(150px);
  animation:come-in .8s ease forwards;
}
.come-in:nth-child(odd){animation-duration:.6s}
.already-visible{transform:translateY(0);animation:none}
@keyframes come-in{to{transform:translateY(0)}}

/* ---------- BG UTILS ----------------------------------------------------- */
.bg{
  position:relative;top:0;left:0;min-width:100%;min-height:100%;
}
.back{
  position:relative;top:0;left:0;
  min-width:600px;min-height:100%;
  width:130%;height:130%;
}

/* ---------- RESPONSIVE --------------------------------------------------- */
@media(max-width:992px){
  .sidebar{position:relative;width:100%;height:auto}
  .content-wrapper,
  .content-wrapper.expanded{margin-left:0}
}

/* ========================================================================
   TABLE utilities (scrollable, sortable)
   ===================================================================== */
.table-container{
  width:100%;
  margin-left:10%;
  max-height:80vh;
  overflow:auto;
  border:1px solid #dee2e6;
}

.table{
  table-layout:auto;          /* intrinsic column widths           */
  min-width:1200px;           /* force horizontal scroll if needed */
  width:max-content;          /* but shrink if content permits     */
  border-collapse:collapse;
}

.table thead th{
  position:sticky;
  top:0;
  background:#343a40;         /* bootstrp .table-dark */
  color:#fff;
  z-index:2;
}

.table th,
.table td{
  white-space:nowrap;
  padding:6px 12px;
  text-align:center;
}

.table th:first-child,
.table td:first-child{
  width:140px;max-width:200px;text-align:left;
}

/* sort chevrons */
.sort-icon{
  font-size:14px;
  margin-left:5px;
  cursor:pointer;
  opacity:.7;
  transition:opacity .2s;
  color:#fff;                 /* visible on dark header */
}
th:hover .sort-icon{opacity:1}
th{cursor:pointer;user-select:none;padding-right:15px}

/* scroll-bar tweak (optional) */
.table-container::-webkit-scrollbar{width:10px;height:10px}
.table-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}
.table-container::-webkit-scrollbar-track{background:#f5f5f5}

/* ---------- PRINT -------------------------------------------------------- */
@media print{
  .table-container{max-height:none!important;overflow:visible!important}
  .sidebar,#sidebar{display:none!important}
  .container-fluid{margin-left:0!important}
  .table a{color:#000!important;text-decoration:none!important}
}

/* Summary tables - compact layout */
.summary-table {
  table-layout: fixed !important;
  min-width: auto !important;
  width: 100% !important;
}

.summary-table th:first-child,
.summary-table td:first-child {
  width: auto !important;
  max-width: none !important;
}