/* ui-common.css v2 — Utilities + Modal/Toast + Form helpers */
:root{
  --oc-radius-sm:8px;
  --oc-radius:10px;
  --oc-radius-lg:14px;
  --oc-shadow-sm:0 1px 3px rgba(16,24,40,.04);
  --oc-shadow-md:0 4px 12px rgba(16,24,40,.06);
  --oc-shadow-lg:0 12px 28px rgba(16,24,40,.1);
  --oc-primary:#2563eb;
  --oc-primary-hover:#1d4ed8;
  --oc-danger:#dc2626;
  --oc-success:#16a34a;
}

/* ===== Buttons polish ===== */
.btn{font-weight:600;letter-spacing:.1px}
.btn:focus-visible,.page-btn:focus-visible,.theme-toggle-btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(59,130,246,.2);
}

/* ===== Utility classes ===== */
.oc-muted-center{text-align:center;color:#667085!important}
.oc-inline-actions{display:inline-flex;gap:6px;align-items:center;justify-content:center}
.oc-modal-title{font-size:16px;font-weight:700;margin-bottom:8px;color:#1f2937!important}
.oc-modal-text{font-size:13px;line-height:1.7;color:#667085!important;word-break:break-all}
.oc-modal-actions-end{margin-top:14px;display:flex;gap:8px;justify-content:flex-end}
.oc-modal-danger{background:#dc2626!important;color:#fff!important;border-color:#dc2626!important}
.oc-w-220{min-width:220px}
.oc-mt-8{margin-top:8px}
.oc-mt-10{margin-top:10px}
.oc-mr-auto{margin-right:auto}
.oc-ml-auto{margin-left:auto}
.oc-preline{white-space:pre-line}
.perm-form{display:flex;flex-direction:column;flex:1;min-height:0}
.pwdrow{display:flex;align-items:center;gap:8px}

/* ===== Modal card ===== */
.oc-modal-card{background:#fff!important;border:1px solid #eaecf0!important;border-radius:14px;box-shadow:0 20px 44px rgba(16,24,40,.18);padding:16px}
.oc-modal-card-sm{width:min(420px,96vw)}
.oc-modal-card-md{width:min(520px,95vw)}
.oc-modal-card-lg{width:min(560px,96vw)}
.oc-modal-card-xl{width:min(460px,96vw)}
.oc-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.oc-icon-btn{border:0;background:transparent;font-size:18px;line-height:1;cursor:pointer;padding:0 4px;color:#1f2937}

/* ===== Notes ===== */
.oc-note{background:#f8fafc;border:1px solid #e2e8f0;color:#475467;border-radius:10px;padding:8px 10px}

/* ===== Toast check icon ===== */
.oc-toast-check{display:inline-flex;width:24px;height:24px;border-radius:999px;background:#16a34a;color:#fff;align-items:center;justify-content:center;font-size:15px;line-height:1}

/* ===== Form controls ===== */
.oc-form-col{display:flex;flex-direction:column;gap:10px}
.oc-label-tight{margin-bottom:4px}
.oc-input-plain{width:100%;height:36px;background:#fff;color:#1f2937;border:1px solid #d0d5dd;font-weight:500;border-radius:10px;padding:0 10px;outline:none;transition:border-color .15s}
.oc-input-plain:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.oc-mt-4{margin-top:4px}
.oc-mb-8{margin-bottom:8px}
.oc-text-xs{font-size:12px}
.oc-admin-note{padding:0 14px 10px;color:#667085!important;font-size:12px}
.oc-flex-inline{display:inline-flex}
.oc-center-actions{display:flex;justify-content:center;gap:8px;margin-top:8px}
.oc-role-form{display:flex;gap:8px;align-items:center}
.oc-role-select{flex:1;height:34px;border:1px solid #d0d5dd;border-radius:8px;padding:0 8px;font-size:12px;background:#fff;color:#1f2937}
.oc-btn-h34{height:34px}
.oc-badge-system{margin-left:6px;color:#b54708;font-size:12px}
.oc-w-150{width:150px}
.oc-filter-actions{display:flex;gap:8px;align-items:center}
.oc-hidden{display:none}
.oc-muted-dash{color:#98a2b3}
.oc-max-auto{height:auto;max-height:none}
.oc-display-name-strong{font-weight:700}
.oc-hint-force{margin-bottom:10px;border-color:#fecdd3!important;background:#fff1f2!important;color:#9f1239!important}
.oc-hidden-frame{display:none}

/* ===== Modal overlay ===== */
.oc-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:9999;padding:16px;animation:ocModalFade .3s ease}

/* modal cards with animation */
.oc-modal-card{animation:ocModalSlide .3s ease}
@keyframes ocModalFade{from{opacity:0}to{opacity:1}}
@keyframes ocModalSlide{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* wider card for permission/cfg modals */
.oc-modal-card-full{width:min(960px,94vw)}

/* ===== Table column width helpers ===== */
.oc-col-46{width:46px}
.oc-col-78{width:78px}
.oc-col-110{width:110px}
.oc-col-120{width:120px}
.oc-col-148{width:148px}
.oc-col-150{width:150px}
.oc-col-160{width:160px}
.oc-col-220{width:220px}
.oc-col-240{width:240px}
.oc-col-280{width:280px}

/* ===== Toast notification ===== */
.oc-toast{position:fixed;top:40px;left:50%;transform:translateX(-50%);z-index:20000;background:#fff;color:#166534;border:1px solid #bbf7d0;border-radius:999px;padding:12px 22px;font-size:15px;font-weight:700;display:none;align-items:center;gap:10px;box-shadow:0 10px 28px rgba(16,24,40,.12);animation:ocToastIn .25s ease}
.oc-toast.err{color:#b42318;border-color:#fecaca}
.oc-toast-icon{display:inline-flex;width:24px;height:24px;border-radius:999px;color:#fff;align-items:center;justify-content:center;font-size:15px;line-height:1;background:#16a34a}
.oc-toast.err .oc-toast-icon{background:#dc2626}
@keyframes ocToastIn{from{opacity:0;transform:translateX(-50%) translateY(-12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ===== Modal with titlebar ===== */
.oc-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.oc-modal-head .oc-modal-title{font-size:16px;font-weight:700;margin:0;color:#1f2937}
.oc-modal-actions{display:flex;gap:4px;align-items:center}
.oc-modal-btn{width:28px;height:28px;border:1px solid transparent;border-radius:6px;background:transparent;color:#667085;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;padding:0;transition:all .15s}
.oc-modal-btn:hover{background:#f2f4f7;color:#344054;border-color:#eaecf0}
.oc-modal-btn.close{color:#b42318;font-size:18px;font-weight:700}
.oc-modal-btn.close:hover{background:#fef2f2;color:#dc2626;border-color:#fecaca}
.oc-modal-footer{margin-top:16px;display:flex;gap:8px;justify-content:flex-end;padding-top:14px;border-top:1px solid #eaecf0}

/* ===== Admin panel header ===== */
.phead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eaecf0}
.phead h2{margin:0;font-size:15px;color:#1f2937;font-weight:700}

/* ===== Empty state ===== */
.empty{text-align:center;padding:48px 16px;color:#98a2b3;font-size:14px}