:root {
  /* Cores principais */
  --np-primary: #007aff;
  --np-primary-hover: #005ecb;
  --np-success: #34c759;
  --np-success-hover: #2db84e;
  --np-danger: #ff3b30;
  --np-danger-hover: #e6352b;
  --np-warning: #ff9500;
  --np-info: #5856d6;

  /* Escala de cinzentos */
  --np-gray-50: #fafafa;
  --np-gray-100: #f5f5f7;
  --np-gray-200: #e8e8ed;
  --np-gray-300: #d2d2d7;
  --np-gray-400: #aeaeb2;
  --np-gray-500: #8e8e93;
  --np-gray-600: #636366;
  --np-gray-700: #48484a;
  --np-gray-800: #3a3a3c;
  --np-gray-900: #1d1d1f;

  /* Fundos e texto */
  --np-bg-primary: #ffffff;
  --np-bg-secondary: #f5f5f7;
  --np-bg: var(--np-bg-secondary);
  --np-surface: var(--np-bg-primary);
  --np-text: var(--np-gray-900);
  --np-text-soft: var(--np-gray-600);
  --np-muted: var(--np-gray-500);

  /* Bordas */
  --np-border: #e5e5ea;
  --np-border-soft: #f0f0f2;

  /* Raios */
  --np-radius: 12px;
  --np-radius-sm: 8px;
  --np-radius-lg: 16px;

  /* Sombras */
  --np-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --np-shadow-base: 0 2px 8px rgba(0, 0, 0, .08);
  --np-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  --np-shadow-lg: 0 12px 36px rgba(0, 0, 0, .12);

  /* Transição global */
  --np-transition: .2s ease;
}

body {
  background: var(--np-bg);
  color: var(--np-text);
}

body #wrapper,
body .customers-wrapper {
  background: var(--np-bg);
}

body #wrapper .content,
body .customers-wrapper .content {
  padding: 24px;
}

/* Cabeçalho: administrador e cliente */
body #header,
body .navbar-default,
body .customers-nav {
  background: var(--np-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--np-border) !important;
  box-shadow: var(--np-shadow-sm) !important;
}

body #header nav.navbar,
body .navbar-default .navbar-nav {
  background: transparent !important;
  box-shadow: none !important;
}

body #header .navbar-nav > li > a,
body #header .navbar-right > li > a,
body .navbar-default .navbar-nav > li > a {
  margin: 8px 3px;
  padding: 9px 12px !important;
  border-radius: var(--np-radius-sm);
  color: var(--np-text-soft) !important;
  transition: background var(--np-transition), color var(--np-transition);
}

body #header .navbar-nav > li > a:hover,
body #header .navbar-right > li > a:hover,
body .navbar-default .navbar-nav > li > a:hover,
body .navbar-default .navbar-nav > .active > a {
  background: #f5f5f7 !important;
  color: var(--np-primary) !important;
}

body #top_search input {
  height: 44px !important;
  padding: 10px 16px 10px 44px !important;
  background: #f5f5f7 !important;
  border: 2px solid transparent !important;
  border-radius: var(--np-radius) !important;
  color: var(--np-text) !important;
}

body #top_search input:focus {
  background: var(--np-surface) !important;
  border-color: var(--np-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .12) !important;
}

/* Menu lateral do administrador */
body #menu,
body #menu.sidebar {
  background: var(--np-surface) !important;
  border-right: 1px solid var(--np-border) !important;
  box-shadow: none !important;
}

body #side-menu > li {
  margin: 2px 8px !important;
}

body #side-menu > li > a {
  padding: 10px 12px !important;
  background: transparent !important;
  border-radius: var(--np-radius-sm) !important;
  color: #48484a !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background var(--np-transition), color var(--np-transition);
}

body #side-menu > li > a:hover {
  background: #f5f5f7 !important;
  color: var(--np-primary) !important;
}

body #side-menu > li.active > a,
body #side-menu > li > a.active {
  background: rgba(0, 122, 255, .10) !important;
  color: var(--np-primary) !important;
}

body #side-menu .nav-second-level,
body #side-menu ul.collapse {
  margin: 4px 0 4px 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border-left: 2px solid #e8e8ed !important;
}

body #side-menu .nav-second-level > li > a,
body #side-menu ul.collapse > li > a {
  padding: 8px 12px !important;
  background: transparent !important;
  color: var(--np-text-soft) !important;
  font-size: 12px !important;
}

body #side-menu .nav-second-level > li > a:hover,
body #side-menu .nav-second-level > li.active > a,
body #side-menu ul.collapse > li > a:hover,
body #side-menu ul.collapse > li.active > a {
  color: var(--np-primary) !important;
}

/* Superfícies */
body .panel,
body .card,
body .well {
  background: var(--np-surface) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--np-radius-lg) !important;
  box-shadow: none !important;
}

