/*
  =========================================================
  ACROV CONTROL

  FILE:
  header/header.css

  SYSTEM:
  MASTER APPLICATION HEADER

  PURPOSE:
  - Styles the permanent ACROV CONTROL header
  - Displays ACROV corporate identity
  - Displays active authority information
  - Provides Master / Director identity signaling
  - Provides sign-out control
  - Preserves maximum dashboard workspace

  ARCHITECTURE:

  ACROV SHELL
       ↓
  HEADER
       ↓
  CORPORATE IDENTITY
  AUTHORITY DISPLAY
  SESSION CONTROL

  IMPORTANT:
  - Header is permanent Shell hardware
  - Header does not render dashboards
  - Header does not grant authority
  - Header does not authenticate users
  - Header does not control navigation

  DOES NOT CONTROL:
  - Dashboard content
  - Dashboard routing
  - Permissions
  - Authentication
  - Director business logic
  =========================================================
*/


/* =========================================================
   HEADER
========================================================= */

.acrov-control-header {

  width:
    100%;

  height:
    100%;

  min-width:
    0;

  min-height:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    0 18px;

  border-bottom:
    1px solid
    var(--acrov-border);

  background:
    var(--acrov-white);

  box-shadow:
    0 1px 0
    rgba(
      15,
      23,
      42,
      0.02
    );

}


/* =========================================================
   LEFT SIDE
========================================================= */

.acrov-control-header-left {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    14px;

}


/* =========================================================
   CORPORATE IDENTITY
========================================================= */

.acrov-control-identity {

  min-width:
    0;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    10px;

  margin:
    0;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--acrov-text);

  font:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

}


/* =========================================================
   ACROV MARK
========================================================= */

.acrov-control-identity-mark {

  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    var(--acrov-blue);

  color:
    var(--acrov-white);

  font-size:
    15px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    -0.5px;

  box-shadow:
    0 2px 7px
    rgba(
      37,
      99,
      235,
      0.20
    );

}


/* =========================================================
   IDENTITY COPY
========================================================= */

.acrov-control-identity-copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;

  gap:
    2px;

}


/* =========================================================
   ACROV NAME
========================================================= */

.acrov-control-identity-name {

  max-width:
    100%;

  overflow:
    hidden;

  color:
    var(--acrov-text);

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.05;

  letter-spacing:
    -0.2px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   ACROV SIGNAL
========================================================= */

.acrov-control-identity-signal {

  max-width:
    100%;

  overflow:
    hidden;

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

  font-size:
    7px;

  font-weight:
    750;

  line-height:
    1;

  letter-spacing:
    1.25px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  text-transform:
    uppercase;

}


/* =========================================================
   IDENTITY INTERACTION
========================================================= */

.acrov-control-identity:hover
.acrov-control-identity-name {

  color:
    var(--acrov-blue);

}


.acrov-control-identity:focus-visible {

  outline:
    2px solid
    var(--acrov-blue);

  outline-offset:
    4px;

  border-radius:
    6px;

}


/* =========================================================
   RIGHT SIDE
========================================================= */

.acrov-control-header-right {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    10px;

}


/* =========================================================
   AUTHORITY
========================================================= */

.acrov-control-authority {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

}


/* =========================================================
   AUTHORITY COPY
========================================================= */

.acrov-control-authority-copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  justify-content:
    center;

  gap:
    2px;

}


/* =========================================================
   AUTHORITY LABEL
========================================================= */

