/* Pencere kabugu - mac-window, resize tutamaclari, baslik cubugu, arac cubugu, maximize ve arka plan blur */

/* ============================================================
   3. WINDOW + RESIZE HANDLES
   ============================================================ */
.mac-window {
  position: fixed;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 1400px; height: 900px;
  min-width: 980px; min-height: 600px;
  max-width: 100vw; max-height: 100vh;
  background: var(--surface); border-radius: 12px;
  box-shadow: var(--window-shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
  container-type: inline-size;
  container-name: appwin;
}
.mac-window.placed { transform: none; }

.resize-handle {
  position: absolute;
  z-index: 50;
  background: transparent;
}
.resize-handle.r-n  { top: -3px;    left: 14px;   right: 14px;  height: 6px;  cursor: ns-resize; }
.resize-handle.r-s  { bottom: -3px; left: 14px;   right: 14px;  height: 6px;  cursor: ns-resize; }
.resize-handle.r-w  { left: -3px;   top: 14px;    bottom: 14px; width: 6px;   cursor: ew-resize; }
.resize-handle.r-e  { right: -3px;  top: 14px;    bottom: 14px; width: 6px;   cursor: ew-resize; }
.resize-handle.r-nw { top: -3px;    left: -3px;   width: 14px;  height: 14px; cursor: nwse-resize; }
.resize-handle.r-ne { top: -3px;    right: -3px;  width: 14px;  height: 14px; cursor: nesw-resize; }
.resize-handle.r-sw { bottom: -3px; left: -3px;   width: 14px;  height: 14px; cursor: nesw-resize; }
.resize-handle.r-se { bottom: -3px; right: -3px;  width: 14px;  height: 14px; cursor: nwse-resize; }

body.resizing { user-select: none; }
body.resizing * { user-select: none !important; }
body.dragging-window { user-select: none; cursor: grabbing; }

/* ============================================================
   4. TITLE BAR (drag zone)
   ============================================================ */
.title-bar {
  height: 52px; flex-shrink: 0;
  background: #F6F6F6; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 16px;
  position: relative; user-select: none;
  cursor: grab;
}
.title-bar:active { cursor: grabbing; }
body.dragging-window .title-bar { cursor: grabbing; }
.title-bar .traffic-light,
.title-bar .breadcrumb-chip { cursor: pointer; }

.traffic-lights { display: flex; gap: 8px; align-items: center; }
.traffic-light {
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.traffic-light.red    { background: #FF5F56; }
.traffic-light.yellow { background: #FFBD2E; }
.traffic-light.green  { background: #27C93F; }

.title-text {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: -0.1px;
  pointer-events: none;
}
.title-text .dot { color: var(--muted); margin: 0 6px; font-weight: 400; }

.title-bar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--muted);
}
.title-bar-right .breadcrumb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; background: rgba(0, 0, 0, 0.04); border-radius: 6px;
  font-weight: 500; color: var(--muted);
}
.title-bar-right .breadcrumb-chip i { font-size: 11px; }

/* ============================================================
   5. TOOLBAR
   ============================================================ */
.toolbar {
  height: 60px; flex-shrink: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 20px; gap: 16px;
}
.global-search { width: 420px; max-width: 50%; position: relative; }
.global-search i.bi-search {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--muted); pointer-events: none;
  transition: color 0.15s ease;
}
.global-search input {
  width: 100%; height: 34px; border-radius: 8px;
  border: 1px solid transparent; background: var(--gray-surface);
  padding: 0 12px 0 36px; font-family: var(--font); font-size: 13px; color: var(--text);
  outline: none; transition: all 0.15s ease;
}
.global-search input::placeholder { color: var(--muted); }
.global-search input:focus { background: var(--surface); border-color: var(--mac-blue); box-shadow: var(--focus-ring); }
.global-search:focus-within i.bi-search { color: var(--mac-blue); }
.toolbar-shortcut {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--muted); background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px; border-radius: 4px; pointer-events: none;
}

.toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 8px;
  border: none; background: transparent;
  color: var(--muted); font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s ease;
  position: relative;
}
.icon-btn:hover { background: var(--hover-bg); }
.icon-btn .notif-dot {
  position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #FF3B30; border: 1.5px solid #fff;
}
.divider-v { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }

.user-menu {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px; border-radius: 10px;
  cursor: pointer; transition: background 0.15s ease;
}
.user-menu:hover { background: var(--hover-bg); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #9aa6b8 0%, #5d77a3 100%);
  color: #fff; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.2px; flex-shrink: 0;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2);
}
.user-info { line-height: 1.15; }
.user-info .name { font-size: 13px; font-weight: 600; color: var(--text); }
.user-info .role { font-size: 11px; color: var(--muted); margin-top: 1px; }
.user-menu i.bi-chevron-down { font-size: 10px; color: var(--muted); }

/* ============================================================
   31. MAXIMIZE + ARKA PLAN BLUR (masaüstü-overlay pattern)
   <p360-window> açıldığında body'ye `has-active-window` eklenir
   (platform360.js connectedCallback). Yeşil traffic-light tıklanca
   `maximized` class + body'ye `has-maximized-window`.
   ============================================================ */

/* --- Maximize edilmiş pencere — viewport tam kapla --- */
.mac-window {
  transition:
    width 0.32s cubic-bezier(0.32, 0.72, 0, 1),
    height 0.32s cubic-bezier(0.32, 0.72, 0, 1),
    top 0.32s cubic-bezier(0.32, 0.72, 0, 1),
    left 0.32s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
    border-radius 0.24s ease;
}
.mac-window.maximized {
  width: 100vw !important;
  height: 100vh !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  border-radius: 0;
  box-shadow: none;
}
/* Drag/resize maximize'da devre dışı (kullanıcı transform'u bozmasın) */
.mac-window.maximized > .resize-handle { pointer-events: none; opacity: 0; }
.mac-window.maximized > .title-bar { cursor: default; }

/* --- Arka plan kabuğu (harita + üst bar + dock) FLUlaşma ---
   Pencere açıkken odak pencerede olur. Pencere yoksa kabuk net.
   Auth ekranlarda kabuk yok zaten — etkilenmez.
*/
#map,
.desk-top-bar,
.dock-container {
  transition: filter 0.36s ease, opacity 0.36s ease;
}
body.has-active-window #map {
  filter: blur(8px) saturate(0.85) brightness(0.96);
}
body.has-active-window .desk-top-bar,
body.has-active-window .dock-container {
  filter: blur(4px) saturate(0.9);
  opacity: 0.78;
}
/* Hover'da blur kalkar (kullanıcı dock'a/top-bar'a erişmek isterse net görsün) */
body.has-active-window .desk-top-bar:hover,
body.has-active-window .dock-container:hover {
  filter: none;
  opacity: 1;
}

/* --- Maximize iken kabuk tamamen gizlenir (native macOS davranışı) --- */
body.has-maximized-window #map,
body.has-maximized-window .desk-top-bar,
body.has-maximized-window .dock-container {
  opacity: 0 !important;
  pointer-events: none;
  filter: blur(12px);
}

/* --- Traffic-light hover ipucu (macOS native gibi minik icon görünür) --- */
.traffic-light { position: relative; overflow: hidden; }
.traffic-light::before {
  content: "";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "bootstrap-icons" !important;
  font-size: 9px;
  color: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.14s ease;
}
.traffic-light.red::before    { content: "\F659"; } /* bi-x-lg */
.traffic-light.yellow::before { content: "\F2D5"; } /* bi-dash-lg */
.traffic-light.green::before  { content: "\F2C7"; } /* bi-arrows-fullscreen */
.title-bar:hover .traffic-light::before { opacity: 1; }
.mac-window.maximized .traffic-light.green::before { content: "\F2A6"; } /* bi-arrows-angle-contract */