/* ==========================================================================
   Admin CSS
   DevExtreme overrides and responsive styles for admin pages
   ========================================================================== */

/* ==========================================================================
   Station Agreement Search Grid
   ========================================================================== */

#StationAgreementSearch .dx-datagrid-header-panel {
  padding: 0;
  background-color: var(--color-admin-header);
}

#StationAgreementSearch a.contractbutton {
  margin-left: 7px;
  border-radius: 3px;
  padding: 7px 12px;
  color: #da721a;
  text-decoration: none;
}

#StationAgreementSearch a.contractbutton:hover {
  background: var(--color-border-light);
  color: black;
}

/* PDF link styling in station agreement search */
.agreement-pdf-link {
  text-decoration: none;
  color: #71594c;
}

#StationAgreementSearch .dx-datagrid-rowsview .dx-group-row {
  background: var(--color-border-light);
  color: black;
}

/* ==========================================================================
   Admin Section Base Styles
   ========================================================================== */

.admin h2 {
  padding-bottom: 15px;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--color-border);
}

/* Admin form box style (used in Users-Admin, Documents) */
.admin-form-box {
  background: #eee;
  padding: 15px;
  border-radius: 8px;
}

.admin-form-box--hidden {
  display: none;
}

.admin-checkbox-offset {
  margin-left: 25px;
}

.details-tab {
  padding: 0;
}

.UserGroupAssignmentSaveButton,
.teal-button {
  border-color: #009688;
  color: darkgreen;
}

.details-tab .dx-field-item-label-text {
  font-weight: bold;
  padding-left: 10px;
}

/* ==========================================================================
   DevExtreme Tab Panel Overrides
   !important needed: Overrides DevExtreme inline styles for tab panel height/overflow
   ========================================================================== */

/* Users Admin tab panel minimum height */
.dx-tabpanel-container {
  min-height: 500px;
}

div[role='tabpanel'] {
  padding: 30px;
}

.user-details-tabpanel,
.user-details-tabpanel .dx-tabpanel-container,
.user-details-tabpanel .dx-tabpanel-content {
  height: auto !important;
  overflow: visible !important;
}

/* ==========================================================================
   Station Assignment Tab Styles
   ========================================================================== */

.station-loading {
  padding: 20px;
  text-align: center;
  color: var(--color-text-muted);
}

.station-scroll-hint {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 8px 0 16px;
}

.station-tab-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.station-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 16px;
}

.station-toggle {
  cursor: pointer;
  padding: 12px 16px;
  margin: 0;
  background: #f5f5f5;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  user-select: none;
  font-size: 16px;
  font-weight: 600;
}

.station-toggle:hover {
  background: var(--color-border);
}

.station-toggle.collapsed::after {
  content: " ▼";
  font-size: 12px;
}

.station-toggle:not(.collapsed)::after {
  content: " ▲";
  font-size: 12px;
}

.station-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.station-content.collapsed {
  display: none;
}

.station-actions {
  flex: 0 0 auto;
  padding: 16px 0;
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 2;
  border-top: 1px solid var(--color-border-light);
  margin-top: 16px;
}

.station-actions .dx-button-text {
  line-height: 1px;
}

.first-group {
  padding: 20px;
  border-radius: 4px;
  background-color: rgba(191, 191, 191, 0.15);
}

/* ==========================================================================
   User Details Popup - Two Column Layout
   !important needed: Overrides DevExtreme responsive form layout behavior
   ========================================================================== */

.user-details-popup .general-info-form .dx-form-group-content {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

.user-details-popup .general-info-form .dx-field {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}

/* ==========================================================================
   Admin Poster Banner
   ========================================================================== */

.admin-poster {
  position: relative;
  background: url('/img/admin-background.jpg') center bottom / cover no-repeat;
  height: 115px;
}

.admin-poster__banner {
  text-shadow: 7px 3px 12px rgba(74, 69, 13, 0.87);
  position: absolute;
  bottom: 20px;
  left: 25px;
  font-size: 36px;
  color: white;
}

/* ==========================================================================
   Users Admin Grid Styles
   ========================================================================== */

.dx-datagrid-header-panel {
  padding: 0;
  background-color: var(--color-admin-header);
}

.dx-datagrid-header-panel .dx-toolbar {
  background: var(--color-admin-header);
  flex-wrap: nowrap;
}

.dx-datagrid-search-panel {
  width: 240px;
  margin-left: 20px;
  margin-bottom: 0;
}

.dx-datagrid-search-panel .dx-textbox {
  width: 240px;
}

.dx-datagrid-header-panel .dx-toolbar-item {
  margin-bottom: 0;
  width: auto;
}

.dx-datagrid-header-panel .dx-selectbox {
  width: 200px;
  max-width: 200px;
}

.dx-datagrid-header-panel .dx-button {
  width: auto;
  max-width: none;
}

#UsersAdminGrid {
  margin-top: 30px;
}

.dx-toolbar-item-content .dx-edit-button {
  display: none;
}

