/* ==========================================================================
   cp-theme.css — CLIENT PANEL verzija Admin Panel dizajn sistema
   --------------------------------------------------------------------------
   Namerno koristi ISTE vrednosti (spacing/radius/font-size/boje-tokene) kao
   admin-panel/css/admin-theme.css, tako da oba panela vizuelno pripadaju
   istom proizvodu. --brand-* promenljive dolaze iz istog
   admin-panel/requires/brand-theme.php fajla (ukljucenog u requires/head.php),
   pa se boja menja zajedno na oba panela kad admin promeni Settings > Company.

   NISTA OVDE NE MENJA FUNKCIONALNOST — samo prezentaciju. Postojece klase
   (cp-outer, cp-container, cp-card, cp-page-title, status-badge...) i dalje
   rade — ovaj fajl samo precizira/poravnava njihove vrednosti sa admin
   panelom i dodaje par novih (KPI kartice, page-header sa toolbar-om,
   action-required, activity feed, empty-state) koje admin panel vec ima.
   ========================================================================== */

:root {
    /* Neutralne boje - identicno admin-theme.css */
    --mm-text: #161923;
    --mm-text-soft: #374151;
    --mm-text-muted: #8a8e99;
    --mm-icon-muted: #9CA3AF;
    --mm-border: #ececf1;
    --mm-border-soft: #f2f3f6;
    --mm-th-bg: #fafbfc;
    --mm-page-bg: #F8F9FC;

    /* Layout skala - identicno admin-theme.css */
    --mm-content-max: 1400px;
    --mm-content-pad: 32px;
    --mm-page-pad-top: 30px;
    --mm-page-pad-bottom: 44px;
    --mm-head-gap: 24px;
    --mm-ctl-h: 40px;
    --mm-th-h: 48px;
    --mm-td-h: 56px;
    --mm-cell-x: 20px;
    --mm-cell-y: 14px;
    --mm-r: 8px;
    --mm-r-card: 16px;
}

/* ==========================================================================
   0. STRANA — pozadina + container, isto kao Admin Panel
   ========================================================================== */
body { background: var(--mm-page-bg); }
#content-wrapper #content,
#content-wrapper .content { padding: 0 !important; background: var(--mm-page-bg); }

.cp-outer { padding: 0 !important; background: var(--mm-page-bg); min-height: 100%; }

.cp-container {
    max-width: var(--mm-content-max);
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--mm-content-pad) !important;
    padding-right: var(--mm-content-pad) !important;
    padding-top: var(--mm-page-pad-top) !important;
    padding-bottom: var(--mm-page-pad-bottom) !important;
}
@media (max-width: 900px) {
    .cp-container { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ==========================================================================
   1. PAGE HEADER — naslov + opis levo, toolbar/dugmad desno (isto kao
      admin-panel .oap-header-row / .oap-header-titles / .oap-header-toolbar)
   ========================================================================== */
.cp-header-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 26px;
}
.cp-header-titles { flex: 1 1 auto; min-width: 220px; }
#content-wrapper main h1,
#content h1,
.content h1,
.cp-header-titles h1,
.cp-page-title {
    margin: 0 0 5px !important;
    padding: 0 !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.22 !important;
    letter-spacing: -.01em !important;
    color: var(--mm-text) !important;
}
.cp-page-subtitle {
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    color: var(--mm-text-muted) !important;
}
.cp-header-toolbar {
    flex: 0 0 auto;
    margin-top: 4px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
/* Legacy .cp-page-header (older markup on some pages) gets the same treatment */
.cp-page-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 0 26px !important;
}
.cp-page-header .cp-page-title { margin: 0 0 5px !important; }
.cp-page-header .cp-page-actions { display: flex; align-items: center; gap: 10px; }

.cp-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--mm-text);
    margin: 32px 0 14px;
}

/* ==========================================================================
   2. BUTTONS — isti sistem kao Admin Panel (mm-btn / mm-btn--primary)
   ========================================================================== */
