/* ================================================================
   MRProjetos — Dicionários Microsiga
   Design System v2.0 | Brand Identity
   ================================================================ */

/* --- Tokens ---------------------------------------------------- */
:root {
  --mr-dark:        #252a34;
  --mr-dark-alt:    #3a4252;
  --mr-blue:        #137DC5;
  --mr-blue-hover:  #2199ea;
  --mr-white:       #ffffff;
  --mr-body-bg:     #f0f3f8;
  --mr-surface:     #ffffff;
  --mr-text:        #252a34;
  --mr-text-muted:  #6b7a99;
  --mr-border:      #dde3ee;
  --mr-border-dark: #3a4252;

  --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', Consolas, monospace;

  --radius:    3px;
  --shadow-xs: 0 1px 3px rgba(37,42,52,.08);
  --shadow-sm: 0 2px 8px  rgba(37,42,52,.10);
  --shadow-md: 0 4px 20px rgba(37,42,52,.14);
}

/* --- Reset / Base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--mr-text);
  background: var(--mr-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Bootstrap color overrides -------------------------------- */
.bg-dark    { background-color: var(--mr-dark)     !important; }
.bg-light   { background-color: var(--mr-body-bg)  !important; }
.bg-white   { background-color: var(--mr-white)    !important; }
.text-dark  { color: var(--mr-text)                !important; }
.text-muted { color: var(--mr-text-muted)          !important; }

/* --- Header --------------------------------------------------- */
.mr-header-bar {
  height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 3px solid var(--mr-blue);
  box-shadow: 0 2px 12px rgba(19,125,197,.20);
}

.mr-header-logo {
  height: 26px;
  display: block;
  margin-right: 4px;
  opacity: .92;
}

.mr-header-title {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1;
}

.mr-header-close {
  opacity: .75;
  transition: opacity .15s;
}
.mr-header-close:hover { opacity: 1; }

/* --- Footer --------------------------------------------------- */
.mr-footer-bar {
  border-top: 2px solid var(--mr-blue);
  min-height: 30px;
  display: flex;
  align-items: center;
}

.mr-footer-logo {
  height: 14px;
  opacity: .65;
  vertical-align: middle;
  transition: opacity .15s;
}
.mr-footer-logo:hover { opacity: 1; }

/* --- Body area ------------------------------------------------ */
.mr-body-area {
  background: var(--mr-body-bg);
}

/* --- Cards ---------------------------------------------------- */
.card,
.card.bg-light {
  background:    var(--mr-surface)  !important;
  border:        1px solid var(--mr-border);
  border-radius: var(--radius);
  box-shadow:    var(--shadow-xs);
}

/* --- Tables --------------------------------------------------- */
.table {
  background:    var(--mr-surface);
  font-family:   var(--font-mono);
  font-size:     12px;
  color:         var(--mr-text);
  margin-bottom: 0;
}

.table thead th {
  background-color: var(--mr-dark)     !important;
  color:            var(--mr-white)    !important;
  border-color:     var(--mr-dark-alt) !important;
  font-family:      var(--font-sans);
  font-size:        .68rem;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   .07em;
  padding:          8px 10px;
  white-space:      nowrap;
  vertical-align:   middle;
}

.table td {
  border-color:   var(--mr-border) !important;
  padding:        4px 10px;
  vertical-align: middle;
  font-size:      12px;
}

.table-hover tbody tr:hover {
  background-color: rgba(19,125,197,.06) !important;
  cursor: pointer;
}

.table-active {
  background-color: rgba(33,153,234,.13) !important;
}

.table-bordered {
  border: 1px solid var(--mr-border) !important;
}

.table-sm td, .table-sm th { padding: 3px 8px; }

/* --- Tab navigation ------------------------------------------ */
.nav-tabs {
  border-bottom: 2px solid var(--mr-blue);
  background:    var(--mr-surface);
  padding:       0 12px;
  box-shadow:    var(--shadow-xs);
  flex-wrap:     nowrap;
  overflow-x:    auto;
  overflow-y:    hidden;
  scrollbar-width: thin;
}

.nav-tabs .nav-item { flex-shrink: 0; }

.nav-tabs .nav-link,
.nav-tabs .nav-link.text-dark {
  font-family:    var(--font-sans);
  font-size:      .72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--mr-text-muted) !important;
  border:         none;
  border-bottom:  3px solid transparent;
  border-radius:  0;
  padding:        9px 12px;
  margin-bottom:  -2px;
  white-space:    nowrap;
  transition:     color .15s, border-color .15s;
  background:     transparent !important;
}

