@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--blue:#0073EA;--blue-hover:#0060B9;--blue-light:#EAF3FF;--blue-soft:#CDE5FF;
--purple:#6161FF;--purple-light:#F0F0FF;--green:#00C875;--green-light:#E6F8F0;
--orange:#FDAB3D;--orange-light:#FFF4E5;--red:#E2445C;--red-light:#FDECEF;
--white:#FFFFFF;--bg:#F6F7FB;--sidebar:#F0F3FA;--surface:#FFFFFF;
--border:#DCE3F0;--border-strong:#C3CBDC;--text:#1F2937;--text-sec:#5F6B7A;
--text-muted:#8C97A8;--icon:#4B5563;
--status-done:#00C875;--status-progress:#FDAB3D;--status-stopped:#E2445C;--status-pending:#579BFC;--status-neutral:#C4C4C4;
--topbar-h:52px;--sidebar-w:280px;
--r-sm:4px;--r-md:6px;--r-lg:8px;--r-xl:12px;--r-pill:999px;
--shadow-sm:0 1px 2px rgba(0,0,0,.06);--shadow-md:0 4px 12px rgba(0,0,0,.08);
--transition:all 180ms ease;
}
html,body{height:100%;font-family:'Inter',Arial,sans-serif;font-size:14px;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit;font-size:14px}

/* ---- LAYOUT ---- */
.app-layout{display:flex;flex-direction:column;min-height:100vh}
.app-body{display:flex;flex:1;overflow:hidden;height:calc(100vh - var(--topbar-h))}

/* ---- TOPBAR ---- */
.topbar{height:var(--topbar-h);background:#EEF3FF;border-bottom:1px solid var(--border);
display:flex;align-items:center;padding:0 20px;gap:12px;position:sticky;top:0;z-index:100}
.topbar-logo{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--blue)}
.topbar-logo svg{width:28px;height:28px}
.topbar-search{flex:1;max-width:420px;position:relative}
.topbar-search input{width:100%;height:34px;border:1px solid var(--border);border-radius:var(--r-pill);
padding:0 14px 0 36px;background:var(--white);color:var(--text);outline:none;transition:var(--transition)}
.topbar-search input:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,115,234,.15)}
.topbar-search .search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}
.topbar-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.notif-btn{position:relative;width:34px;height:34px;border:none;background:transparent;border-radius:var(--r-md);
display:flex;align-items:center;justify-content:center;color:var(--icon);transition:var(--transition)}
.notif-btn:hover{background:var(--blue-light)}
.notif-badge{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:var(--r-pill);
background:var(--red);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.avatar-btn{width:34px;height:34px;border-radius:var(--r-pill);border:2px solid var(--border);
background:var(--blue);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition)}
.avatar-btn:hover{border-color:var(--blue)}

/* ---- SIDEBAR ---- */
.sidebar{width:var(--sidebar-w);background:var(--sidebar);border-right:1px solid var(--border);
padding:16px;overflow-y:auto;flex-shrink:0;transition:var(--transition)}
.sidebar-section{margin-bottom:24px}
.sidebar-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;
letter-spacing:.06em;padding:0 12px;margin-bottom:6px}
.sidebar-item{display:flex;align-items:center;gap:10px;height:36px;border-radius:var(--r-md);
padding:0 12px;color:var(--text-sec);transition:var(--transition);cursor:pointer;font-size:14px}
.sidebar-item:hover{background:var(--blue-light);color:var(--text)}
.sidebar-item.active{background:#DCE8FF;color:var(--text);font-weight:600}
.sidebar-item svg{width:18px;height:18px;flex-shrink:0}
.sidebar-item .count{margin-left:auto;font-size:11px;background:var(--border);color:var(--text-sec);
border-radius:var(--r-pill);padding:1px 7px;font-weight:500}
.sidebar-item.active .count{background:var(--blue-soft);color:var(--blue)}
.sidebar-proj-dot{width:10px;height:10px;border-radius:var(--r-pill);flex-shrink:0}
.sidebar-divider{height:1px;background:var(--border);margin:8px 0}
.sidebar-new-btn{display:flex;align-items:center;gap:8px;width:100%;height:34px;border:1px dashed var(--border-strong);
border-radius:var(--r-md);padding:0 12px;background:transparent;color:var(--text-muted);font-size:13px;
transition:var(--transition)}
.sidebar-new-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}

