/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:#f5f7fb;color:#222}

/* Layout - fluid (резиновый) container */
.container{width:calc(100% - 40px);max-width:1600px;margin:20px auto;padding:20px}

.card{background:#fff;border-radius:10px;box-shadow:0 6px 18px rgba(15,30,50,0.06);padding:24px;margin-bottom:20px}

.card-row{margin-bottom:12px}
.card hr{margin:18px 0}

/* Client profile card */
.client-card-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start;margin-bottom:14px}
.client-card .client-col{padding:6px 0}
.client-card .client-col--right{border-left:1px solid #eef2f7;padding-left:16px}
.btn-small{padding:8px 12px;font-size:13px}
.login-history td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.login-history .table{font-size:13px}
.client-card p{margin:8px 0}
.login-history td:nth-child(2){max-width:480px;word-break:break-all}

/* Header / nav */
.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.app-title{font-weight:700;font-size:20px;color:#0b57a4}
.nav{display:flex;gap:12px}
.nav a{color:#0b57a4;text-decoration:none;padding:8px 12px;border-radius:6px}
.nav a.btn{background:#0b57a4;color:#fff}

/* Forms */
.form{max-width:520px;margin:0 auto}
.form .form-row{margin-bottom:14px}
label{display:block;font-size:13px;color:#445; margin-bottom:6px}
input[type="text"],input[type="email"],input[type="password"],select{width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;font-size:14px}
input:focus,select:focus{outline:none;border-color:#8ab4ff;box-shadow:0 0 0 3px rgba(59,130,246,0.08)}
.btn-primary{display:inline-block;background:#0b57a4;color:#fff;padding:10px 16px;border-radius:8px;border:none;cursor:pointer;font-weight:600}
.btn-ghost{background:transparent;border:1px solid #e2e8f0;padding:8px 12px;border-radius:8px;color:#0b57a4}

/* Small text / messages */
.help{font-size:13px;color:#667; margin-top:8px}

/* Dashboard layout */
.dashboard-top{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.balance{flex:1;min-width:220px;background:linear-gradient(90deg,#0b57a4,#1f7bd9);color:#fff;padding:18px;border-radius:10px}
.profile{flex:1;min-width:220px;padding:18px;border-radius:10px;border:1px solid #eef2f7;background:#fff}
.balance .help{color:rgba(255,255,255,0.95)}
.balance .help strong{color:#fff;font-weight:700}
.tariff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:14px}
.tariff{background:#fff;border-radius:10px;padding:14px;border:1px solid #eef2f7;text-align:center}
.tariff h4{margin-bottom:8px}
.tariff .price{font-weight:700;font-size:18px;color:#0b57a4;margin-bottom:8px}
.tariff .buy{margin-top:10px}

/* Footer */
.footer{margin-top:28px;text-align:center;color:#889; font-size:13px}

/* responsive */
@media(max-width:560px){.container{margin:18px} .app-title{font-size:18px}}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0;margin-top:12px;font-size:15px;line-height:1.5}
.table th,.table td{padding:14px 14px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:middle}
.table th{font-weight:600;color:#334;background:#f8fafc}
.table tbody tr:nth-child(even){background:#fbfcfe}
.table tbody tr:hover{background:#f4f8ff}
.table thead th:first-child{border-top-left-radius:10px}
.table thead th:last-child{border-top-right-radius:10px}
.table-wrap{border:1px solid #e7ecf3;border-radius:10px;overflow:hidden;overflow-x:auto;background:#fff}
.row-actions{display:flex;gap:8px}

/* Add camera form */
.cam-form{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:10px;align-items:end;margin-top:10px}
.filters-form{grid-template-columns:1fr 1fr auto}
.cam-form .form-row{margin:0}
.cam-toggle{margin-top:10px}

/* Readability helpers */
.ip{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;color:#0b57a4}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef2f7;color:#334;font-weight:600;font-size:12px}
.badge--type{background:#e8f0fe;color:#0b57a4}
.badge--tariff{background:#eaf7ef;color:#1c7845}

/* Pagination */
.pagination{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:14px}
.pagination a,.pagination span{display:inline-block;padding:8px 12px;border:1px solid #e2e8f0;border-radius:8px;text-decoration:none;color:#2c3e50;background:#fff}
.pagination .active{background:#0b57a4;border-color:#0b57a4;color:#fff}
.pagination .disabled{opacity:.5;pointer-events:none}

/* Payment status badges */
.badge--success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.badge--warning{background:#fff3cd;color:#856404;border:1px solid #ffeeba}

/* Responsive forms */
@media (max-width: 1024px){
	.cam-form{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width: 720px){
	.cam-form{grid-template-columns:1fr 1fr}
	.cam-form .form-row:last-child{grid-column:1 / -1}
}
@media (max-width: 480px){
	.cam-form{grid-template-columns:1fr}
}
@media (max-width: 700px){
	.filters-form{grid-template-columns:1fr 1fr}
	.client-card-grid{grid-template-columns:1fr;}
	.filters-form .form-row:last-child{grid-column:1 / -1}
}
@media (max-width: 460px){
	.filters-form{grid-template-columns:1fr}
}

/* Company info on login page */
.company-info{margin-top:24px;padding-top:20px;border-top:1px solid #eef2f7;text-align:center;font-size:13px;color:#667}
.company-info p{margin:4px 0}
.company-info strong{color:#334;font-weight:600}
.company-info a{color:#0b57a4;text-decoration:none}
.company-info a:hover{text-decoration:underline}

/* Support chat */
.chat{background:#f8fafc;border:1px solid #e2e8f0;padding:14px;border-radius:10px;max-height:480px;overflow-y:auto}
.chat .msg{animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}