.pwa-banner{position:fixed;left:50%;bottom:18px;z-index:1000;display:flex;align-items:center;gap:12px;max-width:min(92vw,560px);padding:12px 16px;border-radius:11px;background:#12233f;color:#fff;box-shadow:0 12px 35px #0f1d3666;opacity:0;pointer-events:none;transform:translate(-50%,20px);transition:.2s}.pwa-banner.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}.pwa-banner button{border:0;border-radius:7px;padding:7px 10px;background:#ffd500;color:#12233f;font-weight:800}.is-offline header::after{content:"Bağlantı yok";position:absolute;top:0;left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:0 0 8px 8px;background:#b42318;color:#fff;font-size:11px;font-weight:800}.install-pwa{white-space:nowrap}.mobile-move-lesson{display:none;margin-left:auto}.package-active-warning{color:#9b2833;font-weight:700}.mobile-action-dialog{width:min(560px,94vw)}
@media(max-width:900px){button,.nav,.student-list-item,.month-lesson-dot{min-height:44px}.day-slot .lesson{min-height:40px;height:auto;padding:7px 5px}.mobile-move-lesson{display:inline-flex;align-items:center}.schedule-detail-dialog .detail-head{gap:8px;flex-wrap:wrap}.filters select,.filters input,.filters button{min-height:44px}.month-lesson-dot{min-width:44px}.package-payment-grid{grid-template-columns:1fr 1fr}.header-actions{align-items:center}.header-actions .install-pwa{display:none}}
@media(max-width:720px){html,body{max-width:100%;overflow-x:hidden}main,.page,.card,.table-wrap{width:100%;max-width:100%;min-width:0}header{height:auto;min-height:86px;padding:12px 0;gap:8px}.header-actions{gap:6px;max-width:100%;flex-wrap:wrap}.header-actions .role-box{display:none}.header-actions .primary,.header-actions .secondary{min-width:44px;min-height:44px;padding:9px 10px;font-size:11px}.sidebar{display:flex;visibility:hidden;transform:translateX(-105%)}.sidebar.open{visibility:visible;transform:translateX(0)}.sidebar.open::after{pointer-events:none}.toolbar{padding:10px}.segmented,.week-nav,.period-nav{max-width:100%;overflow-x:auto}.period-nav button,.week-nav button,.mobile-menu,.notifications-button{min-width:44px;min-height:44px;flex:0 0 44px}.filters{display:grid;width:100%;grid-template-columns:1fr 1fr;overflow:visible}.filters>*{min-width:0;width:100%}.schedule-wrap,.student-history-table-wrap,.table-wrap{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}.schedule-detail-dialog,.mobile-action-dialog,dialog{width:100vw!important;max-width:none!important;height:100dvh;max-height:100dvh!important;margin:0;border-radius:0;overflow:auto}.modal-head{position:sticky;top:0;z-index:4;background:#fff}.modal-actions{position:sticky;bottom:0;z-index:4}.form-grid,.package-payment-grid{grid-template-columns:1fr!important;padding:16px}.package-payment-actions{flex-direction:column}.package-payment-actions button,.row-actions button{width:100%;min-height:44px}.row-actions{display:grid;grid-template-columns:1fr;min-width:160px}.dashboard-grid,.stats,.finance-stats,.teacher-grid{grid-template-columns:1fr}.page-tools{align-items:stretch;flex-wrap:wrap}.search{width:100%}.search input{width:calc(100% - 30px)}.month-grid{width:100%;min-width:0;grid-template-columns:repeat(7,minmax(40px,1fr))}.student-month-day{min-width:0;min-height:78px;padding:5px;overflow:hidden}.student-month-day strong,.student-month-day small{font-size:10px}.month-lesson-dot{min-width:0;width:100%;min-height:44px;padding:4px;font-size:10px;overflow:hidden;text-overflow:ellipsis}.toolbar,.page-tools{max-width:100%;overflow:hidden}.pwa-banner{bottom:10px}.pwa-banner span{font-size:12px}}
@media(min-width:721px) and (max-width:1180px) and (orientation:landscape){main{padding-inline:18px}.schedule-grid{min-width:1470px}.toolbar{flex-wrap:wrap}.filters{flex-basis:100%}.package-payment-grid{grid-template-columns:repeat(2,1fr)}}
@media(display-mode:standalone){body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.sidebar{padding-left:max(16px,env(safe-area-inset-left))}main{padding-right:max(14px,env(safe-area-inset-right))}}

@media(max-width:720px){.header-actions #notificationsButton{display:inline-grid!important;place-items:center;flex:0 0 42px}}
@media(max-width:720px){.student-history-summaries{grid-template-columns:1fr;padding:14px}.student-history-table-wrap{padding:0 14px 18px}.student-history-dialog .detail-head{position:sticky;top:0;z-index:5;background:#fff}}


/* iPhone/Android mobile header: safe-area, compact actions and accessible controls. */
.header-logo{display:none}
@media(max-width:720px){
  html{background:var(--bg)}
  body{padding-top:env(safe-area-inset-top,0px)}
  main{padding-top:0}
  header{
    height:auto;
    min-height:0;
    padding:12px 0 14px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:10px
  }
  header>div:first-child{width:100%;min-height:52px}
  #menuBtn{
    top:4px;
    left:0;
    width:44px;
    height:44px;
    font-size:24px;
    z-index:2
  }
  .header-logo{
    display:block;
    position:absolute;
    top:4px;
    left:52px;
    width:44px;
    height:44px;
    border-radius:12px;
    object-fit:cover;
    box-shadow:0 2px 10px #0f1d3624
  }
  header h1{
    margin-left:104px;
    padding-top:2px;
    font-size:22px;
    line-height:1.2
  }
  header p{
    margin:4px 0 0 104px;
    font-size:12px;
    line-height:1.3
  }
  .header-actions{
    width:100%;
    max-width:100%;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:8px;
    padding:0 0 2px 52px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  .header-actions::-webkit-scrollbar{display:none}
  .header-actions .primary,
  .header-actions .secondary,
  .header-actions .icon-btn{
    min-width:44px;
    min-height:44px;
    flex:0 0 auto
  }
  #accountPasswordButton,
  #logoutButton{
    white-space:nowrap;
    padding:10px 12px;
    font-size:12px
  }
  .sidebar{
    padding-top:calc(env(safe-area-inset-top,0px) + 18px);
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px)
  }
  .modal-head{
    min-height:64px;
    padding-top:calc(env(safe-area-inset-top,0px) + 14px);
    align-items:flex-start
  }
  .modal-head .close,
  .modal-head button[aria-label*="Kapat"],
  .modal-head button[aria-label*="kapat"]{
    width:44px;
    min-width:44px;
    height:44px;
    display:grid;
    place-items:center;
    padding:0;
    line-height:1;
    flex:0 0 44px
  }
}


/* Full-screen mobile dialogs: keep the X below the iPhone status area. */
@media(max-width:720px){
  .detail-head,
  .schedule-detail-dialog .detail-head{
    position:sticky;
    top:0;
    z-index:6;
    min-height:64px;
    padding-top:calc(env(safe-area-inset-top,0px) + 14px);
    padding-left:18px;
    padding-right:14px;
    background:#fff;
    align-items:flex-start
  }
  .detail-head .close,
  .schedule-detail-dialog .detail-head .close{
    width:44px;
    min-width:44px;
    height:44px;
    display:grid;
    place-items:center;
    padding:0;
    margin-top:0;
    font-size:28px;
    line-height:1;
    flex:0 0 44px
  }
}


/* Native-style mobile app bar: no clipped actions, clearer hierarchy. */
@media(max-width:720px){
  header{
    margin:10px 0 16px;
    padding:14px;
    gap:12px;
    border:1px solid #e7edf4;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px #12233f0d
  }
  header>div:first-child{min-height:48px}
  #menuBtn{
    top:2px;
    left:0;
    border:1px solid #e3eaf2;
    box-shadow:none;
    color:#078fe8;
    background:#f6f9fc
  }
  .header-logo{
    top:2px;
    left:52px;
    width:44px;
    height:44px
  }
  header h1{
    margin-left:106px;
    padding-top:1px;
    font-size:20px;
    line-height:1.2;
    white-space:normal
  }
  header p{
    margin-left:106px;
    color:#718096
  }
  .header-actions{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);
    width:100%;
    gap:8px;
    padding:0;
    overflow:visible
  }
  .header-actions #notificationsButton{
    grid-column:1;
    grid-row:1;
    display:grid!important;
    width:44px;
    background:#fff8d6;
    color:#8a6500;
    border:1px solid #f5df78;
    box-shadow:none
  }
  .header-actions #quickAdd{
    grid-column:2 / 4;
    grid-row:1;
    width:100%;
    background:var(--navy);
    color:#fff
  }
  .header-actions #accountPasswordButton{
    grid-column:1 / 3;
    grid-row:2;
    width:100%;
    background:#e5f5ff;
    color:#087bbd;
    border:1px solid #c5e9fb
  }
  .header-actions #logoutButton{
    grid-column:3;
    grid-row:2;
    width:100%;
    background:#fff0f1;
    color:#b42336;
    border:1px solid #ffd2d7
  }
  .header-actions .primary,
  .header-actions .secondary{
    min-height:46px;
    border-radius:12px;
    font-size:13px;
    font-weight:750;
    text-align:center;
    justify-content:center
  }
}