body .panel-heading,
body .card-header {
  padding: 16px 20px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--np-border-soft) !important;
  color: var(--np-text) !important;
  font-weight: 600 !important;
}

body .panel-body,
body .card-body {
  padding: 20px !important;
}

/* Botões */
body .btn {
  padding: 8px 16px !important;
  border-radius: var(--np-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background var(--np-transition), border-color var(--np-transition), color var(--np-transition);
}

body .btn-primary {
  background: var(--np-primary) !important;
  border-color: var(--np-primary) !important;
  color: #fff !important;
}

body .btn-primary:hover,
body .btn-primary:focus {
  background: var(--np-primary-hover) !important;
  border-color: var(--np-primary-hover) !important;
}

body .btn-success {
  background: var(--np-success) !important;
  border-color: var(--np-success) !important;
  color: #fff !important;
}

body .btn-success:hover,
body .btn-success:focus {
  background: var(--np-success-hover) !important;
  border-color: var(--np-success-hover) !important;
}

body .btn-danger {
  background: var(--np-danger) !important;
  border-color: var(--np-danger) !important;
  color: #fff !important;
}

body .btn-danger:hover,
body .btn-danger:focus {
  background: var(--np-danger-hover) !important;
  border-color: var(--np-danger-hover) !important;
}

body .btn-default,
body .btn-secondary {
  background: var(--np-surface) !important;
  border-color: #d2d2d7 !important;
  color: #48484a !important;
}

body .btn-default:hover,
body .btn-secondary:hover {
  background: #fafafa !important;
  border-color: #aeaeb2 !important;
  color: var(--np-text) !important;
}

body .btn-info,
body .btn-warning {
  background: rgba(0, 122, 255, .10) !important;
  border-color: rgba(0, 122, 255, .28) !important;
  color: var(--np-primary-hover) !important;
}

body .btn-warning {
  background: rgba(255, 149, 0, .10) !important;
  border-color: rgba(255, 149, 0, .28) !important;
  color: #b86a00 !important;
}

/* Formulários */
body .form-control,
body .bootstrap-select > .dropdown-toggle,
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
  min-height: 42px !important;
  padding: 9px 13px !important;
  background: var(--np-surface) !important;
  border: 1px solid #d2d2d7 !important;
  border-radius: var(--np-radius-sm) !important;
  color: var(--np-text) !important;
  box-shadow: none !important;
}

body textarea.form-control {
  min-height: 96px !important;
}

body .bootstrap-select.form-control {
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body .form-control:focus,
body .bootstrap-select.open > .dropdown-toggle,
body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single,
body .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--np-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .12) !important;
  outline: none !important;
}

body .form-group label {
  margin-bottom: 8px !important;
  color: var(--np-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Menus flutuantes */
body .dropdown-menu,
body .bootstrap-select .dropdown-menu,
body .select2-dropdown {
  padding: 8px !important;
  background: var(--np-surface) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--np-radius) !important;
  box-shadow: var(--np-shadow-lg) !important;
}

body .dropdown-menu > li > a,
body .bootstrap-select .dropdown-menu li a {
  padding: 9px 13px !important;
  border-radius: 7px !important;
  color: var(--np-text) !important;
}

body .dropdown-menu > li > a:hover,
body .bootstrap-select .dropdown-menu li a:hover {
  background: #f5f5f7 !important;
  color: var(--np-primary) !important;
}

/* Tabelas */
body .table-responsive {
  border-radius: var(--np-radius) !important;
}

body .table thead th {
  padding: 13px 15px !important;
  background: #fafafa !important;
  border-bottom: 2px solid #e8e8ed !important;
  color: #48484a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
}

body .table tbody td {
  padding: 13px 15px !important;
  border-bottom: 1px solid var(--np-border-soft) !important;
  color: #3a3a3c !important;
  vertical-align: middle !important;
}

body .table tbody tr:hover {
  background: #fafafa !important;
}

/* Estados */
body .label {
  padding: 5px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

body .label-success,
body .invoice-status-2 {
  background: rgba(52, 199, 89, .10) !important;
  border-color: rgba(52, 199, 89, .25) !important;
  color: #168537 !important;
}

body .label-danger,
body .invoice-status-1,
body .invoice-status-4,
body .invoice-status-5 {
  background: rgba(255, 59, 48, .10) !important;
  border-color: rgba(255, 59, 48, .25) !important;
  color: #c92d25 !important;
}

body .label-warning {
  background: rgba(255, 149, 0, .10) !important;
  border-color: rgba(255, 149, 0, .25) !important;
  color: #b86a00 !important;
}

body .label-info,
body .label-primary,
body .invoice-status-3 {
  background: rgba(0, 122, 255, .10) !important;
  border-color: rgba(0, 122, 255, .25) !important;
  color: var(--np-primary-hover) !important;
}

body .label-default,
body .invoice-status-6 {
  background: rgba(142, 142, 147, .10) !important;
  border-color: rgba(142, 142, 147, .25) !important;
  color: var(--np-text-soft) !important;
}

/* Modais, avisos e separadores */
body .modal-content {
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--np-radius-lg) !important;
  box-shadow: var(--np-shadow-lg) !important;
}

body .modal-header,
body .modal-footer {
  padding: 18px 22px !important;
  background: var(--np-surface) !important;
  border-color: var(--np-border-soft) !important;
}

body .modal-body {
  padding: 22px !important;
}

body .alert {
  padding: 14px 18px !important;
  border: 0 !important;
  border-radius: var(--np-radius) !important;
}

body .nav-tabs {
  margin-bottom: 20px !important;
  border-bottom: 1px solid var(--np-border) !important;
}

body .nav-tabs > li > a {
  padding: 10px 16px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--np-text-soft) !important;
}

