/* =============================================================================
   CanIPhish platform modals
   Loaded once by Views/Shared/_UserLayoutV2.cshtml, straight after custom.css,
   so every /platform page gets it. Page-local <style> blocks come later in the
   document and keep winning ties, and the id-scoped copies of the te-* rules
   that 37 views carry (#someModal .te-modal-header { ... }) out-specify these
   unscoped ones, so nothing a page already styles changes.

   Two jobs:
     1. Shell chrome for EVERY modal - the 14px card, no hairline border, a soft
        shadow, quiet header/footer bands and a tidy close button - replacing the
        2018 theme's 2px corners and 1px grey border. A plain .modal-header stays
        white; only the gradient below is opt-in.
     2. The house convention the modernised modals already use, unscoped so a
        modal opts in with classes alone and needs no page-local CSS:
          .te-modal-header   blue gradient band, white title, white close
          .te-modal-footer   white band, hairline on top, buttons at the right
          .te-btn-save       dark primary button      .te-btn-close  outline button
   ========================================================================== */

/* Every selector below is prefixed with .modal so it out-specifies the theme's
   own .modal-content / .modal-header / .modal-header .close rules by one class:
   many views re-link dist/css/style.min.css inside the body, after this file,
   and would otherwise restore the 2px corners and 1px border by source order. */

/* 1. Shell chrome for every modal ------------------------------------------- */
.modal .modal-content {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(16, 24, 40, .28);
}
.modal .modal-header {
  padding: 16px 28px;
  border-bottom: 1px solid #e8ecf1;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.modal .modal-title {
  color: #1f262d;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
}
.modal .modal-header .close {
  margin: -8px -12px -8px auto;
  padding: 8px 12px;
  color: #8b95a5;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  text-shadow: none;
  opacity: 1;
  transition: color .15s ease;
}
.modal .modal-header .close:hover,
.modal .modal-header .close:focus { color: #1f262d; opacity: 1; outline: none; }
.modal .modal-footer {
  padding: 16px 28px;
  border-top: 1px solid #e8ecf1;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* 2. The house convention ---------------------------------------------------- */
.modal .te-modal-header {
  background: linear-gradient(135deg, #1F73CA 0%, #2469BE 50%, #23406D 100%);
  border-bottom: none;
  padding: 14px 28px;
}
.modal .te-modal-header .modal-title {
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.2px;
}
.modal .te-modal-header .modal-title i { font-size: 1.3rem; vertical-align: middle; }
.modal .te-modal-header .close {
  color: #fff;
  opacity: 0.8;
  text-shadow: none;
  font-size: 1.4rem;
}
.modal .te-modal-header .close:hover,
.modal .te-modal-header .close:focus { color: #fff; opacity: 1; }

.te-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-top: 1px solid #e8ecf1;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  background: #fff;
}

.te-btn-save {
  background: #343a40;
  border: none;
  color: #fff;
  padding: 10px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.te-btn-save:hover {
  background: #23272b;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.te-btn-save:focus { outline: none; box-shadow: 0 0 0 3px rgba(52, 58, 64, .28); }
.te-btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.te-btn-close {
  background: transparent;
  border: 2px solid #e0e5ee;
  color: #6c757d;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.te-btn-close:hover {
  border-color: #ccc;
  background: #f8f9fa;
  color: #495057;
}
.te-btn-close:focus { outline: none; box-shadow: 0 0 0 3px rgba(31, 115, 202, .18); }