/* =======================================
   Remote Office Center
   style.css
======================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;

    background:#eef3f8;

    color:#222;

    padding:40px;

}

/* =======================================
   Header
======================================= */

.header{

    margin-bottom:30px;

}

.header h1{

    font-size:42px;

    font-weight:700;

    color:#1f2937;

}

.subtitle{

    margin-top:10px;

    color:#16a34a;

    font-size:20px;

    font-weight:600;

}

/* =======================================
   Dashboard Table
======================================= */

.dashboard{

    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.dashboard thead{

    background:#f3f4f6;

}

.dashboard th{

    padding:18px;

    text-align:center;

    font-size:18px;

    color:#374151;

}

.dashboard td{

    padding:22px;

    border-top:1px solid #ececec;

    text-align:center;

    vertical-align:middle;

}

/* =======================================
   Device
======================================= */

.device{

    text-align:left;

    font-size:22px;

    font-weight:600;

}

.info{

    margin-top:8px;

    font-size:14px;

    color:#6b7280;

}

/* =======================================
   Buttons
======================================= */

button{

    width:120px;

    height:46px;

    border:none;

    border-radius:10px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

    color:white;

}

button:hover{

    transform:translateY(-2px);

    box-shadow:0 5px 12px rgba(0,0,0,.18);

}

/* =======================================
   Colors
======================================= */

.green{

    background:#22c55e;

}

.orange{

    background:#f59e0b;

}

.red{

    background:#ef4444;

}

button:disabled{

    background:#cbd5e1;

    color:#555;

    cursor:not-allowed;

    box-shadow:none;

}

/* =======================================
   Mobile
======================================= */

@media (max-width:900px){

.dashboard{

    display:block;

    overflow-x:auto;

}

body{

    padding:15px;

}

.header h1{

    font-size:30px;

}

button{

    width:95px;

    height:42px;

    font-size:14px;

}

.device{

    font-size:18px;

}

}

.connection-panel{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-top:18px;

}

.connection-progress{

    font-size:16px;

    font-weight:600;

    color:#374151;

}

.activity-log{

    width:100%;

    max-width:560px;

    padding:14px 16px;

    border:1px solid #dbe3ec;

    border-radius:10px;

    background:#f8fafc;

}

.activity-log h2{

    margin-bottom:8px;

    font-size:16px;

    color:#374151;

}

.activity-log ul{

    max-height:120px;

    overflow-y:auto;

    list-style:none;

}

.activity-log li{

    padding:3px 0;

    color:#4b5563;

    font-size:14px;

}