/* -------------------------------------------------
   style.css – Стилови за апликацијата SpediMarket
   ------------------------------------------------- */

/* ---------- 1️⃣ Основни VAR и reset ---------- */
:root {
    --primary-color: #2c3e50;
    --secondary-color: #e74c3c;
    --accent-color: #3498db;
    --light-color: #ecf0f1;
    --dark-color: #2c3e50;
    --success-color: #27ae60;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
}

/* reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* -------------------------------------------------
   2️⃣ HEADER + NAVIGATION
   ------------------------------------------------- */
header {
    background-color: var(--primary-color, #0d2b45);
    color: white;
    padding: 1rem 0;
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo h1 {font-size: 1.8rem;}

nav ul {
    display: flex;
    list-style: none;
}
nav ul li {
    margin-left: 1.5rem;
    position: relative;
}
nav ul li a {
    color: black;
    text-decoration: none;
    transition: color 0.3s;
}
nav ul li a:hover {color: var(--accent-color);}

/* ---------- 2.1 DROPDOWN ---------- */
nav ul li.dropdown .dropbtn { cursor: pointer; }
nav ul li.dropdown .dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,.2);
    z-index: 1000;
}
nav ul li.dropdown .dropdown-content a {
    color: #333;
    padding: 8px 12px;
    display: block;
    text-decoration: none;
}
nav ul li.dropdown .dropdown-content a:hover {
    background-color: #f0f0f0;
}
nav ul li.dropdown:hover .dropdown-content { display: block; }

/* -------------------------------------------------
   3️⃣ HERO
   ------------------------------------------------- */
.hero {
    background: linear-gradient(rgba(44,62,80,.8),rgba(44,62,80,.8)),
                url('../images/hero-bg.jpg') no-repeat center/cover;
    color: white;
    padding: 4rem 0;
    text-align: center;
}
.hero h1 {font-size: 2.5rem;margin-bottom:1rem;}
.hero p {font-size:1.2rem;margin-bottom:2rem;max-width:800px;margin:auto;}

/* -------------------------------------------------
   4️⃣ BUTTONS
   ------------------------------------------------- */
