/* ==========================================================================
   Change Request Manager — dashboard styles
   Sleek, simple, full-width. Indigo accent, soft cards, smooth motion.
   ========================================================================== */

:root{
	--crm-bg:#f4f5f9;
	--crm-card:#ffffff;
	--crm-ink:#1d2433;
	--crm-muted:#7a8395;
	--crm-line:#e7e9f1;
	--crm-accent:#5b5bd6;
	--crm-accent-2:#7c6cf0;
	--crm-accent-soft:#ececfb;
	--crm-shadow:0 1px 2px rgba(20,24,40,.04),0 8px 24px rgba(20,24,40,.06);
	--crm-shadow-lg:0 10px 40px rgba(20,24,40,.16);
	--crm-radius:14px;
	--crm-radius-sm:10px;

	--p-low:#3aa76d;     --p-low-bg:#e6f6ee;
	--p-medium:#d98a13;  --p-medium-bg:#fdf1de;
	--p-high:#e0533d;    --p-high-bg:#fde9e5;
	--p-urgent:#d6336c;  --p-urgent-bg:#fce5ee;
}

/* hide theme chrome if shortcode is rendered inside a normal theme page */
html{height:100%;}
body.crm-body{margin:0;height:100%;background:var(--crm-bg);overflow:hidden;}
#crm-app *,#crm-modal *{box-sizing:border-box;}
#crm-app,#crm-modal{
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
	color:var(--crm-ink);
	-webkit-font-smoothing:antialiased;
}

/* ---------- layout ---------- */
#crm-app{
	display:flex;
	height:100vh;
	width:100%;
	overflow:hidden;
	background:var(--crm-bg);
}

.crm-side{
	width:248px;
	background:var(--crm-card);
	border-right:1px solid var(--crm-line);
	display:flex;flex-direction:column;
	padding:22px 16px;
	position:fixed;top:0;left:0;height:100vh;z-index:50;
}
.crm-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 22px;}
.crm-logo{
	width:34px;height:34px;border-radius:9px;
	background:linear-gradient(135deg,#5b5bd6,#8a5cf6);
	color:#fff;font-weight:700;font-size:13px;
	display:grid;place-items:center;letter-spacing:.5px;
}
.crm-brandname{font-weight:600;font-size:15px;}
.crm-nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.crm-nav-item{
	display:flex;align-items:center;gap:10px;
	padding:10px 12px;border-radius:10px;
	color:var(--crm-muted);text-decoration:none;font-size:14px;font-weight:500;
	transition:background .15s,color .15s;
}
.crm-nav-item:hover{background:var(--crm-bg);color:var(--crm-ink);}
.crm-nav-item.is-active{background:var(--crm-accent-soft);color:var(--crm-accent);}
.crm-ico{font-size:15px;width:18px;text-align:center;}
.crm-side-foot{display:flex;align-items:center;gap:10px;padding-top:16px;border-top:1px solid var(--crm-line);}
.crm-side-user{font-size:13px;line-height:1.3;}
.crm-side-user a{display:block;color:var(--crm-muted);text-decoration:none;font-size:12px;}
.crm-side-user a:hover{color:var(--crm-accent);}
.crm-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--crm-accent-soft);}

.crm-main{flex:1;min-width:0;margin-left:248px;max-width:calc(100% - 248px);
	height:100vh;display:flex;flex-direction:column;overflow:hidden;padding:24px 28px;}
.crm-view{flex:1;min-height:0;display:flex;flex-direction:column;}
.crm-scrollY{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:4px;}

/* ---------- headers ---------- */
.crm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap;}
.crm-head h1{font-size:24px;font-weight:700;margin:0;}
.crm-head .crm-sub{color:var(--crm-muted);font-size:14px;margin-top:2px;}
.crm-back{background:none;border:none;color:var(--crm-muted);cursor:pointer;font-size:14px;padding:0;margin-bottom:10px;}
.crm-back:hover{color:var(--crm-accent);}