.cp-btn,
.btn.cp-btn {
    height: var(--mm-ctl-h);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 17px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 11px;
    border: 1.5px solid var(--mm-border);
    background: #fff;
    color: var(--mm-text);
    cursor: pointer;
    white-space: nowrap;
    transition: .15s;
    text-decoration: none;
}
.cp-btn:hover { border-color: #c9cdd8; color: var(--mm-text); text-decoration: none; }
.cp-btn-primary,
.btn.cp-btn-primary,
.btn.btn-primary {
    height: var(--mm-ctl-h);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 19px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 11px;
    border: none;
    background: var(--brand-500, #387fff) !important;
    color: var(--brand-contrast, #fff) !important;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s;
    text-decoration: none;
}
.cp-btn-primary:hover,
.btn.cp-btn-primary:hover,
.btn.btn-primary:hover { color: var(--brand-contrast, #fff) !important; text-decoration: none; filter: brightness(.94); }
.cp-btn-danger {
    height: var(--mm-ctl-h);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 17px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 11px;
    border: 1.5px solid #fecaca;
    background: #fff5f5;
    color: #b91c1c;
    cursor: pointer;
    text-decoration: none;
}
.cp-btn-danger:hover { background: #fee2e2; color: #991b1b; text-decoration: none; }

/* ==========================================================================
   3. CARDS — white / thin border / soft radius / minimal shadow
   ========================================================================== */
.cp-card {
    background: #fff;
    border: 1px solid var(--mm-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 22, 30, .03);
    padding: 22px;
}
.cp-card + .cp-card { margin-top: 16px; }

/* ---- KPI stat cards (Dashboard) ---- */
.cp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}
@media (max-width: 992px) { .cp-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cp-kpi-grid { grid-template-columns: 1fr; } }

.cp-kpi-card {
    background: #fff;
    border: 1px solid var(--mm-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20, 22, 30, .03);
    padding: 20px;
}
.cp-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cp-kpi-icon {
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.cp-kpi-label { color: var(--mm-text-muted); font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.cp-kpi-value { font-size: 26px; font-weight: 700; color: var(--mm-text); letter-spacing: -.01em; line-height: 1.2; }
.cp-kpi-trend { margin-top: 8px; font-size: 12px; color: var(--mm-text-muted); }
.cp-kpi-trend.up { color: #16a34a; }
.cp-kpi-trend.down { color: #dc2626; }

/* ==========================================================================
   4. TABLE SYSTEM — identican Admin Panel tabelama
   ========================================================================== */
.cp-table-wrap { overflow-x: auto; border-radius: 14px; }
table.portal-table,
table.cp-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin: 0;
}
table.portal-table thead th,
table.cp-table thead th {
    white-space: nowrap;
    background: var(--mm-th-bg);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--mm-text);
    text-transform: uppercase;
    letter-spacing: .045em;
    padding: var(--mm-cell-y) var(--mm-cell-x);
    border-bottom: 1px solid var(--mm-border);
    text-align: left;
    height: var(--mm-th-h);
}
table.portal-table tbody td,
table.cp-table tbody td {
    padding: var(--mm-cell-y) var(--mm-cell-x);
    font-size: 13.5px;
    color: var(--mm-text);
    vertical-align: middle;
    border-bottom: 1px solid var(--mm-border-soft);
    height: var(--mm-td-h);
    box-sizing: border-box;
}
table.portal-table tbody tr:last-child td,
table.cp-table tbody tr:last-child td { border-bottom: none; }
table.portal-table tbody tr:hover td,
table.cp-table tbody tr:hover td { background: #fbfbfd; }

/* ==========================================================================
   5. STATUS BADGES — pastel pozadina + tackica, isto kao Admin Panel
   ========================================================================== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.status-badge::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.status-badge.badge-primary  { background: #E4EDFD; color: #2563EB; }
.status-badge.badge-warning  { background: #FEF3C7; color: #B45309; }
.status-badge.badge-info     { background: #EDE9FE; color: #6D28D9; }
.status-badge.badge-success  { background: #DCFCE7; color: #16A34A; }
.status-badge.badge-danger   { background: #FEE2E2; color: #DC2626; }
.status-badge.badge-secondary{ background: #EFF1F5; color: #6B7280; }

/* ==========================================================================
   6. EMPTY STATES — mali icon + naslov + opis + CTA, bez ilustracija
   ========================================================================== */
.cp-empty {
    padding: 56px 20px;
    text-align: center;
}
.cp-empty-icon {
    width: 52px; height: 52px;
    border-radius: 15px;
    background: #f4f5f9;
    color: var(--mm-icon-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin: 0 auto 16px;
}
.cp-empty h3 { font-size: 15.5px; font-weight: 700; color: var(--mm-text); margin: 0 0 6px; }
.cp-empty p { font-size: 13.5px; color: var(--mm-text-muted); margin: 0 0 18px; max-width: 340px; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   7. ACTION REQUIRED + RECENT ACTIVITY (Dashboard)
   ========================================================================== */
.cp-action-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--mm-border-soft);
    text-decoration: none;
}
.cp-action-item:last-child { border-bottom: none; }
.cp-action-item:hover { text-decoration: none; }
.cp-action-icon {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13.5px;
    background: #FEF3C7; color: #B45309;
}
.cp-action-title { font-size: 13.5px; font-weight: 700; color: var(--mm-text); line-height: 1.35; }
.cp-action-desc { font-size: 12.5px; color: var(--mm-text-muted); margin-top: 2px; }
.cp-action-cta { margin-left: auto; align-self: center; flex-shrink: 0; }

.cp-activity-item { display: flex; gap: 13px; padding: 12px 4px; }
.cp-activity-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand-500, #387fff);
    margin-top: 6px; flex-shrink: 0;
}
.cp-activity-text { font-size: 13.5px; color: var(--mm-text); line-height: 1.4; }
.cp-activity-date { font-size: 12px; color: var(--mm-text-muted); margin-top: 2px; }

/* ==========================================================================
   8. PROGRESS BAR (project detail)
   ========================================================================== */
.cp-progress-track { background: var(--mm-border-soft); border-radius: 20px; height: 8px; overflow: hidden; }
.cp-progress-fill { background: var(--brand-500, #387fff); height: 100%; border-radius: 20px; transition: width .3s ease; }

/* ==========================================================================
   9. TABS (project detail / referral / etc)
   ========================================================================== */
.cp-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--mm-border); margin-bottom: 20px; }
.cp-tab-link {
    background: none; border: none; padding: 13px 14px; font-size: 13.5px; font-weight: 600;
    color: var(--mm-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cp-tab-link.active { color: var(--brand-500, #387fff); border-bottom-color: var(--brand-500, #387fff); }