/* OC Maler Angebotstool – Styles
 * Version: 1.2.9
 */

.ocm-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
.ocm-header{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#6b7280;border-radius:18px;padding:18px 18px;margin:12px 0;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.15);}
.ocm-brand{display:flex;gap:14px;align-items:center;}
.ocm-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(180deg,#22c55e,#16a34a);display:flex;align-items:center;justify-content:center;font-weight:700;}
.ocm-title{font-size:20px;font-weight:800;line-height:1.1;}
.ocm-sub{opacity:.85;font-size:12px;margin-top:2px;}
.ocm-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}

.ocm-btn{border:0;border-radius:12px;padding:10px 14px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;font-weight:700;}
.ocm-btn:hover{background:rgba(255,255,255,.22);}
.ocm-btn-green{background:linear-gradient(180deg,#22c55e,#16a34a);}
.ocm-btn-blue{background:linear-gradient(180deg,#60a5fa,#3b82f6);}
.ocm-btn-danger{background:rgba(244,63,94,.25);border:1px solid rgba(244,63,94,.45);}

.ocm-grid{display:grid;grid-template-columns:1.05fr 2fr;gap:14px;margin-top:14px;}
.ocm-panel{background:#4b5563;border-radius:18px;padding:14px;color:#e5e7eb;box-shadow:0 10px 30px rgba(0,0,0,.12);min-width:0;}
.ocm-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.ocm-panel-title{font-size:16px;font-weight:800;color:#fff;}
.ocm-panel-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}

label{display:block;font-size:12px;opacity:.9;margin:0 0 6px;}
input,select,textarea{width:100%;box-sizing:border-box;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.18);color:#fff;padding:10px 12px;outline:none;}
input:focus,select:focus,textarea:focus{border-color:rgba(34,197,94,.8);box-shadow:0 0 0 3px rgba(34,197,94,.15);}
textarea{min-height:96px;resize:vertical;}

.ocm-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ocm-split{display:flex;gap:10px;align-items:flex-start;}
.ocm-split>div{flex:1;min-width:0;}
.ocm-split-wrap{flex-wrap:wrap;}

.ocm-pill{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.16);font-weight:800;}
.ocm-muted{opacity:.8;font-size:12px;}
.ocm-hint{opacity:.75;font-size:12px;margin-top:10px;}

.ocm-rooms .ocm-card{background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px;margin-bottom:10px;cursor:pointer;}
.ocm-rooms .ocm-card.active{outline:2px solid rgba(34,197,94,.5);}
.ocm-rooms .ocm-card .t{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.ocm-rooms .ocm-card .meta{margin-top:6px;opacity:.8;font-size:12px;}

.ocm-table{width:100%;border-collapse:separate;border-spacing:0 10px;}
.ocm-table th{font-size:12px;text-align:left;opacity:.85;padding:0 8px;}
.ocm-table td{vertical-align:top;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.10);border-left:0;border-right:0;padding:12px 10px;}
.ocm-table tr td:first-child{border-left:1px solid rgba(255,255,255,.10);border-top-left-radius:16px;border-bottom-left-radius:16px;}
.ocm-table tr td:last-child{border-right:1px solid rgba(255,255,255,.10);border-top-right-radius:16px;border-bottom-right-radius:16px;}

.ocm-totalbox{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 12px;font-size:18px;font-weight:900;}

.ocm-sum{margin-top:14px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px;}
.ocm-sum-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;}
.ocm-sum-row.total{font-size:18px;font-weight:900;border-top:1px solid rgba(255,255,255,.10);margin-top:6px;padding-top:10px;}

/* Mobile item cards */
.ocm-item-card{background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px;margin-bottom:12px;}
.ocm-item-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.ocm-item-head strong{color:#fff;}
.ocm-item-meta{margin-top:6px;opacity:.85;}

/* Modal */
.ocm-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.55);z-index:9999;}
.ocm-modal[aria-hidden="false"]{display:flex;}
.ocm-modal-card{width:min(860px,100%);background:#374151;border-radius:18px;padding:14px;box-shadow:0 20px 70px rgba(0,0,0,.35);}
.ocm-modal-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:12px;}
.ocm-modal-body{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ocm-ded-row{display:flex;justify-content:space-between;gap:10px;align-items:center;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px 12px;margin-bottom:10px;}

/* Responsive */
@media (max-width: 1200px){
  .ocm-grid{grid-template-columns:1fr;}
}
@media (max-width: 980px){
  .ocm-header{align-items:flex-start;}
  .ocm-actions{justify-content:flex-start;}
  .ocm-row2{grid-template-columns:1fr;}
  .ocm-modal-body{grid-template-columns:1fr;}
}

/* Extra small: keep the header clean (hide logo + title area) */
@media (max-width: 640px){
  .ocm-brand{display:none;}
  .ocm-header{justify-content:center;}
  .ocm-actions{justify-content:center;}
}


/* Responsive table wrapper */
.ocm-table{width:100%;border-collapse:collapse;}
.ocm-editor{overflow-x:auto;}

.ocm-textarea-md{min-height:72px;}
.ocm-textarea-lg{min-height:140px;}
.ocm-ki-row{display:flex;gap:10px;align-items:flex-start;margin-top:8px;}
.ocm-ki-row .ocm-btn{white-space:nowrap;}


/* Color picker button + swatches (v1.2.5) */
.ocm-color-row{display:flex;gap:8px;align-items:center;}
.ocm-color-row input{flex:1;min-width:0;}
.ocm-color-btn{height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(17,24,39,.35);color:#fff;cursor:pointer;min-width:110px;}
.ocm-color-btn:hover{background:rgba(17,24,39,.55);}
.ocm-swatches{display:flex;flex-wrap:wrap;gap:8px;}
.ocm-swatch{width:28px;height:28px;border-radius:999px;border:1px solid rgba(255,255,255,.18);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.2);}


/* v1.2.9 – ensure palette icon visible */
.ocm-color-btn svg{width:18px;height:18px;display:block;opacity:.95}