/*==========================================================
FTN PLATFORM
Components
Version 1.0
==========================================================*/


/*==========================================================
BUTTONS
==========================================================*/

button{

font:inherit;

cursor:pointer;

border:none;

outline:none;

transition:all var(--transition-fast);

}

.primary{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:14px 24px;

background:

linear-gradient(
180deg,
var(--ftn-red),
var(--ftn-red-dark));

color:white;

font-weight:700;

border-radius:var(--radius-md);

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

}

.primary:hover{

transform:translateY(-2px);

filter:brightness(1.05);

}

.primary:active{

transform:translateY(0);

}

.secondary{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:14px 24px;

background:transparent;

border:1px solid var(--border-medium);

color:white;

font-weight:700;

border-radius:var(--radius-md);

}

.secondary:hover{

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

}

.small{

padding:10px 18px;

font-size:.85rem;

}



/*==========================================================
PANEL
==========================================================*/

.panel{

background:

linear-gradient(
180deg,
rgba(255,255,255,.02),
rgba(255,255,255,.01));

border:

1px solid
var(--border-medium);

border-radius:

var(--radius-xl);

padding:

40px;

box-shadow:

var(--shadow-lg);

margin-bottom:

32px;

}



/*==========================================================
HEADERS
==========================================================*/

.panel-head{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:30px;

margin-bottom:32px;

}

.eyebrow{

display:inline-block;

margin-bottom:12px;

font-size:.75rem;

font-weight:800;

letter-spacing:.14em;

text-transform:uppercase;

color:var(--ftn-red);

}



/*==========================================================
DASHBOARD
==========================================================*/

.dashboard-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:24px;

margin-top:24px;

margin-bottom:40px;

}



/*==========================================================
KPI CARDS
==========================================================*/

.kpi-card{

position:relative;

overflow:hidden;

background:

linear-gradient(
180deg,
var(--surface-2),
var(--surface-3));

border:

1px solid
var(--border-medium);

border-radius:

var(--radius-lg);

padding:

26px;

box-shadow:

var(--shadow-md);

transition:

all
var(--transition-fast);

}

.kpi-card:hover{

transform:translateY(-4px);

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

}

.kpi-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:4px;

height:100%;

background:

var(--ftn-red);

}

.kpi-card span{

display:block;

font-size:.8rem;

text-transform:uppercase;

letter-spacing:.08em;

color:var(--text-muted);

margin-bottom:12px;

}

.kpi-card strong{

display:block;

font-size:3rem;

font-weight:800;

line-height:1;

margin-bottom:10px;

color:white;

}

.kpi-card p{

font-size:.88rem;

color:var(--text-secondary);

}



/*==========================================================
INTELLIGENCE GRID
==========================================================*/

.intelligence-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:24px;

margin-top:28px;

}

.intelligence-card{

padding:28px;

background:var(--surface-2);

border-radius:var(--radius-lg);

border:1px solid var(--border-medium);

transition:all var(--transition-fast);

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

}

.intelligence-card:hover{

transform:translateY(-4px);

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

}

.intelligence-tag{

display:inline-flex;

padding:6px 14px;

margin-bottom:18px;

border-radius:999px;

background:

rgba(215,25,32,.12);

border:

1px solid rgba(215,25,32,.35);

font-size:.72rem;

font-weight:700;

text-transform:uppercase;

letter-spacing:.08em;

color:white;

}

.intelligence-card h3{

margin-bottom:12px;

font-size:1.35rem;

font-weight:700;

}

.intelligence-card p{

color:var(--text-secondary);

line-height:1.7;

}



/*==========================================================
REPORT TYPE GRID
==========================================================*/

.report-type-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:22px;

margin-top:30px;

}

.report-type-grid>div{

background:

var(--surface-2);

padding:22px;

border-radius:var(--radius-lg);

border:1px solid var(--border-light);

transition:all var(--transition-fast);

}

.report-type-grid>div:hover{

transform:translateY(-3px);

}

