.oj-dashboard-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin:30px 0;
}

.oj-stat-card{
    background:#fff;
    border-radius:18px;
    padding:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.oj-stat-title{
    display:block;
    font-size:14px;
    color:#777;
    margin-bottom:10px;
}

.oj-stat-card h2{
    margin:0;
    font-size:36px;
    font-weight:700;
    color:#0F172A;
}

@media(max-width:991px){

.oj-dashboard-stats{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.oj-dashboard-stats{

grid-template-columns:1fr;

}

}

/*=========================================
Quick Actions
=========================================*/

.oj-action-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:25px;

}

.oj-action-card{

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:30px;

    text-decoration:none;

    color:#111827;

    font-size:32px;

    text-align:center;

    transition:.3s;

}

.oj-action-card span{

    display:block;

    margin-top:15px;

    font-size:15px;

    font-weight:600;

}

.oj-action-card:hover{

    transform:translateY(-6px);

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    border-color:#000;

}

@media(max-width:991px){

.oj-action-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.oj-action-grid{

grid-template-columns:1fr;

}

}

.oj-dashboard-sidebar ul{

    list-style:none;

    margin:30px 0;

    padding:0;

}

.oj-dashboard-sidebar li{

    margin-bottom:12px;

}

.oj-dashboard-sidebar a{

    display:block;

    padding:15px 18px;

    border-radius:12px;

    text-decoration:none;

    color:#374151;

    font-weight:600;

    transition:.3s;

}

.oj-dashboard-sidebar a:hover{

    background:#F3F4F6;

}

.oj-dashboard-sidebar a.active{

    background:#000;

    color:#fff;

}

/*=========================================
Dashboard Header
=========================================*/

.oj-dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

    padding:35px;

    background:#fff;

    border-radius:20px;

    box-shadow:var(--oj-shadow);

}

.oj-dashboard-header h1{

    margin:0;

    font-size:34px;

}

.oj-dashboard-header p{

    margin-top:8px;

    color:#6B7280;

}

.oj-dashboard-progress{

    width:120px;

    height:120px;

    border-radius:50%;

    border:8px solid #22C55E;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.oj-dashboard-progress strong{

    font-size:32px;

}

.oj-dashboard-progress span{

    font-size:12px;

    text-align:center;

}

.oj-app{

    display:flex;

    min-height:100vh;

    background:#F8FAFC;

}

.oj-sidebar{

    width:280px;

    background:#111827;

    color:#fff;

    padding:30px;

}

.oj-logo{

    font-size:28px;

    font-weight:700;

    margin-bottom:40px;

}

.oj-sidebar ul{

    list-style:none;

    margin:0;

    padding:0;

}

.oj-sidebar li{

    margin-bottom:10px;

}

.oj-sidebar a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    color:#E5E7EB;

    text-decoration:none;

    border-radius:12px;

}

.oj-sidebar a:hover{

    background:#1F2937;

}

.oj-app-main{

    flex:1;

    display:flex;

    flex-direction:column;

}

.oj-header{

    height:80px;

    background:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 40px;

    border-bottom:1px solid #E5E7EB;

}

.oj-app-content{

    padding:40px;

}

.oj-page-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

}

.oj-page-header h1{

margin:0;

font-size:34px;

}

.oj-page-header p{

margin-top:8px;

color:#6B7280;

}

.oj-completion{

width:120px;

height:120px;

border-radius:50%;

background:#10B981;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

color:#fff;

}

.oj-completion span{

font-size:32px;

font-weight:700;

}

.oj-completion small{

font-size:12px;

}

.oj-stat-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-bottom:35px;

}

.oj-stat-card{

background:#fff;

padding:30px;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.oj-stat-card h3{

font-size:15px;

margin-bottom:15px;

color:#6B7280;

}

.oj-stat-card strong{

font-size:36px;

display:block;

}

.oj-card{

background:#fff;

padding:30px;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

margin-bottom:30px;

}

.oj-action-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin-top:25px;

}

.oj-action-card{

display:flex;

justify-content:center;

align-items:center;

height:120px;

border:2px dashed #D1D5DB;

border-radius:16px;

text-decoration:none;

font-weight:600;

color:#111827;

transition:.25s;

}

.oj-action-card:hover{

background:#111827;

color:#fff;

border-color:#111827;

}

.oj-dashboard{
    display:flex;
    gap:30px;
    margin:40px auto;
}

.oj-sidebar{
    width:260px;
    background:#fff;
    border-radius:16px;
    padding:25px;
}

.oj-main{
    flex:1;
}

.oj-dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
    background:#fff;
    padding:25px;
    border-radius:16px;
}

.oj-sidebar-menu{
    list-style:none;
    padding:0;
    margin-top:30px;
}

.oj-sidebar-menu li{
    margin-bottom:8px;
}

.oj-sidebar-menu a{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    padding:12px 15px;
    border-radius:10px;
}

.oj-sidebar-menu li.active a{
    background:#f4a62a;
    color:#fff;
}

.oj-stat-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:30px;
}

.oj-card{
background:#fff;
padding:25px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.oj-card h2{
margin-top:10px;
font-size:34px;
}

.oj-two-column{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}

.oj-card ul{
margin:0;
padding-left:20px;
}

.oj-card li{
margin-bottom:10px;
}

.oj-form-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-bottom:20px;

}

.oj-form-grid input,
textarea{

width:100%;

padding:14px;

border:1px solid #ddd;

border-radius:10px;

font-size:15px;

}

label{

display:block;

margin-bottom:8px;

font-weight:600;

}

.oj-btn{

background:#f6a623;

color:#fff;

border:none;

padding:14px 28px;

border-radius:10px;

cursor:pointer;

font-weight:600;

margin-top:20px;

}

.oj-dashboard-header-actions{

    display:flex;

    align-items:center;

    gap:20px;
}

/*==========================================
Dashboard Header 2.0
==========================================*/

.oj-dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#fff;

    padding:25px 30px;

    border-radius:18px;

    margin-bottom:25px;

    box-shadow:0 10px 35px rgba(15,23,42,.06);

}

.oj-dashboard-header-left h2{

    margin:8px 0 5px;

    font-size:28px;

    font-weight:700;

}

.oj-dashboard-header-left p{

    color:#64748B;

}

.oj-dashboard-greeting{

    color:#FF6B00;

    font-weight:600;

}

.oj-dashboard-header-actions{

    display:flex;

    align-items:center;

    gap:18px;

}

.oj-header-icon{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#F8FAFC;

    cursor:pointer;

    transition:.3s;

}

.oj-header-icon:hover{

    background:#EEF2FF;

}

.oj-header-add{

    background:#FF6B00;

    color:#fff;

    border:none;

    border-radius:12px;

    padding:12px 18px;

    font-weight:600;

    cursor:pointer;

}

.oj-user-avatar{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#FF6B00;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:18px;

}

/*==========================================
Sidebar 2.0
==========================================*/

.oj-sidebar{

    background:#fff;

    border-radius:20px;

    box-shadow:0 12px 40px rgba(15,23,42,.06);

    overflow:hidden;

}

