:root{
	--bg:#f4f6fb;
	--card:#ffffff;
	--primary:#2563eb;
	--muted:#6b7280;
	--accent:#06b6d4;
	--danger:#ef4444;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;background:var(--bg);color:#111;margin:0;padding:0}
.app{min-height:100vh;display:flex;flex-direction:column}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(90deg,#fff,#f8fafc);border-bottom:1px solid #e6eef8}
.brand{display:flex;align-items:center;gap:12px}
.brand h1{font-size:18px;margin:0}
.menu-toggle{display:none;border:0;background:transparent;font-size:20px}
.top-nav{display:flex;gap:8px;align-items:center}
.top-nav button{background:transparent;border:0;padding:6px 10px;border-radius:6px}

/* dropdown top menu */
.top-menu{display:flex;gap:6px;align-items:center}
.top-menu .menu-item{position:relative}
.top-menu .menu-btn{background:transparent;border:0;padding:8px 12px;border-radius:8px;cursor:pointer}
.top-menu .menu-btn:focus{outline:2px solid rgba(37,99,235,0.18)}
.dropdown{position:absolute;top:100%;left:0;background:var(--card);min-width:200px;border-radius:8px;box-shadow:0 10px 30px rgba(2,6,23,0.12);display:none;padding:8px;z-index:50}
.dropdown a{display:block;padding:8px 10px;border-radius:6px;color:#111;text-decoration:none}
.dropdown a:hover{background:#f1f5f9}
.menu-item.open .dropdown{display:block}

.nav-actions{display:flex;align-items:center;gap:8px}
.nav-actions .nav-user{font-size:13px;color:var(--muted);padding:6px 8px}


/* mobile: show dropdown as full width */
@media (max-width:900px){
	.top-menu{flex-wrap:wrap}
	.dropdown{position:static;box-shadow:none;padding:6px;background:transparent}
}

.container{display:flex;gap:16px;padding:20px;max-width:1200px;margin:0 auto;width:100%}
.sidebar{width:220px}
.profile{display:flex;align-items:center;gap:10px;padding:8px}
.avatar{width:44px;height:44px;border-radius:8px;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-size:20px}
.avatar svg{width:36px;height:36px}
.who{font-size:14px;color:var(--muted)}
.side-menu{list-style:none;padding:0;margin:12px 0 0 0}
.side-menu li{margin-bottom:8px}
.side-menu button{width:100%;text-align:left;padding:10px;border:0;border-radius:8px;background:transparent}

.content-area{flex:1}
.card{background:var(--card);padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(15,23,42,0.04);margin-bottom:16px}
.auth-card{max-width:420px}
.form input,.form textarea,.form select{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef8;margin-bottom:10px}
.btn{padding:10px 14px;border-radius:8px;border:0;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff}
.msg{color:var(--danger);margin-top:8px}

.tbl{width:100%;border-collapse:collapse;margin-top:8px}
.tbl th,.tbl td{border-bottom:1px solid #f1f5f9;padding:12px;text-align:left}
.tbl th{background:transparent;color:var(--muted);font-size:13px}
.tbl tbody tr{transition: background-color 120ms ease-in-out}
.tbl tbody tr:hover{background:#f3f4f6}

/* Tabelas do painel (client.php usa class="table") */
.table tbody tr{transition: background-color 120ms ease-in-out}
.table tbody tr:hover{background:#f3f4f6}
.btn-edit,.btn-move,.btn-del{padding:6px 8px;margin-right:6px;border-radius:6px;border:1px solid #e6eef8;background:#fff;cursor:pointer}
.btn-edit{border-color:#c7e2ff}
.btn-move{border-color:#c7f0ef}
.btn-del{border-color:#ffd6d6}

/* modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000}
.modal[aria-hidden="false"]{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,0.5)}
.modal-panel{position:relative;background:var(--card);width:100%;max-width:680px;border-radius:12px;padding:18px 48px 18px 18px;box-shadow:0 10px 30px rgba(2,6,23,0.12);z-index:2;max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden}
.modal-panel.modal-wide{max-width:980px}
.modal-close{position:absolute;right:18px;top:8px;border:0;background:transparent;font-size:22px}

/* allow modal content to scroll without growing off-screen */
.modal-panel #modalContent{flex:1 1 auto;overflow:auto;}

/* OS modal: compact spacing (reduce text/form footprint) */
#osModalRoot{font-size:13px;line-height:1.35}
#osModalRoot h3{font-size:17px;margin:0}
#osModalRoot label{font-size:12px;color:var(--muted)}
#osModalRoot input,#osModalRoot select,#osModalRoot textarea{font-size:13px !important;padding:8px 10px !important}
#osModalRoot .tbl th,#osModalRoot .tbl td{padding:8px !important}
#osModalRoot .tbl th{font-size:12px !important}
#osModalRoot .btn{padding:8px 12px !important}

/* responsive */
@media (max-width:900px){
	.container{padding:12px}
	.sidebar{display:none}
	.menu-toggle{display:inline-block}
}