/* ---------- buttons ---------- */
.crm-btn{
	border:none;border-radius:10px;cursor:pointer;
	font-size:14px;font-weight:600;padding:10px 16px;
	background:var(--crm-accent);color:#fff;
	transition:transform .08s,box-shadow .15s,opacity .15s;
	box-shadow:0 2px 8px rgba(91,91,214,.25);
}
.crm-btn:hover{box-shadow:0 4px 14px rgba(91,91,214,.32);}
.crm-btn:active{transform:translateY(1px);}
.crm-btn.ghost{background:var(--crm-card);color:var(--crm-ink);border:1px solid var(--crm-line);box-shadow:none;}
.crm-btn.ghost:hover{border-color:var(--crm-accent);color:var(--crm-accent);}
.crm-btn.sm{padding:7px 12px;font-size:13px;}
.crm-btn.danger{background:#fff;color:#d6336c;border:1px solid #f3c7d6;box-shadow:none;}

/* ---------- project grid ---------- */
.crm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.crm-pcard{
	background:var(--crm-card);border:1px solid var(--crm-line);
	border-radius:var(--crm-radius);padding:20px;cursor:pointer;
	box-shadow:var(--crm-shadow);transition:transform .12s,box-shadow .15s,border-color .15s;
	animation:crm-rise .3s ease both;
}
.crm-pcard:hover{transform:translateY(-3px);box-shadow:var(--crm-shadow-lg);border-color:#d7d9ec;}
.crm-pcard h3{margin:0 0 2px;font-size:17px;}
.crm-pcard .crm-client{color:var(--crm-muted);font-size:13px;margin-bottom:16px;}
.crm-pstats{display:flex;gap:16px;margin-bottom:14px;}
.crm-pstat{font-size:13px;color:var(--crm-muted);}
.crm-pstat b{display:block;font-size:20px;color:var(--crm-ink);}
.crm-bar{height:7px;border-radius:99px;background:var(--crm-bg);overflow:hidden;}
.crm-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#5b5bd6,#8a5cf6);transition:width .5s;}
.crm-rate{font-size:12px;color:var(--crm-muted);margin-top:8px;}
.crm-newproj{
	border:2px dashed var(--crm-line);background:transparent;border-radius:var(--crm-radius);
	display:grid;place-items:center;min-height:170px;cursor:pointer;color:var(--crm-muted);
	font-weight:600;font-size:15px;transition:border-color .15s,color .15s;
}
.crm-newproj:hover{border-color:var(--crm-accent);color:var(--crm-accent);}

/* ---------- kanban ---------- */
.crm-board-region{flex:1;min-height:0;display:flex;gap:22px;align-items:stretch;}
.crm-board{flex:1;min-width:0;display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;align-items:stretch;}
.crm-col{
	flex:0 0 280px;width:280px;
	background:#fafbff;
	border:1.5px solid var(--crm-line);
	border-radius:var(--crm-radius);
	padding:12px 10px;
	display:flex;flex-direction:column;
	height:100%;max-height:100%;
	transition:border-color .15s,background .15s;
}
.crm-col-head{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 12px;flex:0 0 auto;}
.crm-col-head .t{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--crm-muted);}
.crm-col-head .n{background:var(--crm-card);border:1px solid var(--crm-line);border-radius:99px;font-size:12px;padding:1px 9px;color:var(--crm-muted);}
.crm-list{
	flex:1 1 auto;min-height:0;overflow-y:auto;
	display:flex;flex-direction:column;gap:10px;
	padding:6px;border-radius:10px;
	outline:2px dashed transparent;outline-offset:-3px;
	transition:background .15s,outline-color .15s;
}
/* When a drag is in progress, light up EVERY column so the target is obvious. */
.crm-board.is-dragging .crm-col{border-color:#c9c9ee;}
.crm-board.is-dragging .crm-list{background:#f1f1fb;outline-color:#cdcdf0;}
/* The column the card is currently hovering over — its whole body is the drop zone. */
.crm-col.crm-col-over{border-color:var(--crm-accent);background:#f3f3fe;}
.crm-list.crm-drop{background:var(--crm-accent-soft);outline-color:var(--crm-accent);}

.crm-card-item{
	background:var(--crm-card);border:1px solid var(--crm-line);border-radius:12px;
	padding:14px;box-shadow:var(--crm-shadow);cursor:grab;
	transition:box-shadow .15s,transform .08s;animation:crm-rise .25s ease both;
}
.crm-card-item:hover{box-shadow:var(--crm-shadow-lg);}
.crm-card-item.sortable-ghost{opacity:.4;}
.crm-card-item.sortable-chosen{cursor:grabbing;}
.crm-pri{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:6px;margin-bottom:9px;}
.crm-pri.low{color:var(--p-low);background:var(--p-low-bg);}
.crm-pri.medium{color:var(--p-medium);background:var(--p-medium-bg);}
.crm-pri.high{color:var(--p-high);background:var(--p-high-bg);}
.crm-pri.urgent{color:var(--p-urgent);background:var(--p-urgent-bg);}
.crm-card-item h4{margin:0 0 6px;font-size:14px;line-height:1.35;}
.crm-card-item .crm-cdesc{color:var(--crm-muted);font-size:12.5px;line-height:1.4;margin:0 0 10px;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.crm-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.crm-card-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--crm-muted);}
.crm-tag{display:inline-flex;align-items:center;gap:4px;}
.crm-mini-av{width:24px;height:24px;border-radius:50%;object-fit:cover;background:var(--crm-accent-soft);}
.crm-thumb{width:100%;height:120px;object-fit:cover;border-radius:8px;margin-bottom:10px;}

.crm-addcard{flex:0 0 auto;background:none;border:none;color:var(--crm-muted);font-weight:600;font-size:13px;
	cursor:pointer;padding:8px 6px;border-radius:8px;text-align:left;width:100%;margin-top:8px;transition:background .15s,color .15s;}
.crm-addcard:hover{background:var(--crm-card);color:var(--crm-accent);}

/* ---------- activity rail ---------- */
.crm-with-rail{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start;}
.crm-rail{flex:0 0 300px;background:var(--crm-card);border:1px solid var(--crm-line);border-radius:var(--crm-radius);padding:18px;box-shadow:var(--crm-shadow);overflow-y:auto;max-height:100%;}
.crm-rail h3{margin:0 0 14px;font-size:14px;}
.crm-act{display:flex;gap:10px;font-size:13px;margin-bottom:14px;line-height:1.4;}
.crm-act .dot{width:8px;height:8px;border-radius:50%;background:var(--crm-accent);margin-top:5px;flex:0 0 8px;}
.crm-act .when{color:var(--crm-muted);font-size:11.5px;}

/* ---------- modal ---------- */
.crm-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;}
.crm-modal[hidden]{display:none;}
.crm-modal-backdrop{position:absolute;inset:0;background:rgba(20,24,40,.45);backdrop-filter:blur(2px);animation:crm-fade .2s ease;}
.crm-modal-box{position:relative;background:var(--crm-card);border-radius:18px;box-shadow:var(--crm-shadow-lg);
	width:560px;max-width:100%;max-height:88vh;overflow:auto;padding:26px;animation:crm-pop .22s cubic-bezier(.2,.8,.3,1.2) both;}
.crm-modal-box h2{margin:0 0 18px;font-size:19px;}
.crm-x{position:absolute;top:16px;right:18px;border:none;background:none;font-size:22px;line-height:1;color:var(--crm-muted);cursor:pointer;}
.crm-x:hover{color:var(--crm-ink);}

/* ---------- forms ---------- */
.crm-field{margin-bottom:15px;}
.crm-field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;}
.crm-field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.crm-field textarea,.crm-field select{
	width:100%;border:1px solid var(--crm-line);border-radius:10px;padding:11px 12px;font-size:14px;
	font-family:inherit;color:var(--crm-ink);background:#fff;transition:border-color .15s,box-shadow .15s;
}
.crm-field textarea{min-height:90px;resize:vertical;}
.crm-field input:focus,.crm-field textarea:focus,.crm-field select:focus{
	outline:none;border-color:var(--crm-accent);box-shadow:0 0 0 3px var(--crm-accent-soft);
}
.crm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.crm-file{display:block;border:2px dashed var(--crm-line);border-radius:10px;padding:16px;text-align:center;
	color:var(--crm-muted);font-size:13px;cursor:pointer;transition:border-color .15s;}
.crm-file:hover{border-color:var(--crm-accent);}
.crm-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px;}

