@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* Updated variables and sidebar/menu visuals */
:root{
  --bg: #f6f8fb;
  --base-font-size: 15px;
  --card: #ffffff;
  --primary: #2563eb;
  --primary-2: #06b6d4;
  --primary-hover: #164ea6;
  --secondary: #64748b;
  --success: #16a34a;
  --danger: #ef4444;
  --muted: #6b7280;
  --sidebar-grad-from: #082032;
  --sidebar-grad-to: #0b3b52;
  --surface-1: #f1f5f9;
}

.clickable{ cursor:pointer; text-decoration:underline; }
.clickable:hover{ opacity:0.9; }

/* Dark theme variables - applied when .dark-mode is present on document element or body */
.dark-mode, body.dark-mode, html.dark-mode{
  --bg: #071020;
  --card: #07121a; /* slightly darker card for contrast */
  --primary: #60a5fa;
  --primary-2: #06b6d4;
  --primary-hover: #4f46e5;
  --secondary: #94a3b8;
  --success: #16a34a;
  --danger: #ef4444;
  --muted: #9aa4b2;
  --sidebar-grad-from: #041428;
  --sidebar-grad-to: #053042;
  color: #ffffff; /* textos em branco */
  /* override page background when dark mode is active */
  background: linear-gradient(180deg,#040812 0%, #071020 100%);
}

*{box-sizing:border-box}
html,body{height:100%; overflow-y: auto}
/* fluid, responsive base font size (mobile-first) */
html{font-size:clamp(14px,1.1vw,16px)}
body{
  font-family:'Poppins',system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
  margin:0;
  background:linear-gradient(180deg,#eef2f6 0%, #f4f4f4 100%);
  color:#222;
}

/* Login styles */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.login-card{
  width:420px;
  max-width:95%;
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,252,0.9));
  border-radius:12px;
  box-shadow:0 6px 18px rgba(16,24,40,0.08);
  padding:2rem;
  backdrop-filter: blur(6px);
  transition:transform .25s ease, box-shadow .25s ease;
}
.login-card:hover{transform:translateY(-4px)}
.login-card h1{margin:0 0 1rem;font-size:1.4rem}
.form-group{margin-bottom:1rem}
label{display:block;margin-bottom:.35rem;font-size:.9rem;color:var(--muted)}
input[type=text],input[type=password],select,input[type=email],input[type=date]{
  width:100%;
  padding:.75rem 0.9rem;
  border-radius:8px;
  border:1px solid #e6e6e6;
  background:#fff;
  transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;
}
input:focus{outline:none;border-color:var(--primary);box-shadow:0 4px 14px rgba(0,123,255,0.08)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.6rem .9rem;border-radius:8px;border:none;color:#fff;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.btn:active{transform:scale(.99)}
.btn-primary{background:linear-gradient(135deg,var(--primary),#00a1ff);box-shadow:0 6px 18px rgba(0,123,255,0.12)}
.btn-primary:hover{background:var(--primary-hover);transform:scale(1.03)}
.btn-secondary{background:linear-gradient(135deg,var(--secondary),#5a6268)}
.btn-success{background:linear-gradient(135deg,var(--success),#20c158)}
.btn-danger{background:linear-gradient(135deg,var(--danger),#c82333)}
.small{font-size:.85rem}
.login-alert{background:#fff0f0;color:var(--danger);padding:.6rem .8rem;border:1px solid rgba(220,53,69,0.08);border-radius:8px;margin-bottom:.8rem;display:none}

/* Dashboard layout */
.app{
  display:flex;
  min-height:100vh;
}
.sidebar{
  width:260px;
  background:linear-gradient(180deg,var(--sidebar-grad-from), var(--sidebar-grad-to));
  color:#fff;
  padding:1rem 0.9rem;
  transition:width .32s cubic-bezier(.2,.9,.2,1), box-shadow .25s ease;
  position:relative;
  box-shadow: 2px 0 18px rgba(6,10,20,0.15);
  z-index:40; /* ensure sidebar/tooltips sit above regular content but below modals (z-index 50+) */
}
.sidebar.collapsed{width:76px}
.brand{display:flex;align-items:center;gap:.6rem;padding:.5rem 0 1rem 0;margin:0 0 1rem}
.brand .logo{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-left:.6rem}
.brand > div{padding-right:.8rem}

.hamburger{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.06);cursor:pointer;transition:transform .18s,background .15s,box-shadow .15s;margin-right:.6rem}
.hamburger:focus{outline:none;box-shadow:0 8px 26px rgba(37,99,235,0.12)}
.hamburger:hover{background:rgba(255,255,255,0.06);transform:translateX(4px)}
.hamburger .burger{display:inline-block}
.hamburger .bar{display:block;width:18px;height:2px;background:#fff;margin:4px 0;border-radius:2px;transition:transform .22s ease,opacity .18s}
.hamburger[aria-expanded="true"] .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.sidebar .menu{display:flex;flex-direction:column;gap:.45rem;padding:0 0.6rem}

/* Sidebar header alignment */
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 0.6rem 0.8rem}
.sidebar-header .brand{margin:0;padding:0;gap:.6rem}
.sidebar-header .brand > div{line-height:1}
.sidebar-header .brand .small-muted{margin-top:0}
.sidebar-header .hamburger{margin-right:0}
.menu-item{display:flex;align-items:center;gap:.75rem;padding:.55rem;border-radius:10px;color:rgba(255,255,255,0.95);cursor:pointer;transition:background .18s,transform .15s,box-shadow .15s;height:56px}
.menu-item:hover{background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));transform:translateX(6px);box-shadow:0 6px 14px rgba(3,7,18,0.08)}
.menu-item .icon{width:44px;height:44px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));display:inline-flex;align-items:center;justify-content:center;color:var(--primary-2)}
.menu-item .icon svg{width:18px;height:18px}
.menu-item .label{white-space:normal;overflow:hidden;text-overflow:ellipsis;max-width:140px;display:inline-block}

.sidebar.collapsed .menu-item{justify-content:center;padding:.5rem;border-radius:12px}
.sidebar.collapsed .menu-item .label{display:none !important;opacity:0;width:0;height:0;overflow:hidden}
.sidebar.collapsed .brand > div{display:none}
.sidebar.collapsed .brand .logo{margin:0 auto}
.sidebar.collapsed .menu{pointer-events:auto}
.sidebar.collapsed .logout{pointer-events:none;opacity:.0}
.sidebar.collapsed .hamburger{/* keep hamburger active */pointer-events:auto}

/* tooltip shown when collapsed */
.sidebar.collapsed .menu-item[data-tooltip]{position:relative}
.sidebar.collapsed .menu-item[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:rgba(14,23,44,0.98);color:#fff;padding:.45rem .6rem;border-radius:8px;white-space:nowrap;box-shadow:0 8px 24px rgba(2,6,23,0.4);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;transform:translateY(-50%) translateX(-6px);z-index:45}
.sidebar.collapsed .menu-item[data-tooltip]:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}

.sidebar .logout{position:absolute;bottom:1rem;left:1rem;right:1rem;padding:0 0.8rem}
.sidebar .logout .btn{width:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:0 6px 18px rgba(37,99,235,0.12)}
.logout-btn{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-radius:12px;color:#fff;border:none;width:100%;font-weight:700}
.logout-btn .logout-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:rgba(255,255,255,0.08);border-radius:8px}
.logout-btn .logout-icon svg{width:16px;height:16px;stroke:currentColor}
.logout-btn .logout-label{flex:1;text-align:left}
/* when sidebar is collapsed, keep logout visually accessible */
.sidebar.collapsed .logout{left:8px;right:8px}
.sidebar.collapsed .logout-btn{padding:.5rem;border-radius:10px}
.sidebar.collapsed .logout .logout-label{display:none}

/* When collapsed: hide labels, center icons and disable menu interactions */
.sidebar.collapsed .menu-item{justify-content:center;padding:.5rem;border-radius:10px}
.sidebar.collapsed .menu-item .label{display:none !important;opacity:0;width:0;height:0;overflow:hidden}
.sidebar.collapsed .brand > div{display:none}
.sidebar.collapsed .brand .logo{margin:0 auto}
.sidebar.collapsed .menu{pointer-events:auto}
.sidebar.collapsed .logout{pointer-events:none;opacity:.0}
.sidebar.collapsed .hamburger{/* keep hamburger active */pointer-events:auto}

/* for good measure: prevent hover translation when collapsed */
.sidebar.collapsed .menu-item:hover{transform:none;background:transparent}

/* Loader */
.loader-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(244,244,244,0.8), rgba(244,244,244,0.95));z-index:80}
.loader{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#00b4ff);box-shadow:0 6px 20px rgba(16,24,40,0.08);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}

.icon svg{width:18px;height:18px}

/* loader spinner */
.loader .spinner{width:34px;height:34px;border-radius:50%;border:4px solid rgba(255,255,255,0.45);border-top-color:rgba(255,255,255,1);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* field errors */
.field-error{color:var(--danger);font-size:.82rem;margin-top:.3rem;display:block}

/* content transition */
.content-fade{animation:fadeIn .28s ease}
@keyframes fadeIn{from{opacity:.0;transform:translateY(6px)}to{opacity:1;transform:none}}

.main{
  flex:1;padding:1.2rem 1.6rem;background:var(--bg);min-height:100vh;overflow:auto;
}

/* Prevent flex children from overflowing their container on narrow columns (important for tables/cards) */
.main{min-width:0}
.header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.header h2{margin:0}
.header .icon-add{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:1px solid rgba(37,99,235,0.12);background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));color:var(--primary);cursor:pointer;margin-left:0.6rem}
.header .icon-add:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(37,99,235,0.08)}
.header .icon-add::before{content:'';display:inline-block;width:18px;height:18px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>');background-size:18px 18px}

/* show the add button only when header indicates courses section */
.header[data-section="courses"] .icon-add{display:inline-flex}
.content-card{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 8px 20px rgba(16,24,40,0.06)}

/* Table styles */
.table{width:100%;border-collapse:collapse}
.table thead th{text-align:left;padding:.9rem;border-bottom:1px solid #eef2f3;color:#444}
.table tbody td{padding:.75rem;border-bottom:1px solid #f1f3f5}
.table tbody tr:nth-child(odd){background:#fcfdff}
.table tbody tr:nth-child(even){background:#f8fafc}
.table-card{overflow:auto;border-radius:10px}
.table-responsive{width:100%;}
.search-row{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem}
.input-inline{flex:1;display:flex;gap:.5rem;position:relative}

/* Login background using project image assets/images/natureza.png */
.login-wrap{
  position:relative;
  background-image: url('../assets/images/natureza.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* particles canvas for login background */
.particles-js-canvas-el{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  display:block;
  z-index:1; /* below the login card which has z-index:2 */
}

/* small branding in the top-left of the login page */
.login-top-left{
  position:fixed;
  top:16px;
  left:16px;
  width:280px; /* doubled size */
  height:auto;
  z-index:70; /* above content but below full-screen modals */
  display:block;
}

/* theme toggle removed */



@media(max-width:480px){
  .login-top-left{width:200px;left:12px;top:12px}
  .theme-toggle{top:10px;right:52px;width:auto}
}
/* Mobile specific: reduce sidebar width and make login card full-width */
@media(max-width:700px){
  .sidebar{width:260px}
  .sidebar.collapsed{width:72px}
  .login-card{width:calc(100% - 2rem);max-width:520px;padding:1.1rem}
  .header h2{font-size:1rem}
  .brand .logo{width:36px;height:36px}
}
.login-wrap::before{
  /* keep no overlay by default (transparent) */
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

/* Dark-mode overrides for elements that used hard-coded light colors */
.dark-mode .login-wrap::before{
  background: rgba(2,6,23,0.65);
}

.dark-mode .table thead th{
  color: #e6eef8;
  border-bottom-color: rgba(255,255,255,0.06);
}
.dark-mode .table tbody td{
  color: #e6eef8;
  border-bottom-color: rgba(255,255,255,0.03);
}
.dark-mode .table tbody tr:nth-child(odd){background: rgba(255,255,255,0.02)}
.dark-mode .table tbody tr:nth-child(even){background: rgba(255,255,255,0.01)}

.dark-mode .content-card{background:var(--card);color:var(--color, #fff)}
.login-card{ position:relative; z-index:2; }

.login-card .card-logo{width:220px;height:auto;border-radius:8px;object-fit:contain;display:block;margin:0 auto .6rem}

/* Login logo pop animation (show only the image) */
.card-logo{opacity:1;transform:none;transition:none}
/* restore title and subtitle visibility */
.login-card .center h1, .login-card .center p{display:block}

@media (max-width:700px){
  .login-wrap{ background-attachment: scroll; background-position: top center; }
}

/* search input with inline icon */
.input-inline .search-input{flex:1;padding:.65rem .9rem .65rem 40px;border-radius:8px;border:1px solid rgba(16,24,40,0.06);background:var(--card);color:inherit;transition:box-shadow .15s ease,border-color .15s ease}
.input-inline .search-input::placeholder{color:var(--muted);opacity:0.9}
.input-inline .search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 4px 14px rgba(37,99,235,0.08)}

/* Dark-mode specific for search input */
.dark-mode .input-inline .search-input{background:#07121a;border-color:rgba(255,255,255,0.04);color:#e6eef8}
.dark-mode .input-inline .search-input::placeholder{color:rgba(230,238,248,0.5)}
.input-inline .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);pointer-events:none}
.input-inline .search-icon svg{width:18px;height:18px;stroke:currentColor;fill:none}

/* Password reveal toggle for login */
.input-with-icon{position:relative;display:block}
.input-with-icon input{width:100%}
.input-with-icon input.pwd-input{padding-right:44px}
.pwd-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:8px;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:transform .18s ease, color .18s}
.pwd-toggle:active{transform:translateY(-50%) scale(.98)}
.pwd-toggle svg{width:18px;height:18px;display:block}

/* Eye animation: two parts (eye and slash) alternate with opacity/scale */
.pwd-toggle .eye-open{opacity:0;transform:scale(.85);transition:opacity .18s ease, transform .18s ease}
.pwd-toggle .eye-slash{opacity:1;transform:scale(1);transition:opacity .18s ease, transform .18s ease}
.input-with-icon.pwd-visible .pwd-toggle .eye-open{opacity:1;transform:scale(1)}
.input-with-icon.pwd-visible .pwd-toggle .eye-slash{opacity:0;transform:scale(.85)}

/* Ensure table headers align with body columns reliably */
.table{width:100%;table-layout:fixed}
.table th, .table td{padding:.75rem;vertical-align:middle}
/* actions column: keep small and right-aligned */
.leads-table td:last-child, .leads-table th:last-child{width:84px;text-align:right;padding-right:12px}
.leads-table td:last-child .row-actions{justify-content:flex-end}

/* Allow email column to wrap/break to avoid overlapping other columns */
.leads-table td:nth-child(7), .leads-table th:nth-child(7){
  white-space:normal; /* allow wrapping */
  word-break:break-word;
  max-width:220px; /* limit width to encourage wrap on long emails */
}
@media(max-width:900px){
  .leads-table td:nth-child(7){max-width:140px}
}

/* Table card style for mobile */
.table-card .course-card{padding:.65rem;border-radius:10px;background:#fff;border:1px solid #eef2f6}
.table-card .course-card h4{margin:0 0 .25rem;font-size:1rem}

/* Leads table improvements */
.leads-table .row-actions{opacity:0;transform:translateX(6px);transition:opacity .18s,transform .18s}
.leads-table tr:hover .row-actions{opacity:1;transform:translateX(0)}
@media(min-width:700px){
  .leads-table .row-actions{opacity:1;transform:none}
}
.leads-table tr{transition:background .22s ease,transform .18s ease,box-shadow .18s ease}
/* apply hover only to body rows (not thead) and add a subtle lift + shadow */
.leads-table tbody tr{background:transparent}
.leads-table tbody tr:hover{background:linear-gradient(90deg, #ffffff, #f7fbff);transform:translateY(-3px);box-shadow:0 10px 24px rgba(8,20,40,0.04)}
.leads-table tbody tr:focus-within{background:linear-gradient(90deg, #ffffff, #f6fbff);transform:translateY(-2px);box-shadow:0 8px 18px rgba(8,20,40,0.035)}
/* keep the header row static: prevent hover styles from applying to the thead */
.leads-table thead tr:hover{background:transparent}
.leads-table thead th{cursor:default}
.leads-table thead th:hover{color:inherit}
.action-btn{background:transparent;border:none;padding:.25rem .4rem;border-radius:8px;cursor:pointer;color:var(--muted);transition:background .15s,color .15s}
.action-btn:hover{background:rgba(23,104,172,0.08);color:var(--primary)}
.action-delete:hover{background:rgba(220,53,69,0.06);color:var(--danger)}

/* small icon */
.icon-sm{width:16px;height:16px;display:inline-block;vertical-align:middle}

/* Colored icon buttons used in logs controls */
.btn-icon{display:inline-flex;align-items:center;justify-content:center}
.btn-icon svg{width:18px;height:18px;stroke:currentColor;fill:none}
.btn-label{display:inline-block;margin-left:.4rem}
.btn-pause{background:linear-gradient(90deg,#10b981,#059669);color:#fff;border-radius:10px;padding:.45rem .6rem;box-shadow:0 6px 18px rgba(5,150,105,0.12);transition:transform .12s,box-shadow .12s}
.btn-pause:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(5,150,105,0.14)}
.btn-pause[aria-pressed="true"]{background:linear-gradient(90deg,#ef4444,#dc2626);box-shadow:0 6px 18px rgba(220,53,69,0.12)}
.log-controls .btn{margin-left:.5rem}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem}
@media(max-width:900px){.form-grid{grid-template-columns:1fr}}
.form-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:0.6rem}

/* center actions when editing in panels */
.form-actions.centered{justify-content:center}

/* Compact lead form styles */
.lead-form .form-grid{grid-template-columns:1fr 1fr;gap:0.6rem}
.lead-form .form-group{display:flex;flex-direction:column;margin-bottom:0}
.lead-form .form-group.full-width{grid-column:1 / -1}
.lead-form label{font-weight:600;margin-bottom:.25rem;color:#0f1724;font-size:.9rem}
.lead-form input,.lead-form select{padding:.55rem .7rem;border-radius:8px;border:1px solid #e9eef6}
.lead-form .select-with-icon{position:relative}
.lead-form .select-with-icon select{padding-left:44px}
.lead-form .select-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.lead-form .course-hint{margin-top:.35rem;color:var(--muted);font-size:.82rem}
.lead-form .form-actions{margin-top:.6rem}
.lead-form .btn{padding:.55rem .9rem;border-radius:10px}
.lead-form .content-card{padding:0}
.lead-form form{padding:1rem}

/* Course filter card (nuvem) */
.course-filter-card{
  min-width:220px;
  max-width:360px;
  background:var(--card);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(8,20,40,0.12);
  padding:.6rem;
  z-index:120;
  border:1px solid rgba(2,6,23,0.04);
}
.course-filter-card .card-header{font-weight:700;padding:.4rem .6rem;border-bottom:1px solid rgba(0,0,0,0.04);border-radius:12px 12px 0 0}
.course-filter-card .card-body{max-height:220px;overflow:auto;padding:.5rem}
.course-filter-card .filter-item{padding:.25rem .35rem;display:flex;align-items:center;gap:.5rem}
.course-filter-card .card-footer{display:flex;gap:.5rem;justify-content:flex-end;padding:.4rem .2rem}
.course-filter-card label{font-size:.92rem;color:inherit}
.course-filter-card input[type=checkbox]{width:16px;height:16px}

/* small adjustment: ensure absolute positioned filter card doesn't clip on small screens */
@media(max-width:700px){
  .course-filter-card{position:fixed !important;left:8px !important;right:8px !important;top:auto !important;bottom:20px !important;max-width:unset}
}

/* Ensure lead form fills width and actions center correctly */
.lead-form form{display:flex;flex-direction:column;gap:0.6rem}
.lead-form .form-actions.centered{justify-content:center;width:100%}

/* Fallback centering: ensure buttons center even if flex layout is overridden */
.lead-form .form-actions.centered{display:block;text-align:center}
.lead-form .form-actions.centered .btn{display:inline-flex;margin:0 .5rem}

/* Course cards */
.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}

/* Charts layout */
.charts-grid{padding:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:16px; align-items:stretch}
.chart-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.chart-panel{ background:var(--card); border-radius:8px; padding:12px; box-shadow:0 1px 2px rgba(0,0,0,0.04); min-height:220px; display:flex; flex-direction:column }
.chart-panel h3{ margin:0 0 .6rem 0; font-size:1rem; color:var(--muted) }
.chart-panel canvas{ width:100% !important; /* let canvas height be flexible but keep reasonable default */ height:auto !important; min-height:220px; max-height:420px }
.chart-controls{ display:flex; gap:.5rem; align-items:center; margin-bottom:.5rem }
.chart-controls .btn{ padding:.35rem .6rem; font-size:.85rem; border-radius:6px }

/* Chart header: title left, controls right */
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.chart-header h3{margin:0;font-size:1rem;color:var(--muted)}
.chart-actions{display:flex;align-items:center;gap:.5rem}
.chart-controls{ margin-top:0.25rem }
.chart-header .chart-controls{margin:0}
.btn-download{ background: linear-gradient(90deg,var(--primary), var(--primary-2)); color:#fff; border: none; cursor:pointer; box-shadow:0 6px 18px rgba(37,99,235,0.08); transition:transform .12s,box-shadow .12s }
.btn-download:hover{ transform:translateY(-2px); filter:brightness(.98) }
.btn-secondary{ background:var(--surface-1); border:1px solid rgba(0,0,0,0.06); color:var(--muted); cursor:pointer }
.small{ font-size:.85rem }
.conv-value{ color:var(--primary-2) }
.chart-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.chart-panel{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 10px 30px rgba(16,24,40,0.06);min-height:260px;display:flex;flex-direction:column}
.chart-panel h3{margin:0 0 .6rem}
.chart-panel canvas{width:100% !important;height:auto !important;min-height:260px;max-height:460px}

@media(min-width:900px){ .chart-grid{grid-template-columns:1fr 1fr} }
.course-card{background:var(--card);padding:1.05rem;border-radius:12px;position:relative;overflow:visible;box-shadow:0 10px 30px rgba(16,24,40,0.06);transition:transform .18s,box-shadow .18s}
.courses-panel-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:.8rem;border-bottom:1px solid rgba(16,24,40,0.04);margin-bottom:1rem}
.courses-panel-title h3{margin:0;font-size:1.05rem;color:var(--primary);display:flex;align-items:center;gap:.5rem}

/* make the grid area look like a separate panel with rounded corners */
.content-card > .course-grid{background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,252,0.98));padding:1rem;border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);}

/* refine individual course card visuals */
.course-card{border:1px solid rgba(16,24,40,0.04);border-radius:14px;padding:1rem;background:linear-gradient(180deg,#ffffff,#fbfdff)}
.course-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(16,24,40,0.08)}
.course-card .course-card-header h4{font-size:1.06rem;margin:0;color:#0b365e}
.course-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.8rem}
.course-footer .small-muted{color:var(--muted);font-size:.85rem}

/* subtle badge for count */
.course-count-badge{background:rgba(37,99,235,0.1);color:var(--primary);padding:.25rem .6rem;border-radius:999px;font-weight:600;font-size:.85rem}
.course-card:hover{transform:translateY(-6px);box-shadow:0 18px 46px rgba(16,24,40,0.09)}
.course-card .actions{position:absolute;top:12px;right:12px;display:flex;gap:.4rem;opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s;visibility:hidden}
.course-card:hover .actions{opacity:1;transform:translateY(0);visibility:visible}
/* keyboard accessibility: reveal actions when card receives focus (tab into controls inside) */
.course-card:focus-within .actions{opacity:1;transform:translateY(0);visibility:visible}
.course-card .actions, .course-card .show-desc{z-index:12}

/* Make action buttons visible on pointer devices (notebooks/desktops) without requiring hover */
@media (hover: hover) and (pointer: fine) and (min-width:701px){
  .course-card .actions{opacity:1;transform:none;visibility:visible}
  .course-card .show-desc{opacity:1;transform:none;visibility:visible}
}
.row-actions{display:flex;gap:.4rem}
.row-actions{z-index:10}
.row-actions .action-btn{background:transparent;border:none;padding:.2rem .4rem;border-radius:8px;cursor:pointer;color:var(--muted)}
.row-actions .action-btn:hover{background:rgba(37,99,235,0.06);color:var(--primary)}
.row-actions .action-delete:hover{background:rgba(220,53,69,0.06);color:var(--danger)}
.course-desc{margin:0.6rem 0;color:#334155;font-size:0.95rem;line-height:1.35}
.course-req{margin-top:0.4rem;color:var(--muted);font-size:0.9rem;white-space:normal;word-break:break-word}

/* Show description button overlay */
.course-card{position:relative}
.course-card .show-desc{display:inline-block;margin-top:0.6rem;padding:.45rem .6rem;border-radius:8px;background:rgba(37,99,235,0.04);border:1px solid rgba(37,99,235,0.08);color:var(--primary);font-weight:600;cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;visibility:hidden}
.course-card:hover .show-desc{opacity:1;transform:translateY(0);visibility:visible}
.course-card:focus-within .show-desc{opacity:1;transform:translateY(0);visibility:visible}

/* On small screens show buttons by default for better tap access */
@media(max-width:700px){
  .course-card .actions, .course-card .show-desc{opacity:1;transform:none;visibility:visible}
}

/* modal content tweaks */
.modal .course-desc{margin-top:.6rem}

/* Allow full description to show and wrap - remove clamping so content is visible */
.course-card .course-desc{
  display:block;
  white-space:normal;
  word-break:break-word;
  color: #344155;
  font-size: 0.95rem;
  line-height: 1.5;
  max-height:none;
  overflow:visible;
}

/* reveal actions when card element itself is focused via keyboard */
.course-card:focus-visible{outline:2px solid rgba(37,99,235,0.15);outline-offset:4px}
.course-card:focus-visible .actions{opacity:1;transform:translateY(0);visibility:visible}

.course-card-header h4{margin:0 0 .45rem;font-size:1.05rem;color:#0f1724}
.course-meta{display:flex;flex-direction:column;gap:.25rem;color:var(--muted);font-size:.9rem;margin-bottom:.6rem}
.course-meta-top{display:flex;gap:1rem;align-items:center}
.course-meta-bottom{display:flex;gap:1rem;align-items:center}
.course-meta .interessados{font-weight:600;color:var(--primary)}

/* Logs panel styles */
.log-controls{ display:flex; gap:.5rem; align-items:center; margin-bottom:.6rem; }
.log-controls input[type="search"]{ flex:1; padding:.45rem .6rem; border:1px solid #ddd; border-radius:6px; }
.log-controls select{ padding:.35rem .5rem; border-radius:6px; border:1px solid #ddd; }
.logs-panel{ max-height:75vh; overflow:auto; border:1px solid #eee; background:var(--card); padding:.6rem; border-radius:8px; box-shadow:0 6px 18px rgba(16,24,40,0.05); }
.log-item{ display:flex; gap:.5rem; padding:.45rem; border-bottom:1px dashed #f1f4f8; align-items:flex-start; }
.log-item:last-child{ border-bottom:none; }
.log-left{ width:10rem; flex-shrink:0; display:flex; flex-direction:column; gap:.25rem; align-items:flex-start; }
.log-badge{ display:inline-block; padding:.18rem .45rem; border-radius:999px; font-weight:600; font-size:.75rem; color:#fff; }
.log-badge.course{ background:#3b82f6; }
.log-badge.lead{ background:#10b981; }
.log-badge.user{ background:#f59e0b; }

/* Ensure internal scrolling for charts on smaller viewports to avoid clipping */
@media (max-width:900px), (max-height:720px) {
  .chart-panel{
    /* make panels shorter on small screens so a scrollbar appears when the chart is tall */
    max-height:320px !important;
    overflow-y:auto !important;
  }
  .chart-panel canvas{
    /* force canvas to be taller than the panel to trigger scrolling when needed */
    min-height:420px !important;
    height:auto !important;
  }
}
.log-badge.other{ background:#6b7280; }
.log-ts{ font-size:.78rem; color:var(--muted); }
.log-body{ flex:1; white-space:pre-wrap; word-break:break-word; color:var(--muted); }
.log-controls .btn{ padding:.35rem .6rem; border-radius:6px; border:1px solid #cbd5e1; background:#f8fafc; cursor:pointer; }
.log-controls .btn:hover{ background:#f1f5f9; }

/* Cloud-style modal for create user */
.cloud-modal{ max-width:520px; margin:0 auto; border-radius:18px; padding:1.25rem; background:linear-gradient(180deg,#ffffff,#fbfdff); box-shadow:0 18px 46px rgba(12,20,40,0.08); border:1px solid rgba(14,20,40,0.04) }
.cloud-modal h3{margin-top:0;margin-bottom:.6rem}
.cloud-modal label{display:block;margin-top:.45rem;margin-bottom:.25rem}
.radio-inline{display:flex;gap:1rem;align-items:center;margin-bottom:.6rem}
.radio-inline input[type=radio]{margin-right:.4rem}

/* Login footer centered */
.login-footer{margin-top:1rem;text-align:center;color:var(--muted);font-size:0.9rem;position:fixed;left:0;right:0;bottom:12px;z-index:999;background:transparent;pointer-events:none}
.login-footer p{pointer-events:auto}

/* Chat styles */
.chat-card .chat-panel{display:flex;flex-direction:column;gap:.6rem}
.chat-list{max-height:56vh;overflow:auto;padding:.6rem;border:1px solid #eef4fb;border-radius:8px;background:var(--card)}

/* Allow chat card to grow and increase chat list height on larger viewports */
#contentArea > .content-card.chat-card{ display:flex; flex-direction:column; max-height: calc(100vh - 120px); }
#contentArea > .content-card.chat-card .chat-panel{ flex:1 1 auto; overflow:hidden }
#contentArea > .content-card.chat-card .chat-list{ max-height: calc(100vh - 220px); }

@media(min-width:1200px){
  #contentArea > .content-card.chat-card{ max-height: calc(100vh - 90px); }
  #contentArea > .content-card.chat-card .chat-list{ max-height: calc(100vh - 210px); }
}

@media(min-width:1600px){
  #contentArea > .content-card.chat-card{ max-height: calc(100vh - 70px); }
  #contentArea > .content-card.chat-card .chat-list{ max-height: calc(100vh - 190px); }
}
.chat-item{padding:.5rem;border-radius:8px;margin-bottom:.5rem;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 6px 18px rgba(6,12,30,0.03)}
.chat-meta{font-size:.82rem;color:var(--muted);margin-bottom:.28rem}
.chat-text{font-size:.95rem;color:#0f1724}
.chat-controls{display:flex;gap:.5rem;align-items:center;margin-top:.4rem}
.chat-controls input[type=text]{flex:1;padding:.55rem .75rem;border-radius:8px;border:1px solid #e6eef6}
.chat-controls .btn{padding:.5rem .8rem;border-radius:8px}

/* Audio bubble styles for chat messages */
.chat-audio{display:flex;align-items:center;gap:.6rem;background:linear-gradient(180deg,#ffffff,#f4f8ff);padding:.45rem;border-radius:10px;border:1px solid rgba(14,28,60,0.06);box-shadow:0 6px 18px rgba(6,12,30,0.03);}
.chat-audio .audio-icon{width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#eef6ff,#f3fbff);color:var(--primary);flex:0 0 36px}
.chat-audio .audio-icon svg{width:18px;height:18px;stroke:currentColor;fill:none}
.chat-audio audio{flex:1;max-width:100%;background:transparent;border-radius:6px}
.chat-audio .audio-meta{font-size:.82rem;color:var(--muted);margin-left:.4rem}

/* Slightly different dark mode for audio bubble */
.dark-mode .chat-audio{background:linear-gradient(180deg,#07121a,#071823);border-color:rgba(255,255,255,0.03)}
.dark-mode .chat-audio .audio-icon{background:rgba(255,255,255,0.03);color:var(--primary)}
.course-meta span{display:inline-block}
.course-card .actions{position:absolute;top:12px;right:12px}

/* Welcome overlay shown after login */
.welcome-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:transparent;z-index:110;opacity:0;pointer-events:none}
.welcome-overlay.hidden{display:none}
.welcome-overlay:not(.hidden){pointer-events:auto}
.welcome-card{background:transparent;padding:0;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:1.2rem;box-shadow:none;transform:translateZ(0);opacity:0;animation:welcomeIn 1.5s cubic-bezier(.2,.9,.25,1) forwards;max-width:92%;}
.welcome-overlay::before{ content: ''; position: absolute; inset:0; background: rgba(255,255,255,0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* When body has .global-blur, blur everything except the overlay itself (overlay must be direct child of body) */
body.global-blur > *:not(#welcomeOverlay){
  filter: blur(10px);
  transition: filter .28s ease;
  /* keep elements interactive even when blurred so buttons remain clickable */
  pointer-events: auto;
}
/* ensure overlay doesn't accidentally block clicks when present but hidden */
body.global-blur > #welcomeOverlay{ pointer-events: none; }
.welcome-logo{width:340px;height:auto;border-radius:0;transition:transform .6s ease, width .45s ease}
.welcome-title{margin:0;font-size:1.4rem;color:var(--primary);font-weight:700;letter-spacing:0.2px;transition:opacity .35s ease, transform .35s ease}

/* static visible state for title: fade in */
.welcome-title{opacity:0;transform:translateY(6px)}
.welcome-title.visible{opacity:1;transform:translateY(0)}

/* final state: keep logo same size (no shrinking) */
.welcome-overlay.final .welcome-logo{width:340px;transform:none}
.welcome-overlay.final .welcome-title{font-size:1.1rem;transform:translateY(6px)}
.welcome-title.final-text{color:var(--secondary)}

/* Static welcome element pinned inside main after animations */
.welcome-static{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.6rem;padding:1rem 0;pointer-events:auto;min-height:60vh}
.welcome-static .welcome-card{opacity:1;transform:none;animation:none}
.welcome-static .welcome-logo{width:200px}
.welcome-static .welcome-title{font-size:1.05rem;color:var(--secondary)}
.welcome-static .welcome-title{opacity:1;transform:none}

/* Hide any cursor remnants */
.welcome-title .cursor, .welcome-static .cursor{display:none!important}

.welcome-logo.pop{animation:logoPop 1.5s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes logoPop{0%{transform:translateY(6px);opacity:0}60%{transform:translateY(-4px);opacity:1}100%{transform:translateY(0);opacity:1}}
.welcome-title{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace}
.welcome-title .cursor{display:inline-block;width:10px;height:1.2em;background:var(--primary);margin-left:6px;vertical-align:middle;opacity:1;animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}

@keyframes welcomeIn{
  0%{transform:translateY(14px);opacity:0}
  60%{transform:translateY(-6px);opacity:1}
  100%{transform:translateY(0);opacity:1}
}

@keyframes welcomeOut{
  0%{transform:translateY(0);opacity:1}
  100%{transform:translateY(-8px);opacity:0}
}

/* overlay fade for the whole backdrop */
@keyframes overlayFadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes overlayFadeOut{0%{opacity:1}100%{opacity:0}}


/* responsive tweaks */
@media(max-width:520px){ .welcome-card{padding:0;border-radius:0} .welcome-logo{width:160px} .welcome-title{font-size:1.0rem} }

/* Courses panel header */
.courses-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.9rem}
.courses-panel-title{display:flex;flex-direction:row;align-items:center;gap:.8rem}
.course-count-badge{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff;padding:.3rem .6rem;border-radius:999px;font-weight:700;font-size:.85rem}
.courses-panel-actions{display:flex;gap:.5rem}

/* Limitar altura do painel de cursos para evitar esticar a página quando muitos cursos são adicionados
   - Aplicamos max-height ao container .content-card quando dentro da área principal (#contentArea)
   - Tornamos a grade de cartões .course-grid rolável verticalmente mantendo gap e responsividade
*/
/* Default content-card inside #contentArea: limit height for panels that need internal scrolling
   For the charts page we *do not* apply the max-height / overflow hidden so the document can scroll
   to reveal lower charts. The exception below targets .charts-grid to allow full-page scroll. */
#contentArea > .content-card {
  max-height: calc(100vh - 180px);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* default: delegate scrolling to internal areas (courses, forms) */
}

/* If the content-card holds the charts grid, allow the document to scroll instead of constraining the panel */
/* For charts page: make the charts area scrollable inside the content card so the page itself doesn't move */
#contentArea > .content-card.charts-grid{
  /* keep the card full width but allow internal scrolling */
  max-height: calc(100vh - 120px);
  display:flex;
  flex-direction:column;
  overflow: hidden; /* prevent page scroll */
}
#contentArea > .content-card.charts-grid .chart-grid{
  /* internal scroll area for all chart panels */
  flex: 1 1 auto; /* allow the grid to grow/shrink inside the content-card (flex parent) */
  min-height: 0;  /* critical so overflow works inside flex containers */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 200px);
  padding-right: 8px; /* give space for scrollbar */
}

#contentArea > .content-card .search-row,
#contentArea > .content-card .courses-panel-header {
  flex: 0 0 auto; /* não encolher/esticar - ocupam seu espaço natural */
}

#contentArea > .content-card .course-grid {
  /* permitir rolagem interna quando exceder a altura disponível */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.6rem 0; /* manter espaçamento interno para os cartões */
  gap: 1rem;
  /* Flexível para preencher o espaço disponível dentro do content-card */
  flex: 1 1 auto;
}

/* Lead form: make the form area scrollable and keep actions visible (sticky) so Save is always reachable */
#contentArea > .content-card.lead-form{
  /* Increase visible panel size for lead form on desktop/notebook while keeping it responsive */
  max-height: calc(100vh - 80px); /* slightly taller panel */
  width: min(1100px, 98%); /* allow wider panel on large screens */
  margin: 10px auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#contentArea > .content-card.lead-form form{
  /* allow internal scroll when content is tall */
  overflow:auto;
  flex:1 1 auto;
  padding:1.1rem;
}

@media(min-width:1200px){
  #contentArea > .content-card.lead-form{ width:1100px }
  #contentArea > .content-card.lead-form form{ padding:1.4rem }
}

/* Extra large screens: provide even more space for lead form */
@media(min-width:1600px){
  #contentArea > .content-card.lead-form{
    width: min(1400px, 96%);
    max-height: calc(100vh - 60px);
  }
  #contentArea > .content-card.lead-form form{
    padding:1.6rem;
  }
}
#contentArea > .content-card.lead-form .form-actions{
  position:sticky;
  bottom:0;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--card));
  padding-top:.6rem;
  padding-bottom:.6rem;
  z-index:12;
  justify-content:center;
}

/* Pequena proteção visual: manter borda/árco do scroll area em temas claros/escuros */
#contentArea > .content-card .course-grid::-webkit-scrollbar{width:10px}
#contentArea > .content-card .course-grid::-webkit-scrollbar-thumb{background:rgba(16,24,40,0.06);border-radius:8px}
.dark-mode #contentArea > .content-card .course-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06)}

/* Leads panel harmonization - reuse courses header for leads */
.leads-table + .courses-panel-header, .lead-form .courses-panel-header, .content-card .courses-panel-header{margin-bottom:0.8rem}
.lead-form .courses-panel-title h3, .courses-panel-title h3{margin:0;font-size:1.05rem;color:#0f1724}
.lead-form .courses-panel-actions .btn, .courses-panel-actions .btn{padding:.45rem .7rem;border-radius:10px}
.lead-form .content-card{padding:0}
.lead-form form{padding:1rem}
.lead-form .form-grid{gap:0.6rem}

/* Make lead rows/actions consistent with course card action reveal */
.leads-table .row-actions{opacity:0;transform:translateX(6px);transition:opacity .18s,transform .18s}
.leads-table tr:hover .row-actions, .leads-table tr:focus-within .row-actions{opacity:1;transform:translateX(0)}

/* Responsive tweaks: ensure back button is visible on small screens */
@media(max-width:700px){
  .lead-form .courses-panel-actions{display:flex}
}

/* Course card accent and footer */
.course-card::before{content:'';position:absolute;left:0;top:0;width:6px;height:100%;background:linear-gradient(180deg,var(--primary),var(--primary-2));border-top-left-radius:12px;border-bottom-left-radius:12px}
.course-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.85rem;border-top:1px dashed rgba(16,24,40,0.04);padding-top:.6rem}
.course-footer .small-muted{font-size:.85rem}

/* Modal should allow scrolling for long content */
.modal{
  max-height:80vh;
  overflow:auto;
}

/* Ensure modal actions stay visible; add spacing at bottom */
.modal .modal-actions{position:sticky;bottom:0;background:transparent;padding-top:.6rem}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.5);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{background:var(--card);padding:1rem;border-radius:10px;min-width:320px;max-width:880px;animation:modalIn .18s ease forwards;transform-origin:center top}
.modal.closing{animation:modalOut .16s ease forwards}
@keyframes modalIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes modalOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px) scale(.98)}}
.modal .modal-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.8rem}

/* Course detail modal styling */
.course-detail{max-width:760px;padding:1.2rem 1.4rem}
.course-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.6rem}
.course-detail-header h3{margin:0;font-size:1.25rem;color:#0b1724}
.course-detail-meta{display:flex;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:0.95rem;margin-bottom:.6rem}
.course-detail-meta .meta-item{background:linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01));padding:.35rem .55rem;border-radius:8px}
.course-detail-req-wrap h4{margin:0 0 .35rem;font-size:1rem}
.course-detail-req{margin:.25rem 0 0 1.25rem;padding-left:.2rem}
.course-detail-req li{margin-bottom:.35rem;line-height:1.45;color:#263238}
.course-detail-desc p{margin:0 0 .75rem;color:#334155;line-height:1.6}
.course-detail .small-muted{color:var(--muted)}

/* make modal content more airy */
.course-detail hr{border:none;border-top:1px solid #eef3f8;margin:0.6rem 0}

/* Confirm modal (centered cloud) */
.confirm-modal{max-width:420px;padding:1.2rem 1.3rem;text-align:center}
.confirm-modal .confirm-icon{width:72px;height:72px;margin:0 auto 0.6rem;border-radius:999px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(239,68,68,0.12),rgba(239,68,68,0.06));border:1px solid rgba(239,68,68,0.06)}
.confirm-modal .confirm-icon svg{width:36px;height:36px;stroke:var(--danger);fill:none}
.confirm-modal h3{margin:0 0 0.6rem;font-size:1.05rem}
.confirm-modal .modal-actions{justify-content:center}

/* Slide-over panel (cloud-style) for editing items */
.slide-panel-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.35);z-index:60;display:flex;align-items:center;justify-content:center}
.slide-panel{width:520px;max-width:96%;background:var(--card);box-shadow:0 24px 60px rgba(2,6,23,0.22);padding:1rem;border-radius:12px;animation:fadeIn .18s ease forwards;overflow:auto;max-height:90vh}
.slide-panel .panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.6rem}
.slide-panel .panel-header h3{margin:0}
.slide-panel .panel-actions{display:flex;gap:.5rem}
@media(max-width:520px){
  .slide-panel{width:100%;border-radius:12px;max-height:86vh}
}

/* Course form modal styles */
.form-modal{max-width:900px;padding:1.4rem 1.6rem}
.form-modal .form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.8rem;margin-bottom:0.6rem}
.form-modal .form-group{display:flex;flex-direction:column}
.form-modal .form-group.full-width{grid-column:1 / -1}
.form-modal label{font-weight:600;margin-bottom:.35rem;color:#0f1724}
.form-modal input[type="text"],.form-modal input[type="number"],.form-modal textarea,.form-modal select{padding:.7rem .9rem;border-radius:10px;border:1px solid #e6eef8;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);transition:box-shadow .12s,border-color .12s}
.form-modal textarea{resize:vertical}
.form-modal #course_desc{min-height:160px;padding:.75rem .9rem;border-radius:10px;border:1px solid #e6eef8;background:linear-gradient(180deg,#fff,#fbfdff);width:100%;resize:vertical}
.form-modal #course_requirements{min-height:120px}
.form-modal input:focus,.form-modal textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 6px 18px rgba(37,99,235,0.08)}
.form-modal .form-actions{margin-top:.8rem;display:flex;gap:.5rem;justify-content:flex-end}
/* allow centering when the centered class is present on form-actions inside modals */
.form-modal .form-actions.centered{justify-content:center}
.form-modal .btn-secondary{background:transparent;color:var(--secondary);border:1px solid #e6eef8;color:#263238}
.form-modal .btn-success{background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:0 8px 20px rgba(37,99,235,0.08)}
.form-modal .field-error{color:var(--danger);font-size:.85rem;margin-top:.35rem}

/* Requirements field in course form */
.form-modal #course_requirements{min-height:80px;padding:.6rem .8rem;border-radius:8px;border:1px solid #e6eef8;background:linear-gradient(180deg,#fff,#fbfdff);width:100%;resize:vertical}
.form-modal .small-muted{font-size:.86rem;color:var(--muted)}

/* Toast */
.toast{position:fixed;right:1rem;bottom:1rem;background:#fff;padding:.6rem .9rem;border-radius:8px;box-shadow:0 8px 20px rgba(16,24,40,0.08);display:flex;align-items:center;gap:.5rem}

/* Responsive */
@media(max-width:700px){
  .sidebar{position:fixed;z-index:60;left:0;top:0;bottom:0;height:100vh;transform:translateX(-100%);transition:transform .28s ease;will-change:transform;width:80vw;max-width:360px}
  .sidebar.open{transform:translateX(0);box-shadow: 6px 0 30px rgba(2,6,23,0.28)}
  /* overlay shown when sidebar is open on mobile */
  .sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.36);z-index:55;display:none;pointer-events:none;opacity:0;transition:opacity .18s}
  .sidebar-overlay.show{display:block;pointer-events:auto;opacity:1}
  /* when sidebar is open, prevent body scroll to avoid background moving */
  /* when sidebar is open we hide document scroll to avoid double scrollbars on small screens */
  html.sidebar-open, body.sidebar-open{overflow:hidden;touch-action:none}

  /* When charts panel is active we hide document scroll to keep scroll inside the charts panel */
  html.charts-open, body.charts-open{ overflow: hidden; }
  /* make layout stack in mobile so fixed sidebar doesn't conflict with flex layout
     .app becomes block so .main fills width and sidebar is purely off-canvas */
  .app{display:block}
  .main{padding-top:70px;margin-left:0;width:100%}
  /* limit the large fixed image on login to avoid overflow */
  .login-top-left{max-width:40vw;left:8px}
}

/* Utility */
.hidden{display:none}
.center{text-align:center}
.small-muted{font-size:.85rem;color:var(--muted)}

/* Cloud-style confirmation panel */
.cloud-confirm-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.35);z-index:90}
.cloud-panel{background:linear-gradient(180deg, #ffffff, #f8fbff);padding:1rem 1rem;border-radius:18px;box-shadow:0 10px 28px rgba(16,24,40,0.08);max-width:380px;width:88%;text-align:center;position:relative}
.cloud-panel h4{margin:0 0 .25rem;font-size:1.05rem;color:#0f1724}
.cloud-panel p{margin:0 0 .5rem;color:var(--muted);font-size:.96rem}
.cloud-actions{display:flex;gap:.6rem;justify-content:center;margin-top:.6rem}
.cloud-btn{padding:.5rem .9rem;border-radius:10px;border:none;cursor:pointer;font-weight:600}
.cloud-btn.cancel{background:transparent;color:var(--muted);box-shadow:none}
.cloud-btn.confirm{background:linear-gradient(135deg,var(--danger),#e03b3b);color:#fff}
.cloud-panel .icon-cloud{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,#fff,#f3f9ff);display:inline-flex;align-items:center;justify-content:center;margin-bottom:.5rem;box-shadow:0 6px 18px rgba(16,24,40,0.06)}

/* animations for cloud panel */
.cloud-panel{animation:cloudIn .18s ease forwards}
.cloud-panel.closing{animation:cloudOut .16s ease forwards}
@keyframes cloudIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes cloudOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px) scale(.98)}}

/* toast with undo */
.toast.undo{min-width:260px;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .8rem}
.toast .undo-btn{background:transparent;border:none;color:var(--primary);font-weight:700;cursor:pointer;padding:.3rem .5rem;border-radius:8px}