/* ---- MAIN CONTENT ---- */
.main-content{flex:1;overflow-y:auto;background:var(--white)}
.page-header{padding:24px 40px 16px;border-bottom:1px solid var(--border)}
.page-title{font-size:26px;font-weight:600;color:var(--text);margin-bottom:4px}
.page-subtitle{font-size:13px;color:var(--text-muted)}
.page-tabs{display:flex;gap:0;margin-top:16px}
.page-tab{height:38px;padding:0 16px;font-size:14px;color:var(--text-sec);border:none;background:transparent;
border-bottom:2px solid transparent;cursor:pointer;transition:var(--transition);font-family:inherit}
.page-tab:hover{color:var(--text)}
.page-tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:500}
.page-body{padding:24px 40px}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-md);
padding:8px 14px;font-size:14px;font-weight:500;border:none;transition:var(--transition);cursor:pointer;font-family:inherit}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hover)}
.btn-secondary{background:var(--white);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--bg);border-color:var(--border-strong)}
.btn-ghost{background:transparent;color:var(--text-sec);padding:8px 10px}
.btn-ghost:hover{background:var(--bg);color:var(--text)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#c73351}
.btn-sm{padding:5px 10px;font-size:13px}
.btn-icon{padding:6px;border-radius:var(--r-md)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---- STATUS PILLS ---- */
.status-pill{display:inline-flex;align-items:center;justify-content:center;
padding:0 12px;height:28px;border-radius:0;font-size:13px;font-weight:500;color:#fff;cursor:pointer;
transition:var(--transition);white-space:nowrap}
.status-pill.done{background:var(--status-done)}
.status-pill.progress{background:var(--status-progress)}
.status-pill.stopped{background:var(--status-stopped)}
.status-pill.pending{background:var(--status-pending)}
.status-pill.neutral{background:var(--status-neutral)}
.status-pill-sm{height:22px;padding:0 8px;font-size:11px;border-radius:var(--r-pill)}

/* ---- PRIORITY ---- */
.priority-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;padding:2px 8px;border-radius:var(--r-pill)}
.priority-baixa{background:#E6F8F0;color:#00875A}
.priority-media{background:#FFF4E5;color:#b87900}
.priority-alta{background:#FDECEF;color:#c0293f}
.priority-critica{background:#FDECEF;color:#c0293f;border:1px solid var(--red)}

/* ---- DATE PILL ---- */
.date-pill{background:#F5F6F8;color:var(--text-sec);border-radius:var(--r-pill);padding:3px 10px;font-size:13px}
.date-pill.active{background:var(--status-pending);color:#fff}
.date-pill.late{background:#323338;color:#fff}

/* ---- CARDS ---- */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px;transition:var(--transition)}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card-title{font-size:13px;font-weight:500;color:var(--text-sec);text-transform:uppercase;letter-spacing:.04em}
.card-value{font-size:32px;font-weight:700;color:var(--text)}
.card-sub{font-size:12px;color:var(--text-muted);margin-top:4px}

/* ---- GRID ---- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ---- BOARD TABLE ---- */
.board-section{margin-bottom:24px}
.board-group-header{display:flex;align-items:center;gap:10px;padding:10px 0;cursor:pointer}
.board-group-dot{width:14px;height:14px;border-radius:2px;flex-shrink:0}
.board-group-name{font-size:15px;font-weight:600;color:var(--text)}
.board-group-count{font-size:12px;color:var(--text-muted);background:var(--border);border-radius:var(--r-pill);padding:1px 7px}
.board-table{width:100%;border-collapse:collapse;border:1px solid var(--border)}
.board-table th{height:38px;background:var(--white);border-bottom:1px solid var(--border);
border-right:1px solid var(--border);padding:0 12px;font-size:12px;font-weight:600;color:var(--text-muted);
text-align:left;white-space:nowrap}
.board-table td{height:38px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);
padding:0 12px;font-size:14px;color:var(--text);white-space:nowrap}
.board-table tr:hover td{background:#F5F8FF}
.board-table tr.selected td{background:#D7E9FF}
.board-table td:last-child,.board-table th:last-child{border-right:none}
.board-table .col-title{min-width:260px;cursor:pointer}
.board-table .col-title:hover{color:var(--blue)}
.board-add-row{display:flex;align-items:center;gap:8px;padding:8px 12px;color:var(--text-muted);
font-size:13px;border-top:1px solid var(--border);cursor:pointer;transition:var(--transition)}
.board-add-row:hover{background:var(--blue-light);color:var(--blue)}

/* ---- AVATAR ---- */
.avatar{width:28px;height:28px;border-radius:var(--r-pill);display:inline-flex;align-items:center;
justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;border:2px solid var(--white)}
.avatar-group{display:flex;flex-direction:row-reverse}
.avatar-group .avatar{margin-right:-8px}

/* ---- RIGHT PANEL ---- */
.right-panel{position:fixed;top:var(--topbar-h);right:0;bottom:0;width:520px;background:var(--white);
border-left:1px solid var(--border);padding:24px;overflow-y:auto;z-index:90;
transform:translateX(100%);transition:transform 220ms ease-out;box-shadow:-4px 0 12px rgba(0,0,0,.04)}
.right-panel.open{transform:translateX(0)}
.panel-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.panel-title{font-size:20px;font-weight:600;color:var(--text)}
.panel-close{width:32px;height:32px;border:none;background:transparent;border-radius:var(--r-md);
color:var(--text-sec);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition)}
.panel-close:hover{background:var(--bg)}
.panel-section{margin-bottom:20px}
.panel-label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.panel-editor{min-height:100px;border:1px solid var(--blue);border-radius:var(--r-lg);
background:var(--white);padding:12px;font-size:14px;color:var(--text);outline:none;resize:vertical}

/* ---- PROGRESS BAR ---- */
.progress-bar{height:8px;border-radius:var(--r-sm);background:var(--border);overflow:hidden;display:flex}
.progress-bar.lg{height:24px;border-radius:var(--r-sm)}
.prog-done{background:var(--status-done)}
.prog-progress{background:var(--status-progress)}
.prog-stopped{background:var(--status-stopped)}
.prog-pending{background:var(--status-pending)}

/* ---- FORMS ---- */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:13px;font-weight:500;color:var(--text-sec);margin-bottom:6px}
.form-control{width:100%;height:38px;border:1px solid var(--border);border-radius:var(--r-md);
padding:0 12px;color:var(--text);background:var(--white);outline:none;transition:var(--transition)}
.form-control:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,115,234,.12)}
textarea.form-control{height:auto;padding:10px 12px;resize:vertical}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6B7A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
.form-hint{font-size:12px;color:var(--text-muted);margin-top:4px}
.form-error{font-size:12px;color:var(--red);margin-top:4px}

/* ---- MODAL ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:200;
display:none;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--white);border-radius:var(--r-xl);padding:28px;width:100%;max-width:520px;
box-shadow:var(--shadow-md);animation:modalIn 180ms ease}
@keyframes modalIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.modal-title{font-size:18px;font-weight:600;color:var(--text)}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:24px;padding-top:16px;border-top:1px solid var(--border)}

/* ---- TABLE GENERIC ---- */
.table{width:100%;border-collapse:collapse}
.table th{padding:10px 16px;text-align:left;font-size:12px;font-weight:600;color:var(--text-muted);
text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--border)}
.table td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text)}
.table tbody tr:hover td{background:var(--bg)}
.table tbody tr:last-child td{border-bottom:none}

/* ---- BADGES/TAGS ---- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:500}
.badge-blue{background:var(--blue-light);color:var(--blue)}
.badge-green{background:var(--green-light);color:#006b3f}
.badge-orange{background:var(--orange-light);color:#8a5a00}
.badge-red{background:var(--red-light);color:#9b1a2c}
.badge-purple{background:var(--purple-light);color:var(--purple)}
.badge-neutral{background:var(--border);color:var(--text-sec)}

/* ---- NOTIFICATIONS DROPDOWN ---- */
.notif-dropdown{position:absolute;top:calc(var(--topbar-h) + 4px);right:56px;width:360px;background:var(--white);
border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-md);z-index:150;display:none}
.notif-dropdown.open{display:block}
.notif-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.notif-title{font-size:15px;font-weight:600;color:var(--text)}
.notif-item{padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:var(--transition)}
.notif-item:hover{background:var(--bg)}
.notif-item.unread{background:var(--blue-light)}
.notif-item:last-child{border-bottom:none}
.notif-msg{font-size:13px;color:var(--text);line-height:1.4}
.notif-time{font-size:11px;color:var(--text-muted);margin-top:3px}
.notif-empty{padding:32px 16px;text-align:center;color:var(--text-muted);font-size:13px}

