/* ============================================
   FULFILLMENT PLATFORM — Avebase Brand Styles
   ============================================
   Paleta Avebase:
     Onyx:        #0d0d0d  (texte, elemente secundare)
     Emerald:     #74ca8f  (fundal principal, accente verzi)
     Regal Navy:  #003976  (headline-uri, sidebar, info importante)
     White:       #ffffff  (contrast, lizibilitate)
     Amber Earth: #e98a15  (butoane CTA, accente de acțiune)
   ============================================ */

:root {
    --onyx: #0d0d0d;
    --emerald: #74ca8f;
    --emerald-dark: #5bb87a;
    --emerald-light: #e8f7ed;
    --regal-navy: #003976;
    --regal-navy-dark: #002a59;
    --regal-navy-light: #e6eef6;
    --amber-earth: #e98a15;
    --amber-earth-hover: #d47a0e;
    --white: #ffffff;
    --gray-50: #f8faf9;
    --gray-100: #f1f4f2;
    --gray-200: #e2e8e4;
    --gray-300: #c8d0cb;
    --gray-500: #6c757d;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--onyx);
    background-color: var(--gray-50);
}

a { color: var(--regal-navy); }
a:hover { color: var(--regal-navy-dark); }

/* Buttons — Amber Earth for CTA */
.btn-primary { background-color: var(--amber-earth); border-color: var(--amber-earth); color: var(--white); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--amber-earth-hover); border-color: var(--amber-earth-hover); color: var(--white); }
.btn-outline-primary { color: var(--amber-earth); border-color: var(--amber-earth); }
.btn-outline-primary:hover { background-color: var(--amber-earth); color: var(--white); }
.btn-secondary { background-color: var(--regal-navy); border-color: var(--regal-navy); color: var(--white); }
.btn-secondary:hover { background-color: var(--regal-navy-dark); border-color: var(--regal-navy-dark); }
.btn-success { background-color: var(--emerald); border-color: var(--emerald); color: var(--white); }
.btn-success:hover { background-color: var(--emerald-dark); border-color: var(--emerald-dark); }

/* Sidebar — Regal Navy */
.sidebar {
    width: 260px; min-height: 100vh; transition: width 0.3s ease;
    overflow-x: hidden; position: fixed; top: 0; left: 0; z-index: 1000;
    background-color: var(--regal-navy);
}
.sidebar .sidebar-header { border-bottom: 1px solid rgba(255,255,255,0.15) !important; text-align: center; }
.sidebar .sidebar-header .logo-img { width: 80%; max-width: 200px; height: auto; }
.sidebar.collapsed { width: 70px; }
.sidebar.collapsed .sidebar-text { display: none; }
.sidebar .nav-link {
    transition: background-color 0.2s; font-size: 0.9rem;
    color: rgba(255,255,255,0.85); border-radius: 6px;
}
.sidebar .nav-link:hover { background-color: rgba(255,255,255,0.1); color: var(--white); }
.sidebar .nav-link.active { background-color: var(--emerald); color: var(--white); font-weight: 600; }
.sidebar .nav-link i { color: rgba(255,255,255,0.6); }
.sidebar .nav-link:hover i, .sidebar .nav-link.active i { color: var(--white); }

/* Main content */
.main-content { margin-left: 260px; transition: margin-left 0.3s ease; min-height: 100vh; background-color: var(--gray-50); }
.sidebar.collapsed + .main-content { margin-left: 70px; }

/* Navbar */
.navbar { background-color: var(--white) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* Cards */
.card { border: none; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.stat-card { border: none; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform 0.2s, box-shadow 0.2s; background: var(--white); }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.stat-card .stat-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

/* Tables */
.table th { font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray-500); }
.table-hover tbody tr:hover { background-color: var(--emerald-light); }

/* Badges */
.badge-status-active { background-color: var(--emerald); color: var(--white); }
.badge-status-inactive { background-color: var(--gray-500); }
.badge-status-pending { background-color: var(--amber-earth); color: var(--white); }
.badge-status-suspended { background-color: #dc3545; }
.badge-status-new { background-color: var(--regal-navy); }

/* Toast */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; }
.toast { border-radius: 8px; }

/* Loading */
.loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; z-index: 100; }

/* Auth pages */
.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--regal-navy) 0%, var(--regal-navy-dark) 50%, var(--emerald-dark) 100%); }
.auth-card { width: 100%; max-width: 420px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); border: none; }
.auth-card .btn-primary { font-weight: 600; padding: 10px; border-radius: 8px; }
.auth-card .logo-auth { height: 40px; width: auto; }

/* Forms */
.form-control:focus, .form-select:focus { border-color: var(--emerald); box-shadow: 0 0 0 0.2rem rgba(116, 202, 143, 0.25); }
.input-group-text { background-color: var(--gray-100); color: var(--gray-500); }

/* Pagination */
.page-link { color: var(--regal-navy); }
.page-item.active .page-link { background-color: var(--regal-navy); border-color: var(--regal-navy); }

/* Alerts */
.alert-info { background-color: var(--emerald-light); border-color: var(--emerald); color: var(--regal-navy); }

/* Responsive */
@media (max-width: 768px) {
    .sidebar { width: 70px; }
    .sidebar .sidebar-text { display: none; }
    .main-content { margin-left: 70px; }
    .sidebar.mobile-open { width: 260px; }
    .sidebar.mobile-open .sidebar-text { display: inline; }
}
