/* ============================================================
   gamish-layout.css
   מערכת עיצוב מבנה מרכזית – גמיש אדמין
   ============================================================
   שנה ערכים רק כאן — כל הדפים יתעדכנו אוטומטית
   ============================================================ */

/* ── משתנים גלובליים ──────────────────────────────────────── */
:root {
    --header-h:          64px;   /* גובה הסרגל העליון */
    --sidebar-w:        260px;   /* רוחב sidebar מורחב */
    --sidebar-w-col:     96px;   /* רוחב sidebar מכווץ (אייקונים בלבד) */
    --transition-speed: 0.25s;   /* מהירות אנימציות מבנה */
}

/* ============================================================
   HEADER — קבוע בראש, מקצה לקצה
   ============================================================ */
#gm-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
    background-color: var(--bg-surface);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    gap: var(--space-4);
}

/* צד שמאל: breadcrumb + live badge */
.gm-header-start {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    min-width: 0;
}

/* Breadcrumb */
.gm-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-4);
    color: var(--text-muted);
    min-width: 0;
}
.gm-breadcrumb-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
}
.gm-breadcrumb-link:hover { color: var(--color-primary); }
.gm-breadcrumb-sep {
    font-size: 14px;
    opacity: 0.5;
}
.gm-breadcrumb-current {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Live badge */
.gm-live-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: 99px;
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
    font-size: 10px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}
.gm-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.85); }
}

/* צד ימין: כפתורים + פרופיל */
.gm-header-end {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* שדה חיפוש */
.gm-search-wrap {
    position: relative;
    display: none; /* מוסתר על מובייל */
}
@media (min-width: 640px) { .gm-search-wrap { display: block; } }
.gm-search-icon {
    position: absolute;
    inset-inline-end: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--text-muted);
    pointer-events: none;
}
.gm-search-input {
    width: 220px;
    padding: var(--space-2) var(--space-3);
    padding-inline-end: calc(var(--space-3) + 28px);
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    font-size: var(--fs-4);
    outline: none;
    transition: box-shadow 0.15s;
}
.gm-search-input:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* כפתור שפה */
.gm-lang-btn {
    display: none;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-size: var(--fs-3);
    font-weight: var(--fw-bold);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.gm-lang-btn:hover {
    background: var(--color-primary);
    color: #fff;
}
@media (min-width: 640px) { .gm-lang-btn { display: block; } }

/* כפתורי אייקון בheader */
.gm-header-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.gm-header-btn:hover {
    background: var(--bg-hover);
    color: var(--color-primary);
}

/* פעמון התראות */
.gm-notif-btn { position: relative; }
.gm-notif-dot {
    position: absolute;
    top: 7px;
    inset-inline-start: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-danger);
    border: 2px solid var(--bg-surface);
}

/* פרופיל */
.gm-profile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-inline-start: var(--space-4);
    border-inline-start: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.gm-profile-info {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
@media (min-width: 640px) { .gm-profile-info { display: flex; } }
.gm-profile-name {
    font-size: var(--fs-4);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
}
.gm-profile-role {
    font-size: var(--fs-3);
    color: var(--text-muted);
    white-space: nowrap;
}

/* אוואטר */
.gm-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.gm-avatar-initials {
    background: var(--color-primary);
    color: #fff;
    font-size: var(--fs-4);
    font-weight: var(--fw-bold);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gm-header-logout { color: var(--text-muted); }
.gm-header-logout:hover {
    background: var(--bg-danger);
    color: var(--color-danger);
}

/* ============================================================
   SHELL — מיכל תחת ה-header
   ============================================================ */
#gm-shell {
    display: flex;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* ============================================================
   SIDEBAR — ימין בעברית, שמאל באנגלית
   ============================================================ */
#gm-sidebar {
    position: relative;  /* נחוץ לכפתור הכיווץ */
    width: var(--sidebar-w);
    height: 100%;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width var(--transition-speed) ease;
    background-color: var(--color-bg-sidebar);
    border-inline-end: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
    display: flex;
    flex-direction: column;
    scrollbar-width: none; /* Firefox */
}

#gm-sidebar::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* מצב מכווץ */
#gm-sidebar.collapsed {
    width: var(--sidebar-w-col);
}

/* ============================================================
   SIDEBAR — טקסטים ואייקונים
   ============================================================ */

/* תווית טקסט בצד — מוסתרת כשמכווץ */
.gm-nav-label {
    transition: opacity var(--transition-speed) ease,
                width var(--transition-speed) ease;
    white-space: nowrap;
    overflow: hidden;
}

#gm-sidebar.collapsed .gm-nav-label {
    opacity: 0;
    width: 0;
    pointer-events: none;
}

/* אייקון — ממורכז כשמכווץ */
.gm-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
}

#gm-sidebar.collapsed .gm-nav-item {
    justify-content: center;
    padding: 0.625rem;
    gap: 0;
}

/* brand / לוגו — אייקון + טקסט צמודים, לא מתפרסים */
.gm-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0.75rem;
    padding: 1rem;
    overflow: hidden;
    width: 100%;
}

/* בתוך brand — הטקסט לא מתרחב ולא דוחף את האייקון */
.gm-brand .gm-brand-text {
    flex: 0 1 auto;
    min-width: 0;
}

.gm-brand .shrink-0 {
    flex-shrink: 0;
}

#gm-sidebar.collapsed .gm-brand-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* tooltip כשמכווץ */
#gm-sidebar.collapsed .gm-nav-item {
    position: relative;
}