/* ---------- change detail modal ---------- */
.crm-detail-meta{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 18px;}
.crm-chip{font-size:12px;background:var(--crm-bg);border:1px solid var(--crm-line);border-radius:8px;padding:5px 10px;color:var(--crm-muted);}
.crm-detail-img{width:100%;border-radius:10px;border:1px solid var(--crm-line);margin:6px 0 18px;}
.crm-imgpair{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.crm-imgpair figcaption{font-size:11px;color:var(--crm-muted);text-align:center;margin-bottom:4px;}
.crm-comments{margin-top:8px;border-top:1px solid var(--crm-line);padding-top:16px;}
.crm-comment{display:flex;gap:10px;margin-bottom:14px;}
.crm-comment .b{background:var(--crm-bg);border-radius:10px;padding:9px 12px;font-size:13px;line-height:1.4;flex:1;}
.crm-comment .b .meta{font-size:11px;color:var(--crm-muted);margin-top:3px;}
.crm-comment-form{display:flex;gap:8px;margin-top:6px;}
.crm-comment-form input{flex:1;border:1px solid var(--crm-line);border-radius:10px;padding:10px 12px;font-size:13px;}
.crm-comment-form input:focus{outline:none;border-color:var(--crm-accent);}

/* ---------- profile ---------- */
.crm-profile{max-width:520px;background:var(--crm-card);border:1px solid var(--crm-line);border-radius:var(--crm-radius);padding:26px;box-shadow:var(--crm-shadow);}
.crm-profile-top{display:flex;align-items:center;gap:16px;margin-bottom:22px;}
.crm-profile-top img{width:74px;height:74px;border-radius:50%;object-fit:cover;background:var(--crm-accent-soft);}

/* ---------- misc ---------- */
.crm-loading{color:var(--crm-muted);padding:40px;text-align:center;}
.crm-empty{color:var(--crm-muted);text-align:center;padding:50px;background:var(--crm-card);border:1px dashed var(--crm-line);border-radius:var(--crm-radius);}
.crm-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--crm-ink);color:#fff;
	padding:11px 18px;border-radius:10px;font-size:13px;box-shadow:var(--crm-shadow-lg);z-index:100000;animation:crm-rise .2s ease;}

