/*
 * ГАРАЖ 211 — Design System · main.css
 * Токени, базові елементи, лейаут
 */

/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════ */
:root {
  /* Brand */
  --color-primary:       #667eea;
  --color-primary-dark:  #5a6fd6;
  --color-primary-light: #e8edff;
  --color-secondary:     #764ba2;

  /* Semantic */
  --color-success:       #43a047;
  --color-success-light: #e8f5e9;
  --color-danger:        #e53935;
  --color-danger-light:  #fdecea;
  --color-warning:       #f57c00;
  --color-warning-light: #fff3e0;
  --color-info:          #1976d2;
  --color-info-light:    #e3f2fd;

  /* Neutral */
  --color-text:          #1a1a2e;
  --color-text-sub:      #64748b;
  --color-text-muted:    #94a3b8;
  --color-text-inv:      #ffffff;

  --color-bg:            #f5f6fa;
  --color-surface:       #ffffff;
  --color-surface-sub:   #f8fafc;
  --color-hover:         #f1f5f9;

  --color-border:        #e2e8f0;
  --color-border-strong: #cbd5e1;

  /* Layout */
  --sidebar-w:           260px;
  --topbar-h:            64px;
  --sidebar-right-w:     300px;

  /* Spacing */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px;
  --sp-4:  16px; --sp-5:  20px; --sp-6:  24px;
  --sp-8:  32px; --sp-10: 40px; --sp-12: 48px;

  /* Border radius */
  --r-sm:   6px;  --r-md:  10px;  --r-lg:  14px;
  --r-xl:   20px; --r-2xl: 28px;  --r-full: 9999px;

  /* Font sizes */
  --fs-xs:  11px; --fs-sm:  12px; --fs-base: 14px;
  --fs-md:  15px; --fs-lg:  17px; --fs-xl:   20px;
  --fs-2xl: 24px; --fs-3xl: 28px;

  /* Font weights */
  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;
  --font-sans: "Inter","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Icons */
  --icon-sm: 14px; --icon-md: 18px; --icon-lg: 22px;

  /* Action button sizes */
  --btn-icon-sm: 44px;
  --btn-icon-md: 36px;
  --btn-icon-lg: 42px;

  /* Shadows */
  --sh-xs: 0 1px 3px rgba(0,0,0,.06),  0 1px 2px rgba(0,0,0,.04);
  --sh-sm: 0 2px 8px rgba(0,0,0,.08),  0 1px 3px rgba(0,0,0,.05);
  --sh-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --sh-lg: 0 8px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07);
  --sh-xl: 0 16px 48px rgba(0,0,0,.15),0 6px 16px rgba(0,0,0,.08);

  /* Transitions */
  --t-fast: all .12s ease;
  --t-base: all .2s  ease;
  --t-slow: all .32s ease;

  /* Gradients */
  --grad-brand:   linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --grad-success: linear-gradient(135deg,#43a047 0%,#66bb6a 100%);
  --grad-danger:  linear-gradient(135deg,#e53935 0%,#e57373 100%);
  --grad-warm:    linear-gradient(135deg,#f57c00 0%,#ffa726 100%);

  /* Backward-compat aliases (used in templates + old CSS) */
  --primary:             #667eea;
  --secondary:           #764ba2;
  --dark:                #1a1a2e;
  --light:               #f5f6fa;
  --border:              #e2e8f0;
  --sidebar-width:       260px;
  --topbar-height:       64px;
  --sidebar-right-width: 300px;
}

/* ═══════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  font-size: var(--fs-md);
  line-height: 1.58;
  letter-spacing: .01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6 { color:var(--color-text); line-height:1.3; font-weight:var(--fw-bold); }
a { color:var(--color-primary); text-decoration:none; }
a:hover { color:var(--color-primary-dark); }
img,svg { display:block; max-width:100%; }

/* ═══════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════ */
.main-content {
  margin-left: var(--sidebar-w);
  margin-right: var(--sidebar-right-w);
  margin-top: var(--topbar-h);
  padding: var(--sp-8);
  min-height: calc(100vh - var(--topbar-h));
}

/* ═══════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════ */
.topbar {
  position:fixed; top:0; left:0; right:0;
  height: var(--topbar-h);
  background: var(--grad-brand);
  color: var(--color-text-inv);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 var(--sp-8);
  z-index:1000; box-shadow:var(--sh-md);
  overflow: visible;
}
.topbar-brand { font-size:var(--fs-xl); font-weight:var(--fw-bold); display:flex; align-items:center; gap:var(--sp-4); letter-spacing:-.4px; }
.topbar-center { flex:1; max-width:640px; margin:0 var(--sp-6); }
.topbar-user   { display:flex; align-items:center; gap:var(--sp-5); min-width:0; }
.topbar-user { flex-wrap: nowrap; }

@media (max-width: 768px) {
  .topbar-user {
    flex: 0 0 auto;
    justify-content: flex-end;
  }
}

.topbar-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.topbar-icon-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.topbar-bell-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 3;
}

.topbar-bell-btn i {
  display: block !important;
  color: #fff !important;
  opacity: 1 !important;
  line-height: 1;
  flex-shrink: 0;
  pointer-events: none;
}

.user-info {
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-4);
  min-width:0;
  max-width:320px;
  flex:0 1 320px;
}
.user-avatar {
  width:38px; height:38px; border-radius:var(--r-full);
  background:rgba(255,255,255,.22); color:var(--color-text-inv);
  display:flex; align-items:center; justify-content:center;
  font-weight:var(--fw-bold); font-size:var(--fs-md);
  border:2px solid rgba(255,255,255,.35); flex-shrink:0;
}

