:root {
  --bg:#f4f0f3;
  --panel:#ffffff;
  --ink:#211d22;
  --muted:#756c75;
  --border:#e6dde4;
  --accent:#7a345d;
  --accent-dark:#582642;
  --accent-soft:#f4e8ef;
  --green:#2b7c53;
  --danger:#b13c55;
  --sidebar:#21191f;
}

* {
  box-sizing:border-box;
}

html,
body {
  margin:0;
  min-height:100%;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background:var(--bg);
  color:var(--ink);
}

button,
input {
  font:inherit;
}

button {
  cursor:pointer;
}

.hidden {
  display:none !important;
}

.login-view {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 12% 12%,#ead8e4 0,transparent 30%),
    radial-gradient(circle at 90% 85%,#dfd1dc 0,transparent 32%),
    var(--bg);
}

.login-card {
  width:min(440px,100%);
  background:#fff;
  border-radius:24px;
  border:1px solid var(--border);
  padding:38px;
  box-shadow:0 18px 50px rgba(45,27,40,.08);
}

.logo,
.mini-logo {
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#fff;
  font-weight:900;
}

.logo {
  width:62px;
  height:62px;
  border-radius:18px;
  font-size:30px;
  margin-bottom:20px;
}

.system-title span {
  display:block;
  font-size:27px;
  font-weight:900;
}

.system-title small {
  display:block;
  margin-top:4px;
  color:var(--muted);
}

.badge {
  display:inline-flex;
  margin-top:18px;
  background:var(--accent-soft);
  color:var(--accent);
  padding:7px 11px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}

.login-card h1 {
  margin:28px 0 8px;
  font-size:24px;
}

.intro {
  margin:0 0 25px;
  color:var(--muted);
  line-height:1.55;
}

label {
  display:block;
  font-size:12px;
  font-weight:800;
  color:#514951;
  margin-bottom:17px;
}

input {
  display:block;
  width:100%;
  margin-top:8px;
  border:1px solid var(--border);
  background:#fbfafb;
  border-radius:11px;
  padding:14px;
  outline:none;
}

input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

#loginButton {
  width:100%;
  border:0;
  background:var(--accent);
  color:#fff;
  border-radius:11px;
  padding:14px;
  font-weight:900;
}

#loginButton:hover {
  background:var(--accent-dark);
}

.message {
  min-height:20px;
  margin-top:13px;
  font-size:12px;
}

.message.error {
  color:var(--danger);
}

.app {
  min-height:100vh;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
}

.sidebar {
  height:100vh;
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  background:var(--sidebar);
  color:#fff;
}

.sidebar-brand {
  display:flex;
  align-items:center;
  gap:12px;
  padding:23px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.mini-logo {
  width:42px;
  height:42px;
  border-radius:12px;
}

.sidebar-brand strong {
  display:block;
}

.sidebar-brand span {
  display:block;
  color:#baadb7;
  font-size:12px;
  margin-top:2px;
}

.sidebar nav {
  padding:18px 12px;
  flex:1;
}

.nav {
  width:100%;
  display:block;
  text-align:left;
  border:0;
  background:transparent;
  color:#d5cbd2;
  padding:12px 14px;
  border-radius:10px;
  margin-bottom:5px;
}

.nav:hover,
.nav.active {
  color:#fff;
  background:rgba(255,255,255,.09);
}

.sidebar-bottom {
  padding:17px;
  border-top:1px solid rgba(255,255,255,.08);
}

.sidebar-bottom span {
  display:block;
  color:#c9bec6;
  margin-bottom:10px;
  font-size:12px;
}

.sidebar-bottom button {
  width:100%;
  padding:9px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.14);
  background:transparent;
  color:#fff;
}

.main {
  min-width:0;
}

.topbar {
  height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px 33px;
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--border);
}

.topbar h2 {
  margin:4px 0 0;
  font-size:22px;
}

.eyebrow {
  display:block;
  color:var(--accent);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.online {
  display:flex;
  gap:7px;
  align-items:center;
  color:var(--green);
  font-size:12px;
  font-weight:800;
}

.online span {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
}

#content {
  padding:30px;
}

