/* TASKOLOOT MODERN THEME - Phase 1 - Premium Dark + Ocean Blue */
:root {
  --tl-bg-primary:#0A0E1A; --tl-bg-surface:#111827; --tl-bg-surface-2:#1A2035; --tl-bg-elevated:#1E293B;
  --tl-border:rgba(148,163,184,0.12); --tl-border-strong:rgba(148,163,184,0.20);
  --tl-primary:#0EA5E9; --tl-primary-light:#38BDF8; --tl-primary-dark:#0284C7; --tl-primary-glow:rgba(14,165,233,0.35);
  --tl-success:#10B981; --tl-success-glow:rgba(16,185,129,0.30); --tl-warning:#F59E0B; --tl-danger:#EF4444; --tl-purple:#8B5CF6;
  --tl-text-primary:#F1F5F9; --tl-text-secondary:#94A3B8; --tl-text-muted:#64748B;
  --tl-gradient-primary:linear-gradient(135deg,#0EA5E9 0%,#38BDF8 100%);
  --tl-gradient-surface:linear-gradient(135deg,#1A2035 0%,#111827 100%);
  --tl-gradient-success:linear-gradient(135deg,#10B981 0%,#34D399 100%);
  --tl-gradient-glow:radial-gradient(circle at 50% 0%,rgba(14,165,233,0.15) 0%,transparent 70%);
  --tl-shadow-sm:0 2px 8px rgba(0,0,0,0.3); --tl-shadow-md:0 8px 24px rgba(0,0,0,0.4); --tl-shadow-lg:0 16px 48px rgba(0,0,0,0.5);
  --tl-radius-sm:8px; --tl-radius-md:12px; --tl-radius-lg:16px; --tl-radius-xl:24px;
  --tl-font-heading:'Space Grotesk','Inter',system-ui,sans-serif; --tl-font-body:'Inter',system-ui,sans-serif; --tl-font-mono:'JetBrains Mono',monospace;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');
body{background-color:var(--tl-bg-primary)!important;color:var(--tl-text-primary)!important;font-family:var(--tl-font-body)!important;background-image:radial-gradient(circle at 20% 0%,rgba(14,165,233,0.06) 0%,transparent 50%),radial-gradient(circle at 80% 100%,rgba(139,92,246,0.05) 0%,transparent 50%);background-attachment:fixed;min-height:100vh;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:var(--tl-font-heading)!important;color:var(--tl-text-primary)!important;font-weight:700!important;letter-spacing:-0.02em;}
.font-monospace,.text-monospace{font-family:var(--tl-font-mono)!important;}
#preloader{background:var(--tl-bg-primary)!important;z-index:9999;}
#preloader .loader{border:3px solid var(--tl-bg-surface-2)!important;border-top-color:var(--tl-primary)!important;}
.layout-wrapper.layout-content-navbar,.layout-page,.content-wrapper{background:transparent!important;}
.container-p-y{padding-top:1.5rem!important;padding-bottom:1.5rem!important;}
.card{background:var(--tl-bg-surface)!important;border:1px solid var(--tl-border)!important;border-radius:var(--tl-radius-lg)!important;box-shadow:var(--tl-shadow-sm)!important;backdrop-filter:blur(10px);transition:all .3s cubic-bezier(.4,0,.2,1);color:var(--tl-text-primary)!important;}
.card:hover{border-color:var(--tl-border-strong)!important;box-shadow:var(--tl-shadow-md)!important;transform:translateY(-2px);}
.card-header{background:var(--tl-bg-surface-2)!important;border-bottom:1px solid var(--tl-border)!important;color:var(--tl-text-primary)!important;padding:1rem 1.5rem!important;border-radius:var(--tl-radius-lg) var(--tl-radius-lg) 0 0!important;}
.card-title{color:var(--tl-text-primary)!important;font-weight:600!important;}
.card-text{color:var(--tl-text-secondary)!important;}
.card-body{color:var(--tl-text-primary)!important;}
.card-footer{background:var(--tl-bg-surface-2)!important;border-top:1px solid var(--tl-border)!important;color:var(--tl-text-secondary)!important;}
.btn{font-family:var(--tl-font-body)!important;font-weight:600!important;border-radius:var(--tl-radius-md)!important;padding:.625rem 1.25rem!important;transition:all .2s cubic-bezier(.4,0,.2,1)!important;letter-spacing:-0.01em;border:1px solid transparent!important;}
.btn-primary{background:var(--tl-gradient-primary)!important;border:none!important;color:#fff!important;box-shadow:0 4px 16px var(--tl-primary-glow)!important;}
.btn-primary:hover,.btn-primary:focus{background:linear-gradient(135deg,#0284C7 0%,#0EA5E9 100%)!important;box-shadow:0 8px 24px var(--tl-primary-glow)!important;transform:translateY(-1px);}
.btn-secondary{background:var(--tl-bg-surface-2)!important;border:1px solid var(--tl-border-strong)!important;color:var(--tl-text-primary)!important;}
.btn-secondary:hover{background:var(--tl-bg-elevated)!important;border-color:var(--tl-primary)!important;color:var(--tl-primary-light)!important;}
.btn-success{background:var(--tl-gradient-success)!important;border:none!important;color:#fff!important;box-shadow:0 4px 16px var(--tl-success-glow)!important;}
.btn-danger{background:var(--tl-danger)!important;border:none!important;color:#fff!important;}
.btn-outline-primary{background:transparent!important;border:1px solid var(--tl-primary)!important;color:var(--tl-primary-light)!important;}
.btn-outline-primary:hover{background:var(--tl-primary)!important;color:#fff!important;}
.btn-lg{padding:.875rem 1.75rem!important;font-size:1.05rem!important;border-radius:var(--tl-radius-lg)!important;}
.btn-sm{padding:.375rem .875rem!important;font-size:.875rem!important;}
.form-control,.form-select{background-color:var(--tl-bg-surface-2)!important;border:1px solid var(--tl-border-strong)!important;color:var(--tl-text-primary)!important;border-radius:var(--tl-radius-md)!important;padding:.625rem 1rem!important;transition:all .2s!important;}
.form-control:focus,.form-select:focus{background-color:var(--tl-bg-surface-2)!important;border-color:var(--tl-primary)!important;color:var(--tl-text-primary)!important;box-shadow:0 0 0 4px var(--tl-primary-glow)!important;outline:none!important;}
.form-control::placeholder{color:var(--tl-text-muted)!important;}
.form-label{color:var(--tl-text-secondary)!important;font-weight:500!important;margin-bottom:.5rem!important;font-size:.875rem!important;}
.input-group-text{background-color:var(--tl-bg-surface-2)!important;border:1px solid var(--tl-border-strong)!important;color:var(--tl-text-muted)!important;}
.layout-navbar{background:rgba(17,24,39,.85)!important;backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--tl-border)!important;box-shadow:0 4px 24px rgba(0,0,0,.3)!important;}
.navbar{background:transparent!important;border:none!important;}
.navbar-brand,.app-brand{background:transparent!important;}
.navbar-nav .nav-link{color:var(--tl-text-secondary)!important;font-weight:500!important;padding:.5rem 1rem!important;border-radius:var(--tl-radius-md)!important;transition:all .2s!important;}
.navbar-nav .nav-link:hover{color:var(--tl-primary-light)!important;background:var(--tl-bg-surface-2)!important;}
.navbar-nav .nav-link.active{color:var(--tl-primary-light)!important;background:var(--tl-bg-surface-2)!important;}
.layout-menu{background:var(--tl-bg-surface)!important;border-right:1px solid var(--tl-border)!important;}
.menu-inner{background:transparent!important;}
.menu-item .menu-link{color:var(--tl-text-secondary)!important;border-radius:var(--tl-radius-md)!important;margin:2px 8px!important;transition:all .2s!important;}
.menu-item .menu-link:hover{background:var(--tl-bg-surface-2)!important;color:var(--tl-text-primary)!important;}
.menu-item.active .menu-link{background:var(--tl-gradient-primary)!important;color:#fff!important;box-shadow:0 4px 16px var(--tl-primary-glow)!important;}
.modal-content{background:var(--tl-bg-surface)!important;border:1px solid var(--tl-border-strong)!important;border-radius:var(--tl-radius-xl)!important;box-shadow:var(--tl-shadow-lg)!important;backdrop-filter:blur(20px);}
.modal-header{border-bottom:1px solid var(--tl-border)!important;padding:1.25rem 1.5rem!important;}
.modal-title{color:var(--tl-text-primary)!important;font-family:var(--tl-font-heading)!important;font-weight:700!important;}
.modal-body{color:var(--tl-text-primary)!important;padding:1.5rem!important;}
.modal-footer{border-top:1px solid var(--tl-border)!important;background:var(--tl-bg-surface-2)!important;}
.modal-backdrop.show{opacity:.7;background:var(--tl-bg-primary);}
.table{color:var(--tl-text-primary)!important;border-color:var(--tl-border)!important;}
.table>:not(caption)>*>*{background-color:transparent!important;border-bottom-color:var(--tl-border)!important;color:var(--tl-text-primary)!important;padding:.875rem 1rem!important;}
.table thead th{background:var(--tl-bg-surface-2)!important;color:var(--tl-text-secondary)!important;font-weight:600!important;text-transform:uppercase!important;font-size:.75rem!important;letter-spacing:.05em!important;border-bottom:1px solid var(--tl-border-strong)!important;}
.table tbody tr:hover{background:var(--tl-bg-surface-2)!important;}
.badge{padding:.375rem .75rem!important;border-radius:var(--tl-radius-sm)!important;font-weight:600!important;font-size:.75rem!important;}
.badge.bg-primary{background:var(--tl-primary)!important;color:#fff!important;}
.badge.bg-success{background:var(--tl-success)!important;color:#fff!important;}
.badge.bg-warning{background:var(--tl-warning)!important;color:var(--tl-bg-primary)!important;}
.badge.bg-danger{background:var(--tl-danger)!important;color:#fff!important;}
.badge.bg-secondary{background:var(--tl-bg-surface-2)!important;color:var(--tl-text-secondary)!important;}
.alert{border-radius:var(--tl-radius-md)!important;border:1px solid var(--tl-border-strong)!important;padding:1rem 1.25rem!important;}
.alert-primary{background:rgba(14,165,233,.1)!important;border-color:var(--tl-primary)!important;color:var(--tl-primary-light)!important;}
.alert-success{background:rgba(16,185,129,.1)!important;border-color:var(--tl-success)!important;color:var(--tl-success)!important;}
.alert-danger{background:rgba(239,68,68,.1)!important;border-color:var(--tl-danger)!important;color:var(--tl-danger)!important;}
.nav-tabs{border-bottom:1px solid var(--tl-border)!important;}
.nav-tabs .nav-link{color:var(--tl-text-secondary)!important;border:none!important;border-bottom:2px solid transparent!important;border-radius:0!important;padding:.75rem 1.25rem!important;font-weight:500!important;}
.nav-tabs .nav-link:hover{color:var(--tl-text-primary)!important;border-bottom-color:var(--tl-border-strong)!important;}
.nav-tabs .nav-link.active{color:var(--tl-primary-light)!important;background:transparent!important;border-bottom-color:var(--tl-primary)!important;}
.nav-pills .nav-link{color:var(--tl-text-secondary)!important;background:var(--tl-bg-surface-2)!important;border-radius:var(--tl-radius-md)!important;margin:0 4px!important;}
.nav-pills .nav-link.active{background:var(--tl-gradient-primary)!important;color:#fff!important;}
.dropdown-menu{background:var(--tl-bg-surface)!important;border:1px solid var(--tl-border-strong)!important;border-radius:var(--tl-radius-md)!important;box-shadow:var(--tl-shadow-lg)!important;padding:.5rem!important;}
.dropdown-item{color:var(--tl-text-primary)!important;border-radius:var(--tl-radius-sm)!important;padding:.5rem .875rem!important;transition:all .15s!important;}
.dropdown-item:hover,.dropdown-item:focus{background:var(--tl-bg-surface-2)!important;color:var(--tl-primary-light)!important;}
.dropdown-divider{border-color:var(--tl-border)!important;}
.dropdown-header{color:var(--tl-text-muted)!important;text-transform:uppercase!important;font-size:.7rem!important;letter-spacing:.05em!important;}
.text-primary{color:var(--tl-primary-light)!important;}
.text-success{color:var(--tl-success)!important;}
.text-warning{color:var(--tl-warning)!important;}
.text-danger{color:var(--tl-danger)!important;}
.text-muted{color:var(--tl-text-muted)!important;}
.text-secondary{color:var(--tl-text-secondary)!important;}
.text-body{color:var(--tl-text-primary)!important;}
.text-light{color:var(--tl-text-primary)!important;}
.bg-primary{background:var(--tl-primary)!important;}
.bg-success{background:var(--tl-success)!important;}
.bg-warning{background:var(--tl-warning)!important;}
.bg-danger{background:var(--tl-danger)!important;}
.bg-secondary{background:var(--tl-bg-surface-2)!important;}
.bg-dark{background:var(--tl-bg-primary)!important;}
.bg-light{background:var(--tl-bg-surface)!important;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--tl-bg-primary);}
::-webkit-scrollbar-thumb{background:var(--tl-bg-surface-2);border-radius:5px;border:2px solid var(--tl-bg-primary);}
::-webkit-scrollbar-thumb:hover{background:var(--tl-primary-dark);}
@keyframes tl-glow-pulse{0%,100%{box-shadow:0 0 20px var(--tl-primary-glow);}50%{box-shadow:0 0 40px var(--tl-primary-glow);}}
@keyframes tl-float-up{0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-30px);opacity:0;}}
@keyframes tl-shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
@keyframes tl-fade-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.tl-animate-fade-in{animation:tl-fade-in .4s ease-out;}
.tl-glow{animation:tl-glow-pulse 2s ease-in-out infinite;}
.tl-glass-card{background:rgba(26,32,53,.6)!important;backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--tl-border-strong)!important;border-radius:var(--tl-radius-xl)!important;box-shadow:var(--tl-shadow-md)!important;position:relative;overflow:hidden;}
.tl-glass-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--tl-primary),transparent);opacity:.5;}
.tl-text-gradient{background:var(--tl-gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;}
.tl-stat-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--tl-bg-surface-2);border:1px solid var(--tl-border-strong);border-radius:999px;font-family:var(--tl-font-mono);font-weight:600;color:var(--tl-primary-light);box-shadow:0 4px 16px var(--tl-primary-glow);}
.tl-btn-glow{background:var(--tl-gradient-primary)!important;color:#fff!important;border:none!important;box-shadow:0 4px 24px var(--tl-primary-glow)!important;transition:all .3s!important;}
.tl-btn-glow:hover{transform:translateY(-2px);box-shadow:0 8px 32px var(--tl-primary-glow)!important;}
.tl-hero{background:var(--tl-gradient-glow),var(--tl-bg-surface);border-radius:var(--tl-radius-xl);padding:3rem 2rem;position:relative;overflow:hidden;border:1px solid var(--tl-border);}
.tl-hero::after{content:'';position:absolute;top:-50%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,var(--tl-primary-glow) 0%,transparent 70%);pointer-events:none;}
.tl-stat-card{background:var(--tl-bg-surface)!important;border:1px solid var(--tl-border)!important;border-radius:var(--tl-radius-lg)!important;padding:1.5rem!important;transition:all .3s!important;position:relative;overflow:hidden;}
.tl-stat-card:hover{border-color:var(--tl-primary)!important;transform:translateY(-2px);box-shadow:var(--tl-shadow-md)!important;}
.tl-stat-card .tl-stat-icon{width:48px;height:48px;border-radius:var(--tl-radius-md);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:1rem;}
.tl-stat-card .tl-stat-value{font-family:var(--tl-font-heading);font-size:1.75rem;font-weight:700;color:var(--tl-text-primary);line-height:1.2;}
.tl-stat-card .tl-stat-label{color:var(--tl-text-muted);font-size:.875rem;font-weight:500;margin-top:.25rem;}
.progress{background:var(--tl-bg-surface-2)!important;border-radius:999px!important;height:8px!important;overflow:hidden!important;}
.progress-bar{background:var(--tl-gradient-primary)!important;border-radius:999px!important;transition:width .6s cubic-bezier(.4,0,.2,1)!important;}
.avatar{background:var(--tl-bg-surface-2)!important;border:2px solid var(--tl-border-strong)!important;}
.avatar img{border-radius:50%;}
.divider{border-color:var(--tl-border)!important;}
.footer{background:var(--tl-bg-surface)!important;border-top:1px solid var(--tl-border)!important;color:var(--tl-text-secondary)!important;padding:1.5rem 0!important;}
.footer a{color:var(--tl-text-secondary)!important;text-decoration:none;transition:color .2s;}
.footer a:hover{color:var(--tl-primary-light)!important;}
[wire\:loading]{display:inline-block;background:var(--tl-primary)!important;color:#fff!important;padding:2px 8px;border-radius:4px;font-size:.75rem;font-weight:500;}
[wire\:loading\.inline]{display:inline-block;}
[wire\:offline]{background:var(--tl-danger)!important;color:#fff!important;padding:8px 16px;border-radius:8px;position:fixed;bottom:20px;right:20px;z-index:9999;}
.pagination{gap:4px;}
.page-item .page-link{background:var(--tl-bg-surface-2)!important;border:1px solid var(--tl-border)!important;color:var(--tl-text-secondary)!important;border-radius:var(--tl-radius-sm)!important;padding:.5rem .875rem!important;margin:0 2px!important;}
.page-item .page-link:hover{background:var(--tl-bg-elevated)!important;color:var(--tl-primary-light)!important;border-color:var(--tl-primary)!important;}
.page-item.active .page-link{background:var(--tl-gradient-primary)!important;color:#fff!important;border:none!important;}
.page-item.disabled .page-link{background:var(--tl-bg-surface)!important;color:var(--tl-text-muted)!important;}
.accordion-item{background:var(--tl-bg-surface)!important;border:1px solid var(--tl-border)!important;border-radius:var(--tl-radius-md)!important;margin-bottom:.5rem!important;overflow:hidden;}
.accordion-button{background:var(--tl-bg-surface)!important;color:var(--tl-text-primary)!important;font-weight:500!important;padding:1rem 1.25rem!important;}
.accordion-button:not(.collapsed){background:var(--tl-bg-surface-2)!important;color:var(--tl-primary-light)!important;box-shadow:none!important;}
.accordion-button:focus{box-shadow:0 0 0 4px var(--tl-primary-glow)!important;border-color:var(--tl-primary)!important;}
.accordion-body{color:var(--tl-text-secondary)!important;padding:1rem 1.25rem!important;}
.toast-container{z-index:9999!important;}
.toast{background:var(--tl-bg-surface)!important;border:1px solid var(--tl-border-strong)!important;color:var(--tl-text-primary)!important;border-radius:var(--tl-radius-md)!important;box-shadow:var(--tl-shadow-lg)!important;backdrop-filter:blur(20px);}
@media (max-width:768px){.tl-hero{padding:2rem 1rem;}.tl-stat-card .tl-stat-value{font-size:1.25rem;}.container-p-y{padding-top:1rem!important;padding-bottom:1rem!important;}}
::selection{background:var(--tl-primary)!important;color:#fff!important;}
a{color:var(--tl-primary-light);text-decoration:none;transition:color .2s;}
a:hover{color:var(--tl-primary);}
hr{border-color:var(--tl-border)!important;opacity:.5;}
code,pre{background:var(--tl-bg-surface-2)!important;color:var(--tl-primary-light)!important;border-radius:var(--tl-radius-sm)!important;padding:.25rem .5rem!important;font-family:var(--tl-font-mono)!important;}
.toaster-hub,[x-data*="toaster"]{z-index:99999!important;}