/* /connect/admin/views/facilities.css — Admin Facilities & Room Booking v1
 *
 * Scoped to the Facilities admin view (.fac-* prefix). Token-driven only
 * (no thematic hex; #fff permitted as on-primary ink). Builds on
 * admin-shell.css, admin-views.css and connect-tokens.css.
 * ─────────────────────────────────────────────────────────────────── */

/* ================================================================
   LAYOUT / HEADER
=============================================================== */
.fac-view {
  --fac-tone-border: var(--bcc-border);
}

.fac-header {
  align-items: flex-start;
}

.fac-header-titles { min-width: 0; }

.fac-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--bcc-s2);
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--bcc-primary);
  margin-bottom:  var(--bcc-s1);
}

.fac-view-sub {
  font-size:  var(--bcc-t-sm);
  color:      var(--bcc-ink-3);
  margin:     var(--bcc-s1) 0 0;
}

.fac-header-actions { flex-wrap: wrap; }

/* ================================================================
   LOADING / SKELETONS
=============================================================== */
.fac-loading {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s3);
  padding:        var(--bcc-s4) 0;
}

.fac-skel { border-radius: var(--bcc-r-md); }
.fac-skel-title { height: 40px; width: 260px; }
.fac-skel-row   { height: 56px; width: 100%; }
.fac-skel-card  { height: 168px; }
.fac-skel-agenda { display: flex; flex-direction: column; gap: var(--bcc-s3); }

/* ================================================================
   EMPTY / ERROR / GUARD STATES
=============================================================== */
.fac-empty,
.fac-error,
.fac-guard {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  margin:        var(--bcc-s4) 0;
}

.fac-error .bcc-btn,
.fac-empty .bcc-btn { margin-top: var(--bcc-s2); }

/* ================================================================
   RESOURCES — toolbar + cards
=============================================================== */
.fac-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s3);
  flex-wrap:       wrap;
  padding:         var(--bcc-s2) 0 var(--bcc-s4);
}

.fac-filter-bar {
  display:   flex;
  gap:       var(--bcc-s2);
  flex-wrap: wrap;
}

.fac-count { white-space: nowrap; }

.fac-cards {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   var(--bcc-s4);
}

.fac-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s3);
  background:     var(--bcc-surface-1);
  border:         1px solid var(--bcc-border);
  border-radius:  var(--bcc-r-lg);
  padding:        var(--bcc-s4) var(--bcc-s5);
  transition:     border-color var(--bcc-dur-2) var(--bcc-ease),
                  box-shadow   var(--bcc-dur-2) var(--bcc-ease),
                  transform    var(--bcc-dur-2) var(--bcc-ease);
}

.fac-card:hover {
  border-color: var(--bcc-border-strong);
  box-shadow:   var(--bcc-shadow-1);
  transform:    translateY(-2px);
}

.fac-card--inactive { opacity: .62; }

.fac-card-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s2);
}

.fac-card-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   var(--bcc-r-sm);
  background:      var(--bcc-primary-soft);
  color:           var(--bcc-primary);
  flex-shrink:     0;
}

.fac-inactive-badge { text-transform: uppercase; letter-spacing: .05em; }

.fac-card-title {
  font-size:   var(--bcc-t-md);
  font-weight: 600;
  color:       var(--bcc-ink);
  margin:      0;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fac-card-meta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--bcc-s2) var(--bcc-s3);
  align-items: center;
}

.fac-type-badge {
  font-size:      var(--bcc-t-xs);
  font-weight:    600;
  padding:        2px var(--bcc-s2);
  border-radius:  var(--bcc-r-pill);
  text-transform: uppercase;
  letter-spacing: .05em;
  background:     var(--bcc-surface-3);
  color:          var(--bcc-ink-2);
}
.fac-type-room      { background: var(--bcc-primary-soft); color: var(--bcc-primary); }
.fac-type-equipment { background: var(--bcc-info-soft);    color: var(--bcc-info);    }
.fac-type-vehicle   { background: var(--bcc-accent-soft);  color: var(--bcc-accent);  }
.fac-type-other     { background: var(--bcc-surface-3);    color: var(--bcc-ink-2);   }

.fac-meta-item {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-ink-3);
}

.fac-card-notes {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
  margin:      0;
  line-height: 1.5;
  display:             -webkit-box;
  -webkit-line-clamp:  2;
  -webkit-box-orient:  vertical;
  overflow:            hidden;
}

.fac-card-actions {
  display:    flex;
  gap:        var(--bcc-s1);
  margin-top: auto;
  padding-top: var(--bcc-s2);
  border-top: 1px solid var(--bcc-border);
}

