/* ==========================================================================
   dashboard.css — i.G.C. Portal (Dashboard + Portal-wide UI)
   Built for /dashboard/index.php markup (card/col-* grid system)
   ========================================================================== */

/* ---------------------------
   Theme Tokens
--------------------------- */
:root{
  --bg0:#07080d;
  --bg:#0b0b10;

  --panel:#0f1118;
  --panel2:#141a26;

  --cardA: rgba(255,255,255,.035);
  --cardB: rgba(255,255,255,.012);

  --ink:#e9eefc;
  --muted:#a7b0c8;

  --brand:#46d4ff;
  --brand2:#c55bff;
  --accent:#ff4fd8;

  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;

  --border:rgba(255,255,255,.10);
  --borderSoft:rgba(255,255,255,.08);

  --radius:22px;
  --radius2:16px;

  --shadow: 0 18px 55px rgba(0,0,0,.55);
  --shadowSoft: 0 10px 30px rgba(0,0,0,.45);

  --focus: 0 0 0 3px rgba(70,212,255,.25);
  
  --field-bg: rgba(20,26,38,.92);
  --field-bg2: rgba(15,17,24,.92);
  --field-border: rgba(255,255,255,.14);
  --field-border2: rgba(70,212,255,.35);
  --field-ink: rgba(233,238,252,.96);
  --field-muted: rgba(167,176,200,.95);
  --field-shadow: 0 0 0 4px rgba(70,212,255,.08);
}

/* ---------------------------
   Base
--------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(900px 600px at 15% 20%, rgba(70,212,255,.12), transparent 55%),
    radial-gradient(900px 600px at 85% 25%, rgba(197,91,255,.14), transparent 55%),
    radial-gradient(900px 600px at 70% 85%, rgba(255,79,216,.08), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg) 35%, #070812);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

h1,h2,h3{ margin:0; line-height:1.15; }
p{ margin:0; }

ul{ margin:0; padding:0; }
li{ list-style:none; }

/* ---------------------------
   Header (from your header.php classes)
--------------------------- */
.ikonic-header{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 12px 18px;

  background:
    radial-gradient(800px 180px at 20% -60px, rgba(70,212,255,.12), transparent 60%),
    radial-gradient(800px 180px at 80% -60px, rgba(197,91,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.ikonic-header-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.ikonic-logo{
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.ikonic-portal-title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--brand);
  text-shadow: 0 10px 24px rgba(0,0,0,.45);
}

.ikonic-header-right{
  display:flex;
  align-items:center;
  gap: 14px;
}

.ikonic-user-info{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.ikonic-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(70,212,255,.55);
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
}

.ikonic-username{
  font-weight: 800;
  color: rgba(233,238,252,.95);
}

.ikonic-logout,
.ikonic-login{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  font-weight: 900;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.ikonic-logout:hover,
.ikonic-login:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(70,212,255,.25);
}

/* ---------------------------
   Page Container + Grid System (THIS is what you were missing)
--------------------------- */
.container{
  width: min(1400px, calc(100% - 44px));
  margin: 22px auto 60px;
}

.grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

/* Column spans */
.col-4{ grid-column: span 4 / span 4; }
.col-6{ grid-column: span 6 / span 6; }
.col-12{ grid-column: span 12 / span 12; }

/* Responsive stacking */
@media (max-width: 1100px){
  .col-4{ grid-column: span 6 / span 6; }
}
@media (max-width: 820px){
  .container{ width: min(900px, calc(100% - 28px)); }
  .grid{ gap: 14px; }
  .col-4,.col-6,.col-12{ grid-column: span 12 / span 12; }
}

/* ---------------------------
   Cards
--------------------------- */
.card{
  border-radius: var(--radius);
  border: 1px solid var(--borderSoft);
  box-shadow: var(--shadow);
  padding: 18px;

  background:
    radial-gradient(900px 260px at 25% -60px, rgba(70,212,255,.10), transparent 60%),
    radial-gradient(900px 260px at 85% -60px, rgba(197,91,255,.10), transparent 60%),
    linear-gradient(180deg, var(--cardA), var(--cardB));
}

.card:hover{
  border-color: rgba(70,212,255,.22);
  box-shadow: 0 22px 70px rgba(0,0,0,.60);
}

/* Header row inside cards */
.cardHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.iconTitle{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.iconTitle > span{
  display:inline-flex;
  width: 34px;
  height: 34px;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.h2{
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(233,238,252,.98);
}

.sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(167,176,200,.92);
  line-height: 1.35;
}

/* ---------------------------
   Buttons
--------------------------- */
.actions{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap: wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .55rem .95rem;
  border-radius: 14px;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, filter .15s ease;
}

.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(70,212,255,.25);
}

.btn:focus{ outline:none; box-shadow: var(--focus); }

/* Variants used in your markup */
.btn.primary{
  background: linear-gradient(90deg, rgba(70,212,255,.18), rgba(197,91,255,.14));
  border-color: rgba(70,212,255,.28);
}
.btn.primary:hover{ filter: brightness(1.07); }

.btn.success{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.28);
}
.btn.success:hover{ background: rgba(34,197,94,.20); }

.btn.warn{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.28);
}
.btn.warn:hover{ background: rgba(245,158,11,.20); }

.btn.pink{
  background: linear-gradient(90deg, rgba(255,79,216,.18), rgba(197,91,255,.14));
  border-color: rgba(255,79,216,.28);
}
.btn.pink:hover{ filter: brightness(1.08); }

/* ---------------------------
   Lists (Projects/Tasks/Events/Notifications)
--------------------------- */
.list{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 10px;
}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

.row:hover{
  border-color: rgba(70,212,255,.20);
  background: rgba(70,212,255,.06);
}

.rowMain{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0; /* lets truncate work */
}

.smallLink{
  font-weight: 900;
  color: rgba(233,238,252,.96);
}
.smallLink:hover{ text-decoration: underline; }

.truncate{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* right-side date in rows */
.date{
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  opacity: .95;
}

/* status colors (your PHP sets ok/warn/bad/muted) */
.muted{ color: rgba(167,176,200,.75); }
.ok{ color: rgba(125,243,177,.95); }
.warn{ color: rgba(255,211,122,.95); }
.bad{ color: rgba(255,123,123,.95); }

/* ---------------------------
   Badges (project status)
--------------------------- */
.badge{
  display:inline-flex;
  align-items:center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  text-transform: lowercase;
}

.badge.active{
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.12);
  color: rgba(125,243,177,.95);
}
.badge.paused{
  border-color: rgba(245,158,11,.25);
  background: rgba(245,158,11,.12);
  color: rgba(255,211,122,.95);
}
.badge.completed{
  border-color: rgba(70,212,255,.25);
  background: rgba(70,212,255,.10);
  color: rgba(70,212,255,.95);
}
.badge.archived{
  border-color: rgba(167,176,200,.20);
  background: rgba(167,176,200,.08);
  color: rgba(167,176,200,.85);
}

