/* ============================================================
   GadgetCity Todo — Base / Reset / Typography
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--color-gray-800);background-color:var(--color-gray-50);min-height:100vh;overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--color-primary-dark)}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit;font-size:inherit;border:none;background:none;outline:none}
input,select,textarea{font-family:inherit;font-size:inherit;border:none;outline:none;background:none}
table{border-collapse:collapse;width:100%}

h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--color-gray-900)}
h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}
h4{font-size:var(--font-size-lg)}h5{font-size:var(--font-size-md)}h6{font-size:var(--font-size-base)}
p{color:var(--color-gray-600);line-height:var(--line-height-relaxed)}
small{font-size:var(--font-size-xs);color:var(--color-gray-500)}
strong{font-weight:var(--font-weight-semibold)}

::selection{background-color:var(--color-primary-200);color:var(--color-primary-900)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}

/* Remove mobile tap highlight flash */
button, a, input, select, textarea, .task-card, .task-row, .recent-task-item, .due-today-item, .dropdown-item, .user-section-header, .quick-status-select, .nav-item {
  -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--color-gray-400)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--color-gray-500)}.text-small{font-size:var(--font-size-sm)}
.hidden{display:none !important}.flex{display:flex}.grid{display:grid}.block{display:block}
.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}
.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}
.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}
.w-full{width:100%}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.animate-fade-in{animation:fadeIn var(--transition-slow) ease-out}
.animate-fade-in-up{animation:fadeInUp var(--transition-slow) ease-out}
.animate-slide-up{animation:slideUp var(--transition-slow) ease-out}
.animate-scale-in{animation:scaleIn var(--transition-base) ease-out}