:root{
    --primary:#2d8a89;
    --secondary:#313131;
    --bg:#071019;
    --panel:#0d1521;
    --card:rgba(10,16,26,0.92);
    --text:#e7edf3;
    --muted:#98a6b5;
    --border:rgba(255,255,255,0.08);
    --shadow:0 18px 40px rgba(0,0,0,0.28);
    --radius:24px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit} body{overflow-x:hidden}
*{scrollbar-width:thin;scrollbar-color:rgba(111,126,141,0.75) rgba(255,255,255,0.04)}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,0.04);border-radius:999px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(111,126,141,0.85), rgba(83,96,108,0.85));border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, rgba(137,151,165,0.95), rgba(95,109,123,0.95));border:2px solid transparent;background-clip:padding-box}

.portal-bg{min-height:100vh;background:var(--bg);background-size:cover;background-position:center}
.sidebar-floating{position:fixed;top:14px;left:14px;bottom:14px;width:72px;background:rgba(16,23,33,0.94);border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:16px 10px;z-index:999;backdrop-filter:blur(14px)}
.sidebar-top,.sidebar-bottom,.menu-list{display:flex;flex-direction:column;align-items:center;gap:16px}
.brand-avatar{display:flex;align-items:center;justify-content:center}.brand-logo-wrap{width:var(--sidebar-logo-width);height:auto;padding:4px 0 2px;background:transparent;box-shadow:none;border-radius:0}.brand-logo{display:block;width:var(--sidebar-logo-width);height:auto;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,0.18));}
.menu-btn{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;background:transparent;border:1px solid transparent;transition:.2s ease;color:#f4f7fb;line-height:1}
.menu-btn:hover{background:rgba(255,255,255,0.05);transform:translateY(-1px)}
.menu-btn.active{background:linear-gradient(135deg,#57d7d5,var(--primary));box-shadow:0 12px 28px rgba(45,138,137,0.28);color:#071019}
.menu-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.menu-btn.active svg{stroke:#071019}
.content-wrapper{padding:14px 18px 14px 102px;min-height:100vh;display:grid;grid-template-columns:320px 1fr;gap:18px}
.devices-panel,.main-panel,.map-card,.side-card,.stat-card,.login-box{background:var(--card);border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.devices-panel{padding:18px;min-height:calc(100vh - 28px);position:sticky;top:14px;overflow:hidden}
.panel-title{font-size:18px;font-weight:700;margin-bottom:12px}
.search-box,.form-control,.form-select{width:100%;height:44px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;color:#fff;padding:0 14px;outline:none}
.textarea-control{min-height:120px;padding:14px;resize:vertical}
.styled-file-input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}.upload-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:18px;min-height:220px}.upload-card-preview{display:flex;align-items:center;justify-content:center;min-height:110px;background:rgba(255,255,255,0.03);border:1px dashed rgba(255,255,255,0.12);border-radius:16px;padding:16px}.upload-card .btn-secondary-custom{text-align:center;justify-content:center}.upload-card{overflow:hidden}
.form-select{padding:12px 14px;height:auto}
.search-box:focus,.form-control:focus,.form-select:focus{border-color:rgba(45,138,137,0.45);box-shadow:0 0 0 4px rgba(45,138,137,0.10)}
.form-help{font-size:12px;color:var(--muted);margin-top:8px}
input[type=number].no-spinner{-moz-appearance:textfield}
input[type=number].no-spinner::-webkit-outer-spin-button,input[type=number].no-spinner::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.device-list{margin-top:14px;display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-height:0;max-height:none;overflow:auto;padding-right:4px;padding-bottom:8px}
.device-item{padding:14px;border-radius:20px;border:1px solid rgba(255,255,255,0.08);background:rgba(7,14,22,0.70);cursor:pointer;transition:.2s ease}
.device-item:hover{border-color:rgba(45,138,137,0.36);transform:translateY(-1px)}
.device-item.active{border-color:rgba(45,138,137,0.58);box-shadow:inset 0 0 0 1px rgba(45,138,137,0.18);background:rgba(10,28,36,0.70)}
.device-row-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.device-thumb{width:56px;height:42px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,0.08);background:#101826;flex-shrink:0}
.device-name{font-weight:700;display:flex;align-items:center;gap:8px}.device-plate{font-size:13px;color:var(--muted);margin-top:4px}
.device-meta{font-size:13px;color:#c8d2db;line-height:1.55}
.status-dot{width:8px;height:8px;border-radius:999px;display:inline-block}.status-online{background:#48e4c1}.status-offline{background:#75808e}
.main-panel{padding:18px;overflow:hidden}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px}.topbar h1{font-size:24px;margin-bottom:4px}.topbar p{color:var(--muted)}
.actions-row{display:flex;gap:10px;flex-wrap:wrap}
.btn-primary-custom,.btn-secondary,.btn-danger,.file-upload-button{height:44px;padding:0 18px;border-radius:14px;border:1px solid rgba(255,255,255,0.08);display:inline-flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;transition:.2s ease}
.btn-primary-custom{background:linear-gradient(135deg,#56d0d0,var(--primary));color:#ffffff}.btn-secondary{background:rgba(255,255,255,0.04);color:#fff}.btn-danger{background:rgba(255,76,76,0.14);color:#ffbebe;border-color:rgba(255,76,76,0.22)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}.stat-card{padding:22px}.stat-label{font-size:14px;color:var(--muted);margin-bottom:10px}.stat-value{font-size:28px;font-weight:800}.stat-sub{font-size:14px;color:#cfd8df;margin-top:8px}
.map-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}.map-card{padding:16px}#map{width:100%;height:560px;border-radius:22px;overflow:hidden}.side-card{padding:18px}
.selected-device-card{display:flex;gap:14px;align-items:flex-start}.selected-device-image{width:78px;height:60px;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,0.08);background:#101826;flex-shrink:0}.empty-note{font-size:14px;line-height:1.65;color:#c7d3dc}
.table-dark{width:100%;border-collapse:collapse}.table-dark th,.table-dark td{padding:14px 10px;border-bottom:1px solid rgba(255,255,255,0.06);text-align:left;font-size:14px;vertical-align:middle}.table-dark th{color:var(--muted);font-weight:700}.table-thumb{width:60px;height:44px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,0.08);background:#101826}.badge-status{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}.badge-online{background:rgba(72,228,193,0.12);color:#69f0d3}.badge-offline{background:rgba(255,255,255,0.08);color:#d3d9df}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-group.full{grid-column:1 / -1}.form-label{display:block;margin-bottom:8px;font-size:14px;color:#dbe4ed}
.alert{padding:12px 14px;border-radius:14px;margin-bottom:14px}.alert-danger{background:rgba(255,76,76,0.12);border:1px solid rgba(255,76,76,0.18);color:#ffb9b9}.alert-success{background:rgba(72,228,193,0.10);border:1px solid rgba(72,228,193,0.18);color:#aef4e4}
.relation-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}.relation-grid-clients{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.relation-card{display:block;position:relative;cursor:pointer}.relation-check{position:absolute;opacity:0;pointer-events:none}.relation-card-body{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);transition:.2s ease;min-height:78px}.relation-card:hover .relation-card-body{border-color:rgba(45,138,137,0.35);transform:translateY(-1px)}.relation-check:checked + .relation-card-body{border-color:rgba(45,138,137,0.7);background:rgba(45,138,137,0.10);box-shadow:inset 0 0 0 1px rgba(45,138,137,0.18)}.relation-check:checked + .relation-card-body::after{content:'✓';position:absolute;top:10px;right:12px;width:22px;height:22px;border-radius:999px;background:linear-gradient(135deg,#56d0d0,var(--primary));color:#071019;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:13px}
.relation-thumb{width:56px;height:42px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,0.08);background:#101826;flex-shrink:0}.relation-title{font-weight:700;color:#eff5fb}.relation-sub{font-size:13px;color:var(--muted);margin-top:4px}
.toggle-row{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:44px}.toggle-input{position:absolute;opacity:0;pointer-events:none}.toggle-switch{width:52px;height:30px;border-radius:999px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.10);position:relative;transition:.2s ease;flex-shrink:0}.toggle-switch::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s ease;box-shadow:0 4px 10px rgba(0,0,0,0.25)}.toggle-input:checked + .toggle-switch{background:linear-gradient(135deg,#56d0d0,var(--primary));border-color:transparent}.toggle-input:checked + .toggle-switch::after{transform:translateX(22px);background:#071019}.toggle-text{font-size:14px;color:#dbe4ed}
.file-upload-card{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03)}.device-preview-large{width:140px;height:96px;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,0.08);background:#101826}.file-upload-main{display:flex;flex-direction:column;gap:10px;min-width:260px;flex:1}.file-upload-button{align-self:flex-start;background:rgba(255,255,255,0.05);color:#fff}.file-input-hidden{display:none}.file-upload-name{font-size:13px;color:#c8d2db;min-height:20px}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg)}.login-box{width:100%;max-width:430px;padding:34px 30px;background:rgba(6,12,20,0.94)}.login-logo{text-align:center;margin-bottom:24px}.login-logo .login-logo-image{width:var(--login-logo-width);max-width:100%;display:block;margin:0 auto 16px;filter:drop-shadow(0 12px 28px rgba(0,0,0,0.22))}.login-logo h2{font-size:34px;margin-bottom:6px}.login-logo p{color:var(--muted)}.login-line-group{margin-bottom:18px}.login-line-label{display:flex;align-items:center;gap:10px;color:#dbe4ed;font-size:14px;margin-bottom:10px}.login-line-label svg{width:18px;height:18px;stroke:#a9c7cf;fill:none;stroke-width:2}.login-line-input{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.18);height:42px;color:#fff;padding:0 2px;outline:none;border-radius:0}.login-line-input:focus{border-bottom-color:rgba(86,208,208,0.92);box-shadow:0 8px 18px rgba(45,138,137,0.08)}.login-meta-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0 22px}.login-remember{display:flex;align-items:center;gap:10px;font-size:13px;color:#d5dee6}.login-remember input{accent-color:var(--primary)}.login-forgot{font-size:13px;color:#8fe8e1}.login-forgot:hover{color:#b7f5ef}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#0d1521;color:#e7edf3;border:1px solid rgba(255,255,255,0.08)}
.custom-map-marker{background:rgba(45,138,137,0.2);border:2px solid rgba(45,138,137,0.95);box-shadow:0 0 0 8px rgba(45,138,137,0.10)}
@media (max-width: 1400px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 1180px){.content-wrapper{grid-template-columns:1fr;padding-left:96px}.devices-panel{position:relative;top:auto;min-height:auto}.map-wrap{grid-template-columns:1fr}}
@media (max-width: 768px){.sidebar-floating{top:auto;left:12px;right:12px;bottom:12px;width:auto;height:82px;border-radius:24px;flex-direction:row;padding:12px 16px}.sidebar-top,.menu-list{flex-direction:row}.sidebar-bottom{display:none}.content-wrapper{padding:12px 12px 104px 12px}.stats-grid,.form-grid{grid-template-columns:1fr}.topbar{flex-direction:column}#map{height:420px}.file-upload-card{align-items:flex-start}}
.rf-map-marker{width:22px;height:22px;border-radius:999px;border:3px solid #dff;box-shadow:0 0 0 8px rgba(45,138,137,0.18),0 8px 18px rgba(0,0,0,0.35)}
.rf-map-marker.online{background:linear-gradient(135deg,#5ef0df,var(--primary))}
.rf-map-marker.offline{background:linear-gradient(135deg,#9aa7b4,#697686)}
.client-shell{padding:14px 18px 14px 102px;min-height:100vh;display:grid;grid-template-columns:320px 1fr;gap:18px}
.client-card{background:var(--card);border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow);backdrop-filter:blur(14px);padding:18px}
.setting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.log-list{display:flex;flex-direction:column;gap:10px}.log-item{padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03)}
@media (max-width: 1180px){.client-shell{grid-template-columns:1fr;padding-left:96px}}
@media (max-width: 768px){.client-shell{padding:12px 12px 104px 12px}.setting-grid{grid-template-columns:1fr}}

.relation-grid-tall{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.client-picker-card .relation-card-body{min-height:72px;}
.table-wrap{overflow:auto;border:1px solid rgba(255,255,255,0.06);border-radius:18px;}
.btn-xs{padding:8px 12px;font-size:12px;border-radius:12px;}
.form-inline{display:flex;gap:10px;align-items:end;flex-wrap:wrap;}
.rf-marker-wrap{background:transparent;border:none;}

.relation-card-body.is-selected{border-color:rgba(45,138,137,0.7);background:rgba(45,138,137,0.10);box-shadow:inset 0 0 0 1px rgba(45,138,137,0.18)}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:2px}
.choice-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice-card{position:relative;cursor:pointer}
.choice-card input{position:absolute;opacity:0;pointer-events:none}
.choice-card span{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:#dfe8ef;font-weight:700;transition:.2s ease;text-align:center}
.choice-card:hover span{border-color:rgba(45,138,137,0.35)}
.choice-card input:checked + span{background:linear-gradient(135deg, rgba(86,208,208,0.18), rgba(45,138,137,0.22));border-color:rgba(45,138,137,0.78);box-shadow:inset 0 0 0 1px rgba(45,138,137,0.18)}
.leaflet-container .leaflet-popup-content-wrapper,.leaflet-container .leaflet-popup-tip{background:#0b1118 !important;color:#f2f6fa !important;border:1px solid rgba(255,255,255,0.08) !important;box-shadow:0 18px 30px rgba(0,0,0,0.35)}
.leaflet-container .leaflet-popup-content,.leaflet-container .leaflet-popup-close-button{color:#f2f6fa !important}
.rf-device-popup .leaflet-popup-content-wrapper{background:linear-gradient(135deg,rgba(10,18,28,0.96),rgba(8,20,33,0.92)) !important;border:1px solid rgba(45,138,137,0.38) !important;border-radius:22px !important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 50px rgba(0,0,0,0.38),inset 0 0 0 1px rgba(45,138,137,0.12) !important}
.rf-device-popup .leaflet-popup-tip{background:rgba(8,20,33,0.94) !important;border:1px solid rgba(45,138,137,0.28) !important}
.rf-device-popup .leaflet-popup-content{margin:0 !important;padding:0 !important;min-width:252px}
.rf-device-popup .leaflet-popup-close-button{top:12px !important;right:12px !important;width:28px !important;height:28px !important;border-radius:999px;background:rgba(255,255,255,0.06);display:flex !important;align-items:center;justify-content:center;font-size:20px !important;line-height:1 !important;color:#eef9ff !important;transition:.2s ease}
.rf-device-popup .leaflet-popup-close-button:hover{background:rgba(45,138,137,0.18);color:#fff !important}
.rf-device-popup-card{padding:16px 18px 18px}
.rf-device-popup-title{display:flex;align-items:center;gap:10px;padding-right:30px;margin-bottom:12px}
.rf-device-popup-title strong{font-size:20px;line-height:1.05;font-weight:800;color:#f6fbff;letter-spacing:-0.02em}
.rf-device-popup-dot{width:12px;height:12px;border-radius:999px;box-shadow:0 0 0 6px rgba(45,138,137,0.12)}
.rf-device-popup-dot.online{background:linear-gradient(135deg,#5ef0df,var(--primary))}
.rf-device-popup-dot.offline{background:linear-gradient(135deg,#9aa7b4,#697686)}
.rf-device-popup-lines{display:grid;gap:8px}
.rf-device-popup-line{font-size:14px;line-height:1.45;color:#e7eef5}
.rf-device-popup-line b{color:#9adfd7;font-weight:700}
.client-dashboard-bg{background:transparent}
.client-shell-map{padding:14px 18px 14px 92px;min-height:100vh;position:relative;z-index:2}.client-shell-map-overlay .devices-panel,.client-shell-map-overlay .client-card-lite{background:rgba(9,15,23,0.82)}
.client-shell-map-fixed .devices-panel{position:fixed;top:24px;left:78px;bottom:24px;width:300px;z-index:4;overflow:hidden !important;overflow-y:hidden !important;min-height:auto;display:flex;flex-direction:column;padding:12px 10px 12px 10px}
.client-map-stage{position:relative;min-height:calc(100vh - 48px);overflow:visible;padding:0;background:transparent;border:none;box-shadow:none;backdrop-filter:none}
.client-map-full{position:fixed;inset:0;width:100vw;height:100vh;z-index:0}
.client-map-stage::after{content:'';position:fixed;inset:0;background:linear-gradient(180deg, rgba(7,10,15,0.08), rgba(7,10,15,0.02) 35%, rgba(7,10,15,0.12));pointer-events:none;z-index:1}
.client-map-overlay-right{position:fixed;top:24px;right:24px;bottom:24px;width:320px;z-index:4;overflow:auto}
.client-card-lite{background:rgba(9,15,23,0.86);border:1px solid rgba(255,255,255,0.08);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(14px);padding:18px}
.client-map-stage #map{height:100% !important;border-radius:0}
.client-map-stage .leaflet-control-container{display:none}
@media (max-width: 1280px){.client-map-overlay-right{position:relative;top:auto;right:auto;bottom:auto;width:auto;margin:120px 18px 18px auto;max-width:320px}}
@media (max-width: 1180px){.client-shell-map{padding-left:110px}.client-shell-map-fixed .devices-panel{position:relative;left:auto;top:auto;bottom:auto;width:auto;margin-right:336px}.client-map-stage{min-height:780px}.client-map-overlay-right{position:absolute;margin:0;max-width:320px}}
@media (max-width: 768px){.choice-grid,.choice-grid.three{grid-template-columns:1fr}.client-shell-map{padding:12px 12px 104px 12px}.client-shell-map-fixed .devices-panel{position:relative;width:auto;margin-right:0}.client-map-stage{min-height:720px}.client-map-overlay-right{position:relative;top:auto;right:auto;bottom:auto;width:auto;margin:12px}.client-map-stage #map{border-radius:24px}}

.rf-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:4000;padding:20px}
.rf-modal.open{display:flex}
.rf-modal-backdrop{position:absolute;inset:0;background:rgba(1,5,10,0.72);backdrop-filter:blur(4px)}
.rf-modal-dialog{position:relative;z-index:1;width:100%;max-width:520px;background:#09111b;border:1px solid rgba(255,255,255,0.08);border-radius:24px;box-shadow:0 28px 60px rgba(0,0,0,0.45);padding:22px}
.rf-modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.05);color:#fff;font-size:24px;cursor:pointer}
.pix-modal-content{text-align:center}.pix-modal-image{max-width:300px;width:100%;background:#fff;padding:14px;border-radius:20px;display:block;margin:0 auto 16px}
.text-link-button{display:inline-flex;align-items:center;justify-content:center}


.map-immersive{background:linear-gradient(135deg, rgba(5,9,14,0.70), rgba(6,10,16,0.62)), url("https://tile.openstreetmap.org/13/4124/6412.png");background-size:cover;background-position:center;}
.device-meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rf-ignition{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:700;border:1px solid rgba(255,255,255,0.08)}
.rf-ignition-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.rf-ignition.on{background:rgba(26,190,114,0.12);color:#8ef0be}.rf-ignition.on .rf-ignition-dot{background:#20db76;box-shadow:0 0 12px rgba(32,219,118,0.55)}
.rf-ignition.off{background:rgba(255,255,255,0.06);color:#b5c0ca}.rf-ignition.off .rf-ignition-dot{background:#7b8896}
.device-lock-toggle{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:56px;border-radius:16px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.05);overflow:hidden;color:#fff;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}.device-lock-toggle.compact{width:64px;height:36px;border-radius:12px;background:linear-gradient(135deg,rgba(24,224,201,0.96),rgba(45,138,137,0.94));border-color:rgba(24,224,201,0.42);box-shadow:0 10px 24px rgba(24,224,201,0.22)}
.device-lock-toggle .lock-icon{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;filter:none}
.device-lock-toggle .action-icon-svg{display:block;width:19px;height:19px;color:#fff;fill:none;stroke:currentColor;flex:none;stroke-linecap:round;stroke-linejoin:round}
.device-lock-toggle.unlocked,.device-lock-toggle.share-toggle{background:linear-gradient(135deg,rgba(24,224,201,0.96),rgba(45,138,137,0.94));color:#fff;border-color:rgba(24,224,201,0.42);box-shadow:0 10px 24px rgba(24,224,201,0.22)}
.device-lock-toggle.blocked{background:linear-gradient(135deg,rgba(174,54,54,0.92),rgba(214,61,61,0.86));color:#fff;border-color:rgba(255,143,143,0.34);box-shadow:0 10px 24px rgba(214,61,61,0.14)}
.device-lock-toggle.satellite-toggle{background:linear-gradient(135deg,rgba(24,224,201,0.96),rgba(45,138,137,0.94));color:#fff;border-color:rgba(24,224,201,0.42);box-shadow:0 10px 24px rgba(24,224,201,0.22)}
.device-lock-toggle.satellite-toggle.is-active{background:linear-gradient(135deg,rgba(7,20,33,0.98),rgba(11,29,44,0.96));border-color:rgba(86,208,208,0.56);box-shadow:inset 0 0 0 1px rgba(86,208,208,0.18),0 10px 24px rgba(24,224,201,0.16)}
.device-lock-toggle.holding.preview-block{background:rgba(214,61,61,0.30);color:#fff;border-color:rgba(214,61,61,0.5)}
.device-lock-toggle.holding.preview-unblock{background:rgba(26,190,114,0.28);color:#fff;border-color:rgba(26,190,114,0.46)}
.device-lock-toggle:active{transform:scale(.98)}
.selected-device-card{align-items:flex-start}.selected-device-card-compact{gap:16px}.selected-device-media{display:flex;flex-direction:column;align-items:center;gap:10px}
.selected-device-card + .actions-row{display:none}
.relation-search{max-width:420px}

.rf-status-icon-group{display:inline-flex;align-items:center;gap:6px}.rf-ignition-key{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 7px;border-radius:999px;border:1px solid rgba(255,255,255,0.08);font-size:13px;font-weight:700;color:#fff;flex-shrink:0}.rf-ignition-key-svg{display:block;width:15px;height:15px;color:currentColor;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.rf-ignition-key.on{background:linear-gradient(135deg,rgba(24,224,201,0.96),rgba(45,138,137,0.94));color:#fff;border-color:rgba(24,224,201,0.42);box-shadow:0 8px 18px rgba(24,224,201,0.18)}.rf-ignition-key.off{background:linear-gradient(135deg,rgba(174,54,54,0.92),rgba(214,61,61,0.86));color:#fff;border-color:rgba(255,143,143,0.30);box-shadow:0 8px 18px rgba(214,61,61,0.12)}.lock-form-inline{display:flex;justify-content:center;width:100%}

.relation-card.is-hidden{display:none !important;}

.share-toggle{background:linear-gradient(135deg,rgba(45,138,137,0.92),rgba(86,208,208,0.88));color:#fff;border-color:rgba(86,208,208,0.34);box-shadow:0 10px 24px rgba(45,138,137,0.18)}
.share-toggle:hover{background:linear-gradient(135deg,rgba(52,155,154,0.98),rgba(102,225,225,0.94))}.replay-toggle{background:linear-gradient(135deg,rgba(255,255,255,0.14),rgba(24,224,201,0.28));color:#fff;border-color:rgba(24,224,201,0.34);box-shadow:0 10px 24px rgba(24,224,201,0.16);text-decoration:none}
.replay-toggle:hover{background:linear-gradient(135deg,rgba(255,255,255,0.18),rgba(24,224,201,0.34))}
.replay-toggle.is-disabled{pointer-events:none;opacity:.45;filter:grayscale(.2)}

.client-shell-map-fixed .device-list{overflow-y:auto;overflow-x:hidden;min-height:0;overscroll-behavior:contain;scrollbar-gutter:auto;padding-right:0;margin-right:0;scrollbar-width:thin}
.client-shell-map-fixed .devices-panel .search-box{margin-bottom:14px;display:block;width:100%}
.client-shell-map-fixed .devices-panel .panel-title{margin-bottom:12px;padding-left:2px}
.relation-card input[type="checkbox"]:checked + .relation-card-body{border-color:rgba(45,138,137,0.7);background:rgba(45,138,137,0.10);box-shadow:inset 0 0 0 1px rgba(45,138,137,0.18)}

.devices-panel{scrollbar-width:none;-ms-overflow-style:none}.devices-panel::-webkit-scrollbar{width:0;height:0}.client-shell-map-fixed .devices-panel::after{display:none}.share-device-option{min-height:76px}.share-relation-card .relation-card-body::after{transition:.2s ease}


.admin-dashboard-layout{height:100vh;min-height:100vh;overflow:hidden}
.admin-dashboard-layout .content-wrapper{height:100vh;min-height:100vh;max-height:100vh;overflow:hidden;align-items:stretch}
.admin-dashboard-layout .devices-panel{display:flex;flex-direction:column;height:calc(100vh - 28px);min-height:0;max-height:calc(100vh - 28px)}
.admin-dashboard-layout .main-panel{display:flex;flex-direction:column;height:calc(100vh - 28px);min-height:0;max-height:calc(100vh - 28px);overflow:hidden}
.admin-dashboard-layout .map-wrap{flex:1 1 auto;min-height:0;max-height:100%}
.admin-dashboard-layout .map-card,.admin-dashboard-layout .side-card{min-height:0}
.admin-dashboard-layout .device-list{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;padding-right:0;margin-right:0;scrollbar-gutter:auto}
.client-shell-map-fixed .devices-panel{padding-right:0}
.client-shell-map-fixed .device-list{padding-right:0;margin-right:0;flex:1 1 auto}
.client-shell-map-fixed .device-item,.admin-dashboard-layout .device-item{width:100%;margin-right:0;align-self:stretch}

.admin-dashboard-layout .main-panel > *{min-width:0}
.admin-dashboard-layout .map-card{display:flex;flex-direction:column}
.admin-dashboard-layout .map-card #map{flex:1 1 auto;min-height:0}
.client-shell-map-fixed .devices-panel,.client-shell-map-fixed .device-list{min-width:0}
.client-shell-map-fixed .search-box{width:100%}
.client-shell-map-fixed .device-list,.admin-dashboard-layout .device-list{padding-bottom:8px}

.table-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.table-actions form{display:inline-flex;margin:0}

.client-shell-map-fixed .devices-panel > div:first-child{padding-left:0;padding-right:0;margin-left:0}
.client-shell-map-fixed .devices-panel .panel-title,.client-shell-map-fixed .devices-panel .empty-note{padding-left:0;margin-left:0}
.client-shell-map-fixed .devices-panel .search-box{margin-left:0;margin-right:0;width:100%}
.client-shell-map-fixed .device-list{padding-left:0;padding-right:0;margin-left:0}
.client-shell-map-fixed .device-item{width:100%;margin-left:0;margin-right:0}
.sidebar-floating{padding-top:14px}
.menu-list{gap:18px}
.menu-btn{display:flex;align-items:center;justify-content:center}

.client-shell-map-fixed{padding-left:106px !important}.client-shell-map-fixed .devices-panel{box-sizing:border-box}.client-shell-map-fixed .devices-panel .device-list{width:100%}.client-shell-map-fixed .devices-panel .device-item{display:block}.sidebar-floating .menu-btn{justify-content:center;align-items:center}.sidebar-floating .menu-btn svg{stroke:#fff !important}.client-shell-map-fixed .devices-panel,.client-shell-map-fixed .devices-panel *{max-width:100%}.brand-logo-wrap{display:flex;justify-content:center;align-items:center}.admin-dashboard-layout .content-wrapper{padding-bottom:14px}.admin-dashboard-layout .devices-panel{overflow:hidden}.admin-dashboard-layout .devices-panel .device-list{height:100%;max-height:100%}.admin-dashboard-layout .main-panel{padding-bottom:0}.login-page{background:var(--bg)}

.client-shell-map-fixed .devices-panel > div:first-child{padding-left:4px;padding-right:4px}.client-shell-map-fixed .devices-panel .panel-title{padding-left:2px}.client-shell-map-fixed .devices-panel .search-box{width:calc(100% - 8px);margin:0 4px 12px 4px}.client-shell-map-fixed .device-list{padding:0 4px 8px 4px}.client-shell-map-fixed .device-item{width:calc(100% - 0px)}.client-shell-map-fixed .device-item{margin:0}.client-shell-map-fixed .devices-panel .empty-note{padding-left:2px}.menu-list .menu-btn,.sidebar-bottom .menu-btn{width:40px;height:40px}


/* v32 fine alignment */
.client-shell-map{padding-left:126px !important;}
.client-shell-map-fixed .devices-panel{left:102px !important;width:292px !important;}
.client-shell-map-fixed .devices-panel > div:first-child{padding-left:0 !important;padding-right:0 !important;}
.client-shell-map-fixed .devices-panel .panel-title{padding-left:0 !important;margin:0 0 14px 0 !important;}
.client-shell-map-fixed .devices-panel .search-box{width:calc(100% - 24px) !important;margin:0 12px 14px 12px !important;}
.client-shell-map-fixed .device-list{padding:0 12px 12px 12px !important;}
.client-shell-map-fixed .device-item{width:100% !important;box-sizing:border-box;margin:0 !important;}
.client-shell-map-fixed .devices-panel .empty-note{padding-left:0 !important;}

.admin-notifications-form .form-group{margin-bottom:18px;}
.admin-notifications-form .textarea-control{margin-top:6px;}
.admin-notifications-form .btn-primary-custom{margin-top:18px;}

.login-page .btn-primary-custom{color:#ffffff !important;}


/* v33 alignment and finance spacing */
.client-shell-map-fixed .devices-panel{left:88px !important;width:286px !important;padding:14px 10px 14px 10px !important;}
.client-shell-map-fixed .devices-panel > div:first-child{padding:0 !important;margin:0 !important;}
.client-shell-map-fixed .devices-panel .panel-title{padding:0 !important;margin:0 0 14px 0 !important;}
.client-shell-map-fixed .devices-panel .search-box{width:100% !important;margin:0 0 14px 0 !important;}
.client-shell-map-fixed .device-list{padding:0 !important;margin:0 !important;}
.client-shell-map-fixed .device-item{width:100% !important;margin:0 0 8px 0 !important;}
.client-shell-map-fixed .device-item:last-child{margin-bottom:0 !important;}
.finance-create-form .btn-primary-custom{margin-top:16px;}


/* v35 reduce vertical spacing between device cards on client/shared pages */
.client-shell-map-fixed .device-list{gap:4px !important;}
.client-shell-map-fixed .device-item{margin:0 0 4px 0 !important;}
.client-shell-map-fixed .device-item:last-child{margin-bottom:0 !important;}


.rf-confirm-dialog{max-width:540px;padding:28px 24px 24px;text-align:center}.rf-confirm-icon{width:68px;height:68px;border-radius:999px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:#fff;background:linear-gradient(135deg,rgba(45,138,137,0.96),rgba(86,208,208,0.92));box-shadow:0 16px 32px rgba(45,138,137,0.24)}.rf-confirm-title{font-size:24px;font-weight:800;color:#f6fbff;margin-bottom:10px}.rf-confirm-text{color:#9fb2c7;line-height:1.65;font-size:15px;max-width:430px;margin:0 auto 22px}.rf-confirm-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.rf-confirm-actions .btn-primary-custom,.rf-confirm-actions .btn-danger,.rf-confirm-actions .btn-secondary{min-width:120px;justify-content:center}


/* v63 finance overdue + mobile dashboard */
.finance-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.client-mobile-picker,.client-mobile-dock{display:none}
.mobile-picker-current{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-radius:18px;border:1px solid rgba(45,138,137,0.45);background:linear-gradient(135deg,rgba(8,18,30,0.96),rgba(7,20,33,0.92));color:#fff;box-shadow:inset 0 0 0 1px rgba(45,138,137,0.18)}
.mobile-picker-current-main{display:flex;align-items:center;gap:12px;min-width:0}.mobile-picker-current-title{font-size:20px;font-weight:800;line-height:1.05}.mobile-picker-current-sub{font-size:13px;color:var(--muted);margin-top:4px}.mobile-picker-chevron{font-size:18px;color:#d8f7f2}
.mobile-picker-menu{display:none;margin-top:12px;padding:10px;border-radius:20px;border:1px solid rgba(255,255,255,0.08);background:rgba(6,14,24,0.94);box-shadow:var(--shadow);max-height:280px;overflow:auto}.mobile-picker-menu.open{display:flex;flex-direction:column;gap:10px}
.mobile-picker-option{width:100%;display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;border:1px solid rgba(45,138,137,0.32);background:rgba(7,20,33,0.9);color:#fff;text-align:left;transition:.2s ease}.mobile-picker-option .relation-title{display:flex;align-items:center;gap:8px}.mobile-picker-selected-indicator{width:24px;height:24px;border-radius:999px;background:linear-gradient(135deg,#56d0d0,var(--primary));color:#071019;font-weight:900;display:none;align-items:center;justify-content:center;font-size:13px;flex:0 0 24px;box-shadow:0 10px 20px rgba(45,138,137,0.22)}.mobile-picker-option.is-selected{border-color:rgba(45,138,137,0.72);background:rgba(45,138,137,0.10);box-shadow:inset 0 0 0 1px rgba(45,138,137,0.18)}.mobile-picker-option.is-selected .mobile-picker-selected-indicator{display:flex}
.client-mobile-dock{position:fixed;left:50%;right:auto;transform:translateX(-50%);bottom:92px;z-index:550;padding:10px 12px;border-radius:24px;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:calc(100vw - 24px)}.client-mobile-actions{display:flex;align-items:center;gap:8px;flex:none;justify-content:center;flex-wrap:nowrap}.client-mobile-actions .device-lock-toggle{width:54px;height:44px;border-radius:14px}.client-mobile-actions .lock-form-inline{width:auto;flex:none}.client-mobile-dock .selected-device-image{width:68px;height:50px;border-radius:14px;flex:none}
@media (max-width: 768px){.client-shell-map{padding:12px 12px 104px 12px !important;}.client-shell-map-fixed .devices-panel{display:none !important;}.client-map-stage{min-height:calc(100vh - 24px);border-radius:28px;overflow:hidden;position:relative}.client-map-stage #map{height:calc(100vh - 148px);min-height:620px;border-radius:28px}.client-desktop-selection{display:none !important;}.client-mobile-picker{display:block;position:absolute;left:14px;right:14px;top:14px;z-index:500;padding:14px;border-radius:24px}.client-mobile-dock{display:flex}.sidebar-floating{top:auto;bottom:12px;left:12px;right:12px;width:auto;height:72px;flex-direction:row;justify-content:space-between;padding:12px 14px;border-radius:28px}.sidebar-top,.sidebar-bottom{flex-direction:row;gap:12px}.sidebar-top{flex:1}.sidebar-bottom{display:none}.menu-list{flex-direction:row;gap:12px;justify-content:space-around;width:100%}.brand-avatar{display:none}}


/* v65 mobile iPhone interaction fixes */
@media (max-width: 768px){
  .client-map-stage{overflow:visible !important;}
  .client-mobile-picker{
    position:fixed !important;
    top:14px !important;
    left:14px !important;
    right:14px !important;
    width:auto !important;
    max-width:calc(100vw - 28px) !important;
    z-index:1200 !important;
    pointer-events:auto !important;
    box-sizing:border-box;
  }
  .client-mobile-picker *{
    pointer-events:auto !important;
  }
  .mobile-picker-current,
  .mobile-picker-option,
  .client-mobile-actions .device-lock-toggle,
  .client-mobile-actions a,
  .client-mobile-actions button{
    -webkit-appearance:none;
    appearance:none;
    touch-action:manipulation;
  }
  .mobile-picker-menu{
    position:relative;
    z-index:1201;
    max-height:38vh;
  }
  .client-mobile-dock{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    bottom:96px !important;
    width:auto !important;
    max-width:calc(100vw - 28px) !important;
    z-index:1200 !important;
    pointer-events:auto !important;
    box-sizing:border-box;
    padding:10px 12px !important;
  }
  .client-mobile-dock *{
    pointer-events:auto !important;
  }
  .client-mobile-actions{
    max-width:100%;
    justify-content:center;
    flex-wrap:nowrap;
  }
  .client-mobile-dock .selected-device-image{
    width:60px;
    height:44px;
  }
  .sidebar-floating{
    z-index:1000 !important;
  }
}

@media (max-width: 768px){
  .rf-device-popup .leaflet-popup-content{min-width:220px;max-width:calc(100vw - 72px)}
}