/**
 * Salon Admin — Gin subtheme branding.
 *
 * Re-tints Gin's accent to the salon blue (from the flyer) and adds a few
 * calm refinements. Gin does the heavy lifting; we only brand it.
 */
:root {
  --gin-color-primary: #3e6fb0;
  --gin-color-primary-rgb: 62, 111, 176;
  --gin-color-primary-hover: #35619b;
  --gin-color-primary-active: #2b4e7d;
  --gin-color-primary-light: #eaf1fa;
  --gin-color-primary-light-hover: #dbe8f6;
  --gin-color-primary-light-active: #cfe0f3;
  --gin-color-focus: #3e6fb0;
}

/* A soft icy page tint in light mode, echoing the flyer. */
.gin--dark-mode {
  --salon-gold: #d4b878;
}

body:not(.gin--dark-mode) {
  --salon-gold: #c6a15b;
}

/* Primary buttons pick up the salon blue automatically via the vars above.
   Give the salon name in the toolbar a touch of the flyer's elegance. */
.toolbar-menu__logo,
.gin-secondary-toolbar__label {
  letter-spacing: 0.01em;
}

/* --- Login page ----------------------------------------------------------
   The whole app runs in this theme (internal tool), so the login page gets a
   centered, branded card instead of a full-width bare form. */
.path-user .region-content .user-login-form,
.path-user .region-content form.user-pass {
  max-width: 26rem;
  margin-inline: auto;
}

.path-user .page-title,
.path-user .region-content .tabs-wrapper,
.path-user .region-content nav.tabs {
  max-width: 26rem;
  margin-inline: auto;
}

.salon-login__brand {
  margin-bottom: 1.5rem;
  text-align: center;
}

.salon-login__logo {
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(30, 46, 82, 0.18);
}

.salon-login__name {
  margin-top: 0.7rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e2e52;
}

.salon-login__tagline {
  margin-top: 0.15rem;
  font-style: italic;
  color: #5a6a85;
}

.gin--dark-mode .salon-login__name {
  color: #e8eef7;
}

.gin--dark-mode .salon-login__tagline {
  color: #9fb0c9;
}

/* --- Client history (and any embedded view table) on small screens --------
   Wide tables scroll inside their own container instead of the page body. */
.view-programari-client .view-content {
  overflow-x: auto;
}

.view-programari-client table {
  min-width: 40rem;
}

/* Keep the De la / Până la pair visually together in exposed filter bars. */
.views-exposed-form .form-item--din,
.views-exposed-form .form-item--pana {
  min-width: 9.5rem;
}

/* --- The combined "Notițe" column in appointment tables -------------------- */
.views-field-notite {
  max-width: 20rem;
  font-size: 0.82rem;
  line-height: 1.4;
}

.salon-nota {
  display: block;
  color: #5a6a85;
}

/* Contact lines (phone / email) under the client name in tables. */
.salon-cellline {
  display: block;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.salon-nota b {
  color: #1e2e52;
  font-weight: 600;
}

.gin--dark-mode .salon-nota {
  color: #9fb0c9;
}

.gin--dark-mode .salon-nota b {
  color: #e8eef7;
}

/* --- Salon menu icons (Navigation sidebar) ------------------------------
   Core falls back to two-letter initials for links without a packaged icon;
   these masks give the salon links real icons, drawn in currentColor. */
.toolbar-button--icon--salon-core-panou:not(:has(.toolbar-button__icon))::before,
.toolbar-button--icon--salon-core-fisa-zilei:not(:has(.toolbar-button__icon))::before,
.toolbar-button--icon--salon-core-clienti:not(:has(.toolbar-button__icon))::before,
.toolbar-button--icon--salon-core-colaboratori:not(:has(.toolbar-button__icon))::before,
.toolbar-button--icon--salon-core-servicii:not(:has(.toolbar-button__icon))::before,
.toolbar-button--icon--salon-core-programarile-mele:not(:has(.toolbar-button__icon))::before,
.toolbar-button--icon--salon-core-program:not(:has(.toolbar-button__icon))::before {
  content: "";
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 20px 20px;
}

/* Panou: dashboard grid. */
.toolbar-button--icon--salon-core-panou:not(:has(.toolbar-button__icon))::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}

/* Fișa zilei: calendar for today. */
.toolbar-button--icon--salon-core-fisa-zilei:not(:has(.toolbar-button__icon))::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 9.5h17M8 2.8v4M16 2.8v4'/%3E%3Ccircle cx='12' cy='15' r='2' fill='black' stroke='none'/%3E%3C/svg%3E");
}

/* Clienți: two people. */
.toolbar-button--icon--salon-core-clienti:not(:has(.toolbar-button__icon))::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 20c.5-3.8 2.8-5.8 5.5-5.8s5 2 5.5 5.8'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M16.2 14.5c2.4.2 4 2 4.3 5'/%3E%3C/svg%3E");
}

/* Colaboratori: a staff member (person in a profile frame). */
.toolbar-button--icon--salon-core-colaboratori:not(:has(.toolbar-button__icon))::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3Cpath d='M7.5 17.6c.5-2.5 2.2-3.7 4.5-3.7s4 1.2 4.5 3.7'/%3E%3C/svg%3E");
}

/* Servicii: diamond (the flyer's motif). */
.toolbar-button--icon--salon-core-servicii:not(:has(.toolbar-button__icon))::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M7 4h10l4 5.5L12 21 3 9.5 7 4Z'/%3E%3Cpath d='M3 9.5h18M12 21 8.5 9.5 12 4l3.5 5.5L12 21Z'/%3E%3C/svg%3E");
}

/* Programările mele: calendar with a check. */
.toolbar-button--icon--salon-core-programarile-mele:not(:has(.toolbar-button__icon))::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 9.5h17M8 2.8v4M16 2.8v4'/%3E%3Cpath d='m8.8 14.6 2.2 2.2 4.2-4.2'/%3E%3C/svg%3E");
}

/* Program salon: clock. */
.toolbar-button--icon--salon-core-program:not(:has(.toolbar-button__icon))::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}