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

:root {
    --primary:#0F5A71;--primary-light:#1a7a96;--primary-dark:#0a3f50;
    --primary-ghost:rgba(15,90,113,0.08);--primary-ghost2:rgba(15,90,113,0.15);
    --bg:#FCFCFD;--bg-card:#fff;
    --bg-sidebar:#0b1e27;--bg-sidebar-hover:rgba(255,255,255,0.08);--bg-sidebar-active:rgba(255,255,255,0.14);
    --text:#1a2b33;--text-muted:#6b7f8a;--text-light:#94a3ab;
    --text-sidebar:rgba(255,255,255,0.7);--text-sidebar-active:#fff;
    --border:#e8ecef;--border-light:#f0f3f5;
    --success:#0d9467;--success-bg:rgba(13,148,103,0.1);
    --danger:#d63b4b;--danger-bg:rgba(214,59,75,0.1);
    --warning:#e5920a;--warning-bg:rgba(229,146,10,0.1);
    --info:#0F5A71;--info-bg:rgba(15,90,113,0.1);
    --shadow-sm:0 1px 3px rgba(0,0,0,0.04);--shadow:0 2px 8px rgba(0,0,0,0.06);--shadow-lg:0 8px 30px rgba(0,0,0,0.08);
    --radius:10px;--radius-lg:14px;--radius-sm:6px;
    --sidebar-w:260px;
    --transition:0.2s cubic-bezier(0.4,0,0.2,1);
}

/* === RESET & BASE === */
*,*::before,*::after { box-sizing:border-box;margin:0;padding:0 }
html { overflow-x:hidden;-webkit-text-size-adjust:100%;scroll-behavior:smooth }
body { font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-width:0;width:100% }
h1,h2,h3,h4 { font-family:'Poppins',sans-serif;font-weight:600;color:var(--text) }
a { color:var(--primary);text-decoration:none;transition:var(--transition) }
a:hover { color:var(--primary-light) }
img { max-width:100%;height:auto }

/* === LAYOUT === */
.layout { display:flex;min-height:100vh;width:100%;overflow-x:hidden }
.sidebar { width:var(--sidebar-w);background:var(--bg-sidebar);position:fixed;top:0;left:0;bottom:0;z-index:100;display:flex;flex-direction:column;transition:transform 0.3s ease;overflow-y:auto }
.main-content { margin-left:var(--sidebar-w);flex:1;padding:32px 40px;min-height:100vh;min-width:0;width:calc(100% - var(--sidebar-w));overflow-x:hidden }

/* === SIDEBAR === */
.sidebar-brand { padding:24px 20px 20px;border-bottom:1px solid rgba(255,255,255,0.06) }
.sidebar-brand img { height:32px;width:auto;display:block }
.sidebar-nav { flex:1;padding:16px 12px;overflow-y:auto;-webkit-overflow-scrolling:touch }
.nav-section { margin-bottom:24px }
.nav-section-title { font-size:10px;font-weight:600;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:2px;padding:0 12px;margin-bottom:8px }
.nav-item { display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:var(--text-sidebar);font-size:13px;font-weight:400;transition:var(--transition);cursor:pointer;text-decoration:none }
.nav-item:hover { background:var(--bg-sidebar-hover);color:var(--text-sidebar-active) }
.nav-item.active { background:var(--bg-sidebar-active);color:var(--text-sidebar-active);font-weight:500 }
.nav-item svg { width:18px;height:18px;opacity:0.6;flex-shrink:0 }
.nav-item.active svg { opacity:1 }
.sidebar-footer { padding:16px 12px;border-top:1px solid rgba(255,255,255,0.06) }
.sidebar-user { display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px }
.sidebar-user .avatar { width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0 }
.sidebar-user .info { flex:1;min-width:0 }
.sidebar-user .info .name { color:#fff;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.sidebar-user .info .role { color:rgba(255,255,255,0.4);font-size:11px;text-transform:capitalize }

/* === PAGE HEADER === */
.page-header { margin-bottom:28px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px }
.page-header h1 { font-size:28px;line-height:1.2 }
.page-header .subtitle { color:var(--text-muted);font-size:14px;margin-top:4px }
.page-actions { display:flex;gap:10px;flex-wrap:wrap }

/* === CARDS === */
.card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);transition:var(--transition);overflow:hidden;width:100% }
.card:hover { box-shadow:var(--shadow) }
.card-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:8px }
.card-header h3 { font-size:18px }

