/* assets/css/le-ui.css
   Lucky Enough UI layer (Bootstrap 5 overlay)
   Include AFTER Bootstrap CSS.
*/

/* -------------------------------------------
   Design tokens
-------------------------------------------- */
:root{
  --le-navy:#0b1f3a;
  --le-navy-2:#09182d;
  --le-ink:#0f172a;
  --le-muted:#64748b;

  --le-bg:#f4f6fa;
  --le-surface:#ffffff;

  --le-border:#e2e8f0;

  --le-radius-sm:10px;
  --le-radius-md:12px;
  --le-radius-lg:14px;

  --le-shadow-sm:0 6px 14px rgba(2,6,23,0.08);
  --le-shadow-md:0 14px 30px rgba(2,6,23,0.10);

  --le-focus:0 0 0 .2rem rgba(11,31,58,0.18);
}

/* -------------------------------------------
   Optional page baseline
-------------------------------------------- */
body.le-ui{
  background:var(--le-bg);
  color:var(--le-ink);
}

/* Helpers */
.le-muted{ color:var(--le-muted) !important; }
.le-placeholder{ color:#9ca3af !important; font-style:italic; }

/* -------------------------------------------
   Panels / cards
-------------------------------------------- */
.le-card{
  background:var(--le-surface);
  border:1px solid var(--le-border);
  border-radius:var(--le-radius-lg);
  box-shadow:var(--le-shadow-sm);
}
.le-card-body{ padding:16px; }

.le-panel{
  background:var(--le-surface);
  border:1px solid var(--le-border);
  border-radius:var(--le-radius-md);
  padding:12px 14px;
}

/* -------------------------------------------
   Header bar
-------------------------------------------- */
.le-header-bar{
  background:var(--le-navy);
  color:#fff;
  border-radius:var(--le-radius-md);
  padding:14px 18px;
  box-shadow:var(--le-shadow-sm);
}

/* -------------------------------------------
   Buttons
-------------------------------------------- */
.btn-le{
  background:var(--le-navy);
  border:1px solid var(--le-navy);
  color:#fff;
  font-weight:700;
}
.btn-le:hover{
  background:var(--le-navy-2);
  border-color:var(--le-navy-2);
  color:#fff;
}

.btn-le-outline{
  background:#fff;
  border:1px solid var(--le-navy);
  color:var(--le-navy);
  font-weight:700;
}
.btn-le-outline:hover{
  background:var(--le-navy);
  border-color:var(--le-navy);
  color:#fff;
}

.btn-le:focus-visible,
.btn-le-outline:focus-visible{
  box-shadow:var(--le-focus);
}

/* -------------------------------------------
   Inputs
-------------------------------------------- */
.form-control:focus,
.form-select:focus{
  border-color:var(--le-navy);
  box-shadow:var(--le-focus);
}

/* -------------------------------------------
   Metric tiles
-------------------------------------------- */
.le-metric{
  background:#f3f5f9;
  border:1px solid #e6e9f2;
  border-radius:14px;
  padding:14px;
}
.le-metric .le-label{
  font-size:12px;
  color:#6c757d;
}
.le-metric .le-value{
  font-size:20px;
  font-weight:800;
  color:var(--le-ink);
}


/* -------------------------------------------
   Section box
-------------------------------------------- */
.le-section-box{
  background:var(--le-surface);
  border:1px solid var(--le-border);
  border-radius:var(--le-radius-md);
  padding:12px 14px;
  margin-bottom:18px;
  position:relative;
  z-index:3;
}

/* Header row: title left, search right */
.le-section-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:nowrap;            /* KEY: do not wrap on desktop */
  margin-bottom:10px;
}

.le-section-title{
  font-weight:800;
  color:var(--le-navy);
  margin:0;
  flex:1 1 auto;
  min-width:0;
}

/* Search form: compact, does NOT take full row */
.le-section-search{
  flex:0 0 auto;
  width:auto;                  /* KEY: remove width:100% */
  max-width:none;
  margin:0;
}

/* Keep the control compact */
.le-topic-suggest-compact{
  width:360px;
  max-width:360px;
}

/* Subnav row */
.le-section-subnav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Subnav buttons */
.le-section-subnav .btn{
  height:34px;
  line-height:34px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  border-radius:9px;
  font-weight:700;
}

/* Scoped override for outline-primary */
.le-section-box .btn.btn-outline-primary{
  border-color:var(--le-navy) !important;
  color:var(--le-navy) !important;
  background:#fff !important;
}
.le-section-box .btn.btn-outline-primary:hover,
.le-section-box .btn.btn-outline-primary.active,
.le-section-box .btn.btn-outline-primary.active:hover{
  background:var(--le-navy) !important;
  border-color:var(--le-navy) !important;
  color:#fff !important;
}

/* -------------------------------------------
   Dropdown (improved usability)
-------------------------------------------- */
.le-section-box .dropdown-menu{
  min-width:560px;
  max-width:92vw;
  border-radius:12px;
  border:1px solid var(--le-border);
  box-shadow:var(--le-shadow-md);
  background:#fff !important;
  z-index:3000;
}

.le-section-box .le-dd-title{
  font-size:12px;
  letter-spacing:.08em;
  color:#6c757d;
  text-transform:uppercase;
  padding:6px 12px 4px 12px;
}

.le-section-box .le-dd-cols{
  display:flex;
  gap:24px;
  padding:0 16px 16px 16px;
}

