/* =========================================================================
   client-panel/css/cp-shared.css
   -------------------------------------------------------------------------
   Jedan zajednicki stil za sve Client Panel stranice (Wayfront redizajn).
   Ucitava se GLOBALNO iz requires/head.php, pa ga NE treba duplirati kao
   inline <style> blok po pojedinacnim stranicama (dashboard.php, tickets.php,
   services_folder.php, itd). Ako nekoj stranici treba nesto specificno samo
   za nju (npr. .orderform, .subscription-card), to ostaje inline u toj
   stranici - ali sve sto je zajednicko (container, page title, kartice,
   tabele, status badge, dugmad) zivi ovde.
   ========================================================================= */

/* ---------- Container / spacing ---------- */
.cp-outer {
    padding: 0 !important;
}

.cp-container {
    padding: 28px 32px;
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 768px) {
    .cp-container {
        padding: 20px 16px;
    }
}

/* ---------- Page header (naslov + opciono dugme/tabovi desno) ---------- */
.cp-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 20px;
}

.cp-page-header .cp-page-title {
    margin: 0;
}

.cp-page-header .cp-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* h1 unutar Client Panel sadrzaja - jedan standard, bez potrebe da svaka
   stranica rucno dodaje klasu ili duplira !important pravila. */
#content-wrapper main h1,
#content h1,
.content h1 {
    font-size: 22px;
    font-weight: 700;
    color: #1f2328;
    margin: 0 0 20px;
    line-height: 1.3;
}

/* Eksplicitna klasa i dalje radi/moze da se koristi za jasnocu u markup-u,
   ali vise nije neophodna da bi h1 dobio ispravan izgled. */
.cp-page-title {
    font-size: 22px;
    font-weight: 700;
    color: #1f2328;
    margin: 0 0 20px;
    line-height: 1.3;
}

.cp-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2328;
    margin: 32px 0 12px;
}

/* ---------- Stats grid (Dashboard-style brojcane kartice) ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    padding: 18px 18px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.stat-card .text-muted {
    font-size: 12.5px;
    font-weight: 600;
    color: #9aa0ac !important;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.stat-card h2 {
    font-size: 1.9rem;
    font-weight: 700;
    margin: 6px 0 0;
    color: #1f2328;
}

.stat-card a.text-reset:hover h2 {
    color: #4f6ef7;
}

@media (max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-card h2 { font-size: 1.5rem; }
}

/* ---------- Kartice (containeri za tabele/sadrzaj) ---------- */
.cp-card {
    background: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(189, 191, 228, .15);
    overflow: hidden;
    padding: 1.1rem 1.25rem;
}

/* ---------- Tabele ---------- */
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.table-responsive-wrapper table {
    min-width: 500px;
    margin-bottom: 0;
}

.portal-table thead th {
    background: #fafafd !important;
    color: #6b778c !important;
    font-size: .75rem !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    font-weight: 600 !important;
    border-top: none !important;
    border-bottom: 1px solid #ebecf0 !important;
    padding-top: 12px;
    padding-bottom: 12px;
}

.portal-table tbody td {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    vertical-align: middle;
    font-size: 14px;
    color: #374151;
}

.portal-table tbody tr:hover td {
    background: #fafafd;
}

.portal-table a {
    color: #1f2328;
    font-weight: 500;
    text-decoration: none;
}

.portal-table a:hover {
    color: #4f6ef7;
}

/* ---------- Status badge ---------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.badge-warning   { background: #fff7e6; color: #b7791f; }
.status-badge.badge-success   { background: #e6f7ee; color: #1f8a4c; }
.status-badge.badge-danger    { background: #fdeaea; color: #c0392b; }
.status-badge.badge-neutral,
.status-badge.badge-secondary { background: #eef0f3; color: #6b778c; }

/* ---------- Back link bar ---------- */
/* style.css has a global rule: .content div.container-fluid:not(.orderform)
   { margin-bottom: 3rem; } - meant for other layouts, but on detail pages
   where a "container-fluid" is used ONLY to hold the small Back link above
   the real cp-container, it pushed the page title way too far down. This
   class overrides that margin back to something sane. Apply it alongside
   container-fluid on any wrapper that holds just the Back link. */
.container-fluid.cp-back-bar {
    margin-bottom: 12px !important;
}

.data-empty {
    color: #b7bcc6;
}

/* ---------- Dugmad ---------- */
.btn-primary {
    background: #4f6ef7 !important;
    border-color: #4f6ef7 !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 14px;
}

.btn-primary:hover {
    background: #3f5ce0 !important;
}