/* === STAT CARDS === */
.stats-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:28px }
.stat-card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden }
.stat-card::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary) }
.stat-card.income::before { background:var(--success) }
.stat-card.outcome::before { background:var(--danger) }
.stat-card.debt::before { background:var(--warning) }
.stat-card.cashier::before { background:#6366f1 }
.stat-card .stat-label { font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-weight:500 }
.stat-card .stat-value { font-family:'Poppins',sans-serif;font-size:28px;font-weight:700;color:var(--text);margin-top:6px;word-break:break-word }
.stat-card .stat-sub { font-size:12px;color:var(--text-muted);margin-top:4px }
.stat-value.positive { color:var(--success) }
.stat-value.negative { color:var(--danger) }

/* === BUTTONS === */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;border-radius:var(--radius-sm);font-family:'Poppins',sans-serif;font-size:13px;font-weight:500;border:none;cursor:pointer;transition:var(--transition);text-decoration:none;white-space:nowrap }
.btn svg { width:16px;height:16px }
.btn-primary { background:var(--primary);color:#fff }
.btn-primary:hover { background:var(--primary-light);color:#fff }
.btn-success { background:var(--success);color:#fff }
.btn-danger { background:var(--danger);color:#fff }
.btn-outline { background:transparent;border:1px solid var(--border);color:var(--text) }
.btn-outline:hover { border-color:var(--primary);color:var(--primary) }
.btn-ghost { background:var(--primary-ghost);color:var(--primary) }
.btn-ghost:hover { background:var(--primary-ghost2) }
.btn-sm { padding:6px 12px;font-size:12px }
.btn-xs { padding:4px 8px;font-size:11px;border-radius:4px }

/* === FORMS === */
.form-group { margin-bottom:18px }
.form-group label { display:block;font-size:12px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px }
.form-control { width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:'Poppins',sans-serif;font-size:13px;color:var(--text);background:var(--bg);transition:var(--transition) }
.form-control:focus { outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,90,113,0.1) }
select.form-control { appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7f8a' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px }
textarea.form-control { resize:vertical;min-height:80px }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:16px }

/* === TABLES === */
.table-wrap { overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;width:100% }
table { width:100%;border-collapse:collapse;min-width:0 }
table th { text-align:left;padding:10px 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);border-bottom:2px solid var(--border) }
table td { padding:12px 14px;border-bottom:1px solid var(--border-light);font-size:13px;vertical-align:middle }
table tr:hover td { background:var(--primary-ghost) }
table .amount { font-weight:600;font-variant-numeric:tabular-nums }
table .amount.income { color:var(--success) }
.amount.outcome { color:var(--danger) }

/* === BADGES === */
.badge { display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500 }
.badge-success { background:var(--success-bg);color:var(--success) }
.badge-danger { background:var(--danger-bg);color:var(--danger) }
.badge-warning { background:var(--warning-bg);color:var(--warning) }
.badge-info { background:var(--info-bg);color:var(--info) }
.badge-neutral { background:var(--primary-ghost);color:var(--text-muted) }

/* === MODALS === */
.modal-overlay { position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);z-index:1000;display:none;align-items:center;justify-content:center;padding:16px }
.modal-overlay.active { display:flex }
.modal { background:var(--bg-card);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);padding:28px;-webkit-overflow-scrolling:touch }
.modal-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:24px }
.modal-header h3 { font-size:20px }
.modal-close { background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:20px;padding:4px }
.modal-footer { display:flex;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid var(--border) }

/* === FLASH === */
.flash { padding:12px 18px;border-radius:var(--radius-sm);margin-bottom:20px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:10px }
.flash-success { background:var(--success-bg);color:var(--success);border:1px solid rgba(13,148,103,0.2) }
.flash-error { background:var(--danger-bg);color:var(--danger);border:1px solid rgba(214,59,75,0.2) }

