/* Cellaro Design System — Archidux Solutions */
:root {
  --cellaro-primary: #1768e5;
  --cellaro-primary-dark: #0d4fbc;
  --cellaro-primary-soft: #eaf2ff;
  --cellaro-ink: #10233f;
  --cellaro-muted: #64748b;
  --cellaro-bg: #f6f8fc;
  --cellaro-surface: #ffffff;
  --cellaro-border: #e2e8f0;
  --cellaro-success: #13a671;
  --cellaro-warning: #ed8b22;
  --cellaro-danger: #dc3545;
  --cellaro-radius: 12px;
  --cellaro-shadow: 0 10px 30px rgba(16,35,63,.08);
  --primary-color: var(--cellaro-primary);
  --secondary-color: var(--cellaro-primary-dark);
  --accent-color: var(--cellaro-warning);
  --success-color: var(--cellaro-success);
  --warning-color: var(--cellaro-warning);
  --danger-color: var(--cellaro-danger);
  --bg-color: var(--cellaro-bg);
  --surface-color: var(--cellaro-surface);
  --text-color: var(--cellaro-ink);
  --text-light: var(--cellaro-muted);
  --border-color: var(--cellaro-border);
  --hover-color: var(--cellaro-primary-dark);
  --bs-primary: var(--cellaro-primary);
  --bs-primary-rgb: 23,104,229;
  --bs-secondary: var(--cellaro-muted);
  --bs-success: var(--cellaro-success);
  --bs-warning: var(--cellaro-warning);
  --bs-danger: var(--cellaro-danger);
  --bs-body-color: var(--cellaro-ink);
  --bs-body-bg: var(--cellaro-bg);
  --bs-border-color: var(--cellaro-border);
  --bs-link-color: var(--cellaro-primary);
  --bs-link-hover-color: var(--cellaro-primary-dark);
  --bs-body-font-family: "DM Sans", sans-serif;
}
html, body, button, input, select, textarea { font-family: "DM Sans", sans-serif !important; }
body { color: var(--cellaro-ink); }
h1, h2, h3, h4, h5, h6, .brand-text, .navbar-brand { font-family: "Manrope", sans-serif !important; letter-spacing: -.025em; color: var(--cellaro-ink); }
a { color: var(--cellaro-primary); }
.btn { border-radius: 10px; font-weight: 700; transition: transform .2s, box-shadow .2s, background-color .2s; }
.btn-primary { background: var(--cellaro-primary) !important; border-color: var(--cellaro-primary) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus { background: var(--cellaro-primary-dark) !important; border-color: var(--cellaro-primary-dark) !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(23,104,229,.2); }
.btn-outline-primary { color: var(--cellaro-primary) !important; border-color: var(--cellaro-primary) !important; }
.btn-outline-primary:hover { background: var(--cellaro-primary) !important; color: #fff !important; }
.form-control, .form-select { border: 1px solid var(--cellaro-border) !important; border-radius: 10px !important; color: var(--cellaro-ink) !important; background-color: #fff !important; }
.form-control:focus, .form-select:focus { border-color: var(--cellaro-primary) !important; box-shadow: 0 0 0 .2rem rgba(23,104,229,.13) !important; }
.form-label { color: var(--cellaro-ink); font-weight: 600; }
.card { border-color: var(--cellaro-border) !important; border-radius: var(--cellaro-radius) !important; box-shadow: var(--cellaro-shadow); }
.table { --bs-table-color: var(--cellaro-ink); --bs-table-striped-bg: #f8faff; }
.table thead th { color: var(--cellaro-muted); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.badge.text-bg-primary, .bg-primary { background-color: var(--cellaro-primary) !important; }
.text-primary { color: var(--cellaro-primary) !important; }
.alert-success { color: #087653; background: #e9fbf4; border-color: #bcebd9; }
.alert-danger { color: #a61d2d; background: #fff0f2; border-color: #ffcbd1; }
.alert-warning { color: #92540e; background: #fff7e8; border-color: #f9ddb7; }
.app-navbar { border-bottom-color: var(--cellaro-border) !important; }
.app-brand .brand-mark, .user-initials, .section-header.active, .sidebar-link.active { background: var(--cellaro-primary) !important; }
.section-header .icon, .sidebar-link .icon { color: var(--cellaro-primary) !important; background: var(--cellaro-primary-soft) !important; }
.sidebar-link:hover { background: var(--cellaro-primary-soft) !important; color: var(--cellaro-primary-dark) !important; }
::selection { background: rgba(23,104,229,.2); color: var(--cellaro-ink); }

/* Professional minimal layer */
body {
  background: var(--cellaro-bg) !important;
  background-image: none !important;
  font-size: 15px;
  line-height: 1.55;
}
.app-navbar, .sidebar {
  background: #fff !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.menu-section, .sidebar-link {
  border-radius: 10px !important;
  box-shadow: none !important;
}
.section-header { background: #fff !important; }
.section-header.active { color: var(--cellaro-primary) !important; background: var(--cellaro-primary-soft) !important; }
.section-header.active .icon { color: var(--cellaro-primary) !important; background: #fff !important; }
.content-wrapper { animation: none !important; }
.card { box-shadow: 0 2px 10px rgba(16,35,63,.045) !important; }
.card-header { background: #fff !important; border-bottom-color: var(--cellaro-border) !important; }
.btn { box-shadow: none !important; }
.btn:hover { transform: none !important; }
.form-control, .form-select { min-height: 43px; }
.dropdown-menu { border-color: var(--cellaro-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,35,63,.1); }
.modal-content { border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(16,35,63,.15); }

/* Flat color policy: gradients are intentionally disabled platform-wide. */
*:not(svg):not(path) { background-image: none !important; }
body.auth-body { background-color: #f6f8fc !important; }
.auth-aside { background-color: var(--cellaro-primary) !important; }
.auth-aside::after { background-color: rgba(255,255,255,.1) !important; }
.auth-badge { background-color: rgba(255,255,255,.16) !important; }
.app-brand .brand-mark, .brand-mark, .legal-brand span { background-color: var(--cellaro-primary) !important; }
.btn-primary, button[type="submit"] { background-color: var(--cellaro-primary) !important; color: #fff !important; }
.card, .modal-content, .dropdown-menu { background-color: #fff !important; }

/* Cellaro brand logo */
.cellaro-brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.cellaro-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.25rem;
  overflow: hidden;
  text-decoration: none;
}

.cellaro-logo-nav {
  width: auto;
  height: 38px;
  max-width: 150px;
}

.cellaro-logo-auth {
  width: min(180px, 62vw);
  max-height: 100px;
}

.cellaro-logo-public {
  width: auto;
  height: 42px;
  max-width: 160px;
}

.cellaro-logo-aside-wrap {
  justify-content: flex-start;
  max-width: 180px;
  margin: 0 0 1.25rem;
  padding: .3rem .55rem;
  border-radius: 12px;
  background: #fff;
}

.cellaro-logo-aside {
  width: auto;
  height: 54px;
  max-width: 160px;
}

.cellaro-logo-legal {
  width: auto;
  height: 40px;
  max-width: 145px;
}

.navbar-brand.app-brand,
.brand,
.legal-brand,
.logo-wrapper {
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 575px) {
  .cellaro-logo-nav {
    height: 32px;
    max-width: 126px;
  }

  .cellaro-logo-auth {
    width: min(158px, 58vw);
    max-height: 88px;
  }

  .cellaro-logo-public {
    height: 36px;
    max-width: 138px;
  }

  .cellaro-logo-aside {
    height: 46px;
    max-width: 140px;
  }
}


/* Password visibility control */
.password-field {
  position: relative;
  width: 100%;
}

.password-field .form-control {
  width: 100%;
  padding-right: 3.1rem !important;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: .55rem;
  z-index: 2;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent !important;
  color: #64748b !important;
  transform: translateY(-50%);
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible,
.password-toggle.is-visible {
  background: #eff6ff !important;
  color: #1768e5 !important;
}

.password-toggle:focus-visible {
  outline: 2px solid rgba(23, 104, 229, .35);
  outline-offset: 1px;
}

.password-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}