.oj-sidebar-header{

    padding:22px 20px;

    text-align:center;

    border-bottom:1px solid #EEF2F7;

}

.oj-sidebar-logo{

    width:80px;

    height:80px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:15px;

}

.oj-sidebar-avatar{

    width:64px;

    height:64px;

    margin:auto;

    border-radius:50%;

    background:#FF6B00;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    margin-bottom:15px;

}

.oj-sidebar-header h3{

    margin:0;

    font-size:20px;

}

.oj-sidebar-header small{

    color:#64748B;

}

.oj-sidebar-progress{

    padding:20px 25px;

}

.oj-progress-title{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

    font-size:14px;

}

.oj-sidebar-menu{

    padding:10px 0;

}

.oj-sidebar-menu li{

    margin:3px 12px;

}

.oj-sidebar-menu a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:11px 15px;

    border-radius:12px;

    transition:.3s;

}

.oj-sidebar-menu li.active a{

    background:#FF6B00;

    color:#fff;

}

.oj-sidebar-menu a:hover{

    background:#FFF3EC;

}

/*======================================
Executive Dashboard
======================================*/

.oj-dashboard-banner{

display:flex;

justify-content:space-between;

align-items:center;

background:linear-gradient(135deg,#FF6B00,#FF8A33);

padding:35px;

border-radius:20px;

color:#fff;

margin-bottom:30px;

}

.oj-dashboard-kpis{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-bottom:30px;

}

.oj-kpi-card{

background:#fff;

padding:25px;

border-radius:18px;

box-shadow:0 12px 40px rgba(15,23,42,.06);

transition:.3s;

}

.oj-kpi-card:hover{

transform:translateY(-5px);

}

.oj-kpi-icon{

width:56px;

height:56px;

border-radius:16px;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

margin-bottom:20px;

font-size:22px;

}

.oj-dashboard-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:25px;

}

.oj-action-list{

padding-left:18px;

line-height:2.2;

}

/*======================================
Welcome Banner
======================================*/

.oj-overview-banner{

display:flex;

justify-content:space-between;

align-items:center;

padding:35px;

border-radius:22px;

background:linear-gradient(135deg,#FF6B00,#FF944D);

color:#fff;

margin-bottom:30px;

box-shadow:0 18px 45px rgba(255,107,0,.20);

}

.oj-overview-left h1{

margin:10px 0;

font-size:34px;

font-weight:700;

}

.oj-overview-left p{

opacity:.95;

font-size:16px;

}

.oj-overview-greeting{

font-weight:600;

opacity:.95;

}

.oj-overview-progress{

width:280px;

background:rgba(255,255,255,.12);

padding:20px;

border-radius:16px;

backdrop-filter:blur(10px);

}

.oj-overview-progress small{

display:block;

margin-bottom:8px;

}

.oj-overview-progress strong{

font-size:28px;

display:block;

margin-bottom:15px;

}

.oj-overview-progress .oj-progress{

background:rgba(255,255,255,.25);

border-radius:20px;

overflow:hidden;

height:10px;

}

.oj-overview-progress .oj-progress-bar{

background:#fff;

height:10px;

}

/*==========================================
Executive KPI Cards
==========================================*/

.oj-kpi-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:22px;

margin-bottom:30px;

}

.oj-kpi-card{

background:#fff;

padding:24px;

border-radius:18px;

box-shadow:0 15px 40px rgba(15,23,42,.06);

transition:.35s;

border-top:5px solid transparent;

}

.oj-kpi-card:hover{

transform:translateY(-6px);

}

.oj-kpi-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.oj-kpi-icon{

width:58px;

height:58px;

border-radius:16px;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

color:#fff;

}

.oj-kpi-value{

font-size:30px;

font-weight:700;

}

.oj-kpi-card h3{

margin-bottom:8px;

}

.oj-kpi-card p{

color:#64748B;

font-size:14px;

line-height:1.6;

}

/* Theme Colors */

.oj-kpi-card.primary{

border-color:#2563EB;

}

.oj-kpi-card.primary .oj-kpi-icon{

background:#2563EB;

}

.oj-kpi-card.success{

border-color:#10B981;

}

.oj-kpi-card.success .oj-kpi-icon{

background:#10B981;

}

.oj-kpi-card.warning{

border-color:#F59E0B;

}

.oj-kpi-card.warning .oj-kpi-icon{

background:#F59E0B;

}

.oj-kpi-card.purple{

border-color:#8B5CF6;

}

.oj-kpi-card.purple .oj-kpi-icon{

background:#8B5CF6;

}

/*==========================================
Quick Actions
==========================================*/

.oj-dashboard-section{

background:#fff;

padding:28px;

border-radius:20px;

box-shadow:0 12px 40px rgba(15,23,42,.06);

margin-bottom:30px;

}

.oj-section-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.oj-section-header h2{

margin:0 0 6px;

font-size:24px;

}

.oj-section-header p{

margin:0;

color:#64748B;

}

.oj-quick-actions-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

gap:18px;

}

.oj-action-card{

background:#F8FAFC;

border:1px solid #EEF2F7;

border-radius:18px;

padding:24px;

text-align:center;

transition:.35s;

text-decoration:none;

color:#0F172A;

}

.oj-action-card:hover{

transform:translateY(-6px);

background:#FF6B00;

color:#fff;

box-shadow:0 18px 35px rgba(255,107,0,.25);

}

.oj-action-card i{

font-size:30px;

margin-bottom:18px;

display:block;

}

.oj-action-card span{

font-weight:600;

}

/*==========================================
Timeline
==========================================*/

.oj-timeline{

display:flex;

flex-direction:column;

gap:18px;

}

.oj-timeline-item{

display:flex;

align-items:center;

gap:18px;

padding:18px;

border-radius:16px;

background:#F8FAFC;

transition:.3s;

}

.oj-timeline-item:hover{

background:#FFF3EC;

}

.oj-timeline-icon{

width:52px;

height:52px;

border-radius:50%;

background:#FF6B00;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:18px;

flex-shrink:0;

}

.oj-timeline-content{

display:flex;

flex-direction:column;

}

.oj-timeline-content strong{

margin-bottom:5px;

}

.oj-timeline-content small{

color:#64748B;

}

/*==========================================
Empty States
==========================================*/

.oj-empty-state{

padding:60px 30px;

text-align:center;

color:#64748B;

}

.oj-empty-state i{

font-size:48px;

margin-bottom:20px;

color:#CBD5E1;

}

.oj-empty-state h3{

margin-bottom:10px;

}

/*==========================================
Vendor Dashboard UI Refinements v1.1
==========================================*/

/* Sidebar navigation */

.oj-sidebar-menu a{

    color:#475569;

    font-size:14px;

    font-weight:500;

}

.oj-sidebar-menu a i{

    width:20px;

    text-align:center;

    color:#64748B;

    transition:.25s;

}

.oj-sidebar-menu a:hover{

    background:#FFF3EC;

    color:#FF6B00;

}

.oj-sidebar-menu a:hover i{

    color:#FF6B00;

}

.oj-sidebar-menu li.active a{

    background:#FF6B00;

    color:#fff;

    font-weight:600;

}