/* Mobile workspace pass: compact, practical layouts without changing application logic. */
@media(max-width:720px){
  body{-webkit-text-size-adjust:100%}
  main{padding-inline:12px}
  .page{padding-bottom:24px}
  .card{border-radius:15px}
  .card-head{padding:15px 16px;gap:10px;align-items:flex-start}
  .card-head h3{font-size:17px;line-height:1.25}
  .card-head p{font-size:12px;line-height:1.4}
  .page-tools{gap:8px;margin-bottom:12px}
  .page-tools .primary,.page-tools select{min-height:44px}
  .welcome{border-radius:15px;padding:19px 18px}
  .stats,.finance-stats{gap:10px;margin:12px 0}
  .stat{padding:15px}
  .dashboard-grid{gap:12px}

  /* Öğrenciler: desktop table becomes compact mobile cards. */
  #students .table-card{
    overflow:visible;
    background:transparent;
    box-shadow:none
  }
  #students table,
  #students tbody{
    display:block;
    width:100%;
    min-width:0;
    height:auto!important
  }
  #students thead{display:none}
  #students tbody{
    display:grid;
    gap:10px
  }
  #students tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    min-width:0;
    height:auto!important;
    min-height:0!important;
    overflow:hidden;
    border:1px solid #e3eaf2;
    border-radius:14px;
    background:#fff;
    box-shadow:0 5px 16px #12233f0b
  }
  #students td{
    display:block;
    min-width:0;
    height:auto!important;
    min-height:0!important;
    padding:10px 12px;
    border:0;
    color:#334155;
    font-size:13px;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere;
    vertical-align:top
  }
  #students td:first-child{
    grid-column:1 / -1;
    padding:13px 14px;
    border-bottom:1px solid #edf1f5;
    background:#f8fbfd
  }
  #students td[colspan]{grid-column:1 / -1;text-align:center;padding:22px}
  #students td:empty{display:none}
  #students .person{min-width:0;gap:10px}
  #students .person strong{font-size:15px;line-height:1.25;overflow-wrap:anywhere}
  #students .person-avatar{flex:0 0 40px;width:40px;height:40px}
  #students .badge{display:inline-flex;align-items:center;max-width:100%;white-space:normal}
  #students .row-actions{grid-template-columns:1fr;min-width:0;width:100%}
  #students .row-actions button{width:100%}

  /* Öğretmenler */
  #teachers .teacher-grid{gap:10px}
  #teachers .teacher-card{padding:16px}
  #teachers .teacher-metrics{gap:8px}

  /* Ödeme and package forms */
  #finance{display:none}
  #finance.page.active{display:block}
  #finance .package-payment-card,
  #finance .group-package-card{margin-bottom:12px}
  #finance .package-payment-grid{padding:14px;gap:12px}
  #finance .package-programs{padding-inline:0}
  #finance .package-payment-actions{padding:12px 14px;gap:8px}
  #finance .dashboard-grid{grid-template-columns:1fr}
  #finance .period-nav{width:100%;display:grid;grid-template-columns:44px 1fr 44px;align-items:end}
  #finance .period-nav label{min-width:0}
  #finance .period-nav input{width:100%}

  /* Earnings and finance reports */
  #earnings .earnings-toolbar,
  #finance-report .finance-report-toolbar{padding:15px;gap:12px}
  #earnings .period-nav,
  #finance-report .period-nav{
    width:100%;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
    align-items:end;
    overflow:visible
  }
  #earnings .period-nav label,
  #finance-report .period-nav label{min-width:0}
  #earnings .period-nav input,
  #finance-report .period-nav input{width:100%;min-width:0}
  #earnings .earnings-rule,
  #finance-report .earnings-rule{margin-block:10px;padding:14px;font-size:12px;line-height:1.5}
  #earnings .table-card,
  #finance-report .table-card{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
  #earnings .table-card table,
  #finance-report .table-card table{height:auto!important}
  #earnings .table-card tr,
  #finance-report .table-card tr,
  #earnings .table-card td,
  #finance-report .table-card td{height:auto!important;min-height:0!important}

  /* Settings */
  #settings .card{margin-bottom:12px}
  #settings .form-grid{padding:14px;gap:12px}
  #settings input,#settings select,#settings textarea{max-width:100%;min-height:44px}
  #settings .modal-actions{gap:8px;padding:12px 14px}
  #settings .modal-actions button{min-height:44px}

  /* Dialogs */
  dialog table{height:auto!important}
  dialog tr,dialog td{height:auto!important;min-height:0!important}
}