.hero {
  padding:27px;
  border-radius:18px;
  background:linear-gradient(130deg,#fff,#f6edf3);
  border:1px solid var(--border);
  margin-bottom:20px;
}

.hero h3 {
  margin:7px 0;
  font-size:26px;
}

.hero p,
.panel p {
  color:var(--muted);
}

.cards {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:20px;
}

.cards article,
.panel {
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
}

.cards article {
  padding:20px;
}

.cards span,
.cards small {
  color:var(--muted);
}

.cards span {
  display:block;
  font-size:12px;
}

.cards strong {
  display:block;
  font-size:31px;
  margin:12px 0 4px;
}

.panel {
  border-radius:18px;
  padding:23px;
}

.modules {
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.modules article {
  padding:17px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fbfafb;
}

.modules strong {
  display:block;
  margin-bottom:5px;
}

.modules span {
  color:var(--muted);
  line-height:1.45;
  font-size:12px;
}

.placeholder {
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:30px;
}

.placeholder p {
  color:var(--muted);
}

@media(max-width:1000px) {
  .cards {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px) {
  .app {
    grid-template-columns:1fr;
  }

  .sidebar {
    height:auto;
    position:relative;
  }

  .sidebar nav {
    display:flex;
    overflow-x:auto;
  }

  .nav {
    min-width:max-content;
  }

  .topbar {
    height:auto;
    padding:19px;
  }

  #content {
    padding:18px;
  }

  .cards,
  .modules {
    grid-template-columns:1fr;
  }
}


/* MAMP_USERS_STYLES_V1 */

.users-page {
  display:flex;
  flex-direction:column;
  gap:20px;
}

.users-toolbar {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:24px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
}

.users-toolbar h3 {
  margin:6px 0 7px;
  font-size:25px;
}

.users-toolbar p {
  margin:0;
  color:var(--muted);
}

.user-primary-btn {
  border:0;
  border-radius:11px;
  background:var(--accent);
  color:#fff;
  padding:12px 17px;
  font-weight:800;
  white-space:nowrap;
}

.user-primary-btn:hover {
  background:var(--accent-dark);
}

.user-primary-btn:disabled {
  opacity:.55;
  cursor:wait;
}

.user-secondary-btn,
.user-close-btn,
.user-edit-btn {
  border:1px solid var(--border);
  background:#fff;
  color:var(--ink);
  border-radius:9px;
  padding:9px 13px;
  font-weight:700;
}

.user-edit-btn {
  color:var(--accent);
}

.users-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.users-summary > div {
  padding:18px 20px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
}

.users-summary span {
  display:block;
  color:var(--muted);
  font-size:12px;
}

.users-summary strong {
  display:block;
  margin-top:8px;
  font-size:26px;
}

.users-list-panel,
.user-form-panel {
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
}

.users-list-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 22px;
  border-bottom:1px solid var(--border);
}

.users-list-head h4 {
  margin:0 0 3px;
  font-size:17px;
}

.users-list-head span {
  color:var(--muted);
  font-size:12px;
}

.users-search {
  width:min(330px,100%);
  margin:0;
  padding:10px 13px;
}

.users-table-wrap {
  overflow-x:auto;
}

.users-table {
  width:100%;
  border-collapse:collapse;
}

.users-table th {
  padding:12px 16px;
  text-align:left;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  border-bottom:1px solid var(--border);
  background:#faf8fa;
}

.users-table td {
  padding:15px 16px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  font-size:13px;
}

.users-table tbody tr:last-child td {
  border-bottom:0;
}

.users-table tbody tr:hover {
  background:#fcfafb;
}

.user-role {
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:10px;
  font-weight:800;
}

.user-status {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  font-weight:800;
}

.user-status::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
}

.user-status.active {
  color:#287a4f;
}

.user-status.active::before {
  background:#287a4f;
}

.user-status.inactive {
  color:#a04a5c;
}

.user-status.inactive::before {
  background:#a04a5c;
}

.users-actions {
  text-align:right;
}

.users-empty,
.users-loading {
  padding:30px;
  text-align:center;
  color:var(--muted);
}

.users-error {
  color:#a9324a !important;
}

.user-form-panel {
  padding:22px;
}

.user-form-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  margin-bottom:22px;
}

.user-form-header h3 {
  margin:6px 0 0;
}

.user-form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.user-form-grid label {
  margin:0;
}

.user-form-grid input,
.user-form-grid select {
  display:block;
  width:100%;
  margin-top:8px;
  border:1px solid var(--border);
  background:#fbfafb;
  border-radius:11px;
  padding:12px 13px;
  outline:none;
  font:inherit;
}

.user-form-grid input:focus,
.user-form-grid select:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

.user-password-field {
  grid-column:1 / -1;
}

.user-form-message {
  min-height:21px;
  margin-top:16px;
  font-size:12px;
  font-weight:700;
}

.user-form-message.success {
  color:#287a4f;
}

.user-form-message.error {
  color:#a9324a;
}

.user-form-buttons {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:8px;
}

@media(max-width:800px) {
  .users-toolbar,
  .users-list-head {
    flex-direction:column;
    align-items:stretch;
  }

  .users-summary,
  .user-form-grid {
    grid-template-columns:1fr;
  }

  .user-password-field {
    grid-column:auto;
  }

  .users-search {
    width:100%;
  }
}


/* MAMP_PROFESSIONALS_STYLES_V1 */

.professional-secondary {
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
}

.professional-wide {
  grid-column:1 / -1;
}

@media(max-width:800px) {
  .professional-wide {
    grid-column:auto;
  }
}


/* MAMP_ROLES_PERMISSIONS_STYLES_V2 */

.roles-grid {
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:16px;
}

.role-card {
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
}

.role-card-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:18px;
}

.role-card-head h4 {
  margin:5px 0 3px;
  font-size:18px;
}

.role-card-head small {
  color:var(--muted);
}

.role-description {
  margin:5px 0 7px;
  color:var(--muted);
  font-size:12px;
}

.role-permission-count {
  display:grid;
  place-items:center;
  min-width:42px;
  height:42px;
  border-radius:12px;
  background:var(--accent-soft);
  color:var(--accent);
}

.role-permissions {
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}

.permission-option {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  padding:10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#fbfafb;
  cursor:pointer;
}

.permission-option input {
  width:auto;
  margin:3px 0 0;
  padding:0;
  box-shadow:none;
}

.permission-option span {
  display:flex;
  flex-direction:column;
  gap:3px;
}

.permission-option strong {
  font-size:11px;
  line-height:1.35;
}

.permission-option small {
  color:var(--muted);
  font-size:9px;
}

.role-save-button {
  width:100%;
  margin-top:14px;
}

@media(max-width:950px) {
  .roles-grid {
    grid-template-columns:1fr;
  }
}