/* ── Avatar shape modifiers (controlled by admin settings) ── */
.av-shape-circle  { border-radius: 50% !important; }
.av-shape-rounded { border-radius: 12px !important; }
.av-shape-square  { border-radius: 4px !important; }

/* Global selected avatar radius (applies even where local CSS had fixed 50%) */
body.av-shape-circle  { --avatar-radius-global: 50%; }
body.av-shape-rounded { --avatar-radius-global: 12px; }
body.av-shape-square  { --avatar-radius-global: 4px; }

body.av-shape-circle .user-avatar,
body.av-shape-circle .ac-user-avatar,
body.av-shape-circle .uc-av,
body.av-shape-circle .uc-topbar-av,
body.av-shape-circle .uc-msg-av,
body.av-shape-circle .avatar-circle,
body.av-shape-circle .af-avatar-circle,
body.av-shape-circle .ca-avatar-circle,
body.av-shape-circle .ca-avatar-large,
body.av-shape-circle .ce-hero-avatar,
body.av-shape-circle .od-avatar,
body.av-shape-circle .od-mech-av,
body.av-shape-circle .ow-worker-avatar,
body.av-shape-circle .wk-avatar-fallback,
body.av-shape-rounded .user-avatar,
body.av-shape-rounded .ac-user-avatar,
body.av-shape-rounded .uc-av,
body.av-shape-rounded .uc-topbar-av,
body.av-shape-rounded .uc-msg-av,
body.av-shape-rounded .avatar-circle,
body.av-shape-rounded .af-avatar-circle,
body.av-shape-rounded .ca-avatar-circle,
body.av-shape-rounded .ca-avatar-large,
body.av-shape-rounded .ce-hero-avatar,
body.av-shape-rounded .od-avatar,
body.av-shape-rounded .od-mech-av,
body.av-shape-rounded .ow-worker-avatar,
body.av-shape-rounded .wk-avatar-fallback,
body.av-shape-square .user-avatar,
body.av-shape-square .ac-user-avatar,
body.av-shape-square .uc-av,
body.av-shape-square .uc-topbar-av,
body.av-shape-square .uc-msg-av,
body.av-shape-square .avatar-circle,
body.av-shape-square .af-avatar-circle,
body.av-shape-square .ca-avatar-circle,
body.av-shape-square .ca-avatar-large,
body.av-shape-square .ce-hero-avatar,
body.av-shape-square .od-avatar,
body.av-shape-square .od-mech-av,
body.av-shape-square .ow-worker-avatar,
body.av-shape-square .wk-avatar-fallback {
  border-radius: var(--avatar-radius-global, 50%) !important;
  overflow: hidden;
}

/* Global avatar size from /admin/modules/auth/settings */
.user-avatar,
.ac-user-avatar,
.uc-av,
.uc-topbar-av,
.uc-msg-av,
.avatar-circle,
.af-avatar-circle,
.ca-avatar-circle,
.ca-avatar-large,
.ce-hero-avatar,
.od-avatar,
.od-mech-av,
.ow-worker-avatar,
.wk-avatar-fallback,
.mys-avatar {
  width: var(--avatar-size-global, 56px) !important;
  height: var(--avatar-size-global, 56px) !important;
}

