:root {
    /* המשתנים שהיו חסרים וגרמו לשגיאה */
    --bg-white: #ffffff;
    --text-dark: #1e293b;
    --border-color: #e2e8f0;

    /* שאר המשתנים שלך */
    --card-bg: #ffffff;
    --primary-blue: #32485a;
    --gap-red-bg: #fef2f2;
    --gap-red-text: #b91c1c;

  --break-sm: 600px;
  --break-md: 768px;
  --break-lg: 900px;
  --break-xl: 1200px;


}

/* בסיס כללי */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* במקום זאת */
html, body {
    min-height: 100vh;
    overflow-x: auto;        /* לא חוסמים גלילה אופקית */
    max-width: 100vw;        /* מונע גלישה מעבר ל-viewport */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* מיכל בורר המצבים - זהה ל-lang-switcher-group */
.theme-switcher-group {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-white);
    height: 32px; /* גובה אחיד */
    align-items: center;
}

.theme-btn {
    padding: 2px 12px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    background: transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* כפתור פעיל - צבע כחול */
.theme-btn.active {
    background: var(--primary-blue);
    cursor: default;
}

/* עיצוב האימוג'י כשהוא פעיל (כדי שלא ייראה מוזר על כחול) */
.theme-btn.active {
    filter: brightness(1.2);
}

.theme-btn:not(.active):hover {
    background: rgba(0, 0, 0, 0.05);
}

/* התאמה למצב כהה */
body.theme-dark .theme-switcher-group {
    background: #0b1120;
    border-color: #334155;
}
/* מצבי תצוגה: לייט / דארק */
body.theme-light {
    background: linear-gradient(135deg, #4866ec 0%, #5a88a8 100%);
    color: #111827;
}
/* ─────────────────────────────────────────────
   NAVBAR
────────────────────────────────────────────── */
.navbar {
    background: #ffffff;
    padding: 0 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    z-index: 1050;
    height: 44px;
}
body { padding-top: 44px; }
.navbar-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    margin-left: 0;
}
.navbar a {
    text-decoration: none;
}

/* כפתור HOME */
.btn-home {
    text-decoration: none;
    font-size: 24px; /* גודל האימוג'י */
    padding: 5px 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-home:hover {
    background-color: rgba(102, 126, 234, 0.1);
    transform: scale(1.1);
}
.btn-back {
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 8px;
    border: none;
    background: none;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-back:hover {
    background-color: rgba(102, 126, 234, 0.1);
    color: #3b82f6;
    transform: scale(1.1);
}
/* פרטי משתש */
.navbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-info {
    text-align: right;
    white-space: nowrap;
}
.user-name {
    font-weight: 600;
    color: #333;
    font-size: 13px;
    white-space: nowrap;
}
.user-role {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
}
.btn-logout {
    padding: 8px 16px;
    /* גרדיאנט אדום-כתום כמו בתמונה */
    background: linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(255, 95, 109, 0.3);
}

.btn-logout:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(255, 95, 109, 0.4);
    filter: brightness(1.1);
}

/* מיכל בורר השפות */
.lang-switcher-group {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden; /* גורם לפינות המעוגלות לחתוך את הכפתורים בפנים */
    background: var(--bg-white);
}

.lang-btn {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--text-dark);
    transition: all 0.2s ease;
    outline: none;
}

/* כפתור פעיל - הצבע הכחול של המותג שלך */
.lang-btn.active {
    background: var(--primary-blue);
    color: #ffffff;
    pointer-events: none; /* שלא יהיה אפשר ללחוץ על השפה שכבר פעילה */
}

/* כפתור לא פעיל - אפקט ריחופ עדין */
.lang-btn:not(.active):hover {
    background: rgba(0, 0, 0, 0.05);
}

/* התאמה למצב כהה */
body.theme-dark .lang-switcher-group {
    background: #0b1120;
    border-color: #334155;
}

body.theme-dark .lang-btn:not(.active):hover {
    background: rgba(255, 255, 255, 0.1);
}

.container {

    max-width: 100%;
    width: 100%;
    margin: 20px auto;
    padding: 0 16px 30px;

}

.page-header {
    background: white;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.page-header h1 {
    color: #333;
    font-size: 32px;
}


body .project-card {

    width: 100%;
    max-width: 100%;

    display: flex;
    flex-direction: column;
    background: var(--bg-white) !important;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden; /* חשוב כדי שהכותרת לא תצא מהפינות המעוגלות */


    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--primary-blue); /* משתמש בכחול מהבייס */
}

.project-title-inline {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}
.project-code-inline {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    padding-inline-start: 12px;
    border-inline-start: 2px solid rgba(255,255,255,0.3);
    margin-inline-start: 12px;
}

/* ── Textarea ── */
.textarea-modern {
    width: 100%;
    min-height: 130px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 1rem;
    line-height: 1.6;
    font-family: inherit;
    resize: vertical;
    transition: border-color .2s, box-shadow .2s;
    direction: rtl;
    box-sizing: border-box;
}
.textarea-modern:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* ── Submit (send report) button ── */
#addCommentBtn {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 14px 48px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(5,150,105,.35);
    transition: transform .18s ease, box-shadow .18s ease;
}
#addCommentBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(5,150,105,.45);
}

/* ── Section headers ── */
.section-header {
    background: var(--primary-blue);
    color: #fff;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    margin-bottom: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: font-size 0.15s ease, font-weight 0.1s ease;
}
.section-header:hover {
    font-size: 1.07rem;
    font-weight: 800;
}