/* Compact mobile scale: mobile is a dedicated layout, not a shrunken desktop. */
@media(max-width:720px){
  body{font-size:13px}
  main{padding-inline:9px}
  header{margin:6px 0 10px;padding:10px;border-radius:14px;gap:8px}
  header>div:first-child{min-height:42px}
  #menuBtn{top:1px;width:40px;height:40px;min-height:40px;font-size:21px}
  .header-logo{top:1px;left:47px;width:40px;height:40px;border-radius:10px}
  header h1{margin-left:96px;font-size:17px;padding-top:1px}
  header p{margin-left:96px;font-size:10px;margin-top:2px}
  .header-actions{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr);gap:6px}
  .header-actions #notificationsButton{width:40px;min-width:40px;min-height:40px}
  .header-actions .primary,
  .header-actions .secondary{min-height:40px;padding:7px 9px;border-radius:10px;font-size:11px}
  #accountPasswordButton,#logoutButton{font-size:11px;padding:7px 8px}
  .page{padding-bottom:16px}
  .page h2{font-size:19px;line-height:1.2}
  .card{border-radius:12px}
  .card-head{padding:11px 12px}
  .card-head h3{font-size:14px}
  .card-head p{font-size:10px}
  .welcome{padding:14px;border-radius:12px}
  .welcome h2{font-size:18px}
  .welcome p{font-size:11px}
  .stats,.finance-stats,.dashboard-grid,.teacher-grid{gap:8px}
  .stat{padding:11px;gap:10px}
  .stat-icon{width:38px;height:38px;border-radius:9px;font-size:17px}
  .stat h3{font-size:18px}
  .stat p{font-size:10px}
  .lesson-list{padding:4px 12px}
  .lesson-row{grid-template-columns:55px 8px 1fr auto;gap:7px;padding:9px 0;font-size:11px}
  .room-tag{padding:4px 6px;font-size:9px}
  .page-tools{gap:6px;margin-bottom:8px}
  .page-tools .primary,.page-tools select{min-height:40px;padding:7px 9px;font-size:11px}
  .search{padding:7px 9px}
  .search input{font-size:12px}

  #students tbody{gap:7px}
  #students tr{border-radius:11px}
  #students td{padding:7px 9px;font-size:11px;line-height:1.25}
  #students td:first-child{padding:9px 10px}
  #students .person{gap:8px}
  #students .person strong{font-size:13px}
  #students .person-avatar{flex-basis:34px;width:34px;height:34px;border-radius:9px}
  #students .badge{font-size:9px;padding:4px 6px}

  #teachers .teacher-card{padding:12px}
  #teachers .teacher-top .person-avatar{width:40px;height:40px}
  #teachers .teacher-card h3{font-size:14px}
  #teachers .teacher-card p,#teachers .teacher-metrics small{font-size:10px}
  #teachers .teacher-metrics{margin-top:11px;padding-top:9px}

  #finance .package-payment-grid,
  #settings .form-grid{padding:10px;gap:9px}
  #finance label,#settings label{font-size:11px}
  #finance input,#finance select,
  #settings input,#settings select,#settings textarea{min-height:40px;padding:8px;font-size:12px}
  #finance .package-payment-actions,
  #settings .modal-actions{padding:9px 10px}
  #finance .package-payment-actions button,
  #settings .modal-actions button{min-height:40px;font-size:11px}

  #earnings .earnings-toolbar,
  #finance-report .finance-report-toolbar{padding:11px}
  #earnings .earnings-toolbar h2,
  #finance-report .finance-report-toolbar h2{font-size:17px}
  #earnings .earnings-rule,
  #finance-report .earnings-rule{padding:10px;font-size:10px;line-height:1.4}
  #earnings .earnings-teacher-list,
  #finance-report .finance-report-stats{font-size:11px}
  #earnings table,#finance-report table{font-size:11px}
  #earnings th,#finance-report th{padding:8px;font-size:9px}
  #earnings td,#finance-report td{padding:8px;font-size:10px}

  .form-grid{padding:11px;gap:10px}
  .form-grid input,.form-grid select{padding:8px;font-size:12px}
  .modal-head,.detail-head{padding-inline:14px}
  .modal-head h2,.detail-head h2{font-size:18px}
}