body.av-shape-circle .user-avatar img,
body.av-shape-circle .ac-user-avatar img,
body.av-shape-circle .uc-av img,
body.av-shape-circle .uc-topbar-av img,
body.av-shape-circle .uc-msg-av img,
body.av-shape-circle .avatar-circle img,
body.av-shape-circle .af-avatar-circle img,
body.av-shape-circle .ca-avatar-circle img,
body.av-shape-circle .ca-avatar-large img,
body.av-shape-circle .ce-hero-avatar img,
body.av-shape-circle .od-avatar img,
body.av-shape-circle .od-mech-av img,
body.av-shape-rounded .user-avatar img,
body.av-shape-rounded .ac-user-avatar img,
body.av-shape-rounded .uc-av img,
body.av-shape-rounded .uc-topbar-av img,
body.av-shape-rounded .uc-msg-av img,
body.av-shape-rounded .avatar-circle img,
body.av-shape-rounded .af-avatar-circle img,
body.av-shape-rounded .ca-avatar-circle img,
body.av-shape-rounded .ca-avatar-large img,
body.av-shape-rounded .ce-hero-avatar img,
body.av-shape-rounded .od-avatar img,
body.av-shape-rounded .od-mech-av img,
body.av-shape-square .user-avatar img,
body.av-shape-square .ac-user-avatar img,
body.av-shape-square .uc-av img,
body.av-shape-square .uc-topbar-av img,
body.av-shape-square .uc-msg-av img,
body.av-shape-square .avatar-circle img,
body.av-shape-square .af-avatar-circle img,
body.av-shape-square .ca-avatar-circle img,
body.av-shape-square .ca-avatar-large img,
body.av-shape-square .ce-hero-avatar img,
body.av-shape-square .od-avatar img,
body.av-shape-square .od-mech-av img {
  border-radius: var(--avatar-radius-global, 50%) !important;
}

/* img/video inside any av-shape container inherits the shape */
.av-shape-circle img,  .av-shape-circle video  { border-radius: 50% !important; }
.av-shape-rounded img, .av-shape-rounded video { border-radius: 12px !important; }
.av-shape-square img,  .av-shape-square video  { border-radius: 4px !important; }

/* avatar-circle (clients list) respects shape when class applied */
.avatar-circle.av-shape-circle  { border-radius: 50% !important; }
.avatar-circle.av-shape-rounded { border-radius: 12px !important; }
.avatar-circle.av-shape-square  { border-radius: 4px !important; }

/* ── Initials placeholder (shown when no avatar image) ── */
.av-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #6366f1;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  flex-shrink: 0;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
}

/* Unified avatar look: no decorative borders/shadows, clean like admin preview */
.user-avatar,
.ac-user-avatar,
.uc-av,
.uc-topbar-av,
.uc-msg-av,
.avatar-circle,
.af-avatar-circle,
.ca-avatar-circle,
.ca-avatar-large,
.ce-hero-avatar,
.od-avatar,
.od-mech-av,
.ow-worker-avatar,
.wk-avatar-fallback {
  border: none !important;
  box-shadow: none !important;
}
.user-info > div { line-height:1.35; min-width:0; }
.user-info > div > div:first-child {
  font-size:var(--fs-base);
  font-weight:var(--fw-semi);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.user-info > div > div:last-child {
  font-size:var(--fs-sm);
  opacity:.82;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mobile-menu-btn {
  display:none;
  background:rgba(255,255,255,.18); border:none; color:var(--color-text-inv);
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm);
  cursor:pointer; font-size:var(--icon-lg); transition:var(--t-fast);
}
.mobile-menu-btn:hover { background:rgba(255,255,255,.3); }

/* ═══════════════════════════════════════════════════
   SIDEBARS
   ═══════════════════════════════════════════════════ */
.sidebar-left {
  position:fixed; top:var(--topbar-h); left:0;
  width:var(--sidebar-w); height:calc(100vh - var(--topbar-h));
  background:var(--color-surface); border-right:1px solid var(--color-border);
  overflow-y:auto; z-index:900; transition:transform var(--t-slow);
}
.sidebar-right {
  position:fixed; top:var(--topbar-h); right:0;
  width:var(--sidebar-right-w); height:calc(100vh - var(--topbar-h));
  background:var(--color-surface); border-left:1px solid var(--color-border);
  overflow-y:hidden; padding:0; z-index:900; transition:transform var(--t-slow);
  display:flex; flex-direction:column;
}
.sidebar-left::-webkit-scrollbar { width:4px; }
.sidebar-left::-webkit-scrollbar-thumb { background:var(--color-border); border-radius:var(--r-full); }

/* ═══════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════ */
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }