/* ==========================================================
   SHOFAR CAMPAIGN MANAGER
   Modern SaaS Theme
   ========================================================== */

:root{

    /* Brand */

    --primary:#FF571F;
    --primary-dark:#E24B16;
    --primary-light:#FFF2EC;

    --secondary:#8F8F8F;

    /* Neutrals */

    --background:#F6F8FB;
    --surface:#FFFFFF;
    --surface-2:#FBFCFD;

    --text:#2C3138;
    --text-light:#6B7280;

    --border:#E7EBF0;

    /* Status */

    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;

    /* Design */

    --radius:14px;
    --radius-small:8px;

    --shadow-small:
        0 1px 3px rgba(0,0,0,.05);

    --shadow:
        0 6px 18px rgba(20,20,20,.06),
        0 18px 40px rgba(20,20,20,.04);

    --shadow-hover:
        0 10px 26px rgba(20,20,20,.08),
        0 24px 60px rgba(20,20,20,.08);

    --transition:180ms ease;
}

/* ==========================================================
   Reset
   ========================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    font-size:16px;
}

body{

    margin:0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color:var(--text);

    background:
        radial-gradient(circle at top,#ffffff 0%,#F6F8FB 35%,#F6F8FB 100%);

    line-height:1.5;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;
}

/* ==========================================================
   Typography
   ========================================================== */

h1{

    margin:0 0 24px;

    font-size:2rem;

    font-weight:700;

    letter-spacing:-0.03em;

    color:var(--text);

}

h2{

    margin:40px 0 18px;

    font-size:1.3rem;

    font-weight:650;

    letter-spacing:-0.02em;

}

h3{

    margin:0 0 16px;

    font-size:1.05rem;

    font-weight:600;

}

p{

    color:var(--text-light);

    margin-top:0;

}

label{

    display:block;

    margin-bottom:8px;

    margin-top:18px;

    font-size:.9rem;

    font-weight:600;

    color:var(--text);

}

/* ==========================================================
   Links
   ========================================================== */

a{

    color:var(--primary);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--primary-dark);

}

/* ==========================================================
   Layout
   ========================================================== */

.container{

    max-width:1100px;

    margin:48px auto;

    padding:0 24px;

}

/* ==========================================================
   Helpers
   ========================================================== */

.hidden{

    display:none !important;

}

.error{

    background:#FFF1F1;

    color:#B42318;

    border-left:4px solid var(--danger);

    padding:14px 18px;

    border-radius:10px;

    margin-bottom:18px;

}

.hint{

    color:var(--text-light);

    font-size:.9rem;

}

/* ==========================================================
   Animations
   ========================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.container{

    animation:fadeIn .25s ease;

}

/* ==========================================================
   NAVIGATION
   ========================================================== */

.navbar{

    position:sticky;
    top:0;
    z-index:1000;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 36px;

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

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(231,235,240,.9);

    box-shadow:
        0 1px 2px rgba(0,0,0,.03);

}

.navbar::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        #ff7a4d
    );

}

.navbar-brand{

    display:flex;
    align-items:center;
    gap:12px;

    font-size:1.2rem;
    font-weight:700;

    color:var(--text);

    letter-spacing:-0.03em;

}

.navbar-brand::before{

    content:"";

    width:12px;
    height:12px;

    border-radius:4px;

    background:var(--primary);

    box-shadow:
        0 0 12px rgba(255,87,31,.35);

}

.navbar-links{

    display:flex;
    align-items:center;
    gap:12px;

}

.navbar-links a{

    color:var(--text-light);

    padding:10px 16px;

    border-radius:10px;

    font-size:.92rem;

    font-weight:600;

    transition:all .18s ease;

}

.navbar-links a:hover{

    background:var(--primary-light);

    color:var(--primary);

}

.navbar-user{

    margin-left:18px;

    padding-left:18px;

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

    color:var(--text);

    font-weight:600;

    white-space:nowrap;

}

/* Active page */

.navbar-links a.active{

    background:var(--primary-light);

    color:var(--primary);

}

/* Logout */

.navbar-links a:last-child{

    color:#C2410C;

}

.navbar-links a:last-child:hover{

    background:#FFF1EC;

}

/* Mobile */

@media (max-width:900px){

    .navbar{

        padding:16px 20px;

        flex-wrap:wrap;

        gap:14px;

    }

    .navbar-links{

        width:100%;

        justify-content:flex-start;

        flex-wrap:wrap;

    }

    .navbar-user{

        border-left:none;

        padding-left:0;

        margin-left:0;

        width:100%;

        font-size:.9rem;

    }

}
/* ==========================================================
   CARDS
   ========================================================== */

.card,
.login-card{

    position:relative;

    background:var(--surface);

    border:1px solid rgba(231,235,240,.85);

    border-radius:18px;

    padding:32px;

    margin-bottom:32px;

    box-shadow:var(--shadow);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;

}