.report-type-grid span{

display:block;

margin-bottom:10px;

font-size:.8rem;

text-transform:uppercase;

color:var(--text-muted);

}

.report-type-grid strong{

font-size:2rem;

font-weight:800;

color:white;

}/*==========================================================
DASHBOARD TOOLBAR
==========================================================*/

.dashboard-toolbar{

display:flex;

justify-content:flex-end;

align-items:center;

margin-bottom:28px;

}

.dashboard-toolbar label{

min-width:260px;

}


/*==========================================================
DASHBOARD BLOCKS
==========================================================*/

.dashboard-block{

margin-top:34px;

padding:34px;

background:

linear-gradient(
180deg,
rgba(255,255,255,.025),
rgba(255,255,255,.01));

border:

1px solid
var(--border-light);

border-radius:

var(--radius-xl);

}


/*==========================================================
COMMUNITY SNAPSHOT
==========================================================*/

.snapshot-list{

display:grid;

gap:14px;

padding:0;

margin:0;

list-style:none;

}

.snapshot-list li{

display:flex;

justify-content:space-between;

align-items:center;

gap:18px;

padding:16px 18px;

background:var(--surface-2);

border:

1px solid
var(--border-light);

border-radius:

var(--radius-md);

color:var(--text-secondary);

}

.snapshot-list li strong{

color:white;

}


/*==========================================================
ANALYTICS PREVIEW
==========================================================*/

.analytics-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:20px;

margin-top:28px;

}

.analytics-placeholder{

min-height:170px;

padding:24px;

background:

linear-gradient(
180deg,
var(--surface-2),
var(--surface-3));

border:

1px dashed
var(--border-heavy);

border-radius:

var(--radius-lg);

position:relative;

overflow:hidden;

}

.analytics-placeholder::after{

content:"Future Module";

position:absolute;

right:16px;

bottom:14px;

font-size:.7rem;

font-weight:800;

letter-spacing:.08em;

text-transform:uppercase;

color:var(--text-light);

}

.analytics-placeholder h3{

font-size:1.15rem;

margin-bottom:12px;

}

.analytics-placeholder p{

color:var(--text-muted);

line-height:1.6;

}


/*==========================================================
FORM
==========================================================*/

.form{

display:grid;

gap:24px;

}

.form-card{

padding:30px;

background:

linear-gradient(
180deg,
var(--surface-2),
var(--surface-3));

border:

1px solid
var(--border-medium);

border-radius:

var(--radius-xl);

box-shadow:

var(--shadow-md);

}

.form-card h3{

margin:0 0 22px;

font-size:1.25rem;

font-weight:800;

letter-spacing:-.02em;

}

label{

display:grid;

gap:10px;

font-size:.9rem;

font-weight:700;

color:var(--text-secondary);

margin-bottom:18px;

}

input,
select,
textarea{

width:100%;

padding:15px 16px;

background:#0B0B0B;

border:

1px solid
var(--border-medium);

border-radius:

var(--radius-md);

color:white;

font:inherit;

outline:none;

transition:

all
var(--transition-fast);

}

textarea{

min-height:150px;

resize:vertical;

}

input::placeholder,
textarea::placeholder{

color:var(--text-light);

}

input:focus,
select:focus,
textarea:focus{

border-color:rgba(215,25,32,.65);

box-shadow:

0 0 0 3px
rgba(215,25,32,.14);

}


/*==========================================================
DYNAMIC FIELDS
==========================================================*/

#dynamicFields{

display:grid;

gap:18px;

margin-top:20px;

}

.dynamic-field-card{

padding:24px;

background:

rgba(215,25,32,.06);

border:

1px solid
rgba(215,25,32,.25);

border-radius:

var(--radius-lg);

}

.dynamic-field-card strong{

display:block;

margin-bottom:10px;

font-size:1rem;

color:white;

}

.dynamic-field-card p{

margin-bottom:18px;

}

.dynamic-label{

margin-bottom:16px;

}


/*==========================================================
LOCATION / GPS
==========================================================*/