.oj-sidebar-menu li.active a i{

    color:#fff;

}

/* ==========================================================
   Reference Calls - Status Cards
   ========================================================== */

.oj-reference-status-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Tablet */
@media (max-width: 1100px) {
    .oj-reference-status-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 700px) {
    .oj-reference-status-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   OjaLinks Admin - Reference Calls Filter / Search
   Step 9H.4C
   ========================================================== */

.oj-admin-filter-form {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}

.oj-admin-filter-form .oj-form-group {
    flex: 1 1 400px;
    margin: 0;
}

.oj-admin-filter-form .oj-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}

.oj-admin-filter-form .oj-input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #d9dee7;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
}

.oj-admin-filter-form .oj-input:focus {
    outline: none;
    border-color: #f5a623;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.12);
}

.oj-admin-filter-form .oj-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.oj-admin-filter-form .oj-form-actions .oj-admin-button {
    min-height: 46px;
    white-space: nowrap;
}

/* Mobile */
@media (max-width: 700px) {

    .oj-admin-filter-form {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .oj-admin-filter-form .oj-form-group {
        flex: 1 1 auto;
        width: 100%;
    }

    .oj-admin-filter-form .oj-form-actions {
        width: 100%;
    }

    .oj-admin-filter-form .oj-form-actions .oj-admin-button {
        flex: 1;
    }

}

/* ==========================================================
   OjaLinks Admin - Reference Calls Table
   Step 9H.4D
   ========================================================== */

.oj-reference-status-grid {
    margin-bottom: 28px;
}

.oj-reference-status-grid .oj-stat-card {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.oj-reference-status-grid .oj-stat-card:hover {
    transform: translateY(-2px);
}

.oj-reference-status-grid .oj-stat-card.is-active {
    border-color: #f5a623;
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.12);
}

.oj-reference-status-grid .oj-stat-label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 16px;
    font-weight: 600;
}

.oj-reference-status-grid .oj-stat-value {
    display: block;
    color: #f5a623;
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
}


/* ----------------------------------------------------------
   Reference Table
   ---------------------------------------------------------- */

.oj-reference-filter + .oj-card {
    margin-top: 24px;
}

.oj-admin-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.oj-admin-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

.oj-admin-table thead th {
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.oj-admin-table tbody td {
    padding: 16px;
    border-bottom: 1px solid #edf1f5;
    color: #334155;
    font-size: 14px;
    vertical-align: middle;
}

.oj-admin-table tbody tr {
    transition: background-color 0.15s ease;
}

.oj-admin-table tbody tr:hover {
    background: #fafafa;
}

.oj-admin-table tbody tr:last-child td {
    border-bottom: 0;
}


/* Vendor / Reference identity */

.oj-admin-table tbody td strong {
    display: block;
    color: #0f172a;
    font-weight: 700;
    line-height: 1.45;
}

.oj-admin-table tbody td small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    word-break: break-word;
}


/* Status badge */

.oj-admin-table .oj-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.oj-admin-table .oj-status-pending {
    background: #fff7e6;
    color: #b7791f;
}

.oj-admin-table .oj-status-attempted,
.oj-admin-table .oj-status-unreachable {
    background: #eef4ff;
    color: #3159a5;
}

.oj-admin-table .oj-status-verified {
    background: #eaf8ef;
    color: #16834a;
}

.oj-admin-table .oj-status-failed {
    background: #fff0f0;
    color: #c53030;
}


/* Log Outcome button */

.oj-reference-review-button {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.oj-reference-review-button:hover {
    transform: translateY(-1px);
}


/* Empty state */

.oj-admin-empty {
    padding: 48px 24px;
    text-align: center;
}

.oj-admin-empty strong {
    display: block;
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 17px;
}

.oj-admin-empty p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}


/* Pagination */

.oj-admin-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.oj-admin-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d9dee7;
    border-radius: 7px;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.oj-admin-pagination a:hover {
    border-color: #f5a623;
    color: #f5a623;
}

.oj-admin-pagination a.is-active {
    border-color: #f5a623;
    background: #f5a623;
    color: #ffffff;
}


/* Mobile table */

@media (max-width: 700px) {

    .oj-admin-table {
        min-width: 760px;
    }

    .oj-admin-table thead th,
    .oj-admin-table tbody td {
        padding: 12px;
    }

}

/* ==========================================================
   OjaLinks Admin - Reference Outcome Modal
   Step 9H.4E
   ========================================================== */

/* Modal container - hidden by default */
.oj-reference-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

/* Modal becomes visible when JavaScript adds .is-open */
.oj-reference-modal.is-open {
    display: flex;
}

/* Dark background overlay */
.oj-reference-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
}

/* Modal window */
.oj-reference-modal-dialog {
    position: relative;
    z-index: 2;
    width: min(620px, calc(100% - 40px));
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.25);
}

/* Modal header */
.oj-reference-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    border-bottom: 1px solid #eef2f7;
}

.oj-reference-modal-header h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 22px;
    font-weight: 700;
}

.oj-reference-modal-header p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

/* Close button */
.oj-reference-modal-close {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #ffffff;
    color: #475569;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: .2s ease;
}

.oj-reference-modal-close:hover {
    background: #f8fafc;
    color: #0f172a;
}

/* Modal body */
.oj-reference-modal-body {
    padding: 28px;
}

/* Form groups */
.oj-reference-modal-body .oj-form-group {
    margin-bottom: 22px;
}

.oj-reference-modal-body .oj-form-group:last-child {
    margin-bottom: 0;
}

.oj-reference-modal-body .oj-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}

/* Select and textarea */
.oj-reference-modal-body .oj-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d9dee7;
    border-radius: 9px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
}

.oj-reference-modal-body select.oj-input {
    min-height: 46px;
}

.oj-reference-modal-body textarea.oj-input {
    min-height: 130px;
    resize: vertical;
}

.oj-reference-modal-body .oj-input:focus {
    outline: none;
    border-color: #f5a623;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.12);
}

/* Success / error message */
.oj-reference-review-message {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.oj-reference-review-message[hidden] {
    display: none;
}

/* Modal footer */
.oj-reference-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 28px;
    border-top: 1px solid #eef2f7;
    background: #fafbfc;
    border-radius: 0 0 18px 18px;
}