/* Compact mobile timetable: one day, four rooms, dense hourly rows. */
@media(max-width:720px){
  #schedule .schedule-wrap{
    margin-inline:0;
    padding:3px;
    border-radius:10px;
    overflow-x:hidden
  }
  #schedule .schedule-grid{
    width:100%;
    min-width:0;
    grid-template-columns:minmax(0,1fr);
    gap:7px
  }
  #schedule .day-sheet{width:100%;min-width:0;border-radius:7px;overflow:hidden}
  #schedule .day-table,
  #schedule .day-summary{
    grid-template-columns:31px repeat(4,minmax(0,1fr))
  }
  #schedule .day-sheet-head{min-height:31px;padding:4px 7px}
  #schedule .day-sheet-head strong{font-size:11px;line-height:1.1}
  #schedule .day-sheet-head span{font-size:8px;line-height:1.1}
  #schedule .day-column-head{
    min-height:31px;
    height:31px;
    padding:4px 1px;
    font-size:8px;
    line-height:1.05;
    overflow:hidden
  }
  #schedule .day-time{
    min-height:40px;
    height:40px;
    padding:5px 1px;
    font-size:8px;
    line-height:1.05;
    overflow:hidden
  }
  #schedule .day-time small{margin-top:2px;font-size:6px}
  #schedule .day-slot{
    min-height:40px;
    height:auto;
    padding:1px;
    overflow:visible
  }
  #schedule .day-slot .lesson{
    width:100%;
    height:38px;
    min-height:38px;
    max-height:38px;
    margin:0;
    padding:3px 2px;
    border-left-width:2px;
    border-radius:3px;
    font-size:8px;
    line-height:1.08;
    overflow:hidden
  }
  #schedule .lesson-summary{
    display:-webkit-box;
    max-height:32px;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    white-space:normal;
    overflow-wrap:anywhere;
    font-size:8px;
    line-height:1.08;
    font-weight:750
  }
  #schedule .day-slot .lesson-warning{font-size:8px}
  #schedule .summary-title{font-size:7px;padding:3px 1px}
  #schedule .room-summary{padding:3px 2px;gap:2px}
  #schedule .room-summary strong{font-size:8px}
  #schedule .room-summary span{font-size:7px}
  #schedule .schedule-side-arrow{
    width:30px;
    height:46px;
    border-radius:10px;
    font-size:22px;
    opacity:.88
  }
  #schedule .schedule-side-arrow-left{left:2px}
  #schedule .schedule-side-arrow-right{right:2px}
}