/* === TASKS === */
.task-columns { display:grid;grid-template-columns:repeat(4,1fr);gap:16px }
.task-column { background:var(--bg);border-radius:var(--radius);padding:16px;min-height:200px }
.task-column-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:14px }
.task-column-header h4 { font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted) }
.task-column-header .count { background:var(--primary-ghost);color:var(--primary);padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600 }
.task-card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;margin-bottom:10px;cursor:pointer;transition:var(--transition) }
.task-card:hover { box-shadow:var(--shadow);border-color:var(--primary) }
.task-card .task-title { font-size:13px;font-weight:500;margin-bottom:8px;word-break:break-word }
.task-card .task-meta { display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-muted);gap:4px;flex-wrap:wrap }
.priority-dot { width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:4px;flex-shrink:0 }
.priority-dot.urgent { background:var(--danger) }
.priority-dot.high { background:var(--warning) }
.priority-dot.medium { background:var(--primary) }
.priority-dot.low { background:var(--text-light) }

/* === TEACHERS === */
.teacher-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px }
.teacher-card { padding:20px }
.teacher-card .teacher-header { display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap }
.teacher-card .teacher-avatar { width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;flex-shrink:0 }
.teacher-card .teacher-info { flex:1;min-width:0 }
.teacher-card .teacher-info h4 { font-size:16px;margin-bottom:2px;word-break:break-word }
.teacher-card .teacher-info .spec { font-size:12px;color:var(--text-muted) }
.teacher-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:14px;border-top:1px solid var(--border-light) }
.teacher-stat { text-align:center }
.teacher-stat .val { font-family:'Poppins',sans-serif;font-size:20px;font-weight:700;color:var(--primary);word-break:break-word }
.teacher-stat .lbl { font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px }

/* === LOGIN === */
.login-page { min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 50%,var(--primary-light) 100%);overflow:hidden;position:relative;padding:16px }
.login-page::before { content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,0.05) 0%,transparent 60%) }
.login-box { background:var(--bg-card);border-radius:var(--radius-lg);padding:48px 40px;width:100%;max-width:420px;box-shadow:0 24px 80px rgba(0,0,0,0.2);position:relative;z-index:1 }
.login-box .brand { text-align:center;margin-bottom:36px }
.login-box .brand img { height:40px;width:auto;display:inline-block;margin-bottom:8px;filter:brightness(0) saturate(100%) invert(24%) sepia(60%) saturate(700%) hue-rotate(165deg) brightness(1.2) }
.login-box .btn-primary { width:100%;justify-content:center;padding:12px;font-size:14px;margin-top:8px }

/* === MISC === */
.empty-state { text-align:center;padding:48px 24px;color:var(--text-muted) }
.empty-state h4 { font-size:16px;margin-bottom:6px;color:var(--text) }
.empty-state p { font-size:13px;margin-bottom:18px }
.filter-bar { display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;align-items:center }
.filter-bar .form-control { width:auto;min-width:160px }
.debt-card { border-left:3px solid var(--warning) }
.debt-card .partner-name { font-weight:600;font-size:15px }
.debt-card .debt-amount { font-family:'Poppins',sans-serif;font-size:24px;font-weight:700;color:var(--warning) }
.comment-list { max-height:400px;overflow-y:auto;-webkit-overflow-scrolling:touch }
.comment-item { padding:14px 0;border-bottom:1px solid var(--border-light) }
.comment-item:last-child { border-bottom:none }
.comment-item .comment-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;flex-wrap:wrap;gap:4px }
.comment-item .comment-author { font-weight:500;font-size:13px }
.comment-item .comment-date { font-size:11px;color:var(--text-muted) }
.comment-item .comment-body { font-size:13px;color:var(--text);line-height:1.5;word-break:break-word }
.comment-item .admin-tag { background:var(--danger-bg);color:var(--danger);font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;margin-left:6px }
.delete-btn { background:none;border:none;color:var(--danger);cursor:pointer;padding:4px 6px;border-radius:4px;font-size:14px;opacity:0.5;transition:0.2s }
.delete-btn:hover { opacity:1;background:var(--danger-bg) }
.source-tag { display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:500;background:rgba(99,102,241,0.1);color:#6366f1;white-space:nowrap }
.grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:20px }
.grid-auto { display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px }