.location-card{

display:flex;

justify-content:space-between;

align-items:center;

gap:24px;

padding:22px;

background:

rgba(255,255,255,.035);

border:

1px solid
var(--border-light);

border-radius:

var(--radius-lg);

}

.location-card strong{

display:block;

margin-bottom:6px;

font-size:1rem;

color:white;

}

.location-card p{

margin:0 0 6px;

color:var(--text-secondary);

}

.location-card small{

color:var(--text-muted);

line-height:1.5;

}


/*==========================================================
PRIVACY NOTE
==========================================================*/

.privacy-note{

padding:20px;

background:

rgba(215,25,32,.08);

border:

1px solid
rgba(215,25,32,.28);

border-left:

4px solid
var(--ftn-red);

border-radius:

var(--radius-lg);

color:var(--text-secondary);

line-height:1.65;

margin-bottom:22px;

}

.privacy-note strong{

color:white;

}/*==========================================================
PHOTO EVIDENCE
==========================================================*/

.photo-preview{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(120px,1fr));

gap:18px;

margin-top:20px;

}

.photo-preview-item{

position:relative;

overflow:hidden;

border-radius:var(--radius-md);

border:1px solid var(--border-medium);

background:var(--surface-3);

aspect-ratio:1/1;

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

}

.photo-preview-item img{

width:100%;

height:100%;

object-fit:cover;

display:block;

transition:transform var(--transition-normal);

}

.photo-preview-item:hover img{

transform:scale(1.08);

}


/*==========================================================
SUCCESS PANEL
==========================================================*/

.success-panel{

text-align:center;

padding:80px 50px;

}

.badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:8px 18px;

margin-bottom:24px;

border-radius:999px;

background:rgba(39,174,96,.14);

border:1px solid rgba(39,174,96,.35);

color:var(--ftn-success);

font-size:.8rem;

font-weight:700;

text-transform:uppercase;

letter-spacing:.08em;

}

.success-panel h2{

font-size:2.6rem;

margin-bottom:18px;

}

.success-panel p{

max-width:700px;

margin:auto;

line-height:1.7;

color:var(--text-secondary);

}

.success-panel button{

margin-top:18px;

margin-right:10px;

}


/*==========================================================
REPORT LIST
==========================================================*/

.reports{

display:grid;

gap:26px;

margin-top:30px;

}


/*==========================================================
REPORT CARD
==========================================================*/

.report-card{

background:

linear-gradient(
180deg,
var(--surface-2),
var(--surface-3));

border:

1px solid
var(--border-medium);

border-radius:

var(--radius-xl);

padding:28px;

box-shadow:

var(--shadow-md);

transition:

all
var(--transition-fast);

}

.report-card:hover{

transform:translateY(-4px);

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

}

.report-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

gap:20px;

}

.report-card h3{

font-size:1.5rem;

margin-bottom:10px;

font-weight:800;

}

.report-card p{

line-height:1.65;

}

.report-gallery{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(130px,1fr));

gap:14px;

margin-top:24px;

}

.gallery-item{

position:relative;

overflow:hidden;

aspect-ratio:1/1;

border-radius:var(--radius-md);

border:1px solid var(--border-medium);

background:var(--surface-3);

}

.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

display:block;

transition:transform var(--transition-normal);

}

.gallery-item:hover img{

transform:scale(1.08);

}

.gallery-badge{

position:absolute;

top:10px;

right:10px;

width:28px;

height:28px;

display:flex;

align-items:center;

justify-content:center;

border-radius:999px;

background:var(--ftn-red);

color:white;

font-size:.75rem;

font-weight:700;

}

.report-img{

margin-top:20px;

border-radius:var(--radius-lg);

border:1px solid var(--border-medium);

width:100%;

max-height:420px;

object-fit:cover;

}


/*==========================================================
STATUS BADGES
==========================================================*/

.status{

display:inline-flex;

align-items:center;

justify-content:center;

padding:8px 16px;

border-radius:999px;

font-size:.72rem;

font-weight:800;

letter-spacing:.08em;

text-transform:uppercase;

color:white;

}