/* Full-day phone timetable: day/date and room headers stay visible. */
@media(max-width:720px){
  #schedule .day-sheet-head{
    position:sticky;
    top:0;
    z-index:12;
    min-height:56px;
    height:auto;
    padding:7px 8px;
    background:var(--navy);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    overflow:hidden
  }
  #schedule .day-sheet-head strong{
    display:block;
    margin:0;
    color:#fff!important;
    font-size:15px;
    line-height:1.2
  }
  #schedule .day-sheet-head span{
    display:block;
    position:static;
    margin:0;
    color:#fff!important;
    opacity:1;
    font-size:13px;
    line-height:1.2;
    font-weight:750
  }
  #schedule .day-column-head{
    position:sticky;
    top:56px;
    z-index:11;
    min-height:27px;
    height:27px;
    padding:3px 1px;
    background:#dce8f3;
    color:#20324e;
    font-size:7px;
    font-weight:800
  }
  /* Grow the whole hourly row so later lessons are not clipped by the first card. */
  #schedule .day-time,
  #schedule .day-slot{
    min-height:27px;
    height:auto;
    max-height:none
  }
  #schedule .day-time{
    padding:3px 1px;
    font-size:7px;
    font-weight:800
  }
  #schedule .day-time small{display:none}
  #schedule .day-slot{padding:1px}
  #schedule .day-slot .lesson{
    height:25px;
    min-height:25px;
    max-height:25px;
    padding:2px 2px;
    font-size:7px;
    line-height:1.02
  }
  #schedule .day-slot .lesson + .lesson{margin-top:2px}
  #schedule .lesson-summary{
    max-height:21px;
    -webkit-line-clamp:2;
    font-size:7px;
    line-height:1.02
  }
  #schedule .day-slot .lesson-warning{display:none}
  #schedule .empty-label{font-size:6px}
  #schedule .day-summary{display:none}
  #schedule .schedule-side-arrow{
    width:27px;
    height:40px;
    font-size:19px;
    border-radius:9px
  }
}


