/* ===== ss-v45-modern-mobile-dock-and-timetable ===== */

/* SmartSchool V45 — clearer mobile dock + controllable modern timetable */
:root{--ss-v45-dock-height:96px}

/* The timetable must never inherit clipping from generic card rules. */
#scheduleManagerCard,#scheduleManagerCard .ss-tt,#scheduleManagerCard .ss-tt-shell,
#scheduleManagerCard .ss-tt-body,#scheduleManagerCard .ss-tt-pane,
#scheduleManagerCard .ss-tt-grid,#scheduleManagerCard .ss-tt-card{min-width:0;max-width:100%}
#scheduleManagerCard .ss-tt-card{overflow:visible!important}
#scheduleManagerCard .ss-tt-input,#scheduleManagerCard .ss-tt-select,
#scheduleManagerCard .ss-tt-btn{min-width:0;max-width:100%}

/* Modern timetable tabs: native horizontal movement on touch and mouse. */
.ss-tt-tabs{
  position:relative;display:flex!important;flex-wrap:nowrap!important;max-width:100%;
  overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;
  touch-action:pan-x pinch-zoom!important;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:14px;scrollbar-width:none;
}
.ss-tt-tabs::-webkit-scrollbar{display:none}
.ss-tt-tab{scroll-snap-align:center;min-height:46px;display:inline-flex;align-items:center;justify-content:center}

/* Weekday controls no longer overflow their cells. */
.ss-tt-day-grid>*{min-width:0}
.ss-tt-check{min-width:0;overflow:hidden;white-space:normal;text-align:center;line-height:1.35}
.ss-tt-check span{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:normal;text-align:center}

/* Each period is a readable form card instead of a compressed row. */
.ss-tt-period-row{
  grid-template-columns:58px minmax(150px,1.35fr) minmax(120px,.8fr) minmax(120px,.8fr) 46px!important;
  gap:10px!important;padding:10px;margin-top:10px!important;border:1px solid var(--border);
  border-radius:17px;background:var(--input-bg);box-shadow:0 6px 18px rgba(15,23,42,.045)
}
.ss-tt-period-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0}
.ss-tt-period-label span{font-size:.68rem;color:var(--text-sec);font-weight:850}
.ss-tt-period-label b{font-size:1.05rem;color:var(--text-main)}
.ss-tt-period-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.ss-tt-period-field>span{font-size:.72rem;color:var(--text-sec);font-weight:900;padding-inline:2px}
.ss-tt-period-field .ss-tt-input{width:100%!important;margin:0!important}
.ss-tt-remove-period{align-self:end;width:44px;height:46px;padding:0!important;font-size:1.2rem}

