/* Cerano Design System – sdílené UI styly */

/* Gradient header */
.todo-list-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:2rem 0;margin:-2rem -15px 2rem -15px;position:relative;overflow:hidden}
.todo-list-header::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="white" opacity="0.1"/><circle cx="80" cy="40" r="1" fill="white" opacity="0.1"/><circle cx="40" cy="80" r="1.5" fill="white" opacity="0.1"/></svg>');animation:ceranoFloat 20s infinite linear}
@keyframes ceranoFloat{0%{transform:translateX(-100px)}100%{transform:translateX(calc(100vw + 100px))}}
.todo-list-header .container-fluid{position:relative;z-index:1}
.header-icon-wrapper{width:65px;height:65px;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.2);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,.1)}
.btn-white{background:#fff;color:#495057;border:none;font-weight:500}
.btn-white-gradient{background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.85) 100%);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}
.btn-white:hover,.btn-white-gradient:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.15)}

/* Stats cards */
.stats-row{margin-top:-3rem;position:relative;z-index:10}
.stats-card{background:#fff!important;border-radius:16px;padding:1.5rem;box-shadow:0 4px 15px rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;transition:all .3s ease;border:1px solid rgba(0,0,0,.05);position:relative;overflow:hidden}
.stats-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent 0%,rgba(102,126,234,.5) 50%,transparent 100%);opacity:0;transition:opacity .3s ease}
.stats-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 15px 40px rgba(0,0,0,.15)}
.stats-card:hover::before{opacity:1}
.stats-icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:.75rem;box-shadow:0 3px 10px rgba(0,0,0,.1);color:#fff;transition:transform .3s ease}
.stats-card:hover .stats-icon{transform:scale(1.1) rotate(5deg)}
.stats-card-primary .stats-icon{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
.stats-card-success .stats-icon{background:linear-gradient(135deg,#27ae60 0%,#2ecc71 100%)}
.stats-card-warning .stats-icon{background:linear-gradient(135deg,#f39c12 0%,#f1c40f 100%)}
.stats-card-danger .stats-icon{background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%)}
.stats-value{font-size:1.75rem;font-weight:700;line-height:1;color:#2c3e50!important;margin-bottom:.25rem}
.stats-label{color:#6c757d!important;font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.stats-content{display:flex;flex-direction:column;align-items:center;text-align:center}

/* Table cards */
.card{border-radius:14px;border:1px solid rgba(0,0,0,.05);box-shadow:0 2px 10px rgba(0,0,0,.04)}
.card-header{background:#fff;border-bottom:1px solid #f1f3f5}
.table-card .card-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none}
.table-card .card-header .btn{border:none}
.table-card .card-header .btn:hover{background:rgba(255,255,255,.9)}
.modern-table .table-head th{background:#fff;position:sticky;top:0;z-index:5;border-bottom:1px solid #e9ecef}
.modern-table{overflow-y:auto}
.modern-table table tbody tr{transition:background-color .15s ease,transform .15s ease}
.modern-table table tbody tr:hover{background-color:#f8f9fa;transform:translateX(2px)}
.modern-table table td,.modern-table table th{padding:.9rem 1rem}
.modern-table .badge{border-radius:999px;padding:.35rem .65rem;font-weight:600}

/* Live indicator */
#liveIndicator i{animation:ceranoPulse 2s infinite}
@keyframes ceranoPulse{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}

/* Responsive */
@media (max-width:768px){
  .todo-list-header{margin:-1rem -15px 1rem -15px;padding:1.5rem 0}
  .header-icon-wrapper{width:50px;height:50px;font-size:20px}
  .stats-row{margin-top:-2rem}
  .stats-card{padding:1.25rem;min-height:120px}
}