/* Mobile */
@media (max-width: 700px) {

    .oj-reference-modal-dialog {
        width: calc(100% - 24px);
        max-height: calc(100vh - 24px);
        border-radius: 14px;
    }

    .oj-reference-modal-header {
        padding: 20px;
    }

    .oj-reference-modal-body {
        padding: 20px;
    }

    .oj-reference-modal-footer {
        padding: 16px 20px;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .oj-reference-modal-footer .oj-admin-button {
        width: 100%;
    }

}









/* ==========================================================
   OjaLinks Admin - Notifications Log
   Step 9I.6
   ========================================================== */
.oj-notification-log-summary {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:24px;
}

.oj-notification-log-summary-card {
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:18px;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
}

.oj-notification-log-summary-card .label {
    display:block;
    color:#64748b;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:8px;
}

.oj-notification-log-summary-card .value {
    display:block;
    color:#0f172a;
    font-size:25px;
    font-weight:700;
    line-height:1.1;
}

.oj-notification-log-filters {
    display:flex;
    align-items:flex-end;
    gap:14px;
    flex-wrap:wrap;
    padding:18px;
    margin-bottom:20px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:14px;
}

.oj-notification-log-filters .field {
    flex:1 1 180px;
}

.oj-notification-log-filters label {
    display:block;
    margin-bottom:7px;
    color:#475569;
    font-size:13px;
    font-weight:600;
}

.oj-notification-log-filters select,
.oj-notification-log-filters input {
    width:100%;
    min-height:44px;
    padding:0 12px;
    border:1px solid #d9dee7;
    border-radius:8px;
    background:#fff;
    color:#0f172a;
    box-sizing:border-box;
}

.oj-notification-log-filters .actions {
    display:flex;
    gap:8px;
    flex:0 0 auto;
}

.oj-notification-log-table-wrap {
    overflow-x:auto;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#fff;
}

.oj-notification-log-table {
    width:100%;
    min-width:1050px;
    border-collapse:collapse;
}

.oj-notification-log-table th {
    padding:13px 14px;
    text-align:left;
    background:#f8fafc;
    border-bottom:1px solid #e2e8f0;
    color:#475569;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    white-space:nowrap;
}

.oj-notification-log-table td {
    padding:14px;
    border-bottom:1px solid #eef2f7;
    color:#334155;
    font-size:13px;
    vertical-align:top;
}

.oj-notification-log-table tr:last-child td {
    border-bottom:0;
}

.oj-notification-log-recipient strong {
    display:block;
    color:#0f172a;
    margin-bottom:3px;
}

.oj-notification-log-recipient small {
    color:#64748b;
}

.oj-notification-log-message {
    max-width:330px;
    white-space:normal;
    line-height:1.5;
}

.oj-notification-log-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    text-transform:capitalize;
    white-space:nowrap;
}

.oj-notification-log-badge.status-sent {
    background:#dcfce7;
    color:#166534;
}

.oj-notification-log-badge.status-failed {
    background:#fee2e2;
    color:#991b1b;
}

.oj-notification-log-badge.status-pending {
    background:#fef3c7;
    color:#92400e;
}

.oj-notification-log-badge.channel-email {
    background:#e0f2fe;
    color:#075985;
}

.oj-notification-log-badge.channel-sms {
    background:#ede9fe;
    color:#5b21b6;
}

.oj-notification-log-badge.channel-whatsapp {
    background:#dcfce7;
    color:#166534;
}

.oj-notification-log-badge.channel-in_app {
    background:#f1f5f9;
    color:#475569;
}

.oj-notification-log-error {
    margin-top:6px;
    color:#b91c1c;
    font-size:12px;
    line-height:1.45;
}

.oj-notification-log-pagination {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-top:18px;
}

.oj-notification-log-pagination .meta {
    color:#64748b;
    font-size:13px;
}

.oj-notification-log-pagination .links {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.oj-notification-log-pagination a,
.oj-notification-log-pagination span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    padding:0 10px;
    border:1px solid #d9dee7;
    border-radius:8px;
    background:#fff;
    color:#334155;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
}

.oj-notification-log-pagination .current {
    background:#0f172a;
    border-color:#0f172a;
    color:#fff;
}

.oj-notification-log-empty {
    padding:60px 20px;
    text-align:center;
    color:#64748b;
}

.oj-notification-log-empty i {
    display:block;
    margin-bottom:12px;
    font-size:38px;
    color:#cbd5e1;
}

@media (max-width:900px) {
    .oj-notification-log-summary {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:600px) {
    .oj-notification-log-summary {
        grid-template-columns:1fr;
    }

    .oj-notification-log-filters {
        align-items:stretch;
        flex-direction:column;
    }

    .oj-notification-log-filters .field,
    .oj-notification-log-filters .actions {
        width:100%;
    }

    .oj-notification-log-filters .actions .oj-admin-button {
        flex:1;
    }
}

.oj-sidebar-logout{margin:18px 14px 0;border-top:1px solid rgba(15,23,42,.08);padding-top:14px}.oj-sidebar-logout a{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:10px;color:#64748b;text-decoration:none;font-size:13px;font-weight:700}.oj-sidebar-logout a:hover{background:#fff0f0;color:#b91c1c}.oj-admin-user{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px}.oj-admin-user span{color:#64748b}.oj-admin-user a{color:#b91c1c;text-decoration:none;font-weight:800;white-space:nowrap}

/* Dashboard header refinements */
.oj-dashboard-header .oj-header-icon{
    color:#0f172a;
    text-decoration:none;
}
.oj-dashboard-header .oj-user-avatar{
    text-decoration:none;
    cursor:pointer;
}
.oj-dashboard-header .oj-badge.oj-success{
    background:#dcfce7!important;
    color:#15803d!important;
    opacity:1!important;
    border:1px solid #bbf7d0;
}


/* =========================================================
   OJALINKS VENDOR / BUSINESS DASHBOARD — MODERN SAAS v31.1
   Visual-only refinement. Existing PHP/AJAX behaviour preserved.
   ========================================================= */

.oj-dashboard{
    width:min(1440px,100%);
    margin:28px auto!important;
    padding:0 28px;
    gap:24px!important;
    align-items:stretch;
    color:#111111;
}

.oj-dashboard > .oj-sidebar{
    flex:0 0 250px;
    width:250px!important;
    min-height:calc(100vh - 128px);
    background:#050505!important;
    color:#fff!important;
    border-radius:20px;
    padding:24px 16px!important;
    box-shadow:0 20px 50px rgba(0,0,0,.14);
    position:sticky;
    top:20px;
    align-self:flex-start;
    overflow:hidden;
}

.oj-sidebar-header{
    padding:8px 10px 18px!important;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,.08);
    margin-bottom:14px;
}
.oj-sidebar-header h3{
    color:#fff!important;
    font-size:15px!important;
    line-height:1.35;
    margin:12px 0 3px!important;
    font-weight:800;
}
.oj-sidebar-header small{
    color:rgba(255,255,255,.52)!important;
    font-size:10px!important;
}
.oj-sidebar-logo,
.oj-sidebar-avatar{
    width:58px!important;
    height:58px!important;
    margin:0 auto!important;
    border-radius:16px!important;
}
.oj-sidebar-avatar{
    display:grid;
    place-items:center;
    background:#ff6800!important;
    color:#fff!important;
    font-size:22px!important;
    font-weight:800;
}

.oj-sidebar-progress{
    margin:14px 6px 16px!important;
    padding:13px!important;
    border-radius:14px;
    background:rgba(255,255,255,.055)!important;
    border:1px solid rgba(255,255,255,.08);
}
.oj-progress-title{
    color:rgba(255,255,255,.76)!important;
    font-size:10px!important;
}
.oj-progress-title strong{
    color:#fff!important;
}
.oj-progress{
    height:7px!important;
    background:rgba(255,255,255,.12)!important;
    border-radius:999px;
    overflow:hidden;
    margin-top:9px;
}
.oj-progress-bar{
    background:#ff6800!important;
    border-radius:999px;
}

.oj-sidebar-menu{
    margin:8px 0 0!important;
}
.oj-sidebar-menu li{
    margin-bottom:4px!important;
}
.oj-sidebar-menu a{
    display:flex!important;
    align-items:center;
    gap:11px!important;
    padding:11px 12px!important;
    color:rgba(255,255,255,.68)!important;
    border-radius:10px!important;
    font-size:11px!important;
    font-weight:700!important;
    transition:all .2s ease!important;
}
.oj-sidebar-menu a i{
    width:18px;
    text-align:center;
    color:#ff6800!important;
    font-size:13px!important;
}
.oj-sidebar-menu li.active a{
    background:#ff6800!important;
    color:#fff!important;
    box-shadow:0 10px 25px rgba(255,104,0,.22);
}
.oj-sidebar-menu li.active a i{
    color:#fff!important;
}
.oj-sidebar-menu a:hover{
    background:rgba(255,104,0,.12)!important;
    color:#fff!important;
    transform:translateX(2px);
}

.oj-sidebar-logout{
    margin-top:14px!important;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.08);
}
.oj-sidebar-logout a{
    color:rgba(255,255,255,.66)!important;
    font-size:11px!important;
    font-weight:700;
}
.oj-sidebar-logout i{
    color:#ff6800!important;
    margin-right:8px;
}