body .nav-tabs > li.active > a,
body .nav-tabs > li.active > a:hover,
body .nav-tabs > li.active > a:focus {
  background: var(--np-surface) !important;
  border: 1px solid var(--np-border) !important;
  border-bottom-color: var(--np-surface) !important;
  color: var(--np-primary) !important;
}

body .pagination > li > a,
body .pagination > li > span {
  margin: 0 2px !important;
  padding: 8px 13px !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--np-radius-sm) !important;
  color: #48484a !important;
}

body .pagination > .active > a,
body .pagination > .active > span {
  background: var(--np-primary) !important;
  border-color: var(--np-primary) !important;
  color: #fff !important;
}

body .progress {
  height: 8px !important;
  overflow: hidden;
  background: #e8e8ed !important;
  border-radius: 8px !important;
}

body .progress-bar {
  background: var(--np-primary) !important;
}

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

body ::-webkit-scrollbar-track {
  background: #f5f5f7;
}

body ::-webkit-scrollbar-thumb {
  background: #d2d2d7;
  border-radius: 8px;
}

@media (max-width: 768px) {
  body #wrapper .content,
  body .customers-wrapper .content {
    padding: 16px !important;
  }

  body .panel-body,
  body .card-body,
  body .modal-body {
    padding: 16px !important;
  }
}

/* =========================================================
   ÁREA DO CLIENTE — MENU LATERAL E CONTEÚDO EM BLOCOS
   Activado pelo ficheiro NPronto_Area_Cliente_Sidebar.js
   ========================================================= */

body.np-client-sidebar {
  --np-client-sidebar-width: 264px;
  min-height: 100vh;
  background: var(--np-bg-secondary) !important;
}

