/*
 * Reseller access policy pages.
 * Every rule is scoped under .reseller-access — this file is linked globally.
 */

.reseller-access .rap-panel {
  margin-bottom: 20px;
}

.reseller-access .rap-state {
  font-size: 16px;
  margin-bottom: 6px;
}

.reseller-access .rap-state i {
  margin-right: 6px;
}

.reseller-access .rap-state-on {
  color: #2e7d32;
}

.reseller-access .rap-state-off {
  color: #8a6d3b;
}

.reseller-access .rap-reference {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 15px;
  word-break: break-all;
  margin-bottom: 0;
}

.reseller-access .rap-actions {
  margin-top: 5px;
}

.reseller-access .rap-empty {
  margin-bottom: 20px;
}

.reseller-access .rap-table {
  margin-bottom: 0;
}

.reseller-access .rap-table th {
  white-space: nowrap;
}

.reseller-access .rap-table td {
  vertical-align: middle;
}

.reseller-access .rap-capability-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.reseller-access .rap-capability-list li {
  padding: 1px 0;
}

/* Badges always pair colour with an icon and a text label */
.reseller-access .rap-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 18px;
  border: 1px solid transparent;
  background-color: #eeeeee;
  color: #333333;
}

.reseller-access .rap-badge i {
  margin-right: 4px;
}

.reseller-access .rap-badge-baseline {
  background-color: #e8f5e9;
  border-color: #c8e6c9;
  color: #1b5e20;
}

.reseller-access .rap-badge-grant {
  background-color: #e3f2fd;
  border-color: #bbdefb;
  color: #0d47a1;
}

.reseller-access .rap-badge-self {
  background-color: #ede7f6;
  border-color: #d1c4e9;
  color: #4527a0;
}

.reseller-access .rap-status-pending {
  background-color: #fff8e1;
  border-color: #ffe082;
  color: #7f5f00;
}

.reseller-access .rap-status-approved {
  background-color: #e8f5e9;
  border-color: #c8e6c9;
  color: #1b5e20;
}

.reseller-access .rap-status-rejected,
.reseller-access .rap-status-revoked {
  background-color: #ffebee;
  border-color: #ffcdd2;
  color: #b71c1c;
}

.reseller-access .rap-status-unknown {
  background-color: #eceff1;
  border-color: #cfd8dc;
  color: #37474f;
}

/* Audit timeline */
.reseller-access .rap-timeline {
  list-style: none;
  padding-left: 0;
  margin: 0 0 20px 0;
  border-left: 2px solid #dddddd;
}

.reseller-access .rap-timeline-item {
  position: relative;
  padding: 0 0 18px 22px;
}

.reseller-access .rap-timeline-marker {
  position: absolute;
  left: -8px;
  top: 2px;
  font-size: 12px;
  color: #7a8a99;
}

.reseller-access .rap-timeline-head {
  margin-bottom: 3px;
}

.reseller-access .rap-timeline-action {
  font-weight: 600;
  margin-right: 10px;
}

.reseller-access .rap-timeline-date {
  font-size: 12px;
}

.reseller-access .rap-timeline-meta span {
  display: inline-block;
  margin-right: 14px;
  font-size: 13px;
}

.reseller-access .rap-timeline-details {
  font-size: 13px;
  word-break: break-word;
}

/* Category headings in the capability picker. ~130 checkboxes run down one column, so an
   unstyled h5 reads as just another row: the heading takes the weight and spacing the area
   labels on the create-group page have, plus a rule to start each section. */
.reseller-access .reseller-access-capability-category > h5 {
  font-weight: 700;
  font-size: 16px;
  color: #2c3e50;
  margin: 26px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #dddddd;
}

.reseller-access .reseller-access-capability-category:first-child > h5 {
  margin-top: 8px;
}

/* dl-horizontal caps dt at 160px and ellipsises the overflow, which clipped labels like
   "Requested capabilities". Wider, and allowed to wrap rather than truncate. This build turns
   the list horizontal at 1000px, so the override rides the same breakpoint and leaves the
   stacked narrow layout untouched. */
