/* FILE: static/styles.css */

body{
    margin:0;
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    background:#f8fafc;
    color:#111827;
}

/* SIDEBAR */
.sidebar{
    width:230px;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    background:#0f172a;
    color:#ffffff;
    padding:22px;
    box-sizing:border-box;
    overflow:auto;
}

.sidebar h2{
    margin-top:0;
    margin-bottom:24px;
    font-size:24px;
}

.sidebar a{
    display:block;
    color:#e5e7eb;
    text-decoration:none;
    padding:8px 10px;
    border-radius:8px;
    margin-bottom:4px;
    font-size:13px;
}

.sidebar a:hover{
    background:#1e293b;
    color:#ffffff;
}

.sidebar a.active{
    background:#1e293b;
    color:#ffffff;
    border-left:3px solid #f59e0b;
    padding-left:7px;
    font-weight:700;
    font-size:13px;
}

/* MAIN */
.main{
    margin-left:230px;
    min-height:100vh;
}

/* TOPBAR — same dark navy as the sidebar and top ribbon, so the whole
   line reads as one continuous color instead of a dark ribbon floating
   inside a white bar. */
.topbar{
    background:#0f172a;
    border-bottom:1px solid #0f172a;
    padding:8px 20px;
    font-weight:700;
    position:sticky;
    top:0;
    z-index:100;
}

/* CONTENT */
.content{
    padding:24px;
}

/* CARD */
.card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:18px;
    margin-bottom:16px;
    box-shadow:0 6px 16px rgba(0,0,0,0.05);
}

/* BUTTON */
.btn{
    background:#064e3b;
    color:#ffffff;
    text-decoration:none;
    border:none;
    border-radius:8px;
    padding:10px 14px;
    cursor:pointer;
    font-weight:700;
    display:inline-block;
}

.btn:hover{
    background:#022c22;
}

.btn-ai{
    box-shadow:0 0 0 rgba(6,78,59,0.35);
    transition:all 0.2s ease;
    margin-right:8px;
}

.btn-ai:hover{
    box-shadow:0 0 14px rgba(6,78,59,0.35);
}

.link-button{
    background:none;
    border:none;
    color:#0f766e;
    cursor:pointer;
    font-size:12px;
    font-weight:700;
    text-decoration:underline;
}

.link-button:disabled{
    color:#9ca3af;
    cursor:not-allowed;
}

.btn-draft{
    background:#1e40af;
}

.btn-draft:hover{
    background:#1e3a8a;
}

.btn-final{
    background:#065f46;
}

.btn-final:hover{
    background:#064e3b;
}

.btn:disabled,
.btn-disabled{
    background:#9ca3af;
    cursor:not-allowed;
}

.btn:disabled:hover,
.btn-disabled:hover{
    background:#9ca3af;
}

/* TABLE */
table{
    width:100%;
    border-collapse:collapse;
    background:#ffffff;
    border-radius:12px;
    overflow:hidden;
}

th{
    background:#0f172a;
    color:#ffffff;
    text-align:left;
}

th, td{
    padding:12px;
    border-bottom:1px solid #e5e7eb;
}

tr:hover{
    background:#f8fafc;
}

/* INPUTS */
input,
select,
textarea{
    width:100%;
    padding:10px;
    margin-top:6px;
    margin-bottom:14px;
    border:1px solid #d1d5db;
    border-radius:8px;
    box-sizing:border-box;
    font-size:14px;
    background:#ffffff;
}

textarea{
    resize:vertical;
}

.generated-preview{
    min-height:280px;
    background:#fbfdff;
}

.editor-list{
    margin-top:12px;
    margin-bottom:8px;
}

.editor-row{
    display:grid;
    grid-template-columns:34px 1fr 34px 34px auto;
    gap:8px;
    align-items:center;
    margin-bottom:8px;
}

.editor-input{
    margin:0;
}

.mini-btn{
    border:1px solid #d1d5db;
    background:#ffffff;
    color:#111827;
    border-radius:8px;
    padding:8px 10px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.mini-btn:hover{
    background:#f9fafb;
}

#jumpToLinks .mini-btn:hover{
    border-color:var(--brand-primary);
    color:var(--brand-primary);
    background:var(--surface-sunken);
}

.mini-btn-danger{
    border-color:#fecaca;
    color:#991b1b;
}

.team-row{
    display:grid;
    grid-template-columns:1fr 1fr 34px 34px auto;
    gap:8px;
    align-items:center;
    margin-bottom:8px;
}

.team-row input{
    margin:0;
}

/* HEADINGS */
h1,h2,h3,h4{
    margin-top:0;
    color:#111827;
}

/* BADGES */
.badge-high{
    background:#b91c1c;
    color:#ffffff;
    padding:4px 8px;
    border-radius:6px;
}

.badge-medium{
    background:#d97706;
    color:#ffffff;
    padding:4px 8px;
    border-radius:6px;
}

.badge-low{
    background:#15803d;
    color:#ffffff;
    padding:4px 8px;
    border-radius:6px;
}

.badge-open{
    background:#ffffff;
    color:#111827;
    border:1px solid #111827;
    padding:4px 8px;
    border-radius:6px;
}

.badge-closed{
    background:#111827;
    color:#ffffff;
    padding:4px 8px;
    border-radius:6px;
}

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

.sidebar{
    position:relative;
    width:100%;
    height:auto;
}

.main{
    margin-left:0;
}

.content{
    padding:14px;
}

.editor-row,
.team-row{
    grid-template-columns:1fr;
}

}

/* PRINT */
@media print{

.sidebar,
.topbar,
.autosave-status,
.btn,
.mini-btn,
.mic-btn{
    display:none !important;
}

.main{
    margin-left:0;
}

.content{
    padding:0;
}

.card{
    box-shadow:none;
    border:1px solid #cbd5e1;
    break-inside:avoid;
}

a{
    color:#111827 !important;
    text-decoration:none !important;
}

}

.autosave-status{
    position:sticky;
    top:68px;
    z-index:90;
    margin-bottom:12px;
    padding:8px 12px;
    border:1px solid #d1d5db;
    border-radius:8px;
    background:#f8fafc;
    color:#334155;
    font-size:12px;
    font-weight:600;
}

.mic-host{
    position:relative;
    width:100%;
}

.mic-host textarea{
    padding-right:145px;
}

.mic-btn{
    position:absolute;
    top:-18px;
    right:10px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid #166534;
    background:linear-gradient(135deg,rgba(20,83,45,0) 0%,rgba(21,128,61,0) 55%,rgba(22,163,74,0) 100%);
    color:#000000;
    border-radius:999px;
    padding:8px 14px;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    transition:all .15s;
    white-space:nowrap;
    box-shadow:0 6px 16px rgba(21,128,61,0.28);
}

.mic-btn:hover{
    transform:translateY(-1px);
    background:linear-gradient(135deg,rgba(20,83,45,0.25) 0%,rgba(21,128,61,0.25) 55%,rgba(22,163,74,0.25) 100%);
    box-shadow:0 8px 18px rgba(21,128,61,0.34);
}

@keyframes mic-pulse{0%,100%{opacity:1;}50%{opacity:.55;}}

.mic-btn.mic-listening{
    color:#fff;
    border-color:var(--fb-error);
    background:linear-gradient(135deg,var(--st-overdue) 0%,#dc2626 100%);
    animation:mic-pulse 1s infinite;
    box-shadow:0 8px 18px rgba(220,38,38,0.32);
}