/* Compact touch actions for student and teacher cards. */
@media(max-width:720px){
  #students td:nth-child(6){grid-column:1 / -1;padding-top:6px;padding-bottom:6px}
  #students td:nth-child(7){
    grid-column:1 / -1;
    padding:7px;
    border-top:1px solid #edf1f5;
    background:#fbfcfe
  }
  #students .row-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
    width:100%;
    min-width:0
  }
  #students .row-actions button{
    width:100%;
    min-width:0;
    min-height:34px;
    height:auto;
    padding:5px 6px;
    border-radius:8px;
    font-size:9px;
    line-height:1.15;
    white-space:normal
  }
  #students .row-actions .student-lesson-history{
    grid-column:1 / -1
  }
  #students .row-actions .danger-action{font-weight:700}
  #teachers .teacher-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
    margin-top:9px
  }
  #teachers .teacher-actions button{
    width:100%;
    min-width:0;
    min-height:34px;
    padding:5px 6px;
    border-radius:8px;
    font-size:9px;
    line-height:1.15;
    white-space:normal
  }
}


/* High-contrast mobile buttons: every action must be visible and readable. */
@media(max-width:720px){
  button{font-weight:700}
  .primary{
    background:#12233f;
    color:#fff;
    border:1px solid #12233f;
    box-shadow:0 2px 6px #12233f22
  }
  .secondary{
    background:#dfeaf5;
    color:#17365f;
    border:1px solid #bdd0e3
  }
  .text-btn{
    background:#e0f4fa;
    color:#076f89;
    border:1px solid #b9e5ef;
    padding:7px 9px
  }
  .segmented button,.week-nav button,.period-nav button{
    color:#17365f;
    border:1px solid #c5d3e1;
    background:#e8eff6
  }
  .segmented button.active{
    color:#fff;
    background:#087e9b;
    border-color:#087e9b
  }
  button:disabled{
    opacity:.52;
    filter:saturate(.55);
    cursor:not-allowed
  }

  #students .change-student-teacher{background:#12233f;color:#fff;border-color:#12233f}
  #students .view-forms,#teachers .view-forms{background:#6650a4;color:#fff;border-color:#6650a4}
  #students .student-lesson-history{background:#087e9b;color:#fff;border-color:#087e9b}
  #students .edit-student,#teachers .edit-teacher{background:#1677c8;color:#fff;border-color:#1677c8}
  #students .reset-user-password,#teachers .reset-user-password{background:#b86200;color:#fff;border-color:#b86200}
  #students .deactivate-student,#teachers .deactivate-teacher{background:#e7b416;color:#2b2100;border-color:#d19f00}
  #students .delete-student{
    background:#b4232f!important;
    color:#fff!important;
    border-color:#b4232f!important
  }

  #settings #runNotificationsNow{background:#087e9b;color:#fff;border-color:#087e9b}
  #settings #saveCalendarSettings{background:#12233f;color:#fff;border-color:#12233f}
  .modal-actions .secondary{background:#dfeaf5;color:#17365f}
  .modal-actions .primary{background:#12233f;color:#fff}
}


/* Persistent mobile navigation: menu stays reachable while the page scrolls. */
@media(max-width:720px){
  #menuBtn{
    position:fixed;
    top:calc(env(safe-area-inset-top,0px) + 10px);
    left:max(10px,env(safe-area-inset-left,0px));
    z-index:60;
    width:54px;
    height:54px;
    min-height:54px;
    border:1px solid #bfd3e6;
    border-radius:12px;
    background:#fff;
    color:#087ed0;
    box-shadow:0 5px 16px #12233f2b;
    opacity:.96
  }
  .sidebar.open + main #menuBtn{
    font-size:0;
    color:#fff;
    background:#b4232f;
    border-color:#b4232f
  }
  .sidebar.open + main #menuBtn::before{
    content:"×";
    font-size:27px;
    line-height:1
  }
}


