/* ============================================================
   Rinoo — Global Stylesheet
   Hebrew RTL | Google Font "Assistant" | Production MVP
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700;800&display=swap');

/* ---- CSS Variables ---- */
:root {
    --color-primary:    #1B4FCC;   /* Deep Israeli blue */
    --color-primary-dk: #143DAA;
    --color-accent:     #E8A317;   /* Warm gold – trust, renovation */
    --color-accent-lt:  #FFF4D6;
    --color-success:    #18A059;
    --color-danger:     #D63031;
    --color-warning:    #FDCB6E;
    --color-muted:      #6B7280;
    --color-bg:         #F7F8FC;
    --color-card:       #FFFFFF;
    --color-border:     #E2E6EF;
    --color-text:       #1A1D2E;
    --color-text-light: #5C6278;

    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --shadow-sm:  0 1px 4px rgba(27,79,204,.07);
    --shadow-md:  0 4px 20px rgba(27,79,204,.10);
    --shadow-lg:  0 12px 40px rgba(27,79,204,.13);

    --sidebar-width: 240px;
    --header-h:      64px;
    --font:          'Assistant', 'David', 'Segoe UI', sans-serif;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    direction: rtl;
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--color-primary-dk); }

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---- Typography ---- */
h1, h2, h3, h4, h5 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
}
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
.text-muted  { color: var(--color-text-light); }
.text-sm     { font-size: .875rem; }
.text-xs     { font-size: .75rem; }
.fw-600      { font-weight: 600; }
.fw-700      { font-weight: 700; }