/* Scrollable timetable with a fixed day column and visible controls. */
.ss-v45-table-shell{max-width:100%;min-width:0;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--bg-panel)}
.ss-v45-table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-bottom:1px solid var(--border);background:var(--input-bg)}
.ss-v45-table-hint{display:flex;align-items:center;gap:7px;min-width:0;color:var(--text-sec);font-size:.78rem;font-weight:900;line-height:1.35}
.ss-v45-table-controls{display:flex;gap:6px;direction:ltr;flex:0 0 auto}
.ss-v45-scroll-btn{width:38px;height:36px;border:1px solid var(--border);border-radius:11px;background:var(--bg-panel);color:var(--text-main);font:inherit;font-size:1.25rem;font-weight:1000;cursor:pointer;display:grid;place-items:center}
.ss-v45-scroll-btn:active{transform:scale(.96)}
.ss-tt-table-wrap{
  position:relative;max-width:100%!important;width:100%;overflow-x:auto!important;overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;touch-action:pan-x pan-y pinch-zoom!important;
  overscroll-behavior:contain!important;scrollbar-width:thin;scrollbar-color:#64748b transparent;
  cursor:grab;user-select:none
}
.ss-tt-table-wrap.ss-v45-dragging{cursor:grabbing;scroll-behavior:auto!important}
.ss-tt-table-wrap input,.ss-tt-table-wrap select,.ss-tt-table-wrap button,.ss-tt-cell.editable{user-select:auto}
.ss-tt-table-wrap::-webkit-scrollbar{height:9px;width:9px}
.ss-tt-table-wrap::-webkit-scrollbar-thumb{background:#64748b;border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.ss-tt-table{min-width:760px!important;width:max(760px,100%)!important;table-layout:fixed}
.ss-tt-table th,.ss-tt-table td{min-width:112px}
.ss-tt-table tr>th:first-child{position:sticky!important;right:0!important;z-index:4!important;min-width:92px!important;width:92px;background:var(--bg-panel)!important;box-shadow:-5px 0 12px rgba(15,23,42,.09)}
.ss-tt-table thead tr>th:first-child{z-index:7!important}
.ss-tt-cell{min-height:74px;overflow:hidden}
.ss-tt-cell b,.ss-tt-cell span{max-width:100%;overflow-wrap:anywhere;word-break:normal}

/* Better visual hierarchy and reliable tap targets. */
.ss-tt-btn,.ss-tt-tab,.ss-tt-check{touch-action:manipulation!important;-webkit-tap-highlight-color:transparent}
.ss-tt-btn{min-height:46px}
.ss-tt-card-title{line-height:1.45}
.ss-tt-help{overflow-wrap:anywhere}

@media(max-width:768px){
  /* Bottom navigation is a clear dock, not a clipped strip. */
  .pro-tabs{overflow:visible!important}
  .pro-tabbar{
    position:fixed!important;top:auto!important;bottom:0!important;left:0!important;right:0!important;
    z-index:10020!important;display:flex!important;flex-wrap:nowrap!important;align-items:stretch!important;
    gap:8px!important;padding:8px 10px calc(8px + env(safe-area-inset-bottom))!important;
    min-height:calc(82px + env(safe-area-inset-bottom));max-width:100vw!important;
    overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;
    touch-action:pan-x!important;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:10px;scrollbar-width:none;background:var(--bg-panel)!important;
    border-top:1px solid var(--border)!important;border-bottom:0!important;
    box-shadow:0 -10px 30px rgba(15,23,42,.18)!important
  }
  .pro-tabbar::-webkit-scrollbar{display:none}
  .pro-tabbtn{
    position:relative;flex:0 0 78px!important;width:78px!important;min-width:78px!important;
    min-height:68px!important;padding:7px 5px!important;gap:4px!important;scroll-snap-align:center;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    border:1px solid var(--border)!important;border-radius:17px!important;background:var(--input-bg)!important;
    color:var(--text-main)!important;box-shadow:0 3px 10px rgba(15,23,42,.07)!important;overflow:hidden
  }
  .pro-tabbtn.active{
    color:#fff!important;border-color:transparent!important;background:linear-gradient(145deg,var(--primary),var(--primary-mid,var(--primary)))!important;
    box-shadow:0 8px 20px var(--shadow-card,rgba(79,40,210,.30))!important;transform:none!important
  }
  .pro-ic{display:grid!important;place-items:center;width:34px;height:32px;font-size:1.38rem!important;line-height:1!important;border-radius:10px;background:rgba(99,102,241,.09)}
  .pro-tabbtn.active .pro-ic{background:rgba(255,255,255,.17)}
  .pro-txt{
    display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    white-space:normal!important;overflow:hidden!important;text-overflow:clip!important;
    max-width:70px!important;font-size:.70rem!important;line-height:1.15!important;text-align:center!important;font-weight:900!important
  }
  #settingsPanel .pro-tabs{padding-bottom:calc(var(--ss-v45-dock-height) + env(safe-area-inset-bottom))!important}

  .ss-tt-shell{border-radius:20px!important}
  .ss-tt-hero{padding:14px!important}
  .ss-tt-title{font-size:1.22rem!important}
  .ss-tt-sub{font-size:.82rem;line-height:1.65}
  .ss-tt-body{padding:10px!important}
  .ss-tt-card{padding:12px!important;border-radius:17px!important}
  .ss-tt-day-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .ss-tt-check{min-height:52px;padding:8px 5px!important;gap:6px!important;font-size:.88rem}
  .ss-tt-check input{flex:0 0 auto}
  .ss-tt-period-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;padding:10px!important;gap:9px!important}
  .ss-tt-period-label{grid-column:1/-1;flex-direction:row;justify-content:flex-start;width:max-content;padding:5px 9px;border-radius:999px;background:rgba(99,102,241,.10)}
  .ss-tt-period-name{grid-column:1/-1}
  .ss-tt-remove-period{grid-column:1/-1;width:100%!important;height:42px!important;align-self:auto}
  .ss-tt-form-grid{grid-template-columns:1fr!important}
  .ss-tt-standard-row{grid-template-columns:minmax(0,1fr) 82px!important;padding:9px;border:1px solid var(--border);border-radius:14px;background:var(--input-bg)}
  .ss-tt-standard-row button{grid-column:1/-1!important;width:100%}
  .ss-tt-actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .ss-tt-actions>.ss-tt-btn{width:100%!important}
  .ss-tt-assignment{grid-template-columns:1fr!important;gap:8px!important}
  .ss-tt-assignment>div{min-width:0;padding:3px 0}
  .ss-tt-assignment .ss-tt-hours,.ss-tt-assignment .ss-tt-row-actions{justify-content:stretch!important}
  .ss-tt-assignment .ss-tt-row-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .ss-tt-assignment .ss-tt-row-actions .ss-tt-btn{width:100%!important}
  .ss-v45-table-toolbar{padding:8px}
  .ss-v45-table-hint{font-size:.72rem}
  .ss-v45-scroll-btn{width:36px;height:34px}
  .ss-tt-table{min-width:700px!important;width:700px!important}
  .ss-tt-table th,.ss-tt-table td{padding:6px!important;min-width:102px}
  .ss-tt-table tr>th:first-child{min-width:84px!important;width:84px!important}
}
@media(max-width:390px){
  .pro-tabbtn{flex-basis:74px!important;width:74px!important;min-width:74px!important}
  .ss-tt-day-grid{grid-template-columns:1fr!important}
  .ss-tt-kpis{grid-template-columns:1fr 1fr!important}
}
@media(min-width:769px){
  .pro-tabbtn:hover,.ss-tt-btn:hover,.ss-tt-tab:hover{filter:brightness(.98);transform:translateY(-1px)}
}