/*

 * ============================================================

 * ZOOPEM BUSINESS PORTAL — SHARED UI

 * ============================================================

 *

 * Reusable Business Portal visual language:

 * - colourful icon containers

 * - semantic status/type badges

 * - heading/card/navigation icon treatments

 *

 * Colour is supplemental. Text labels remain authoritative.

 * ============================================================

 */





/* ============================================================

   COLOURFUL ICON SYSTEM

   ============================================================ */



.zpb-ui-icon {

  --zpb-icon-rgb: 69, 166, 255;



  display: inline-flex;

  flex: 0 0 auto;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  border: 1px solid rgba(var(--zpb-icon-rgb), 0.62);

  border-radius: 10px;

  background: rgba(var(--zpb-icon-rgb), 0.18);

  color: rgb(var(--zpb-icon-rgb));

}



.zpb-ui-icon[data-size="small"] {

  width: 28px;

  height: 28px;

  border-radius: 8px;

}



.zpb-ui-icon[data-size="large"] {

  width: 42px;

  height: 42px;

  border-radius: 12px;

}



.zpb-ui-icon svg {

  width: 18px;

  height: 18px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

}



.zpb-ui-icon[data-size="small"] svg {

  width: 15px;

  height: 15px;

}



.zpb-ui-icon[data-size="large"] svg {

  width: 21px;

  height: 21px;

}





/* Icon colour families */



.zpb-ui-icon[data-tone="blue"] {

  --zpb-icon-rgb: 69, 166, 255;

}



.zpb-ui-icon[data-tone="purple"] {

  --zpb-icon-rgb: 171, 112, 255;

}



.zpb-ui-icon[data-tone="green"] {

  --zpb-icon-rgb: 45, 224, 142;

}



.zpb-ui-icon[data-tone="teal"] {

  --zpb-icon-rgb: 35, 225, 207;

}



.zpb-ui-icon[data-tone="cyan"] {

  --zpb-icon-rgb: 44, 205, 255;

}



.zpb-ui-icon[data-tone="orange"] {

  --zpb-icon-rgb: 255, 163, 58;

}



.zpb-ui-icon[data-tone="amber"] {

  --zpb-icon-rgb: 255, 202, 58;

}



.zpb-ui-icon[data-tone="pink"] {

  --zpb-icon-rgb: 255, 91, 181;

}



.zpb-ui-icon[data-tone="red"] {

  --zpb-icon-rgb: 255, 82, 105;

}



.zpb-ui-icon[data-tone="slate"] {

  --zpb-icon-rgb: 174, 190, 214;

}





/* ============================================================

   HEADING / CARD ICON LAYOUTS

   ============================================================ */



.zpb-ui-heading {

  display: flex;

  align-items: center;

  gap: 11px;

  min-width: 0;

}



.zpb-ui-heading-copy {

  min-width: 0;

}



.zpb-ui-card-heading {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

}



.zpb-ui-card-heading-copy {

  min-width: 0;

}





/* ============================================================

   NAVIGATION ICONS

   ============================================================ */



.zpb-nav-icon.zpb-ui-nav-icon {

  --zpb-nav-rgb: 69, 166, 255;



  display: inline-flex;

  flex: 0 0 auto;

  align-items: center;

  justify-content: center;

  width: 29px;

  height: 29px;

  border: 1px solid rgba(var(--zpb-nav-rgb), 0.58);

  border-radius: 8px;

  background: rgba(var(--zpb-nav-rgb), 0.17);

  color: rgb(var(--zpb-nav-rgb));

}



.zpb-ui-nav-icon svg {

  width: 15px;

  height: 15px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

}



.zpb-ui-nav-icon[data-tone="blue"] {

  --zpb-nav-rgb: 69, 166, 255;

}



.zpb-ui-nav-icon[data-tone="purple"] {

  --zpb-nav-rgb: 171, 112, 255;

}



.zpb-ui-nav-icon[data-tone="green"] {

  --zpb-nav-rgb: 45, 224, 142;

}



.zpb-ui-nav-icon[data-tone="teal"] {

  --zpb-nav-rgb: 35, 225, 207;

}



.zpb-ui-nav-icon[data-tone="cyan"] {

  --zpb-nav-rgb: 44, 205, 255;

}



.zpb-ui-nav-icon[data-tone="orange"] {

  --zpb-nav-rgb: 255, 163, 58;

}



.zpb-ui-nav-icon[data-tone="amber"] {

  --zpb-nav-rgb: 255, 202, 58;

}



.zpb-ui-nav-icon[data-tone="pink"] {

  --zpb-nav-rgb: 255, 91, 181;

}



.zpb-ui-nav-icon[data-tone="red"] {

  --zpb-nav-rgb: 255, 82, 105;

}



.zpb-ui-nav-icon[data-tone="slate"] {

  --zpb-nav-rgb: 174, 190, 214;

}





/* ============================================================

   SEMANTIC BADGES

   ============================================================ */



.zpb-ui-badge {

  --zpb-badge-rgb: 174, 190, 214;



  display: inline-flex;

  align-items: center;

  gap: 5px;

  min-height: 25px;

  padding: 4px 9px;

  border: 1px solid rgba(var(--zpb-badge-rgb), 0.88);

  border-radius: 999px;

  background: rgba(var(--zpb-badge-rgb), 0.24);

  color: rgb(var(--zpb-badge-rgb));

  text-shadow: 0 0 8px rgba(var(--zpb-badge-rgb), 0.20);

  font-size: 10px;

  font-weight: 800;

  line-height: 1;

  white-space: nowrap;

}