.status.reported{

background:#6C757D;

}

.status.verified{

background:#2F80ED;

}

.status.assigned{

background:#9B51E0;

}

.status.in-progress{

background:#F2994A;

}

.status.resolved{

background:#27AE60;

}


/*==========================================================
REPORT META
==========================================================*/

.category{

margin-top:10px;

font-weight:700;

color:var(--ftn-red);

}

.meta{

margin-top:14px;

font-size:.88rem;

color:var(--text-muted);

}

.date{

font-size:.82rem;

color:var(--text-light);

}/*==========================================================
FTN LABS
==========================================================*/

.labs-grid{

display:grid;

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

gap:24px;

margin-top:32px;

}

.labs-grid article{

display:flex;

flex-direction:column;

padding:28px;

background:

linear-gradient(
180deg,
var(--surface-2),
var(--surface-3));

border:

1px solid
var(--border-medium);

border-radius:

var(--radius-xl);

box-shadow:

var(--shadow-md);

transition:

all
var(--transition-fast);

}

.labs-grid article:hover{

transform:translateY(-5px);

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

}

.labs-grid h3{

margin:18px 0 14px;

font-size:1.4rem;

font-weight:800;

letter-spacing:-.02em;

}

.labs-grid p{

line-height:1.7;

color:var(--text-secondary);

flex:1;

}

.lab-status{

display:inline-flex;

align-items:center;

justify-content:center;

width:max-content;

padding:6px 14px;

border-radius:999px;

background:

rgba(47,128,237,.12);

border:

1px solid
rgba(47,128,237,.30);

color:

var(--ftn-info);

font-size:.72rem;

font-weight:700;

letter-spacing:.08em;

text-transform:uppercase;

}


/*==========================================================
EMPTY / LOADING / ERROR STATES
==========================================================*/

.empty-state,
.loading-state,
.error-state{

padding:40px;

text-align:center;

border-radius:var(--radius-xl);

border:1px dashed var(--border-medium);

background:

rgba(255,255,255,.02);

}

.empty-state h3,
.loading-state h3,
.error-state h3{

margin-bottom:16px;

font-size:1.5rem;

}

.empty-state p,
.loading-state p{

color:var(--text-secondary);

}

.error-state{

border-color:

rgba(235,87,87,.40);

background:

rgba(235,87,87,.06);

}

.error-state p{

color:#FFD8D8;

}


/*==========================================================
HELPER COMPONENTS
==========================================================*/

.helper-text{

font-size:.82rem;

line-height:1.6;

color:var(--text-muted);

}

.hidden{

display:none !important;

}

.row{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

}


/*==========================================================
SCROLLBARS
==========================================================*/

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#0B0B0B;

}

::-webkit-scrollbar-thumb{

background:#333;

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:#555;

}


/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1200px){

.dashboard-grid{

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

}

.analytics-grid{

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

}

.intelligence-grid{

grid-template-columns:
1fr;

}

.labs-grid{

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

}

.report-type-grid{

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

}

}


@media(max-width:768px){

.panel{

padding:24px;

}

.panel-head{

flex-direction:column;

}

.dashboard-grid{

grid-template-columns:
1fr;

}

.analytics-grid{

grid-template-columns:
1fr;

}

.report-type-grid{

grid-template-columns:
1fr;

}

.snapshot-list li{

flex-direction:column;

align-items:flex-start;

}

.location-card{

flex-direction:column;

align-items:flex-start;

}

.report-top{

flex-direction:column;

align-items:flex-start;

}

.hero-actions{

flex-direction:column;

}

.hero-actions button{

width:100%;

}

.labs-grid{

grid-template-columns:
1fr;

}

.photo-preview{

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

}

.report-gallery{

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

}

}


@media(max-width:480px){

.photo-preview{

grid-template-columns:
1fr;

}

.report-gallery{

grid-template-columns:
1fr;

}

.kpi-card strong{

font-size:2.4rem;

}

.analytics-placeholder{

min-height:140px;

}

}