/* ---------------------------
   Pulse dot (needs_attention)
--------------------------- */
.pulse{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(70,212,255,.95);
  box-shadow: 0 0 0 0 rgba(70,212,255,.45);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(70,212,255,.35); opacity:.75; transform: scale(1); }
  50%  { box-shadow: 0 0 0 10px rgba(70,212,255,0); opacity:1; transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0 rgba(70,212,255,0); opacity:.75; transform: scale(1); }
}

/* ---------------------------
   Notifications bar
--------------------------- */
.noticeBar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

/* ---------------------------
   Portal Tools grid
--------------------------- */
.toolsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 1100px){
  .toolsGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .toolsGrid{ grid-template-columns: 1fr; }
}

.toolBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 950;
  border: 1px solid rgba(70,212,255,.22);
  background: rgba(70,212,255,.10);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.toolBtn:hover{
  transform: translateY(-1px);
  background: rgba(70,212,255,.14);
  border-color: rgba(70,212,255,.30);
}

/* ---------------------------
   Misc helpers
--------------------------- */
.hidden{ display:none !important; }
.mt-2{ margin-top: .5rem; }
.mt-3{ margin-top: .75rem; }

/* Scrollbar polish */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(120,140,180,.55) rgba(10,12,18,.55);
}
*::-webkit-scrollbar{ width: 10px; height:10px; }
*::-webkit-scrollbar-track{ background: rgba(10,12,18,.55); border-radius: 999px; }
*::-webkit-scrollbar-thumb{ background: rgba(120,140,180,.45); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(120,140,180,.65); }

/* ==========================================================================
   Mobile Cleanup (Login + Dashboard)
   Add at bottom of dashboard.css
   ========================================================================== */

html, body{
  max-width: 100%;
  overflow-x: hidden;
}

/* Make images responsive by default (fixes giant logo on mobile) */
img{
  max-width: 100%;
  height: auto;
}