/* 44px target for icon buttons used throughout the view */
.fac-icon-btn {
  width:      44px;
  height:     44px;
  min-height: 44px;
  flex-shrink: 0;
}

.fac-danger { color: var(--bcc-danger); }
.fac-danger:hover { background: var(--bcc-danger-soft); color: var(--bcc-danger); }

/* ================================================================
   BOOKINGS — toolbar
=============================================================== */
.fac-btoolbar {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s3);
  flex-wrap:   wrap;
  padding:     var(--bcc-s3) var(--bcc-s4);
  background:  var(--bcc-surface-1);
  border:      1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  margin-bottom: var(--bcc-s4);
}

.fac-field-inline { display: flex; flex-direction: column; }
.fac-sr-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  margin: 0;
}

.fac-select {
  width:      auto;
  min-width:  180px;
  max-width:  260px;
  height:     44px;
}

/* Segmented control */
.fac-seg {
  display:       inline-flex;
  gap:           2px;
  padding:       3px;
  background:    var(--bcc-surface-3);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-pill);
}

.fac-seg-btn {
  min-height:    38px;
  padding:       0 var(--bcc-s4);
  border-radius: var(--bcc-r-pill);
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  color:         var(--bcc-ink-3);
  background:    transparent;
  cursor:        pointer;
  transition:    background var(--bcc-dur-1) var(--bcc-ease),
                 color var(--bcc-dur-1) var(--bcc-ease);
}
.fac-seg-btn:hover  { color: var(--bcc-ink); }
.fac-seg-btn.active {
  background: var(--bcc-primary);
  color:      #fff;
}

.fac-req-pill {
  min-height: 38px;
  height:     38px;
  display:    inline-flex;
  align-items: center;
  gap:        var(--bcc-s1);
}

.fac-req-count { font-weight: 700; }
.fac-req-count:not(:empty)::before { content: '·'; margin: 0 2px; opacity: .6; }

.fac-nav {
  display:     inline-flex;
  align-items: center;
  gap:         var(--bcc-s2);
}

.fac-new-booking { margin-left: auto; }

.fac-range-label {
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-xl);
  font-weight: 600;
  color:       var(--bcc-ink);
  margin:      0 0 var(--bcc-s4);
}

/* ================================================================
   BOOKINGS — week / day calendar
=============================================================== */
.fac-board { min-width: 0; }

.fac-cal-inner {
  display:               grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:                   var(--bcc-s2);
}

.fac-cal--day .fac-cal-inner { grid-template-columns: 1fr; }

.fac-day {
  display:        flex;
  flex-direction: column;
  min-height:     150px;
  background:     var(--bcc-surface-2);
  border:         1px solid var(--bcc-border);
  border-radius:  var(--bcc-r-md);
  padding:        var(--bcc-s2);
  overflow:       hidden;
}

.fac-day--today { border-color: var(--bcc-primary); box-shadow: 0 0 0 1px var(--bcc-primary-tint); }

.fac-day-head {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  padding:         0 2px var(--bcc-s2);
  border-bottom:   1px solid var(--bcc-border);
  margin-bottom:   var(--bcc-s2);
}

.fac-day-name {
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--bcc-ink-3);
}

.fac-day-num {
  font-size:   var(--bcc-t-md);
  font-weight: 700;
  color:       var(--bcc-ink);
}

.fac-day-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s1);
  flex:           1;
  overflow-y:     auto;
}

.fac-day-empty {
  color:     var(--bcc-ink-3);
  font-size: var(--bcc-t-xs);
  padding:   var(--bcc-s1) 2px;
}

.fac-chip {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  width:          100%;
  text-align:     left;
  padding:        var(--bcc-s1) var(--bcc-s2);
  background:     var(--bcc-surface-1);
  border:         1px solid var(--bcc-border);
  border-left-width: 3px;
  border-left-color: var(--bcc-border-strong);
  border-radius:  var(--bcc-r-sm);
  cursor:         pointer;
  transition:     background var(--bcc-dur-1) var(--bcc-ease),
                 border-color var(--bcc-dur-1) var(--bcc-ease);
}
.fac-chip:hover { background: var(--bcc-surface-3); border-color: var(--bcc-border-strong); }

.fac-chip--confirmed { border-left-color: var(--bcc-success); }
.fac-chip--requested { border-left-color: var(--bcc-warning); }
.fac-chip--cancelled { border-left-color: var(--bcc-border); opacity: .6; }