body.np-client-sidebar > .navbar,
body.np-client-sidebar .customers-nav {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 1040 !important;
  width: var(--np-client-sidebar-width) !important;
  height: 100vh !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--np-bg-primary) !important;
  border: 0 !important;
  border-right: 1px solid var(--np-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.np-client-sidebar > .navbar .container,
body.np-client-sidebar > .navbar .container-fluid,
body.np-client-sidebar .customers-nav .container,
body.np-client-sidebar .customers-nav .container-fluid {
  width: 100% !important;
  padding: 0 12px !important;
}

body.np-client-sidebar .navbar-header {
  float: none !important;
  width: 100% !important;
  min-height: 76px !important;
  padding: 14px 10px !important;
  border-bottom: 1px solid var(--np-border-soft) !important;
}

body.np-client-sidebar .navbar-brand {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  min-height: 48px !important;
  padding: 0 !important;
}

body.np-client-sidebar .navbar-brand img {
  display: block !important;
  max-width: 190px !important;
  max-height: 44px !important;
  object-fit: contain !important;
}

body.np-client-sidebar .navbar-collapse,
body.np-client-sidebar .navbar-collapse.collapse {
  display: block !important;
  height: auto !important;
  padding: 12px 0 20px !important;
  overflow: visible !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.np-client-sidebar .navbar-nav,
body.np-client-sidebar .navbar-left,
body.np-client-sidebar .navbar-right {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

body.np-client-sidebar .navbar-nav > li {
  float: none !important;
  display: block !important;
  width: 100% !important;
  margin: 2px 0 !important;
}

body.np-client-sidebar .navbar-nav > li > a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  background: transparent !important;
  border-radius: var(--np-radius-sm) !important;
  color: var(--np-gray-700) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: normal !important;
}

body.np-client-sidebar .navbar-nav > li > a i,
body.np-client-sidebar .navbar-nav > li > a .fa,
body.np-client-sidebar .navbar-nav > li > a .fas,
body.np-client-sidebar .navbar-nav > li > a .far {
  flex: 0 0 22px !important;
  width: 22px !important;
  margin-right: 10px !important;
  text-align: center !important;
}

body.np-client-sidebar .navbar-nav > li > a:hover,
body.np-client-sidebar .navbar-nav > li.active > a,
body.np-client-sidebar .navbar-nav > li.open > a {
  background: rgba(0, 122, 255, .10) !important;
  color: var(--np-primary) !important;
}

body.np-client-sidebar .navbar-nav .dropdown-menu {
  position: static !important;
  float: none !important;
  width: auto !important;
  margin: 4px 0 6px 30px !important;
  padding: 3px 0 3px 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid var(--np-gray-200) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.np-client-sidebar .navbar-nav .dropdown-menu > li > a {
  padding: 8px 10px !important;
  background: transparent !important;
  color: var(--np-gray-600) !important;
  font-size: 12px !important;
}

body.np-client-sidebar .navbar-nav .dropdown-menu > li > a:hover,
body.np-client-sidebar .navbar-nav .dropdown-menu > li.active > a {
  color: var(--np-primary) !important;
}

body.np-client-sidebar .customers-wrapper,
body.np-client-sidebar > #wrapper,
body.np-client-sidebar > main,
body.np-client-sidebar > .content {
  width: auto !important;
  min-height: 100vh !important;
  margin-left: var(--np-client-sidebar-width) !important;
  padding-top: 0 !important;
  background: var(--np-bg-secondary) !important;
}

body.np-client-sidebar .customers-wrapper > .container,
body.np-client-sidebar > #wrapper > .container,
body.np-client-sidebar main > .container {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 28px !important;
}

/* Blocos de informação */
body.np-client-sidebar .panel_s,
body.np-client-sidebar .panel,
body.np-client-sidebar .card,
body.np-client-sidebar .widget,
body.np-client-sidebar .well {
  margin-bottom: 20px !important;
  overflow: hidden !important;
  background: var(--np-bg-primary) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--np-radius-lg) !important;
  box-shadow: none !important;
}

body.np-client-sidebar .panel_s > .panel-body,
body.np-client-sidebar .panel > .panel-body,
body.np-client-sidebar .card-body,
body.np-client-sidebar .widget,
body.np-client-sidebar .well {
  padding: 20px !important;
}

body.np-client-sidebar .panel-heading,
body.np-client-sidebar .card-header {
  padding: 15px 20px !important;
  background: var(--np-bg-primary) !important;
  border-bottom: 1px solid var(--np-border-soft) !important;
}

body.np-client-sidebar .row {
  display: flex;
  flex-wrap: wrap;
}

body.np-client-sidebar .row::before,
body.np-client-sidebar .row::after {
  display: none;
}

body.np-client-sidebar .row > [class*="col-"] {
  float: none !important;
}

body.np-client-sidebar .row > [class*="col-"] > .panel_s,
body.np-client-sidebar .row > [class*="col-"] > .panel,
body.np-client-sidebar .row > [class*="col-"] > .card {
  height: calc(100% - 20px);
}

/* Controlo móvel criado pelo JavaScript */
body .np-client-menu-toggle {
  display: none;
}

body .np-client-sidebar-overlay {
  display: none;
}

@media (max-width: 991px) {
  body.np-client-sidebar {
    padding-top: 64px !important;
  }

  body.np-client-sidebar > .navbar,
  body.np-client-sidebar .customers-nav {
    width: 280px !important;
    transform: translateX(-100%);
    transition: transform var(--np-transition) !important;
  }

  body.np-client-sidebar.np-client-menu-open > .navbar,
  body.np-client-sidebar.np-client-menu-open .customers-nav {
    transform: translateX(0);
  }

  body.np-client-sidebar .customers-wrapper,
  body.np-client-sidebar > #wrapper,
  body.np-client-sidebar > main,
  body.np-client-sidebar > .content {
    margin-left: 0 !important;
  }

  body.np-client-sidebar .customers-wrapper > .container,
  body.np-client-sidebar > #wrapper > .container,
  body.np-client-sidebar main > .container {
    padding: 18px !important;
  }

  body.np-client-sidebar .np-client-menu-toggle {
    position: fixed;
    top: 12px;
    left: 14px;
    z-index: 1060;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: var(--np-bg-primary);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius-sm);
    color: var(--np-gray-700);
    box-shadow: var(--np-shadow-sm);
  }

  body.np-client-sidebar .np-client-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1035;
    display: block;
    background: rgba(29, 29, 31, .38);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--np-transition), visibility var(--np-transition);
  }

  body.np-client-sidebar.np-client-menu-open .np-client-sidebar-overlay {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 767px) {
  body.np-client-sidebar .row {
    display: block;
  }

  body.np-client-sidebar .row > [class*="col-"] > .panel_s,
  body.np-client-sidebar .row > [class*="col-"] > .panel,
  body.np-client-sidebar .row > [class*="col-"] > .card {
    height: auto;
  }
}