:root{
  --blue:#1f4e79; --lblue:#2e75b6; --bg:#f4f6f9; --card:#fff;
  --line:#dde3ea; --grey:#5a6573; --ok:#1d8a4e; --warn:#c47f00; --bad:#c0392b;
  --shadow:0 1px 3px rgba(20,40,70,.08),0 1px 2px rgba(20,40,70,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#1f2733}
header{background:var(--blue);color:#fff;padding:0 20px;display:flex;align-items:center;gap:16px;height:56px}
header .logo{font-weight:700;font-size:18px}
header .logo span{opacity:.8;font-weight:400}
header .spacer{flex:1}
header .who{font-size:13px;opacity:.95}
header button{background:rgba(255,255,255,.15);color:#fff;border:0;padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px}
header button:hover{background:rgba(255,255,255,.28)}
nav{background:#fff;border-bottom:1px solid var(--line);padding:0 16px;display:flex;gap:2px;flex-wrap:wrap}
nav a{padding:13px 16px;font-size:14px;color:var(--grey);text-decoration:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
nav a.active{color:var(--blue);border-bottom-color:var(--lblue);font-weight:600}
main{max-width:1150px;margin:22px auto;padding:0 16px}
h1{font-size:20px;color:var(--blue);margin:0 0 4px}
.sub{color:var(--grey);font-size:13px;margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 2px;font-size:16px;color:var(--blue)}
.card .type{color:var(--grey);font-size:12px;margin-bottom:10px}
.row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;border-top:1px dashed #eef1f5}
.row span:first-child{color:var(--grey)}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600}
.pill.ok{background:#e6f4ec;color:var(--ok)}
.pill.warn{background:#fbf0d9;color:var(--warn)}
.pill.bad{background:#f8e2de;color:var(--bad)}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13px}
th{background:var(--blue);color:#fff;text-align:left;padding:9px 11px;font-weight:600}
td{padding:9px 11px;border-top:1px solid var(--line)}
tr:nth-child(even) td{background:#fafbfd}
td.num,th.num{text-align:right}
form.box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;max-width:560px;box-shadow:var(--shadow)}
label{display:block;font-size:13px;color:var(--grey);margin:10px 0 4px}
input,select,textarea{width:100%;padding:9px 10px;border:1px solid #cfd6df;border-radius:7px;font-size:14px;font-family:inherit}
textarea{min-height:70px;resize:vertical}
button.primary{margin-top:16px;background:var(--lblue);color:#fff;border:0;padding:10px 18px;border-radius:7px;font-size:14px;cursor:pointer;font-weight:600}
button.primary:hover{background:var(--blue)}
button.mini{background:#eef2f7;border:1px solid var(--line);color:var(--blue);padding:5px 9px;border-radius:6px;font-size:12px;cursor:pointer}
button.mini:hover{background:#e2e9f1}
.btnbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
a.export{background:var(--ok);color:#fff;text-decoration:none;padding:8px 14px;border-radius:7px;font-size:13px;font-weight:600}
a.export:hover{filter:brightness(1.07)}
.msg{padding:10px 14px;border-radius:7px;font-size:13px;margin:12px 0}
.msg.err{background:#f8e2de;color:var(--bad)}
.msg.ok{background:#e6f4ec;color:var(--ok)}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1f4e79,#2e75b6)}
.login-card{background:#fff;border-radius:14px;padding:32px;width:360px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.login-card h2{color:var(--blue);margin:0 0 2px}
.login-card p.t{color:var(--grey);font-size:13px;margin:0 0 18px}
.demo{margin-top:16px;font-size:12px;color:var(--grey);background:#f4f6f9;border-radius:8px;padding:10px}
.demo code{color:var(--blue)}
.hidden{display:none}
.muted{color:var(--grey);font-size:12px}
.hash{font-family:monospace;font-size:11px;color:var(--grey);word-break:break-all}
.kpi{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.kpi .box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;box-shadow:var(--shadow);min-width:130px}
.kpi .box .n{font-size:24px;font-weight:700;color:var(--blue)}
.kpi .box .l{font-size:12px;color:var(--grey)}
.subnav{display:flex;gap:4px;margin:0 0 18px;border-bottom:1px solid var(--line)}
.subnav a{padding:9px 16px;font-size:14px;color:var(--grey);cursor:pointer;border-bottom:2px solid transparent}
.subnav a.active{color:var(--blue);border-bottom-color:var(--lblue);font-weight:600}
.subnav a:hover{color:var(--blue)}
a.back{color:var(--lblue);cursor:pointer;font-size:13px;font-weight:600}
a.back:hover{color:var(--blue);text-decoration:underline}
.perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 14px;margin:6px 0 4px}
.perms .ck{font-weight:400;color:#1f2733;display:flex;align-items:center;gap:7px;margin:0;font-size:13px}
.perms .ck input{width:auto}
.pgbar{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;font-size:13px;color:var(--grey)}
.pgbar select{width:auto;display:inline-block;padding:4px 6px}
.pgctrl{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:12px 0 4px}
.pgnum,.pgnav{background:#fff;border:1px solid var(--line);color:var(--blue);padding:5px 10px;border-radius:6px;font-size:13px;cursor:pointer}
.pgnum.on{background:var(--lblue);color:#fff;border-color:var(--lblue);font-weight:600}
.pgnum:hover,.pgnav:hover{background:#e2e9f1}
.pgnav[disabled]{opacity:.4;cursor:default}
.pgdots{padding:0 4px;color:var(--grey)}
.pill.info{background:#e7eef7;color:#1f4e79}

/* ---- Flight scheduling Gantt timeline ---- */
.sch-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:#fff;margin-top:6px}
.sch-row{display:flex;align-items:stretch;border-bottom:1px solid #eef1f5}
.sch-row:last-child{border-bottom:0}
.sch-head{position:sticky;top:0;z-index:3}
.sch-label{flex:0 0 120px;min-width:120px;max-width:120px;padding:8px;border-right:1px solid var(--line);
  font-weight:600;font-size:13px;display:flex;align-items:center;background:#f4f7fb;position:sticky;left:0;z-index:2}
.sch-head .sch-label{background:#e9eff6}
.sch-track{position:relative;flex:0 0 auto;height:62px}
.sch-head .sch-track{height:34px;background:#eef3f9}
.sch-tick{position:absolute;top:0;bottom:0;font-size:11.5px;color:#5a6573;padding-left:4px;white-space:nowrap;line-height:34px}
.sch-tick.maj{border-left:1px solid #c7d2de}
.sch-grid{position:absolute;top:0;bottom:0;border-left:1px solid #eef1f5}
.sch-now{position:absolute;top:0;bottom:0;border-left:2px dashed #b00020;z-index:1}
.sch-bar{position:absolute;top:9px;height:43px;min-width:6px;border-radius:6px;color:#fff;font-size:13px;
  line-height:43px;padding:0 9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.25);z-index:2}
.sch-bar:hover{filter:brightness(1.08)}
.sch-span.active{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ---- Work order (Form CAO.006) grid ---- */
.wo-wrap{overflow-x:auto;margin-top:8px}
table.wo{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11px}
.wo td{border:1px solid #9aa7b5;padding:2px 4px;vertical-align:top}
.wo .sec{background:#e7ecf3;font-weight:700;color:#1f4e79}
.wo .sec2{background:#eef2f7;font-weight:700;text-align:center}
.wo .ttl{font-size:18px;font-weight:800;text-align:center;color:#1f4e79;letter-spacing:1px}
.wo .co{font-weight:700;font-size:11px}
.wo .lab{font-weight:700;font-size:10px;color:#33414f}
.wo .foot{text-align:center;font-style:italic;color:#5a6573}
.wo .crs{font-size:10.5px;line-height:1.35}
.wo .wo-in{width:100%;border:0;padding:2px;font-size:12px;background:transparent;color:#1f2937}
.wo .wo-ta-in{width:100%;border:0;padding:2px;font-size:12px;resize:vertical;background:transparent;color:#1f2937}
.wo .wo-li{display:flex;flex-direction:column}
.wo .wo-li .wo-l{font-weight:700;font-size:9px;color:#556}
.wo .sp td{border:0;height:6px}

/* ================= Device / display modes ================= */
/* Login: device picker */
.devpick{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;text-align:center}
.devlab{display:block;font-size:12px;color:var(--grey);margin-bottom:8px;font-weight:600}
.devbtns{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.devbtn{flex:1 1 0;min-width:88px;background:#eef2f7;border:1px solid var(--line);color:var(--blue);
  padding:9px 8px;border-radius:8px;font-size:13px;cursor:pointer;font-weight:600}
.devbtn:hover{background:#e2e9f1}
.devbtn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.devnote{font-size:11px;color:var(--grey);margin-top:8px}

/* ---- Tablet mode: bigger touch targets, fluid tables ---- */
body.dev-tablet{font-size:15px}
body.dev-tablet nav a{padding:14px 16px;font-size:15px}
body.dev-tablet input,body.dev-tablet select,body.dev-tablet textarea{padding:11px 12px;font-size:16px}
body.dev-tablet button.primary{padding:12px 20px;font-size:15px}
body.dev-tablet button.mini{padding:8px 12px;font-size:13px}
body.dev-tablet table{font-size:13.5px}
body.dev-tablet table th,body.dev-tablet table td{padding:9px 8px}
body.dev-tablet main{padding:16px}
body.dev-tablet .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
body.dev-tablet form.box{max-width:100%}

/* ---- Mobile mode: single column, large targets, scrollable tables ---- */
body.dev-mobile{font-size:15px}
body.dev-mobile header{padding:8px 12px;flex-wrap:wrap}
body.dev-mobile header .logo{font-size:16px}
body.dev-mobile header .logo span{display:none}
body.dev-mobile header .who{font-size:12px}
body.dev-mobile nav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
body.dev-mobile nav a{padding:12px 13px;font-size:14px;flex:0 0 auto}
body.dev-mobile main{padding:12px}
body.dev-mobile h1{font-size:18px}
body.dev-mobile .grid{grid-template-columns:1fr}
body.dev-mobile .kpi{gap:8px}
body.dev-mobile .kpi .box{flex:1 1 45%;min-width:0;padding:12px}
body.dev-mobile .kpi .box .n{font-size:20px}
body.dev-mobile form.box,body.dev-mobile .box{max-width:100%;padding:14px}
body.dev-mobile input,body.dev-mobile select,body.dev-mobile textarea{padding:12px;font-size:16px}
body.dev-mobile button.primary{width:100%;padding:13px;font-size:16px}
body.dev-mobile button.mini{padding:8px 11px;font-size:13px;margin:2px 0}
body.dev-mobile a.export{display:inline-block;padding:10px 14px}
body.dev-mobile .btnbar{flex-wrap:wrap;gap:6px}
body.dev-mobile table{display:block;overflow-x:auto;white-space:nowrap;font-size:13px}
body.dev-mobile table th,body.dev-mobile table td{padding:8px 7px}
body.dev-mobile .wo-wrap,body.dev-mobile .sch-wrap{-webkit-overflow-scrolling:touch}
body.dev-mobile .login-card{padding:20px}
body.dev-mobile .sch-label{flex:0 0 84px;min-width:84px;max-width:84px;font-size:11px}

/* ---- PC mode: comfortable max width ---- */
body.dev-desktop main{padding:20px}

/* ---- Fallback: real viewport queries (work even before a mode is chosen) ---- */
@media (max-width:640px){
  header .logo span{display:none}
  nav{overflow-x:auto;flex-wrap:nowrap}
  .grid{grid-template-columns:1fr}
  table{display:block;overflow-x:auto;white-space:nowrap}
  form.box{max-width:100%}
  input,select,textarea{font-size:16px} /* prevents iOS zoom-on-focus */
}
@media (min-width:641px) and (max-width:1024px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  form.box{max-width:100%}
}

/* Scheduling: scheduled bar (top) + actual take-off/landing bar (bottom), same row height */
.sch-bar-sched{top:6px;height:24px;line-height:24px;font-size:11px;padding:0 7px}
.sch-bar-act{top:33px;height:24px;line-height:24px;font-size:11px;padding:0 7px}
.sch-bar-act.sch-bar-empty{background:transparent;border:1px dashed #b9c4d1;color:#93a1b1;box-shadow:none;font-style:italic}
.sch-bar-act.sch-bar-empty:hover{background:#f3f6fa;color:#5a6573}
body.dev-mobile .sch-bar-sched,body.dev-mobile .sch-bar-act{font-size:10px;padding:0 5px}

/* ---- Flight log export: modern filter panel ---- */
.fx-card{background:linear-gradient(180deg,#ffffff,#f7fafd);border:1px solid var(--line);border-radius:14px;
  padding:18px;box-shadow:0 2px 10px rgba(31,78,121,.07)}
.fx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.fx-f label{display:block;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#7a8798;margin:0 0 5px}
.fx-f select,.fx-f input{width:100%;padding:10px 11px;border:1px solid #d3dbe5;border-radius:9px;font-size:14px;background:#fff}
.fx-f select:focus,.fx-f input:focus{outline:0;border-color:var(--lblue);box-shadow:0 0 0 3px rgba(47,126,216,.15)}
.fx-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid #eaeff5}
.fx-btn{border:1px solid var(--line);background:#fff;color:#33414f;padding:10px 16px;border-radius:9px;
  font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s}
.fx-btn:hover{background:#f1f5fa;transform:translateY(-1px)}
.fx-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.fx-primary:hover{background:#173a5c}
.fx-pdf{background:#b00020;border-color:#b00020;color:#fff}
.fx-pdf:hover{background:#8d0019}
.fx-csv{background:#2c9c69;border-color:#2c9c69;color:#fff}
.fx-csv:hover{background:#238055}
body.dev-mobile .fx-actions .fx-btn{flex:1 1 45%}
.sch-bar-flown{cursor:default;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.sch-bar-flown::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:rgba(255,255,255,.75);border-radius:6px 0 0 6px}