/* ============================================================
   MjeshtriYT — Design System
   Tema: punetori/mjeshtri. Grafit + portokalli sigurie.
   ============================================================ */

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

:root {
    --graphite: #22262B;
    --graphite-soft: #2E333A;
    --paper: #F3F2EF;
    --paper-raised: #FFFFFF;
    --orange: #E85D2C;
    --orange-dark: #C94A1E;
    --slate: #5B6169;
    --slate-light: #9298A0;
    --line: #E1DFDA;
    --success: #2E7D5B;
    --success-bg: #E5F2EC;
    --danger: #C1392B;
    --danger-bg: #FBE9E7;
    --radius: 8px;
    --font-display: 'Archivo', sans-serif;
    --font-body: 'Inter', sans-serif;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
    background: var(--paper);
    font-family: var(--font-body);
    color: var(--graphite);
    font-size: 15.5px;
}

h1, h2, h3, h4, h5, .navbar-brand {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    color: var(--graphite);
    font-weight: 700;
}

a { color: var(--graphite); }
a:hover { color: var(--orange-dark); }
:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }

/* ---------------- Navbar ---------------- */
.app-navbar {
    background: var(--graphite);
    padding-top: .85rem;
    padding-bottom: .85rem;
    border-bottom: 3px solid var(--orange);
}
.app-navbar .navbar-brand { color: #fff; font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; gap: .5rem; }
.app-navbar .navbar-brand i { color: var(--orange); }
.app-navbar .nav-link { color: rgba(255,255,255,.82); font-weight: 500; font-size: .93rem; }
.app-navbar .nav-link:hover { color: #fff; }
.app-navbar .btn-orange { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700; }
.app-navbar .btn-orange:hover { background: var(--orange-dark); border-color: var(--orange-dark); }

.role-badge {
    font-size: .68rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 20px;
    background: rgba(232,93,44,.18);
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ---------------- Footer ---------------- */
.app-footer { background: var(--graphite); color: rgba(255,255,255,.6); border-top: 1px solid rgba(255,255,255,.08); }

/* ---------------- Hero ---------------- */
.hero {
    background: var(--graphite);
    color: #fff;
    border-radius: var(--radius);
    padding: 3rem 2.5rem;
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(var(--graphite), var(--graphite)),
        repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px);
}
.hero h1 { color: #fff; font-size: 2.3rem; max-width: 18ch; }
.hero p { color: rgba(255,255,255,.75); max-width: 48ch; font-size: 1.05rem; }
.hero .btn-orange { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700; padding: .7rem 1.6rem; }
.hero .btn-orange:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.hero .btn-outline-light:hover { color: var(--graphite); }

/* ---------------- Category grid ---------------- */
.category-grid { margin-top: -2.5rem; position: relative; z-index: 2; }
.category-card {
    background: var(--paper-raised);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 1.4rem 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--graphite);
    display: block;
    transition: border-color .15s ease, transform .15s ease;
    height: 100%;
}
.category-card:hover { border-color: var(--orange); transform: translateY(-2px); color: var(--graphite); }
.category-card .cat-icon {
    width: 52px; height: 52px;
    border-radius: 10px;
    background: var(--paper);
    color: var(--orange);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    margin: 0 auto .75rem;
}
.category-card span { font-weight: 600; font-size: .88rem; }

/* ---------------- How it works ---------------- */
.step-item { display: flex; gap: 1rem; align-items: flex-start; }
.step-num {
    flex: 0 0 40px; height: 40px;
    border-radius: 50%;
    background: var(--graphite);
    color: var(--orange);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700;
}
.step-item h6 { margin-bottom: .25rem; }
.step-item p { color: var(--slate); font-size: .92rem; margin-bottom: 0; }

/* ---------------- Buttons & forms ---------------- */
.btn-primary { background: var(--graphite); border-color: var(--graphite); border-radius: 6px; font-weight: 600; }
.btn-primary:hover { background: var(--graphite-soft); border-color: var(--graphite-soft); }
.btn-orange { background: var(--orange); border-color: var(--orange); color: #fff; border-radius: 6px; font-weight: 700; }
.btn-orange:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }

.form-control, .form-select {
    border: 1.5px solid var(--line);
    border-radius: 6px;
    padding: .6rem .75rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(232,93,44,.2);
}
.form-label { font-size: .82rem; font-weight: 600; color: var(--slate); }

/* ---------------- Cards: jobs / companies ---------------- */
.job-card, .company-card {
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-raised);
    transition: border-color .15s ease;
}
.job-card:hover, .company-card:hover { border-color: var(--orange); }

.cat-pill {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 20px;
    background: rgba(232,93,44,.12);
    color: var(--orange-dark);
}

.status-pill {
    font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 20px;
}
.status-open { background: var(--success-bg); color: var(--success); }
.status-in_progress { background: rgba(232,93,44,.12); color: var(--orange-dark); }
.status-closed { background: #ECECEC; color: var(--slate); }

.verified-badge { color: var(--success); font-size: .78rem; font-weight: 700; }

.offer-card {
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    background: var(--paper-raised);
}
.offer-card.accepted { border-color: var(--success); background: var(--success-bg); }
.offer-price { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--graphite); }

.star-rating { color: var(--orange); font-size: .95rem; }

.auth-card {
    max-width: 480px;
    margin: 1.5rem auto;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 16px 34px rgba(34,38,43,0.10);
}

/* ---------------- Admin ---------------- */
.list-group-item.active { background: var(--graphite); border-color: var(--graphite); font-weight: 600; }
.list-group-item-action { color: var(--graphite); font-weight: 500; }
.list-group-item-action:hover { background: var(--paper); }
.stat-card { border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.stat-card .fs-3 { font-family: var(--font-display); }
.table thead th { font-family: var(--font-display); font-size: .8rem; color: var(--slate); border-bottom: 2px solid var(--line); font-weight: 700; }
code { background: var(--paper); color: var(--graphite); padding: .15rem .4rem; border-radius: 4px; font-weight: 600; }