/* =========================================================
   BLACK FOX PR & MARKETING - CRM THEME
   Drop-in black/yellow theme for PHP CRM portals
   Place this file at: /assets/css/blackfox-theme.css
   Load it LAST in header.php
   ========================================================= */

:root{
    --bf-black:#050505;
    --bf-black-2:#0b0b0d;
    --bf-panel:#121214;
    --bf-panel-2:#18181b;
    --bf-border:#2b2b31;
    --bf-gold:#f5c400;
    --bf-gold-2:#ffd84d;
    --bf-white:#ffffff;
    --bf-text:#f4f4f5;
    --bf-muted:#b5b5bd;
    --bf-danger:#ff5b5b;
    --bf-success:#79d35a;
    --bf-radius:16px;
    --bf-shadow:0 18px 50px rgba(0,0,0,.42);
}

/* Global reset */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:
        radial-gradient(circle at 65% 10%, rgba(245,196,0,.08), transparent 30%),
        linear-gradient(135deg, #050505 0%, #111119 45%, #070707 100%);
    color:var(--bf-text);
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
}

/* Typography */
h1,h2,h3,h4,h5,h6{
    color:var(--bf-white);
    margin-top:0;
    letter-spacing:.02em;
}
h1,.page-title{
    font-size:32px;
    font-weight:900;
    text-transform:none;
}
h2{font-size:24px}
h3{font-size:18px}
p{color:var(--bf-muted);line-height:1.6}
a{color:var(--bf-gold);text-decoration:none}
a:hover{color:var(--bf-gold-2)}

/* Main shell */
.bf-app{
    display:grid;
    grid-template-columns:280px 1fr;
    min-height:100vh;
}
.bf-sidebar,
.sidebar,
aside{
    background:linear-gradient(180deg,#050505 0%,#111112 100%) !important;
    border-right:1px solid var(--bf-border);
    color:var(--bf-text);
    padding:24px 18px;
    position:sticky;
    top:0;
    height:100vh;
    overflow:auto;
}
.bf-content,
.main,
main,
.content{
    padding:28px;
}

/* Logo / brand */
.bf-brand,
.brand{
    display:flex;
    align-items:center;
    gap:14px;
    padding-bottom:22px;
    margin-bottom:22px;
    border-bottom:1px solid var(--bf-border);
}
.bf-brand img,
.brand img,
.brand-logo{
    width:64px;
    height:64px;
    object-fit:contain;
}
.bf-brand-title,
.brand h2{
    margin:0;
    font-size:20px;
    font-weight:900;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.bf-brand-subtitle,
.brand span{
    display:block;
    color:var(--bf-muted);
    font-size:12px;
    margin-top:6px;
}

/* Sidebar navigation */
.bf-nav,
.sidebar nav,
.sidebar ul{
    list-style:none;
    padding:0;
    margin:0;
}
.bf-nav-section{
    color:var(--bf-gold);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    margin:24px 0 8px;
    letter-spacing:.08em;
}
.bf-nav a,
.sidebar a,
aside a{
    display:flex;
    align-items:center;
    gap:10px;
    color:#e8e8ec !important;
    padding:11px 13px;
    border-radius:12px;
    margin:3px 0;
    font-weight:650;
    transition:.2s ease;
}
.bf-nav a:hover,
.sidebar a:hover,
aside a:hover{
    background:rgba(245,196,0,.14) !important;
    color:var(--bf-gold) !important;
    transform:translateX(3px);
}
.bf-nav a.active,
.sidebar a.active,
.sidebar .active,
aside a.active{
    background:var(--bf-gold) !important;
    color:#050505 !important;
    box-shadow:0 10px 25px rgba(245,196,0,.25);
}

/* Topbar */
.bf-topbar,
.header,
.topbar{
    background:rgba(10,10,12,.82) !important;
    border:1px solid var(--bf-border);
    border-radius:var(--bf-radius);
    padding:16px 18px;
    margin-bottom:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    box-shadow:var(--bf-shadow);
    backdrop-filter:blur(10px);
}
.bf-search{
    width:min(520px,100%);
    position:relative;
}
.bf-search input{
    width:100%;
}

/* Cards / panels */
.bf-card,
.card,
.panel,
.widget,
.box,
section{
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)) !important;
    border:1px solid var(--bf-border) !important;
    border-radius:var(--bf-radius) !important;
    color:var(--bf-text) !important;
    box-shadow:var(--bf-shadow);
}
.bf-card{padding:22px}
.bf-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin:22px 0;
}
.bf-stat{
    padding:22px;
    border-left:5px solid var(--bf-gold) !important;
}
.bf-stat strong{
    display:block;
    font-size:32px;
    color:var(--bf-white);
    margin-top:8px;
}
.bf-stat span{color:var(--bf-muted);font-size:13px}

