/* Julia Business OS -- shared styling for shell.js fragments (public/components/*.html)
   loaded into index.html's #moduleBody. Extends shell.css's existing tokens/classes
   (.hero, .panel, .metrics, .hidden already defined there) rather than redefining them --
   only classes shell.css does not already provide. */

.module-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.module-head h1{font-size:22px;margin:0 0 4px;letter-spacing:-.03em}
.module-head p{font-size:12px;color:#777d86;margin:0}

.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
.card{border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:17px 18px}
.card span{display:block;font-size:11px;color:#6f7580;font-weight:650}
.card strong{display:block;font-size:24px;margin-top:9px}
.card small{display:block;font-size:10px;color:#91969f;margin-top:10px}

.panel-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:14px;margin-bottom:14px}
.panel>h2{margin:17px 17px 4px;font-size:14px}
.panel>p{margin:0 17px 14px;font-size:11px;color:#777d86;line-height:1.45}

.key-row{display:flex;gap:8px;padding:0 17px 14px;flex-wrap:wrap}
.key-row-select,.key-row select{flex:1;min-width:120px;height:34px;border:1px solid #daddE2;border-radius:8px;padding:0 10px;font-size:11px;background:#fff}
.key-row input[type="password"],.key-row input[type="text"]{flex:1;min-width:120px;height:34px;border:1px solid #daddE2;border-radius:8px;padding:0 10px;font-size:11px}

.mini-list{padding:0 17px 17px}
.mini-list>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #eceef0;font-size:11px}
.mini-list>div:first-child{border-top:0}
.mini-list b{font-weight:650}
.mini-list span{color:#777d86;font-size:10px;text-align:right}

.small-btn{height:32px;padding:0 12px;border:1px solid #daddE2;background:#fff;color:#30343a;border-radius:8px;font-size:11px;font-weight:650;cursor:pointer}
.small-btn:hover{border-color:#c7cbd2}
.small-btn:disabled{opacity:.55;cursor:default}
.primary-btn{height:34px;padding:0 14px;border:1px solid #5f5bd7;background:#5f5bd7;color:#fff;border-radius:9px;font-size:11px;font-weight:650;cursor:pointer}
.primary-btn:disabled{opacity:.6;cursor:default}

.ai-prompt{display:block;width:calc(100% - 34px);margin:0 17px 10px;min-height:70px;border:1px solid #daddE2;border-radius:8px;padding:10px;font-size:12px;resize:vertical}
#aiAnswer{margin:8px 17px 17px;font-size:12px;color:#4b5059;line-height:1.55}

.ai-provider-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:16px}
.ai-provider-card{border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:16px}
.ai-mark{width:34px;height:34px;border-radius:9px;background:#efeffc;color:#5f5bd7;display:grid;place-items:center;font-weight:800;font-size:11px;margin-bottom:10px}
.ai-provider-card h3{font-size:13px;margin:0 0 4px}
.ai-provider-card p{font-size:10px;color:#777d86;margin:0 0 12px;line-height:1.45}
.ai-provider-card .key-row{padding:0}

.ai-status{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.02em;padding:4px 9px;border-radius:99px;background:#f1f2f4;color:#6f7580;margin-bottom:12px}
.ai-status.status-green{background:#e7f6ee;color:#1f8f5f}
.ai-status.status-yellow{background:#fdf2df;color:#b87915}
.ai-status.status-red{background:#fbeaea;color:#bf4545}

/* Connections catalog (integrations.html) -- same fragment styling system */
.integration-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:16px}
.integration-card{border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:16px}
.integration-card h3{font-size:13px;margin:0 0 4px}
.integration-card p{font-size:10px;color:#777d86;margin:0 0 10px;line-height:1.45}
.integration-card .key-row{padding:0 0 8px}
.integration-card .key-row input{flex:1 1 100%}

/* Documents (files.html) -- real drag & drop upload, Phase 1 (2026-08-18) */
.drop-zone{border:2px dashed #daddE2;border-radius:12px;padding:34px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.drop-zone:hover,.drop-zone:focus{border-color:#5f5bd7;outline:none}
.drop-zone.dragover{border-color:#5f5bd7;background:#f5f4ff}
.drop-zone .icon{font-size:28px;margin-bottom:8px}
.drop-zone h3{font-size:13px;margin:0 0 4px}
.drop-zone p{font-size:11px;color:#777d86;margin:0}
.drop-zone-link{color:#5f5bd7;text-decoration:underline}
.upload-status{font-size:11px;margin-top:10px;min-height:14px}
.upload-status.success{color:#1f8f5f}
.upload-status.error{color:#bf4545}
.table-panel table td,.table-panel table th{border-top:1px solid #eceef0}
.table-panel table thead th{border-top:0;color:#6f7580;font-size:10px;text-transform:uppercase;letter-spacing:.03em}

/* Tasks board (tasks-board.html) -- real drag & drop, Phase 3 (2026-08-18) */
.task-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
.task-col h3{font-size:11px;color:#6f7580;margin:0 0 8px;display:flex;justify-content:space-between}
.task-col-body{min-height:60px;display:flex;flex-direction:column;gap:8px;border-radius:10px;padding:2px;transition:background .1s}
.task-col-body.drop-target{background:#f2f1ff;outline:2px dashed #5f5bd7}
.task-card{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:11px 28px 11px 12px;cursor:grab;font-size:12px}
.task-card.dragging{opacity:.4}
.task-card b{display:block;font-size:12px}
.task-due{display:block;font-size:10px;color:#777d86;margin-top:5px}
.task-card.overdue .task-due{color:#bf4545;font-weight:650}
.task-delete{position:absolute;top:7px;right:7px;width:18px;height:18px;border:0;background:transparent;color:#b7bac0;font-size:14px;line-height:1;cursor:pointer}
.task-delete:hover{color:#bf4545}
.task-empty{font-size:10px;color:#91969f;padding:8px 0}

@media(max-width:1050px){.panel-grid{grid-template-columns:1fr}}