.btn {
    display:inline-block;
    padding:.8rem 1.5rem;
    border:none;
    border-radius:4px;
    text-decoration:none;
    font-weight:bold;
    cursor:pointer;
    transition:all .3s;
}
.btn-primary {
    background-color:var(--secondary-color);
    color:white;
}
.btn-primary:hover {background-color:#c0392b;}
.btn-secondary {
    background-color:var(--accent-color);
    color:white;
    margin-left:1rem;
}
.btn-secondary:hover {background-color:#2980b9;}

/* -------------------------------------------------
   5️⃣ STATUS (ТЕНДЕРИ + КАМИОНИ + ПОНУДИ)
   ------------------------------------------------- */
.status {
    padding:.3rem .8rem;
    border-radius:20px;
    font-size:.8rem;
    font-weight:bold;
    color:white;
    display:inline-block;
    text-align:center;
}

/* --- Тендери --- */
.status[data-status="open"]      {background-color:var(--success-color);}
.status[data-status="review"]    {background-color:var(--warning-color);}
.status[data-status="closed"]    {background-color:var(--danger-color);}

/* --- Понуди (во Неодамнешни активности) --- */
.status[data-status="submitted"] {background-color:#4caf50;} /* Поднесена */
.status[data-status="accepted"]  {background-color:#17a2b8;} /* Прифатена */
.status[data-status="rejected"]  {background-color:#dc3545;} /* Одбиена */

/* --- Камиони --- */
.status[data-status="free"],
.status[data-status="available"] {background-color:#4caf50;} /* Слободен */
.status[data-status="occupied"]  {background-color:#ff9800;} /* Изнајмен */
.status[data-status="on_trip"]   {background-color:#f39c12;} /* На пат */

/* --- Фолбек --- */
.status:not([data-status]) {background-color:#6c757d;}

/* -------------------------------------------------
   6️⃣ ТАБЕЛИ
   ------------------------------------------------- */
.table {
    width:100%;
    border-collapse:collapse;
    margin-bottom:2rem;
}
.table th,
.table td {
    padding:.8rem;
    text-align:left;
    border-bottom:1px solid #ddd;
}
.table th {
    background-color:var(--light-color);
    font-weight:bold;
}
.table tr:hover {background-color:#f5f5f5;}

/* -------------------------------------------------
   7️⃣ FORMS
   ------------------------------------------------- */
.form-group {margin-bottom:1.5rem;}
.form-group label {display:block;margin-bottom:.5rem;font-weight:bold;}
.form-group input,
.form-group select,
.form-group textarea {
    width:100%;
    padding:.8rem;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:1rem;
}
.form-group textarea {min-height:120px;resize:vertical;}

/* -------------------------------------------------
   8️⃣ ALERTS
   ------------------------------------------------- */
.alert {
    padding:1rem;
    border-radius:4px;
    margin-bottom:1.5rem;
}
.alert-success {background:#d4edda;color:#155724;border:1px solid #c3e6cb;}
.alert-error   {background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;}
.alert-warning {background:#fff3cd;color:#856404;border:1px solid #ffeaa7;}

/* -------------------------------------------------
   9️⃣ DASHBOARD CARDS
   ------------------------------------------------- */
.dashboard-cards {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:1.5rem;
    margin-bottom:2rem;
}
.dashboard-card {
    background:white;
    border-radius:8px;
    padding:1.5rem;
    box-shadow:0 4px 6px rgba(0,0,0,.1);
    text-align:center;
}
.dashboard-card h3 {color:var(--primary-color);margin-bottom:1rem;}
.dashboard-card .number {font-size:2.5rem;font-weight:bold;color:var(--accent-color);}

/* -------------------------------------------------
   10️⃣ ТАБОВИ (Tabs)
   ------------------------------------------------- */
.tabs {
    display:flex;
    border-bottom:2px solid var(--light-color);
    margin-bottom:1rem;
}
.tabs a {
    padding:.8rem 1.2rem;
    margin-right:.5rem;
    text-decoration:none;
    color:var(--dark-color);
    border-radius:4px 4px 0 0;
}
.tabs a.active,
.tabs a:hover {
    background-color:var(--light-color);
    font-weight:bold;
}

/* -------------------------------------------------
   11️⃣ RESPONSIVE
   ------------------------------------------------- */
@media (max-width:768px) {
    header .container {flex-direction:column;}
    nav ul {margin-top:1rem;flex-direction:column;}
    nav ul li {margin-left:0;margin-bottom:.5rem;}
    .dashboard-cards {flex-direction:column;}
    .hero h1 {font-size:2rem;}
    .hero p {font-size:1rem;}
    .btn {display:block;margin:.5rem auto;width:80%;}
}

/* -------------------------------------------------
   12️⃣ ТЕНДЕР КАРТИ
   ------------------------------------------------- */
.tenders-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 1.5rem;
}
.tender-card {
    flex: 1 1 calc(33.333% - 20px);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.tender-card .tender-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .8rem;
}
.tender-card h4 {
    color: var(--primary-color);
    margin-bottom: .5rem;
}
@media (max-width: 992px) {.tender-card {flex: 1 1 calc(50% - 20px);}}
@media (max-width: 600px) {.tender-card {flex: 1 1 100%;}}

.logo img {
    height: 150px;
    width: 350px;
    object-fit: contain;
    display: block;
}

.logo {
    flex-shrink: 0; /* не дозволува логото да го турка менито */
}
header {
    position: relative;
    z-index: 9999 !important;
}
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.hero-list {
    list-style: none;
    padding-left: 0;
    margin-top: 0.5rem;
}

.hero-list li::before {
    content: "• ";
    color: #27ae60;
    font-weight: bold;
}

.table-scroll {
    max-height: 400px;      /* по желба – 300, 500 итн. */
    overflow-y: auto;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(15,23,42,0.08);
    background: #fff;
}

/* за да стои header-от фиксиран кога скролаш */
.table-scroll thead th {
    position: sticky;
    top: 0;
    background: #f3f4f6;
    z-index: 1;
}