/* ======================================
ROOT
====================================== */
:root{
--portal-blue:#2F4765;
--portal-gold:#D4AF37;
--portal-white:#ffffff;
--portal-soft:#e8edf3;
--portal-muted:#9aa8b7;
}

/* RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:"Helvetica Neue", Arial, sans-serif;
background:var(--portal-blue);
color:var(--portal-white);
}

/* ======================================
LAYOUT
====================================== */
.portal-wrapper{
display:flex;
min-height:100vh;
}

/* ======================================
SIDEBAR (DESKTOP ONLY)
====================================== */
.portal-sidebar{
width:240px;
padding:40px 28px;
background:rgba(0,0,0,0.05);
border-right:1px solid rgba(255,255,255,0.08);
}

/* NAV */
.portal-nav a{
display:block;
padding:12px 0;
color:var(--portal-soft);
text-decoration:none;
font-size:0.95rem;
transition:0.2s;
}

.portal-nav a:hover{
color:var(--portal-gold);
}

/* ======================================
CONTENT
====================================== */
.portal-content{
flex:1;
padding:60px 70px;
max-width:1100px;
}

/* ======================================
TEXT
====================================== */
h1{
font-size:1.9rem;
margin-bottom:6px;
}

h2{
font-size:1.25rem;
margin-top:30px;
margin-bottom:10px;
display:none; /* hide on desktop */
}

h3{
font-size:1.05rem;
margin-bottom:6px;
}

p{
color:var(--portal-soft);
margin-bottom:14px;
}

/* ======================================
CARDS
====================================== */
.portal-card{
background:rgba(255,255,255,0.05);
padding:26px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.08);
margin-bottom:20px;
}

/* ======================================
BUTTON
====================================== */
.portal-btn{
display:inline-block;
padding:10px 22px;
background:var(--portal-gold);
color:#000;
text-decoration:none;
border-radius:24px;
font-weight:600;
margin-top:10px;
}

/* ======================================
PROGRESS BAR
====================================== */
.progress-container{
margin:25px 0;
}

.progress-bar{
width:100%;
height:8px;
background:rgba(255,255,255,0.1);
border-radius:10px;
overflow:hidden;
margin-bottom:10px;
}

.progress-fill{
height:100%;
background:var(--portal-gold);
transition:0.3s;
}

/* STATUS TRACKER */
.status-tracker{
display:flex;
flex-wrap:wrap;
gap:10px;
font-size:0.75rem;
}

.status-tracker span{
opacity:0.4;
}

.status-tracker span.active{
opacity:1;
color:var(--portal-gold);
}

/* ======================================
TIMELINE TABLE
====================================== */
.timeline-table{
width:100%;
border-collapse:collapse;
font-size:0.9rem;
}

.timeline-table th,
.timeline-table td{
padding:10px;
border-bottom:1px solid rgba(255,255,255,0.08);
text-align:left;
}

.timeline-table th{
color:var(--portal-muted);
font-weight:500;
}

/* ======================================
PORTAL TOOLS (MOBILE ONLY)
====================================== */
.power-tools{
display:none; /* hidden on desktop */
}

/* ======================================
BOTTOM NAV (MOBILE)
====================================== */
.bottom-nav{
display:none;
position:fixed;
bottom:15px;
left:50%;
transform:translateX(-50%);
width:92%;
max-width:420px;
height:65px;

background:rgba(255,255,255,0.08);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.15);

border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.25);

justify-content:space-around;
align-items:center;

z-index:999;
}

/* NAV ITEMS */
.bottom-nav a{
text-decoration:none;
color:var(--portal-soft);
font-size:0.65rem;
text-align:center;
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
transition:0.2s;
}

/* ICON */
.bottom-nav a i{
width:20px;
height:20px;
margin-bottom:4px;
}

/* ACTIVE */
.bottom-nav a.active{
color:var(--portal-gold);
}

/* ACTIVE DOT */
.bottom-nav a.active::after{
content:"";
display:block;
width:5px;
height:5px;
background:var(--portal-gold);
border-radius:50%;
margin-top:4px;
}

/* TAP EFFECT */
.bottom-nav a:active{
transform:scale(0.95);
}

