/* com_mydocs - เอกสารดาวน์โหลด */

/*
 * พื้นหลังของหน้าคลังเอกสารและหน้ารายละเอียด
 *
 * Only there when the settings asked for one: with no --doc-page-bg the
 * fallback is transparent and the padding is nothing, so a site that has not
 * touched this looks exactly as it did. A background without room inside it
 * would put the search box hard against the colour, which is why the padding
 * and the corner travel with it rather than being three separate decisions.
 *
 * The module has its own root, .my-docs--module, and is left out on purpose:
 * a box in the sidebar sits on whatever the template put behind it.
 */
.my-docs:not(.my-docs--module),
.my-doc {
	background: var(--doc-page-bg, transparent);
	padding: var(--doc-page-pad, 0);
	border-radius: var(--doc-page-radius, 0);
}

/*
 * บนหน้าโล่ง ให้เป็นสีเดียวทั้งหน้าต่าง
 *
 * The bare layout is what a popup shows inside its window, and there the panel
 * was a slab of colour floating on the page's own paler shade: a band above it,
 * a margin down each side, and the rest of the window below it in the other
 * colour. What somebody setting this wants is the window, not a card in it.
 *
 * So on that layout the colour is handed to the page and the panel stops
 * painting its own. The room inside comes from the bare layout's own padding,
 * which is already there.
 *
 * Two classes and an element, to beat the template's own "body.my-site"
 * whichever of the two stylesheets the browser reads first.
 */