/* Better tap targets for mobile */
button, .btn, .toolBtn, a{
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------
   Mobile breakpoint
--------------------------- */
@media (max-width: 820px){

  /* Page padding */
  .container{
    width: calc(100% - 20px);
    margin: 14px auto 48px;
  }

  /* Header: stop crushing everything */
  .ikonic-header{
    position: sticky;
    top: 0;
    padding: 10px 12px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .ikonic-header-left{
    flex: 1 1 auto;
    min-width: 0;
  }

  .ikonic-logo{
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .ikonic-portal-title{
    font-size: 18px;
    white-space: nowrap;
  }

  .ikonic-header-right{
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .ikonic-user-info{
    padding: 6px 10px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .ikonic-username{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
  }

  .ikonic-logout,
  .ikonic-login{
    padding: .55rem .8rem;
    font-size: 13px;
    white-space: nowrap;
  }

  /* Grid: already stacks, just tighten spacing */
  .grid{ gap: 12px; }
  .card{ padding: 14px; border-radius: 18px; }

  /* Card headers and action buttons */
  .cardHead{
    flex-direction: column;
    align-items: flex-start;
  }

  .actions{
    width: 100%;
    justify-content: flex-start;
  }

  .btn{
    width: auto;
    min-height: 44px;   /* tap friendly */
    padding: .7rem 1rem;
    border-radius: 14px;
  }

  /* Tools grid */
  .toolsGrid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .toolBtn{
    min-height: 48px;
    padding: 14px 14px;
  }

  /* Rows in lists: stack nicely */
  .row{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .rowMain{
    width: 100%;
  }

  .date{
    align-self: flex-start;
  }
}

/* ---------------------------
   Login page cleanup
   Works if your login form uses common tags/classes.
   If your login.php has a wrapper, it’ll look even better.
--------------------------- */

@media (max-width: 820px){

  /* If login page has a big logo/shield image, center it */
  .login-logo,
  .login-hero,
  .login-brand,
  .auth-logo,
  .auth-hero{
    display: block;
    margin: 18px auto 14px;
    max-width: 320px;
  }

  /* Inputs: full width, readable */
  input[type="email"],
  input[type="text"],
  input[type="password"],
  input[type="number"],
  select,
  textarea{
    width: 100%;
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom-on-focus */
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: var(--ink);
    outline: none;
  }

  input:focus, select:focus, textarea:focus{
    box-shadow: var(--focus);
    border-color: rgba(70,212,255,.35);
  }

  /* Buttons on login */
  .login-actions button,
  .login-actions .btn,
  form button[type="submit"]{
    width: 100%;
    min-height: 46px;
    margin-top: 10px;
  }

  /* Make forms not stick to the corner if they’re unwrapped */
  form{
    max-width: 420px;
    margin: 0 auto;
  }

  /* Footer on auth pages */
  .auth-footer,
  .login-footer,
  footer{
    padding: 14px 12px;
    text-align: center;
    color: rgba(167,176,200,.85);
  }
}


/* ==========================================================================
   Missing utility classes used by auth/login.php
   (Because CSS won't magically invent Tailwind for you.)
   ========================================================================== */

/* sizing */
.w-full{ width:100%; }
.w-32{ width:8rem; }                 /* 128px */
.max-w-md{ max-width:28rem; }        /* ~448px */
.h-auto{ height:auto; }
.h-screen{ min-height:100vh; }       /* better than height:100vh on mobile */

/* padding */
.p-2{ padding:.5rem; }
.p-8{ padding:2rem; }
.p-responsive{ padding: 1rem; }      /* your custom class */

/* borders */
.border{ border:1px solid var(--border); }
.border-cyan-500{ border-color: rgba(70,212,255,.45); } /* matches brand */

/* spacing */
.mb-3{ margin-bottom:.75rem; }
.mb-4{ margin-bottom:1rem; }

/* text */
.text-center{ text-align:center; }
.text-yellow-400{ color:#ffd37a; }
.text-sm{ font-size:.875rem; }

/* auth inputs */
.bg-gray-700{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--ink);
}
.bg-gray-700::placeholder{ color: rgba(167,176,200,.8); }

/* auth form wrapper (makes it look intentional) */
@media (max-width: 820px){
  .p-responsive{ padding: 16px; }
  .max-w-md{ max-width: 92vw; }
}

/* button colors used on login */
.bg-green-500{
  background: rgba(34,197,94,.26);
  border: 1px solid rgba(34,197,94,.32);
}
.hover\\:bg-green-600:hover,
.hover\\:bg-green-500:hover,
.hover\\:bg-green-700:hover{
  filter: brightness(1.10);
}

/* better default look for auth inputs */
input[type="email"].bg-gray-700,
input[type="password"].bg-gray-700{
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 16px; /* prevents mobile zoom */
  outline: none;
}
input[type="email"].bg-gray-700:focus,
input[type="password"].bg-gray-700:focus{
  box-shadow: var(--focus);
  border-color: rgba(70,212,255,.35);
}

/* tighten the auth card */
form.bg-gray-800{
  border-radius: 18px;
  background:
    radial-gradient(700px 220px at 30% -40px, rgba(70,212,255,.10), transparent 60%),
    radial-gradient(700px 220px at 80% -40px, rgba(197,91,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow: var(--shadow);
}

/* make sure the big logo doesn't blow out layouts */
form img{
  max-width: 180px;
  height: auto;
}

/* --- flex centering utilities (used by login wrapper) --- */
.items-center{ align-items:center; }
.justify-center{ justify-content:center; }

/* make login wrapper actually take full viewport height reliably */
.h-screen{ min-height:100svh; } /* better on mobile than 100vh */
/* If header exists, center the auth card in remaining space */
body{ min-height:100svh; }
.bg-gray-900.flex.h-screen{
  min-height: calc(100svh - 64px); /* adjust if your header height differs */
}


/* ==========================================================================
   AUTH PAGE (scoped, so it doesn't wreck every form on the site)
   ========================================================================== */

.auth-page{
  display:flex;                  /* in case .flex isn't present somewhere */
  align-items:center;
  justify-content:center;
  min-height: calc(100svh - 64px);  /* keeps it visually centered under header */
  padding: 16px;
}

@media (max-width: 820px){
  .auth-page{
    min-height: calc(100svh - 64px);
    padding: 14px;
  }
}

/* auth card */
.auth-page form.bg-gray-800{
  width: 100%;
  max-width: 28rem; /* same as max-w-md */
  border-radius: 18px;
  border: 1px solid rgba(70,212,255,.45);
  background:
    radial-gradient(700px 220px at 30% -40px, rgba(70,212,255,.10), transparent 60%),
    radial-gradient(700px 220px at 80% -40px, rgba(197,91,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow: var(--shadow);
  padding: 24px;
}

/* logo sizing */
.auth-page form img{
  max-width: 180px;
  height: auto;
}

/* inputs */
.auth-page input[type="email"],
.auth-page input[type="password"]{
  width: 100%;
  min-height: 44px;
  font-size: 16px; /* stops mobile zoom */
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  outline: none;
}

.auth-page input[type="email"]::placeholder,
.auth-page input[type="password"]::placeholder{
  color: rgba(167,176,200,.8);
}

.auth-page input[type="email"]:focus,
.auth-page input[type="password"]:focus{
  box-shadow: var(--focus);
  border-color: rgba(70,212,255,.35);
}

/* submit button */
.auth-page button[type="submit"]{
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid rgba(34,197,94,.32);
  background: rgba(34,197,94,.26);
  color: var(--ink);
  cursor: pointer;
}

.auth-page button[type="submit"]:hover{
  filter: brightness(1.10);
}

/* forgot link */
.auth-page .text-yellow-400 a{
  color: #ffd37a;
  font-weight: 800;
}

.auth-page .auth-logo-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 14px 0;
}

.auth-page .auth-logo{
  display: block;
  max-width: 180px;
  height: auto;
}

/* ============================
   Dashboard section separation
   ============================ */

.sectionRow{
  grid-column: span 12 / span 12;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 220px at 15% -60px, rgba(70,212,255,.08), transparent 60%),
    radial-gradient(900px 220px at 85% -60px, rgba(197,91,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

.sectionRow .kicker{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 950;
  letter-spacing:.2px;
  font-size: 14px;
}

.sectionRow .kicker .dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(70,212,255,.95);
  box-shadow: 0 0 0 6px rgba(70,212,255,.12);
}

.sectionRow .subline{
  margin-top: 6px;
  color: rgba(167,176,200,.9);
  font-size: 13px;
  line-height: 1.35;
}

.sectionRow.hr{
  padding: 10px 16px;
  background: rgba(255,255,255,.02);
}

.sectionRow.hr .line{
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(70,212,255,.0),
    rgba(70,212,255,.65),
    rgba(197,91,255,.65),
    rgba(255,79,216,.45),
    rgba(70,212,255,.0)
  );
  opacity: .9;
}

/* ============================
   Dashboard section separation
   ============================ */

.sectionRow{
  grid-column: span 12 / span 12;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 220px at 15% -60px, rgba(70,212,255,.08), transparent 60%),
    radial-gradient(900px 220px at 85% -60px, rgba(197,91,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

.sectionRow .kicker{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 950;
  letter-spacing:.2px;
  font-size: 14px;
}

.sectionRow .kicker .dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(70,212,255,.95);
  box-shadow: 0 0 0 6px rgba(70,212,255,.12);
}

.sectionRow .subline{
  margin-top: 6px;
  color: rgba(167,176,200,.9);
  font-size: 13px;
  line-height: 1.35;
}

.sectionRow.hr{
  padding: 10px 16px;
  background: rgba(255,255,255,.02);
}

.sectionRow.hr .line{
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(70,212,255,.0),
    rgba(70,212,255,.65),
    rgba(197,91,255,.65),
    rgba(255,79,216,.45),
    rgba(70,212,255,.0)
  );
  opacity: .9;
}

/* ===== Shortcut cards: button aligned to right ===== */
.card > .btn{
  margin-left: auto;      /* pushes it to the right */
  display: inline-flex;   /* keep button sizing */
  width: fit-content;
}

/* On mobile: put it full width so it looks intentional */
@media (max-width: 820px){
  .card > .btn{
    width: 100%;
  }
}
/* ===== Actions alignment helpers ===== */
.actions-right{
  justify-content: flex-end;
}

/* Mobile: stack and fill width */
@media (max-width: 820px){
  .actions-right{
    justify-content: flex-start;
  }
  .actions-right .btn{
    width: 100%;
  }
}

.shortcutCard{
  display:flex;
  flex-direction: column;
}

.shortcutCard > .btn,
.shortcutCard .actions{
  margin-top: auto;       /* pushes button area to the bottom */
  margin-left: auto;      /* aligns it to the right */
}

@media (max-width: 820px){
  .shortcutCard > .btn,
  .shortcutCard .actions{
    width: 100%;
    margin-left: 0;
  }
  .shortcutCard .actions .btn{
    width: 100%;
  }
}

/* ===========================
   Footer
=========================== */
.ikonic-footer{
  margin-top: 50px;
  padding: 18px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(167,176,200,.85);
  text-align: center;
}

/* ===========================
   HALO floating action button
=========================== */
.halo-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 16px;
  border-radius: 999px;

  font-weight: 950;
  color: var(--ink);

  border: 1px solid rgba(70,212,255,.30);
  background: linear-gradient(90deg, rgba(70,212,255,.20), rgba(197,91,255,.16));
  box-shadow: 0 18px 45px rgba(0,0,0,.55);

  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}

.halo-fab:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  border-color: rgba(70,212,255,.45);
}

.halo-fab:focus{
  outline: none;
  box-shadow: var(--focus), 0 18px 45px rgba(0,0,0,.55);
}

.halo-fab-text{
  letter-spacing: .3px;
}

/* Mobile: smaller FAB */
@media (max-width: 820px){
  .halo-fab{
    right: 14px;
    bottom: 14px;
    padding: 12px 14px;
  }
}

/* ===========================
   Projects page
=========================== */

.projShell{ padding: 18px; }

.projTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.projTitle{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.projIcon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(70,212,255,.08);
  border: 1px solid rgba(70,212,255,.18);
}

.projNew{ margin-left: 10px; }
.projTotal{ color: rgba(70,212,255,.95); font-weight: 950; }

.projSearch{
  width: min(360px, 100%);
  flex: 0 1 360px;
}

.projSearch input{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--ink);
  outline: none;
}
.projSearch input::placeholder{ color: rgba(167,176,200,.7); }
.projSearch input:focus{
  box-shadow: var(--focus);
  border-color: rgba(70,212,255,.28);
}

.projControls{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.seg{
  display:inline-flex;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.segBtn{
  appearance:none;
  border:0;
  background: transparent;
  color: rgba(233,238,252,.92);
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
}
.segBtn + .segBtn{ border-left: 1px solid rgba(255,255,255,.10); }
.segBtn:hover{ background: rgba(255,255,255,.06); }
.segBtn.is-active{
  background: rgba(70,212,255,.12);
  color: rgba(70,212,255,.95);
}

.ctrl{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.ctrlLabel{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(167,176,200,.85);
  font-weight: 950;
}

.ctrl select{
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,12,18,.55);
  color: var(--ink);
  padding: 6px 10px;
  outline: none;
}
.ctrl select:focus{
  box-shadow: var(--focus);
  border-color: rgba(70,212,255,.28);
}

.togglePill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor: pointer;
}

.toggleText{ font-weight: 900; color: rgba(233,238,252,.92); }

/* Cards grid */
.projCards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 1100px){
  .projCards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .projCards{ grid-template-columns: 1fr; }
}

/* Individual card */
.projCard{
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 220px at 30% -40px, rgba(70,212,255,.08), transparent 60%),
    radial-gradient(700px 220px at 80% -40px, rgba(197,91,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow: var(--shadowSoft);
}

.projCard:hover{
  border-color: rgba(70,212,255,.22);
  box-shadow: var(--shadow);
}

/* Table */
.projTableWrap{
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadowSoft);
}

.projTable{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.projTable thead th{
  text-align:left;
  padding: 12px 12px;
  color: rgba(70,212,255,.95);
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-weight: 950;
}

.projTable tbody td{
  padding: 12px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.projTable tbody tr:hover{
  background: rgba(70,212,255,.06);
}

/* Mobile: controls stack nicer */
@media (max-width: 820px){
  .projNew{ margin-left: 0; }
  .projSearch{ flex: 1 1 100%; }
  .projControls{ gap: 8px; }
  .ctrl{ width: 100%; justify-content: space-between; }
  .seg{ width: 100%; }
  .segBtn{ flex: 1 1 50%; justify-content:center; }
}

  .parent-row { background: #0e1525; }
  .child-row  { background: #0a1220; }
  .card-parent { border:1px solid rgba(34,197,94,.35); }
  .card-child  { border:1px solid rgba(59,130,246,.35); }

  #hideCompletedTrack{position:relative;width:40px;height:20px;border-radius:9999px;background:#4b5563;transition:background-color .2s}
  #hideCompletedKnob{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:9999px;background:#fff;transition:transform .2s}
  #hideCompletedWrap.is-on #hideCompletedTrack{background:#06b6d4}
  #hideCompletedWrap.is-on #hideCompletedKnob{transform:translateX(20px)}


  /* ===========================
   Projects: readability + text tones
=========================== */

.projShell .h2{ color: rgba(233,238,252,.98); }
.projShell .sub{ color: rgba(167,176,200,.90); }

.projTable thead th{
  color: rgba(70,212,255,.92); /* cyan-ish headers */
}

.projTable tbody td{
  color: rgba(233,238,252,.90); /* not pure white */
}

.projTable tbody td small,
.projTable tbody td .muted,
.projTable tbody td .sub{
  color: rgba(167,176,200,.85);
}

/* ===========================
   Projects: parent vs child emphasis
=========================== */

/* Table rows */
.projRowParent{
  background: rgba(70,212,255,.04);
}
.projRowChild{
  background: rgba(255,255,255,.015);
}

/* Left neon stripe for parent rows */
.projRowParent td:first-child{
  position: relative;
}
.projRowParent td:first-child::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(70,212,255,.95), rgba(197,91,255,.75));
  opacity: .9;
}

/* Child rows get a softer stripe */
.projRowChild td:first-child::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  opacity: .7;
}

/* Make sure the pseudo stripe doesn't break layout */
.projTable tbody td:first-child{
  position: relative;
  padding-left: 16px;
}

/* ===========================
   Priority badges (green/yellow/orange/red)
=========================== */

.priBadge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  letter-spacing: .1px;
}

.pri-sm{
  padding: 4px 8px;
  font-size: 11px;
}

.pri-low{
  color: rgba(125,243,177,.95);
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.12);
}

.pri-medium{
  color: rgba(255,211,122,.95);
  border-color: rgba(245,158,11,.32);
  background: rgba(245,158,11,.12);
}

.pri-high{
  color: rgba(255,162,122,.95);
  border-color: rgba(249,115,22,.35);
  background: rgba(249,115,22,.12);
}

.pri-critical{
  color: rgba(255,123,123,.96);
  border-color: rgba(239,68,68,.38);
  background: rgba(239,68,68,.12);
}

/* ===========================
   Action buttons (Edit/Delete)
=========================== */

.projActions{
  text-align: right;
  white-space: nowrap;
}

.actBtn{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 950;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(233,238,252,.92);
  margin-left: 8px;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease, background .15s ease;
}

.actBtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.actEdit{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.12);
  color: rgba(255,211,122,.95);
}

.actDelete{
  border-color: rgba(239,68,68,.38);
  background: rgba(239,68,68,.12);
  color: rgba(255,123,123,.96);
}

/* ===========================
   Action buttons (Edit/Delete)
=========================== */

.projActions{
  text-align: right;
  white-space: nowrap;
}

.actBtn{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 950;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(233,238,252,.92);
  margin-left: 8px;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease, background .15s ease;
}

.actBtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.actEdit{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.12);
  color: rgba(255,211,122,.95);
}

.actDelete{
  border-color: rgba(239,68,68,.38);
  background: rgba(239,68,68,.12);
  color: rgba(255,123,123,.96);
}

/* =========================================================
   Project View (projects/view.php) - no Tailwind required
========================================================= */

.projView{
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 18px;
}

.projView__wrap{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(15,17,23,.55);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  padding: 18px;
}

.projView__title{
  margin: 4px 0 14px;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(70,212,255,.95);
}

/* Flash banners */
.flash{
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 0 14px;
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 800;
}
.flash--ok{ background: rgba(34,197,94,.16); color: rgba(214,255,231,.95); border-color: rgba(34,197,94,.28); }
.flash--warn{ background: rgba(245,158,11,.18); color: rgba(255,234,186,.95); border-color: rgba(245,158,11,.28); }
.flash--bad{ background: rgba(239,68,68,.16); color: rgba(255,210,210,.95); border-color: rgba(239,68,68,.28); }
.flash--info{ background: rgba(59,130,246,.16); color: rgba(219,234,254,.95); border-color: rgba(59,130,246,.28); }

/* Tabs */
.projTabs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 16px;
}
.projTabs__btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(233,238,252,.92);
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease, background .15s ease;
  position: relative;
}
.projTabs__btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.projTabs__btn.is-active{
  border-color: rgba(70,212,255,.35);
  background: rgba(70,212,255,.10);
  color: rgba(70,212,255,.98);
}

/* Red dot */
.dot{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(239,68,68,.95);
  margin-left: 8px;
  vertical-align: middle;
}
.dot--pulse{ animation: dotPulse 1.2s infinite; }
@keyframes dotPulse{
  0%{ transform: scale(1); opacity: .8; }
  50%{ transform: scale(1.35); opacity: 1; }
  100%{ transform: scale(1); opacity: .8; }
}

/* Cards / sections */
.projCard{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(10,13,24,.55);
  padding: 16px;
}

.projCard__head{
  margin-bottom: 12px;
}
.projCard__head--row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.projCard__title{
  margin: 0;
  font-size: 20px;
  font-weight: 950;
  color: rgba(70,212,255,.92);
}

.projSection{
  margin-top: 16px;
}

.projDesc{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  padding: 14px;
  margin-bottom: 14px;
}
.projDesc__main{
  margin: 0;
  color: rgba(233,238,252,.92);
  font-weight: 800;
}
.projDesc__sub{
  margin: 10px 0 0;
  color: rgba(167,176,200,.92);
}

/* Meta grid */
.projMeta{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .projMeta{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .projMeta{ grid-template-columns: 1fr; }
}

.projMeta__item{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  padding: 12px 12px;
  min-height: 64px;
}

.projMeta__label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(167,176,200,.90);
  margin-bottom: 6px;
}

.projMeta__value{
  color: rgba(233,238,252,.92);
  font-weight: 850;
  line-height: 1.25;
}

.projMeta__hint{
  margin-left: 10px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(125,243,177,.95);
}
.is-hidden{ display: none !important; }

/* Inputs / selects */
.projInput,
.projSelect{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: rgba(233,238,252,.92);
  padding: 10px 12px;
  outline: none;
}
.projInput:focus,
.projSelect:focus{
  border-color: rgba(70,212,255,.35);
  box-shadow: 0 0 0 3px rgba(70,212,255,.12);
}

.projLabel{
  display:block;
  margin: 10px 0 6px;
  color: rgba(167,176,200,.92);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Links */
.projLink{
  color: rgba(70,212,255,.92);
  text-decoration: none;
  font-weight: 900;
}
.projLink:hover{ text-decoration: underline; }

.linkBtn{
  appearance:none;
  border:none;
  background:none;
  padding: 6px 0 0;
  cursor:pointer;
  color: rgba(70,212,255,.92);
  font-weight: 900;
  font-size: 12px;
}
.linkBtn:hover{ text-decoration: underline; }

.linkWarn{ color: rgba(255,211,122,.95); font-weight: 900; text-decoration:none; }
.linkWarn:hover{ text-decoration: underline; }
.linkDanger{ color: rgba(255,123,123,.96); font-weight: 900; text-decoration:none; }
.linkDanger:hover{ text-decoration: underline; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 950;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(233,238,252,.92);
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }

.btn--sm{ padding: 8px 10px; border-radius: 12px; font-size: 12px; }

.btn--ok{
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.14);
  color: rgba(214,255,231,.95);
}
.btn--warn{
  border-color: rgba(245,158,11,.28);
  background: rgba(245,158,11,.14);
  color: rgba(255,234,186,.95);
}
.btn--bad{
  border-color: rgba(239,68,68,.28);
  background: rgba(239,68,68,.14);
  color: rgba(255,210,210,.95);
}
.btn--info{
  border-color: rgba(59,130,246,.28);
  background: rgba(59,130,246,.14);
  color: rgba(219,234,254,.95);
}

/* Priority badges (same as other pages) */
.priBadge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.pri-low{
  color: rgba(125,243,177,.95);
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.12);
}
.pri-medium{
  color: rgba(255,211,122,.95);
  border-color: rgba(245,158,11,.32);
  background: rgba(245,158,11,.12);
}
.pri-high{
  color: rgba(255,162,122,.95);
  border-color: rgba(249,115,22,.35);
  background: rgba(249,115,22,.12);
}
.pri-critical{
  color: rgba(255,123,123,.96);
  border-color: rgba(239,68,68,.38);
  background: rgba(239,68,68,.12);
}