.zpb-ui-icon,

.zpb-ui-nav-icon {

  box-shadow:

    inset 0 0 0 1px rgba(255,255,255,0.025),

    0 0 14px rgba(var(--zpb-icon-rgb, 89, 166, 255), 0.06);

}



.zpb-ui-nav-icon {

  box-shadow:

    inset 0 0 0 1px rgba(255,255,255,0.025),

    0 0 12px rgba(var(--zpb-nav-rgb, 89, 166, 255), 0.06);

}



.zpb-ui-badge {

  box-shadow:

    inset 0 0 0 1px rgba(255,255,255,0.025),

    0 0 10px rgba(var(--zpb-badge-rgb), 0.055);

}





.zpb-ui-badge::before {

  width: 6px;

  height: 6px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: currentColor;

  box-shadow: 0 0 6px currentColor;

  content: "";

}





/* Account / lifecycle */



.zpb-ui-badge[data-kind="primary"] {

  --zpb-badge-rgb: 69, 166, 255;

}



.zpb-ui-badge[data-kind="active"] {

  --zpb-badge-rgb: 45, 224, 142;

}



.zpb-ui-badge[data-kind="inactive"] {

  --zpb-badge-rgb: 174, 190, 214;

}



.zpb-ui-badge[data-kind="suspended"] {

  --zpb-badge-rgb: 255, 82, 105;

}





/* Business Location types */



.zpb-ui-badge[data-kind="headquarters"] {

  --zpb-badge-rgb: 171, 112, 255;

}



.zpb-ui-badge[data-kind="office"] {

  --zpb-badge-rgb: 44, 205, 255;

}



.zpb-ui-badge[data-kind="store"] {

  --zpb-badge-rgb: 255, 163, 58;

}



.zpb-ui-badge[data-kind="branch"] {

  --zpb-badge-rgb: 35, 225, 207;

}



.zpb-ui-badge[data-kind="warehouse"] {

  --zpb-badge-rgb: 255, 202, 58;

}



.zpb-ui-badge[data-kind="service_area"] {

  --zpb-badge-rgb: 255, 91, 181;

}



.zpb-ui-badge[data-kind="virtual"] {

  --zpb-badge-rgb: 190, 105, 255;

}



.zpb-ui-badge[data-kind="other"] {

  --zpb-badge-rgb: 174, 190, 214;

}





/* ============================================================

   SUMMARY CARD ICON

   ============================================================ */



.zpb-ui-summary-heading {

  display: flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 8px;

}





/* ============================================================

   ACCESSIBILITY

   ============================================================ */



@media (prefers-reduced-motion: reduce) {



  .zpb-ui-icon,

  .zpb-ui-badge,

  .zpb-ui-nav-icon {

    transition: none;

  }



}



/* ============================================================



   SHARED ZOOPEM BUSINESS HEADER



   Consumer-standard controls continue to use:

   .zp-icon-button

   .zp-notification-dot

   .zp-preview-profile

   .zp-avatar

   .zp-account-menu



   ============================================================ */





.zpb-header-actions {



  display: flex;



  align-items: center;



  justify-content: flex-end;



  gap: 8px;



  min-width: 0;



}







.zpb-shell-user-welcome {



  min-width: 0;



  margin-right: 4px;



  text-align: right;



  line-height: 1.2;



}







.zpb-shell-user-name {



  overflow: hidden;



  max-width: 210px;



  color: var(--zp-text);



  font-size: 12px;



  font-weight: 800;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.zpb-shell-user-time {



  overflow: hidden;



  max-width: 235px;



  margin-top: 3px;



  color: var(--zp-text-muted);



  font-size: 10px;



  font-weight: 600;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.zpb-header-actions > .zp-icon-button {



  flex: 0 0 42px;



}







.zpb-shell-account {



  flex: 0 0 auto;



}







.zpb-shell-account > .zpb-shell-account-trigger {



  width: 42px;



  height: 42px;



  min-width: 42px;



  max-width: 42px;



  padding: 1px;



  justify-content: center;



  border-radius: 999px;



}







.zpb-shell-account-trigger > .zp-avatar {



  width: 36px;



  height: 36px;



  flex: 0 0 36px;



}







.zpb-shell-account .zp-account-menu {



  right: 0;



}







.zpb-shell-account .zp-account-menu [aria-busy="true"] {



  cursor: wait;



  opacity: .65;



}







.zpb-shell-account .zp-account-menu button:last-child {



  color: #d75b5b;



}







.zpb-shell-account .zp-account-menu button:last-child:hover,



.zpb-shell-account .zp-account-menu button:last-child:focus-visible {



  color: #ff8d8d;



}







@media (max-width: 1320px) {



  .zpb-shell-user-welcome {



    display: none;



  }



}







@media (max-width: 1120px) {



  .zpb-shell-account > .zpb-shell-account-trigger {



    padding: 1px;



  }



}







@media (max-width: 900px) {



  .zpb-header-actions {



    flex-wrap: wrap;



  }



}







@media (max-width: 760px) {



  .zpb-header-actions {



    justify-content: flex-start;



  }





  .zpb-shell-user-welcome {



    display: block;



    width: 100%;



    margin-right: 0;



    text-align: left;



  }





  .zpb-shell-user-name,



  .zpb-shell-user-time {



    max-width: none;



  }





  .zpb-shell-account .zp-account-menu {



    right: auto;



    left: 0;



  }



}