/* Forms: dark card, white fields */
form,
.bf-form-card{
    background:rgba(18,18,20,.78);
    border:1px solid var(--bf-border);
    border-radius:18px;
    padding:24px;
    max-width:820px;
}
.bf-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.form-group,
.field,
label{
    display:block;
}
label{
    color:var(--bf-white) !important;
    font-weight:800;
    margin:0 0 8px;
    font-size:13px;
}
input,
select,
textarea,
.form-control{
    width:100%;
    background:#ffffff !important;
    color:#111111 !important;
    border:2px solid #dddddd !important;
    border-radius:11px !important;
    padding:12px 14px !important;
    min-height:42px;
    font-size:15px !important;
    outline:none;
    box-shadow:none !important;
}
textarea{
    min-height:120px;
    resize:vertical;
}
input::placeholder,
textarea::placeholder{
    color:#777 !important;
}
select option{
    background:#fff;
    color:#111;
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus{
    border-color:var(--bf-gold) !important;
    box-shadow:0 0 0 4px rgba(245,196,0,.28) !important;
}

/* Buttons */
button,
.btn,
input[type=submit],
input[type=button],
.bf-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--bf-gold) !important;
    color:#050505 !important;
    border:0 !important;
    border-radius:999px !important;
    padding:12px 20px !important;
    font-weight:900 !important;
    cursor:pointer;
    line-height:1;
    box-shadow:0 10px 24px rgba(245,196,0,.22);
    transition:.2s ease;
}
button:hover,
.btn:hover,
input[type=submit]:hover,
input[type=button]:hover,
.bf-btn:hover{
    background:var(--bf-gold-2) !important;
    transform:translateY(-1px);
}
.btn-secondary,
.bf-btn-secondary{
    background:#1d1d22 !important;
    color:#fff !important;
    border:1px solid var(--bf-border) !important;
    box-shadow:none;
}
.form-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:20px;
}

/* Tables */
table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    background:var(--bf-panel) !important;
    color:var(--bf-text) !important;
    border:1px solid var(--bf-border);
    border-radius:14px;
}
th{
    background:#1e1e23 !important;
    color:var(--bf-gold) !important;
    text-align:left;
    font-weight:900;
    padding:14px;
}
td{
    padding:14px;
    border-top:1px solid var(--bf-border) !important;
    color:#f0f0f2 !important;
}
tr:hover td{
    background:rgba(245,196,0,.055);
}

/* Badges */
.badge,
.bf-badge{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:5px 10px;
    background:rgba(245,196,0,.16);
    color:var(--bf-gold);
    font-weight:800;
    font-size:12px;
}

/* Pipeline / kanban */
.bf-kanban{
    display:grid;
    grid-template-columns:repeat(5,minmax(180px,1fr));
    gap:14px;
    overflow:auto;
}
.bf-column{
    background:rgba(255,255,255,.035);
    border:1px solid var(--bf-border);
    border-radius:14px;
    padding:14px;
}
.bf-column h3{
    font-size:14px;
    border-bottom:3px solid var(--bf-gold);
    padding-bottom:10px;
}
.bf-deal{
    background:rgba(255,255,255,.065);
    border:1px solid var(--bf-border);
    border-radius:12px;
    padding:12px;
    margin:10px 0;
}

/* Favicon/logo helper */
.bf-watermark{
    position:relative;
    overflow:hidden;
}
.bf-watermark:after{
    content:"";
    position:absolute;
    right:8%;
    top:8%;
    width:320px;
    height:320px;
    background:url('/assets/images/blackfox-logo.png') center/contain no-repeat;
    opacity:.045;
    pointer-events:none;
}

/* Responsive */
@media(max-width:1000px){
    .bf-app{grid-template-columns:1fr}
    .bf-sidebar,.sidebar,aside{position:relative;height:auto}
    .bf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .bf-form-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
    .bf-content,.main,main,.content{padding:16px}
    .bf-grid{grid-template-columns:1fr}
    .bf-topbar{align-items:stretch;flex-direction:column}
}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b0b0d}
::-webkit-scrollbar-thumb{background:var(--bf-gold);border-radius:30px}