/*
 * Warepeak component patterns.
 *
 * Task 2: responsive shared chrome (sidebar + topbar).
 * Consumes design tokens from theme.css (--wp-*). Do not hardcode colors
 * here — everything should read from a --wp-* token so light/dark both
 * work automatically.
 */

/* Alpine: hide drawer/backdrop before Alpine finishes initializing */
[x-cloak] {
  display: none !important;
}

/* ---------------------------------------------------------------------- */
/* App shell layout (sidebar + main column)                               */
/* ---------------------------------------------------------------------- */

.wp-app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.wp-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------------- */
/* Sidebar (verbatim chrome classes per task brief)                       */
/* ---------------------------------------------------------------------- */

.wp-sidebar { background:var(--wp-sidebar); color:var(--wp-sidebar-fg); width:var(--sidebar-width,260px); }
.wp-nav-item { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--wp-radius); color:var(--wp-sidebar-fg); text-decoration:none; }
.wp-nav-item .bi { color:var(--wp-sidebar-muted); font-size:18px; }
.wp-nav-item:hover { background:rgba(255,255,255,.06); }
.wp-nav-item.active { background:var(--wp-sidebar-active); color:#fff; }
.wp-nav-item.active .bi { color:#fff; }
.wp-topbar { background:var(--wp-topbar); border-bottom:.5px solid var(--wp-border); height:var(--topbar-height,58px); display:flex; align-items:center; gap:12px; padding:0 16px; }
.wp-search { flex:1; max-width:360px; background:var(--wp-surface-2); border:.5px solid var(--wp-border); border-radius:var(--wp-radius); padding:8px 12px; }
.wp-icon-btn { background:none; border:none; color:var(--wp-muted); font-size:19px; width:40px; height:40px; border-radius:var(--wp-radius); cursor:pointer; }
.wp-icon-btn:hover { background:var(--wp-surface-2); color:var(--wp-accent); }
.wp-hamburger { display:inline-flex; align-items:center; justify-content:center; }
@media (max-width:767.98px){
  .wp-sidebar { position:fixed; inset:0 auto 0 0; z-index:1050; transform:translateX(-100%); visibility:hidden; transition:transform .2s, visibility .2s; }
  .wp-sidebar.open { transform:none; visibility:visible; }
  .wp-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1040; }
}
@media (min-width:768px){
  .wp-backdrop { display:none; }
  /* On desktop the hamburger collapses the sidebar (mobile keeps the drawer). */
  .wp-sidebar { transition: width .2s ease; }
  .wp-sidebar.open { width:0; min-width:0; overflow:hidden; }
}

/* Layout/behavior extras the verbatim block above doesn't cover */
.wp-sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}

@media (min-width: 768px) {
  .wp-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
  }
}

.wp-search {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--wp-muted);
}

.wp-search input {
  color: var(--wp-text);
  width: 100%;
}

.wp-search input::placeholder {
  color: var(--wp-muted);
}

.wp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.wp-backdrop {
  cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* Sidebar chrome (header / brand / nav grouping / footer)                */
/* ---------------------------------------------------------------------- */

.wp-sidebar-header {
  padding: 1.5rem 1rem;
  border-bottom: .5px solid var(--wp-sidebar-border);
  flex-shrink: 0;
}

.wp-sidebar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--wp-sidebar-fg);
}

.wp-sidebar-brand:hover {
  color: var(--wp-sidebar-fg);
  text-decoration: none;
}

.wp-sidebar-brand-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.wp-sidebar-brand-icon-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: block;
}

.wp-sidebar-brand-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--wp-sidebar-fg);
}

.wp-sidebar-brand-subtitle {
  font-size: .8rem;
  opacity: .8;
  margin-top: 2px;
  color: var(--wp-sidebar-fg);
}

.wp-sidebar-nav {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.wp-sidebar-nav-section {
  margin-bottom: 1.5rem;
  padding: 0 12px;
}

.wp-sidebar-nav-title {
  padding: .5rem 0;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--wp-sidebar-muted);
  letter-spacing: .5px;
}

.wp-sidebar-footer {
  padding: 1rem 12px;
  border-top: .5px solid var(--wp-sidebar-border);
  margin-top: auto;
  flex-shrink: 0;
}