/* ---- Layout ---- */
.app-layout {
    display: grid;
    grid-template-rows: var(--header-h) 1fr;
    min-height: 100vh;
}
.app-layout.with-sidebar {
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--header-h) 1fr;
}
.page-content { padding: 2rem; max-width: 1100px; margin: 0 auto; width: 100%; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

/* ---- Header / Navbar ---- */
.navbar {
    grid-column: 1 / -1;
    background: #fff;
    border-bottom: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: var(--header-h);
    gap: 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}
.navbar-brand {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.5px;
    margin-left: auto; /* RTL: push to right */
}
.navbar-brand span { color: var(--color-accent); }
.navbar-nav { display: flex; align-items: center; gap: 1rem; margin-right: auto; }
.navbar-nav a { font-weight: 600; font-size: .9rem; color: var(--color-text-light); padding: .35rem .6rem; border-radius: var(--radius-sm); transition: all .15s; }
.navbar-nav a:hover, .navbar-nav a.active { color: var(--color-primary); background: #EBF1FF; }
.navbar-actions { display: flex; gap: .6rem; }

/* ---- Sidebar ---- */
.sidebar {
    background: #fff;
    border-left: 2px solid var(--color-border);  /* RTL: border on left */
    padding: 1.5rem 0;
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
}
.sidebar-menu { display: flex; flex-direction: column; gap: .25rem; padding: 0 .75rem; }
.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem 1rem;
    border-radius: var(--radius-md);
    color: var(--color-text-light);
    font-weight: 500;
    font-size: .92rem;
    transition: all .15s;
}
.sidebar-menu a:hover, .sidebar-menu a.active {
    background: #EBF1FF;
    color: var(--color-primary);
}
.sidebar-menu .icon { width: 18px; opacity: .75; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem 1.3rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .9rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .2s;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}
.btn-primary   { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dk); border-color: var(--color-primary-dk); color: #fff; }
.btn-accent    { background: var(--color-accent); color: #1A1D2E; border-color: var(--color-accent); }
.btn-accent:hover { filter: brightness(1.07); }
.btn-outline   { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: #EBF1FF; }
.btn-danger    { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-success   { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.btn-ghost     { background: transparent; color: var(--color-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--color-bg); color: var(--color-text); }
.btn-sm        { padding: .35rem .9rem; font-size: .82rem; }
.btn-lg        { padding: .8rem 2rem; font-size: 1.05rem; }
.btn-full      { width: 100%; }
.btn:disabled  { opacity: .5; cursor: not-allowed; }

/* ---- Cards ---- */
.card {
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}
.card-title { font-size: 1.1rem; font-weight: 700; }
.card-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.stat-card  { text-align: center; }
.stat-card .stat-value { font-size: 2.2rem; font-weight: 800; color: var(--color-primary); }
.stat-card .stat-label { font-size: .85rem; color: var(--color-muted); margin-top: .25rem; }

/* ---- Forms ---- */
.form-group   { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.form-label   { font-weight: 600; font-size: .9rem; color: var(--color-text); }
.form-required::after { content: ' *'; color: var(--color-danger); }
.form-control {
    width: 100%;
    padding: .6rem .9rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-text);
    transition: border-color .15s, box-shadow .15s;
    direction: rtl;
}
.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(27,79,204,.12);
}
.form-control.is-invalid { border-color: var(--color-danger); }
.form-error   { color: var(--color-danger); font-size: .82rem; }
.form-hint    { color: var(--color-muted); font-size: .82rem; }
textarea.form-control { min-height: 100px; resize: vertical; }
select.form-control   { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left .75rem center; padding-left: 2.2rem; }

/* ---- Alerts / Banners ---- */
.alert { padding: .85rem 1.1rem; border-radius: var(--radius-sm); font-size: .92rem; margin-bottom: 1rem; display: flex; align-items: flex-start; gap: .6rem; }
.alert-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.alert-danger  { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.alert-warning { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.alert-info    { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }

/* ---- Legal Disclaimer ---- */
.disclaimer {
    background: #FFFBEB;
    border: 1.5px solid #FDE68A;
    border-radius: var(--radius-sm);
    padding: .85rem 1.1rem;
    font-size: .82rem;
    color: #78350F;
    line-height: 1.6;
}
.disclaimer strong { font-weight: 700; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1.5px solid var(--color-border); }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th { background: #F3F5FB; font-weight: 700; padding: .75rem 1rem; text-align: right; color: var(--color-text-light); border-bottom: 1.5px solid var(--color-border); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.data-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #F7F9FF; }

/* ---- Status Badges ---- */
.badge { display: inline-flex; align-items: center; padding: .25rem .7rem; border-radius: 20px; font-size: .78rem; font-weight: 700; gap: .35rem; }
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.badge-draft       { background: #F3F4F6; color: #374151; }        .badge-draft::before { background: #9CA3AF; }
.badge-pending     { background: #FEF9C3; color: #713F12; }        .badge-pending::before { background: #EAB308; }
.badge-published   { background: #DCFCE7; color: #14532D; }        .badge-published::before { background: #22C55E; }
.badge-bidding     { background: #DBEAFE; color: #1E3A8A; }        .badge-bidding::before { background: #3B82F6; }
.badge-selected    { background: #EDE9FE; color: #3730A3; }        .badge-selected::before { background: #8B5CF6; }
.badge-completed   { background: #D1FAE5; color: #065F46; }        .badge-completed::before { background: #10B981; }
.badge-canceled    { background: #FEE2E2; color: #7F1D1D; }        .badge-canceled::before { background: #EF4444; }

/* ---- Rating Stars ---- */
.stars { display: inline-flex; gap: 2px; direction: ltr; }
.stars .star     { font-size: 1.1rem; color: #D1D5DB; }
.stars .star.on  { color: #F59E0B; }

/* ---- Chat UI ---- */
.chat-wrapper    { display: flex; flex-direction: column; height: calc(100vh - var(--header-h) - 3rem); background: #fff; border-radius: var(--radius-md); border: 1.5px solid var(--color-border); overflow: hidden; }
.chat-messages   { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.chat-bubble     { max-width: 70%; padding: .65rem 1rem; border-radius: var(--radius-md); font-size: .92rem; line-height: 1.5; position: relative; }
.chat-bubble.mine { background: var(--color-primary); color: #fff; align-self: flex-end; border-bottom-left-radius: 4px; /* RTL */ }
.chat-bubble.theirs { background: #F3F5FB; color: var(--color-text); align-self: flex-start; border-bottom-right-radius: 4px; }
.chat-bubble .bubble-meta { font-size: .72rem; margin-top: .3rem; opacity: .7; }
.chat-input-area { padding: 1rem; border-top: 1.5px solid var(--color-border); display: flex; gap: .6rem; align-items: flex-end; }
.chat-input-area .chat-input { flex: 1; padding: .6rem .9rem; border: 1.5px solid var(--color-border); border-radius: 20px; resize: none; max-height: 120px; direction: rtl; }
.chat-input-area .chat-input:focus { outline: none; border-color: var(--color-primary); }

/* ---- Wizard Steps ---- */
.wizard-steps { display: flex; gap: 0; margin-bottom: 2rem; border-radius: var(--radius-md); overflow: hidden; border: 1.5px solid var(--color-border); }
.wizard-step { flex: 1; padding: .75rem .5rem; text-align: center; font-size: .82rem; font-weight: 600; background: #F3F5FB; color: var(--color-muted); border-left: 1px solid var(--color-border); }
.wizard-step:last-child { border-left: none; }
.wizard-step.active { background: var(--color-primary); color: #fff; }
.wizard-step.done   { background: var(--color-success); color: #fff; }
.wizard-step .step-num { display: block; font-size: 1.1rem; font-weight: 800; }

/* ---- Category Cards (picker) ---- */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; }
.category-card { border: 2px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem; text-align: center; cursor: pointer; transition: all .15s; user-select: none; }
.category-card:hover { border-color: var(--color-primary); background: #EBF1FF; }
.category-card.selected { border-color: var(--color-primary); background: #EBF1FF; box-shadow: 0 0 0 3px rgba(27,79,204,.2); }
.category-card .cat-icon { font-size: 2.2rem; margin-bottom: .4rem; }
.category-card .cat-name { font-size: .88rem; font-weight: 600; color: var(--color-text); }
.category-card input[type="checkbox"] { display: none; }

/* ---- Contractor Feed Card ---- */
.request-feed-card { padding: 1.25rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: #fff; transition: box-shadow .15s; }
.request-feed-card:hover { box-shadow: var(--shadow-md); }
.request-feed-card .rfc-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.request-feed-card .rfc-title { font-weight: 700; font-size: 1.05rem; }
.request-feed-card .rfc-meta  { font-size: .83rem; color: var(--color-muted); margin-top: .35rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.request-feed-card .rfc-budget { font-weight: 700; color: var(--color-primary); font-size: 1.05rem; }

/* ---- Payment Page ---- */
.payment-box { max-width: 520px; margin: 2rem auto; }
.payment-amount { font-size: 3rem; font-weight: 800; color: var(--color-primary); text-align: center; }
.payment-amount span { font-size: 1.2rem; font-weight: 500; color: var(--color-muted); }
.fee-breakdown { background: var(--color-accent-lt); border: 1.5px solid #F6D860; border-radius: var(--radius-sm); padding: 1rem; margin: 1rem 0; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .app-layout.with-sidebar { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .page-content { padding: 1rem; }
    .category-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .wizard-steps  { flex-wrap: wrap; }
    .navbar-nav    { display: none; }
}

/* ---- Utility ---- */
.d-flex { display: flex; }
.gap-1  { gap: .5rem; }
.gap-2  { gap: 1rem; }
.gap-3  { gap: 1.5rem; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.text-center { text-align: center; }
.w-full { width: 100%; }
.hidden { display: none; }