/* Color system for buttons across every mobile menu. */
@media(max-width:720px){
  .sidebar .nav{
    color:#dbeafe;
    border:1px solid #2b466a;
    background:#192f4f
  }
  .sidebar .nav.active{
    color:#fff;
    background:#087e9b;
    border-color:#18a4c2
  }

  #dashboard .white-btn{background:#fff;color:#0b6380;border:1px solid #b8e0eb}
  #schedule .segmented button{background:#dfeaf5;color:#17365f}
  #schedule .segmented button.active{background:#087e9b;color:#fff}
  #schedule .week-nav button{background:#1677c8;color:#fff;border-color:#1677c8}
  #schedule #addLesson{background:#16815d;color:#fff;border-color:#16815d}
  #schedule .schedule-side-arrow{background:#12233f;color:#fff;border-color:#12233f}

  #students #addStudent,#teachers #addTeacher{background:#16815d;color:#fff;border-color:#16815d}

  #finance #previewFourLessons,
  #finance #previewGroupPackage{background:#6650a4;color:#fff;border-color:#6650a4}
  #finance #savePackagePayment,
  #finance #saveGroupPackage{background:#16815d;color:#fff;border-color:#16815d}
  #finance #addGroupMember{background:#087e9b;color:#fff;border-color:#087e9b}
  #finance .period-nav button{background:#1677c8;color:#fff;border-color:#1677c8}

  #earnings .period-nav button{background:#1677c8;color:#fff;border-color:#1677c8}
  #earnings .earnings-payment-form button[type="submit"]{background:#16815d;color:#fff;border-color:#16815d}

  #finance-report .period-nav button{background:#1677c8;color:#fff;border-color:#1677c8}
  #financeReportPrint{background:#6650a4;color:#fff;border-color:#6650a4}
  #financeReportPdf{background:#b42336;color:#fff;border-color:#b42336}
  #finance-report .finance-entry-form button[type="submit"]{background:#16815d;color:#fff;border-color:#16815d}

  #settings #runNotificationsNow{background:#087e9b;color:#fff;border-color:#087e9b}
  #settings #saveCalendarSettings{background:#16815d;color:#fff;border-color:#16815d}
  #settings #whatsappTestTeacherButton{background:#16815d;color:#fff;border-color:#16815d}

  dialog .modal-actions .primary,
  dialog button[type="submit"].primary{background:#16815d;color:#fff;border-color:#16815d}
  dialog .modal-actions .secondary{background:#dce9f5;color:#17365f;border-color:#b9cee2}
  dialog .close{color:#b42336;background:#fff0f1;border:1px solid #ffd0d5;border-radius:10px}
  dialog #cancelLesson,
  dialog .danger-action{background:#b42336!important;color:#fff!important;border-color:#b42336!important}
}


/* Consistent mobile action language: primary, secondary, warning, destructive. */
@media(max-width:720px){
  /* Primary actions: add, save, confirm */
  #quickAdd,#addLesson,#addStudent,#addTeacher,
  #savePackagePayment,#saveGroupPackage,
  #saveCalendarSettings,
  .earnings-payment-form button[type="submit"],
  .finance-entry-form button[type="submit"],
  dialog .modal-actions .primary,
  dialog button[type="submit"].primary{
    background:#12233f!important;
    color:#fff!important;
    border-color:#12233f!important
  }

  /* Secondary actions: view, navigate, preview */
  .secondary,.text-btn,
  .segmented button,.week-nav button,.period-nav button,
  #previewFourLessons,#previewGroupPackage,#addGroupMember,
  #runNotificationsNow,#whatsappTestTeacherButton,
  #financeReportPrint,
  #students .view-forms,#teachers .view-forms,
  #students .student-lesson-history,
  #students .edit-student,#teachers .edit-teacher{
    background:#087e9b!important;
    color:#fff!important;
    border-color:#087e9b!important
  }
  .segmented button.active{
    background:#12233f!important;
    color:#fff!important;
    border-color:#12233f!important
  }

  /* Account/security remains secondary but distinct and consistent. */
  #accountPasswordButton,
  #students .reset-user-password,#teachers .reset-user-password{
    background:#dfeaf5!important;
    color:#17365f!important;
    border-color:#bdd0e3!important
  }

  /* Warning actions */
  #students .deactivate-student,#teachers .deactivate-teacher{
    background:#e7b416!important;
    color:#2b2100!important;
    border-color:#d19f00!important
  }

  /* Destructive actions */
  #logoutButton,#financeReportPdf,
  #students .delete-student,
  dialog #cancelLesson,dialog .danger-action,dialog .close{
    background:#b42336!important;
    color:#fff!important;
    border-color:#b42336!important
  }

  /* Disabled is always visibly unavailable, regardless of action type. */
  button:disabled{
    background:#d7dee7!important;
    color:#748196!important;
    border-color:#c5ced9!important;
    box-shadow:none!important;
    opacity:1
  }
}