.wp-logout {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--wp-radius);
  color: var(--wp-sidebar-danger);
  background: transparent;
  border: 1px solid var(--wp-sidebar-border);
  margin-top: 8px;
  text-decoration: none;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 500;
  text-align: left;
}

.wp-logout .bi {
  color: inherit;
  font-size: 18px;
}

.wp-logout:hover {
  background: var(--wp-sidebar-danger);
  color: var(--wp-sidebar);
  border-color: var(--wp-sidebar-danger);
  text-decoration: none;
}

/* ---------------------------------------------------------------------- */
/* Topbar chrome (title / user menu / company logo)                       */
/* moved out of base.html's inline <style>, rewired to --wp-* tokens      */
/* ---------------------------------------------------------------------- */

.wp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topbar-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.topbar-title h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  color: var(--wp-text);
}

.topbar-title p {
  display: none;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-info {
  text-align: right;
}

.user-name {
  font-weight: 600;
  color: var(--wp-text);
  margin: 0;
  font-size: .9rem;
}

.user-role {
  font-size: .8rem;
  color: var(--wp-muted);
  margin: 0;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: var(--wp-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp-accent-fg);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  transition: transform .15s ease;
  cursor: pointer;
}

.user-avatar:hover {
  color: var(--wp-accent-fg);
  text-decoration: none;
  transform: scale(1.05);
}

.company-logo-container {
  display: flex;
  align-items: center;
  padding: .25rem .75rem;
  background: var(--wp-surface-2);
  border-radius: 8px;
  border: .5px solid var(--wp-border);
}

.company-logo-topbar {
  max-height: 40px;
  max-width: 150px;
  height: auto;
  width: auto;
  object-fit: contain;
}

.main-content {
  background: var(--wp-bg);
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------------- */
/* Mobile chrome adjustments (topbar/user-menu density)                   */
/* Breakpoints match the ones already used elsewhere in base.html.        */
/* ---------------------------------------------------------------------- */

@media (max-width: 768px) {
  .wp-topbar {
    padding: 0 .75rem;
  }

  .topbar-title {
    flex: 0 1 auto;
    max-width: 40%;
    overflow: hidden;
  }

  .topbar-title h1 {
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-user {
    flex: 0 0 auto;
    gap: .5rem;
  }

  .company-logo-container {
    display: none;
  }

  .main-content {
    padding: .75rem;
  }
}

@media (max-width: 480px) {
  .user-info {
    display: none;
  }

  .wp-topbar {
    height: auto;
    min-height: var(--topbar-height);
    padding: .5rem .75rem;
  }

  .topbar-title {
    max-width: 30%;
  }

  .topbar-title h1 {
    font-size: .85rem;
    white-space: normal;
    line-height: 1.3;
  }

  .wp-hamburger {
    width: 48px;
    height: 48px;
    padding: 12px;
  }

  .main-content {
    padding: .5rem;
  }
}

@media (max-width: 360px) {
  .topbar-title {
    display: none;
  }

  .company-logo-container {
    display: none;
  }

  .main-content {
    padding: .25rem;
  }
}

/* ---------------------------------------------------------------------- */
/* KPI cards + card sections (Task 3: manager dashboard, verbatim chrome  */
/* classes per task brief). Consumed by dashboard templates.              */
/* ---------------------------------------------------------------------- */

.wp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.wp-kpi { background:var(--wp-surface); border:.5px solid var(--wp-border); border-radius:var(--wp-radius-lg); padding:16px; }
.wp-kpi .k { font-size:12px; color:var(--wp-muted); display:flex; gap:6px; align-items:center; margin-bottom:8px; }
.wp-kpi .v { font-size:23px; font-weight:500; color:var(--wp-text); line-height:1; }
.wp-kpi .d { font-size:12px; color:var(--wp-muted); margin-top:7px; }
.wp-card { background:var(--wp-surface); border:.5px solid var(--wp-border); border-radius:var(--wp-radius-lg); margin-bottom:18px; }
.wp-card-h { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:.5px solid var(--wp-border); font-weight:500; }

/* Layout/behavior extras the verbatim block above doesn't cover: some
   KPI cards are links (e.g. "Rented Items" -> filtered items list). Wrap
   the .wp-kpi in an <a class="wp-kpi-link"> without altering the card's
   own box styling. */
.wp-kpi-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.wp-kpi-link:hover {
  color: inherit;
  text-decoration: none;
}

/* ---------------------------------------------------------------------- */
/* Data table pattern (Task 4: manager requests list, verbatim chrome     */
/* classes per task brief). Consumed by manager/requests.html.            */
/* ---------------------------------------------------------------------- */

.wp-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.wp-table { width:100%; border-collapse:collapse; }
.wp-table th { text-align:left; font-size:12px; font-weight:500; color:var(--wp-muted); padding:10px 16px; border-bottom:.5px solid var(--wp-border); }
.wp-table td { padding:12px 16px; border-bottom:.5px solid var(--wp-border); color:var(--wp-text); font-size:14px; }
.wp-table tr:last-child td { border-bottom:none; }
.wp-pill { font-size:12px; padding:2px 9px; border-radius:999px; font-weight:500; display:inline-flex; gap:4px; align-items:center; }
.wp-pill--ok{background:var(--wp-ok-bg);color:var(--wp-ok-fg)} .wp-pill--warn{background:var(--wp-warn-bg);color:var(--wp-warn-fg)}
.wp-pill--danger{background:var(--wp-danger-bg);color:var(--wp-danger-fg)} .wp-pill--info{background:var(--wp-info-bg);color:var(--wp-info-fg)}
.wp-row-actions button, .wp-row-actions a { border:none; background:none; color:var(--wp-muted); font-size:17px; padding:4px; border-radius:6px; cursor:pointer; min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
.wp-row-actions button:hover { background:var(--wp-surface-2); color:var(--wp-accent); }
@media (max-width:767.98px){
  .wp-col-secondary { display:none; }
  .wp-table th,
  .wp-table td { padding-left:8px; padding-right:8px; }
}

/* Layout/behavior extras the verbatim block above doesn't cover. */
.wp-filters {
  padding: 14px 16px;
  border-bottom: .5px solid var(--wp-border);
}

.wp-filters .wp-filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--wp-surface-2);
  border: .5px solid var(--wp-border);
  border-radius: var(--wp-radius);
  padding: 6px 10px;
  color: var(--wp-muted);
  /* Grow to fill the filter row so the search box isn't cramped. */
  flex: 1 1 260px;
}

.wp-filters .wp-filter-search input {
  border: none;
  background: transparent;
  color: var(--wp-text);
  outline: none;
  min-width: 0;
  flex: 1;
  width: 100%;
}

/* Clear (×) button — injected by theme.js, shown only when the field has text
   (:placeholder-shown is true while empty). Clears the search and reloads. */
.wp-filters .wp-filter-search .wp-filter-clear {
  display: none;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--wp-muted);
  padding: 0 2px;
  cursor: pointer;
  line-height: 1;
}
.wp-filters .wp-filter-search .wp-filter-clear:hover {
  color: var(--wp-text);
}
.wp-filters .wp-filter-search input:not(:placeholder-shown) ~ .wp-filter-clear {
  display: inline-flex;
  align-items: center;
}

.wp-filters .wp-filter-search input::placeholder {
  color: var(--wp-muted);
}

.wp-filters select.wp-filter-select {
  background: var(--wp-surface-2);
  color: var(--wp-text);
  border: .5px solid var(--wp-border);
  border-radius: var(--wp-radius);
  padding: 6px 10px;
  font-size: .875rem;
}

.wp-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

/* Keep the icon group aligned under its column header instead of drifting to
   the left of the cell. */
.text-end .wp-row-actions {
  justify-content: flex-end;
}
.text-center .wp-row-actions {
  justify-content: center;
}

.wp-row-actions form {
  display: inline-flex;
}

.wp-badge-type {
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 500;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  background: var(--wp-surface-2);
  color: var(--wp-text);
  border: .5px solid var(--wp-border);
}

/* ---------------------------------------------------------------------- */
/* Form pattern (Task 5: create ship request, verbatim chrome classes per */
/* task brief). Consumed by requests/create_ship_request.html.            */
/* ---------------------------------------------------------------------- */

.wp-form { padding:16px; }

/* Reserve two label lines on multi-column field rows (desktop) so inputs stay
   aligned even when one label wraps to a second line. */
@media (min-width: 768px) {
  .wp-label-2l label { display: block; min-height: 2.8em; }
}
.wp-field { margin-bottom:14px; }
.wp-field > label { display:block; font-size:12px; color:var(--wp-muted); margin-bottom:5px; }
.wp-field .form-control, .wp-field .form-select { border-radius:var(--wp-radius); }
.wp-actions { display:flex; gap:10px; justify-content:flex-end; padding-top:6px; }
@media (min-width:768px){ .wp-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } }

/* Layout/behavior extras the verbatim block above doesn't cover. */
.wp-form-grid {
  margin-bottom: 0;
}

.wp-field .form-control,
.wp-field .form-select {
  min-height: 40px;
}

.wp-actions .btn {
  min-height: 40px;
}

@media (max-width: 767.98px) {
  .wp-form-grid > .wp-field {
    margin-bottom: 14px;
  }
}

/* ---------------------------------------------------------------------- */
/* Searchable custom listbox (Task 1, Phase 2: replaces native            */
/* <select size> so dark mode has no light "island" — native <option>     */
/* rows can't be recolored on macOS Chrome). Used by                      */
/* external_rental_orders/form.html.                                      */
/* ---------------------------------------------------------------------- */

.wp-select-list {
  max-height: 240px;
  overflow-y: auto;
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-radius);
  padding: 4px;
}

.wp-select-option {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: none;
  border-radius: var(--wp-radius);
  background: transparent;
  color: var(--wp-text);
  text-align: left;
  font-size: .9rem;
  cursor: pointer;
}

.wp-select-option:hover {
  background: var(--wp-surface-2);
}

.wp-select-option:focus-visible {
  outline: 2px solid var(--wp-accent);
  outline-offset: -2px;
}

.wp-select-option.is-selected {
  background: var(--wp-accent);
  color: var(--wp-accent-fg);
}