.oj-main{
    min-width:0;
    width:auto;
}

.oj-dashboard-header{
    margin-bottom:20px!important;
    padding:24px 28px!important;
    border:1px solid #e7eaf0;
    border-radius:18px!important;
    box-shadow:0 12px 35px rgba(15,23,42,.055)!important;
    background:#fff!important;
}
.oj-dashboard-header-left{
    min-width:0;
}
.oj-dashboard-greeting{
    font-size:12px!important;
    color:#ff6800!important;
    font-weight:800!important;
}
.oj-dashboard-header-left h2{
    color:#0b1220!important;
    font-size:27px!important;
    line-height:1.2;
    letter-spacing:-.035em;
    margin:8px 0 12px!important;
}
.oj-dashboard-header-left p{
    color:#111!important;
    font-size:13px!important;
}
.oj-dashboard-header-actions{
    gap:10px!important;
}
.oj-dashboard-header .oj-header-icon{
    width:42px!important;
    height:42px!important;
    border-radius:12px!important;
    background:#f5f7fa!important;
    color:#111!important;
    border:1px solid #e8ebef!important;
}
.oj-dashboard-header .oj-header-icon:hover{
    color:#ff6800!important;
    border-color:#ff6800!important;
    transform:translateY(-2px);
}
.oj-header-add{
    background:#ff6800!important;
    color:#fff!important;
    border:0!important;
    border-radius:11px!important;
    padding:12px 16px!important;
    font-size:12px!important;
    font-weight:800!important;
    box-shadow:0 10px 22px rgba(255,104,0,.18);
    transition:.2s ease!important;
}
.oj-header-add:hover{
    background:#e85b00!important;
    transform:translateY(-2px);
}
.oj-dashboard-header .oj-badge.oj-success{
    background:#dcfce7!important;
    color:#15803d!important;
    border:1px solid #bbf7d0!important;
    border-radius:999px!important;
    padding:9px 12px!important;
    font-size:11px!important;
    font-weight:800!important;
}
.oj-user-avatar{
    width:42px!important;
    height:42px!important;
    border-radius:50%!important;
    background:#ff6800!important;
    color:#fff!important;
    display:grid!important;
    place-items:center!important;
    font-size:14px!important;
    font-weight:800!important;
    border:0!important;
    transition:.2s ease!important;
}
.oj-user-avatar:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(255,104,0,.25);
}

.oj-dashboard-body{
    min-width:0;
}
.oj-dashboard-body > *{
    animation:ojVendorFadeUp .55s ease both;
}
@keyframes ojVendorFadeUp{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}