/* Toolbar */
.projToolbar{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin: 10px 0 12px;
}
.projToolbar__group{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Tables */
.tableWrap{
  overflow:auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
}

.projTable{
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}
.projTable thead th{
  text-align:left;
  font-weight: 950;
  color: rgba(70,212,255,.92);
  background: rgba(255,255,255,.04);
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  white-space: nowrap;
}
.projTable tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(233,238,252,.90);
  vertical-align: top;
}
.projTable tbody tr:hover{
  background: rgba(255,255,255,.03);
}
.cell-muted{ color: rgba(167,176,200,.92); }
.cell-strong{ font-weight: 950; }
.nowrap{ white-space: nowrap; }

/* Task name pill link */
.pillLink{
  display:inline-flex;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(70,212,255,.14);
  border: 1px solid rgba(70,212,255,.22);
  color: rgba(233,238,252,.95);
  text-decoration:none;
  font-weight: 950;
}
.pillLink:hover{
  background: rgba(70,212,255,.18);
}

/* Status pill */
.statusPill{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(59,130,246,.14);
  border: 1px solid rgba(59,130,246,.22);
  color: rgba(219,234,254,.95);
  font-weight: 950;
  font-size: 12px;
  text-transform: capitalize;
}

/* Notes */
.noteBox{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  padding: 10px;
}
.noteBox__form{ margin-bottom: 10px; }
.noteBox__text{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: rgba(233,238,252,.92);
  padding: 10px 12px;
  outline: none;
  margin-bottom: 8px;
}
.noteList{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 10px; }
.noteItem{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px;
}
.noteItem__meta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}
.noteItem__body{ margin-top: 6px; color: rgba(233,238,252,.92); }
.noteReply{ margin-top: 8px; }
.noteReplies{ margin: 10px 0 0; padding: 0 0 0 14px; display:flex; flex-direction:column; gap: 8px; }
.noteReplyItem{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 10px;
}