/* ── Navbar logo link & nav buttons ── */
.navbar-logo-link {
    display: inline-flex; align-items: center; flex-shrink: 0;
}
.nav-link-btn {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: 6px 12px; border-radius: 8px;
    font-size: .8rem; font-weight: 600;
    color: #334155; text-decoration: none;
    background: #f1f5f9; border: 1px solid #e2e8f0;
    transition: background 0.15s;
}
.nav-link-btn:hover { background: #e2e8f0; color: #1e293b; }

/* ── Project switcher (always visible in navbar) ── */
.navbar-project-wrap {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 220px;
    margin: 0 8px;
}
.navbar-project-wrap select {
    width: 100%;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 13px;
    background: white;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 28px;
}

/* ── Lang + theme (always visible in navbar) ── */
.navbar-quick-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Navbar collapse (desktop = flex row) ── */
.navbar-collapse {
    display: flex; align-items: center;
    gap: 15px; flex-wrap: nowrap;
    flex: 0 1 auto;
    width: auto;
    margin-right: 0;
    justify-content: flex-end;
}
.navbar-collapse .nav-logout-form { margin-left: 0; }

/* ── Hamburger button (hidden on desktop) ── */
.navbar-toggler {
    display: none;
    flex-direction: column; justify-content: center; gap: 5px;
    background: transparent; border: 1px solid #cbd5e1;
    border-radius: 8px; padding: 7px 9px; cursor: pointer;
    flex-shrink: 0;
    margin-right: 0;
}
.navbar-toggler span {
    display: block; width: 20px; height: 2px;
    background: #334155; border-radius: 2px;
    transition: all 0.2s;
}
.navbar-toggler.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggler.open span:nth-child(2) { opacity: 0; }
.navbar-toggler.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Desktop: nav-links-row and nav-controls-row are just inline ── */
.nav-links-row   { display: contents; }
.nav-controls-row { display: contents; }

/* ── Responsive navbar ── */
@media (max-width: 1024px) {
    /* Body offset: 2-row compact mobile navbar ~64px tall */
    body { padding-top: 64px; }

    .navbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 4px 10px;
        height: auto;
        row-gap: 3px;
        gap: 0;
    }

    /* ── Row 1: logo/back (left) + hamburger (right) ── */
    .navbar-left {
        order: 1;
        flex: 1 1 auto;
        gap: 4px;
        height: auto;
        padding: 0;
    }
    .header-logo { height: 24px; max-width: 80px; object-fit: contain; }
    .btn-back { font-size: 12px; padding: 2px 5px; }

    .navbar-toggler {
        order: 2;
        display: flex;
        flex-shrink: 0;
        height: auto;
        padding: 5px 7px;
        align-self: center;
    }
    .navbar-toggler span { width: 16px; height: 2px; }

    /* ── Row 2: project switcher + lang/theme ── */
    .navbar-project-wrap {
        order: 3;
        flex: 1 1 auto;
        min-width: 60px;
        max-width: none;
        margin: 0 6px 0 0;
    }
    .navbar-project-wrap select { font-size: 11px; padding: 2px 4px; height: 24px; }

    .navbar-quick-tools {
        order: 4;
        flex-shrink: 0;
        gap: 4px;
    }
    .navbar-quick-tools .lang-switcher-group,
    .navbar-quick-tools .theme-switcher-group { height: 24px; border-radius: 12px; }
    .navbar-quick-tools .lang-btn { padding: 1px 6px; font-size: 10px; }
    .navbar-quick-tools .theme-btn { padding: 0 5px; font-size: 11px; }

    /* ── Hamburger dropdown (user + logout only) ── */
    .navbar-collapse {
        order: 5;
        display: none;
        position: fixed; top: 62px; left: 10px;
        width: 220px;
        max-height: calc(100vh - 70px);
        background: rgba(15, 23, 42, 0.92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        flex-direction: column; align-items: stretch;
        padding: 0 0 16px; gap: 0;
        box-shadow: 0 8px 32px rgba(0,0,0,0.45);
        border: 1px solid rgba(255,255,255,0.13);
        border-radius: 14px;
        z-index: 1049;
        overflow-y: auto;
    }
    .navbar-collapse.open { display: flex; }

    .navbar-collapse .user-info {
        padding: 14px 18px 12px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        background: rgba(255,255,255,0.06);
        text-align: right;
        border-radius: 14px 14px 0 0;
    }
    .navbar-collapse .user-info .user-name { font-size: 15px; color: #f1f5f9; }
    .navbar-collapse .user-info .user-role  { font-size: 12px; color: #94a3b8; }

    .navbar-collapse .nav-logout-form { padding: 10px 16px 0; }
    .navbar-collapse .btn-logout { width: 100%; justify-content: center; }
}

/* Dark mode navbar */
body.theme-dark .navbar { background: #0f172a; }
body.theme-dark .navbar-collapse { background: rgba(5, 10, 25, 0.94); border-color: rgba(255,255,255,0.1); }
body.theme-dark .navbar-collapse .user-info { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body.theme-dark .navbar-collapse .nav-links-row { border-color: rgba(255,255,255,0.07); }
body.theme-dark .navbar-collapse .nav-links-row .nav-link-btn:first-child { border-color: rgba(255,255,255,0.07); }
body.theme-dark .nav-link-btn { background: #334155; border-color: #475569; color: #e2e8f0; }
body.theme-dark .nav-link-btn:hover { background: #475569; }
body.theme-dark .navbar-toggler { background: transparent; border-color: rgba(255,255,255,0.25); }
body.theme-dark .navbar-toggler span { background: #e2e8f0; }
body.theme-dark .navbar-logo-link { border-color: #334155; }
body.theme-dark .navbar-project-wrap select { background: #1e293b; color: #e2e8f0; border-color: #475569; }

.header-logo {
    height: 40px;
    width: auto;
    display: block;
}
.page-title h2 {
    color: var(--text-dark); /* משתנה אוטומטית ללבן במצב כהה */
    margin-bottom: 5px;
}
.page-title p {
    color: var(--text-dark); /* משתנה אוטומטית במצב כהה */
    opacity: 0.8;
    font-size: 14px;
}

/* הכותרת הכהה שאהבת */
.card-top {
    background-color: #334155 !important; /* אפור Slate כהה ומקצועי */
    color: #ffffff !important;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
}
.card-body {
    padding: 20px;
    flex-grow: 1;
}
.project-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}
.card-actions {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    padding: 15px;
    background: rgba(0,0,0,0.02); /* רקע אפרפר עדין מאוד מתחת לכפתורים */
    border-top: 1px solid var(--border-color);
}

.btn-dash {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;

    /* מראה ה-"פרטים על": */
    background: var(--bg-white) !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
}
.btn-dash:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}
.btn-blue, .btn-green, .btn-orange, .btn-outline {
    background: var(--bg-white) !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
}
.table-basic {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.table-basic th {
    background: #f8fafc;
    color: #334155;
    padding: 10px;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    text-align: right;
}
.table-basic tbody tr:hover {
    background: #f1f5f9;
}
body.theme-dark .table-basic tbody tr:hover {
    background: #1e293b;
}
body.theme-dark .table-basic td {
    color: #e2e8f0;
}
.worker-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    border: 1px solid #e6e6e6;
}
.header-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #2196F3;
    margin-bottom: 20px;
    padding-bottom: 12px;
}
.contact-list-table {
    width: 100%;
    min-width: 600px;
    table-layout: auto;
    border-collapse: collapse;
    margin-top: 10px;
}
.contact-list-table th,
.contact-list-table td {
    border-bottom: 1px solid #eee;
    padding: 12px;
    text-align: right;
    font-size: 14px;
}
.contact-list-table th {
    background: #f8f9fa;
    font-weight: bold;
    color: #444;
}
.contact-list-table td {
    color: #1e293b;
}
body.theme-dark .worker-container {
    background: #0f172a;
    border-color: #1e293b;
}
body.theme-dark .contact-list-table th {
    background: #162136;
    color: #e5e7eb;
}
body.theme-dark .contact-list-table td {
    color: #e2e8f0;
    border-color: #2a3550;
}
body.theme-dark .contact-list-table tbody tr:hover td {
    background: #1e293b;
}
.btn-print {
    background-color: #6c757d; /* אפור מקצועי */
    color: #ffffff !important;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s;
}
.btn-print:hover {
    opacity: 0.9;
    color: #ffffff !important;
}
@media print {
    .btn-print, .no-print, .btn-dash, .theme-switch {
        display: none !important;
    }
    body { background: white !important; }
}
/* wrapper רספונסיבי - גרסה אחת בלבד */
.project-switcher {
    margin: 0 4px;
    flex-shrink: 1;
    min-width: 0;
}
.project-switcher select {
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 13px;
    min-width: 120px;
    max-width: 200px;
    width: 100%;
    background: white;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.card {
    display: grid;
    background: #ffffff;
    border-radius: 10px;
    padding: 24px;
    gap: 9px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.form-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    /* הגובה ייקבע לפי התוכן, אבל יהיה מינימום התחלתי */
    min-height: fit-content;
    padding: 0 !important;
    width: 100%;
}

.section-content {
padding: 0; /* כדי שהטבלה תיצמד לקצוות */
color: var(--text-dark);
width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse;
}
.page-title h2 {
    color: var(--text-dark) !important;
}
.page-title p {
    color: var(--text-dark);
    opacity: 0.8;
}
.section-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 6px;
    border-bottom: 3px solid #32485a;
}
.btn-outline {
    background: white;
    border: 1px solid #2196F3;
    color: #2196F3;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: .2s;
}
.btn-outline:hover {
    background: #334155;
    color: white;
}
.form-control, input, select, textarea {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
}

/* טופס טורים על מובייל */
.form-row {
    display: flex;
    gap: 10px;
}
/* כפתור מחיקה אדום בטבלאות */
.remove-row-btn {
    background-color: #ef4444 !important; /* אדום חזק */
    color: white !important;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.remove-row-btn:hover {
    background-color: #dc2626 !important;
}
.resend-invite-btn {
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}
.resend-invite-btn:hover { background-color: #2563eb; }
.resend-invite-btn:disabled { opacity: 0.5; cursor: not-allowed; }


.grid-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    padding: 20px;
}
.check-group {
    display: flex;
    flex-direction: column; /* גורם לכל צ'קבוקס להתחיל שורה חדשה */
    gap: 12px;              /* ריווח נוח בין השורות */
    padding: 15px 20px;     /* ריווח פנימי מהמסגרת */
}
.checkbox-item {
    display: flex;
    align-items: center;    /* יישור אנכי למרכז */
    gap: 10px;              /* רווח בין הריבוע לטקסט */
    font-size: 14px;
    cursor: pointer;
    text-align: right;      /* יישור לימין לעברית */
}
.top-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

#global-message-container {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    min-width: 300px;
}

.alert-toast {
    background: #4CAF50;
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-error-box {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 12px;
    color: #b91c1c;
    font-size: 13px;
}
/* ─────────────────────────────────────────────
   תיקון טבלאות שלא ידרסו את ה-FORM
────────────────────────────────────────────── */
/* האחדת כל סוגי התאים ביומן */
.table-basic td, .log-table td, table.edit-table td {
    vertical-align: middle;
    padding: 10px;
    border: 1px solid #e2e8f0;
    white-space: normal;
    height: auto;
}
/* מניעת רווחים מיותרים ביומן */
.form-section .table-responsive {
padding: 0 !important;
}

table.edit-table, table.log-table {
    width: 100% !important; /* הכרחי כדי שהטבלה תתפרס מקצה לקצה כמו הכותרת */
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* מאפשר גמישות רספונסיבית לעמודות */
  margin: 0 !important;
}
table.edit-table th,
table.edit-table td {
  border: 1px solid #ddd;
  padding: 10px;
/* ביטול הכפייה שמדחיסה את התאים */
  white-space: normal;        /* לא לשמור הכל בשורה אחת */
  overflow: visible;          /* לא לחתוך תוכן */
  text-overflow: unset;       /* לא אליפסות */
  height: auto;               /* לא לנעול גובה תא */

}

.table-responsive,
.table-responsive-wrapper {
    width: 100%;
    margin-bottom: 0; /* מונע רווח מיותר בתחתית הסקשן */
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    display: block;
    border-radius: 0; /* עדיף 0 כאן כי הרדיוס כבר קיים ב-form-section החיצוני */
}
.table-responsive table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse;
}
.dl-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
}
.dl-project-info {
  text-align: right;
}
.dl-logo {
  height: 50px;
  margin-bottom: 10px;
}
.dl-title {
  margin: 0;
  color: #1e293b;
  font-size: 22px;
  font-weight: 700;
}
.dl-meta {
  margin: 5px 0;
  color: #64748b;
  font-size: 13px;
}
.dl-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}
.btn-create-user {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}

/* עיצוב/* =========================================================
   ניהול עיצוב גלובלי לדיווחים וסטטוסים (שינוי כאן ישפיע על כל האתר)
========================================================= */
/* 1. כותרת דף אחידה - מחליפה את ה-Style הידני ששלחת קודם */
.page-title {
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 700;
    color: #2196F3; /* כחול מותג */
    border-right: 4px solid #2196F3;
    padding-right: 15px;
    line-height: 1.2;
}
/* 2. סטטוסים בטבלאות - ניהול צבעים ואייקונים במקום אחד */
.status-signed {
    color: #22c55e !important; /* ירוק */
    font-weight: bold;
}
.status-signed::before {
    content: "✔ ";
}
.status-draft {
    color: #f59e0b !important; /* כתום */
    font-weight: bold;
}
.status-draft::before {
    content: "⏳ ";
}
/* 3. מערכת סינון (Filter Grid) - לשימוש בדוחות */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    padding: 15px;
    align-items: flex-end;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}
.filter-group-wide {
    flex: 2;
    min-width: 200px;
}
.filter-group-wide input { width: 100%; }

/* PDF export bar (reports pages) */
.pdf-bar,
.summary-pdf-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.btn-pdf-all,
.btn-pdf-summary {
    background: #dc2626;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-pdf-all:hover,
.btn-pdf-summary:hover { background: #b91c1c; }
/* Excel export buttons */
.btn-excel-all {
    background: #166534;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-excel-all:hover { background: #14532d; }
.btn-excel-section {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.btn-excel-section:hover { background: #bbf7d0; }
/* Section header row with export button */
.section-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.section-title-bar .section-title { margin: 0; }
/* RGI description cell — truncated */
.rgi-desc-cell {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64748b;
    font-size: 13px;
}
/* Dark mode */
body.theme-dark .btn-excel-all { background: #14532d; }
body.theme-dark .btn-excel-all:hover { background: #166534; }
body.theme-dark .btn-excel-section { background: #14532d; color: #86efac; border-color: #166534; }
body.theme-dark .btn-excel-section:hover { background: #166534; }
body.theme-dark .rgi-desc-cell { color: #94a3b8; }
.btn-pdf-selected {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-pdf-selected:hover { background: #e2e8f0; }
.btn-pdf-selected:disabled { opacity: 0.4; cursor: default; }
.select-all-label {
    font-size: 13px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}
.global-search-note { font-size: 12px; color: #94a3b8; margin-top: 4px; }
.global-result-count { font-size: 13px; color: #475569; margin-bottom: 8px; }

/* Column helpers for report tables */
.col-check  { width: 36px; text-align: center; }
.col-status { width: 110px; }
.col-action { width: 160px; }
.td-date    { font-weight: 600; }

.action-link {
    color: #2196F3;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    margin: 0 5px;
    transition: opacity 0.2s;
}
.action-link:hover {
    opacity: 0.7;
    text-decoration: none;
}



.note-board {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.note-media-upload:hover {
        border-color: #334155;
    }
.preview-grid img {
        width: 65px;
        height: 65px;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
.btn-primary {
    background: #ffffff;
    color: #32485a;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 16px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
}
.btn-sm {
    background: #ffffff;
    color: #32485a;
    border: 1px solid #cbd5e1;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
}
.btn-report {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
}
.btn-report:hover {
    background: #e2e8f0;
    color: #334155;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    background: #334155;
    color: white;
}
.btn-secondary { background: #e2e8f0; color: #475569; border: none; padding: 8px 16px; border-radius: 3px; cursor: pointer; }
.small-label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
    display: block;
}
/* עיצוב כפתורי ההוספה שייראו כמו בתמונה הראשונה */
.btn-add, .add-row-btn {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    float: left; /* מיישר לשמאל כמו בטבלת החומרים */
}
.btn-add:hover { background-color: #e2e8f0 !important; }
/* הערות במצב צפייה */
/* הוסיפי את זה בתוך ה-style של הדף */
#toggleNewComment {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 20px 72px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 6px 28px rgba(37,99,235,0.38);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
#toggleNewComment:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 36px rgba(37,99,235,0.50);
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}
.note-card-new {
    background: #ffffff;
    border-radius: 4px;
    padding: 15px;
    margin-top: 10px;
    border: 1px solid #e2e8f0;
}
.preview-grid img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* ===== Comments UI (global) ===== */
.comments-add {
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
}
.btn-pill {
  border-radius: 50px;
}

/* ===== GLOBAL BUTTON FEEDBACK ===== */

/* Physical press effect — all buttons except toggles */
button:not(:disabled):not(.theme-btn):not(.lang-btn):active,
input[type="submit"]:not(:disabled):active,
a[class*="btn-"]:active {
    transform: scale(0.96) !important;
    opacity: 0.82 !important;
    transition: transform 0.07s ease, opacity 0.07s ease !important;
}

/* Spinner animation */
@keyframes _btn-spin {
    to { transform: rotate(360deg); }
}
.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(100, 116, 139, 0.3);
    border-top-color: #64748b;
    border-radius: 50%;
    animation: _btn-spin 0.65s linear infinite;
    vertical-align: middle;
}
body.theme-dark .btn-spinner {
    border-color: rgba(226, 232, 240, 0.25);
    border-top-color: #e2e8f0;
}

/* Loading state */
.btn-loading {
    cursor: wait !important;
    pointer-events: none !important;
    opacity: 0.72 !important;
}
.btn-dark {
  background: #334155;
  color: #fff;
  border: none;
}
.btn-lg {
  padding: 12px 32px;
  font-weight: 600;
  font-size: 15px;
}
.btn-shadow {
  box-shadow: 0 4px 15px rgba(51, 65, 85, 0.25);
}
.btn-icon-plus {
  font-size: 20px;
  line-height: 0;
}
.new-comment-card {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: none; /* מוסתר כברירת מחדל ומוצג ב-JS */
}

.avatar-circle {
    width: 35px;
    height: 35px;
    background: #1e293b;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-left: 10px;
}
.new-comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f1f5f9;
}

.new-comment-title {
  font-weight: 700;
  color: #1e293b;
}
.new-comment-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hat-selector-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.hat-label {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  white-space: nowrap;
}
.hat-select {
  font-size: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 6px;
  color: #1e40af;
  background: #eff6ff;
  cursor: pointer;
}
.new-comment-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.new-comment-text {
  flex: 1 1 350px;
}

.media-box {
  flex: 0 1 250px;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
}
.media-box label {
  cursor: pointer;
}
.media-box-title {
  font-weight: 700;
  font-size: 13px;
  color: #475569;
}
.preview-grid {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: center;
}
.actions-row {
  margin-top: 25px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.btn-muted {
  background: #f1f5f9;
  color: #475569;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}
.btn-dark-md {
  background: #334155;
  color: #fff;
  border: none;
  padding: 10px 30px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}
/* user section box */
.user-section {
  margin-bottom: 25px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.07);
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.user-section-header {
  background: #334155;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}
.user-section-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-avatar-lg {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.user-section-title {
  font-size: 16px;
  font-weight: 800;
}
.user-section-subtitle {
  font-size: 12px;
  opacity: 0.8;
}
.user-section-badge {
  background: rgba(255,255,255,0.15);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
}
.user-section-body {
  padding: 15px;
  background: #fdfdfd;
}
/* ===== Form submit/actions (global) ===== */
.form-actions {
  border-top: 2px solid #eee;
  padding-top: 25px;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.form-actions-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}
/* Empty state */
.empty-state {
  text-align: center;
  color: #94a3b8;
  padding: 40px;
}
/* עיצוב כרטיסי הערות - הועבר מהדיטייל לבייס */
.comment-card {
    background: var(--card-bg); /* משתמש במשתנה מהבייס */
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,0.1);
}
.comment-meta {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 5px;
}
.comment-text {
    white-space: pre-wrap; /* שומר על ירידות שורה של המשתמש */
    line-height: 1.5;
}
.comment-images {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.comment-images img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}
/* טקסט עמום קטן (במקום סטייל מקומי) */
.text-muted-sm {
    font-size: 11px;
    opacity: 0.7;
}
.comment-text, .note-content {
    white-space: pre-wrap !important;
    word-break: break-word;
    line-height: 1.5;
    font-size: 14px;
    color: var(--text-dark);
}
.comment-input-area {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
}


.note-card {
    width: 100% !important; /* מבטיח רוחב מלא לדיווח הראשי */
    background: gainsboro;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);

    /* זה החלק הכי חשוב לסדר של התגובות בפנים */
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
}

/* Reply container */
.js-reply-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 25px;
    width: 100%;
    padding-top: 10px;
}

.reply-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* שדה הטקסט עצמו */
.js-reply-text {
    flex: 1;
    border-radius: 20px;
    padding: 8px 15px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    outline: none;
}

/* כפתור צירוף תמונה */
.reply-img-btn {
    cursor: pointer;
    font-size: 16px;
    padding: 4px 7px;
    border-radius: 50%;
    color: #64748b;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
}
.reply-img-btn:hover { background: #f1f5f9; color: #2563eb; }

/* תצוגה מקדימה של תמונות בתגובה */
.js-reply-img-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.reply-preview-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

/* תג תפקיד על תגובה */
.comment-role-tag {
    font-size: 10px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 4px;
    padding: 1px 6px;
    margin: 0 4px;
    white-space: nowrap;
    font-weight: 500;
}


/* הקטנת הטקסט בתוך התגובות בלבד */
.message-bubble .comment-text {
    font-size: 13px !important; /* פונט קטן יותר מהערה ראשית */
    line-height: 1.3 !important;
}

.message-bubble .small-label {
    font-size: 11px !important; /* שם המשתמש בתגובה קטן יותר */
}

.message-bubble .text-time {
    font-size: 10px !important; /* השעה בתגובה קטנה יותר */
}
/* הודעה של כותב ההערה (ירוק) - נצמדת לימין לקו */
.message-mine {
    align-self: flex-start !important; /* ב-RTL זה ימין */
    background-color: #dcf8c6 !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* הודעה של מישהו אחר (לבן) - גם היא נצמדת לימין לקו */
.message-others {
    align-self: flex-start !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* מיכל התגובות המאוזן */
.replies-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 12px !important;

    /* הזחה קבועה לימין כדי להתאים לקו */
    padding-right: 20px !important;
    padding-left: 0 !important;
    border-right: 2px solid #e2e8f0 !important;
    border-left: none !important;

    /* ביטול הגדרות קודמות שעלולות להפריע */
    margin-right: 10px !important;
    background: #f1f5f9;
}

/* בועות בתוך השרשור */
.replies-container .message-bubble {
    width: fit-content !important;
    max-width: 85% !important;
    font-size: 13px !important;
    padding: 6px 10px !important;

    /* הצמדה לקו הימני */
    align-self: flex-start !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}
/* סידור פנימי של הבועה */
.comment-card-content {
    display: flex !important;
    flex-direction: column !important;
}

.comment-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 15px !important;
    margin-bottom: 4px !important;
}

.text-time {
    font-size: 0.75rem !important;
    color: #667781 !important;
    white-space: nowrap !important; /* מונע מהשעה לרדת שורה */
}

/* הגדלת התמונות בלי לגעת ב-HTML */
/* משחרר את החסימה של הדיב העוטף */
.image-wrapper {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
}
/* מוודא שהדיב העוטף לא חונק את התמונה */
.image-wrapper {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 4px;
}

/* הסטייל של התמונה - מוגדל ומעוצב */
.img-thumbnail-65.clickable-preview {
    width: 120px !important; /* הגודל שרצית */
    height: 120px !important;
    object-fit: cover !important;
    border-radius: 10px !important; /* הסטייל הגלובלי שלך */
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    cursor: zoom-in !important;
    transition: transform 0.2s ease-in-out;
}

/* אפקט קטן כשעוברים עם העכבר */
.img-thumbnail-65.clickable-preview:hover {
    transform: scale(1.03);
    border-color: #cbd5e1 !important;
}
/* מגדיל את התמונה עצמה */
.img-thumbnail-65 {
    width: 120px !important; /* הגודל שרצית */
    height: 120px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    display: block !important;
    border: 1px solid #e2e8f0 !important;
}

.img-thumbnail-65:hover {
    transform: scale(1.05); /* אפקט הגדלה קטן כשנוגעים */
}
/* משחרר את הדיב העוטף מהגודל הקטן */


.comment-img-wrapper {
    width: auto !important;
    height: auto !important;
    display: inline-block;
    margin: 4px;
}

.comment-img-wrapper .img-thumbnail-65.clickable-preview {
    width: 120px !important;
    height: 120px !important;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
}

/* ה-Modal עצמו - המסך השחור */
#imgModal {
    display: none;
    position: fixed;
    /* z-index מטורף כדי לעקוף את הנאבבר והכפתורים בנייד */
    z-index: 999999 !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* מונע מהקליק לעבור לאלמנטים שמתחת */
    pointer-events: auto;
}

/* התמונה בתוך ה-Modal */
#imgModalSrc {
    max-width: 95%; /* משאיר קצת שוליים בנייד */
    max-height: 90%;
    border-radius: 4px;
    box-shadow: 0 0 25px rgba(0,0,0,0.5);
    object-fit: contain; /* שומר על פרופורציות התמונה */
}
#id_weather {
    display: block !important;
    width: 100%;
    color: #111827 !important;
    background-color: #f8f9fa !important;
    border: 1px solid #ccc !important;
    min-height: 30px;
}
body.theme-dark #id_weather {
    color: #e2e8f0 !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
/* --- תיקון רספונסיבי לטלפונים (מסכים מתחת ל-600px) --- */
@media (max-width: 600px) {
    /* מקטינים מעט את התמונות כדי שלא יחנקו את הבועה */
    .comment-img-wrapper .img-thumbnail-65.clickable-preview {
        width: 80px !important;
        height: 80px !important;
    }

    /* מקטינים את ההזחה של התגובות כדי להרוויח מקום לטקסט */
    .replies-container {
        padding-right: 12px !important;
        margin-right: 5px !important;
    }

    /* מוודא שהבועה לא בורחת מהמסך */
    .message-bubble {
        max-width: 95% !important;
    }
}
/* --- סטיל מצב צפייה (עבור Detail ו-Reports) --- */
.view-only-mode input,
.view-only-mode textarea,
.view-only-mode textarea,
.view-only-mode select {
    all: unset !important;
    display: inline-block !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    width: auto !important;
}
.view-only-mode .table-responsive {
    width: 100%;
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
}
.view-only-mode .log-table {
    width: 100%;
    border-collapse: collapse;
}
.view-only-mode .log-table th,
.view-only-mode .log-table td {
    padding: 10px;
    border: 1px solid #e2e8f0;
    text-align: center;
    font-size: 13px;
}
/* לוגיקת צביעת פערים ואישור מפקח */
.view-only-mode .approved-cell {
    font-weight: bold;
}
/* 1. מצב תקין - רקע ירוק (רק כשהאישור תואם לסה"כ) */
.view-only-mode td.approved-cell.is-approved {
    background-color: #f0fdf4 !important;
    color: #166534 !important;
}
/* 2. מצב פער - רקע אדום (הוספנו 'td' כדי שהוא ינצח את הירוק) */
.view-only-mode td.approved-cell.is-gap {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #f87171 !important;
}
.view-only-mode .comment-text {
    white-space: pre-wrap;
    line-height: 1.5;
    color: #1e293b;
}
/* Force disabled styling even inside view-only-mode */
.view-only-mode input:disabled,
.view-only-mode select:disabled,
.view-only-mode textarea:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    opacity: 1 !important;          /* כי לפעמים הדפדפן מוריד opacity */
    cursor: not-allowed !important;
    border: 1px solid #e2e8f0 !important;
}

/* הטקסט בתוך ההערה - זה החלק ששומר על האנטרים */
.comment-text, .note-content {
    white-space: pre-wrap !important; /* קריטי: שומר על ירידות שורה */
    word-break: break-word;
    line-height: 1.6;
    font-size: 14px;
    color: var(--text-dark);
    text-align: right; /* יישור לימין לעברית */
}
/* המטא-דאטה (מי כתב ומתי) */
.comment-meta {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
}

/* --- ניווט יום קודם / יום הבא --- */
.day-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}
.btn-day-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color, #2563eb);
    background: transparent;
    border: 1px solid var(--primary-color, #2563eb);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.btn-day-nav:hover:not(.disabled) {
    background: var(--primary-color, #2563eb);
    color: #fff;
}
.btn-day-nav.disabled {
    color: #94a3b8;
    border-color: #cbd5e1;
    cursor: default;
    pointer-events: none;
}
.btn-day-nav .nav-date {
    font-size: 11px;
    opacity: 0.75;
}
.nav-current-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}
body.theme-dark .btn-day-nav { color: #93c5fd; border-color: #93c5fd; }
body.theme-dark .btn-day-nav:hover:not(.disabled) { background: #93c5fd; color: #0f172a; }
body.theme-dark .btn-day-nav.disabled { color: #475569; border-color: #334155; }

/* --- פילים חגים --- */
.holiday-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color);
}
.holiday-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #e8f0fe;
    color: #1a73e8;
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.holiday-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1a73e8;
    flex-shrink: 0;
}
.holiday-pill--minor { background: #fce8e6; color: #d93025; }
.holiday-pill--minor .holiday-dot { background: #d93025; }
.holiday-pill--modern { background: #e6f4ea; color: #188038; }
.holiday-pill--modern .holiday-dot { background: #188038; }
body.theme-dark .holiday-pill { background: #1e3a5f; color: #93c5fd; }
body.theme-dark .holiday-pill .holiday-dot { background: #93c5fd; }
body.theme-dark .holiday-pill--minor { background: #3b1f1e; color: #f28b82; }
body.theme-dark .holiday-pill--minor .holiday-dot { background: #f28b82; }
body.theme-dark .holiday-pill--modern { background: #1e3a2a; color: #81c995; }
body.theme-dark .holiday-pill--modern .holiday-dot { background: #81c995; }

/* --- עיצוב גריד הנתונים בראש היומן --- */
.info-header-grid {
    display: grid;
    /* מחלק לעמודות באופן אוטומטי - לפחות 150 פיקסל לכל אחת */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.02); /* רקע אפרפר עדין מאוד */
    border-bottom: 1px solid var(--border-color);
}
.info-header-item {
    display: flex;
    flex-direction: column;
    gap: 4px;}
.info-header-label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    display: block;
}
.info-header-content {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}
/* עיצוב שדות הקלט (Input) בתוך הגריד */
.info-header-content input,
.info-header-content select {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
}
/* --- שטח התיאור/כותרת מתחת לגריד --- */
.log-description-area {
    padding: 15px;
    background: var(--bg-white);
}
.log-description-area input {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--bg-white);
}
/* טבלת חברי פרויקט */

/* --- עיצוב חכם לתאי הרשאות (perm-cell) --- */

/* 1. כותרות ההרשאות (הטקסט והמספרים) - רקע כחול כהה */
th.perm-cell {
    background-color: #457b9d !important; /* הגוון הכחול של שאר הכותרות */
    color: #ffffff !important;           /* טקסט לבן שיהיה קריא */
    text-align: center;
    vertical-align: middle;
    padding: 8px 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* מסגרת עדינה להפרדה */
    font-size: 11px;
    font-weight: 600;
    white-space: normal; /* מאפשר לטקסט ארוך לרדת שורה */
}

/* 2. תאי הצ'קבוקסים בתוך הטבלה - רקע שקוף/לבן */
td.perm-cell {
    text-align: center;
    vertical-align: middle;
    background-color: transparent !important; /* מונע מהכחול להיכנס לשורות המשתמשים */
    border: 1px solid #e2e8f0 !important;
}

/* 3. הגדלת הצ'קבוקס בתוך התא לנוחות לחיצה */
.perm-cell input[type="checkbox"] {
    cursor: pointer;
    transform: scale(1.5);
}

/* 4. תיקון רוחב הטבלה למניעת "חורים לבנים" */
table.log-table,
table.edit-table {
    width: 100% !important;
    border-collapse: collapse;
    margin: 0 !important;
}
.group-header {
    background-color: #f8fafc !important;
}
/* כפתורי הוספה בתוך הטבלה */
.btn-add-inline {
    background: #e2e8f0;
    color: #475569;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 10px;
}
.btn-add-inline:hover {
    background: #cbd5e1;
}
/* הודעת 'אין נתונים' בטבלה */
.empty-msg {
    color: #94a3b8;
    font-style: italic;
    padding: 20px !important;
}
/* --- הוספה בטוחה: גריד חדש לעריכת פרויקט --- */
.project-info-grid {
    display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));    gap: 20px;
    padding: 20px;
}
/* הגדרת השדות בתוך הגריד */
.project-info-grid .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* תוויות השדות */
.project-info-grid .form-label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}
/* שדות הקלט המודרניים */
.form-control-modern {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-white);
    font-size: 14px;
    transition: border-color 0.2s;
}
input[type="date"].form-control-modern,
input[type="date"] {
    direction: ltr;
    cursor: pointer;
    text-align: start;
}
.form-control-modern:focus {
    border-color: var(--primary-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.role-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    margin-top: 4px;
}
.row-note-btn-label {
    font-size: 10px;
    color: #64748b;
    margin-right: 2px;
    pointer-events: none;
    white-space: nowrap;
}
.disc-badge-sm {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    color: #0369a1;
    margin: 1px 2px;
}
.cell-right { text-align: right !important; }
.tag-yes {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    border-radius: 4px;
    padding: 1px 6px;
}
.tag-no {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #b91c1c;
    background: #fee2e2;
    border-radius: 4px;
    padding: 1px 6px;
}
body.theme-dark .tag-yes { background: #14532d; color: #86efac; }
body.theme-dark .tag-no  { background: #450a0a; color: #fca5a5; }
.sticky-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px;
    border-top: 2px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    z-index: 10;
}
.top-actions{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:flex-end;
    margin: 10px 0 16px;
    flex-wrap:wrap;
}
.top-actions label{font-size:12px;color:#555;}
.top-actions select{padding:6px 10px;border:1px solid #ddd;border-radius:8px;}
.projects-grid,
.cards-grid,
.row,
.grid {
  width: 100%;
  max-width: 100%;
    display:flex;
    flex-direction: column;
    gap:40px;
}
.dash-grid{
       display:flex;
    flex-direction: column;
    gap:20px;
}

body.theme-dark {
    background: #020617;
    color: #e5e7eb;
}
body.theme-dark .btn-theme {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}
body.theme-dark .navbar {
    background: #0b1120;
    box-shadow: 0 2px 10px rgba(15,23,42,0.7);
}
body.theme-dark .navbar-brand {
    color: #a5b4fc;
}
body.theme-dark .btn-home {
    color: #a5b4fc;
}
body.theme-dark .btn-home:hover {
    border-color: #a5b4fc;
    background: rgba(129, 140, 248, 0.12);
}
body.theme-dark .user-name {
    color: #e5e7eb;
}
body.theme-dark .user-role {
    color: #9ca3af;
}
body.theme-dark .page-header {
    background: #0f172a;
    box-shadow: 0 4px 18px rgba(15,23,42,0.8);
}
body.theme-dark .page-header h1 {
    color: #e5e7eb;
}
body.theme-dark .btn-dash,
body.theme-dark .btn-blue,
body.theme-dark .btn-green,
body.theme-dark .btn-orange {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}
body.theme-dark .project-switcher select {
    background: #020617;
    border-color: #4b5563;
    color: #e5e7eb;
}
body.theme-dark .card {
    background: #0f172a;
    box-shadow: 0 2px 12px rgba(15,23,42,0.8);
}
body.theme-dark .table-basic th {
    background: #162136;
    color: #e5e7eb;
}
body.theme-dark .btn-logout {
    background-color: #fb7185;
}
body.theme-dark .btn-logout:hover {
    background-color: #f97373;
}
body.theme-dark .form-control,
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: #020617 !important;
    color: #e5e7eb !important;
    border-color: #3b4252 !important;
}
body.theme-dark input:disabled,
body.theme-dark select:disabled,
body.theme-dark textarea:disabled,
body.theme-dark .lock-field {
    background: #1e293b !important;
    color: #64748b !important;
}
body.theme-dark .btn-outline {
    background: transparent;
    border-color: #8ab4ff;
    color: #8ab4ff;
}
body.theme-dark .btn-outline:hover {
    background: #8ab4ff;
    color: #0f172a;
}
body.theme-dark .alert-toast {
    background: #22c55e;
  }
body.theme-dark .table-responsive {
    background: #0f172a;
    border-color: #334155;
}
body.theme-dark .page-title {
    color: #60a5fa;
    border-right-color: #60a5fa;
}
body.theme-dark .filter-group label {
    color: #9ca3af;
}
body.theme-dark .status-signed { color: #4ade80 !important; }
body.theme-dark .status-draft { color: #fbbf24 !important; }
body.theme-dark .comment-card { background: #1e293b; color: #e5e7eb; }
body.theme-dark .new-comment-card { background: #1e293b; border-color: #334155; }
body.theme-dark .new-comment-title { color: #e2e8f0; }
body.theme-dark .note-card {
    background: #1e293b;
    border-color: #334155;
}
body.theme-dark .comment-text { color: #e5e7eb; }
body.theme-dark .info-header-grid {
    background: rgba(255, 255, 255, 0.03);
}
body.theme-dark .group-header {
    background-color: #1e293b !important;
}

/* ═══════════════════════════════════════════════════
   DARK MODE — COMPLETE IMPLEMENTATION
   ═══════════════════════════════════════════════════ */

/* 1. Variable override — cascades to every element using var() */
body.theme-dark {
    --bg-white:     #0f172a;
    --card-bg:      #0f172a;
    --border-color: #1e293b;
    --text-dark:    #e2e8f0;
}

/* 2. Elevation: body(#0b1120) → card(#0f172a) → nested(#1e293b) */
body.theme-dark .report-card,
body.theme-dark .user-section {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    color: #e2e8f0;
}
body.theme-dark .user-section-body,
body.theme-dark .note-card-new {
    background: #1e293b;
    border-color: #1e293b;
}
body.theme-dark .filter-bar {
    background: #1e293b;
    border-color: #1e293b;
}
body.theme-dark .sticky-actions {
    background: #0f172a;
    border-top-color: #334155;
}

/* 3. Buttons */
body.theme-dark .btn-primary {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155 !important;
}
body.theme-dark .btn-primary:hover {
    background: #334155;
    color: #ffffff;
    box-shadow: none;
}
body.theme-dark .btn-sm {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
}
body.theme-dark .btn-sm:hover {
    background: #334155;
    color: #ffffff;
}
body.theme-dark .btn-secondary {
    background: #1e293b;
    color: #94a3b8;
    border: none;
}
body.theme-dark .btn-muted {
    background: #1e293b;
    color: #94a3b8;
}
body.theme-dark .btn-add,
body.theme-dark .add-row-btn {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
body.theme-dark .btn-add:hover,
body.theme-dark .add-row-btn:hover {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}
body.theme-dark .btn-add-inline {
    background: #1e293b;
    color: #94a3b8;
}
body.theme-dark .btn-add-inline:hover { background: #334155; }
body.theme-dark .btn-create-user {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

/* 4. Labels and badges */
body.theme-dark .role-badge {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
body.theme-dark .small-label { color: #64748b; }
body.theme-dark .section-title {
    border-bottom-color: #334155;
    color: #e2e8f0;
}

/* 5. Form controls */
body.theme-dark .form-control-modern {
    background: #020617;
    border-color: #334155;
    color: #e2e8f0;
}
body.theme-dark .form-control-modern:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.15);
}
body.theme-dark .media-box {
    background: #1e293b;
    border-color: #334155;
}
body.theme-dark .media-box-title {
    color: #94a3b8;
}

/* 6. Static contrast rule: functional status colors ALWAYS keep white text */
body.theme-dark .bg-green,
body.theme-dark .bg-orange,
body.theme-dark .bg-late { color: #ffffff !important; }

/* 7. Summary/reports second style block */
body.theme-dark .report-card { background: #0f172a !important; }
body.theme-dark tr:nth-child(even) { background: rgba(255,255,255,0.02); }

/* 8. View-only approved cells */
body.theme-dark .view-only-mode td.approved-cell.is-gap {
    background-color: #450a0a !important;
    color: #fca5a5 !important;
    border: 1px solid #7f1d1d !important;
}
body.theme-dark .view-only-mode td.approved-cell.is-approved {
    background-color: #052e16 !important;
    color: #86efac !important;
}

/* 9. Recent logs filter bar + pagination */
.logs-filter-bar { background: #f1f5f9; }
body.theme-dark .logs-filter-bar {
    background: #1e293b !important;
}
body.theme-dark .logs-filter-bar span {
    color: #e2e8f0;
}
.logs-page-btn {
    background: #f1f5f9;
    border: 1px solid #ddd;
    color: #475569;
}
body.theme-dark .logs-page-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* 9. Table rows — log-table and edit-table */
body.theme-dark .log-table td,
body.theme-dark .edit-table td,
body.theme-dark table td,
body.theme-dark table th {
    border-color: #1e293b !important;
    color: #e2e8f0;
}
body.theme-dark .log-table tr,
body.theme-dark .edit-table tr {
    background: transparent;
}

/* התאמה לטלפונים (רספונסיביות) */
@media (max-width: 768px) {
    .project-header {
        flex-direction: column; /* הלוגו יהיה מעל הטקסט */
        text-align: center;
        gap: 15px;
    }

    .page-title {
        text-align: center !important;
    }
}
@media (max-width: 768px) {
    .form-row {
        flex-direction: column !important;
    }
}
@media (max-width: 900px) {
    .container {
        padding: 0 12px 30px;
        margin-top: 20px;
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-header h1 { font-size: 24px; }
    .projects-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .project-switcher select { min-width: 160px; font-size: 13px; }
    .container { padding: 0 10px 24px; }
}
@media (max-width: 768px) {
    .section-title {
        font-size: 18px;
    }
    .card {
        padding: 18px;
    }
    .table-basic th,
    .table-basic td {
        font-size: 13px;
        padding: 8px;
    }
}
@media (max-width: 700px) {
  table.edit-table {
    min-width: 600px;
  }
}
@media (max-width: 768px) {
  .dl-header {
    flex-direction: column;
    align-items: stretch;
  }
  .dl-actions {
    justify-content: flex-start;
  }
}
@media print {
    .view-only-mode .top-actions,
    .navbar,
    #themeToggle,
    .btn {
        display: none !important;
    }
    .view-only-mode .container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
}
@media (max-width: 900px) {
    .project-info-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   RECENT LOGS — extracted from inline + responsive
   ============================================================ */
.logs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}
.logs-header h3 { margin: 0; }

/* extend existing .logs-filter-bar (background already set above) */
.logs-filter-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px 10px;
    border-radius: 8px;
}
.logs-filter-label { font-size: 12px; font-weight: bold; }
.logs-filter-bar input[type="date"] {
    padding: 3px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
}
.logs-filter-apply {
    background: #3b82f6; color: white; border: none;
    padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 11px;
}
.logs-filter-reset {
    background: none; border: none; color: #64748b;
    cursor: pointer; font-size: 11px; text-decoration: underline;
}

.logs-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 5px;
    flex-wrap: wrap;
    gap: 8px;
}
.logs-count-label { font-size: 12px; color: #666; }

#table-pagination { display: flex; gap: 15px; align-items: center; direction: ltr; }
#pageIndicator    { font-size: 12px; font-weight: bold; min-width: 70px; text-align: center; }

/* extend existing .logs-page-btn (colors already set above) */
.logs-page-btn { cursor: pointer; border-radius: 4px; padding: 2px 8px; }

#logsTable thead tr  { background: #f8fafc; }
#logsTable th        { padding: 10px; text-align: right; }
#logsTable th.col-date   { width: 110px; }
#logsTable th.col-status { text-align: center; width: 90px; }
#logsTable th.col-actions{ text-align: left;  width: 120px; }
#logsTable .log-row  { border-bottom: 1px solid #eee; }
#logsTable td        { padding: 10px; }
#logsTable td.col-date   { font-weight: bold; }
#logsTable td.col-title  { font-size: 13px; }
#logsTable td.col-status { text-align: center; }
#logsTable td.col-actions{ text-align: left; }
.log-status-signed { color: #16a34a; font-size: 11px; font-weight: bold; }
.log-status-draft  { color: #ca8a04; font-size: 11px; }
.logs-actions-cell { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.logs-view-link    { color: #3b82f6; text-decoration: none; font-size: 12px; font-weight: 500; }
.js-pdf-link       { color: #ef4444; text-decoration: none; display: inline-flex; align-items: center; }

#loadMoreContainer { text-align: center; margin-top: 15px; padding: 10px; }
#loadMoreBtn {
    background: #f8fafc; border: 1px solid #cbd5e1; color: #475569;
    padding: 8px 25px; border-radius: 20px; cursor: pointer;
    font-size: 13px; font-weight: bold;
}

/* ============================================================
   WORKER DATABASE — responsive
   ============================================================ */
.filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.filters input[type="text"],
.filters select {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    min-width: 140px;
}

/* ============================================================
   SHARED — horizontal scroll wrapper for both tables
   ============================================================ */
.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll-wrapper > table {
    min-width: 600px;
}

/* ============================================================
   UTILITY — generic helpers used across all pages
   ============================================================ */
.text-muted  { color: #64748b; font-size: 13px; }
.text-xs     { font-size: 11px; color: #94a3b8; }
.btn-group   { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-label  { font-size: 13px; font-weight: 600; display: block; margin-bottom: 4px; color: var(--text-dark); }
.project-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

/* Panel used for "add client / add site / add user" inline forms */
.add-panel {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.add-panel h4   { margin: 0 0 12px 0; font-size: 15px; color: var(--text-dark); }
.panel-footer   { padding: 0 20px 16px; }

/* Inline success / error messages */
.msg-success { padding: 10px 16px; background: #d1fae5; border-radius: 6px; color: #065f46; margin-bottom: 12px; }
.msg-error   { padding: 10px 16px; background: #fef2f2; border-radius: 6px; color: #b91c1c; margin-bottom: 12px; }

/* Worker database — inline edit row controls */
.btn-inline-edit, .btn-inline-save, .btn-inline-cancel, .btn-inline-delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}
.btn-inline-edit:hover   { background: #e0f2fe; }
.btn-inline-save:hover   { background: #dcfce7; }
.btn-inline-cancel:hover { background: #fee2e2; }
.btn-inline-delete       { color: #dc2626; }
.btn-inline-delete:hover { background: #fee2e2; }
body.theme-dark .btn-inline-edit:hover   { background: #0c4a6e; }
body.theme-dark .btn-inline-save:hover   { background: #14532d; }
body.theme-dark .btn-inline-cancel:hover { background: #450a0a; }
body.theme-dark .btn-inline-delete       { color: #f87171; }
body.theme-dark .btn-inline-delete:hover { background: #450a0a; }
.edit-field {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    color: #1e293b;
}
body.theme-dark .edit-field {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
/* tag-inactive dark mode */
body.theme-dark .tag-inactive { color: #64748b; }
/* table header subtitle (e.g. L2, L3 level labels) */
.th-sub {
    font-weight: normal;
    font-size: 11px;
    color: #64748b;
}
body.theme-dark .th-sub { color: #94a3b8; }


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


  .summary-container { padding: 20px; direction: rtl; max-width: 100%; margin: 0 auto; }
  .report-card { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; margin-bottom: 30px; }

  .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 0; }
  .filter-bar .form-group { display: flex; flex-direction: column; gap: 4px; }
  .filter-bar label { font-size: 13px; font-weight: 600; color: #475569; }
  .filter-bar input, .filter-bar .form-control { padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; }
  .filter-bar-wide { flex: 2; min-width: 200px; }
  .filter-bar-wide input { width: 100%; }


table {
width: 100% !important; /* משנה מ-max-content ל-100% */
    min-width: 100% !important;

      border-collapse: collapse;
table-layout: auto; /* עדיף מ-fixed כדי שהעמודות יסתדרו לפי התוכן */
}
  th, td {
    border: 1px solid #eee;
    padding: 12px 5px;
    text-align: center;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 45px; /*    */
  }
  th { background: #40627a; color: white; position: sticky; top: 0; vertical-align: top; }
  tr:nth-child(uneven) { background: #fcfcfc; }

  .section-title { color: #333; border-right: 4px solid #32485a; padding-right: 10px; margin-bottom: 20px; text-align: right; }

  /* {{ L.LBL_NO_LOGS_FOUND }} - "? 100% */
  .col-date   { width: 9%; }
  .col-level  { width: 10%; }
  .col-domain { width: 15%; }
  .col-subject { width: 20%; }
  .col-unit   { width: 8%; }
  .col-qty    { width: 8%; }
  .col-approved { width: 30%; } /*  {{ L.BTN_ADD_MEMBER }}   ? ? */

  .th-stack { display: flex; flex-direction: column; gap: 5px; align-items: center; }
  .th-stack .th-title { font-weight: 700; white-space: nowrap; font-size: 12px; margin-bottom: 2px; }
  .th-stack select.th-select {
    width: 95%;
    padding: 2px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 4px;
    font-size: 11px;
    background: rgba(255,255,255,0.2);
    color: white;
  }
  .th-stack select.th-select option { color: black; }
  .date-link { color: #2196F3; text-decoration: none; font-weight: 600; }


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


    .lock-field {
    background-color: #f1f5f9 !important; /* אפור בהיר */
    color: #64748b; /* טקסט דהוי */
    cursor: not-allowed;
    border: 1px solid #e2e8f0;
}
/* ===== Layout ===== */
 { display: grid; gap: 20px; }

@media (min-width: 1024px) {
    .main-dash-content { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
}



/* ===== Calendar Box & Grid ===== */
.calendar-container { background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; padding: 20px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; }
.cal-dow { font-size: 13px; font-weight: 700; color: #64748b; text-align: center; padding-bottom: 6px; }

/* ===== Day Cell ===== */
.day {
    position: relative; min-height: 64px; padding: 6px; border-radius: 10px; border: 1px solid #eee;
    transition: transform 0.1s, box-shadow 0.1s; text-decoration: none; color: inherit; display: block;
}
.day:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
.day-num { font-weight: 700; font-size: 13px; }

/* Colors */
.bg-green   { background: #e8f5e9; border-color: #c8e6c9; color: #2e7d32; }
.bg-orange  { background: #fff3e0; border-color: #ffe0b2; color: #e65100; }
.bg-late    { background: #e3f2fd; border-color: #bbdefb; color: #1565c0; }
.bg-pending { background: #c4b5fd; border-color: #7c3aed; color: #3b0764; }
.day-empty { background: #fafafa; color: #ccc; border-color: #f0f0f0; cursor: default; }
.day-future { opacity: 0.4; cursor: default; pointer-events: none; }
.day-before-start { opacity: 0.35; cursor: default; pointer-events: none; background: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(0,0,0,.04) 4px, rgba(0,0,0,.04) 8px); }
.is-today  { outline: 2px solid #2196F3; outline-offset: 2px; }

.gap-dot {
    position: absolute; bottom: 6px; right: 6px; width: 8px; height: 8px;
    border-radius: 50%; background: #e53935; border: 1px solid #fff;
}

/* ===== Legend ===== */
.cal-legend {
    display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px;
    font-size: 13px; font-weight: 700; color: #1f2937; background: #f8fafc; padding: 10px; border-radius: 8px;
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.l-box { width: 14px; height: 14px; border-radius: 3px; }
.l-green  { background: #10b981; }
.l-orange { background: #f59e0b; }
.l-blue   { background: #3b82f6; }
.l-red    { background: #e53935; border-radius: 50%; width: 10px; height: 10px; }

@media (max-width: 600px) {
    .day { min-height: 48px; }
    .cal-legend { font-size: 11px; gap: 8px; }
}

/* ===== Calendar Dark Mode ===== */
body.theme-dark .calendar-container {
    background: #0f172a;
    border-color: #1e293b;
}
body.theme-dark .cal-dow {
    color: #94a3b8;
}
body.theme-dark .day {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
body.theme-dark .day:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}
body.theme-dark .day-empty {
    background: #0b1120 !important;
    border-color: #1e293b !important;
    color: #334155 !important;
}
body.theme-dark .is-today {
    outline-color: #60a5fa;
}
/* Status colors — keep vivid hues but darken the fill */
body.theme-dark .bg-green {
    background: #14532d !important;
    border-color: #166534 !important;
    color: #86efac !important;
}
body.theme-dark .bg-orange {
    background: #78350f !important;
    border-color: #92400e !important;
    color: #fde68a !important;
}
body.theme-dark .bg-late {
    background: #1e3a5f !important;
    border-color: #1d4ed8 !important;
    color: #93c5fd !important;
}
body.theme-dark .bg-pending {
    background: #4c1d95 !important;
    border-color: #7c3aed !important;
    color: #e9d5ff !important;
}
body.theme-dark .gap-dot {
    border-color: #1e293b;
}
/* Legend */
body.theme-dark .cal-legend {
    background: #1e293b;
    color: #e2e8f0;
}


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


/* עיצוב הטקסט שמופיע מתחת לצ'קבוקס */
.default-label {
    display: block;
    font-size: 10px;
    color: #3b82f6; /* כחול שמסמל מערכת/דיפולט */
    margin-top: 2px;
    font-weight: 600;
}

/* עיצוב האייקון (!) */
.default-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #94a3b8;
    color: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.default-info-icon:hover {
    background: #64748b;
}

/* הבועה (Popover) */
.default-popover {
    display: none; /* מוסתר כברירת מחדל */
    position: absolute;
    background: #334155;
    color: white;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 11px;
    z-index: 100;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin-top: 5px;
}

/* משולש קטן לבועה */
.default-popover::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 10px;
    border-width: 0 4px 4px 4px;
    border-style: solid;
    border-color: transparent transparent #334155 transparent;
}

/* כשהבועה פתוחה */
.default-popover.is-visible {
    display: block;
}

.calendar-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    direction: ltr;
    margin-bottom: 15px;
}
.calendar-controls-title { margin: 0; }


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


/* ── Mobile-only: existing classes made responsive, no overrides ── */
@media (max-width: 768px) {
    /* Worker DB: already handled in base styles (overflow-x + min-width) */

    /* Recent logs filter bar: wrap to next line instead of overflowing */
    .logs-filter-bar { flex-wrap: wrap; }

    /* Worker DB filters: wrap on small screens */
    .filters { flex-wrap: wrap; }
}


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


/* Supervisor note button & textarea (daily log form) */
.approve-cell { display: flex; align-items: center; gap: 4px; }
.btn-sup-note {
    display: none;
    width: auto;
    height: auto;
    border-radius: 4px;
    border: 1px solid #3b82f6;
    background: #eff6ff;
    color: #3b82f6;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    padding: 3px 8px;
    white-space: nowrap;
}
.btn-sup-note:hover { background: #3b82f6; color: #fff; }
.sup-note-wrap textarea.supervisor-note-input {
    width: 100%;
    font-size: 12px;
    min-height: 40px;
    border: 1px solid #93c5fd;
    border-radius: 4px;
    padding: 4px 6px;
    margin-top: 4px;
    resize: vertical;
    background: #f0f9ff;
}
.sup-note-wrap textarea.supervisor-note-input:disabled {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
}
.presence-radio-group { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; }
.presence-radio-group label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; }

/* ── Inline create panels (project_create, client_list) ─────────────────── */
.select-with-btn { display: flex; gap: 8px; align-items: center; }
.select-with-btn select { flex: 1; }
.btn-new-inline {
    white-space: nowrap; padding: 8px 12px;
    background: #f1f5f9; border: 1px solid #cbd5e1;
    border-radius: 6px; cursor: pointer; font-size: 13px; color: #334155;
}
.btn-new-inline:hover { background: #e2e8f0; border-color: #94a3b8; }
.inline-create-panel {
    display: none; margin-top: 8px; padding: 12px;
    background: #f8fafc; border: 1px dashed #94a3b8; border-radius: 8px;
}
.inline-create-panel.open { display: block; }
.panel-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text-dark); }
.panel-fields { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.panel-field { flex: 1; min-width: 140px; }
.panel-field-label { font-size: 12px; display: block; margin-bottom: 3px; color: #475569; }
.panel-field .form-control-modern { width: 100%; }
.btn-cancel-inline {
    padding: 8px 12px; background: #f1f5f9;
    border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; color: #334155;
}
.btn-cancel-inline:hover { background: #e2e8f0; }
.panel-error { color: #dc2626; font-size: 12px; margin-top: 4px; display: none; }
.panel-error.visible { display: block; }
.btn-delete-row {
    background: #fee2e2; border: 1px solid #fca5a5;
    color: #dc2626; border-radius: 6px;
    padding: 4px 10px; cursor: pointer; font-size: 14px;
}
.btn-delete-row:hover { background: #fecaca; }
.sr-hidden { display: none; }
.row-deleted { opacity: 0.4; pointer-events: none; }
.group-header-cell { text-align: right; }
.form-submit-btn { width: 100%; margin-top: 25px; padding: 15px; }
.setting-hint { display: block; font-size: 11px; color: #94a3b8; font-weight: 400; margin-top: 2px; line-height: 1.4; }

body.theme-dark .btn-new-inline,
body.theme-dark .btn-cancel-inline { background: #1e293b; border-color: #334155; color: #cbd5e1; }
body.theme-dark .btn-new-inline:hover,
body.theme-dark .btn-cancel-inline:hover { background: #334155; }
body.theme-dark .inline-create-panel { background: #0f172a; border-color: #334155; }
body.theme-dark .add-panel { background: #0f172a; border-color: #1e3a5f; }
body.theme-dark .add-panel h4 { color: #f1f5f9; }

/* ── Create-User Modal ──────────────────────────────────────────────────────── */
.cu-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 9999;
    overflow-y: auto;
    padding: 0 16px 40px;
    box-sizing: border-box;
}
.cu-modal-box {
    background: var(--card-bg, #fff);
    color: var(--text-dark, #1e293b);
    max-width: 520px;
    width: 100%;
    margin: 8vh auto 0;
    padding: 24px 20px 20px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.cu-modal-close {
    position: absolute;
    top: 10px;
    left: 10px;
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    color: #64748b;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
}
.cu-modal-close:hover { background: #f1f5f9; color: #1e293b; }
.cu-modal-title { margin: 0 0 16px; font-size: 1.1rem; font-weight: 700; }
.cu-form-group { flex: 1; text-align: right; min-width: 0; }
.cu-form-row { margin-bottom: 12px; }
.cu-form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #475569;
}
.cu-form-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    background: var(--card-bg, #fff);
    color: var(--text-dark, #1e293b);
    transition: border-color 0.15s;
}
.cu-form-input:focus {
    outline: none;
    border-color: #32485a;
    box-shadow: 0 0 0 3px rgba(50,72,90,0.12);
}
.cu-modal-errors {
    color: #c62828;
    font-size: 12px;
    margin: 8px 0;
    text-align: right;
    min-height: 18px;
}
.cu-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

/* Dark mode — controlled by body.theme-dark toggle */
body.theme-dark .cu-modal-box {
    background: #1e293b; color: #f1f5f9;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
body.theme-dark .cu-modal-title { color: #f1f5f9; }
body.theme-dark .cu-form-label  { color: #94a3b8; }
body.theme-dark .cu-form-input  { background: #0f172a; border-color: #334155; color: #f1f5f9; }
body.theme-dark .cu-form-input:focus { border-color: #64748b; }
body.theme-dark .cu-modal-close { color: #94a3b8; }
body.theme-dark .cu-modal-close:hover { background: #334155; color: #f1f5f9; }
body.theme-dark .cu-modal-errors { color: #fca5a5; }

/* Mobile — modal takes full screen below 520px */
@media (max-width: 540px) {
    .cu-modal-overlay { padding: 0; }
    .cu-modal-box {
        margin: 0;
        min-height: 100dvh;
        border-radius: 0;
        padding: 56px 16px 24px;
    }
}

/* ─────────────────────────────────────────────
   AUTH PAGES  (login, password-reset flow)
   Standalone pages — no navbar, no base.html.
   Scoped to avoid conflicts with main-app styles.
────────────────────────────────────────────── */

body.auth-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Shared white card — replaces conflicting .container on password-reset pages */
.auth-card,
.login-container {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 450px;
    text-align: right;
}

/* Center variant (success / info pages) */
.auth-card-center { text-align: center; }
.login-container  { text-align: center; max-width: 400px; }

.auth-card h2,
.login-container h2 { color: #1e293b; margin-bottom: 15px; }

.auth-card p,
.login-container p { color: #64748b; line-height: 1.6; margin-bottom: 10px; }

/* Login header */
.login-header { margin-bottom: 30px; }
.login-icon { font-size: 50px; margin-bottom: 15px; display: block; }
.login-header h1 { color: #1e293b; font-size: 26px; margin-bottom: 8px; }
.login-header p  { color: #64748b; font-size: 14px; margin-bottom: 0; }

/* Form groups */
.auth-card .form-group,
.login-container .form-group { text-align: right; margin-bottom: 20px; }

.auth-card label,
.login-container label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #334155;
    font-size: 14px;
}

/* Scoped inputs — avoids overriding main-app inputs when base.css is loaded */
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.login-container input[type="text"],
.login-container input[type="email"],
.login-container input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    transition: border-color 0.3s;
    box-sizing: border-box;
    margin-top: 6px;
}

.auth-card input:focus,
.login-container input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Primary action button — green gradient */
.btn-login,
.btn-save {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
    text-decoration: none;
    box-sizing: border-box;
}

.btn-login:hover,
.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 176, 155, 0.4);
}

/* "Back to login" outline-button — renamed from .btn-back (conflicts with navbar) */
.auth-btn-back {
    display: inline-block;
    padding: 12px 25px;
    border: 2px solid #667eea;
    color: #667eea;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}
.auth-btn-back:hover { background: #667eea; color: white; }

/* Error / feedback blocks */
.error-message {
    background-color: #fef2f2;
    color: #b91c1c;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid #fee2e2;
}

.error-box {
    background: #fee2e2;
    color: #b91c1c;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
}

/* Icon at top of success / info cards */
.auth-icon         { font-size: 50px; margin-bottom: 20px; }
.auth-icon-success { font-size: 50px; margin-bottom: 20px; color: #4caf50; }

/* Misc */
.link-style       { color: #667eea; text-decoration: none; font-weight: bold; }
.auth-forgot-link { font-size: 13px; color: #667eea; text-decoration: none; }
.auth-link-row    { text-align: right; margin-bottom: 15px; }
.login-footer     { margin-top: 25px; color: #94a3b8; font-size: 12px; }

/* ─────────────────────────────────────────────
   DAILY LOG DETAIL — supervisor notes, comments, signatures
────────────────────────────────────────────── */

/* Supervisor note shown under the approved value */
.sup-note-display {
    font-size: 11px;
    color: #64748b;
    font-style: italic;
    font-weight: normal;
    margin-top: 5px;
    line-height: 1.4;
    white-space: pre-wrap;
}
.view-only-mode td.approved-cell.is-gap .sup-note-display { color: #b91c1c; }

/* Comment timestamp row */
.comment-time-wrapper { margin-bottom: 15px; }
.comment-time-meta {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 4px;
    display: flex;
    gap: 8px;
    padding-right: 5px;
}
.comment-time-user { color: #94a3b8; }

/* Signature pair grid */
.sig-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.sig-card {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.sig-status {
    font-size: 15px;
    font-weight: 600;
    margin-top: 8px;
}
.sig-status.signed   { color: #16a34a; }
.sig-status.unsigned { color: #dc2626; }
.sig-details {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
}

/* ─────────────────────────────────────────────
   SUPERUSER SYSTEM ALERTS (base.html)
────────────────────────────────────────────── */

.superuser-alert {
    border-radius: 6px;
    padding: 14px 18px;
    margin: 0 auto 12px;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 12px;
    direction: rtl;
}

#superuser-profile-alert {
    background: #fff8e1;
    border-right: 5px solid #f59e0b;
    box-shadow: 0 2px 8px rgba(245,158,11,0.15);
}

#superuser-view-only-alert {
    background: #eff6ff;
    border-right: 5px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59,130,246,0.12);
}

.superuser-alert-icon  { font-size: 22px; }
.superuser-alert-body  { flex: 1; }
.superuser-alert-body p { margin: 4px 0 0; font-size: 14px; }
.superuser-alert-link  { font-weight: bold; text-decoration: underline; margin-right: 6px; }
.superuser-alert-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
}

/* Color variants scoped by element ID */
#superuser-profile-alert .superuser-alert-body strong { color: #92400e; }
#superuser-profile-alert .superuser-alert-body p      { color: #78350f; }
#superuser-profile-alert .superuser-alert-link        { color: #b45309; }
#superuser-profile-alert .superuser-alert-close       { color: #92400e; }

#superuser-view-only-alert .superuser-alert-body strong { color: #1e40af; }
#superuser-view-only-alert .superuser-alert-body p      { color: #1e3a8a; }
#superuser-view-only-alert .superuser-alert-link        { color: #1d4ed8; }
#superuser-view-only-alert .superuser-alert-close       { color: #1e40af; }

/* ─────────────────────────────────────────────
   DARK MODE — replies, messages, signatures
────────────────────────────────────────────── */

/* Replies thread */
body.theme-dark .replies-container {
    background: #0f172a !important;
    border-right-color: #334155 !important;
}
body.theme-dark .message-mine {
    background-color: #14532d !important;
    color: #dcfce7 !important;
}
body.theme-dark .message-others {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
body.theme-dark .message-mine .comment-text,
body.theme-dark .message-mine .small-label,
body.theme-dark .message-mine .text-time { color: #dcfce7 !important; }

/* Signature cards */
body.theme-dark .sig-card {
    background: #1e293b;
    border-color: #334155;
}
body.theme-dark .sig-details { color: #94a3b8; }

/* Responsive — stack signatures on mobile */
@media (max-width: 600px) {
    .sig-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   MANUAL ADD PANEL (daily log form)
────────────────────────────────────────────── */

.manual-add-wrap {
    display: none;
    margin-top: 6px;
    padding: 10px 12px;
    background: #f0f7ff;
    border: 2px solid #2563eb;
    border-radius: 8px;
    direction: rtl;
}

.manual-add-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.manual-add-input {
    flex: 1;
    padding: 5px 10px;
    border: 1.5px solid #93c5fd;
    border-radius: 6px;
    font-size: .9rem;
    box-sizing: border-box;
    direction: rtl;
}

.manual-add-status {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.manual-add-status.found { color: #16a34a; }
.manual-add-status.new   { color: #2563eb; }

.manual-add-extra {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.manual-add-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.manual-add-field-row label {
    font-size: 12px;
    color: #475569;
    min-width: 72px;
    flex-shrink: 0;
}

.manual-add-field-row input {
    flex: 1;
    padding: 4px 8px;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    font-size: .85rem;
    box-sizing: border-box;
    direction: rtl;
}

.manual-add-btn-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    justify-content: flex-end;
}

.btn-manual-confirm {
    padding: 5px 16px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
}
.btn-manual-confirm:hover { background: #1d4ed8; }

.btn-manual-cancel {
    padding: 5px 10px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
.btn-manual-cancel:hover { background: #e2e8f0; }

/* Dark mode */
body.theme-dark .manual-add-wrap {
    background: #0f172a;
    border-color: #3b82f6;
}
body.theme-dark .manual-add-input,
body.theme-dark .manual-add-field-row input {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
body.theme-dark .manual-add-field-row label { color: #94a3b8; }
body.theme-dark .manual-add-status.found    { color: #4ade80; }
body.theme-dark .btn-manual-cancel { background: #1e293b; border-color: #334155; color: #94a3b8; }
body.theme-dark .btn-manual-cancel:hover { background: #334155; }

/* ============================================================
   EXTRACTED FROM INLINE — component styles for mobile readiness
   ============================================================ */

/* ── Nav Inbox (ophirbm only) ── */
#navInboxWrap { position: relative; }
#navInboxBtn {
    position: relative;
    background: #1e293b;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
#navInboxBadge {
    display: none;
    background: #ef4444;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    padding: 0 3px;
}
#navInboxPanel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 360px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
    padding: 18px;
    max-height: 480px;
    overflow-y: auto;
    z-index: 9100;
    border: 1px solid #e2e8f0;
}
.nav-inbox-header {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-inbox-refresh {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #2563eb;
}
#navInboxList { display: flex; flex-direction: column; gap: 10px; }
.nav-inbox-loading { color: #94a3b8; font-size: 13px; text-align: center; padding: 16px 0; }
.inbox-msg-card { border-radius: 8px; padding: 10px 12px; }
.inbox-msg-card--pending { border: 1px solid #bfdbfe; background: #eff6ff; }
.inbox-msg-card--handled { border: 1px solid #e2e8f0; background: #f8fafc; }
.inbox-msg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.inbox-msg-user { font-weight: 600; font-size: 13px; color: #1e293b; }
.inbox-msg-time { font-size: 11px; color: #94a3b8; }
.inbox-msg-body { font-size: 13px; color: #334155; white-space: pre-wrap; margin-bottom: 6px; }
.btn-mark-handled {
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid #3b82f6;
    background: #eff6ff;
    color: #2563eb;
    cursor: pointer;
}
.inbox-msg-handled { font-size: 11px; color: #16a34a; }
.inbox-msg-empty { color: #94a3b8; font-size: 13px; text-align: center; padding: 20px 0; }
.inbox-msg-error { color: #ef4444; font-size: 13px; }

/* ── Change Request Modal ── */
#crModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9100;
    align-items: center;
    justify-content: center;
}
.cr-modal-box {
    background: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
}
#crModalTitle { margin: 0 0 6px; color: #1e293b; }
#crModalSubject { color: #64748b; font-size: 13px; margin: 0 0 14px; }
.cr-modal-textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}
.cr-modal-help { font-size: 12px; color: #94a3b8; margin: 8px 0 18px; }
.modal-btn-row { display: flex; gap: 10px; justify-content: flex-end; }
.btn-modal-cancel {
    padding: 8px 18px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    font-weight: 600;
}
.btn-modal-submit {
    padding: 8px 18px;
    border-radius: 6px;
    border: none;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}

/* ── Developer Bubble + Chat ── */
#devBubble { position: fixed; bottom: 24px; right: 24px; left: auto; z-index: 9050; }
#devBubbleBtn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: #1e293b;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#devChat {
    display: none;
    position: absolute;
    bottom: 60px;
    right: 0;
    left: auto;
    width: min(92vw, 320px);
    max-width: 320px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
    padding: 18px;
    max-height: 560px;
    overflow-y: auto;
}
.dev-chat-title { font-weight: 700; color: #1e293b; margin-bottom: 8px; font-size: 15px; }
.dev-chat-textarea {
    width: 100%;
    min-height: 70px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 9px;
    font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
}
.dev-chat-btn-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.btn-dev-cancel {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.btn-dev-send {
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 900px) {
    #devBubble { bottom: 18px; right: 18px; left: auto; }
    #devChat { width: min(90vw, 300px); }
}

@media (max-width: 768px) {
    #devBubble { bottom: 18px; right: 16px; left: auto; }
    #devChat { bottom: 64px; right: 0; left: auto; width: min(92vw, 300px); }
}

/* ── Notifications / Toasts ── */
.cr-success-toast {
    position: fixed;
    bottom: 90px;
    right: 24px;
    background: #16a34a;
    color: #fff;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    max-width: 360px;
    line-height: 1.5;
}
.alert-toast-error { background: #f44336 !important; }
.toast-banner {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    min-width: 300px;
    text-align: center;
}

/* ── Project Action Modal (project_detail) ── */
#projectActionModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9000;
    align-items: center;
    justify-content: center;
}
.paction-modal-box {
    background: #fff;
    border-radius: 12px;
    padding: 28px 32px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
}
#pActionTitle { margin: 0 0 10px; color: #1e293b; }
#pActionMsg { color: #475569; margin: 0 0 20px; }
.btn-paction-cancel {
    padding: 8px 18px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    font-weight: 600;
}
.btn-paction-confirm {
    padding: 8px 18px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    color: #fff;
}

/* ── Project detail — settings grid + admin zone ── */
.project-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.form-section--no-mb { margin-bottom: 0 !important; }
.project-header-actions { display: flex; gap: 8px; align-items: center; }
.tag-inactive { color: #94a3b8; }
.perm-td-center { text-align: center; }
.perm-checkbox-label {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: #1e293b;
}
body.theme-dark .perm-checkbox-label { color: #e2e8f0; }
.danger-zone { border: 2px solid #fca5a5 !important; }
.danger-zone-header { background: linear-gradient(135deg,#7f1d1d,#991b1b) !important; color: #fff !important; }
.danger-zone-content { display: flex; flex-wrap: wrap; gap: 12px; padding: 20px; }
.admin-card {
    flex: 1;
    min-width: 200px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
}
.admin-card--danger {
    flex: 1;
    min-width: 200px;
    background: #fff1f2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    padding: 16px;
}
.admin-card-title       { font-weight: 700; margin-bottom: 6px; color: #1e293b; }
.admin-card-title--danger { font-weight: 700; margin-bottom: 6px; color: #991b1b; }
.admin-card-desc        { font-size: 13px; color: #64748b; margin-bottom: 12px; }
.btn-admin { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; color: #fff; }
.btn-admin--amber { background: #f59e0b; }
.btn-admin--red   { background: #dc2626; }
.btn-admin--green { background: #16a34a; }

/* ── Manage project team ── */
.form-section-body { padding: 16px; }
.form-error-block {
    background: #ffebee;
    color: #c62828;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid #ef9a9a;
}
.group-header--blue   { background: #e3f2fd !important; }
.group-header--orange { background: #fff3e0 !important; }
.group-header--green  { background: #e8f5e9 !important; }
.group-header--purple { background: #f3e5f5 !important; }
.group-header--indigo { background: #e8eaf6 !important; }
.btn-save-green { background: #4CAF50; border: none; padding: 10px 20px; color: white; cursor: pointer; border-radius: 4px; }
#existing-rows, #formset-empty-template { display: none; }
.fw-600 { font-weight: 600; }
.hidden-field { display: none; }

/* ── Add panels (JS-toggled with style.display) ── */
.add-panel { display: none; }

/* ── Worker database ── */
.worker-project-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.worker-project-code { font-size: 12px; color: #64748b; }
.worker-project-name { font-size: 12px; }
.text-unassigned { color: #94a3b8; font-size: 12px; }
.row-edit { display: none; background: #f0f9ff; }

/* ── Client list ── */
.contacts-section { margin-bottom: 12px; }
.contacts-section-label { font-size: 13px; color: #475569; }
.contacts-table { margin-top: 6px; font-size: 13px; }
.btn-danger-outline { color: #ef4444 !important; border-color: #ef4444 !important; }
.btn-danger-text    { color: #ef4444 !important; }
.form-inline { display: inline; margin: 0; }

/* ── Project contact list ── */
.empty-td { text-align: center; padding: 30px; color: #999; }
.print-actions { margin-top: 25px; text-align: left; }

/* ── Project create ── */
#clientEmailRow { display: none; padding: 6px 0 0 28px; }
.field-error { color: #dc2626; font-size: 12px; margin-top: 4px; }

/* ── Project edit worker ── */
.fieldset-basic { border: 1px solid #ddd; padding: 10px; margin-bottom: 12px; }

/* ── Comment card ── */
.comment-main-user { color: #075e54; }
.comment-discipline { font-size: 11px; color: #64748b; }
.btn-comment-delete { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 11px; }

/* ── Comment meta (daily_log_detail + daily_log_form) ── */
.comment-item-wrapper { margin-bottom: 20px; width: 100%; }
.comment-meta-time { font-size: 0.75rem; color: #64748b; margin-bottom: 8px; display: flex; gap: 10px; }
.comment-meta-user { color: #94a3b8; }

/* ── Home page ── */
.home-title { color: #2196F3; margin: 0; }
.home-subtitle { color: #64748b; }
.page-header-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.project-status-badge { background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.project-start-info  { font-size: 13px; color: #64748b; }
.logo-upload-label   { cursor: pointer; margin: 0; }
.file-input-hidden   { display: none; }

/* ── Project summary report ── */
.filter-active-label { font-size: 13px; color: #475569; }

/* ── Daily log detail — table column widths ── */
/* main-contractor / sub-contractor tables (6 cols) */
.log-detail-tbl-name     { width: 20%; }
.log-detail-tbl-level    { width: 15%; }
.log-detail-tbl-domain   { width: 15%; }
.log-detail-tbl-company  { width: 25%; }
.log-detail-tbl-total    { width: 10%; }
.log-detail-tbl-approved { width: 15%; }
/* workers / equipment / materials (5 cols, different widths) */
.log-detail-tbl-level5   { width: 20%; }
.log-detail-tbl-domain5  { width: 25%; }
.log-detail-tbl-type5    { width: 25%; }
.log-detail-tbl-total5   { width: 15%; }
.log-detail-tbl-approved5{ width: 15%; }
/* materials (extra supplier col) */
.log-detail-tbl-supplier { width: 15%; }
.log-detail-tbl-qty      { width: 10%; }

/* ── Daily log form ── */
.section-toggle-icon { font-size: 1.1em; color: #94a3b8; min-width: 24px; text-align: center; margin-inline-start: 12px; transition: transform 0.25s ease; line-height: 1; }
.form-section.is-open .section-toggle-icon { transform: rotate(180deg); }
.no-weather-msg { font-size: 12px; color: #94a3b8; }
#newCommentCard { display: none; }
#newCommentPreviews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.media-box label { cursor: pointer; }
.sign-password-group { margin-bottom: 12px; max-width: 320px; }
.sign-password-label { font-weight: 600; font-size: 13px; }
.btn-submit-lg { padding: 12px 30px; font-weight: 700; }
#createdUserInfo { margin-top: 8px; font-size: 13px; }
/* Equipment table column widths */
.log-form-tbl-eq-level    { width: 10%; }
.log-form-tbl-eq-domain   { width: 15%; }
.log-form-tbl-eq-type     { width: 25%; }
.log-form-tbl-eq-unit     { width: 10%; }
.log-form-tbl-eq-qty      { width: 10%; }
.log-form-tbl-eq-approved { width: 20%; }
.log-form-tbl-eq-del      { width: 10%; }
/* Materials table column widths */
.log-form-tbl-mat-level    { width: 8%; }
.log-form-tbl-mat-domain   { width: 12%; }
.log-form-tbl-mat-type     { width: 20%; }
.log-form-tbl-mat-unit     { width: 8%; }
.log-form-tbl-mat-qty      { width: 8%; }
.log-form-tbl-mat-supplier { width: 18%; }
.log-form-tbl-mat-approved { width: 18%; }
.log-form-tbl-mat-del      { width: 8%; }
/* Regie table column widths */
.log-form-tbl-rg-supplier { width: 15%; }
.log-form-tbl-rg-desc     { width: 27%; }
.log-form-tbl-rg-workers  { width: 7%; }
.log-form-tbl-rg-hours    { width: 7%; }
.log-form-tbl-rg-billable { width: 7%; }
.log-form-tbl-rg-notes    { width: 15%; }
.log-form-tbl-rg-approved { width: 14%; }
.log-form-tbl-rg-del      { width: 8%; }

/* ── Dashboard card ── */
.card-title { margin: 0; }

/* ── Regie report ── */
.mt-10 { margin-top: 10px; }
.section-title-nomargin { margin: 0; }

/* ── Calendar legend ── */
.l-purple { background: #8b5cf6; }

/* ── Help section ── */
.btn-add-substep { margin-top: 8px; background: #f1f5f9; color: #334155; border-color: #cbd5e1; }

/* ── QA page ── */
#qa-wrap { display:flex; flex-direction:column; height:calc(100vh - 160px); min-height:460px; max-width:720px; margin:0 auto; }
#chat-box { flex:1; overflow-y:auto; padding:16px 0 8px; scroll-behavior:smooth; }
#chat-box::-webkit-scrollbar { width:4px; }
#chat-box::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:99px; }
.bubble-q { background:#1e293b; color:#fff; border-radius:18px 18px 4px 18px; padding:10px 16px; max-width:72%; font-size:.875rem; line-height:1.55; word-break:break-word; }
.bubble-q .meta { color:#94a3b8; font-size:.7rem; margin-top:3px; }
.bubble-a { background:#fff; border:1px solid #e2e8f0; border-radius:18px 18px 18px 4px; padding:12px 16px; max-width:82%; font-size:.875rem; line-height:1.65; box-shadow:0 1px 4px rgba(0,0,0,.06); word-break:break-word; }
.input-area { background:#fff; border-top:2px solid #e2e8f0; padding:14px 0 4px; margin-top:8px; flex-shrink:0; }
#q-input { width:100%; border:1.5px solid #cbd5e1; border-radius:12px; padding:10px 14px; font-size:.9rem; resize:none; outline:none; transition:border-color .15s; font-family:inherit; direction:rtl; }
#q-input:focus { border-color:#334155; }
#send-btn { background:#1e293b; color:#fff; border:none; border-radius:10px; padding:10px 22px; font-size:.875rem; font-weight:600; cursor:pointer; white-space:nowrap; font-family:inherit; }
#send-btn:disabled { background:#94a3b8; cursor:default; }
.ds-badge { display:inline-block; font-size:.7rem; padding:2px 8px; border-radius:99px; font-weight:600; }
.ds-open     { background:#f1f5f9; color:#64748b; }
.ds-todo     { background:#dbeafe; color:#1d4ed8; }
.ds-in_dev   { background:#ede9fe; color:#7c3aed; }
.ds-done     { background:#dcfce7; color:#15803d; }
.ds-rejected { background:#fee2e2; color:#dc2626; }
.feat-badge  { display:inline-block; font-size:.7rem; padding:2px 8px; border-radius:99px; background:#fef3c7; color:#b45309; font-weight:600; }
.dev-btn { font-size:.7rem; padding:2px 8px; border-radius:6px; border:1px solid #93c5fd; color:#1d4ed8; background:transparent; cursor:pointer; font-weight:600; }
.dev-btn:hover { background:#eff6ff; }
@keyframes bd { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }
.dot { display:inline-block; width:7px; height:7px; background:#94a3b8; border-radius:50%; margin:0 2px; animation:bd 1.1s infinite; }
.qa-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-shrink:0; }
.qa-title { font-size:1.15rem; font-weight:700; margin:0; }
.qa-subtitle { color:#94a3b8; font-size:.75rem; margin:2px 0 0; }
#q-count { font-size:.75rem; color:#94a3b8; }
#empty-msg { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; padding-top:60px; color:#94a3b8; text-align:center; }
.qa-empty-icon { font-size:3rem; margin-bottom:12px; }
.qa-empty-title { font-size:.95rem; font-weight:600; color:#64748b; }
.qa-empty-hint { font-size:.8rem; margin-top:6px; color:#94a3b8; }
.qa-input-row { display:flex; gap:8px; align-items:flex-end; }
.qa-input-hint { font-size:.7rem; color:#94a3b8; margin:4px 0 0; }

/* ── Help page ── */
.help-page { max-width: 860px; margin: 0 auto; }
.help-page-header { margin-bottom: 28px; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border-radius: 14px; padding: 28px 32px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.help-page-header h1 { font-size: 1.8rem; font-weight: 800; color: #fff; margin-bottom: 6px; }
.help-page-header p  { color: #94a3b8; font-size: 14px; margin: 0; }
.help-folder { margin-bottom: 28px; border: 2px solid #d1d9e0; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.07); }
.help-folder-head { background: linear-gradient(135deg, #1e3a4f 0%, #32485a 100%); color: #fff; padding: 14px 20px; display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.help-folder-title { font-size: 1.08rem; font-weight: 800; flex: 1; display: flex; align-items: center; gap: 10px; }
.help-folder-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); }
.help-folder-badge.staff     { background: rgba(251,191,36,0.25); border-color: rgba(251,191,36,0.5); }
.help-folder-badge.superuser { background: rgba(239,68,68,0.25);  border-color: rgba(239,68,68,0.5); }
.help-folder-toggle { font-size: 13px; opacity: 0.7; transition: transform 0.2s; flex-shrink: 0; }
.help-folder.open .help-folder-toggle { transform: rotate(180deg); }
.help-folder-actions { display: flex; gap: 6px; flex-shrink: 0; }
.help-folder-body { display: none; padding: 16px; background: #f8fafc; }
.help-folder.open .help-folder-body { display: block; }
.help-section-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 16px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.help-section-card:last-child { margin-bottom: 0; }
.help-section-head { background: #32485a; color: #fff; padding: 12px 18px; display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.help-section-title { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; flex: 1; }
.help-section-toggle { font-size: 12px; opacity: 0.8; transition: transform 0.2s; }
.help-section-card.open .help-section-toggle { transform: rotate(180deg); }
.help-section-actions { display: flex; gap: 6px; flex-shrink: 0; }
.help-dev-btn { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.help-dev-btn:hover { background: rgba(255,255,255,0.28); }
.help-dev-btn.danger { background: rgba(239,68,68,0.5); border-color: rgba(239,68,68,0.7); }
.help-section-body { display: none; }
.help-section-card.open .help-section-body { display: block; }
.help-steps { padding: 0; }
.help-step { border-bottom: 1px solid #f1f5f9; }
.help-step:last-child { border-bottom: none; }
.help-step-header { padding: 13px 18px; display: flex; gap: 14px; align-items: center; cursor: pointer; user-select: none; }
.help-step-header:hover { background: #f8fafc; }
.help-step-num { width: 28px; height: 28px; flex-shrink: 0; background: #32485a; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.help-step-title-text { font-weight: 700; color: #1e293b; font-size: 15px; flex: 1; }
.help-step-chevron { font-size: 11px; color: #94a3b8; transition: transform 0.2s; }
.help-step.open > .help-step-header .help-step-chevron { transform: rotate(180deg); }
.help-step-collapsible { display: none; padding: 0 18px 16px 58px; }
.help-step.open > .help-step-collapsible { display: block; }
.help-step-body { color: #475569; font-size: 14px; line-height: 1.7; white-space: pre-wrap; margin-bottom: 10px; }
.help-carousel { position: relative; width: 100%; margin-top: 12px; border-radius: 10px; overflow: hidden; border: 1px solid #e2e8f0; background: #f8fafc; }
.carousel-track-wrap { overflow: hidden; direction: ltr; }
.carousel-track { display: flex; transition: transform 0.3s ease; will-change: transform; }
.carousel-slide { flex: 0 0 100%; position: relative; }
.carousel-slide img { width: 100%; max-height: 420px; object-fit: contain; display: block; cursor: zoom-in; background: #fff; }
.carousel-slide img:hover { opacity: 0.92; }
.carousel-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(50,72,90,0.72); color: #fff; border: none; border-radius: 50%; width: 38px; height: 38px; font-size: 24px; line-height: 1; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; transition: background 0.15s; user-select: none; }
.carousel-nav-btn:hover { background: rgba(50,72,90,0.95); }
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }
.carousel-dots { display: flex; justify-content: center; gap: 7px; padding: 8px 0 10px; background: #f8fafc; }
.carousel-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.carousel-dot.active { background: #32485a; transform: scale(1.3); }
.btn-img-delete { position: absolute; top: 8px; left: 8px; background: #ef4444; color: #fff; border: none; border-radius: 50%; width: 26px; height: 26px; font-size: 13px; cursor: pointer; z-index: 4; display: flex; align-items: center; justify-content: center; opacity: 0.85; }
.btn-img-delete:hover { opacity: 1; }
.btn-img-draw { position: absolute; top: 8px; left: 40px; background: #32485a; color: #fff; border: none; border-radius: 50%; width: 26px; height: 26px; font-size: 13px; cursor: pointer; z-index: 4; display: flex; align-items: center; justify-content: center; opacity: 0.85; }
.btn-img-draw:hover { opacity: 1; }
#drawModal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 9999; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 20px; box-sizing: border-box; }
#drawModal.open { display: flex; }
.draw-panel { background: #1e293b; padding: 14px; border-radius: 14px; width: 100%; max-width: 900px; margin: auto; }
.draw-toolbar { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
.draw-tool-btn { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 5px 14px; font-size: 13px; cursor: pointer; }
.draw-tool-btn:hover { background: rgba(255,255,255,0.2); }
.draw-tool-btn.active { background: #32485a; border-color: #94a3b8; }
.draw-tool-btn.save   { background: #16a34a; border-color: #16a34a; }
.draw-tool-btn.cancel { background: rgba(239,68,68,0.45); border-color: rgba(239,68,68,0.7); }
#drawCanvas { border-radius: 8px; cursor: crosshair; max-width: 100%; display: block; background: #fff; }
.help-sub-steps { margin-top: 12px; border-top: 1px dashed #e2e8f0; padding-top: 8px; }
.help-step.sub-step .help-step-header { padding-right: 12px; padding-left: 12px; background: #f8fafc; }
.help-step.sub-step .help-step-num { width: 22px; height: 22px; font-size: 11px; background: #64748b; }
.help-step.sub-step > .help-step-collapsible { padding-left: 46px; }
.help-step-actions { display: flex; gap: 6px; flex-shrink: 0; }
.help-step-edit-btn, .help-step-del-btn { background: none; border: none; cursor: pointer; font-size: 15px; padding: 2px 5px; border-radius: 4px; opacity: 0.6; }
.help-step-edit-btn:hover { background: #e0f2fe; opacity: 1; }
.help-step-del-btn:hover  { background: #fee2e2; opacity: 1; }
.help-empty-steps { padding: 16px 18px; color: #94a3b8; font-size: 13px; }
.help-add-step { padding: 10px 18px; border-top: 1px dashed #e2e8f0; background: #f8fafc; }
.help-add-step button { background: none; border: 1px dashed #94a3b8; color: #64748b; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.help-add-step button:hover { border-color: #32485a; color: #32485a; background: #f0f9ff; }
.help-add-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 12px; color: #64748b; font-size: 14px; font-weight: 600; cursor: pointer; width: 100%; transition: all 0.15s; margin-bottom: 16px; }
.help-add-btn:hover { border-color: #32485a; color: #32485a; background: #f0f9ff; }
.help-no-content { text-align: center; color: #94a3b8; padding: 40px; }
.sortable-list { min-height: 48px; }
.sortable-ghost { opacity: 0.35; background: #e0f2fe !important; border: 2px dashed #32485a !important; border-radius: 10px; }
.sortable-drag { box-shadow: 0 8px 24px rgba(50,72,90,0.25); }
.help-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9000; align-items: center; justify-content: center; }
.help-modal-overlay.open { display: flex; }
.help-modal { background: #fff; border-radius: 12px; padding: 24px; width: 90%; max-width: 560px; box-shadow: 0 8px 40px rgba(0,0,0,0.2); max-height: 90vh; overflow-y: auto; }
.help-modal h3 { margin: 0 0 16px; font-size: 1.1rem; color: #1e293b; }
.help-modal label { font-size: 13px; font-weight: 600; color: #475569; display: block; margin-bottom: 4px; }
.help-modal input[type="text"], .help-modal select, .help-modal textarea { width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; font-family: inherit; margin-bottom: 12px; box-sizing: border-box; }
.help-modal textarea { min-height: 110px; resize: vertical; }
.help-modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.help-modal-footer button { padding: 8px 18px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-modal-save   { background: #32485a; color: #fff; border: none; }
.btn-modal-cancel { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.help-img-preview-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.help-img-preview-list img { max-width: 80px; border-radius: 4px; border: 1px solid #e2e8f0; }
.mIcon-input { width: 80px; margin-bottom: 12px; }
/* Help inline styles */
.help-header-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
#btnExpandAll { flex-shrink: 0; margin-top: 4px; background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.help-drop-hint { color: #94a3b8; font-size: 13px; margin: 0; padding: 8px 0; }
.help-add-folder-wrap { margin-top: 12px; }
.help-add-folder-wrap .help-add-btn { margin-bottom: 0; }
.help-general-label { font-size: 13px; color: #64748b; font-weight: 600; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; }
.draw-color-input { width: 34px; height: 30px; border: none; background: none; cursor: pointer; padding: 0; border-radius: 4px; }
.draw-size-input { width: 80px; }
.draw-tool-btn.draw-clear { margin-right: auto; }

@media (max-width: 768px) {
    #navInboxPanel { width: 95vw; left: auto; right: 0; }
    .cr-modal-box, .paction-modal-box { padding: 20px; }
    .project-settings-grid { grid-template-columns: 1fr; }
    .danger-zone-content { flex-direction: column; }
    .admin-card, .admin-card--danger { min-width: unset; }
}


/* ================================================================
   EXTRACTED INLINE STYLES + COMPREHENSIVE RESPONSIVE DESIGN
   Mobile-first: iPhone / Android / iPad / Desktop
   ================================================================ */

/* -- edit-name-stack (worker_database) */
.edit-name-stack { display: flex; flex-direction: column; gap: 4px; }
.edit-name-stack .edit-field { width: 100%; box-sizing: border-box; }

/* -- Catalog management tabs & table */
.catalog-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.catalog-tab  { padding: 8px 20px; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; background: #f9fafb; font-size: 14px; }
.catalog-tab.active { background: var(--primary-blue, #32485a); color: #fff; border-color: var(--primary-blue, #32485a); }
.catalog-section { display: none; }
.catalog-section.active { display: block; }
.catalog-table td, .catalog-table th { padding: 8px 12px; }
.catalog-table tr:hover td { background: #f1f5f9; }
.edit-inline { display: none; gap: 6px; align-items: center; flex-wrap: wrap; }
.edit-inline input { width: 140px; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 4px; }
.row-editing .edit-inline  { display: flex; }
.row-editing .view-content { display: none; }
body.theme-dark .catalog-tab { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.theme-dark .catalog-table tr:hover td { background: #1e293b; }

/* -- Universal scroll wrapper for wide tables */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll > table { min-width: 480px; }

/* -- Touch-friendly base: minimum tap target 44px */
@media (hover: none) and (pointer: coarse) {
    .btn, button, a.btn, input[type="submit"] { min-height: 44px; min-width: 44px; }
    .btn-sm { min-height: 36px; min-width: 36px; font-size: 13px; padding: 6px 10px; }
    input, select, textarea { font-size: 16px; }
}

/* ================================================================
   BREAKPOINT <= 1024px  -- Tablets landscape
   ================================================================ */
@media (max-width: 1024px) {
    .container { padding: 0 16px 30px; }
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
    .project-settings-grid { grid-template-columns: 1fr 1fr; }
    .info-header-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   BREAKPOINT <= 768px  -- Tablets portrait + large phones
   ================================================================ */
@media (max-width: 768px) {
    /* Layout */
    .container { padding: 0 12px 24px; }
    .projects-grid { grid-template-columns: 1fr; }
    .project-settings-grid { grid-template-columns: 1fr; }
    .info-header-grid { grid-template-columns: 1fr 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .project-header-actions { flex-wrap: wrap; gap: 6px; }

    /* Typography */
    h2, .page-title h2 { font-size: 1.15rem; }
    .section-header { font-size: 14px; }

    /* Tables: force horizontal scroll */
    .form-section .section-content > table,
    .contact-list-table,
    .catalog-table,
    table.edit-table,
    table.log-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Forms */
    .add-panel .grid-fields { grid-template-columns: 1fr; }
    .panel-fields { flex-direction: column; }
    .panel-field { min-width: unset; width: 100%; }

    /* Daily log */
    .dl-header { flex-direction: column; align-items: stretch; gap: 8px; }
    .dl-actions { flex-wrap: wrap; gap: 6px; }

    /* Project detail permissions table */
    .perm-cell { font-size: 11px; padding: 6px 4px; }
    .danger-zone-content { flex-direction: column; }
    .admin-card, .admin-card--danger { min-width: unset; }

    /* Logs filter */
    .logs-filter-bar { flex-wrap: wrap; gap: 6px; }
    .logs-filter-bar input[type="date"] { flex: 1; min-width: 120px; }

    /* Worker DB permission columns */
    td.cell-can-manage, td.cell-can-delete { min-width: 56px; }

    /* QA page */
    #qa-wrap { height: calc(100vh - 130px); }
    .bubble-q, .bubble-a { max-width: 90%; }
    #send-btn { padding: 10px 14px; }

    /* Catalog tabs */
    .catalog-tab { padding: 7px 14px; font-size: 13px; }

    /* Modals */
    .cr-modal-box, .paction-modal-box { padding: 18px 14px; width: 94vw; }
    .help-modal { width: 95%; padding: 16px; }

    /* Worker DB rows */
    .contact-list-table .worker-project-item { font-size: 12px; }
    .contact-list-table .role-badge { font-size: 11px; padding: 1px 5px; }

    /* Hide "הערות מפקח" label next to 💬 — icon alone is enough on tablet/mobile */
    .row-note-btn-label { display: none; }
}

/* ================================================================
   BREAKPOINT <= 480px  -- Small phones (iPhone SE, Android compact)
   ================================================================ */
@media (max-width: 480px) {
    .container { padding: 0 8px 20px; }
    .section-content { padding: 10px 8px; }
    h2, .page-title h2 { font-size: 1rem; }

    /* Project header */
    .project-header { flex-direction: column; gap: 8px; }
    .project-header-actions { flex-direction: column; width: 100%; }
    .project-header-actions .btn,
    .project-header-actions a.btn { width: 100%; justify-content: center; text-align: center; }

    /* Grids -> single column */
    .info-header-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }

    /* Filters */
    .filters { flex-direction: column; align-items: stretch; }
    .filters input, .filters select, .filters button { width: 100%; min-width: unset; }

    /* Add panel */
    .add-panel { padding: 12px 10px; }

    /* Worker DB */
    .contact-list-table { font-size: 12px; }
    .contact-list-table th, .contact-list-table td { padding: 8px 4px; }
    .contact-list-table .worker-project-name { display: none; }
    .disc-badge-sm { font-size: 9px; padding: 1px 4px; }
    .worker-project-item .disc-badge-sm { display: none; }

    /* QA */
    #qa-wrap { max-width: 100%; padding: 0 4px; height: calc(100vh - 110px); }

    /* Catalog tabs: horizontal scroll, no wrap */
    .catalog-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .catalog-tab { flex-shrink: 0; }

    /* Modals */
    .cr-modal-box, .paction-modal-box { width: 100vw; border-radius: 0; margin: 0; }

    /* Help page */
    .help-page-header { padding: 16px; }
    .help-page-header h1 { font-size: 1.3rem; }
    .help-step-collapsible { padding-left: 12px; padding-right: 12px; }
    .draw-panel { padding: 8px; }
    #drawCanvas { width: 100% !important; height: auto !important; }

    /* Cells */
    th, td { white-space: normal; min-width: 60px; }
    .col-date { min-width: 80px; }

    /* Log row */
    .btn.btn-sm { font-size: 12px; padding: 5px 8px; }
}

/* ================================================================
   BREAKPOINT <= 360px  -- Very small phones
   ================================================================ */
@media (max-width: 360px) {
    .container { padding: 0 6px 16px; }
    .btn { padding: 8px 10px; font-size: 12px; }
    .section-header { font-size: 13px; padding: 8px 10px; }
    .navbar { padding: 0 8px; }
}

/* ================================================================
   RGI ENTRIES
   ================================================================ */
.rgi-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.btn-rgi {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, transform .1s;
    font-family: inherit;
}
.btn-rgi:active { transform: scale(0.97); }
.btn-rgi--detailed  { background: #dcfce7; color: #166534; border-color: #86efac; }
.btn-rgi--detailed:hover  { background: #bbf7d0; }
.btn-rgi--contract  { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.btn-rgi--contract:hover  { background: #fef08a; }
.btn-rgi--essential { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.btn-rgi--essential:hover { background: #fecaca; }
.btn-rgi-edit {
    font-size: 11px; padding: 2px 8px; border-radius: 4px; border: 1px solid #cbd5e1;
    background: #f8fafc; color: #475569; cursor: pointer; line-height: 1.4;
}
.btn-rgi-edit:hover { background: #e2e8f0; }

.rgi-type-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.rgi-type-badge--detailed       { background: #dcfce7; color: #166534; }
.rgi-type-badge--contract_prices { background: #fef9c3; color: #854d0e; }
.rgi-type-badge--essential_issue { background: #fee2e2; color: #991b1b; }

.rgi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 12px 0;
    background: #fff;
    overflow: hidden;
}
.rgi-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f1f5f9;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid #e2e8f0;
}
.rgi-panel-body { padding: 14px; }
.rgi-panel-fields { display: flex; gap: 14px; margin-bottom: 12px; align-items: flex-start; flex-wrap: wrap; }
.rgi-panel-text { flex: 1 1 280px; display: flex; flex-direction: column; gap: 8px; }
.rgi-panel-media { flex: 0 1 220px; background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 10px; padding: 14px; text-align: center; }
.rgi-panel-fields input[type="text"],
.rgi-panel-text textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}
.rgi-panel-text textarea { min-height: 60px; resize: vertical; }
.rgi-panel-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}
.rgi-saved-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 8px 0;
    background: #fafafa;
    overflow: hidden;
}
.rgi-saved-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: #f1f5f9;
    font-weight: 600;
    font-size: 13px;
    gap: 10px;
}
.rgi-saved-card-body { padding: 8px 14px; font-size: 13px; color: #475569; }

body.theme-dark .rgi-toolbar { background: #1e293b; border-color: #334155; }
body.theme-dark .rgi-panel { background: #1e293b; border-color: #334155; }
body.theme-dark .rgi-panel-header { background: #0f172a; border-color: #334155; color: #e2e8f0; }
body.theme-dark .rgi-panel-fields input[type="text"],
body.theme-dark .rgi-panel-text textarea { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.theme-dark .rgi-panel-media { background: #0f172a; border-color: #334155; }
body.theme-dark .rgi-saved-card { background: #1e293b; border-color: #334155; }
body.theme-dark .rgi-saved-card-header { background: #0f172a; color: #e2e8f0; }
body.theme-dark .rgi-saved-card-body { color: #94a3b8; }

/* Unit badges (catalog management) */
.unit-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 4px;
    background: #e2e8f0;
    color: #334155;
    margin: 1px 2px 1px 0;
    white-space: nowrap;
}
.unit-badge--primary { background: #dbeafe; color: #1d4ed8; }
.units-field { width: 180px !important; }
.cell-units { white-space: normal; min-width: 100px; }

/* RGI resource sections inside panel */
.rgi-resource-section {
    margin-top: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}
.rgi-resource-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    padding: 6px 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.rgi-resource-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rgi-resource-table th, .rgi-resource-table td {
    padding: 5px 7px;
    border-bottom: 1px solid #f1f5f9;
    text-align: right;
}
.rgi-resource-table th { background: #f8fafc; font-weight: 600; color: #64748b; }
.rgi-resource-table input { width: 100%; padding: 3px 5px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px; font-family: inherit; box-sizing: border-box; }
.rgi-resource-table input[type="number"] { width: 65px; text-align: center; }
.rgi-row-del { background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 14px; padding: 2px 4px; }
.rgi-row-del:hover { color: #ef4444; }
.rgi-add-row-btn { margin: 6px 10px; font-size: 12px; padding: 4px 10px; }

.rgi-count-badge {
    font-size: 11px;
    background: #f1f5f9;
    color: #475569;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}

/* RGI photo upload section */
.rgi-photo-section {
    margin-top: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}
.rgi-photo-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    min-height: 0;
}
.rgi-photo-previews:empty { padding: 0; }
.rgi-photo-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}
.rgi-photo-thumb-wrap {
    position: relative;
    display: inline-block;
}
.rgi-photo-thumb-del {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 16px;
    height: 16px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}
.rgi-saved-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px;
}
.rgi-saved-photo-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
}
body.theme-dark .rgi-photo-section { border-color: #334155; }
body.theme-dark .rgi-photo-thumb,
body.theme-dark .rgi-saved-photo-thumb { border-color: #334155; }

body.theme-dark .rgi-resource-section { border-color: #334155; }
body.theme-dark .rgi-resource-label { background: #0f172a; border-color: #334155; color: #94a3b8; }
body.theme-dark .rgi-resource-table th { background: #1e293b; color: #94a3b8; }
body.theme-dark .rgi-resource-table td { border-color: #1e293b; }
body.theme-dark .rgi-resource-table input { background: #1e293b; border-color: #334155; color: #e2e8f0; }

.rgi-row-section {
    margin-top: 10px;
    border-top: 1px solid #e2e8f0;
    padding-top: 6px;
}
.rgi-row-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    padding: 4px 14px 6px;
}
body.theme-dark .rgi-row-section { border-top-color: #334155; }
body.theme-dark .rgi-row-section-title { color: #94a3b8; }

@media (max-width: 600px) {
    .rgi-saved-card-header { flex-wrap: wrap; gap: 6px; }
    .rgi-panel-fields { flex-direction: column; }
    .rgi-panel-media { flex: 1 1 100%; }
}

/* Select2 inside RGI resource rows */
.rgi-rows-equipment .select2-container,
.rgi-rows-material .select2-container,
.rgi-rows-manpower .select2-container { min-width: 140px; max-width: 220px; }
.rgi-rows-equipment .select2-selection,
.rgi-rows-material .select2-selection,
.rgi-rows-manpower .select2-selection {
  height: 28px !important; border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important; font-size: 12px !important;
}
.rgi-rows-equipment .select2-selection__rendered,
.rgi-rows-material .select2-selection__rendered,
.rgi-rows-manpower .select2-selection__rendered {
  line-height: 26px !important; padding-right: 6px !important; padding-left: 20px !important;
}
.rgi-rows-equipment .select2-selection__arrow,
.rgi-rows-material .select2-selection__arrow,
.rgi-rows-manpower .select2-selection__arrow { height: 26px !important; }
body.theme-dark .rgi-rows-equipment .select2-selection,
body.theme-dark .rgi-rows-material .select2-selection,
body.theme-dark .rgi-rows-manpower .select2-selection {
  background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important;
}
body.theme-dark .rgi-rows-equipment .select2-selection__rendered,
body.theme-dark .rgi-rows-material .select2-selection__rendered,
body.theme-dark .rgi-rows-manpower .select2-selection__rendered { color: #e2e8f0 !important; }

/* ── Select2 global dark mode (dropdown popup, search box, options) ── */
body.theme-dark .select2-container--default .select2-selection--single,
body.theme-dark .select2-container--default .select2-selection--multiple {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
body.theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered,
body.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: #e2e8f0 !important;
}
body.theme-dark .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #94a3b8 !important; }
body.theme-dark .select2-dropdown {
    background: #1e293b !important;
    border-color: #334155 !important;
}
body.theme-dark .select2-container--default .select2-search--dropdown .select2-search__field {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
body.theme-dark .select2-container--default .select2-results__option {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}
body.theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected],
body.theme-dark .select2-container--default .select2-results__option--highlighted[data-selected] {
    background: #2563eb !important;
    color: #fff !important;
}
body.theme-dark .select2-container--default .select2-results__option[aria-selected="true"] {
    background: #0f172a !important;
    color: #93c5fd !important;
}

/* ================================================================
   PRINT
   ================================================================ */
@media print {
    .navbar, #devBubble, #crModal, .project-header-actions { display: none !important; }
    .container { margin: 0; padding: 0; max-width: 100%; }
    .form-section { box-shadow: none; border: 1px solid #e2e8f0; }
}

/* ================================================================
   ROW SUPERVISOR NOTES (RowSupervisorNote)
   ================================================================ */
.js-row-note-toggle {
    background: none;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 5px;
    margin-right: 4px;
    vertical-align: middle;
    opacity: 0.7;
}
.js-row-note-toggle:hover { opacity: 1; border-color: #94a3b8; background: #f1f5f9; }
.row-notes-panel {
    margin-top: 6px;
    padding: 6px 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rn-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    line-height: 1.4;
    padding: 4px 6px;
    border-radius: 6px;
}
.rn-note--mine {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}
.rn-note--readonly {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    opacity: .85;
}
.rn-author {
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    flex-shrink: 0;
}
.rn-text {
    color: #475569;
    flex: 1;
    word-break: break-word;
}
.rn-btn-edit {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
    font-size: 13px;
    opacity: .7;
    flex-shrink: 0;
}
.rn-btn-edit:hover { opacity: 1; }
.rn-btn-add {
    background: none;
    border: 1px dashed #94a3b8;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    padding: 3px 8px;
    text-align: center;
    transition: background .15s;
}
.rn-btn-add:hover { background: #e2e8f0; color: #1e293b; }
.rn-input-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rn-textarea {
    width: 100%;
    border: 1px solid #93c3fd;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    resize: none;
    height: 56px;
    overflow-y: auto;
    font-family: inherit;
    direction: rtl;
    box-sizing: border-box;
}
.rn-textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px #bfdbfe; }
.rn-input-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.rn-btn-save {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 3px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s;
}
.rn-btn-save:hover { background: #1d4ed8; }
.rn-btn-cancel {
    background: none;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    color: #64748b;
}
.rn-btn-cancel:hover { background: #f1f5f9; }

/* ── Row-notes panel — dark mode ── */
body.theme-dark .row-notes-panel {
    background: #1e293b;
    border-color: #334155;
}
body.theme-dark .rn-note {
    background: #0f172a;
    border-color: #334155;
}
body.theme-dark .rn-note--mine {
    background: #1e3a5f;
    border-color: #2563eb;
}
body.theme-dark .rn-note--readonly {
    background: #1e293b;
    border-color: #334155;
}
body.theme-dark .rn-author { color: #93c5fd; }
body.theme-dark .rn-text   { color: #cbd5e1; }
body.theme-dark .rn-btn-edit { color: #94a3b8; }
body.theme-dark .rn-btn-edit:hover { color: #e2e8f0; }
body.theme-dark .rn-btn-add {
    border-color: #334155;
    color: #94a3b8;
}
body.theme-dark .rn-btn-add:hover { background: #334155; color: #e2e8f0; }
body.theme-dark .rn-textarea {
    background: #0f172a;
    border-color: #2563eb;
    color: #e2e8f0;
}
body.theme-dark .rn-textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px #1e3a5f; }
body.theme-dark .rn-btn-cancel {
    border-color: #334155;
    color: #94a3b8;
}
body.theme-dark .rn-btn-cancel:hover { background: #334155; }
body.theme-dark .js-row-note-toggle { color: #94a3b8; border-color: #334155; }
body.theme-dark .js-row-note-toggle:hover { background: #1e293b; border-color: #475569; }