/* KPI / overview cards */
.oj-stat-grid,
.oj-dashboard-stats{
    gap:16px!important;
}
.oj-stat-card,
.oj-card{
    border:1px solid #e7eaf0!important;
    box-shadow:0 10px 30px rgba(15,23,42,.055)!important;
    border-radius:16px!important;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.oj-stat-card:hover,
.oj-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 38px rgba(15,23,42,.09)!important;
    border-color:#dce2ea!important;
}
.oj-stat-card:nth-child(1){background:linear-gradient(135deg,#eff6ff,#fff)!important}
.oj-stat-card:nth-child(2){background:linear-gradient(135deg,#ecfdf5,#fff)!important}
.oj-stat-card:nth-child(3){background:linear-gradient(135deg,#fff7ed,#fff)!important}
.oj-stat-card:nth-child(4){background:linear-gradient(135deg,#fff1f2,#fff)!important}
.oj-stat-card h3,.oj-stat-title{
    color:#111!important;
    font-size:12px!important;
    font-weight:700!important;
}
.oj-stat-card strong,.oj-stat-card h2{
    color:#0b1220!important;
    font-size:30px!important;
}

/* Forms and dashboard buttons */
.oj-form-grid input,
.oj-form-grid textarea,
.oj-form-grid select,
.oj-card input,
.oj-card textarea,
.oj-card select{
    background:#fff!important;
    color:#111!important;
    border:1px solid #dfe4ea!important;
    border-radius:10px!important;
    transition:.2s ease;
}
.oj-form-grid input:focus,
.oj-form-grid textarea:focus,
.oj-form-grid select:focus,
.oj-card input:focus,
.oj-card textarea:focus,
.oj-card select:focus{
    outline:none!important;
    border-color:#ff6800!important;
    box-shadow:0 0 0 3px rgba(255,104,0,.10)!important;
}
.oj-btn{
    background:#ff6800!important;
    color:#fff!important;
    border:0!important;
    border-radius:10px!important;
    font-weight:800!important;
    transition:.2s ease!important;
}
.oj-btn:hover{
    background:#e85b00!important;
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(255,104,0,.18);
}

/* Quick action cards */
.oj-action-card{
    background:#fff!important;
    border:1px solid #e5e9ef!important;
    border-radius:15px!important;
    color:#111!important;
    box-shadow:0 8px 25px rgba(15,23,42,.045);
}
.oj-action-card:hover{
    background:#fff7f1!important;
    color:#ff6800!important;
    border-color:#ffb17e!important;
    box-shadow:0 14px 30px rgba(15,23,42,.08)!important;
}

/* Responsive */
@media(max-width:1100px){
    .oj-dashboard{padding:0 18px!important}
    .oj-dashboard > .oj-sidebar{flex-basis:220px;width:220px!important}
    .oj-dashboard-header{align-items:flex-start!important;flex-direction:column;gap:18px}
    .oj-dashboard-header-actions{width:100%;justify-content:flex-end}
}
@media(max-width:800px){
    .oj-dashboard{
        display:block!important;
        padding:0 12px!important;
        margin:16px auto!important;
    }
    .oj-dashboard > .oj-sidebar{
        position:relative!important;
        top:auto!important;
        width:100%!important;
        min-height:0!important;
        margin-bottom:16px;
    }
    .oj-sidebar-menu{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:5px;
    }
    .oj-sidebar-menu li{margin:0!important}
    .oj-dashboard-header{
        padding:20px!important;
    }
    .oj-dashboard-header-actions{
        flex-wrap:wrap;
        justify-content:flex-start;
    }
    .oj-stat-grid,.oj-dashboard-stats{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:520px){
    .oj-sidebar-menu{grid-template-columns:1fr}
    .oj-stat-grid,.oj-dashboard-stats{grid-template-columns:1fr!important}
    .oj-dashboard-header-left h2{font-size:23px!important}
}


/* =========================================================
   OJALINKS VENDOR DASHBOARD — v31.3 SIDEBAR FIX
   The dashboard layout contains an outer .oj-sidebar wrapper
   and an inner .oj-sidebar rendered by templates/dashboard/sidebar.php.
   The inner Workreap-era white background was covering the black shell.
   ========================================================= */

/* Outer OjaLinks sidebar */
.oj-dashboard > aside.oj-sidebar{
    background:#000!important;
    color:#fff!important;
}

/* Inner vendor sidebar must inherit the OjaLinks black shell */
.oj-dashboard > aside.oj-sidebar > .oj-sidebar{
    width:100%!important;
    min-width:0!important;
    min-height:100%!important;
    margin:0!important;
    padding:0!important;
    background:#000!important;
    color:#fff!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:visible!important;
}

/* Keep all sidebar content on the black background */
.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-header,
.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-progress,
.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-menu,
.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-logout{
    background:transparent!important;
}

/* White sidebar-era borders/text are replaced with dark-shell styling */
.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-header{
    border-bottom-color:rgba(255,255,255,.08)!important;
}

.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-header small{
    color:rgba(255,255,255,.52)!important;
}

.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-progress{
    border-color:rgba(255,255,255,.08)!important;
}

.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-progress-title{
    color:rgba(255,255,255,.76)!important;
}

.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-progress-title strong{
    color:#fff!important;
}

.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-menu a{
    color:rgba(255,255,255,.68)!important;
}

.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-menu a i{
    color:#ff6800!important;
}

.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-menu li.active a{
    background:#ff6800!important;
    color:#fff!important;
}

.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-menu li.active a i{
    color:#fff!important;
}

.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-menu a:hover{
    background:rgba(255,104,0,.12)!important;
    color:#fff!important;
}

.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-logout{
    border-top-color:rgba(255,255,255,.08)!important;
}

.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-logout a{
    color:rgba(255,255,255,.66)!important;
}

.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-logout a:hover{
    background:rgba(255,104,0,.12)!important;
    color:#fff!important;
}

.oj-dashboard > aside.oj-sidebar > .oj-sidebar .oj-sidebar-logout i{
    color:#ff6800!important;
}

/* Mobile: retain the black shell when the sidebar becomes full width */
@media(max-width:800px){
    .oj-dashboard > aside.oj-sidebar{
        background:#000!important;
    }
    .oj-dashboard > aside.oj-sidebar > .oj-sidebar{
        background:#000!important;
    }
}


/* ============================================================
   OJALINKS VENDOR/BUSINESS DASHBOARD — MODERN SAAS UI v31.6
   Visual-only refinement. Existing PHP/JS functionality unchanged.
   ============================================================ */

:root{
    --oj-orange:#ff6800;
    --oj-orange-dark:#e85d00;
    --oj-black:#000000;
    --oj-bg:#f5f7fb;
    --oj-text:#0f172a;
    --oj-muted:#64748b;
    --oj-border:#e6eaf0;
    --oj-card:#ffffff;
    --oj-blue:#2563eb;
    --oj-green:#10b981;
    --oj-amber:#f59e0b;
    --oj-purple:#8b5cf6;
    --oj-shadow:0 10px 30px rgba(15,23,42,.06);
    --oj-shadow-hover:0 18px 40px rgba(15,23,42,.10);
}

/* ---------- Global dashboard surface ---------- */
.oj-dashboard,
.oj-dashboard *{
    box-sizing:border-box;
}

.oj-dashboard{
    color:var(--oj-text);
}

.oj-dashboard-body{
    background:transparent!important;
}

.oj-dashboard h1,
.oj-dashboard h2,
.oj-dashboard h3,
.oj-dashboard h4,
.oj-dashboard strong{
    color:var(--oj-text);
    font-weight:700;
}

.oj-dashboard p,
.oj-dashboard small,
.oj-dashboard label{
    color:var(--oj-muted);
}

.oj-dashboard a{
    transition:all .22s ease;
}

/* ---------- Black OjaLinks sidebar ---------- */
.oj-dashboard > aside.oj-sidebar{
    background:#000!important;
    color:#fff!important;
    border-radius:18px!important;
    box-shadow:0 18px 45px rgba(0,0,0,.16)!important;
    overflow:hidden!important;
}

.oj-dashboard > aside.oj-sidebar > .oj-sidebar{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    background:#000!important;
    color:#fff!important;
    border-radius:0!important;
    box-shadow:none!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-header{
    background:#000!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    padding:22px 18px!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-logo{
    width:72px!important;
    height:72px!important;
    object-fit:contain!important;
    background:#fff!important;
    border-radius:16px!important;
    padding:5px!important;
    margin-bottom:12px!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-avatar{
    width:58px!important;
    height:58px!important;
    background:var(--oj-orange)!important;
    color:#fff!important;
    margin-bottom:12px!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-header h3{
    color:#fff!important;
    font-size:17px!important;
    line-height:1.3!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-header small{
    color:rgba(255,255,255,.56)!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-progress{
    background:#000!important;
    padding:18px!important;
    border-color:rgba(255,255,255,.08)!important;
}

.oj-dashboard > aside.oj-sidebar .oj-progress-title{
    color:rgba(255,255,255,.72)!important;
}

.oj-dashboard > aside.oj-sidebar .oj-progress-title strong{
    color:#fff!important;
}

.oj-dashboard > aside.oj-sidebar .oj-progress{
    height:8px!important;
    background:rgba(255,255,255,.12)!important;
    border-radius:999px!important;
    overflow:hidden!important;
}

.oj-dashboard > aside.oj-sidebar .oj-progress-bar{
    background:var(--oj-orange)!important;
    border-radius:999px!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-menu{
    background:#000!important;
    padding:12px 0!important;
    margin:0!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-menu li{
    margin:3px 12px!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-menu a{
    color:rgba(255,255,255,.72)!important;
    background:transparent!important;
    padding:11px 13px!important;
    border-radius:11px!important;
    font-size:13px!important;
    font-weight:600!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-menu a i{
    width:20px!important;
    text-align:center!important;
    color:var(--oj-orange)!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-menu a:hover{
    background:rgba(255,104,0,.12)!important;
    color:#fff!important;
    transform:translateX(2px);
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-menu li.active a{
    background:var(--oj-orange)!important;
    color:#fff!important;
    box-shadow:0 10px 24px rgba(255,104,0,.20)!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-menu li.active a i{
    color:#fff!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-logout{
    background:#000!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    padding:12px!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-logout a{
    color:rgba(255,255,255,.68)!important;
    border-radius:10px!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-logout a i{
    color:var(--oj-orange)!important;
}

.oj-dashboard > aside.oj-sidebar .oj-sidebar-logout a:hover{
    background:rgba(255,104,0,.12)!important;
    color:#fff!important;
}

/* ---------- Dashboard header ---------- */
.oj-dashboard-header{
    background:#fff!important;
    border:1px solid var(--oj-border)!important;
    border-radius:16px!important;
    box-shadow:var(--oj-shadow)!important;
}

.oj-dashboard-header-left h2{
    font-size:28px!important;
    letter-spacing:-.4px;
}

.oj-dashboard-greeting{
    color:var(--oj-orange)!important;
}

.oj-header-icon{
    background:#f8fafc!important;
    border:1px solid var(--oj-border)!important;
}

.oj-header-icon:hover{
    background:#fff3ec!important;
    color:var(--oj-orange)!important;
    transform:translateY(-2px);
}

.oj-header-add{
    background:var(--oj-orange)!important;
    color:#fff!important;
    border-radius:11px!important;
    box-shadow:0 10px 22px rgba(255,104,0,.18);
}

.oj-header-add:hover{
    background:var(--oj-orange-dark)!important;
    transform:translateY(-2px);
}

.oj-user-avatar{
    background:var(--oj-orange)!important;
    color:#fff!important;
}

/* ---------- Overview hero ---------- */
.oj-overview-banner{
    border-radius:16px!important;
    background:linear-gradient(135deg,#ff6800 0%,#ff7b22 100%)!important;
    box-shadow:0 18px 40px rgba(255,104,0,.18)!important;
}

.oj-overview-left h1{
    color:#0f172a!important;
    font-weight:800!important;
}

.oj-overview-left p,
.oj-overview-greeting{
    color:#fff!important;
}

.oj-overview-progress{
    border:1px solid rgba(255,255,255,.16)!important;
}

/* ---------- KPI / statistics cards ---------- */
.oj-kpi-grid,
.oj-dashboard-kpis,
.oj-stat-grid{
    gap:20px!important;
}

.oj-kpi-card,
.oj-stat-card{
    position:relative;
    overflow:hidden;
    background:#fff!important;
    border:1px solid var(--oj-border)!important;
    border-radius:16px!important;
    box-shadow:var(--oj-shadow)!important;
    transition:transform .25s ease,box-shadow .25s ease!important;
}

.oj-kpi-card:hover,
.oj-stat-card:hover{
    transform:translateY(-5px)!important;
    box-shadow:var(--oj-shadow-hover)!important;
}

.oj-kpi-card.primary{
    background:linear-gradient(145deg,#fff,#f4f7ff)!important;
}

.oj-kpi-card.success{
    background:linear-gradient(145deg,#fff,#f0fcf7)!important;
}

.oj-kpi-card.warning{
    background:linear-gradient(145deg,#fff,#fff8eb)!important;
}

.oj-kpi-card.purple{
    background:linear-gradient(145deg,#fff,#f7f3ff)!important;
}

.oj-kpi-icon{
    border-radius:15px!important;
}

.oj-kpi-value{
    color:#111!important;
    font-weight:800!important;
}

/* ---------- All standard content cards ---------- */
.oj-card,
.oj-dashboard-section{
    background:#fff!important;
    border:1px solid var(--oj-border)!important;
    border-radius:16px!important;
    box-shadow:var(--oj-shadow)!important;
    padding:28px!important;
}

.oj-card:hover,
.oj-dashboard-section:hover{
    box-shadow:0 14px 34px rgba(15,23,42,.075);
}

.oj-card h2,
.oj-section-header h2,
.oj-card-header h2{
    color:var(--oj-text)!important;
    font-weight:750!important;
}

.oj-section-header{
    border-bottom:1px solid #eef1f5;
    padding-bottom:18px;
}

/* ---------- Quick actions ---------- */
.oj-quick-actions-grid{
    gap:18px!important;
}

.oj-action-card{
    min-height:120px;
    background:#fff!important;
    border:1px solid var(--oj-border)!important;
    border-radius:15px!important;
    box-shadow:0 6px 18px rgba(15,23,42,.035)!important;
    color:#111!important;
    transition:all .25s ease!important;
}

.oj-action-card i{
    color:#111!important;
}

.oj-action-card:hover{
    background:#fff!important;
    border-color:var(--oj-orange)!important;
    color:#111!important;
    transform:translateY(-5px)!important;
    box-shadow:0 14px 30px rgba(255,104,0,.13)!important;
}

.oj-action-card:hover i{
    color:var(--oj-orange)!important;
}

/* ---------- Buttons ---------- */
.oj-btn,
.oj-btn-primary,
.oj-header-add{
    background:var(--oj-orange)!important;
    color:#fff!important;
    border:1px solid var(--oj-orange)!important;
    border-radius:10px!important;
    font-weight:700!important;
    transition:all .22s ease!important;
}

.oj-btn:hover,
.oj-btn-primary:hover,
.oj-header-add:hover{
    background:var(--oj-orange-dark)!important;
    border-color:var(--oj-orange-dark)!important;
    color:#fff!important;
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(255,104,0,.18);
}

.oj-btn-secondary,
.oj-btn-outline{
    background:#fff!important;
    color:#111827!important;
    border:1px solid #dfe4ea!important;
    border-radius:10px!important;
    font-weight:700!important;
    transition:all .22s ease!important;
}

.oj-btn-secondary:hover,
.oj-btn-outline:hover{
    color:var(--oj-orange)!important;
    border-color:var(--oj-orange)!important;
    background:#fff8f3!important;
    transform:translateY(-2px);
}

/* ---------- Forms / filters ---------- */
.oj-dashboard-form input,
.oj-dashboard-form textarea,
.oj-dashboard-form select,
.oj-form-group input,
.oj-form-group textarea,
.oj-form-group select,
.oj-dashboard input,
.oj-dashboard textarea,
.oj-dashboard select{
    width:100%;
    background:#fff!important;
    color:#111!important;
    border:1px solid #dfe4ea!important;
    border-radius:10px!important;
    padding:12px 14px!important;
    outline:none!important;
    transition:border-color .2s ease,box-shadow .2s ease!important;
}

.oj-dashboard-form input:focus,
.oj-dashboard-form textarea:focus,
.oj-dashboard-form select:focus,
.oj-form-group input:focus,
.oj-form-group textarea:focus,
.oj-form-group select:focus{
    border-color:var(--oj-orange)!important;
    box-shadow:0 0 0 3px rgba(255,104,0,.10)!important;
}

.oj-dashboard label{
    color:#111827!important;
    font-weight:700!important;
}

/* ---------- Status badges ---------- */
.oj-status-badge,
.oj-badge{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    border-radius:999px!important;
    padding:6px 11px!important;
    font-size:12px!important;
    font-weight:700!important;
    line-height:1!important;
    background:#f1f5f9!important;
    color:#334155!important;
}

.oj-status-badge.status-completed,
.oj-status-badge.status-approved,
.oj-badge.success,
.oj-badge.verified{
    background:#dcfce7!important;
    color:#15803d!important;
}

.oj-status-badge.status-in_progress,
.oj-status-badge.status-awaiting_confirmation,
.oj-badge.warning{
    background:#fef3c7!important;
    color:#a16207!important;
}

.oj-status-badge.status-declined,
.oj-badge.danger{
    background:#fee2e2!important;
    color:#b91c1c!important;
}

/* ---------- Jobs / list cards ---------- */
.oj-job-card{
    background:#fff!important;
    border:1px solid var(--oj-border)!important;
    border-radius:14px!important;
    padding:20px!important;
    margin-bottom:14px!important;
    box-shadow:0 5px 18px rgba(15,23,42,.035)!important;
    transition:all .22s ease!important;
}

.oj-job-card:hover{
    border-color:#d7dce3!important;
    box-shadow:0 12px 26px rgba(15,23,42,.07)!important;
    transform:translateY(-2px);
}

.oj-job-main strong{
    color:#111!important;
}

.oj-job-code{
    color:var(--oj-muted)!important;
}

.oj-empty-state{
    background:#f8fafc!important;
    border:1px dashed #d8dee7!important;
    border-radius:14px!important;
    padding:28px!important;
}

/* ---------- Services / Gallery cards ---------- */
.oj-service-card,
.oj-gallery-card{
    background:#fff!important;
    border:1px solid var(--oj-border)!important;
    border-radius:15px!important;
    box-shadow:0 7px 20px rgba(15,23,42,.045)!important;
    transition:all .25s ease!important;
}

.oj-service-card:hover,
.oj-gallery-card:hover{
    transform:translateY(-4px)!important;
    box-shadow:var(--oj-shadow-hover)!important;
    border-color:#d9dee6!important;
}

.oj-service-icon{
    border-radius:14px!important;
    background:#fff3ec!important;
    color:var(--oj-orange)!important;
}

/* ---------- Verification ---------- */
.oj-verification,
.oj-verification-card,
.oj-verification-stage,
.oj-verification-item{
    border-radius:14px!important;
}

.oj-verification-stage,
.oj-verification-card{
    background:#fff!important;
    border:1px solid var(--oj-border)!important;
    box-shadow:var(--oj-shadow)!important;
}

.oj-verification-stage:hover,
.oj-verification-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--oj-shadow-hover)!important;
}

.oj-verification-stage .oj-stage-icon,
.oj-verification-item .oj-stage-icon{
    color:var(--oj-orange)!important;
}

/* ---------- Tables ---------- */
.oj-dashboard table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--oj-border);
    border-radius:14px;
}

.oj-dashboard table thead th{
    background:#f8fafc!important;
    color:#334155!important;
    font-size:12px!important;
    font-weight:800!important;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:13px 15px!important;
    border-bottom:1px solid var(--oj-border)!important;
}

.oj-dashboard table tbody td{
    padding:14px 15px!important;
    color:#111827!important;
    border-bottom:1px solid #eef1f4!important;
}

.oj-dashboard table tbody tr{
    transition:background .18s ease;
}

.oj-dashboard table tbody tr:hover{
    background:#fff8f3!important;
}

.oj-dashboard table tbody tr:last-child td{
    border-bottom:0!important;
}

/* ---------- Analytics / CRM / notification surfaces ---------- */
.oj-analytics-card,
.oj-crm-card,
.oj-notification-card,
.oj-audit-card,
.oj-chart-card{
    background:#fff!important;
    border:1px solid var(--oj-border)!important;
    border-radius:16px!important;
    box-shadow:var(--oj-shadow)!important;
}

.oj-analytics-card:hover,
.oj-crm-card:hover,
.oj-notification-card:hover,
.oj-audit-card:hover,
.oj-chart-card:hover{
    box-shadow:var(--oj-shadow-hover)!important;
}

.oj-timeline-item{
    background:#fff!important;
    border:1px solid var(--oj-border)!important;
    border-radius:14px!important;
}

.oj-timeline-icon{
    background:#fff3ec!important;
    color:var(--oj-orange)!important;
    border-color:rgba(255,104,0,.20)!important;
}

/* ---------- Modals ---------- */
.oj-modal-box{
    background:#fff!important;
    border-radius:16px!important;
    border:1px solid var(--oj-border)!important;
    box-shadow:0 25px 70px rgba(15,23,42,.20)!important;
}

.oj-modal-close{
    border-radius:50%!important;
    transition:.2s ease;
}

.oj-modal-close:hover{
    background:#fff3ec!important;
    color:var(--oj-orange)!important;
}

/* ---------- Slow upward fade-in ---------- */
@keyframes ojVendorFadeUp{
    from{
        opacity:0;
        transform:translate3d(0,18px,0);
    }
    to{
        opacity:1;
        transform:translate3d(0,0,0);
    }
}

.oj-dashboard-body > *{
    animation:ojVendorFadeUp .65s ease both;
}

.oj-dashboard-body > *:nth-child(2){animation-delay:.06s}
.oj-dashboard-body > *:nth-child(3){animation-delay:.12s}
.oj-dashboard-body > *:nth-child(4){animation-delay:.18s}

@media (prefers-reduced-motion:reduce){
    .oj-dashboard-body > *,
    .oj-action-card,
    .oj-kpi-card,
    .oj-stat-card,
    .oj-job-card,
    .oj-service-card,
    .oj-gallery-card{
        animation:none!important;
        transition:none!important;
    }
}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
    .oj-dashboard{
        gap:20px!important;
    }

    .oj-kpi-grid,
    .oj-dashboard-kpis,
    .oj-stat-grid{
        grid-template-columns:repeat(2,1fr)!important;
    }
}

@media(max-width:800px){
    .oj-dashboard{
        display:block!important;
    }

    .oj-dashboard > aside.oj-sidebar{
        width:100%!important;
        position:relative!important;
        margin-bottom:20px!important;
        border-radius:16px!important;
    }

    .oj-dashboard > aside.oj-sidebar .oj-sidebar-menu{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:4px;
        padding:10px!important;
    }

    .oj-dashboard > aside.oj-sidebar .oj-sidebar-menu li{
        margin:0!important;
    }

    .oj-main{
        width:100%!important;
    }

    .oj-dashboard-header,
    .oj-overview-banner{
        flex-direction:column!important;
        align-items:flex-start!important;
        gap:20px!important;
    }

    .oj-overview-progress{
        width:100%!important;
    }

    .oj-kpi-grid,
    .oj-dashboard-kpis,
    .oj-stat-grid{
        grid-template-columns:1fr!important;
    }

    .oj-card,
    .oj-dashboard-section{
        padding:20px!important;
    }
}

@media(max-width:520px){
    .oj-dashboard > aside.oj-sidebar .oj-sidebar-menu{
        grid-template-columns:1fr!important;
    }

    .oj-dashboard-header{
        padding:20px!important;
    }

    .oj-dashboard-header-actions{
        width:100%;
        flex-wrap:wrap;
    }

    .oj-action-card{
        min-height:105px;
    }
}