/* Files */
.uploadForm{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  padding: 12px;
}

.fileList{ list-style:none; margin: 14px 0 0; padding:0; display:flex; flex-direction:column; gap: 12px; }
.fileItem{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px;
}
.fileItem__row{ display:flex; gap: 12px; align-items:flex-start; }
.fileThumb img{
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
}
.fileItem__meta{ flex: 1; }
.fileItem__name{ display:flex; flex-wrap:wrap; gap: 10px; align-items:center; font-weight: 950; }
.fileItem__notes{ margin-top: 6px; color: rgba(167,176,200,.92); }
.fileItem__foot{ margin-top: 8px; font-size: 12px; color: rgba(167,176,200,.92); }
.fileItem__actions{ margin-top: 10px; display:flex; gap: 14px; align-items:center; }

/* Task tag pill on file */
.tagPill{
  display:inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(59,130,246,.14);
  border: 1px solid rgba(59,130,246,.22);
  color: rgba(219,234,254,.95);
  font-weight: 950;
  font-size: 12px;
}

/* Category chips */
.chipRow{ display:flex; flex-wrap:wrap; gap: 10px; }
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.chip__dot{ width:10px; height:10px; border-radius:999px; }
.chip__text{ font-weight: 950; }

/* Milestones */
.mileGrid{ display:flex; flex-direction:column; gap: 14px; margin-top: 10px; }
.mile{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px;
}
.mile--ok{ border-color: rgba(34,197,94,.28); background: rgba(34,197,94,.10); }
.mile--bad{ border-color: rgba(239,68,68,.28); background: rgba(239,68,68,.10); }
.mile__head{ display:flex; align-items:flex-start; justify-content: space-between; gap: 12px; }
.mile__title{ font-weight: 950; color: rgba(70,212,255,.92); }
.mile__date{ color: rgba(167,176,200,.92); font-weight: 900; margin-left: 8px; }
.mile__actions{ display:flex; gap: 12px; align-items:center; white-space: nowrap; }
.mile__list{ list-style:none; margin: 10px 0 0; padding: 0; display:flex; flex-direction:column; gap: 8px; }
.mile__list li{ display:flex; align-items:center; gap: 10px; color: rgba(233,238,252,.90); }