body.my-site.my-blank { background: var(--doc-page-bg, var(--my-bg, #f6f8fb)); }

body.my-blank .my-docs:not(.my-docs--module),
body.my-blank .my-doc {
	background: none;
	padding: 0;
	border-radius: 0;
}

.my-docs__heading { margin: 0 0 18px; }

/* ------------------------------------------------------------- groups --- */
.my-docs__groups { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.my-docs__chip {
	display: inline-flex; align-items: center; padding: 6px 15px; border-radius: 999px;
	border: 1px solid var(--my-line, #e5e7eb); background: #fff;
	color: #46566f; font-size: .85rem; font-weight: 600; text-decoration: none;
	transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.my-docs__chip:hover { text-decoration: none; border-color: var(--my-primary, #1b5fa8); color: var(--my-primary, #1b5fa8); }
.my-docs__chip.is-active { background: var(--my-primary, #1b5fa8); border-color: var(--my-primary, #1b5fa8); color: #fff; }

/* --------------------------------------------------------------- list --- */
.my-docs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

/*
 * One row per document: the file icon stands in for the picture the news
 * cards use, then the title and its details, then the actions.
 */
.my-docs__item {
	display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px;
	background: var(--my-card-bg, #fff);
	border: var(--my-card-bw, 1px) solid var(--my-card-bd, var(--my-line, #e5e7eb));
	border-radius: var(--my-radius, 14px);
	box-shadow: var(--my-card-shadow, var(--my-shadow, 0 2px 14px rgba(16, 40, 80, .08)));
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.my-docs__item:hover {
	border-color: var(--my-card-glow, var(--my-primary, #1b5fa8));
	box-shadow: var(--my-card-shadow-hover, var(--my-shadow-lg, 0 10px 34px rgba(16, 40, 80, .14)));
	transform: translateY(-2px);
}

/* -------------------------------------------------------------- icon ---- */
.my-docs__icon {
	flex: 0 0 auto; width: 58px;
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	color: var(--doc-c, #64748b);
}
.my-docs__icon i { font-size: 2.1rem; line-height: 1; }

.my-docs__ext {
	font-size: .62rem; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; color: var(--doc-c, #64748b);
}

/* -------------------------------------------------------------- body ---- */
.my-docs__body { flex: 1 1 auto; min-width: 0; }

.my-docs__title { font-size: 1.02rem; margin: 0 0 4px; line-height: 1.5; }
.my-docs__title a { color: #13203a; }
.my-docs__title a:hover { color: var(--my-primary, #1b5fa8); }

/*
 * The red is the default, not the rule: a module may hand down --doc-new-bg and
 * --doc-new-fg, either picked by hand or taken from the template's own tone. A
 * page that hands down nothing gets exactly what it always got.
 */
.my-docs__new {
	display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
	margin-inline-start: 7px; border-radius: 999px; padding: 3px 10px;
	background: var(--doc-new-bg, linear-gradient(135deg, #ef4444, #dc2626));
	color: var(--doc-new-fg, #fff);
	font-size: .68rem; font-weight: 700; line-height: 1; white-space: nowrap;
}

/* เส้นทางหมวดของเอกสารในโมดูล */
.my-docs__where {
	display: flex; align-items: center; gap: 6px;
	margin: 0 0 4px; font-size: .78rem; color: var(--my-muted, #6b7280);
	overflow-wrap: anywhere;
}

.my-docs__where i { flex: 0 0 auto; opacity: .75; }

.my-docs__intro {
	margin: 0 0 6px; font-size: .88rem; color: var(--my-muted, #6b7280); line-height: 1.6;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.my-docs__meta {
	display: flex; flex-wrap: wrap; gap: 6px 16px;
	font-size: .8rem; color: var(--my-muted, #6b7280);
}
.my-docs__meta i { margin-inline-end: 4px; color: var(--my-primary, #1b5fa8); }

/* ----------------------------------------------------------- actions ---- */
.my-docs__actions {
	flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}

.my-docs__btn {
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
	padding: 9px 20px; border-radius: 999px;
	background: linear-gradient(135deg, var(--my-primary, #1b5fa8), var(--my-light, #2e80d6));
	color: #fff; font-size: .88rem; font-weight: 600; text-decoration: none;
	box-shadow: 0 5px 16px rgba(16, 40, 80, .2);
	transition: transform .18s ease, box-shadow .18s ease;
}
.my-docs__btn:hover {
	color: #fff; text-decoration: none;
	transform: translateY(-2px); box-shadow: 0 9px 24px rgba(16, 40, 80, .28);
}

.my-docs__gone { font-size: .8rem; color: #b91c1c; }

.my-docs__empty {
	padding: 28px; text-align: center; color: var(--my-muted, #6b7280);
	background: #fff; border: 1px dashed var(--my-line, #e5e7eb); border-radius: var(--my-radius, 14px);
}

.my-docs__pagination { margin-top: 20px; display: flex; justify-content: center; }

/* ------------------------------------------------------- responsive ----- */
@media (max-width: 767px) {
	.my-docs__item { flex-wrap: wrap; }
	.my-docs__body { flex: 1 1 100%; order: 2; }
	.my-docs__actions { flex: 1 1 100%; order: 3; flex-direction: row; align-items: center; justify-content: space-between; }
	.my-docs__icon { order: 1; flex-direction: row; width: auto; gap: 8px; align-items: center; }
	.my-docs__icon i { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.my-docs__item, .my-docs__btn, .my-docs__chip { transition: none; }
}

/* ------------------------------------------------ one document page ----- */
.my-doc {
	background: var(--my-card-bg, #fff);
	border: var(--my-card-bw, 1px) solid var(--my-card-bd, var(--my-line, #e5e7eb));
	border-radius: var(--my-radius, 14px); padding: 26px;
	box-shadow: var(--my-card-shadow, var(--my-shadow, 0 2px 14px rgba(16, 40, 80, .08)));
}

.my-doc__head { display: flex; align-items: flex-start; gap: 18px; }

.my-doc__icon {
	flex: 0 0 auto; width: 74px;
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	color: var(--doc-c, #64748b);
}
.my-doc__icon i { font-size: 3rem; line-height: 1; }

.my-doc__ident { flex: 1 1 auto; min-width: 0; }
.my-doc__title { font-size: 1.5rem; margin: 0 0 8px; line-height: 1.4; }

.my-doc__desc { margin-top: 18px; line-height: 1.8; }

.my-doc__actions {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 14px; margin-top: 22px;
	padding-top: 18px; border-top: 1px solid var(--my-line, #e5e7eb);
}
.my-doc__btn { padding: 11px 28px; font-size: .95rem; }

.my-doc__back { margin: 18px 0 0; font-size: .88rem; }
.my-doc__back i { margin-inline-end: 6px; }

@media (max-width: 575px) {
	.my-doc { padding: 18px; }
	.my-doc__head { gap: 12px; }
	.my-doc__icon { width: 54px; }
	.my-doc__icon i { font-size: 2.2rem; }
	.my-doc__title { font-size: 1.2rem; }
	.my-doc__actions { flex-direction: column; align-items: stretch; }
}
/* ===================================================== 1.4.0 คลังโฟลเดอร์ === */
/*
 * The library reads as a place rather than a list: a path across the top, then
 * folders, then the documents filed here. Everything below reuses the colours
 * the template publishes, so a site that changes its tone takes this with it.
 */

.my-docs__path {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: .9rem;
	margin-bottom: 14px;
	color: var(--my-muted, #64748b);
}

.my-docs__path a { color: inherit; text-decoration: none; }
.my-docs__path a:hover { color: var(--my-primary, #1b5fa8); text-decoration: underline; }
.my-docs__path .is-here { color: var(--my-ink, #1b2436); font-weight: 600; }
.my-docs__sep { font-size: .62rem; opacity: .5; }

/* ------------------------------------------------- ค้นหาและเรียงลำดับ --- */

.my-docs__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.my-docs__search {
	position: relative;
	flex: 1 1 260px;
	display: flex;
	align-items: center;
}

/* The label is there for a screen reader; the icon is what everyone else sees. */
.my-docs__srlabel {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.my-docs__search > i {
	position: absolute;
	inset-inline-start: 12px;
	color: var(--my-muted, #94a3b8);
	pointer-events: none;
	font-size: .9rem;
}

/*
 * ช่องค้นหาต้องเว้นที่ให้ไอคอน
 *
 * Written with the wrapper in front of it on purpose. The template dresses every
 * text box on the site with `body.my-site input[type="text"]`, which is worth
 * (0,2,2) and arrives after this file - so the plain `.my-docs__search input`
 * that used to be here, at (0,2,1), lost twice over and had its 36px of room
 * replaced by the template's 12px. The magnifying glass then sat on top of the
 * first letter of the placeholder.
 *
 * Naming .my-docs as well makes this (0,3,1), which wins on its own account
 * rather than on the order the stylesheets happen to load in.
 */
.my-docs .my-docs__search input[type="text"] {
	width: 100%;
	padding: 9px 38px;
	border: 1px solid var(--my-line, #dfe5ee);
	border-radius: 999px;
	font: inherit;
	font-size: .94rem;
	line-height: 1.4;
	background: #fff;
}

.my-docs .my-docs__search input[type="text"]:focus {
	outline: 2px solid var(--my-primary, #1b5fa8);
	outline-offset: 1px;
	box-shadow: none;
}

.my-docs__clear {
	position: absolute;
	inset-inline-end: 12px;
	color: var(--my-muted, #94a3b8);
	text-decoration: none;
}

.my-docs__sort { display: flex; gap: 4px; flex: 0 0 auto; }

.my-docs__sortlink {
	padding: 6px 12px;
	border-radius: 999px;
	font-size: .88rem;
	color: var(--my-muted, #64748b);
	text-decoration: none;
}

.my-docs__sortlink:hover { background: rgba(0, 0, 0, .05); text-decoration: none; }

.my-docs__sortlink.is-active {
	background: var(--my-primary, #1b5fa8);
	color: var(--my-on-primary, #fff);
}

.my-docs__found { color: var(--my-muted, #64748b); font-size: .92rem; margin: 0 0 14px; }

/* จำนวนเอกสารในหมวด - อยู่แถวเดียวกับช่องค้นหา แทนปุ่มเรียงลำดับเดิม */
.my-docs__total {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .05);
	color: var(--my-muted, #64748b);
	font-size: .88rem;
}

.my-docs__total strong { color: var(--my-primary, #1b5fa8); }

/* ปุ่มกลับ ด้านบนของหน้ารายละเอียด */
.my-doc__topback { margin: 0 0 14px; }

.my-doc__topback a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--my-line, #dfe5ee);
	background: var(--my-card-bg, #fff);
	color: var(--my-primary, #1b5fa8);
	font-weight: 600;
	font-size: .92rem;
	text-decoration: none;
}

/* ปุ่มกลับตัวล่าง ใต้รายการในโฟลเดอร์ */
.my-doc__topback.my-docs__back--bottom { margin: 20px 0 0; }

.my-doc__topback a:hover { background: var(--my-primary, #1b5fa8); color: var(--my-on-primary, #fff); text-decoration: none; }

/* -------------------------------------------------------- โฟลเดอร์ --- */

/* แถวละโฟลเดอร์ (ผู้ใช้สั่ง) - ชื่อยาว ๆ อย่าง "ประกาศผู้ชนะ...ประจำเดือน" อ่านได้ทั้งชื่อ */
.my-docs__folders {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-bottom: 22px;
}

.my-docs__folder {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--my-line, #dfe5ee);
	border-radius: 12px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}

.my-docs__folder:hover {
	border-color: var(--my-primary, #1b5fa8);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px -14px rgba(16, 24, 40, .5);
	text-decoration: none;
}

.my-docs__foldericon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: color-mix(in srgb, var(--my-primary, #1b5fa8) 12%, transparent);
	color: var(--my-primary, #1b5fa8);
	font-size: 1.15rem;
}

.my-docs__foldertext { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.my-docs__foldername { font-weight: 600; overflow-wrap: anywhere; }
.my-docs__foldercount { font-size: .84rem; color: var(--my-muted, #64748b); }
.my-docs__foldergo { flex: 0 0 auto; color: var(--my-muted, #cbd5e1); font-size: .8rem; }

/* ------------------------------------------------------------ ป้าย --- */

.my-docs__flag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: 8px;
	padding: 1px 9px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	vertical-align: middle;
	white-space: nowrap;
}

.my-docs__flag.is-hot { background: #fff1e6; color: #c2410c; }
.my-docs__flag.is-locked { background: #eef2f7; color: #475569; }

.my-docs__btn.is-locked { background: #64748b; }
.my-docs__btn.is-link { background: #0f7b8a; }

/* --------------------------------------------------- หน้ารายละเอียด --- */

.my-doc__cover {
	flex: 0 0 auto;
	width: 132px;
	height: 132px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid var(--my-line, #dfe5ee);
	background: #fff;
}

.my-doc__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 8px 18px;
	margin: 12px 0 0;
}

.my-doc__facts > div { display: grid; gap: 1px; }
.my-doc__facts dt { font-size: .8rem; color: var(--my-muted, #64748b); }
.my-doc__facts dd { margin: 0; font-weight: 600; font-size: .95rem; }

/* ------------------------------------------------------ ไฟล์ในรายการ --- */

.my-doc__files { margin-top: 22px; }

.my-doc__filestitle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.05rem;
	margin: 0 0 10px;
}

.my-doc__filesn {
	padding: 1px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--my-primary, #1b5fa8) 12%, transparent);
	color: var(--my-primary, #1b5fa8);
	font-size: .8rem;
}

.my-doc__filelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.my-doc__file {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--my-line, #dfe5ee);
	border-radius: 10px;
	background: #fff;
}

.my-doc__file.is-main { border-inline-start: 4px solid var(--my-primary, #1b5fa8); }
.my-doc__filebody { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.my-doc__filename { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.my-doc__filemeta { font-size: .84rem; color: var(--my-muted, #64748b); }

/* ------------------------------------------------ ช่องกรอกรหัสผ่าน --- */

.my-doc__gate {
	margin-top: 22px;
	padding: 20px;
	border: 1px dashed var(--my-line, #cbd5e1);
	border-radius: 12px;
	background: #f8fafc;
	max-width: 520px;
}

.my-doc__gatelead {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--my-muted, #475569);
	font-size: .94rem;
}

.my-doc__gaterow { display: flex; gap: 8px; flex-wrap: wrap; }

.my-doc__gaterow input[type="password"] {
	flex: 1 1 180px;
	padding: 9px 12px;
	border: 1px solid var(--my-line, #dfe5ee);
	border-radius: 8px;
	font: inherit;
}

.my-doc__gaterow .my-docs__btn { border: 0; cursor: pointer; font: inherit; }

@media (max-width: 575px) {
	.my-docs__bar { flex-direction: column; align-items: stretch; }
	/*
	 * In a column the 260px basis the search box has for sharing a row becomes
	 * its height, which left a band of empty space above and below it on a
	 * phone. Its own height is all it needs here.
	 */
	.my-docs__search { flex: 0 0 auto; }
	.my-docs__total { align-self: flex-start; }
	.my-docs__sort { justify-content: space-between; }
	.my-doc__cover { width: 96px; height: 96px; }
	.my-doc__file { flex-wrap: wrap; }
}