resman/backend/public/css/style.css

body {
    font-family: Arial, sans-serif;
    margin: 40px;
    background: #f4f6f8;
}

h1 {
    margin-bottom: 30px;
}

section {
    background: white;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th, td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

th {
    background: #1e3a8a;
    color: white;
}

td {
    vertical-align: top;
}

button {
    background: #2563eb;
    color: white;
    border: 1px solid #2563eb;
    border-radius: 8px;
    padding: 7px 12px;
    margin: 2px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

button:hover {
    background: #1e40af;
    border-color: #1e40af;
    transform: translateY(-1px);
}

button.btn-small{
    font-size:11px;
    padding:4px 8px;
    border-radius:999px;
}

button.btn-secondary{
    background:#e2e8f0;
    color:#0f172a;
    border-color:#cbd5e1;
}

button.btn-secondary:hover{
    background:#cbd5e1;
    border-color:#94a3b8;
}

button.btn-danger{
    background:#dc2626;
    border-color:#dc2626;
}

button.btn-danger:hover{
    background:#b91c1c;
    border-color:#b91c1c;
}

button.btn-ghost{
    background:transparent;
    color:#1e3a8a;
    border-color:#bfdbfe;
}

button.btn-ghost:hover{
    background:#dbeafe;
    border-color:#93c5fd;
}

input, textarea {
    padding: 6px;
    margin: 4px;
    width: 95%;
}

.provider {
    background: #e9f2ff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.ip {
    font-size: 12px;
    background: #f4f4f4;
    padding: 2px 6px;
    margin: 2px;
    border-radius: 4px;
    display: inline-block;
}

.system {
    font-size: 13px;
    color: #333;
}

.modal {
    display: none;
    position: fixed;

    top: 10%;
    left: 50%;
    transform: translateX(-50%);

    background: white;
    padding: 20px;
    width: 600px;
    max-height: 80vh;
    overflow: auto;

    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-radius: 6px;
    z-index: 999;
}


.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 600px;
    max-height: 80vh;
    overflow: auto;
}

.modal input,
.modal textarea,
.modal select {
    width: 95%;
    padding: 6px;
    margin: 4px 0;
    background: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.modal input[type="date"] {
    background: #f4f4f4;
}

.modal-meta{
    font-size:13px;
    color:#64748b;
    margin:-6px 0 12px 0;
}

.domain-name{
    font-weight:700;
    color:#0f172a;
    margin-bottom:6px;
}

.domain-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:10px;
}

.meta-chip{
    font-size:12px;
    background:#eff6ff;
    color:#1e3a8a;
    padding:3px 8px;
    border-radius:999px;
    display:inline-block;
}

.meta-chip.muted{
    background:#f1f5f9;
    color:#475569;
}

.dns-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:600;
    border-radius:999px;
    padding:4px 10px;
    white-space:nowrap;
}

.dns-badge.ok{
    background:#dcfce7;
    color:#166534;
}

.dns-badge.warn{
    background:#fef3c7;
    color:#92400e;
}

.dns-badge.off{
    background:#fee2e2;
    color:#991b1b;
}

.dns-detail{
    display:block;
    font-size:11px;
    color:#64748b;
    margin-top:4px;
}

.domain-actions{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
}

.subdomain-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.subdomain-card{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:8px 10px;
}

.subdomain-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
}

.subdomain-name{
    font-size:13px;
    font-weight:600;
    color:#0f172a;
}

.subdomain-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:6px;
}

.subdomain{
margin-left:15px;
font-size:13px;
color:#555;
}

.subdomain-detail{
    margin-left:15px;
    font-size:13px;
    color:#555;
}

.infra-server{
    font-weight:bold;
    margin-top:10px;
}

.infra-ip{
    margin-left:10px;
}

.infra-domain{
    margin-left:20px;
}

.infra-sub{
    margin-left:30px;
    color:#555;
}
.clickable{
    cursor:pointer;
}

.clickable:hover{
    color:#1e3a8a;
    text-decoration:underline;
}
#lastUpdate{
    font-size:13px;
    margin-bottom:10px;
}

.tabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:18px 0 24px 0;
}

.tab-button{
    background:#e2e8f0;
    color:#0f172a;
    border-color:#cbd5e1;
}

.tab-button:hover{
    background:#cbd5e1;
    border-color:#94a3b8;
}

.tab-button.active{
    background:#2563eb;
    color:white;
    border-color:#2563eb;
}

.tab-panel{
    display:none;
}

.tab-panel.active{
    display:block;
}

#ipList div{
    display:flex;
    align-items:center;
    margin-bottom:6px;
}

#ipList .ip{
    flex:1;
}

#ipList button{
    margin-left:6px;
    font-size:11px;
}



#ipForm.edit-mode{
    border:2px solid #3b82f6;
    padding:10px;
    border-radius:6px;
    background:#eef4ff;
}
.ip.public{
    background:#22c55e;
    color:white;
    font-weight:bold;
}
body.dark{
    background:#111827;
    color:#e5e7eb;
}

body.dark section{
    background:#1f2937;
}

body.dark .modal,
body.dark .modal-content{
    background:#f8fafc;
    color:#0f172a;
}

body.dark .modal label,
body.dark .modal h3,
body.dark .modal b{
    color:#0f172a;
}

body.dark .modal input,
body.dark .modal textarea,
body.dark .modal select{
    background:#ffffff;
    color:#0f172a;
    border-color:#94a3b8;
}

body.dark th{
    background:#111827;
}

body.dark td{
    border-color:#374151;
}

body.dark .provider{
    background:#1e3a8a;
    color:white;
}

body.dark .ip{
    background:#374151;
}

body.dark .ip.public{
    background:#16a34a;
    color:white;
}

body.dark .modal-meta{
    color:#94a3b8;
}

body.dark button{
    background:#2563eb;
    border-color:#2563eb;
    color:white;
}

body.dark button:hover{
    background:#1d4ed8;
    border-color:#1d4ed8;
}

body.dark button.btn-secondary{
    background:#334155;
    color:#e5e7eb;
    border-color:#475569;
}

body.dark button.btn-secondary:hover{
    background:#475569;
    border-color:#64748b;
}

body.dark button.btn-ghost{
    background:transparent;
    color:#bfdbfe;
    border-color:#334155;
}

body.dark button.btn-ghost:hover{
    background:#1e293b;
    border-color:#475569;
}

body.dark .tab-button{
    background:#334155;
    color:#e5e7eb;
    border-color:#475569;
}

body.dark .tab-button:hover{
    background:#475569;
    border-color:#64748b;
}

body.dark .tab-button.active{
    background:#2563eb;
    color:white;
    border-color:#2563eb;
}

body.dark .domain-name,
body.dark .subdomain-name{
    color:#f8fafc;
}

body.dark .meta-chip{
    background:#1d4ed8;
    color:#eff6ff;
}

body.dark .meta-chip.muted{
    background:#334155;
    color:#cbd5e1;
}

body.dark .subdomain-card{
    background:#111827;
    border-color:#374151;
}

body.dark .dns-badge.ok{
    background:#14532d;
    color:#dcfce7;
}

body.dark .dns-badge.warn{
    background:#78350f;
    color:#fde68a;
}

body.dark .dns-badge.off{
    background:#7f1d1d;
    color:#fecaca;
}

body.dark .dns-detail{
    color:#94a3b8;
}

body.dark .infra-sub,
body.dark .subdomain-detail{
    color:#cbd5e1;
}

body.dark .infra-domain{
    color:#bfdbfe;
}

body.dark .infra-ip{
    color:#e2e8f0;
}

body.dark .system{
    color:#cbd5e1;
}