@media (min-width: 1000px) {
  .reseller-access .dl-horizontal > dt {
    width: 220px;
    white-space: normal;
    text-overflow: clip;
  }

  .reseller-access .dl-horizontal > dd {
    margin-left: 240px;
  }
}

/* Night theme — matches the house selector strategy in dashboard-smartolt-night.css */
html.smartolt-night body.smartolt-site .reseller-access .rap-state-on {
  color: #7ee2a8;
}

html.smartolt-night body.smartolt-site .reseller-access .rap-state-off {
  color: #f0c674;
}

html.smartolt-night body.smartolt-site .reseller-access .rap-reference {
  color: #e2e8f0;
}

html.smartolt-night body.smartolt-site .reseller-access .rap-table > thead > tr > th,
html.smartolt-night body.smartolt-site .reseller-access .rap-table > tbody > tr > td {
  border-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

html.smartolt-night body.smartolt-site .reseller-access .rap-badge {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
}

html.smartolt-night body.smartolt-site .reseller-access .rap-badge-baseline {
  background-color: rgba(46, 160, 90, 0.22);
  border-color: rgba(126, 226, 168, 0.4);
  color: #b6f0cd;
}

html.smartolt-night body.smartolt-site .reseller-access .rap-badge-grant {
  background-color: rgba(59, 130, 246, 0.22);
  border-color: rgba(147, 197, 253, 0.4);
  color: #bfdbfe;
}

html.smartolt-night body.smartolt-site .reseller-access .rap-badge-self {
  background-color: rgba(139, 92, 246, 0.22);
  border-color: rgba(196, 181, 253, 0.4);
  color: #ddd6fe;
}

html.smartolt-night body.smartolt-site .reseller-access .rap-status-pending {
  background-color: rgba(234, 179, 8, 0.22);
  border-color: rgba(253, 224, 71, 0.4);
  color: #fde68a;
}

html.smartolt-night body.smartolt-site .reseller-access .rap-status-approved {
  background-color: rgba(34, 197, 94, 0.22);
  border-color: rgba(134, 239, 172, 0.4);
  color: #bbf7d0;
}

html.smartolt-night body.smartolt-site .reseller-access .rap-status-rejected,
html.smartolt-night body.smartolt-site .reseller-access .rap-status-revoked {
  background-color: rgba(239, 68, 68, 0.22);
  border-color: rgba(252, 165, 165, 0.4);
  color: #fecaca;
}

html.smartolt-night body.smartolt-site .reseller-access .rap-status-unknown {
  background-color: rgba(148, 163, 184, 0.2);
  border-color: rgba(203, 213, 225, 0.35);
  color: #e2e8f0;
}

html.smartolt-night body.smartolt-site .reseller-access .rap-timeline {
  border-left-color: rgba(255, 255, 255, 0.14);
}

html.smartolt-night body.smartolt-site .reseller-access .rap-timeline-marker {
  color: #93a4b8;
}

/* background-color only: the shorthand kills the text caret in night mode */
html.smartolt-night body.smartolt-site .reseller-access .form-control,
html.smartolt-night body.smartolt-site .reseller-access select.form-control,
html.smartolt-night body.smartolt-site .reseller-access textarea.form-control {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #e2e8f0;
  caret-color: #e2e8f0;
}

html.smartolt-night body.smartolt-site .reseller-access .form-control:focus {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(147, 197, 253, 0.5);
  color: #f1f5f9;
}

html.smartolt-night body.smartolt-site .reseller-access .reseller-access-capability-category > h5 {
  color: #f1f5f9;
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Mobile: tables collapse into cards, one row per card, header supplied by data-title */
@media (max-width: 767px) {
  .reseller-access .reseller-access-capability-category > h5 {
    margin-top: 20px;
    font-size: 15px;
  }

  .reseller-access .table-responsive {
    border: 0;
  }

  .reseller-access .rap-table,
  .reseller-access .rap-table > tbody,
  .reseller-access .rap-table > tbody > tr,
  .reseller-access .rap-table > tbody > tr > td {
    display: block;
    width: 100%;
  }

  .reseller-access .rap-table > thead {
    display: none;
  }

  .reseller-access .rap-table > tbody > tr {
    margin-bottom: 12px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    padding: 6px 10px;
  }

  .reseller-access .rap-table > tbody > tr > td {
    border-top: 0;
    padding: 6px 0;
    text-align: left;
    white-space: normal;
  }

  .reseller-access .rap-table > tbody > tr > td + td {
    border-top: 1px solid #eeeeee;
  }

  .reseller-access .rap-table > tbody > tr > td[data-title]:before {
    content: attr(data-title);
    display: block;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #777777;
    margin-bottom: 2px;
  }

  .reseller-access .rap-timeline-meta span {
    display: block;
    margin-right: 0;
  }

  .reseller-access .rap-actions .btn {
    display: block;
    width: 100%;
    margin-right: 0;
  }

  html.smartolt-night body.smartolt-site .reseller-access .rap-table > tbody > tr {
    border-color: rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.03);
  }

  html.smartolt-night body.smartolt-site .reseller-access .rap-table > tbody > tr > td + td {
    border-top-color: rgba(255, 255, 255, 0.08);
  }

  html.smartolt-night body.smartolt-site .reseller-access .rap-table > tbody > tr > td[data-title]:before {
    color: #9fb0c4;
  }
}

/*
 * Header notification bell (reseller-access decision inbox).
 * This renders on every page, so every rule below stays scoped under
 * .reseller-access-notifications.
 */

.reseller-access-notifications .rap-notif-toggle {
  position: relative;
}

.reseller-access-notifications .rap-notif-badge {
  position: absolute;
  top: 8px;
  right: 4px;
  min-width: 17px;
  padding: 1px 4px;
  border-radius: 9px;
  background-color: #c9302c;
  color: #ffffff;
  font-size: 11px;
  line-height: 15px;
  font-weight: 600;
  text-align: center;
}

.reseller-access-notifications .rap-notif-badge-hidden {
  display: none;
}

.reseller-access-notifications .rap-notif-menu {
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  padding: 0;
}

.reseller-access-notifications .rap-notif-title {
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  color: #777777;
}

.reseller-access-notifications .rap-notif-empty,
.reseller-access-notifications .rap-notif-footer {
  padding: 8px 14px;
  font-size: 13px;
  color: #777777;
}

.reseller-access-notifications .rap-notif-footer {
  padding: 0;
}

.reseller-access-notifications .rap-notif-footer > a {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
}

.reseller-access-notifications .rap-notif-empty-hidden {
  display: none;
}

.reseller-access-notifications .rap-notif-link {
  display: block;
  padding: 8px 14px;
  white-space: normal;
}

.reseller-access-notifications .rap-notif-reference {
  display: block;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 13px;
  word-break: break-all;
}

.reseller-access-notifications .rap-notif-meta {
  display: block;
  font-size: 12px;
  color: #777777;
}

.reseller-access-notifications .rap-notif-action {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}

html.smartolt-night body.smartolt-site .reseller-access-notifications .rap-notif-menu {
  background-color: #1e2a38;
  border-color: rgba(255, 255, 255, 0.12);
}

html.smartolt-night body.smartolt-site .reseller-access-notifications .rap-notif-title,
html.smartolt-night body.smartolt-site .reseller-access-notifications .rap-notif-empty,
html.smartolt-night body.smartolt-site .reseller-access-notifications .rap-notif-meta {
  color: #9fb0c4;
}

html.smartolt-night body.smartolt-site .reseller-access-notifications .rap-notif-link {
  color: #d7e2ee;
}

html.smartolt-night body.smartolt-site .reseller-access-notifications .rap-notif-link:hover,
html.smartolt-night body.smartolt-site .reseller-access-notifications .rap-notif-link:focus {
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

html.smartolt-night body.smartolt-site .reseller-access-notifications .divider {
  background-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 767px) {
  .reseller-access-notifications .rap-notif-menu {
    width: 100%;
    max-height: 320px;
  }
}