.acrov-control-authority-label {

  max-width:
    180px;

  overflow:
    hidden;

  color:
    var(--acrov-text-secondary);

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1;

  letter-spacing:
    0.35px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   AUTHORITY IDENTITY
========================================================= */

.acrov-control-authority-identity {

  max-width:
    180px;

  overflow:
    hidden;

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

  font-size:
    7px;

  font-weight:
    650;

  line-height:
    1;

  letter-spacing:
    0.35px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   AUTHORITY LEVEL
========================================================= */

.acrov-control-authority-level {

  height:
    28px;

  min-height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 10px;

  border:
    1px solid
    #bfdbfe;

  border-radius:
    6px;

  background:
    var(--acrov-blue-soft);

  color:
    var(--acrov-blue-hover);

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.35px;

  white-space:
    nowrap;

  text-transform:
    uppercase;

}


/* =========================================================
   MASTER AUTHORITY
========================================================= */

.acrov-control-authority[
  data-acrov-authority-type="master"
]
.acrov-control-authority-level {

  border-color:
    #fde68a;

  background:
    #fffbeb;

  color:
    #92400e;

}


/* =========================================================
   DIRECTOR AUTHORITY
========================================================= */

.acrov-control-authority[
  data-acrov-authority-type="director"
]
.acrov-control-authority-level {

  border-color:
    #bfdbfe;

  background:
    #eff6ff;

  color:
    #1d4ed8;

}


/* =========================================================
   DELEGATE AUTHORITY
========================================================= */

.acrov-control-authority[
  data-acrov-authority-type="delegate"
]
.acrov-control-authority-level {

  border-color:
    #d1d5db;

  background:
    #f9fafb;

  color:
    #4b5563;

}


/* =========================================================
   SIGN OUT
========================================================= */

.acrov-control-sign-out {

  height:
    28px;

  min-height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 10px;

  border:
    1px solid
    var(--acrov-border-strong);

  border-radius:
    6px;

  background:
    var(--acrov-white);

  color:
    var(--acrov-text-secondary);

  font-family:
    inherit;

  font-size:
    8px;

  font-weight:
    750;

  line-height:
    1;

  letter-spacing:
    0.3px;

  text-decoration:
    none;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    background 120ms ease,
    color 120ms ease,
    border-color 120ms ease;

}


/* =========================================================
   SIGN OUT HOVER
========================================================= */

.acrov-control-sign-out:hover {

  border-color:
    #fecaca;

  background:
    #fef2f2;

  color:
    #b91c1c;

}


/* =========================================================
   SIGN OUT FOCUS
========================================================= */

.acrov-control-sign-out:focus-visible {

  outline:
    2px solid
    var(--acrov-blue);

  outline-offset:
    2px;

}


/* =========================================================
   HEADER STATUS
========================================================= */

.acrov-control-header-status {

  width:
    7px;

  height:
    7px;

  flex:
    0 0 7px;

  border-radius:
    50%;

  background:
    var(--acrov-success);

  box-shadow:
    0 0 0 3px
    rgba(
      22,
      163,
      74,
      0.10
    );

}


/* =========================================================
   TABLET
========================================================= */

@media (
  max-width: 900px
) {

  .acrov-control-header {

    gap:
      12px;

    padding:
      0 14px;

  }


  .acrov-control-header-left {

    gap:
      10px;

  }


  .acrov-control-authority-identity {

    display:
      none;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width: 600px
) {

  .acrov-control-header {

    gap:
      8px;

    padding:
      0 10px;

  }


  .acrov-control-header-left {

    gap:
      7px;

  }


  .acrov-control-identity {

    gap:
      7px;

  }


  .acrov-control-identity-mark {

    width:
      30px;

    height:
      30px;

    flex-basis:
      30px;

    border-radius:
      7px;

    font-size:
      13px;

  }


  .acrov-control-identity-name {

    font-size:
      12px;

  }


  .acrov-control-identity-signal {

    font-size:
      6px;

    letter-spacing:
      0.8px;

  }


  .acrov-control-header-right {

    gap:
      6px;

  }


  .acrov-control-authority {

    gap:
      5px;

  }


  .acrov-control-authority-copy {

    display:
      none;

  }


  .acrov-control-authority-level {

    height:
      26px;

    min-height:
      26px;

    padding:
      0 8px;

    font-size:
      7px;

  }


  .acrov-control-sign-out {

    height:
      26px;

    min-height:
      26px;

    padding:
      0 8px;

    font-size:
      7px;

  }

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (
  max-width: 380px
) {

  .acrov-control-identity-signal {

    display:
      none;

  }


  .acrov-control-authority-level {

    max-width:
      72px;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .acrov-control-sign-out {

    transition:
      none;

  }

}