/* DGS TimeTrack App Store 1.1.2 – visual restoration based on approved App Store screenshots.
   Scoped to the application; no modification to database or punch handlers. */
:root{color-scheme:light;--dgs-original-navy:#071d35;--dgs-original-blue:#0876dc;--dgs-original-surface:#f3f5fa;--dgs-original-text:#13283f}
html,body{background:var(--dgs-original-surface)!important;color:var(--dgs-original-text)!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;overflow-x:hidden}
#auth{background:#f2f5fa!important;color:#17293c!important}
#auth .brand{color:#132840!important}
#auth .panel{background:#fff!important;color:#122840!important;border:1px solid #e4e8f0!important;box-shadow:0 4px 20px rgba(9,26,45,.06)!important}
#auth label,#auth .sectionTitle h2{color:#142b47!important}
#auth .muted{color:#58687a!important}
#auth .btn.ghost{color:#1568c1!important;border-color:#d3deef!important}
#app{background:var(--dgs-original-surface)!important;color:var(--dgs-original-text)!important;min-height:100dvh}
#app .top{background:#071a32!important;color:white!important;padding:calc(12px + env(safe-area-inset-top,0px)) 13px 11px!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:7px!important;min-height:92px}
#app .top>div:first-child{min-width:0;flex:1 1 auto}
#app .top .dgs-app-brand{color:#fff!important;font-size:clamp(17px,4.4vw,22px)!important;line-height:1.2!important;font-weight:750!important;display:flex!important;align-items:center!important;white-space:nowrap!important;gap:7px!important}
#app .top .dgs-web-mark{width:37px!important;height:37px!important;object-fit:contain!important;border-radius:9px!important}
#app .top #orgName{color:#c5d2e3!important;font-size:12px!important;max-width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-top:3px}
#app .top .right{display:flex!important;flex:0 0 auto!important;min-width:0!important;gap:5px!important;flex-wrap:nowrap!important;align-items:center!important;width:auto!important}
#app .top .right select{font-size:13px!important;min-height:38px!important;height:38px!important;border-radius:9px!important;padding:4px 19px 4px 7px!important;max-width:106px!important;min-width:0!important;width:106px!important;background:#fff!important;color:#143047!important;border:1px solid #d5dce8!important}
#app .top .right #logoutBtn{font-size:13px!important;line-height:1!important;min-height:38px!important;height:38px!important;padding:0 10px!important;background:#fff!important;color:#1870c7!important;border:1px solid #d4dceb!important;border-radius:9px!important}
#app .wrap{background:var(--dgs-original-surface)!important;color:var(--dgs-original-text)!important;width:min(100%,1160px)!important;max-width:100%!important;padding:0 13px 36px!important;box-sizing:border-box!important;overflow:visible!important}
#app .nav{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;margin:0 -2px 10px!important;padding:9px 0 6px!important;overflow:visible!important;min-height:0!important;height:auto!important;background:transparent!important}
#app .nav .btn{display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;width:100%!important;min-height:38px!important;height:auto!important;padding:6px 3px!important;border:0!important;border-radius:8px!important;color:#177bca!important;background:transparent!important;white-space:normal!important;text-align:center!important;font-size:clamp(11px,3.1vw,14px)!important;line-height:1.25!important;font-weight:700!important;box-shadow:none!important;overflow-wrap:anywhere!important}
#app .nav .btn.active{background:#e7f1ff!important;color:#0767c5!important}
#app .nav .btn:focus-visible{outline:2px solid #0b70ce!important;outline-offset:1px!important}
#app .card,#app section>.card{background:#fff!important;border:1px solid #e1e6ed!important;color:#142942!important;box-shadow:0 2px 8px rgba(14,34,59,.035)!important;border-radius:16px!important;padding:16px!important;max-width:100%!important;margin:0 0 12px!important}
#app .card h2,#app .card h3{color:#102841!important;font-size:clamp(18px,4.5vw,23px)!important;font-weight:760!important;line-height:1.25!important;margin:0 0 13px!important}
#app .card .muted,#app .muted{color:#647386!important}
#app .field{background:white!important;color:#182d45!important;border:1px solid #cbd5e2!important;border-radius:10px!important;padding:11px 12px!important;font-size:16px!important;min-height:43px!important;max-width:100%!important}
#app textarea.field{min-height:75px!important}
#app .btn{background:#f8fbff!important;color:#156fc4!important;border:1px solid #d7e3f4!important;border-radius:10px!important;min-height:41px!important;font-weight:700!important}
#app .btn.green{background:#16b65a!important;border-color:#16b65a!important;color:white!important}
#app .btn.orange{background:#f6a019!important;border-color:#f6a019!important;color:white!important}
#app .btn.blue{background:#2d88ed!important;border-color:#2d88ed!important;color:white!important}
#app .btn.red{background:#e34550!important;border-color:#e34550!important;color:white!important}
#app .btn.ghost{background:#f5f9ff!important;border-color:#d5e3f5!important;color:#1b69b8!important}
#app #notice{border-radius:10px;padding:10px 12px;background:#eaf3ff;border:1px solid #b7cfee;color:#174d82}
#app #dashboard #adminDashboard>.card:first-child{padding:16px!important}
#app #dashboard #adminDashboard>.card:first-child>h2{display:none!important}
#app #dashboard #adminDashboard>.card:first-child>.metrics{display:none!important}
#app #dgsOriginalToday h2{font-size:21px!important;margin-bottom:8px!important}
#app #dgsOriginalToday .dgsOriginalIntro{margin:0 0 14px;color:#788393;font-size:12px;line-height:1.5}
#app .dgsOriginalTileGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
#app .dgsOriginalTile{min-width:0!important;border-radius:13px!important;border:1px solid #dfe4ef!important;padding:11px 12px!important;min-height:77px!important;display:flex!important;flex-direction:column!important;gap:7px!important;justify-content:space-between!important;overflow-wrap:anywhere!important}
#app .dgsOriginalTileLabel{font-size:12px!important;line-height:1.3!important;font-weight:700!important;color:#4c5e75!important}
#app .dgsOriginalTileValue{font-size:24px!important;line-height:1.1!important;font-weight:800!important;color:#102a47!important;font-variant-numeric:tabular-nums!important}
#app .dgsOriginalTile--green{background:#e9f9f0!important;border-color:#ccefd8!important}
#app .dgsOriginalTile--yellow{background:#fff9e7!important;border-color:#f5e8b9!important}
#app .dgsOriginalTile--blue{background:#edf4ff!important;border-color:#d2e1fa!important}
#app .dgsOriginalTile--gray{background:#f4f5f7!important;border-color:#e2e4e8!important}
#app .dgsOriginalTile--pink{background:#fff2f2!important;border-color:#f6d9da!important}
#app .dgsOriginalTile--purple{background:#f6f0ff!important;border-color:#e4d5fa!important}
#app #dgsOriginalRecent{margin-top:12px}
#app .dgsOriginalRecentRow{border:1px solid #e4e9f0;border-radius:12px;padding:12px;margin:6px 0;background:#fff;font-size:13px;line-height:1.4;color:#172b42}
#app .dgsOriginalRecentRow strong{display:block;font-weight:800;margin-bottom:3px}
#app .dgsOriginalRecentMeta{display:block;color:#788699;font-size:11px}
#app .dgsOriginalStatusChip{display:inline-block;border-radius:24px;padding:4px 9px;font-size:11px;font-weight:750;background:#e8f0ff;color:#1c67b9;margin-top:6px}
#app #clock .card:first-child>h2{font-size:21px!important}
#app #clock .dgsOriginalClockLabel{display:block!important;color:#5e6e82!important;font-size:12px!important;font-weight:750!important;margin:9px 0 5px!important}
#app #clock #clockEmployee,#app #clock #clockSite{display:block!important;width:100%!important;margin:0 0 7px!important}
#app #dgsOriginalClockState{display:block;margin:13px 0;padding:12px 13px;border-radius:12px;background:#ecf3ff;border:1px solid #d7e5fa;color:#173b63}
#app #dgsOriginalClockState small{display:block;color:#60738f;font-weight:700;font-size:11px;margin-bottom:5px}
#app #dgsOriginalClockState strong{display:block;font-size:17px;font-weight:800;line-height:1.25}
#app #dgsOriginalClockState .dgsOriginalNext{margin-top:5px;color:#6a7786;font-size:12px}
#app #clock .grid2{display:grid!important;grid-template-columns:repeat(1,minmax(0,1fr))!important;gap:8px!important;margin-top:9px!important}
#app #clock .grid2 [data-punch]{min-height:44px!important;width:100%!important;font-size:12px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.02em!important;border-radius:9px!important}
#app #clock .grid2 [data-punch][disabled]{opacity:.48!important}
#app #clock #travelBtn{width:100%!important;background:#2d89ee!important;border-color:#2d89ee!important;color:white!important;font-weight:750!important}
#app .dgsOriginalWarehouseInfo{padding:11px;margin:14px 0 8px;border-radius:10px;background:#eff6ff;color:#174f90;font-size:12px;font-weight:700;line-height:1.5}
#app #clock #warehouseTravelInfo{color:#496075!important;font-size:12px}
#app #clock hr{border:0;border-top:1px solid #e2e8f0;margin:13px 0}
#app .metric{background:#f0f5fd!important;border:1px solid #d9e7f8!important;color:#173251!important}
#app .metric span{color:#607088!important}
#app .metric b{color:#172c49!important}
#app #map{border:1px solid #d7e3f1!important;background:#e1e9f2!important}
#app #workPlan .dgs112-schedule-card{background:#f8fbff!important;color:#10283e!important;border:1px solid #d9e4f0!important}
#app #workPlan .dgs112-schedule-card .muted{color:#65768d!important}
#app .list{color:#172d44!important;border-bottom:1px solid #e9edf3;padding:8px 0}
#app .nav .btn.hidden,#app [hidden],#app .hidden{display:none!important}
@media(min-width:760px){
#app .top{padding-left:25px!important;padding-right:25px!important}
#app .wrap{padding:0 20px 45px!important}
#app .nav{grid-template-columns:repeat(8,minmax(0,1fr))!important}
#app .dgsOriginalTileGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#app #clock .grid2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:355px){
#app .top .dgs-app-brand{font-size:16px!important}
#app .top .right select{width:91px!important;max-width:91px!important}
#app .nav .btn{font-size:11px!important}
#app .dgsOriginalTile{padding:9px!important}
}