.nav-tabs .nav-link:hover {
  color:              var(--mr-blue) !important;
  border-bottom-color: var(--mr-blue-hover);
}

/* Active tab — covers both ng-class variants AngularJS may apply */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.bg-dark,
.nav-tabs .nav-link.bg-light.active,
.nav-tabs a.nav-link[class*="bg-dark"],
.nav-tabs a.nav-link[class*="bg-light"].active {
  color:              var(--mr-blue) !important;
  border-bottom:      3px solid var(--mr-blue) !important;
  background:         transparent !important;
}

/* Record-count badge inside tab */
.nav-tabs .nav-link span {
  background:    rgba(19,125,197,.12);
  color:         var(--mr-blue);
  border-radius: 20px;
  padding:       1px 7px;
  font-size:     .66rem;
  margin-left:   4px;
}

/* --- Forms ---------------------------------------------------- */
.form-control {
  font-family:  var(--font-sans);
  font-size:    .82rem;
  border:       1px solid var(--mr-border);
  border-radius: var(--radius);
  color:        var(--mr-text);
  background:   var(--mr-surface) !important;
  transition:   border-color .15s, box-shadow .15s;
  height: auto;
}

.form-control:focus {
  border-color: var(--mr-blue);
  box-shadow:   0 0 0 3px rgba(19,125,197,.15);
  outline:      none;
  background:   var(--mr-surface) !important;
}

.form-control[disabled],
.form-control:disabled {
  background: #edf0f7 !important;
  color:      var(--mr-text-muted) !important;
  border-color: var(--mr-border);
  cursor:     default;
}

.form-control-sm { font-size: .78rem; padding: .25rem .5rem; }

.col-form-label {
  font-family:    var(--font-sans);
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--mr-text-muted);
}

/* datalist input */
input[list] { cursor: text; }

/* select */
select.form-control {
  background:      var(--mr-surface) !important;
  color:           var(--mr-text);
  appearance:      auto;
  -webkit-appearance: auto;
}

/* --- Input Group --------------------------------------------- */
.input-group-text {
  background:    var(--mr-dark-alt);
  color:         var(--mr-white);
  border-color:  var(--mr-dark-alt);
  font-size:     .82rem;
  border-radius: var(--radius) 0 0 var(--radius);
}

/* --- Buttons ------------------------------------------------- */
.btn {
  font-family:    var(--font-sans);
  font-size:      .78rem;
  font-weight:    600;
  letter-spacing: .03em;
  border-radius:  var(--radius);
  transition:     all .15s;
}

.btn-outline-secondary,
.btn-outline-dark {
  color:        var(--mr-text-muted);
  border-color: var(--mr-border);
}
.btn-outline-secondary:hover,
.btn-outline-dark:hover {
  background:   var(--mr-dark);
  border-color: var(--mr-dark);
  color:        var(--mr-white);
}

/* Main menu card buttons */
.btn-card,
.btn-card.btn-outline-primary,
.btn-card.btn-outline-dark,
.btn-card.btn-outline-secondary {
  position:     relative;
  overflow:     hidden;
  border:       1px solid var(--mr-border)  !important;
  border-radius: 4px                        !important;
  background:   var(--mr-surface)           !important;
  color:        var(--mr-text)              !important;
  text-align:   left;
  box-shadow:   var(--shadow-sm);
  padding-left: 20px !important;
  transition:   transform .18s, box-shadow .18s, border-color .18s;
}

.btn-card::before {
  content:    '';
  position:   absolute;
  left:       0; top: 0; bottom: 0;
  width:      4px;
  background: var(--mr-blue);
  opacity:    0;
  transition: opacity .18s;
}

.btn-card:hover {
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-md) !important;
  border-color: var(--mr-blue) !important;
  color:        var(--mr-dark) !important;
}

.btn-card:hover::before { opacity: 1; }

.btn-card .col.text-truncate { font-size: .9rem; font-weight: 600; }

/* --- Dropdowns ----------------------------------------------- */
.dropdown-menu {
  border:        1px solid var(--mr-border);
  border-radius: var(--radius);
  box-shadow:    var(--shadow-md);
  font-size:     .8rem;
  padding:       6px 0;
}

.dropdown-item {
  font-size:  .8rem;
  color:      var(--mr-text);
  padding:    5px 14px;
  transition: background .12s;
}

.dropdown-item:hover {
  background: rgba(19,125,197,.07);
  color:      var(--mr-blue);
}

