/* Survei Stakeholder SMAP — stylesheet terpusat */ /* Formulir survei */ body.page-survey {--ink:#293740;--muted:#46616c;--paper:#f7faf9;--card:#fff;--red:#df4b43;--red-dark:#bc3934;--teal:#087f78;--deep:#075c58;--line:#d7e0df;--gold:#efa91f}body.page-survey * {box-sizing:border-box}body.page-survey {margin:0;background-color:var(--paper);background-image:radial-gradient(#c9d6d4 1px,transparent 1px);background-size:18px 18px;color:var(--ink);font:22px/1.6 Arial,sans-serif}body.page-survey main {max-width:920px;margin:auto;padding:26px 18px 60px}body.page-survey .mast {display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);padding:0 0 14px}body.page-survey .logo {height:58px;width:auto;object-fit:contain}body.page-survey .logo-sig {max-width:90px;justify-self:start}body.page-survey .logo-sp {max-width:150px;justify-self:end}body.page-survey .brand {text-align:center;font-weight:800;letter-spacing:.03em}body.page-survey .brand span::first-letter {text-transform:uppercase}body.page-survey .admin-link {justify-self:end;grid-column:3;grid-row:2;margin-top:7px;font-size:.78rem;color:var(--muted);text-decoration:none}body.page-survey .admin-link:hover, body.page-survey .admin-link:focus {color:var(--red);text-decoration:underline}body.page-survey .hero {background:var(--card);border-top:8px solid var(--red);border-radius:10px;padding:38px 30px 30px;margin:28px 0 28px;box-shadow:0 14px 30px #31464014}body.page-survey .hero h1 {font:700 clamp(1.8rem,3vw,2.7rem)/1.18 Verdana,Arial,sans-serif;margin:10px 0 18px;max-width:820px;text-align:left}body.page-survey .hero p {color:var(--muted);max-width:790px;font-size:.92em}body.page-survey .panel {background:var(--card);border:1px solid var(--line);border-radius:10px;padding:28px;box-shadow:0 14px 30px #31464014;margin:18px 0}body.page-survey .hidden {display:none!important}body.page-survey .choice-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:16px}body.page-survey .role {padding:24px 22px;min-height:104px;border:1px solid var(--line);border-radius:10px;text-align:left;background:#fff;color:var(--ink);cursor:pointer;transition:.2s}body.page-survey .role:hover, body.page-survey .role.active {border-color:var(--teal);background:#edf8f5}body.page-survey .role strong {display:block;font-size:1.2em}body.page-survey .role small {color:var(--muted);font-size:1.02em}body.page-survey .progress {height:14px;background:#e7efed;border-radius:99px;overflow:hidden;margin:12px 0 8px;box-shadow:inset 0 1px 2px #183c3520}body.page-survey .progress i {display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--red),#f28a42);transition:width .25s;border-radius:99px}body.page-survey .step {color:var(--red-dark);font-weight:800;font-size:1.2rem;letter-spacing:.02em}body.page-survey .progress-text {margin:0 0 18px;color:var(--muted);font-size:1rem;font-weight:700}body.page-survey .other-input:disabled {background:#eef2f1;color:#819196;cursor:not-allowed;opacity:.8}body.page-survey input[type=text], body.page-survey input[type=email], body.page-survey input[type=tel], body.page-survey input[type=password], body.page-survey textarea {width:100%;padding:16px 17px;border:1px solid #bfcfcb;border-radius:9px;font:inherit;color:var(--ink);background:#fff;box-shadow:inset 0 1px 2px #183c3510;transition:border-color .2s,box-shadow .2s}body.page-survey input[type=text]:focus, body.page-survey input[type=email]:focus, body.page-survey input[type=tel]:focus, body.page-survey input[type=password]:focus, body.page-survey textarea:focus {outline:0;border-color:var(--red);box-shadow:0 0 0 4px #df4b4320}body.page-survey .btn {border:0;border-radius:7px;padding:13px 20px;background:var(--red);color:#fff;font-weight:700;cursor:pointer}body.page-survey .btn:hover {background:var(--red-dark)}body.page-survey .btn.alt {background:#e9efed;color:var(--deep)}body.page-survey .actions {display:flex;justify-content:space-between;gap:12px;margin-top:24px}body.page-survey .step {color:var(--red-dark);font-weight:700;font-size:1rem}body.page-survey .question {border-top:1px solid var(--line);padding:24px 0}body.page-survey .question:first-of-type {border-top:0}body.page-survey .question h3 {margin:0 0 14px;font-size:1.2rem}body.page-survey .rank {display:grid;gap:11px}body.page-survey .priority-space {display:block;height:1em}body.page-survey .optional {font-size:.82em;font-weight:400;color:var(--muted)}body.page-survey .radio-option {display:flex;align-items:flex-start;gap:10px;margin:12px 0;font-weight:700;line-height:1.45}body.page-survey .radio-option input {flex:0 0 auto;margin:6px 0 0;width:auto;padding:0}body.page-survey .check-option {display:flex;align-items:flex-start;gap:10px;margin:12px 0;font-weight:700;line-height:1.45}body.page-survey .check-option input {flex:0 0 auto;margin:6px 0 0;width:auto}body.page-survey .check-options label {font-weight:700;margin:9px 0}body.page-survey .check-options input {width:auto;margin-right:7px}body.page-survey .other-grid {display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;margin-top:10px}body.page-survey .other-num {font-weight:700;color:var(--red-dark);min-width:28px}body.page-survey .other-check {display:grid!important;grid-template-columns:18px 28px minmax(0,1fr);gap:6px;align-items:center}body.page-survey .other-check input {margin:0}body.page-survey .other-check strong {font-weight:700}body.page-survey .other-input {padding:14px 16px;border:1px solid #bfcfcb;border-radius:7px;font:inherit;width:100%;min-height:54px}body.page-survey .other-grid {display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;margin-top:10px}body.page-survey .stars {display:grid;grid-template-columns:auto auto auto auto auto 1fr;align-items:center;column-gap:4px;row-gap:5px}body.page-survey .stars .rating-word {grid-column:1/-1;justify-self:end;font-size:.86rem;color:var(--muted);margin-left:0}body.page-survey .rating-block {padding:10px 0 18px}body.page-survey .rating-block>label {margin-bottom:12px}body.page-survey .stars span {display:block;border:0;background:transparent;padding:0;min-width:0;min-height:0;font-size:2.45rem;line-height:1;color:#c3cfd2;cursor:pointer;transition:color .18s,transform .18s,filter .18s}body.page-survey .stars label:hover span, body.page-survey .stars span.selected {color:#f2ad1b}body.page-survey .stars label:hover span {transform:translateY(-2px)}body.page-survey .stars span.selected {filter:drop-shadow(0 2px 2px #d69b1a50)}body.page-survey .stars input:focus-visible+span {outline:3px solid #df4b4366;outline-offset:5px;border-radius:50%}body.page-survey .stars .rating-word {font-size:.82rem;color:var(--muted);margin-left:8px}@media(max-width:650px) {body{font-size:21px}.other-grid{grid-template-columns:1fr;gap:5px;align-items:stretch}.other-check{display:flex;align-items:center;gap:7px}.other-input{min-height:54px;font-size:1rem}.stars span{font-size:2.2rem}.stars{column-gap:3px}}body.page-survey a.title {display:block}body.page-survey .rank label {display:grid;grid-template-columns:20px 28px minmax(0,1fr);column-gap:6px;align-items:start}body.page-survey .rank label input {margin-top:5px}body.page-survey .rank .num {font-weight:700;color:var(--red-dark);min-width:0;font-size:1.05em}body.page-survey .rank .num:not(:empty)::after {content:''}body.page-survey .stars label {margin:0}body.page-survey .stars input {position:absolute;opacity:0}body.page-survey .stars span {display:grid;place-items:center;border:0;border-radius:0;padding:0;cursor:pointer;color:#c8d1d1}body.page-survey .stars input:checked+span {background:transparent;border-color:transparent;color:#eaa51b}body.page-survey .rating-question {padding:18px 0;border-top:1px solid var(--line)}body.page-survey .rating-question:first-child {border-top:0}body.page-survey .rating-question>label {margin:0 0 12px}body.page-survey .scale {display:grid;grid-template-columns:minmax(150px,1fr) repeat(5,44px) minmax(100px,1fr);align-items:center;gap:8px;color:var(--muted)}body.page-survey .scale>span:last-child {text-align:right}body.page-survey .scale label {margin:0;text-align:center}body.page-survey .scale input {position:absolute;opacity:0}body.page-survey .scale b {display:grid;place-items:center;width:32px;height:32px;margin:auto;border:1px solid var(--line);border-radius:50%;cursor:pointer}body.page-survey .scale input:checked+b {background:var(--red);border-color:var(--red);color:#fff}body.page-survey .check-options label {font-weight:700;margin:9px 0}body.page-survey .check-options input {width:auto;margin-right:7px}@media(max-width:650px) {.scale{grid-template-columns:1fr repeat(5,34px) 1fr;gap:3px;font-size:.9rem}.scale b{width:28px;height:28px}.scale>span:last-child{text-align:right}.rating-question>label{font-size:1rem}}body.page-survey .progress i {display:block;height:100%;width:20%;background:var(--red);transition:width .2s}body.page-survey .progress-text {margin:0 0 18px;color:var(--muted);font-size:.86rem}body.page-survey .note {color:#20282c;font-size:.95rem;font-weight:700}body.page-survey .priority-rules {color:#20282c;font-weight:700;line-height:1.8}body.page-survey .rank label, body.page-survey .other-input, body.page-survey .rating-block>label, body.page-survey .radio-option, body.page-survey .check-option, body.page-survey .check-options label {font-size:1em;font-weight:700}body.page-survey .error {color:#a52b2b;margin-top:10px}body.page-survey .success {color:var(--deep);font-size:1.3rem}body.page-survey .footer {color:var(--muted);font-size:.85rem;margin-top:30px}@media(max-width:650px) {main{padding:14px 10px 40px}.mast{grid-template-columns:1fr 1fr;gap:8px}.brand{grid-column:1/-1;grid-row:2;order:3;font-size:.9rem}.logo-sig,.logo-sp{grid-row:1}.admin-link{grid-column:1/-1;grid-row:3;justify-self:end}.hero{padding:28px 20px 22px;margin-top:18px}.hero h1{font-size:1.8rem}.panel{padding:19px}.choice-grid{grid-template-columns:1fr}.actions{flex-direction:column-reverse}.actions .btn{width:100%}}body.page-survey #channelQuestion>.note {font-weight:400}body.page-survey #channelQuestion>p.note {font-weight:400}body.page-survey #ratingQuestions {font-weight:400}body.page-survey #ratingQuestions .rating-block>label {font-weight:400}body.page-survey #needIntro {color:#20282c;font-size:1em;font-weight:700}body.page-survey .note {font-size:1em}body.page-survey .priority-rules {font-size:1em}body.page-survey .question h3 {font-size:1.08em}body.page-survey .rank label, body.page-survey .other-input, body.page-survey .rating-block>label, body.page-survey .radio-option, body.page-survey .check-option, body.page-survey .check-options label {font-size:1em}body.page-survey .progress, body.page-survey .progress-text {display:none!important}body.page-survey .hero h1 {font-size:clamp(1.65rem,2.5vw,2.35rem)}@media(max-width:650px) {.hero h1{font-size:1.55rem}.role strong{font-size:1.12em}.role small{font-size:1em}}body.page-survey {font-size:18px}body.page-survey .panel {padding:23px}body.page-survey .question {padding:20px 0}body.page-survey .role {padding:21px 19px;min-height:94px}body.page-survey .choice-grid {gap:13px}body.page-survey .other-input {font-size:16px;font-weight:400}body.page-survey .other-input::placeholder {font-size:16px;font-weight:400}body.page-survey .rank {gap:9px}@media(max-width:650px) {body{font-size:17px}.panel{padding:16px}.question{padding:18px 0}}body.page-survey .note {font-weight:700}body.page-survey .priority-rules {font-weight:400}body.page-survey .need-intro, body.page-survey .question .note:not(.priority-rules) {font-weight:700}body.page-survey #channelQuestion>p.note {font-weight:400}body.page-survey #channelQuestions .check-option, body.page-survey #channelQuestions .check-options label {display:flex!important;flex-direction:row;align-items:flex-start;gap:10px;width:100%;margin:12px 0;line-height:1.45;font-weight:700}body.page-survey #channelQuestions .check-options {display:flex!important;flex-direction:column!important;align-items:stretch;width:100%;gap:0}body.page-survey #channelQuestions .check-option input, body.page-survey #channelQuestions .check-options label input {flex:0 0 auto;margin:6px 0 0;width:auto} /* Login admin */ body.page-admin-login {--ink:#293740;--muted:#60727a;--paper:#f7faf9;--card:#fff;--red:#df4b43;--red-dark:#bc3934;--line:#d7e0df;--teal:#087f78}body.page-admin-login * {box-sizing:border-box}body.page-admin-login {margin:0;background-color:var(--paper);background-image:radial-gradient(#c9d6d4 1px,transparent 1px);background-size:18px 18px;color:var(--ink);font:16px/1.55 Arial,sans-serif}body.page-admin-login main {max-width:1100px;margin:auto;padding:26px 18px 60px}body.page-admin-login .mast {display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);padding:0 0 14px}body.page-admin-login .logo {height:58px;width:auto;object-fit:contain}body.page-admin-login .logo-sig {max-width:90px;justify-self:start}body.page-admin-login .logo-sp {max-width:150px;justify-self:end}body.page-admin-login .brand {text-align:center;font-weight:800;letter-spacing:.03em}body.page-admin-login .home-link {justify-self:end;grid-column:3;grid-row:2;margin-top:7px;font-size:.85rem;color:var(--muted);text-decoration:none}body.page-admin-login .home-link:hover {color:var(--red);text-decoration:underline}body.page-admin-login .panel {background:var(--card);border:1px solid var(--line);border-radius:10px;padding:34px;margin:28px 0;box-shadow:0 14px 30px #31464014}body.page-admin-login h1 {font-size:2rem;margin:0 0 28px}body.page-admin-login label {display:block;font-weight:700;margin:16px 0 6px}body.page-admin-login input {width:100%;padding:15px 16px;border:1px solid #bfcfcb;border-radius:9px;font:inherit;color:var(--ink);background:#fff}body.page-admin-login input:focus {outline:0;border-color:var(--red);box-shadow:0 0 0 4px #df4b4320}body.page-admin-login .actions {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px}body.page-admin-login .btn {border:0;border-radius:7px;padding:13px 22px;background:var(--red);color:#fff;font-weight:700;cursor:pointer;text-decoration:none}body.page-admin-login .btn:hover {background:var(--red-dark)}body.page-admin-login .btn.alt {background:#e9efed;color:#075c58}body.page-admin-login .error {color:#a52b2b;margin:10px 0 0}@media(max-width:650px) {main{padding:14px 10px 40px}.mast{grid-template-columns:1fr 1fr;gap:8px}.brand{grid-column:1/-1;grid-row:2;order:3;font-size:.9rem}.logo-sig,.logo-sp{grid-row:1}.home-link{grid-column:1/-1;grid-row:3;justify-self:end}.panel{padding:22px 19px}.actions{flex-direction:column-reverse;align-items:stretch}.btn{text-align:center}} /* Dashboard admin */ body.page-admin-dashboard {--ink:#142b2b;--muted:#657675;--teal:#087f78;--paper:#f4f6f2;--line:#d8e2df}body.page-admin-dashboard * {box-sizing:border-box}body.page-admin-dashboard {margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 Arial}body.page-admin-dashboard main {max-width:1200px;margin:auto;padding:24px 16px 60px}body.page-admin-dashboard header {display:flex;justify-content:space-between;align-items:flex-start;gap:14px;border-bottom:1px solid var(--line);padding-bottom:18px}body.page-admin-dashboard .header-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}body.page-admin-dashboard .logout-button {display:inline-block;padding:11px 15px;background:var(--teal);color:white;border-radius:8px;font-weight:bold;text-decoration:none;border:0;cursor:pointer;font-family:inherit;font-size:inherit;line-height:1.5}body.page-admin-dashboard .button, body.page-admin-dashboard .logout-button {display:inline-flex;align-items:center;justify-content:center;padding:11px 15px;background:var(--teal);color:#fff;border-radius:8px;font-weight:bold;text-decoration:none;white-space:nowrap}body.page-admin-dashboard .button:hover, body.page-admin-dashboard .logout-button:hover {background:#066a65;color:#fff;text-decoration:none}body.page-admin-dashboard .toolbar {display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:20px 0}body.page-admin-dashboard .toolbar form:first-child {flex:1;min-width:210px}body.page-admin-dashboard .toolbar .delete-btn {align-self:end}body.page-admin-dashboard .toolbar select {padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff}body.page-admin-dashboard .delete-btn {border:0;padding:11px 15px;background:#b42318;color:#fff;border-radius:8px;font-weight:bold;cursor:pointer}body.page-admin-dashboard .record-head {display:flex;align-items:center;gap:12px}body.page-admin-dashboard .record-head input {width:18px;height:18px}body.page-admin-dashboard .notice {background:#e7f6ef;color:#075c58;padding:10px 14px;border-radius:8px;margin:14px 0}body.page-admin-dashboard .stats {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}body.page-admin-dashboard .stat, body.page-admin-dashboard .card, body.page-admin-dashboard .record {background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px}body.page-admin-dashboard .stat strong {font-size:2rem;color:var(--teal);display:block}body.page-admin-dashboard .grid {display:grid;grid-template-columns:repeat(2,1fr);gap:14px}body.page-admin-dashboard .card h3 {margin-top:0}body.page-admin-dashboard .bar {margin:12px 0}body.page-admin-dashboard .bar div {display:flex;justify-content:space-between;gap:10px}body.page-admin-dashboard .bar span {overflow-wrap:anywhere}body.page-admin-dashboard .bar i {display:block;background:#e5eeeb;height:9px;border-radius:6px;overflow:hidden;margin-top:5px}body.page-admin-dashboard .bar em {display:block;background:var(--teal);height:100%;border-radius:6px}body.page-admin-dashboard .muted {color:var(--muted)}body.page-admin-dashboard .record {margin:12px 0}body.page-admin-dashboard .record h3 {margin:0 0 12px;color:var(--teal)}body.page-admin-dashboard .record dl {display:grid;grid-template-columns:170px 1fr;gap:7px;margin:0}body.page-admin-dashboard .record dt {font-weight:bold;color:var(--muted)}body.page-admin-dashboard .record dd {margin:0;white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:700px) {header{align-items:stretch;flex-direction:column}.header-actions{justify-content:stretch}.header-actions .button,.header-actions .logout-button{flex:1;text-align:center}.toolbar{align-items:stretch;flex-direction:column}.toolbar form:first-child{min-width:0}.toolbar .delete-btn{width:100%;align-self:stretch}.stats,.grid{grid-template-columns:1fr}.record dl{grid-template-columns:1fr;gap:2px}.record dd{margin-bottom:8px}} /* Dashboard grafik */ body.page-admin-charts {--ink:#173234;--muted:#617477;--teal:#087f78;--red:#df4b43;--paper:#f3f7f5;--line:#d8e4e0;--card:#fff}body.page-admin-charts * {box-sizing:border-box}body.page-admin-charts {margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 Arial,sans-serif}body.page-admin-charts main {max-width:1320px;margin:auto;padding:22px 18px 60px}body.page-admin-charts .top {display:flex;justify-content:space-between;align-items:center;gap:18px;border-bottom:1px solid var(--line);padding-bottom:15px}body.page-admin-charts .top h1 {margin:0;font-size:1.7rem}body.page-admin-charts .actions {display:flex;gap:8px;flex-wrap:wrap}body.page-admin-charts .button {display:inline-block;border:0;border-radius:8px;padding:10px 14px;background:var(--teal);color:#fff;text-decoration:none;font-weight:700;cursor:pointer}body.page-admin-charts .button.alt {background:#e5efec;color:var(--teal)}body.page-admin-charts .filter {display:flex;align-items:end;gap:10px;margin:18px 0;flex-wrap:wrap}body.page-admin-charts .filter label {font-weight:700}body.page-admin-charts .filter select {display:block;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;min-width:230px}body.page-admin-charts .cards {display:grid;grid-template-columns:repeat(4,1fr);gap:12px}body.page-admin-charts .card {background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 8px 24px #21433c0d}body.page-admin-charts .card h2, body.page-admin-charts .card h3 {margin:0 0 12px}body.page-admin-charts .metric {font-size:2rem;color:var(--teal);font-weight:800}body.page-admin-charts .grid {display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}body.page-admin-charts .chartbox {height:330px}body.page-admin-charts .chartbox.tall {height:640px}body.page-admin-charts .chartbox canvas {max-height:100%}body.page-admin-charts .record {margin-top:12px}body.page-admin-charts .record summary {cursor:pointer;font-weight:700;color:var(--teal);padding:10px 0}body.page-admin-charts .record dl {display:grid;grid-template-columns:180px minmax(0,1fr);gap:6px;margin:0}body.page-admin-charts .record dt {font-weight:700;color:var(--muted)}body.page-admin-charts .record dd {margin:0;white-space:pre-wrap;overflow-wrap:anywhere}body.page-admin-charts .muted {color:var(--muted)}@media(max-width:850px) {.cards{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.top{align-items:stretch;flex-direction:column}.record dl{grid-template-columns:1fr;gap:1px}.record dd{margin-bottom:8px}}@media print {body{background:#fff}.top .actions,.filter{display:none}.card{box-shadow:none;break-inside:avoid}.grid{grid-template-columns:1fr 1fr}.record{break-inside:avoid}} /* ===================================================================== Perbaikan responsif global (ditambahkan agar tampil rapi di semua perangkat: ponsel, tablet, laptop). Selector diberi awalan body.page-* agar spesifisitasnya menang atas aturan dasar, sehingga override pada layar kecil benar-benar diterapkan. ===================================================================== */ /* Dasar lintas halaman: box-sizing, cegah overflow horizontal, media luwes */ html { box-sizing: border-box; -webkit-text-size-adjust: 100%; } *, *::before, *::after { box-sizing: border-box; } body { overflow-x: hidden; } img, canvas, svg, table { max-width: 100%; } img { height: auto; } /* ------------------------------------------------------------------ */ /* FORMULIR SURVEI */ /* ------------------------------------------------------------------ */ @media (max-width: 760px) { body.page-survey main { padding: 16px 12px 44px; } body.page-survey .hero { padding: 26px 18px 20px; } body.page-survey .hero h1 { font-size: clamp(1.4rem, 5vw, 1.9rem); } body.page-survey .panel { padding: 18px 15px; } body.page-survey .choice-grid { grid-template-columns: 1fr; gap: 12px; } body.page-survey .actions { flex-direction: column-reverse; } body.page-survey .actions .btn { width: 100%; } } @media (max-width: 560px) { body.page-survey { font-size: 16px; } body.page-survey .mast { grid-template-columns: auto auto; row-gap: 6px; } body.page-survey .brand { grid-column: 1 / -1; grid-row: 2; order: 3; font-size: .95rem; } body.page-survey .logo-sig, body.page-survey .logo-sp { grid-row: 1; } body.page-survey .logo { height: 46px; } body.page-survey .admin-link { grid-column: 1 / -1; grid-row: 3; justify-self: end; } body.page-survey .hero h1 { font-size: 1.4rem; } body.page-survey .rank label, body.page-survey .other-check { grid-template-columns: 18px 24px minmax(0, 1fr); column-gap: 5px; } body.page-survey .stars { grid-template-columns: repeat(5, auto) 1fr; column-gap: 2px; } body.page-survey .stars span { font-size: 2rem; } body.page-survey .scale { grid-template-columns: 1fr repeat(5, 30px) 1fr; gap: 2px; font-size: .85rem; } body.page-survey .scale b { width: 26px; height: 26px; } } /* ------------------------------------------------------------------ */ /* LOGIN ADMIN */ /* ------------------------------------------------------------------ */ @media (max-width: 560px) { body.page-admin-login main { padding: 16px 12px 44px; } body.page-admin-login .mast { grid-template-columns: auto auto; row-gap: 6px; } body.page-admin-login .brand { grid-column: 1 / -1; grid-row: 2; order: 3; font-size: .95rem; } body.page-admin-login .logo-sig, body.page-admin-login .logo-sp { grid-row: 1; } body.page-admin-login .home-link { grid-column: 1 / -1; grid-row: 3; justify-self: end; } body.page-admin-login .panel { padding: 22px 18px; } body.page-admin-login h1 { font-size: 1.6rem; } body.page-admin-login .actions { flex-direction: column-reverse; align-items: stretch; } body.page-admin-login .btn { text-align: center; } } /* ------------------------------------------------------------------ */ /* DASHBOARD ADMIN */ /* ------------------------------------------------------------------ */ @media (max-width: 900px) { body.page-admin-dashboard .stats { grid-template-columns: 1fr 1fr; } body.page-admin-dashboard .grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { body.page-admin-dashboard main { padding: 18px 12px 48px; } body.page-admin-dashboard header { flex-direction: column; align-items: stretch; } body.page-admin-dashboard .header-actions { justify-content: stretch; } body.page-admin-dashboard .header-actions .button, body.page-admin-dashboard .header-actions .logout-button, body.page-admin-dashboard .header-actions form { flex: 1 1 auto; } body.page-admin-dashboard .header-actions form { display: flex; } body.page-admin-dashboard .header-actions .logout-button { width: 100%; } body.page-admin-dashboard .toolbar { flex-direction: column; align-items: stretch; } body.page-admin-dashboard .toolbar form:first-child { min-width: 0; } body.page-admin-dashboard .toolbar .delete-btn { width: 100%; } body.page-admin-dashboard .stats { grid-template-columns: 1fr; } body.page-admin-dashboard .record dl { grid-template-columns: 1fr; gap: 2px; } body.page-admin-dashboard .record dt { margin-top: 8px; } body.page-admin-dashboard .record dd { margin-bottom: 6px; } } /* ------------------------------------------------------------------ */ /* DASHBOARD GRAFIK */ /* ------------------------------------------------------------------ */ @media (max-width: 900px) { body.page-admin-charts .cards { grid-template-columns: 1fr 1fr; } body.page-admin-charts .grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { body.page-admin-charts main { padding: 18px 12px 48px; } body.page-admin-charts .top { flex-direction: column; align-items: stretch; } body.page-admin-charts .actions { flex-direction: column; } body.page-admin-charts .actions .button { width: 100%; text-align: center; } body.page-admin-charts .cards { grid-template-columns: 1fr; } body.page-admin-charts .filter select { min-width: 0; width: 100%; } body.page-admin-charts .chartbox { height: 300px; } body.page-admin-charts .chartbox.tall { height: 460px; } body.page-admin-charts .record dl { grid-template-columns: 1fr; gap: 1px; } body.page-admin-charts .record dt { margin-top: 8px; } body.page-admin-charts .record dd { margin-bottom: 6px; } } body.page-survey .logo, body.page-admin-login .logo { width: auto; object-fit: contain; } body.page-survey .logo-sig, body.page-admin-login .logo-sig { height: 52px; } body.page-survey .logo-sp, body.page-admin-login .logo-sp { height: 70px; } body.page-survey .logo-sig, body.page-admin-login .logo-sig { justify-self: start; } body.page-survey .logo-sp, body.page-admin-login .logo-sp { justify-self: end; } @media (max-width: 560px) { body.page-survey .logo-sig, body.page-admin-login .logo-sig { height: 40px; } body.page-survey .logo-sp, body.page-admin-login .logo-sp { height: 60px; } }