/* ============================================================
   ACCOUNT SETTINGS — ALIGNED WITH account.php
   Depends on shared.css
============================================================ */

/* ============================================================
   TOGGLES & LINKS (ORG / DEVICE)
============================================================ */

.org-toggle,
.device-drawer-trigger{
display:inline-flex;
align-items:center;
gap:6px;
text-decoration:none;
color:var(--nav-accent);
font-weight:600;
cursor:pointer;
transition:opacity var(--transition),background var(--transition);
padding:4px 6px;
border-radius:var(--radius-sm);
}

.org-toggle:hover,
.device-drawer-trigger:hover{
background:rgba(0,0,0,0.05);
opacity:0.9;
text-decoration:none;
}

.org-toggle .material-symbols-outlined,
.device-drawer-trigger .material-symbols-outlined{
font-size:18px;
line-height:1;
color:var(--text-muted);
transition:transform var(--transition);
}


/* ============================================================
   DEVICE TABLE (EXTENDS uni-table)
============================================================ */

.uni-table-wrapper{
overflow-x:auto;
}

.uni-table th:first-child,
.uni-table td:first-child{
width:48px;
text-align:center;
}

.uni-table td:last-child{
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Courier New",monospace;
font-size:13px;
color:var(--text-muted);
white-space:nowrap;
}

.uni-table tbody tr{
transition:background var(--transition);
}

.uni-table tbody tr:hover{
background:#f8fafc;
}


/* ============================================================
   STATUS DOT
============================================================ */

.uni-status{
display:inline-block;
width:10px;
height:10px;
border-radius:50%;
background:#9ca3af;
}

.uni-status.success{background:#16a34a;}
.uni-status.warning{background:#f59e0b;}
.uni-status.danger{background:#dc2626;}
.uni-status.muted{background:#9ca3af;}


/* ============================================================
   BADGES
============================================================ */

.uni-badge{
font-size:11px;
font-weight:600;
padding:3px 8px;
border-radius:999px;
background:rgba(201,166,58,0.2);
color:#7c5a00;
white-space:nowrap;
}

.uni-badge.danger{
background:rgba(220,38,38,0.15);
color:#991b1b;
}


/* ============================================================
   DEVICE DRAWER — META
============================================================ */

.device-drawer-meta{
display:flex;
flex-direction:column;
gap:16px;
margin-bottom:28px;
}

.device-meta-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 0;
border-bottom:1px solid var(--border);
}

.device-meta-item:last-child{
border-bottom:none;
}

.device-meta-label{
font-size:13px;
font-weight:500;
color:var(--text-muted);
}

.device-meta-value{
font-size:14px;
font-weight:600;
color:var(--text-primary);
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Courier New",monospace;
}


/* ============================================================
   DEVICE ACTIONS
============================================================ */

.device-actions-list{
display:flex;
flex-direction:column;
gap:12px;
margin:28px 0;
}

.device-action-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 16px;
border-radius:var(--radius-md);
border:1px solid var(--border);
background:#f9fafb;
transition:background var(--transition),box-shadow var(--transition);
}

.device-action-item:hover{
background:#f1f5f9;
box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

.device-action-label{
font-size:14px;
font-weight:600;
color:var(--text-primary);
}

.device-action-item.disabled{
opacity:0.6;
pointer-events:none;
}


/* ============================================================
   TOGGLE SWITCH
============================================================ */

.toggle-switch{
position:relative;
width:52px;
height:28px;
}

.toggle-input{
opacity:0;
width:0;
height:0;
}

.toggle-label{
position:absolute;
inset:0;
background:#9ca3af;
border-radius:999px;
cursor:pointer;
transition:background var(--transition);
}

.toggle-label::before{
content:"";
position:absolute;
width:22px;
height:22px;
left:3px;
bottom:3px;
background:#fff;
border-radius:50%;
transition:transform var(--transition);
box-shadow:0 1px 3px rgba(0,0,0,0.2);
}

.toggle-input:checked + .toggle-label{
background:var(--danger);
}

.toggle-input:checked + .toggle-label::before{
transform:translateX(24px);
}


/* ============================================================
   LOGIN HISTORY TABLE (DRAWER)
============================================================ */

.device-history-table{
width:100%;
border-collapse:collapse;
font-size:13px;
}

.device-history-table thead th{
padding:10px;
font-weight:600;
border-bottom:1px solid var(--border);
text-align:center;
}

.device-history-table tbody td{
padding:8px;
border-bottom:1px solid var(--border);
text-align:center;
}

.device-history-table tbody tr:hover{
background:#f8fafc;
}

.device-history-table td.success{
color:#166534;
font-weight:600;
}

.device-history-table td.failed{
color:#991b1b;
font-weight:600;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media(max-width:700px){

.uni-table{
min-width:560px;
}

.device-history-table thead{
display:none;
}

.device-history-table tbody tr{
display:block;
padding:10px 0;
}

.device-history-table tbody td{
display:flex;
justify-content:space-between;
border:none;
padding:6px 0;
}

.device-history-table tbody td::before{
content:attr(data-label);
font-weight:600;
color:var(--text-muted);
}

}