.fac-chip-time  { font-size: var(--bcc-t-xs); font-weight: 700; color: var(--bcc-ink-2); }
.fac-chip-title { font-size: var(--bcc-t-xs); color: var(--bcc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac-chip-fac   { font-size: .62rem; color: var(--bcc-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================
   BOOKINGS — agenda list
=============================================================== */
.fac-agenda {
  display:        none;
  flex-direction: column;
  gap:            var(--bcc-s5);
}

.fac-view--agenda .fac-agenda { display: flex; }
.fac-view--agenda .fac-cal    { display: none; }

.fac-agenda-day { display: flex; flex-direction: column; gap: var(--bcc-s2); }

.fac-agenda-date {
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--bcc-ink-3);
  padding-left:   var(--bcc-s1);
}

.fac-agenda-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        var(--bcc-s2);
}

.fac-brow {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s3);
  background:  var(--bcc-surface-1);
  border:      1px solid var(--bcc-border);
  border-left-width: 3px;
  border-radius: var(--bcc-r-md);
  padding:     var(--bcc-s3) var(--bcc-s4);
  flex-wrap:   wrap;
}

.fac-brow--confirmed { border-left-color: var(--bcc-success); }
.fac-brow--requested { border-left-color: var(--bcc-warning); }
.fac-brow--cancelled { border-left-color: var(--bcc-border); opacity: .65; }

.fac-brow-time {
  width:       130px;
  flex-shrink: 0;
  font-size:   var(--bcc-t-xs);
  font-weight: 600;
  color:       var(--bcc-ink-3);
}

.fac-brow-main { flex: 1; min-width: 0; }

.fac-brow-title {
  font-size:   var(--bcc-t-sm);
  font-weight: 600;
  color:       var(--bcc-ink);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fac-brow-meta {
  font-size: var(--bcc-t-xs);
  color:     var(--bcc-ink-3);
}

.fac-brow-status { flex-shrink: 0; }

.fac-brow-actions {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s1);
  flex-shrink: 0;
}

.fac-row-btn { min-height: 44px; }

/* ================================================================
   MODAL FORMS
=============================================================== */
.fac-form { display: flex; flex-direction: column; }

.fac-form .bcc-field { margin-bottom: var(--bcc-s4); }

.fac-form-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap:            var(--bcc-s4);
}

.fac-check { margin-top: var(--bcc-s1); }

/* ================================================================
   RESPONSIVE — <=480
=============================================================== */
@media (max-width: 480px) {
  .fac-cards { grid-template-columns: 1fr; }

  /* Small phones: the 7-column week grid is unusable, so collapse to agenda. */
  .fac-cal { display: none; }
  .fac-agenda { display: flex; }

  .fac-btoolbar { border-radius: var(--bcc-r-md); padding: var(--bcc-s3); }

  .fac-select { min-width: 100%; max-width: 100%; }

  .fac-seg { width: 100%; justify-content: space-between; }
  .fac-seg-btn { flex: 1; padding: 0 var(--bcc-s2); min-height: 44px; }

  .fac-nav { width: 100%; justify-content: space-between; }
  .fac-new-booking { margin-left: 0; width: 100%; }

  .fac-range-label { font-size: var(--bcc-t-lg); }

  .fac-form-grid { grid-template-columns: 1fr; }

  .fac-brow { flex-direction: column; align-items: stretch; gap: var(--bcc-s2); }
  .fac-brow-time { width: auto; }
  .fac-brow-actions { justify-content: flex-end; }
}

/* ================================================================
   RESPONSIVE — 481-767  (calendar collapses to agenda)
=============================================================== */
@media (min-width: 481px) and (max-width: 767px) {
  .fac-cards { grid-template-columns: repeat(2, 1fr); }

  .fac-cal { display: none; }
  .fac-agenda { display: flex; }

  .fac-new-booking { margin-left: auto; }

  .fac-form-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   RESPONSIVE — 768-1024
=============================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .fac-cards { grid-template-columns: repeat(2, 1fr); }

  .fac-day { min-height: 130px; }
  .fac-chip-fac { display: none; }
}

/* ================================================================
   RESPONSIVE — >=1025
=============================================================== */
@media (min-width: 1025px) {
  .fac-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ================================================================
   TOUCH — coarse pointers get 44px hit areas at every width
=============================================================== */
@media (pointer: coarse) {
  .fac-seg-btn,
  .fac-req-pill,
  .fac-icon-btn,
  .fac-nav .bcc-btn,
  .fac-chip { min-height: 44px; }
}

/* ================================================================
   REDUCED MOTION
=============================================================== */
@media (prefers-reduced-motion: reduce) {
  .fac-card,
  .fac-chip,
  .fac-seg-btn,
  .fac-brow {
    transition: none !important;
  }
  .fac-card:hover { transform: none; }
}