/* Team list */
.teamList{ list-style:none; margin: 0; padding: 0; display:flex; flex-direction:column; gap: 10px; }
.teamList__item{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 12px;
  display:flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.teamList__name{ font-weight: 950; }
.teamList__status{ color: rgba(167,176,200,.92); font-weight: 900; }
.teamList__reason{ color: rgba(167,176,200,.92); }

.teamList__item--owner .teamList__name{ color: rgba(197,91,255,.92); }
.teamList__item--group .teamList__name{ color: rgba(70,212,255,.92); }
.teamList__item--user  .teamList__name{ color: rgba(255,211,122,.95); }

.hidden { display: none !important; }
.is-hidden { display: none !important; }


    .tlWrap{
      border:1px solid rgba(255,255,255,.08);
      border-radius:16px;
      overflow:auto;
      background:rgba(0,0,0,.22);
      box-shadow:0 10px 30px rgba(0,0,0,.35);
    }

    .tlTable{
      border-collapse:separate;
      border-spacing:0;
      width:max-content;
      min-width:100%;
    }

    .tlTable th,.tlTable td{
      border-bottom:1px solid rgba(255,255,255,.06);
      border-right:1px solid rgba(255,255,255,.05);
      padding:8px 10px;
      font-size:12px;
      color:rgba(255,255,255,.86);
      white-space:nowrap;
      text-align:center;
      vertical-align:middle;
    }

    .tlSticky{
      position:sticky;
      left:0;
      z-index:6;
      text-align:left !important;
      background:linear-gradient(180deg, rgba(16,18,26,.98), rgba(10,12,20,.98));
      border-right:1px solid rgba(70,212,255,.20);
      min-width:280px;
    }

    .tlHead th{
      position:sticky;
      top:0;
      z-index:5;
      background:linear-gradient(180deg, rgba(12,14,24,.98), rgba(8,10,18,.98));
    }

    .tlHead .tlSticky{ z-index:7; }

    .tlSmall{
      font-size:10px;
      color:rgba(255,255,255,.55);
      margin-top:6px;
    }

    /* Week striping so it doesn't become a "long ass thing of white text" */
    .tlW0{ background:rgba(255,255,255,.02); }
    .tlW1{ background:rgba(255,255,255,.05); }

    .tlWeekend{
      background:rgba(255,255,255,.04);
    }

    .tlToday{
      outline:2px solid rgba(70,212,255,.55);
      outline-offset:-2px;
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
    }

    .tlTaskLink{
      display:block;
      padding:10px 12px;
      border-radius:12px;
      background:rgba(70,212,255,.16);
      color:#e9f8ff;
      text-decoration:none;
      font-weight:800;
      border:1px solid rgba(70,212,255,.20);
    }
    .tlTaskLink:hover{ background:rgba(70,212,255,.26); }

    .tlEmpty{ background:rgba(255,255,255,.01); }

    .tlBarCell{ padding:0; }

    .tlBar{
      height:32px;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 12px;
      border-radius:12px;
      font-weight:900;
      margin:6px;
    }

    .tlBar--ok{ background:rgba(34,197,94,.88); color:rgba(0,0,0,.86); }
    .tlBar--warn{ background:rgba(250,204,21,.90); color:rgba(0,0,0,.86); }
    .tlBar--bad{ background:rgba(239,68,68,.90); color:rgba(0,0,0,.90); }
    .tlBar--done{ background:rgba(59,130,246,.92); color:rgba(255,255,255,.92); }

    .tlBarMeta{ font-weight:900; }
    .hidden,.is-hidden{ display:none !important; }

    /* Month header blocks */
    .tlMonthCell{
      text-align:center !important;
      font-weight:900;
      letter-spacing:.4px;
      border-bottom:1px solid rgba(255,255,255,.09);
    }

    /* Month colors */
    .tlM{ color:rgba(255,255,255,.95); }
    .tlM--jan{ background:rgba(34,211,238,.16); border-top:1px solid rgba(34,211,238,.35); }
    .tlM--feb{ background:rgba(59,130,246,.16); border-top:1px solid rgba(59,130,246,.35); }
    .tlM--mar{ background:rgba(34,197,94,.14); border-top:1px solid rgba(34,197,94,.30); }
    .tlM--apr{ background:rgba(20,184,166,.14); border-top:1px solid rgba(20,184,166,.30); }
    .tlM--may{ background:rgba(99,102,241,.14); border-top:1px solid rgba(99,102,241,.30); }
    .tlM--jun{ background:rgba(244,63,94,.14); border-top:1px solid rgba(244,63,94,.30); }
    .tlM--jul{ background:rgba(168,85,247,.14); border-top:1px solid rgba(168,85,247,.30); }
    .tlM--aug{ background:rgba(245,158,11,.14); border-top:1px solid rgba(245,158,11,.30); }
    .tlM--sep{ background:rgba(234,179,8,.14); border-top:1px solid rgba(234,179,8,.30); }
    .tlM--oct{ background:rgba(236,72,153,.14); border-top:1px solid rgba(236,72,153,.30); }
    .tlM--nov{ background:rgba(249,115,22,.14); border-top:1px solid rgba(249,115,22,.30); }
    .tlM--dec{ background:rgba(132,204,22,.14); border-top:1px solid rgba(132,204,22,.30); }


/* 1) Kill the turquoise box borders around each bar span */
.tlBarCell{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* If your cells have borders generally, keep grid subtle */
.tlTable th, .tlTable td{
  border-color: rgba(255,255,255,.06);
}

/* 2) Sunday-to-Sunday alternating week stripes */
.tlW0{ background: rgba(255,255,255,.02); }
.tlW1{ background: rgba(255,255,255,.05); }

/* 3) Weekends slightly different so you can “see” the week */
.tlWeekend{
  background: rgba(255,255,255,.08) !important;
}

/* 4) Today highlight (don’t be subtle, humans miss subtle) */
.tlToday{
  box-shadow: inset 0 0 0 2px rgba(70,212,255,.55);
}

/* 5) Month header colors (your PHP already applies tlM--jan etc.) */
.tlMonthCell.tlM--dec{ background: rgba(197,91,255,.18); }
.tlMonthCell.tlM--jan{ background: rgba(89,208,255,.18); }
/* add the rest if you want them all distinct */


  /* Page container consistent with your portal */
  .ikonWrap{ max-width: 1200px; margin: 0 auto; padding: 22px 18px 34px; }

  .ikonHead{
    display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
    margin-bottom: 14px;
  }
  .ikonTitle{
    font-size: 32px;
    font-weight: 900;
    letter-spacing: .2px;
    margin: 0 0 4px;
    line-height: 1.1;
    background: linear-gradient(90deg, var(--brand,#46d4ff), var(--brand2,#c55bff), var(--accent,#ff4fd8));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .ikonSub{ margin:0; color: rgba(255,255,255,.75); }

  /* Grid that actually uses the screen */
  .roomGrid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
  }

  /* Card */
  .roomCard{
    background: rgba(15, 18, 28, .72);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    overflow:hidden;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  }
  .roomCard:hover{
    transform: translateY(-1px);
    border-color: rgba(70,212,255,.24);
    box-shadow: 0 14px 36px rgba(0,0,0,.35);
  }

  .roomPad{ padding: 16px; }

  .roomTop{
    display:flex; align-items:flex-start; justify-content:space-between; gap: 12px;
    margin-bottom: 10px;
  }
  .roomName{
    margin:0;
    font-size: 18px;
    font-weight: 900;
    color: rgba(110, 231, 255, .95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .roomDesc{
    margin: 6px 0 0;
    color: rgba(255,255,255,.78);
    line-height: 1.35;
    font-size: 13px;
    min-height: 34px;
  }

  /* Presence badge */
  .presenceBadge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.12);
    white-space: nowrap;
    user-select:none;
  }
  .presenceBadge.isOn{ background: rgba(34,197,94,.18); color: rgba(255,255,255,.95); }
  .presenceBadge.isOff{ background: rgba(239,68,68,.14); color: rgba(255,255,255,.95); }

  .badgeDot{ width:8px;height:8px;border-radius:999px; display:inline-block; box-shadow:0 0 12px rgba(0,0,0,.25); }
  .badgeDot.isOn{ background:#22c55e; }
  .badgeDot.isOff{ background:#ef4444; }

  .presenceSection{ margin-top: 10px; }
  .presenceLabel{ margin:0 0 6px; font-size: 12px; color: rgba(255,255,255,.70); }
  .presenceEmpty{ margin:0; font-size: 12px; color: rgba(255,255,255,.55); }

  .userChips{ display:flex; flex-wrap:wrap; gap:6px; }
  .chip{
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.88);
  }

  /* Footer actions */
  .roomActions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top: 14px;
  }

  /* Button fallbacks in case a page loads without your btn styles */
  .btnLite{
    display:inline-flex; align-items:center; gap:8px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(70,212,255,.14);
    color: rgba(255,255,255,.92);
    font-weight: 800;
    text-decoration:none;
    cursor:pointer;
  }
  .btnLite:hover{ background: rgba(70,212,255,.22); }
  .linkLite{
    background: transparent;
    border: none;
    padding: 0;
    color: rgba(255,255,255,.70);
    text-decoration: underline;
    cursor:pointer;
    font-size: 12px;
  }
  .linkLite:hover{ color: rgba(255,255,255,.92); }

  /* Top-right actions */
  .ikonActions{
    display:flex; align-items:center; gap:10px;
  }

  .ikonFoot{
    margin-top: 18px;
    display:flex; align-items:center; justify-content:space-between; gap: 12px;
    flex-wrap: wrap;
  }

  /* Make it feel less “tiny” on big screens */
  @media (min-width: 980px){
    .ikonWrap{ padding-top: 26px; }
    .roomPad{ padding: 18px; }
    .roomName{ font-size: 19px; }
  }

  .ideasWrap{ max-width: 1100px; margin: 0 auto; padding: 28px 18px; }
  .ideasTitle{
    font-size: 32px; font-weight: 900; margin: 0 0 18px;
    background: linear-gradient(90deg, var(--brand,#46d4ff), var(--brand2,#c55bff), var(--accent,#ff4fd8));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  .ideaCard{
    background: rgba(15,17,24,.70);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
    padding: 16px;
    margin-bottom: 14px;
  }

  .ideaMeta{ color: rgba(233,238,252,.70); font-size: 13px; margin: 6px 0 10px; }
  .ideaBody{ color: rgba(233,238,252,.92); line-height: 1.45; }

  .statusPill{
    display:inline-flex; align-items:center; gap:8px;
    padding: 6px 10px; border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    font-size: 13px; font-weight: 700;
  }
  .statusPill--accepted{ color:#34d399; border-color: rgba(52,211,153,.25); }
  .statusPill--rejected{ color:#fb7185; border-color: rgba(251,113,133,.25); }
  .statusPill--converted{ color:#60a5fa; border-color: rgba(96,165,250,.25); }
  .statusPill--submitted,
  .statusPill--reviewed{ color:#fbbf24; border-color: rgba(251,191,36,.25); }

  .ideaActions{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }

  .ideaBtn{
    appearance:none; border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(233,238,252,.95);
    border-radius: 12px;
    padding: 8px 12px;
    font-weight: 800;
    cursor: pointer;
    text-decoration:none;
    display:inline-flex; align-items:center; gap:8px;
  }
  .ideaBtn:hover{ border-color: rgba(70,212,255,.30); background: rgba(255,255,255,.08); }
  .ideaBtn--ok{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.28); }
  .ideaBtn--bad{ background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.28); }
  .ideaBtn--warn{ background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.28); }
  .ideaBtn--link{ background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.28); }

  .ideaForm{
    margin-top: 18px;
    background: rgba(15,17,24,.70);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 16px;
  }
  .ideaFormGrid{ display:grid; grid-template-columns: 1fr; gap: 10px; }
  .ideaInput, .ideaTextarea{
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 10px 12px;
    color: rgba(233,238,252,.95);
    outline: none;
  }
  .ideaTextarea{ min-height: 110px; resize: vertical; }
  .ideaInput:focus, .ideaTextarea:focus{ border-color: rgba(70,212,255,.40); box-shadow: 0 0 0 3px rgba(70,212,255,.10); }
  .ideaFormActions{ display:flex; gap: 10px; margin-top: 10px; flex-wrap:wrap; }

  /* ===== Ideas Panel (portal native, no Tailwind) ===== */
.ideasWrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 18px;
}

.ideasTitle{
  margin: 0 0 14px;
  font-size: 32px;
  font-weight: 1000;
  background: linear-gradient(90deg, var(--brand,#46d4ff), var(--brand2,#c55bff), var(--accent,#ff4fd8));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ideaCard{
  background: rgba(15,17,24,.58);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  margin-bottom: 12px;
}

.ideaMeta{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(233,238,252,.62);
}

.ideaBody{
  margin-top: 12px;
  color: rgba(233,238,252,.88);
  line-height: 1.45;
  white-space: normal;
}

.ideaActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
  align-items:center;
}

.ideaBtn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,252,.95);
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 900;
  cursor: pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: .15s ease;
}

.ideaBtn:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(70,212,255,.28);
  transform: translateY(-1px);
}

.ideaBtn--ok{
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.28);
}
.ideaBtn--ok:hover{ border-color: rgba(34,197,94,.42); }

.ideaBtn--warn{
  background: rgba(250,204,21,.14);
  border-color: rgba(250,204,21,.22);
  color: rgba(255,245,200,.95);
}
.ideaBtn--warn:hover{ border-color: rgba(250,204,21,.40); }

.ideaBtn--bad{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.22);
}
.ideaBtn--bad:hover{ border-color: rgba(239,68,68,.40); }

.ideaBtn--link{
  background: rgba(59,130,246,.16);
  border-color: rgba(59,130,246,.22);
}
.ideaBtn--link:hover{ border-color: rgba(59,130,246,.40); }

.statusPill{
  font-size: 12px;
  font-weight: 950;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,252,.88);
  white-space: nowrap;
}