/* Teacher earnings selector: readable, tappable and clearly selected. */
@media(max-width:720px){
  #earningsTeacherList{background:transparent;box-shadow:none}
  #earningsTeacherList .card-head{
    margin-bottom:8px;
    border:1px solid #e1e9f1;
    border-radius:12px;
    background:#fff
  }
  #earnings .earnings-teacher-rows{
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    padding:0
  }
  #earnings .earnings-teacher-rows>button{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto 14px;
    align-items:center;
    gap:8px;
    width:100%;
    min-height:64px;
    padding:10px 11px;
    text-align:left;
    border:1px solid #b9d4df;
    border-radius:12px;
    background:#f7fcfd;
    color:#12233f;
    box-shadow:0 3px 10px #12233f0d
  }
  #earnings .earnings-teacher-rows>button::after{
    content:"›";
    color:#087e9b;
    font-size:22px;
    font-weight:900
  }
  #earnings .earnings-teacher-rows>button span{min-width:0}
  #earnings .earnings-teacher-rows>button span:first-child strong{
    display:block;
    color:#12233f;
    font-size:14px;
    line-height:1.2;
    overflow-wrap:anywhere
  }
  #earnings .earnings-teacher-rows>button small{
    display:block;
    margin-top:4px;
    color:#516177;
    font-size:9px;
    line-height:1.3;
    font-weight:650
  }
  #earnings .earnings-teacher-rows>button span:nth-child(2){
    text-align:right
  }
  #earnings .earnings-teacher-rows>button span:nth-child(2)>strong{
    display:inline-block;
    padding:5px 7px;
    border-radius:8px;
    background:#087e9b;
    color:#fff;
    font-size:13px;
    white-space:nowrap
  }
  #earnings .earnings-teacher-rows>button.selected{
    border:2px solid #12233f;
    background:#e7f3f6
  }
  #earnings .earnings-teacher-rows>button.selected::after{color:#12233f}
}


/* Floating previous-screen button: clear mobile action in the bottom-right. */
#backBtn{display:none}
@media(max-width:720px){
  #backBtn{
    position:fixed;
    top:auto;
    left:auto;
    right:max(14px,env(safe-area-inset-right,0px));
    bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
    z-index:59;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:104px;
    height:56px;
    min-height:56px;
    padding:0 16px;
    border:2px solid #fff;
    border-radius:18px;
    background:#050505;
    color:#fff;
    box-shadow:0 8px 24px #00000066;
    font-size:25px;
    font-weight:900;
    line-height:1;
    opacity:1;
    -webkit-tap-highlight-color:transparent;
    transition:transform .12s ease,box-shadow .12s ease
  }
  #backBtn strong{font-size:16px;font-weight:850;letter-spacing:.2px}
  #backBtn:active{transform:scale(.94);box-shadow:0 4px 12px #00000073}
  #backBtn[hidden]{display:none!important}
}


/* Every mobile dialog gets a clear no-save return action in the top layer. */
.dialog-floating-back{display:none}
@media(max-width:720px){
  dialog[open]>.dialog-floating-back{
    position:fixed;
    right:max(14px,env(safe-area-inset-right,0px));
    bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
    z-index:2147483647;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:112px;
    height:56px;
    min-height:56px;
    padding:0 14px;
    border:2px solid #fff;
    border-radius:18px;
    background:#050505;
    color:#fff;
    box-shadow:0 8px 24px #00000070;
    font-size:24px;
    font-weight:900;
    line-height:1;
    opacity:1;
    -webkit-tap-highlight-color:transparent
  }
  dialog[open]>.dialog-floating-back strong{font-size:15px;font-weight:850}
  dialog[open]>.dialog-floating-back:active{transform:scale(.94)}
}


/* Earnings master/detail mobile flow: list OR selected teacher, never both. */
@media(max-width:720px){
  #earnings.teacher-detail-open #earningsTeacherList{display:none!important}
  #earnings.teacher-detail-open .earnings-rule{display:none}
  #earnings.teacher-detail-open #earningsDetail{display:block!important}
  #earnings:not(.teacher-detail-open) #earningsTeacherList{display:block!important}
  #earnings:not(.teacher-detail-open) #earningsDetail{display:none!important}
  .earnings-detail-header{
    position:sticky;
    top:calc(env(safe-area-inset-top,0px) + 8px);
    z-index:18;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:9px;
    margin:0 0 10px;
    padding:9px 10px 9px 58px;
    border:1px solid #b9d4df;
    border-radius:12px;
    background:#fff;
    box-shadow:0 5px 16px #12233f1c
  }
  .earnings-detail-header .earnings-list-back{
    min-height:38px;
    padding:7px 9px;
    border:1px solid #087e9b;
    border-radius:9px;
    background:#087e9b;
    color:#fff;
    font-size:10px;
    line-height:1.15
  }
  .earnings-detail-header div{min-width:0}
  .earnings-detail-header small,
  .earnings-detail-header strong,
  .earnings-detail-header span{display:block}
  .earnings-detail-header small{color:#718096;font-size:8px;text-transform:uppercase}
  .earnings-detail-header strong{margin-top:2px;color:#12233f;font-size:15px;line-height:1.2;overflow-wrap:anywhere}
  .earnings-detail-header span{margin-top:2px;color:#516177;font-size:9px}
}

/* Lesson planning already has an in-flow cancel action beside Save. */
#lessonDialog[open] > .dialog-floating-back { display: none !important; }