/* Ensure grid scrolling works properly */
#UsersAdminGrid .dx-datagrid-rowsview,
#StationAgreementSearch .dx-datagrid-rowsview,
#UsersAdminGrid .dx-scrollable-container,
#StationAgreementSearch .dx-scrollable-container {
  overflow: auto;
}

#UsersAdminGrid .dx-gridbase-container,
#StationAgreementSearch .dx-gridbase-container {
  height: auto;
  min-height: 0;
}

/* ==========================================================================
   New User Form
   ========================================================================== */

.new-user-form {
  margin-top: 30px;
  background: var(--color-border-light);
  padding: 15px;
  border-radius: 8px;
}

.new-user-form h3 {
  margin-top: 0;
  margin-bottom: 20px;
}

.new-user-form .row {
  margin-left: 0;
  margin-right: 0;
}

.new-user-form .form-group {
  margin-bottom: 15px;
}

.new-user-form .col {
  padding-left: 15px;
  padding-right: 15px;
}

.new-user-form .pull-right {
  text-align: right;
  margin: 30px;
}

/* Checkbox alignment in new user form */
.new-user-form .form-group label[for='Active'],
.new-user-form .form-group label[for='SelfRegistered'] {
  display: inline-block;
  margin-bottom: 0;
  margin-right: 10px;
  vertical-align: middle;
  line-height: 1.5;
}

.new-user-form .form-group input[type='checkbox'].double-size-checkbox {
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  vertical-align: middle;
  display: inline-block;
  width: auto;
  height: auto;
  position: relative;
  top: 2px;
}

.user-submit-button {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}

.btn-bg-light {
  background-color: var(--color-border-light);
}

/* ==========================================================================
   Admin Submenu - Vertical List Layout
   ========================================================================== */

.admin-submenu {
  padding: 3px;
  padding-bottom: 2px;
  overflow: hidden;
}

.admin-submenu ul {
  margin: 0;
  padding: 0;
  overflow: visible;
}

.admin-submenu li {
  float: none;
  display: block;
  margin-right: 0;
  margin-bottom: 2px;
  clear: both;
}

.admin-submenu a {
  display: block;
  padding: 3px 10px;
  border-bottom: 1px solid var(--color-border);
  border-right: transparent;
  background: transparent;
}

/* ==========================================================================
   Mobile Responsive Styles (max-width: 768px)
   ========================================================================== */

@media only screen and (max-width: 768px) {
  /* ----- Mobile Card Actions ----- */
  .mobile-card-actions {
    overflow: visible;
  }

  .mobile-card-actions > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .mobile-card-actions a.contractbutton {
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 0;
  }

  /* ----- User Details Popup Mobile ----- */
  /* !important needed: Overrides DevExtreme responsive form layout behavior */
  .user-details-popup .general-info-form .dx-form-group-content {
    grid-template-columns: 1fr 1fr !important;
  }

  .user-details-popup .general-info-form .dx-field-item {
    flex: 0 0 48% !important;
    max-width: 48% !important;
  }

  /* ----- Grid Header Panel Mobile ----- */
  #UsersAdminGrid {
    max-width: 100%;
    overflow-x: hidden;
  }

  #StationAgreementSearch {
    max-width: 100%;
    overflow-x: auto;
  }

  #StationAgreementSearch .dx-command-adaptive {
    padding: 0 !important;
    min-width: 24px !important;
    width: 24px !important;
  }

  .dx-datagrid-header-panel {
    padding: 10px 15px !important;
  }

  /* Override DevExtreme toolbar positioning */
  .dx-datagrid-header-panel .dx-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    overflow: visible !important;
  }

  .dx-datagrid-header-panel .dx-toolbar-items-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    height: auto !important;
    overflow: visible !important;
  }

  .dx-datagrid-header-panel .dx-toolbar-before,
  .dx-datagrid-header-panel .dx-toolbar-center,
  .dx-datagrid-header-panel .dx-toolbar-after {
    display: contents !important;
    position: static !important;
    float: none !important;
  }

  .dx-datagrid-header-panel .dx-toolbar-item {
    display: inline-flex !important;
    align-items: center !important;
    position: static !important;
    float: none !important;
    margin: 0 !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }

  /* Search panel on its own row */
  .dx-datagrid-header-panel .dx-toolbar-item:has(.dx-datagrid-search-panel) {
    display: block !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding-left: 0 !important;
    flex-shrink: 1 !important;
  }

  .dx-datagrid-search-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .dx-datagrid-search-panel .dx-textbox {
    width: 100% !important;
  }

  /* Prevent iOS zoom on input focus */
  .dx-datagrid-search-panel .dx-textbox-input {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* ----- New User Form Mobile ----- */
  .new-user-form {
    margin-top: 20px;
    padding: 12px;
  }

  .new-user-form .col-sm-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 0;
    float: none !important;
    display: block !important;
  }

  .new-user-form .row {
    display: block !important;
  }

  .new-user-form .pull-right {
    text-align: center;
    margin: 20px 0;
  }

  .new-user-form .pull-right input[type='submit'] {
    margin-right: 0;
    width: 100%;
    max-width: 300px;
  }
}