.statusPill--submitted{ border-color: rgba(70,212,255,.25); }
.statusPill--reviewed{ border-color: rgba(250,204,21,.25); }
.statusPill--accepted{ border-color: rgba(34,197,94,.28); }
.statusPill--rejected{ border-color: rgba(239,68,68,.28); }
.statusPill--converted{ border-color: rgba(59,130,246,.28); }
.statusPill--archived{ border-color: rgba(255,255,255,.18); opacity:.85; }
.statusPill--deleted{ border-color: rgba(255,255,255,.18); opacity:.7; }

.ideaForm{
  background: rgba(15,17,24,.58);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
}

.ideaFormGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.ideaInput, .ideaTextarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,252,.95);
  padding: 10px 12px;
  outline: none;
}

.ideaTextarea{ min-height: 110px; resize: vertical; }

.ideaInput:focus, .ideaTextarea:focus{
  border-color: rgba(70,212,255,.28);
  box-shadow: 0 0 0 3px rgba(70,212,255,.12);
}

.ideaFormActions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 12px;
}


/* ===== Task Create Page (scoped) ===== */
.taskCreateWrap .taskPanel{
  background: rgba(15,17,24,.72);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.taskCreateWrap .taskGradTitle{
  background: linear-gradient(90deg, var(--brand,#46d4ff), var(--brand2,#c55bff), var(--accent,#ff4fd8));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.taskCreateWrap .taskFormCard{
  max-width: 720px;
  margin: 0 auto;
  padding: 18px;
  border-radius: 18px;
  background: rgba(20,24,36,.65);
  border: 1px solid rgba(255,255,255,.10);
}

.taskCreateWrap .taskField{ margin-bottom: 14px; }

.taskCreateWrap .taskLabel{
  display:block;
  margin-bottom: 6px;
  font-weight: 800;
  color: rgba(233,238,252,.9);
}

.taskCreateWrap .taskInput,
.taskCreateWrap .taskTextarea,
.taskCreateWrap .taskSelect{
  width: 100%;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(233,238,252,.95);
  outline: none;
}

.taskCreateWrap .taskInput:focus,
.taskCreateWrap .taskTextarea:focus,
.taskCreateWrap .taskSelect:focus{
  border-color: rgba(70,212,255,.35);
}

.taskCreateWrap .taskCheckRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 6px;
  margin-bottom: 16px;
}

.taskCreateWrap .taskCheckbox{ width: 16px; height: 16px; }

.taskCreateWrap .taskCheckLabel{
  color: rgba(233,238,252,.9);
  font-weight: 700;
}

.taskCreateWrap .taskActions{
  display:flex;
  gap: 12px;
  align-items:center;
  padding-top: 6px;
}

/* ===== TomSelect styling (scoped) ===== */
.taskCreateWrap .ts-control{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  padding: 8px 10px !important;
  box-shadow: none !important;
  min-height: 44px;
}
.taskCreateWrap .ts-control input{ color: rgba(233,238,252,.95) !important; }
.taskCreateWrap .ts-dropdown{
  background: rgba(15,17,24,.98) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
}
.taskCreateWrap .ts-dropdown .option{ color: rgba(233,238,252,.92) !important; }
.taskCreateWrap .ts-dropdown .option.active{ background: rgba(70,212,255,.16) !important; }
.taskCreateWrap .ts-wrapper.multi .ts-control > div{
  background: rgba(70,212,255,.14) !important;
  border: 1px solid rgba(70,212,255,.20) !important;
  color: rgba(233,238,252,.95) !important;
  border-radius: 999px !important;
}

/* Force task create page to use portal container feel */
.taskCreateWrap{
  width: min(900px, 100%);
  margin: 0 auto;
}

/* In case some global rules make forms weird */
.taskCreateWrap form{
  width: 100%;
}


.panel input[type="text"],
.panel input[type="number"],
.panel input[type="search"],
.panel input[type="email"],
.panel input[type="url"],
.panel input[type="password"],
.panel select,
.panel textarea{
  width: 100%;
  background: var(--field-bg);
  color: var(--field-ink);
  border: 1px solid var(--field-border);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.panel textarea{
  min-height: 120px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  background: var(--field-bg2);
}

.panel select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(233,238,252,.85) 50%),
    linear-gradient(135deg, rgba(233,238,252,.85) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.panel input::placeholder,
.panel textarea::placeholder{
  color: rgba(167,176,200,.75);
}

.panel input:focus,
.panel select:focus,
.panel textarea:focus{
  border-color: var(--field-border2);
  box-shadow: var(--field-shadow);
}

.panel input[readonly]{
  opacity: .85;
  cursor: not-allowed;
  background: rgba(10,12,18,.65);
}

.panel label{
  color: var(--field-muted);
  font-weight: 700;
}