/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* ==========================================================================
   NetMail modernization layer
   Built on the theme's own tokens (primary #7367f0, Montserrat) - no new
   palette, just tighter spacing, real depth, and complete interactive states
   on top of the existing Vuexy/Bootstrap 4 components.
   ========================================================================== */

:root {
  --nm-primary: #7367f0;
  --nm-primary-dark: #5e50ee;
  --nm-primary-tint: rgba(115, 103, 240, 0.08);
  --nm-primary-tint-strong: rgba(115, 103, 240, 0.16);
  --nm-border: #e2e5ec;
  --nm-shadow-sm: 0 2px 6px rgba(34, 41, 47, 0.06);
  --nm-shadow-md: 0 6px 18px rgba(34, 41, 47, 0.08);
  --nm-shadow-lg: 0 12px 32px rgba(34, 41, 47, 0.12);
  --nm-radius: 0.5rem;
}

/* Browser surfaces: selection, scrollbar, focus ring ------------------- */

::selection {
  background: var(--nm-primary-tint-strong);
  color: #2b2145;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(115, 103, 240, 0.35) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(115, 103, 240, 0.3);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(115, 103, 240, 0.5);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--nm-primary);
  outline-offset: 2px;
}

/* Cards: real depth, calmer borders -------------------------------------- */

.card {
  border: 1px solid var(--nm-border);
  border-radius: 0.75rem;
  box-shadow: var(--nm-shadow-sm);
  transition: box-shadow 180ms ease;
}

.card .card-header {
  border-bottom: 1px solid var(--nm-border);
  padding: 1.25rem 1.5rem;
}

.card .card-header .card-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card .card-header svg[data-feather],
.card .card-header i[data-feather] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.card .card-header small.text-muted {
  display: block;
  margin-top: 0.15rem;
}

.card .card-body {
  padding: 1.5rem;
}

.card-datatable .card-header {
  padding-bottom: 0.75rem;
}

/* Form controls: tighter, more confident ---------------------------------- */

.form-control,
.custom-select {
  border: 1px solid var(--nm-border);
  border-radius: 0.5rem;
  padding: 0.6rem 0.9rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--nm-primary);
  box-shadow: 0 0 0 3px var(--nm-primary-tint);
}

.form-control::placeholder {
  color: #97a1af;
}

.form-control[disabled],
.form-control:disabled {
  background-color: #f6f7fb;
  color: #97a1af;
}

.form-group label,
label.form-label {
  font-weight: 500;
  color: #5e6472;
  font-size: 0.925rem;
  margin-bottom: 0.4rem;
}

/* select2, matched to the form-control treatment above -------------------- */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--nm-border) !important;
  border-radius: 0.5rem !important;
  min-height: calc(1.5em + 1.2rem + 2px);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(1.5em + 1.2rem);
  padding-left: 0.9rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 1.2rem + 2px);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--nm-primary) !important;
  box-shadow: 0 0 0 3px var(--nm-primary-tint);
}

.select2-container--default .select2-selection--multiple {
  padding: 0.3rem 0.5rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--nm-primary-tint-strong);
  border: none;
  border-radius: 0.375rem;
  color: var(--nm-primary-dark);
  font-weight: 500;
  padding: 0.15rem 0.6rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--nm-primary-dark);
  opacity: 0.6;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  opacity: 1;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--nm-primary);
}

/* Buttons: consistent lift on hover, clear disabled state ----------------- */

.btn {
  border-radius: 0.5rem;
  font-weight: 500;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.btn-primary {
  box-shadow: 0 2px 8px rgba(115, 103, 240, 0.28);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(115, 103, 240, 0.36);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}

/* Badges: slightly more legible weight ------------------------------------- */

.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.35em 0.65em;
  border-radius: 0.375rem;
}

/* Datatables: calmer header, clear row hover, better empty state ---------- */

table.dataTable thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8891a3;
  border-bottom: 2px solid var(--nm-border) !important;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

table.dataTable tbody tr {
  transition: background-color 120ms ease;
}

table.dataTable tbody tr:hover {
  background-color: var(--nm-primary-tint);
}

table.dataTable tbody td {
  vertical-align: middle;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

table.dataTable tbody td.dataTables_empty {
  padding: 3rem 1rem;
  color: #97a1af;
  font-size: 0.95rem;
}

.dataTables_wrapper .dataTables_filter input {
  border-radius: 0.5rem;
}

/* Modals: calmer entrance, tighter header ---------------------------------- */

.modal-content {
  border: none;
  border-radius: 0.75rem;
  box-shadow: var(--nm-shadow-lg);
}

.modal-header {
  border-bottom: 1px solid var(--nm-border);
  padding: 1.25rem 1.5rem;
}

.modal-header .modal-title {
  font-weight: 600;
}

.modal-body {
  padding: 1.5rem;
}

/* Alerts: used by the Senders retirement notice etc. ----------------------- */

.alert .alert-heading {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* Navbar / sidebar: quieter chrome ------------------------------------------ */

.header-navbar {
  box-shadow: 0 1px 0 var(--nm-border) !important;
}

.main-menu {
  box-shadow: 1px 0 0 var(--nm-border);
}

.main-menu .navigation > li.active > a {
  box-shadow: 0 0 8px 1px rgba(115, 103, 240, 0.3);
}

/* Dropzones: match the form-control treatment ------------------------------ */

.m-dropzone {
  border: 1.5px dashed var(--nm-border);
  border-radius: 0.75rem;
  background-color: #fafbfd;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.m-dropzone:hover,
.m-dropzone.dz-drag-hover {
  border-color: var(--nm-primary);
  background-color: var(--nm-primary-tint);
}

.m-dropzone__msg-title {
  color: #8891a3;
  font-weight: 500;
}

.m-dropzone,
.m-dropzone .dropzone {
  min-height: 96px !important;
  padding: 0.75rem 1rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-dropzone .dz-message {
  margin: 0 !important;
}

.m-dropzone .dz-message .m-dropzone__msg-title {
  font-size: 0.9rem;
}

/* Density: tighter form rhythm, closer to a dense professional SaaS layout */

.form-group {
  margin-bottom: 1.1rem;
}

.form-group.row {
  margin-bottom: 1.1rem;
}

.form-group.row:last-child {
  margin-bottom: 0;
}

.form-group.row > [class*="col-"] {
  padding-top: 0.35rem;
}

.form-group.row > .col-sm-9,
.form-group.row > .col-sm-3 {
  padding-top: 0.5rem;
}

section.app-user-list .card .row > .col-12 {
  margin-bottom: 0;
}

/* Sidebar: denser nav rhythm, clearer active/hover state ------------------- */

.main-menu .navigation > li > a {
  padding: 0.7rem 1.2rem;
  font-size: 0.925rem;
}

.main-menu .navigation > li {
  margin-bottom: 0.1rem;
}

.main-menu .navigation > li > a svg,
.main-menu .navigation > li > a i {
  width: 18px;
  height: 18px;
}

.main-menu .navigation > li.navigation-header {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: #97a1af;
  padding: 1rem 1.2rem 0.4rem;
}

/* Top navbar: slightly tighter, calmer */

.header-navbar .navbar-container {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* Quill image resize: selected-state outline + range slider theming -------- */

#full-container .editor img {
  cursor: pointer;
  transition: outline-color 120ms ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

#full-container .editor img.nm-img-selected {
  outline-color: var(--nm-primary);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: var(--nm-border);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nm-primary);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(115, 103, 240, 0.4);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--nm-primary);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(115, 103, 240, 0.4);
}