/* ======================================
MOBILE
====================================== */
@media(max-width:768px){

/* REMOVE SIDEBAR */
.portal-sidebar{
display:none !important;
}

/* STACK LAYOUT */
.portal-wrapper{
flex-direction:column;
}

/* FULL WIDTH CONTENT */
.portal-content{
width:100%;
padding:20px;
padding-bottom:110px;
}

/* SHOW NAV */
.bottom-nav{
display:flex;
}

/* SHOW PORTAL TOOLS */
.power-tools{
display:grid;
grid-template-columns: repeat(2, 1fr);
gap:12px;
}

/* SHOW HEADING */
h2{
display:block;
}

/* STATUS FINAL STEP */
.status-tracker span:last-child.active{
color:limegreen;
font-weight:700;
}
/* ======================================
ACCRUAL PAGE FIXES
====================================== */

/* Fix Step blocks / highlighted text */
.portal-content strong,
.portal-content b{
color:var(--portal-gold);
}

/* Fix any sections that appear white */
.portal-content div,
.portal-content section{
background:transparent;
}

/* TABLE FIX */
.portal-content table{
width:100%;
border-collapse:collapse;
margin-top:15px;
background:transparent;
}

.portal-content th,
.portal-content td{
padding:12px;
text-align:left;
border-bottom:1px solid rgba(255,255,255,0.1);
background:transparent; /* 🔥 FIX */
color:var(--portal-soft);
}

/* Table headers */
.portal-content th{
color:var(--portal-gold);
font-weight:600;
}

/* Zebra rows (optional premium look) */
.portal-content tr:nth-child(even){
background:rgba(255,255,255,0.03);
}

/* Step titles (Step 1, 2, 3) */
.portal-content h4{
margin-top:20px;
margin-bottom:6px;
color:var(--portal-gold);
}

/* Remove any random white blocks */
.portal-content *{
background-color:transparent !important;
}

.portal-content h2,
.portal-content h3{
color:var(--portal-gold);
}
/* FIX TABLE ALIGNMENT */
.timeline-table{
width:100%;
border-collapse:collapse;
table-layout:fixed; /* 🔥 forces equal column widths */
}

.timeline-table th,
.timeline-table td{
padding:12px;
text-align:left;
}

/* Center the amounts */
.timeline-table td:nth-child(2),
.timeline-table td:nth-child(3),
.timeline-table th:nth-child(2),
.timeline-table th:nth-child(3){
text-align:center;
}
.timeline-table tr:last-child{
font-weight:600;
color:var(--portal-gold);
}
/* ======================================
FORM STYLING
====================================== */

input[type="text"],
textarea{
width:100%;
padding:10px;
margin-top:8px;
margin-bottom:15px;
border-radius:8px;
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.05);
color:var(--portal-white);
font-size:0.9rem;
}

input::placeholder,
textarea::placeholder{
color:var(--portal-muted);
}

/* OPTIONS */
.option{
display:block;
margin:6px 0;
color:var(--portal-soft);
}

.option input{
margin-right:6px;
}

/* RADIO + CHECKBOX */
input[type="radio"],
input[type="checkbox"]{
accent-color:var(--portal-gold);
cursor:pointer;
}

/* LABEL */
label{
display:block;
font-size:0.85rem;
margin-top:10px;
color:var(--portal-muted);
}
/* ======================================
PREMIUM FORM UI
====================================== */

/* INPUT FIELDS */
input[type="text"],
textarea{
width:100%;
padding:14px 16px;
margin-top:10px;
margin-bottom:18px;

border-radius:12px;
border:1px solid rgba(255,255,255,0.12);

background:rgba(255,255,255,0.06);
backdrop-filter:blur(6px);

color:var(--portal-white);
font-size:0.95rem;

transition:all 0.25s ease;
}

/* FOCUS STATE */
input[type="text"]:focus,
textarea:focus{
outline:none;
border:1px solid var(--portal-gold);
box-shadow:0 0 0 2px rgba(212,175,55,0.15);
background:rgba(255,255,255,0.08);
}

/* PLACEHOLDER */
input::placeholder,
textarea::placeholder{
color:var(--portal-muted);
}

/* ======================================
OPTION CARDS (RADIO + CHECKBOX)
====================================== */

.option{
display:flex;
align-items:center;
gap:10px;

padding:12px 14px;
margin-top:8px;

border-radius:12px;
border:1px solid rgba(255,255,255,0.08);

background:rgba(255,255,255,0.04);

cursor:pointer;
transition:all 0.2s ease;
}

/* HOVER */
.option:hover{
background:rgba(255,255,255,0.08);
border-color:rgba(255,255,255,0.2);
}

/* INPUT INSIDE */
.option input{
accent-color:var(--portal-gold);
cursor:pointer;
}

/* SELECTED STATE */
.option:has(input:checked){
border:1px solid var(--portal-gold);
background:rgba(212,175,55,0.12);
}

/* ======================================
LABELS
====================================== */

label{
font-size:0.8rem;
color:var(--portal-muted);
margin-top:10px;
display:block;
}

/* ======================================
SECTION SPACING
====================================== */

.portal-card{
margin-bottom:22px;
}
/* REMOVE NUMBER INPUT ARROWS */

/* Chrome, Safari, Edge */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}

/* BANKING STYLE INPUT */
.calc-box input{
width:100%;
padding:16px;
margin-top:8px;
margin-bottom:18px;

border-radius:14px;
border:1px solid rgba(255,255,255,0.08);

background:rgba(255,255,255,0.04);
color:var(--portal-white);

font-size:1rem;
font-weight:500;

transition:all 0.25s ease;
}

/* FOCUS */
.calc-box input:focus{
outline:none;
border:1px solid var(--portal-gold);
box-shadow:0 0 0 2px rgba(212,175,55,0.15);
background:rgba(255,255,255,0.08);
}

/* PLACEHOLDER */
.calc-box input::placeholder{
color:var(--portal-muted);
}
.admin-form{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.admin-form input,
.admin-form select{
flex:1;
min-width:200px;
}

.admin-form button{
min-width:120px;
}
}