.dropdown-item-text {
  font-family:    var(--font-sans);
  font-size:      .67rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--mr-text-muted);
  padding:        4px 14px 2px;
  display:        block;
}

.dropdown-divider { border-top-color: var(--mr-border); margin: 4px 0; }

/* filter icon highlight */
.fa-filter  { color: var(--mr-blue-hover); }
.fa-sort-alpha-asc,
.fa-sort-alpha-desc { color: var(--mr-blue); }

/* --- Pagination ---------------------------------------------- */
.pagination {
  margin: 6px 0;
  justify-content: center;
}

.pagination .page-link {
  font-family:  var(--font-sans);
  font-size:    .75rem;
  border:       1px solid var(--mr-border);
  color:        var(--mr-text);
  padding:      5px 10px;
  transition:   all .13s;
}

.pagination .page-link:hover {
  background:   var(--mr-blue);
  color:        var(--mr-white);
  border-color: var(--mr-blue);
}

/* AngularJS active page — bg-dark applied by directive */
.pagination .page-link.bg-dark {
  background:   var(--mr-blue)  !important;
  color:        var(--mr-white) !important;
  border-color: var(--mr-blue)  !important;
  font-weight:  700;
}

/* --- Breadcrumb ---------------------------------------------- */
.breadcrumb {
  background:  transparent;
  padding:     8px 0 4px;
  font-size:   .78rem;
  margin-bottom: 4px;
}

.breadcrumb a {
  color:           var(--mr-blue);
  text-decoration: none;
  transition:      color .13s;
}

.breadcrumb a:hover { color: var(--mr-blue-hover); text-decoration: underline; }

.breadcrumb-item.active  { color: var(--mr-text-muted); }

.breadcrumb-item + .breadcrumb-item::before { color: var(--mr-text-muted); }

/* --- Alerts -------------------------------------------------- */
.alert-danger {
  background:   #fdf2f2;
  border-color: #e74c3c;
  color:        #c0392b;
  border-left:  4px solid #e74c3c;
  border-radius: var(--radius);
}

/* --- HR --------------------------------------------------- */
hr {
  border-top:    1px solid var(--mr-border);
  margin:        10px 0;
}

/* --- Record-count display ----------------------------------- */
input[value*="registros"] {
  font-family: var(--font-sans);
  font-size:   .75rem;
  font-weight: 600;
  color:       var(--mr-text-muted);
  background:  #edf0f7 !important;
  border-color: var(--mr-border);
  cursor:      default;
  text-align:  center;
}

/* --- Loader / Spinner --------------------------------------- */
.fa.fa-refresh {
  color: var(--mr-blue) !important;
}

#loader {
  position:  absolute;
  left: 50%; top: 50%;
  z-index: 1;
  width:  40px; height: 40px;
  margin: -20px 0 0 -20px;
  border:     4px solid #dde3ee;
  border-top: 4px solid var(--mr-blue);
  border-radius: 50%;
  -webkit-animation: spin .75s linear infinite;
          animation: spin .75s linear infinite;
}

@-webkit-keyframes spin {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Snackbar ------------------------------------------------ */
#snackbarNotification { z-index: 9999; bottom: 40px; }
#snackbarNotificationMessage { min-width: 250px; }

#snackbarNotification.show {
  visibility: visible;
  -webkit-animation: fadein .5s, fadeout .5s 3s;
          animation: fadein .5s, fadeout .5s 3s;
}

@-webkit-keyframes fadein {
  from { bottom: 0; opacity: 0; }
  to   { bottom: 40px; opacity: 1; }
}
@keyframes fadein {
  from { bottom: 0; opacity: 0; }
  to   { bottom: 40px; opacity: 1; }
}

@-webkit-keyframes fadeout {
  from { bottom: 40px; opacity: 1; }
  to   { bottom: 0; opacity: 0; }
}
@keyframes fadeout {
  from { bottom: 40px; opacity: 1; }
  to   { bottom: 0; opacity: 0; }
}

/* --- Custom scrollbar --------------------------------------- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--mr-body-bg); }
::-webkit-scrollbar-thumb {
  background:    var(--mr-dark-alt);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--mr-blue); }

/* --- Responsive --------------------------------------------- */
@media (max-width: 767.98px) {
  body { font-size: 12.5px; }
  .nav-tabs .nav-link { padding: 8px 8px; font-size: .66rem; }
  .table { font-size: 11.5px; }
  .table td { padding: 3px 6px; }
  .mr-header-logo { display: none !important; }
}