/* Selected + focused: the accent-colored outline would vanish on the accent
   fill, so switch the ring to the foreground color for a visible focus cue. */
.wp-select-option.is-selected:focus-visible {
  outline-color: var(--wp-accent-fg);
}

.wp-select-empty {
  padding: 10px;
  color: var(--wp-muted);
  font-size: .85rem;
}

/* Compact chip shown in place of the picker once an item type is chosen, so
   multi-item forms don't grow a full listbox per row. */
.wp-item-chosen {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-radius);
  background: var(--wp-surface-2);
  color: var(--wp-text);
}
.wp-item-chosen-label {
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Topbar notifications (bell dropdown + unread badge)                    */
/* ---------------------------------------------------------------------- */
.wp-notif-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--wp-danger-fg);
  color: var(--wp-danger-bg);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}
.wp-notif-menu {
  width: 340px;
  max-width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0;
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  color: var(--wp-text);
}
.wp-notif-head {
  padding: 10px 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--wp-border);
}
.wp-notif-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--wp-border);
  color: var(--wp-text);
  text-decoration: none;
}
.wp-notif-item:hover {
  background: var(--wp-surface-2);
  color: var(--wp-text);
}
.wp-notif-item.is-unread {
  background: var(--wp-info-bg);
}
.wp-notif-item.is-unread .wp-notif-title {
  font-weight: 600;
}
.wp-notif-title { font-size: .875rem; }
.wp-notif-msg { font-size: .8rem; color: var(--wp-muted); margin-top: 2px; }
.wp-notif-time { font-size: .72rem; color: var(--wp-muted); margin-top: 3px; }
.wp-notif-empty {
  padding: 20px 14px;
  text-align: center;
  color: var(--wp-muted);
  font-size: .85rem;
}
.wp-notif-foot {
  display: block;
  padding: 10px 14px;
  text-align: center;
  font-size: .82rem;
  color: var(--wp-accent);
  text-decoration: none;
}
.wp-notif-foot:hover {
  background: var(--wp-surface-2);
  color: var(--wp-accent);
}