/* ============================================================ GVMS Parking — ธีม "Cloud" (แดชบอร์ดระบบคิดเงินสไตล์ SaaS: ขาว/ฟ้า การ์ดมน เงานุ่ม) เปิดใช้เมื่อ · โทเคนทับ app.css · โลโก้ GVMS ชุดเดิม ============================================================ */ :root[data-theme^="cloud"]{ --bg:#F2F6F8;--card:#FFFFFF;--card2:#F7FAFC; --ink:#102C3C;--ink2:#1E3A4C;--muted:#5F7583;--faint:#93A6B2;--line:#E2EAEF;--line2:#EDF2F5;--rule:#E2EAEF; --accent:#1493C8;--accent-soft:#E6F4FB;--navy:#102C3C;--cyan:#20A5D7;--mint:#92D5BD;--lime:#EDFFA3;--green:#1E9E76;--green-soft:#E4F6EF;--amber:#D97706;--amber-soft:#FEF3E2;--red:#DC2626;--red-soft:#FDECEC; --blue:#1493C8;--blue-ink:#1493C8;--blue-soft:#E6F4FB;--green-ink:#15803D;--amber-ink:#B45309;--red-ink:#B91C1C; --r:14px;--r-sm:10px;--sh:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.06);--sh-lg:0 12px 40px rgba(16,24,40,.12); } [data-theme^="cloud"] body{background:var(--bg)} [data-theme^="cloud"] h1,[data-theme^="cloud"] h2,[data-theme^="cloud"] h3{font-weight:600;letter-spacing:-.01em} [data-theme^="cloud"] a:hover{color:var(--accent)} [data-theme^="cloud"] .eyebrow{letter-spacing:.08em;text-transform:none;font-size:13px;font-weight:600;color:var(--ink)} /* ----- sidebar ----- */ [data-theme^="cloud"] .side{background:#fff;border-right:1px solid var(--line);box-shadow:none} [data-theme^="cloud"] .side .brand{border-bottom:1px solid var(--line2)} [data-theme^="cloud"] .side .brand .t span:first-child{color:var(--accent)}[data-theme^="cloud"] .side .brand .t span:last-child{color:var(--navy)} [data-theme^="cloud"] .side nav a{border-radius:10px;color:#475569;font-weight:500} [data-theme^="cloud"] .side nav a svg{stroke:#64748B} [data-theme^="cloud"] .side nav a:hover{background:var(--accent-soft);color:var(--accent)}[data-theme^="cloud"] .side nav a:hover svg{stroke:var(--accent)} [data-theme^="cloud"] .side nav a.on,[data-theme^="cloud"] .side nav a.on:hover{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(16,44,60,.25)}[data-theme^="cloud"] .side nav a.on svg{stroke:#fff} [data-theme^="cloud"] .side nav .sec{color:var(--faint);letter-spacing:.12em} [data-theme^="cloud"] .side .user .av{background:var(--accent-soft);color:var(--accent)} [data-theme^="cloud"] .side nav a.sub{border-radius:8px}[data-theme^="cloud"] .side nav a.sub.on{background:var(--accent-soft);color:var(--accent);box-shadow:none}[data-theme^="cloud"] .side nav a.grp.act{color:var(--accent)}[data-theme^="cloud"] .side nav a.grp.act svg{stroke:var(--accent)} /* ----- page header ----- */ [data-theme^="cloud"] .ph h1{font-size:26px;font-weight:600} [data-theme^="cloud"] .ph .sub{color:var(--muted)} /* ----- cards ----- */ [data-theme^="cloud"] .card{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)} [data-theme^="cloud"] .card .hd{border-bottom-color:var(--line2);border-radius:var(--r) var(--r) 0 0;background:var(--card2)} [data-theme^="cloud"] .card.pad0 .chd{background:var(--card2)} /* ----- KPI tiles → การ์ดขาว ไอคอนวงกลมฟ้า ตัวเลขหนา ----- */ [data-theme^="cloud"] .tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px 16px;box-shadow:var(--sh);gap:8px;position:relative} [data-theme^="cloud"] .tile .lbl{font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500} [data-theme^="cloud"] .tile .lbl svg{display:block;width:38px;height:38px;padding:9px;border-radius:50%;background:var(--accent-soft);stroke:var(--accent)} [data-theme^="cloud"] .tile b{font:600 32px/1.1 var(--display);letter-spacing:-.02em;color:var(--ink)}[data-theme^="cloud"] .tile b small{font-size:16px;font-weight:500;color:var(--faint)} [data-theme^="cloud"] .tile .sub{font-size:12.5px}[data-theme^="cloud"] .tile .sub i{color:var(--line)} [data-theme^="cloud"] .tile.red{border-color:var(--line)}[data-theme^="cloud"] .tile.red .lbl{color:var(--muted)}[data-theme^="cloud"] .tile.red .lbl svg{background:var(--red-soft);stroke:var(--red)}[data-theme^="cloud"] .tile.red b{color:var(--red)} [data-theme^="cloud"] .tile.hi{background:linear-gradient(135deg,#102C3C 0%,#1A6E93 55%,#20A5D7 100%);border-color:transparent;color:#fff;box-shadow:0 10px 28px rgba(16,44,60,.30)} [data-theme^="cloud"] .tile.hi .lbl,[data-theme^="cloud"] .tile.hi b,[data-theme^="cloud"] .tile.hi .sub,[data-theme^="cloud"] .tile.hi .sub strong{color:#fff} [data-theme^="cloud"] .tile.hi .lbl svg{background:rgba(255,255,255,.18);stroke:#fff}[data-theme^="cloud"] .tile.hi .sub i{color:rgba(255,255,255,.4)} [data-theme^="cloud"] .tile.hi .pill{color:#fff;background:rgba(255,255,255,.18);padding:2px 8px;border-radius:999px} [data-theme^="cloud"] .delta{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--green)}[data-theme^="cloud"] .delta.dn{color:var(--red)}[data-theme^="cloud"] .delta.z{color:var(--faint)} [data-theme^="cloud"] .tile.hi .delta{color:var(--lime)}[data-theme^="cloud"] .tile.hi .delta.dn{color:#FECACA} /* ----- section headers / dividers ----- */ [data-theme^="cloud"] .sec-h{margin-bottom:14px}[data-theme^="cloud"] .sec-h a{color:var(--accent);border-bottom:0} [data-theme^="cloud"] .sec-rule{border-color:var(--line)} /* ----- buttons / inputs ----- */ [data-theme^="cloud"] .btn{background:var(--navy);border-color:var(--navy);border-radius:10px;font-weight:600;box-shadow:0 4px 12px rgba(16,44,60,.18)} [data-theme^="cloud"] .btn:hover{background:#0B1F2B;border-color:#0B1F2B} [data-theme^="cloud"] .btn.amber{background:var(--accent);border-color:var(--accent);box-shadow:0 4px 12px rgba(20,147,200,.25)} [data-theme^="cloud"] .btn.ghost{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:none}[data-theme^="cloud"] .btn.ghost:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)} [data-theme^="cloud"] .btn.red{background:var(--red);border-color:var(--red)}[data-theme^="cloud"] .btn.green{background:var(--green);border-color:var(--green)} [data-theme^="cloud"] input,[data-theme^="cloud"] select,[data-theme^="cloud"] textarea{border-color:#D5DCE8;border-radius:10px;background:#fff} [data-theme^="cloud"] input:focus,[data-theme^="cloud"] select:focus,[data-theme^="cloud"] textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(32,165,215,.18)} /* ----- tables ----- */ [data-theme^="cloud"] .card .tw,[data-theme^="cloud"] .tw{border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh);overflow:hidden} [data-theme^="cloud"] .card .tw{border:0;box-shadow:none;border-radius:0} [data-theme^="cloud"] th{background:var(--card2);letter-spacing:0;text-transform:none;font-size:12.5px;font-weight:600;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line)} [data-theme^="cloud"] td{padding:12px 14px;border-bottom:1px solid var(--line2)}[data-theme^="cloud"] tbody tr:hover td{background:#F8FAFD}[data-theme^="cloud"] tr:last-child td{border-bottom:0} /* ----- pills → แบบมีพื้น ----- */ [data-theme^="cloud"] .pill{padding:3px 10px;border-radius:999px;font-weight:600} [data-theme^="cloud"] .pill.g{background:var(--green-soft)}[data-theme^="cloud"] .pill.r{background:var(--red-soft)}[data-theme^="cloud"] .pill.a{background:var(--amber-soft)}[data-theme^="cloud"] .pill.b{background:var(--accent-soft);color:var(--accent)}[data-theme^="cloud"] .pill.m{background:#F1F5F9} /* ----- misc ----- */ [data-theme^="cloud"] .mini-lane{border-radius:12px;box-shadow:var(--sh)} [data-theme^="cloud"] .ovr{border-top-color:var(--line2)} [data-theme^="cloud"] .attn{border-radius:12px;border:1px solid var(--line);border-left:4px solid var(--accent);box-shadow:var(--sh)} [data-theme^="cloud"] .modal .box{border-radius:16px;box-shadow:var(--sh-lg);border:0} [data-theme^="cloud"] .hbar div{background:#DCE4F2;border-radius:3px 3px 0 0}[data-theme^="cloud"] .hbar div.hi{background:var(--accent)}[data-theme^="cloud"] .hbar div.now{background:var(--navy)} [data-theme^="cloud"] .dev span{border-radius:999px;border-color:var(--line);background:#fff} [data-theme^="cloud"] .status-dot.on{background:var(--green)} /* ----- charts (ใช้ทั้งสองธีม แต่สีตามโทเคน) ----- */ .chart-card{display:flex;flex-direction:column;gap:10px} .ch-top{display:flex;align-items:center;gap:10px} .ch-top h3{margin:0} .line-wrap{width:100%;overflow:hidden}.line-chart{display:block} .line-chart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}.line-chart .axis{fill:var(--faint);font:11.5px var(--font)} .line-chart .ln{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.line-chart .halo{fill:var(--accent);opacity:.15} .line-chart .dot{fill:#fff;stroke:var(--accent);stroke-width:2}.line-chart .dot.last{fill:var(--accent)}.line-chart .pt:hover .dot{r:5} .donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .donut svg{width:132px;height:132px;flex:none}.donut .ring{fill:none;stroke:var(--line);stroke-width:14}.donut .val{fill:none;stroke:var(--accent);stroke-width:14;stroke-linecap:butt;transform:rotate(-90deg);transform-origin:50% 50%} .donut .c{font:600 24px var(--display);fill:var(--ink)}.donut .cs{font:12px var(--font);fill:var(--muted)} .donut ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);min-width:130px;flex:1} .donut li{display:flex;align-items:center;gap:8px;white-space:nowrap}.donut li i{width:10px;height:10px;border-radius:3px;background:var(--accent);flex:none}.donut li b{color:var(--ink);margin-left:auto;font-weight:600} .quick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .quick a{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);background:var(--card2)} .quick a:hover{border-color:var(--accent);color:var(--accent)} .quick a svg{width:22px;height:22px;flex:none;stroke:var(--accent)}.quick a b{display:block;font-size:13.5px;font-weight:600}.quick a span{display:block;font-size:12px;color:var(--muted)} .vt{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.vt div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card2)}.vt div b{display:block;font:600 22px/1.1 var(--display);margin:4px 0 2px}.vt div span{font-size:12px;color:var(--muted)} .delta{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:500;color:var(--green)}.delta.dn{color:var(--accent)}.delta.z{color:var(--faint)} .g-rev{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}@media(max-width:1100px){.g-rev{grid-template-columns:1fr}} [data-theme^="cloud"] td:first-child,[data-theme^="cloud"] th:first-child{white-space:nowrap} /* ----- สัดส่วนมาตรฐาน + เมนูย่อ (rail สีฟ้าแบบ DPARK) ----- */ [data-theme^="cloud"] .grid{gap:16px} [data-theme^="cloud"] .phead,[data-theme^="cloud"] .pbody{max-width:1560px;width:100%;box-sizing:border-box} [data-theme^="cloud"] .shell.mini .side{background:linear-gradient(180deg,#102C3C,#163B50);border-right:0} [data-theme^="cloud"] .shell.mini .side .brand{border-bottom-color:rgba(255,255,255,.2)} [data-theme^="cloud"] .shell.mini .side .brand .collapse{border-color:rgba(255,255,255,.35);color:#fff} [data-theme^="cloud"] .shell.mini .side nav a{color:#fff;border-radius:12px;height:44px}[data-theme^="cloud"] .shell.mini .side nav a svg{stroke:#fff} [data-theme^="cloud"] .shell.mini .side nav a:hover{background:rgba(255,255,255,.16);color:#fff} [data-theme^="cloud"] .shell.mini .side nav a.on,[data-theme^="cloud"] .shell.mini .side nav a.on:hover{background:var(--cyan);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.22)}[data-theme^="cloud"] .shell.mini .side nav a.on svg{stroke:#fff} [data-theme^="cloud"] .shell.mini .side .user{border-top-color:rgba(255,255,255,.2)}[data-theme^="cloud"] .shell.mini .side .user .av,[data-theme^="cloud"] .shell.mini .side .user .avatar{background:var(--cyan);color:#fff} [data-theme^="cloud"] .shell.mini .side .brand .mark-sm{filter:brightness(0) invert(1)} [data-theme^="cloud"] .bars div{background:var(--accent);border-radius:4px 4px 0 0}[data-theme^="cloud"] .bars div:hover{background:var(--navy)} /* ป้ายทะเบียนในธีม Cloud: ชิปนุ่ม ไม่มีกรอบดำหนา */ [data-theme^="cloud"] .plate{border:1px solid var(--line);background:var(--card2);color:var(--ink);font-weight:600;border-radius:8px;padding:3px 10px;box-shadow:none} [data-theme^="cloud"] .plate.real{border:1.5px solid #1A1A1A;background:#fff;border-radius:5px;padding:0 10px;box-shadow:none} [data-theme^="cloud"] .plate.unknown{border-style:dashed;color:var(--muted);font-weight:500} [data-theme^="cloud"] td .plate + .pill{margin-left:6px} .xl-bar .f{margin:0}.xl-bar .f label{font-size:12px}.xl-bar input,.xl-bar select{height:38px} /* แดชบอร์ดส่วนล่าง: ช่องทาง 6 ใบเต็มแถว, แถว 3 การ์ด, ตารางล่าสุดเต็มแถว */ .lanes-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}@media(max-width:1400px){.lanes-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.lanes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .g-low{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:1100px){.g-low{grid-template-columns:1fr 1fr}}@media(max-width:760px){.g-low{grid-template-columns:1fr}} .chart-card .tw{margin:0 -4px} .hbar{height:150px} /* ----- Sidebar เต็ม = โทน navy เดียวกับ rail ----- */ [data-theme^="cloud"] .side{background:linear-gradient(180deg,#102C3C,#163B50);border-right:0;color:#fff} [data-theme^="cloud"] .side .brand{border-bottom-color:rgba(255,255,255,.14)} [data-theme^="cloud"] .side .brand .mark{content:url("/assets/gvms-wordmark-light.svg")} [data-theme^="cloud"] .side .brand .mark-sm{filter:brightness(0) invert(1)} [data-theme^="cloud"] .side .brand .t span:first-child{color:var(--cyan)}[data-theme^="cloud"] .side .brand .t span:last-child{color:#fff} [data-theme^="cloud"] .side .brand .collapse{border-color:rgba(255,255,255,.3);color:#fff}[data-theme^="cloud"] .side .brand .collapse:hover{border-color:#fff} [data-theme^="cloud"] .side nav a{color:rgba(255,255,255,.82)}[data-theme^="cloud"] .side nav a svg{stroke:rgba(255,255,255,.75)} [data-theme^="cloud"] .side nav a:hover{background:rgba(255,255,255,.10);color:#fff}[data-theme^="cloud"] .side nav a:hover svg{stroke:#fff} [data-theme^="cloud"] .side nav a.on,[data-theme^="cloud"] .side nav a.on:hover{background:var(--cyan);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.22)}[data-theme^="cloud"] .side nav a.on svg{stroke:#fff} [data-theme^="cloud"] .side nav .sec{color:rgba(255,255,255,.45)} [data-theme^="cloud"] .side nav a.grp.act{color:#fff}[data-theme^="cloud"] .side nav a.grp.act svg{stroke:var(--cyan)}[data-theme^="cloud"] .side nav .chev{color:rgba(255,255,255,.5)} [data-theme^="cloud"] .side nav a.sub{color:rgba(255,255,255,.7)}[data-theme^="cloud"] .side nav a.sub.on{background:rgba(32,165,215,.22);color:#fff} [data-theme^="cloud"] .side .user{border-top-color:rgba(255,255,255,.14)}[data-theme^="cloud"] .side .user .t{color:#fff}[data-theme^="cloud"] .side .user .t span{color:rgba(255,255,255,.6)} [data-theme^="cloud"] .side .user a{color:rgba(255,255,255,.7)}[data-theme^="cloud"] .side .user a:hover{color:#fff} [data-theme^="cloud"] .side .user .avatar,[data-theme^="cloud"] .side .user .av{background:var(--cyan);color:#fff} @media(max-width:820px){[data-theme^="cloud"] .side{background:linear-gradient(180deg,#102C3C,#163B50)}[data-theme^="cloud"] .shell.mini .side{background:linear-gradient(180deg,#102C3C,#163B50)}} /* หัวข้อย่อยที่ยังเป็น h3 ลอย ๆ + ตาราง: จัดระยะให้เป็นระเบียบ */ [data-theme^="cloud"] .pbody > h3,[data-theme^="cloud"] #view > h3{font-size:14.5px;margin:8px 0 -8px 2px} [data-theme^="cloud"] .pbody > form.row,[data-theme^="cloud"] #view > form.row,[data-theme^="cloud"] #view > .row{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:12px 14px;margin:0 0 4px} [data-theme^="cloud"] #view > .row > input,[data-theme^="cloud"] #view > form.row > input,[data-theme^="cloud"] #view > form.row > select{height:38px} [data-theme^="cloud"] .card .tw{margin:0} /* Live ช่องทาง ในธีม Cloud: พื้นภาพสว่าง ไม่ใช่กล่องดำ */ [data-theme^="cloud"] .lane-tile{border-radius:var(--r);box-shadow:var(--sh)} [data-theme^="cloud"] .lane-tile .hd{background:var(--card2);border-bottom:1px solid var(--line2)} [data-theme^="cloud"] .lane-tile .img{background:linear-gradient(180deg,#E9F0F5,#DDE7EE);color:var(--muted)} [data-theme^="cloud"] .lane-tile .img .ts{background:rgba(16,44,60,.72);color:#fff;padding:2px 8px;border-radius:999px;font-family:var(--font)} [data-theme^="cloud"] .lane-tile .img.noimg{background:linear-gradient(180deg,#E9F0F5,#DDE7EE)} [data-theme^="cloud"] .lane-tile.lt2 .hd .no{background:var(--navy)} [data-theme^="cloud"] .lane-tile .ft{background:var(--card2);border-top:1px solid var(--line2)} [data-theme^="cloud"] .lane-tile .ft .btn.sm{height:32px;padding:0 12px;font-size:12.5px} [data-theme^="cloud"] .lanes-live{gap:16px} @media(max-width:820px){[data-theme^="cloud"] .mtop{background:linear-gradient(90deg,#102C3C,#163B50);border-bottom:0;color:#fff}[data-theme^="cloud"] .mtop .hb,[data-theme^="cloud"] .mtop .pn{color:#fff}[data-theme^="cloud"] .mtop .bell{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}[data-theme^="cloud"] .mtop .bell.crit{color:#FFB4B4;border-color:#FFB4B4}[data-theme^="cloud"] .mtop img{content:url("/assets/gvms-symbol.svg");filter:brightness(0) invert(1)}}