@keyframes crm-rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes crm-fade{from{opacity:0;}to{opacity:1;}}
@keyframes crm-pop{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}

/* ---------- login page ---------- */
.crm-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--crm-bg);}
.crm-login-card{background:var(--crm-card);border:1px solid var(--crm-line);border-radius:18px;
	box-shadow:var(--crm-shadow-lg);width:420px;max-width:100%;padding:38px 40px;animation:crm-pop .25s ease both;}
.crm-login-brand{display:flex;align-items:center;gap:10px;margin-bottom:24px;}
.crm-login-card h1{font-size:20px;margin:0 0 4px;}
.crm-login-card .crm-sub{color:var(--crm-muted);font-size:14px;margin-bottom:22px;}
.crm-login-err{background:var(--p-high-bg);color:var(--p-high);border:1px solid #f3c7d6;
	border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:16px;}
.crm-login-card .crm-btn{
	display:flex;align-items:center;justify-content:center;
	width:100%;margin-top:12px;padding:13px 16px;
	font-size:15px;font-weight:600;letter-spacing:.2px;border-radius:11px;
	background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
	box-shadow:0 6px 18px rgba(99,91,224,.35);
	transition:transform .12s ease,box-shadow .18s ease,filter .18s ease;
}
.crm-login-card .crm-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(99,91,224,.45);filter:brightness(1.04);}
.crm-login-card .crm-btn:active{transform:translateY(0);box-shadow:0 4px 12px rgba(99,91,224,.35);}
.crm-login-card .crm-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--crm-accent-soft),0 6px 18px rgba(99,91,224,.35);}
.crm-remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--crm-muted);margin:8px 0 4px;}
.crm-remember input{width:16px;height:16px;accent-color:var(--crm-accent);}

/* ---------- paste dropzone ---------- */
.crm-file.has-img{padding:8px;border-style:solid;}
.crm-file .crm-preview{max-width:100%;max-height:160px;border-radius:8px;display:block;margin:0 auto 6px;}
.crm-file .crm-preview-name{font-size:12px;color:var(--crm-muted);}
.crm-paste-hint{font-size:11.5px;color:var(--crm-muted);margin-top:5px;}