/* === HAMBURGER MENU === */
.menu-toggle { display:none;position:fixed;top:16px;left:16px;z-index:201;background:var(--primary);color:#fff;border:none;border-radius:8px;width:40px;height:40px;cursor:pointer;align-items:center;justify-content:center;font-size:18px }

/* === SIDEBAR OVERLAY (mobile) === */
.sidebar-backdrop { display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:99 }

/* ============================================================
   TABLET (max-width: 1024px)
   ============================================================ */
@media (max-width:1024px) {
    .menu-toggle { display:flex }
    .sidebar { transform:translateX(-100%);z-index:200 }
    .sidebar.open { transform:translateX(0) }
    .sidebar.open + .sidebar-backdrop,
    .sidebar.open ~ .sidebar-backdrop { display:block }
    
    .main-content { margin-left:0;padding:20px 16px;padding-top:64px;width:100%;max-width:100vw }
    
    .task-columns { grid-template-columns:repeat(2,1fr) }
    .form-row { grid-template-columns:1fr }
    .stats-grid { grid-template-columns:repeat(2,1fr) }
    .grid-2 { grid-template-columns:1fr 1fr }
    
    .page-header { flex-direction:column;gap:12px }
    .page-header h1 { font-size:24px }
    .page-actions { width:100% }
    
    .modal { width:95%;max-width:none;margin:10px auto;padding:22px }
    .card { padding:18px }
    
    table th,table td { padding:8px 10px;font-size:12px }
}

/* ============================================================
   MOBILE (max-width: 640px) — FULL REWRITE
   ============================================================ */
@media (max-width:640px) {
    /* Layout */
    .main-content { padding:12px;padding-top:60px;width:100% }
    
    /* Page header */
    .page-header { margin-bottom:20px;gap:10px }
    .page-header h1 { font-size:20px }
    .page-header .subtitle { font-size:12px }
    .page-actions { width:100%;flex-direction:column }
    .page-actions .btn { width:100%;justify-content:center }
    
    /* Stat cards */
    .stats-grid { grid-template-columns:1fr!important;gap:10px;margin-bottom:20px }
    .stat-card { padding:14px 16px }
    .stat-card .stat-value { font-size:22px }
    .stat-card .stat-label { font-size:10px }
    .stat-card .stat-sub { font-size:11px }
    
    /* Cards */
    .card { padding:14px;border-radius:10px }
    .card-header { flex-direction:column;gap:8px;align-items:flex-start }
    
    /* Grids → single column */
    .grid-2 { grid-template-columns:1fr!important;gap:14px }
    .grid-auto { grid-template-columns:1fr!important;gap:10px }
    .task-columns { grid-template-columns:1fr!important;gap:12px }
    .teacher-grid { grid-template-columns:1fr!important;gap:12px }
    
    /* Override ALL inline grids */
    [style*="grid-template-columns"] { grid-template-columns:1fr!important }
    [style*="display:grid"] { grid-template-columns:1fr!important }
    
    /* Flex wrapping for inline flex */
    [style*="display:flex"] { flex-wrap:wrap!important }
    
    /* Filter bar */
    .filter-bar { flex-direction:column;gap:8px }
    .filter-bar .form-control { width:100%!important;min-width:unset!important }
    
    /* Forms */
    .form-row { grid-template-columns:1fr!important;gap:0 }
    .form-control { font-size:16px!important;padding:12px 14px;min-height:48px }
    select.form-control { font-size:16px!important;min-height:48px }
    textarea.form-control { font-size:16px!important }
    .form-group { margin-bottom:14px }
    
    /* Buttons */
    .btn { padding:11px 18px;font-size:14px;min-height:44px;width:auto }
    .btn-sm { padding:9px 14px;font-size:13px;min-height:40px }
    .btn-xs { padding:6px 10px;font-size:12px;min-height:34px }
    
    /* Modals */
    .modal-overlay { padding:8px;align-items:flex-end }
    .modal { padding:18px;width:100%;max-width:100%;border-radius:16px 16px 0 0;max-height:92vh;margin:0 }
    .modal-header { margin-bottom:18px }
    .modal-header h3 { font-size:17px }
    .modal-footer { flex-direction:column;gap:8px }
    .modal-footer .btn { width:100% }
    
    /* Tables */
    .table-wrap { margin:0 -14px;padding:0 14px;overflow-x:auto;-webkit-overflow-scrolling:touch }
    table { font-size:12px;min-width:480px }
    table th { font-size:10px;padding:8px;white-space:nowrap }
    table td { padding:8px;font-size:12px;white-space:nowrap }
    table td:nth-child(4),table td:nth-child(3) { white-space:normal;word-break:break-word;max-width:120px }
    
    /* Sidebar mobile */
    .sidebar { width:280px }
    .sidebar-brand { padding:20px 18px 16px }
    .sidebar-brand img { height:26px }
    .nav-item { padding:12px;font-size:14px;min-height:48px }
    .nav-section-title { font-size:10px;padding:0 12px }
    .sidebar-user .info .name { font-size:14px }
    
    /* Badges & tags */
    .badge { font-size:10px;padding:2px 8px }
    .source-tag { font-size:9px;padding:2px 6px }
    
    /* Teacher cards */
    .teacher-card { padding:16px }
    .teacher-card .teacher-header { gap:10px }
    .teacher-card .teacher-avatar { width:40px;height:40px;font-size:16px }
    .teacher-card .teacher-info h4 { font-size:14px }
    .teacher-stats { gap:4px }
    .teacher-stat .val { font-size:16px }
    .teacher-stat .lbl { font-size:9px }
    
    /* Task cards */
    .task-column { padding:12px;min-height:auto }
    .task-card { padding:12px }
    .task-card .task-title { font-size:13px }
    
    /* Comments */
    .comment-item { padding:10px 0 }
    .comment-list { max-height:300px }
    
    /* Partner debt cards */
    .debt-card .debt-amount { font-size:20px }
    
    /* Login */
    .login-page { padding:12px }
    .login-box { padding:28px 20px;margin:0;max-width:100% }
    .login-box .brand img { height:32px }
    .login-box .btn-primary { padding:14px;font-size:15px }
    
    /* Empty state */
    .empty-state { padding:24px 12px }
    
    /* Delete buttons - bigger tap target */
    .delete-btn { min-width:38px;min-height:38px;font-size:16px;display:inline-flex;align-items:center;justify-content:center }
    
    /* Details/summary (task edit) */
    details { font-size:13px }
    details summary { padding:8px 0 }
    
    /* Economics table footer summary */
    [style*="justify-content:flex-end"][style*="gap:24px"] { 
        flex-direction:column!important;
        gap:4px!important;
        align-items:flex-start!important;
    }
    
    /* Quick filter buttons row */
    [style*="gap:6px"][style*="flex-wrap:wrap"] .btn-sm {
        flex:1 1 auto;
        min-width:0;
        font-size:11px!important;
        padding:6px 8px!important;
        min-height:36px!important;
        text-align:center;
    }
    
    /* Economics filter form */
    form[method="GET"][style*="display:flex"] {
        flex-direction:column!important;
    }
    form[method="GET"][style*="display:flex"] > div {
        width:100%;
    }
    form[method="GET"][style*="display:flex"] input[type="date"],
    form[method="GET"][style*="display:flex"] select {
        width:100%!important;
    }
    
    /* Admin user table actions */
    td[style*="display:flex"] { flex-wrap:wrap!important;gap:4px!important }
    
    /* Inline form flex on mobile (note add, file upload) */
    form[style*="display:flex"][style*="gap:8px"] {
        flex-direction:column!important;
    }
    form[style*="display:flex"][style*="gap:8px"] .form-control {
        width:100%!important;
    }
    form[style*="display:flex"][style*="gap:8px"] .btn {
        width:100%;
    }
    
    /* Team member add form */
    form[style*="display:flex"][style*="gap:8px"] select[style*="width:auto"] {
        width:100%!important;
    }
}

/* ============================================================
   SMALL PHONES (max-width: 380px)
   ============================================================ */
@media (max-width:380px) {
    .main-content { padding:10px;padding-top:56px }
    .stat-card .stat-value { font-size:20px }
    .page-header h1 { font-size:18px }
    .teacher-stat .val { font-size:14px }
    .modal { padding:14px }
    table { min-width:400px }
    .sidebar { width:260px }
}

/* ============================================================
   TOUCH DEVICES
   ============================================================ */
@media (pointer:coarse) {
    .btn { min-height:44px }
    .btn-sm { min-height:40px }
    .btn-xs { min-height:34px;padding:6px 10px }
    .nav-item { min-height:48px }
    .delete-btn { min-width:38px;min-height:38px;font-size:16px }
    .form-control { min-height:48px }
    select.form-control { min-height:48px }
}

/* === ANIMATIONS === */
@keyframes fadeIn { from { opacity:0;transform:translateY(8px) } to { opacity:1;transform:translateY(0) } }
.card,.stat-card,.task-card,.teacher-card { animation:fadeIn 0.3s ease }