.le-section-box .le-dd-col{
  flex:1 1 0;
  min-width:240px;
  list-style:none;
  padding:0;
  margin:0;
}

.le-section-box .le-dd-col li{
  margin-bottom:8px;
}

.le-section-box .dropdown-item{
  padding:10px 12px;
  border-radius:10px;
  font-weight:500;
  line-height:1.3;
  transition:all .15s ease;
}

.le-section-box .dropdown-item:hover,
.le-section-box .dropdown-item:focus{
  background:rgba(11,31,58,0.08);
  box-shadow:inset 0 0 0 1px rgba(11,31,58,0.18);
}

.le-section-box .dropdown-item.active,
.le-section-box .dropdown-item:active{
  background:var(--le-navy) !important;
  color:#fff !important;
}

/* -------------------------------------------
   Topic autocomplete (shared)
-------------------------------------------- */
.le-suggest-wrap{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:50;
  margin-top:6px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.le-suggest-item{
  text-align:left;
  padding:.55rem .85rem;
}

.le-suggest-item:hover,
.le-suggest-item.active{
  background:rgba(11,31,58,.05);
}

.le-suggest-item strong{
  font-weight:800;
}

/* Ensure the dropdown width matches the compact search control */
.le-topic-suggest-compact .le-suggest-wrap{
  width:100%;
  left:0;
  right:auto;
}

/* Even input/button height in section box */
.le-topic-suggest-compact .input-group-sm > .form-control,
.le-topic-suggest-compact .input-group-sm > .btn{
  height:34px;
}

/* -------------------------------------------
   Mobile
-------------------------------------------- */
@media (max-width:575px){

  .le-section-top{
    flex-wrap:wrap;            /* allow wrap on small screens */
    align-items:stretch;
  }

  .le-section-search{
    width:100%;
  }

  .le-topic-suggest-compact{
    width:100%;
    max-width:100%;
  }

  .le-section-box .dropdown-menu{
    min-width:92vw;
  }

  .le-section-box .le-dd-cols{
    flex-direction:column;
  }
}





/* -------------------------------------------
   Dropdown (improved usability)
-------------------------------------------- */

/* Wider dropdown */
.le-section-box .dropdown-menu{
  min-width:560px;
  max-width:92vw;
  border-radius:12px;
  border:1px solid var(--le-border);
  box-shadow:var(--le-shadow-md);
  background:#fff !important;
  z-index:3000;
}

/* Title */
.le-section-box .le-dd-title{
  font-size:12px;
  letter-spacing:.08em;
  color:#6c757d;
  text-transform:uppercase;
  padding:6px 12px 4px 12px;
}

/* 2-column layout */
.le-section-box .le-dd-cols{
  display:flex;
  gap:24px;
  padding:0 16px 16px 16px;
}

.le-section-box .le-dd-col{
  flex:1 1 0;
  min-width:240px;
  list-style:none;
  padding:0;
  margin:0;
}

/* Spacing between items */
.le-section-box .le-dd-col li{
  margin-bottom:8px;
}

/* Dropdown items – improved usability */
.le-section-box .dropdown-item{
  padding:10px 12px;
  border-radius:10px;
  font-weight:500;
  line-height:1.3;
  transition:all .15s ease;
}

/* Strong hover */
.le-section-box .dropdown-item:hover,
.le-section-box .dropdown-item:focus{
  background:rgba(11,31,58,0.08);
  box-shadow:inset 0 0 0 1px rgba(11,31,58,0.18);
}

/* Active page */
.le-section-box .dropdown-item.active,
.le-section-box .dropdown-item:active{
  background:var(--le-navy) !important;
  color:#fff !important;
}

/* -------------------------------------------
   Mobile
-------------------------------------------- */
@media (max-width:575px){
  .le-section-search{ flex:1 1 auto; max-width:100%; }

  .le-section-box .dropdown-menu{
    min-width:92vw;
  }

  .le-section-box .le-dd-cols{
    flex-direction:column;
  }
}
/* Section box autocomplete sizing/anchor */
.le-topic-suggest-sm{
  width: 360px;
  max-width: 100%;
}

.le-topic-suggest-sm .le-suggest-wrap{
  left: 0;
  right: auto;
  width: 100%;
}
/* Section box header layout: title left, search right */
.le-section-top-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.le-section-search-right{
  margin-left:auto;
}

/* Compact topic suggest in section box */
.le-topic-suggest-compact{
  width: 360px;
  max-width: 100%;
}

.le-topic-suggest-compact .le-suggest-wrap{
  left:0;
  right:auto;
  width:100%;
}

/* If your input-group-sm button looks too tall, this evens it out */
.le-topic-suggest-compact .input-group-sm > .form-control,
.le-topic-suggest-compact .input-group-sm > .btn{
  height: 34px;
}

.le-suggest-wrap{
  opacity:0;
  transform: translateY(-6px);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events:none;
  visibility:hidden;
}

.le-suggest-wrap.is-open{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
  visibility:visible;
}

/* =========================================
   Cruise Console – Mobile Condensed Mode
   Scoped safely to cruise page only
   ========================================= */
@media (max-width: 576px) {

  .le-cruise-console .le-cc-card {
    margin-bottom: 0.75rem;
  }

  .le-cruise-console .le-cc-card-body,
  .le-cruise-console .card-body {
    padding: 0.75rem !important;
  }

  .le-cruise-console .d-flex.gap-2 {
    gap: 0.5rem !important;
  }

  .le-cruise-console .text-muted {
    margin-top: 0.5rem;
  }

}