/* ---------- activity drawer ---------- */
.crm-drawer{position:fixed;inset:0;z-index:90;}
.crm-drawer[hidden]{display:none;}
.crm-drawer-backdrop{position:absolute;inset:0;background:rgba(20,24,40,.4);backdrop-filter:blur(1px);animation:crm-fade .2s ease;}
.crm-drawer-panel{position:absolute;top:0;right:0;height:100%;width:380px;max-width:92%;
	background:var(--crm-card);box-shadow:var(--crm-shadow-lg);display:flex;flex-direction:column;
	padding:20px 22px;animation:crm-slidein .26s cubic-bezier(.2,.8,.3,1) both;}
@keyframes crm-slidein{from{transform:translateX(30px);opacity:.3;}to{transform:none;opacity:1;}}
.crm-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
	padding-bottom:14px;border-bottom:1px solid var(--crm-line);}
.crm-drawer-head h3{margin:0;font-size:16px;}
.crm-drawer-head button{border:none;background:none;font-size:24px;line-height:1;color:var(--crm-muted);cursor:pointer;}
.crm-drawer-head button:hover{color:var(--crm-ink);}
.crm-drawer-body{flex:1;min-height:0;overflow-y:auto;}

/* ---------- comment images / compose ---------- */
.crm-comment-img{max-width:100%;max-height:220px;border-radius:8px;margin-top:8px;display:block;border:1px solid var(--crm-line);}
.crm-comment-compose{display:flex;align-items:center;gap:8px;margin-top:6px;}
.crm-comment-compose input[type=text]{flex:1;border:1px solid var(--crm-line);border-radius:10px;padding:10px 12px;font-size:13px;}
.crm-comment-compose input[type=text]:focus{outline:none;border-color:var(--crm-accent);}
.crm-attach{cursor:pointer;font-size:18px;line-height:1;padding:8px;border:1px solid var(--crm-line);border-radius:10px;color:var(--crm-muted);user-select:none;}
.crm-attach:hover{border-color:var(--crm-accent);color:var(--crm-accent);}
.crm-cpreview{margin-top:10px;}
.crm-cpreview img{max-height:120px;border-radius:8px;border:1px solid var(--crm-line);display:block;}
.crm-cpreview .rm{font-size:12px;color:var(--p-high);cursor:pointer;margin-top:4px;display:inline-block;}

/* ---------- image lightbox ---------- */
.crm-detail-img,.crm-comment-img{cursor:zoom-in;}
.crm-lightbox{position:fixed;inset:0;z-index:100001;background:rgba(15,18,30,.88);
	display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;}
.crm-lightbox.is-open{display:flex;animation:crm-fade .15s ease;}
.crm-lb-img{max-width:94vw;max-height:92vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);
	animation:crm-pop .2s ease both;cursor:default;}
.crm-lb-close{position:fixed;top:18px;right:24px;background:rgba(255,255,255,.14);border:none;color:#fff;
	font-size:28px;line-height:1;width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;}
.crm-lb-close:hover{background:rgba(255,255,255,.26);}

/* ---------- custom scrollbars ---------- */
#crm-app *{scrollbar-width:thin;scrollbar-color:#cbceea transparent;}
#crm-app ::-webkit-scrollbar{height:10px;width:10px;}
#crm-app ::-webkit-scrollbar-track{background:transparent;}
#crm-app ::-webkit-scrollbar-thumb{background:#cbceea;border-radius:99px;border:2px solid transparent;background-clip:content-box;}
#crm-app ::-webkit-scrollbar-thumb:hover{background:#a9add8;background-clip:content-box;}
.crm-modal-box{scrollbar-width:thin;scrollbar-color:#cbceea transparent;}
.crm-modal-box::-webkit-scrollbar{width:10px;}
.crm-modal-box::-webkit-scrollbar-thumb{background:#cbceea;border-radius:99px;border:2px solid transparent;background-clip:content-box;}

/* ---------- responsive ---------- */
@media(max-width:900px){
	body.crm-body{overflow:auto;}
	#crm-app{height:auto;overflow:visible;display:block;}
	.crm-side{display:none;}
	.crm-main{display:block;height:auto;overflow:visible;margin-left:0;max-width:100%;padding:18px;}
	.crm-view{display:block;}
	.crm-scrollY{overflow:visible;}
	.crm-board-region{display:block;}
	.crm-board{overflow-x:auto;}
	.crm-col{height:auto;max-height:none;min-height:320px;}
	.crm-list{overflow:visible;}
	.crm-rail{max-height:none;margin-top:18px;}
	.crm-with-rail{grid-template-columns:1fr;}
}