/* ---- SUBTASKS ---- */
.subtask-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.subtask-item:last-child{border-bottom:none}
.subtask-check{width:18px;height:18px;border:2px solid var(--border-strong);border-radius:var(--r-sm);
cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.subtask-check.checked{background:var(--blue);border-color:var(--blue)}
.subtask-title{flex:1;font-size:14px;color:var(--text)}
.subtask-title.done{text-decoration:line-through;color:var(--text-muted)}

/* ---- FILES ---- */
.file-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.file-icon{width:36px;height:36px;border-radius:var(--r-md);background:var(--blue-light);
color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.file-name{font-size:14px;font-weight:500;color:var(--text)}
.file-meta{font-size:12px;color:var(--text-muted);margin-top:2px}
.file-actions{margin-left:auto;display:flex;gap:4px}

/* ---- UPLOAD ZONE ---- */
.upload-zone{border:2px dashed var(--border-strong);border-radius:var(--r-lg);padding:32px;
text-align:center;cursor:pointer;transition:var(--transition);color:var(--text-muted)}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--blue);background:var(--blue-light);color:var(--blue)}
.upload-zone svg{width:32px;height:32px;margin-bottom:8px;opacity:.6}

/* ---- CALENDAR ---- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border)}
.cal-cell{background:var(--white);min-height:100px;padding:6px}
.cal-day-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;text-align:center;padding:8px 0;background:var(--white)}
.cal-day-num{font-size:13px;font-weight:500;color:var(--text-sec);margin-bottom:4px}
.cal-day-num.today{background:var(--blue);color:#fff;width:24px;height:24px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center}
.cal-event{background:var(--blue-light);color:var(--blue);font-size:11px;padding:2px 6px;border-radius:2px;margin-bottom:2px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- EMPTY STATE ---- */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 32px;text-align:center}
.empty-icon{width:64px;height:64px;background:#EEF3FF;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--blue)}
.empty-title{font-size:18px;font-weight:600;color:var(--text);margin-bottom:8px}
.empty-text{font-size:14px;color:var(--text-sec);max-width:340px;line-height:1.5}

/* ---- TOAST ---- */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--text);color:#fff;padding:12px 18px;border-radius:var(--r-lg);
font-size:13px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:10px;
animation:toastIn 200ms ease;max-width:320px}
.toast.success{background:#1a6b45}
.toast.error{background:#9b1a2c}
.toast.info{background:var(--blue)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ---- REPORT CHARTS ---- */
.chart-wrap{position:relative;height:200px}

/* ---- LOGIN PAGE ---- */
.login-page{min-height:100vh;background:linear-gradient(135deg,#0073EA 0%,#6161FF 100%);
display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{background:var(--white);border-radius:var(--r-xl);padding:40px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.15)}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo-icon{width:56px;height:56px;background:var(--blue);border-radius:var(--r-xl);
display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.login-title{font-size:22px;font-weight:700;color:var(--text);text-align:center;margin-bottom:4px}
.login-sub{font-size:13px;color:var(--text-muted);text-align:center;margin-bottom:28px}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ---- RESPONSIVE ---- */
@media(max-width:1024px){
.sidebar{position:fixed;left:0;top:var(--topbar-h);bottom:0;z-index:80;transform:translateX(-100%)}
.sidebar.open{transform:translateX(0)}
.page-body{padding:16px}
.page-header{padding:16px 16px 0}
.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
.right-panel{width:100%}
.modal{margin:16px}
}