/* PeonHost custom utilities (readable) */

/* ===== PeonHost utilities (custom) ===== */
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:.375rem;height:2.5rem;padding:0 .75rem;font-size:.875rem;transition:var(--transition-smooth)}
.btn-primary{background-color:hsl(var(--primary));color:hsl(var(--primary-foreground));border:1px solid hsl(var(--primary))}
.btn-primary:hover{background-color:hsl(var(--primary) / .9)}
.btn-outline{background:#fff;border:1px solid #e2e8f0}
.btn-outline:hover{background:#f1f5f9}
.btn-danger{background:#ef4444;color:#fff}
.btn-danger:hover{background:#ef4444e6;color:#fff}
.btn-sm{height:2rem;padding:0 .5rem}
.btn-md{height:2.5rem}

/* Inputs */
.input,.select{height:2.5rem;width:100%;border:1px solid hsl(var(--input));background:hsl(var(--background));border-radius:.375rem;padding:0 .75rem;font-size:.875rem}

/* Labels */
.form-label{display:block;font-size:.875rem;color:#000;font-weight:500;margin-bottom:.25rem}

/* Quota Bars */
.quota-bar{height:.5rem;border-radius:999px;background:hsla(220,14%,96%,1);overflow:hidden}
.quota-fill{height:100%;background:#0a72c2;width:var(--w,0%)}
.quota-fill.warn{background:#ef4444}

/* Grid helpers */
.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.gap-8{gap:2rem}
.w-220{width:220px}
.w-half{width:50%}
.mt-12px{margin-top:12px}
.mb-12px{margin-bottom:12px}
.gap-12px{gap:12px}
/* explicit margins */
.mt-20px{margin-top:20px}
.mb-20px{margin-bottom:20px}
.mt-30px{margin-top:30px}
.mb-30px{margin-bottom:30px}
.mt-40px{margin-top:40px}
.mb-40px{margin-bottom:40px}

/* Modal utilities */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.5);z-index:1000;padding:1rem}
.modal-content{background:#fff;border:1px solid hsl(var(--border));border-radius:.75rem;padding:1rem;max-width:42rem;width:100%;max-height:85vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.2)}
/* positioning for close icon */
.modal-content{position:relative}
.modal-close{position:absolute;top:.5rem;right:.5rem;background:transparent;border:0;color:#64748b;cursor:pointer}
.modal-close:hover{color:#111827}

/* Top-positioned modal without page dimming */
.modal-top{background:transparent;align-items:flex-start}
.modal-top .modal-content{margin-top:.75rem}
.modal-content--plain{background:transparent;border:0;box-shadow:none;padding:0}

/* Table utilities */
.tbl{width:100%;border-collapse:separate;border-spacing:0 8px}
.tbl thead th{font-size:.75rem;color:var(--muted-foreground);text-align:left;padding:.25rem .5rem}
.tbl tbody tr{background:var(--card);border:1px solid var(--border);border-radius:.75rem;transition:background-color .15s ease}
.tbl tbody td{padding:.6rem .75rem;font-size:.875rem;color:var(--foreground)}
.tbl tbody tr:hover{background:#f8fafc}

/* Text alignment helpers */
.text-center{text-align:center}
/* Ensure table header alignment can be overridden */
.tbl thead th.text-center{text-align:center}

/* Readonly input look */
.readonly-like{background-color:#f1f5f9 !important;border-color:#e2e8f0 !important;color:#64748b !important;cursor:default}

/* Extras to replace previous inline styles */
.inline{display:inline}
.nowrap{white-space:nowrap}
.h-150px{height:150px}
.grid-1fr-auto{display:grid;grid-template-columns:1fr auto;gap:.5rem}
.mb-24px{margin-bottom:24px}
.mt-25px{margin-top:25px}
.grid-col-all{grid-column:1 / -1}
.hidden{display:none}
.iframe-embed{width:100%;height:220px;border:1px solid var(--border);border-radius:.5rem}
.app-logo{width:300px;max-width:100%;height:auto}
.modal.show{display:flex}

/* Toggle switch */
.toggle-switch{position:relative;width:44px;height:24px;display:inline-block}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:hsl(220 13% 90%);border-radius:999px;transition:all .2s}
.toggle-slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:999px;transition:all .2s}
.toggle-switch input:checked + .toggle-slider{background:#4b677c}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(20px)}

/* Close button inside modal */
.modal .close-modal{border:1px solid #e2e8f0;background:#fff}
.modal .close-modal:hover{background:#f1f5f9}

/* Button hovers for outline-like buttons used in templates */
#generate-cert-form button:hover,#open-import-cert:hover{background:#f1f5f9 !important}
.reset-ftp-btn:hover,.reset-db-btn:hover,#edit-quota-btn:hover,.edit-db-quota-btn:hover{background:#f1f5f9 !important}
#add-cron-row:hover,#edit-apache:hover,#edit-nginx:hover,#edit-php:hover{background:#f1f5f9 !important}
.generate-reset-db:hover,#generate-db-password:hover,#generate-reset-ftp:hover{background:#f1f5f9 !important}

/* Form label and readonly visuals */
label.block.text-sm{color:#000 !important;font-weight:500 !important}
#website-form input[readonly],#add-db-form input[readonly]{background:#f1f5f9 !important;border-color:#e2e8f0 !important;color:#64748b !important;cursor:default}
#website-form input[readonly]:focus{outline:none;box-shadow:none}
.cert-meta .label{color:#000 !important;font-weight:500}
.cert-meta .value{color:#64748b;font-size:.875rem}
.quota-label{color:#000 !important;font-weight:500}
button{font-size:.875rem}

/* Domain link hover on dashboard */
.dom-link:hover{color:#4b677c !important}

/* Alert styles for status messages */
.alert{border-radius:.75rem;padding:.75rem 1rem;font-size:.875rem}
.alert-success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.alert-error{background:#fee2e2;border:1px solid #fecaca;color:#991b1b}
.alert-inline{display:inline-flex;align-items:center;gap:.5rem}
.banner-close{background:transparent;border:0;color:#64748b;cursor:pointer}
.banner-close:hover{color:#111827}
/* ensure no bg/border inherits from generic modal close */
.modal .banner-close{background:transparent!important;border:0!important;box-shadow:none;padding:0;line-height:0;display:inline-flex;align-items:center;justify-content:center}
/* place close in top-right of the banner */
/* inline close button (no absolute positioning) */

/* Badge/Pill statuses for billing and others */
.pill,.status-pill{display:inline-flex;align-items:center;height:1.5rem;padding:0 .5rem;border-radius:9999px;font-size:.75rem;font-weight:500;border:1px solid transparent}
.pill-red{background:#fee2e2;border-color:#fecaca;color:#991b1b}
.pill-green{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.pill-blue{background:#e0f2fe;border-color:#bae6fd;color:#075985}
.pill-gray{background:#f1f5f9;border-color:#e2e8f0;color:#334155}

/* Sidebar layout rules (moved from base_v2 template) */
#main{transition:margin-left .25s ease}
#sidebar{transition:width .25s ease;overflow:hidden}
#sidebar:not([data-collapsed="true"]){width:256px !important}
#main:not([data-sidebar-collapsed="true"]){margin-left:256px !important}
#sidebar[data-collapsed="true"]{width:64px !important}
#main[data-sidebar-collapsed="true"]{margin-left:64px !important}
#sidebar .brand .title,#sidebar .brand .subtitle{white-space:nowrap}
#sidebar[data-collapsed="true"] .brand>div{display:none}
#sidebar[data-collapsed="true"] .brand{justify-content:center}
#sidebar nav a{display:flex;align-items:center}
#sidebar nav a svg{flex:0 0 auto}
#sidebar nav a span{white-space:nowrap}
#sidebar[data-collapsed="true"] nav a{justify-content:center !important;padding-left:.5rem !important;padding-right:.5rem !important}
#sidebar[data-collapsed="true"] nav a svg{margin-right:0 !important}
#sidebar[data-collapsed="true"] nav a span{display:none !important}
#sidebar .sidebar-footer button{display:flex;align-items:center}
#sidebar .sidebar-footer button svg{flex:0 0 auto}
#sidebar .sidebar-footer button span{white-space:nowrap}
#sidebar[data-collapsed="true"] .sidebar-footer button{justify-content:center !important;padding-left:.5rem !important;padding-right:.5rem !important}
#sidebar[data-collapsed="true"] .sidebar-footer button svg{margin-right:0 !important}
#sidebar[data-collapsed="true"] .sidebar-footer button span{display:none !important}
#sidebarToggle svg{transition:transform .2s ease}
#sidebar[data-collapsed="true"] #sidebarToggle svg{transform:rotate(180deg)}

/* Pagination (moved from dashboard template) */
.pagination-scope .gap-6{gap:1.05rem}
.pagination-scope a{font-size:.875rem}
.pagination-scope a:hover{background-color:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}


/* Login specific */
.login-card{max-width:420px;width:100%;margin:0 auto}
/* Force main to full width when sidebar is hidden (e.g., login) */
#main.no-sidebar{margin-left:0 !important;width:100% !important;min-height:100vh}
#main.no-sidebar > .p-8{padding:0 !important}