.card:hover{

    transform:translateY(-3px);

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

    border-color:#DDE3EA;

}

/* Small orange accent */

.card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:5px;
    height:100%;

    background:linear-gradient(
        to bottom,
        var(--primary),
        #ff8d66
    );

    border-radius:18px 0 0 18px;

    opacity:.95;

}

/* ==========================================================
   CARD TITLES
   ========================================================== */

.card h2,
.card h3{

    margin-top:0;

    margin-bottom:24px;

}

.card h2{

    font-size:1.35rem;

}

.card h3{

    color:var(--text);

}

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

section{

    margin-bottom:40px;

}

section:last-child{

    margin-bottom:0;

}

/* ==========================================================
   CONTENT SPACING
   ========================================================== */

.card > *:first-child{

    margin-top:0;

}

.card > *:last-child{

    margin-bottom:0;

}

.card hr{

    border:none;

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

    margin:28px 0;

}

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

.grid{

    display:grid;

    gap:24px;

}

.grid.two{

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

}

.grid.three{

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

}

@media (max-width:900px){

    .grid.two,
    .grid.three{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   STAT BOXES
   ========================================================== */

.stat{

    background:var(--surface-2);

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

    border-radius:14px;

    padding:20px;

}

.stat-label{

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:.06em;

    color:var(--text-light);

    margin-bottom:8px;

}

.stat-value{

    font-size:2rem;

    font-weight:700;

    letter-spacing:-0.03em;

    color:var(--text);

}

/* ==========================================================
   DIVIDERS
   ========================================================== */

.divider{

    height:1px;

    background:var(--border);

    margin:28px 0;

}
/* ==========================================================
   DASHBOARD FORM
   ========================================================== */

.campaign-form{

    display:grid;

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

    gap:32px 36px;

    align-items:start;

}

/* Full-width fields */

.campaign-form p,
.campaign-form button{

    grid-column:1 / -1;

}

/* Make labels sit nicely above controls */

.campaign-form label{

    margin:0 0 8px;

    font-size:.9rem;

    font-weight:600;

    color:var(--text);

}

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

.campaign-form input,
.campaign-form select{

    width:100%;

    height:48px;

    padding:0 16px;

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

    border-radius:12px;

    background:#fff;

    font-size:.95rem;

    color:var(--text);

    transition:all .18s ease;

    appearance:none;

}

/* nicer dropdown arrow */

.campaign-form select{

    background-image:
        linear-gradient(45deg,transparent 50%,var(--secondary) 50%),
        linear-gradient(135deg,var(--secondary) 50%,transparent 50%);

    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);

    background-size:6px 6px;

    background-repeat:no-repeat;

    padding-right:42px;

}

/* Hover */

.campaign-form input:hover,
.campaign-form select:hover{

    border-color:#CDD4DD;

}

/* Focus */

.campaign-form input:focus,
.campaign-form select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:
        0 0 0 4px rgba(255,87,31,.12);

}

/* ==========================================================
   FILE PICKERS
   ========================================================== */

.campaign-form input[type=file]{

    padding:16px;

    height:auto;

    background:var(--surface-2);

    border:2px dashed var(--border);

    border-radius:14px;

}

.campaign-form input[type=file]:hover{

    border-color:var(--primary);

    background:var(--primary-light);

}

.campaign-form input[type=file]::file-selector-button{

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:8px;

    padding:10px 18px;

    margin-right:16px;

    font-weight:600;

    cursor:pointer;

    transition:.18s ease;

}

.campaign-form input[type=file]::file-selector-button:hover{

    background:var(--primary-dark);

}

/* ==========================================================
   BUTTON
   ========================================================== */

.campaign-form button{

    justify-self:end;

    margin-top:12px;

    min-width:220px;

    height:52px;

    border:none;

    border-radius:12px;

    background:linear-gradient(
        180deg,
        #FF6A37,
        var(--primary)
    );

    color:#fff;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.01em;

    cursor:pointer;

    box-shadow:
        0 10px 26px rgba(255,87,31,.28);

    transition:all .18s ease;

}

.campaign-form button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 14px 34px rgba(255,87,31,.35);

}

.campaign-form button:active{

    transform:none;

}

/* ==========================================================
   HELP TEXT
   ========================================================== */

.campaign-form .hint{

    margin-top:-8px;

    margin-bottom:8px;

    color:var(--secondary);

}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:900px){

    .campaign-form{

        grid-template-columns:1fr;

    }

    .campaign-form button{

        width:100%;

        justify-self:stretch;

    }

}
/* Form groups */

.form-group{

    display:flex;

    flex-direction:column;

}

/* Span both columns */

.form-group.full{

    grid-column:1 / -1;

}
.action-row{

    display:flex;

    justify-content:flex-end;

}