/* ── כפתור כיווץ (בתחתית הסרגל) ─────────────────────── */
#gm-sidebar-toggle {
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    width: 100%;
}

/* סיבוב החץ */
#gm-sidebar-toggle .toggle-icon {
    transition: transform var(--transition-speed) ease;
    display: inline-block;
}

[dir="ltr"] #gm-sidebar-toggle .toggle-icon                         { transform: rotate(180deg); }
[dir="ltr"] #gm-sidebar.collapsed #gm-sidebar-toggle .toggle-icon   { transform: rotate(0deg); }
[dir="rtl"] #gm-sidebar-toggle .toggle-icon                         { transform: rotate(0deg); }
[dir="rtl"] #gm-sidebar.collapsed #gm-sidebar-toggle .toggle-icon   { transform: rotate(180deg); }

/* במצב מכווץ — הכפתור מרכז את האייקון בלבד */
#gm-sidebar.collapsed .gm-toggle-btn {
    justify-content: center;
    gap: 0;
}

/* ── Tooltip על אייקוני הניווט במצב מכווץ ──────────── */
#gm-sidebar.collapsed .gm-nav-item {
    position: relative;
}

#gm-sidebar.collapsed .gm-nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    inset-inline-start: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-bg-surface);
    color: var(--color-text);
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-4);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-shadow: var(--shadow-md);
    z-index: 300;
}

#gm-sidebar.collapsed .gm-nav-item:hover::after {
    opacity: 1;
}

/* ============================================================
   MAIN — תוכן הדף
   ============================================================ */
#gm-main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-primary) 30%, transparent) transparent;
}

#gm-main::-webkit-scrollbar { width: 4px; }
#gm-main::-webkit-scrollbar-track { background: transparent; }
#gm-main::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: var(--radius-sm);
}

/* ============================================================
   RESPONSIVE — מובייל: sidebar נסגר לגמרי
   ============================================================ */
@media (max-width: 768px) {
    #gm-sidebar {
        position: absolute;
        top: 0;
        height: 100%;
        z-index: 50;
        transform: translateX(0);
        transition: transform var(--transition-speed) ease,
                    width var(--transition-speed) ease;
    }

    [dir="rtl"] #gm-sidebar {
        right: 0;
        transform: translateX(100%);
    }

    [dir="ltr"] #gm-sidebar {
        left: 0;
        transform: translateX(-100%);
    }

    #gm-sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    #gm-sidebar-overlay {
        display: block;
    }
}

/* ===== Sidebar nav items ===== */
.gm-nav-active {
    background: var(--color-primary);
    color: var(--text-on-primary);
}
.gm-nav-default {
    color: var(--text-secondary);
}
.gm-nav-default:hover {
    background: var(--bg-hover);
    color: var(--color-primary);
}
.gm-sidebar-toggle-btn {
    color: var(--text-muted);
}
.gm-sidebar-logout {
    color: var(--text-muted);
}
.gm-sidebar-logout:hover {
    background: var(--bg-danger);
    color: var(--color-danger);
}

/* ===== כפתורי Header ===== */
.gm-header-btn {
    color: var(--text-muted);
}
.gm-header-btn:hover {
    background: var(--bg-hover);
    color: var(--color-primary);
}
.gm-header-logout {
    color: var(--text-muted);
}
.gm-header-logout:hover {
    background: var(--bg-danger);
    color: var(--color-danger);
}

/* Overlay למובייל */
#gm-sidebar-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 40;
}

/* ============================================================
   SIDEBAR — רכיבים פנימיים (ללא Tailwind)
   ============================================================ */

/* לוגו */
.gm-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    overflow: hidden;
    flex-shrink: 0;
}
.gm-brand-icon {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.gm-brand-icon .material-symbols-outlined { font-size: 22px; font-weight: 700; }
.gm-brand-name {
    font-size: var(--fs-8);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    white-space: nowrap;
}
.gm-brand-sub {
    font-size: var(--fs-3);
    color: var(--text-muted);
    white-space: nowrap;
}
#gm-sidebar.collapsed .gm-brand-text { opacity: 0; width: 0; overflow: hidden; }

/* ניווט */
.gm-nav {
    flex: 1;
    padding: 0 var(--space-3);
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.gm-nav::-webkit-scrollbar { display: none; }

.gm-nav-section-label {
    font-size: 10px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-4) var(--space-3) var(--space-2);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
}
#gm-sidebar.collapsed .gm-nav-section-label { opacity: 0; }

/* Badge התראות */
.gm-nav-badge {
    margin-inline-start: auto;
    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
    color: var(--color-primary);
    font-size: 10px;
    font-weight: var(--fw-bold);
    padding: 2px 6px;
    border-radius: 99px;
    white-space: nowrap;
}
#gm-sidebar.collapsed .gm-nav-badge { display: none; }

/* כפתור כיווץ */
.gm-collapse-wrap {
    padding: var(--space-2) var(--space-4);
}
.gm-toggle-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    background: none;
    cursor: pointer;
    font-size: var(--fs-4);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
}
.gm-toggle-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
#gm-sidebar.collapsed .gm-toggle-btn { justify-content: center; gap: 0; }

/* תחתית */
.gm-sidebar-foot {
    padding: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-shrink: 0;
}
.gm-dispatch-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-4);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: filter 0.15s;
    white-space: nowrap;
    overflow: hidden;
}
.gm-dispatch-btn:hover { filter: brightness(1.1); }
#gm-sidebar.collapsed .gm-dispatch-btn { justify-content: center; gap: 0; }