/* ========================================
   CSS Variables for Light/Dark Theme
   ======================================== */
:root,
[data-theme="light"] {
    /* Container */
    --color-ca-background: #ffffff;
    
    /* List & Empty */
    --color-ca-list-text: #777777;
    
    /* Title */
    --color-ca-title-text: #fb5555;
    --color-ca-title-border: #d0d0d0;
    
    /* Item */
    --color-ca-item-text: grey;
    --color-ca-item-ava-outline: #939393;
    
    /* Header & Nick */
    --color-ca-author-user-nick: #4b5349;
    --color-ca-author-admin-nick: #00ca29;
    
    /* Posts */
    --color-ca-post-border: #f0efef;
    --color-ca-post-readed-bg: #f2f1f1;
    
    /* Message */
    --color-ca-message-admin: #349100;
    
    /* Actions (SVG icons) */
    --color-ca-action-edit: #333333;
    --color-ca-action-delete: #333333;
    --color-ca-action-save: #324D5B;
    --color-ca-action-cancel: #000000;
    
    /* Form */
    --color-ca-form-submit-bg-start: #ed4747;
    --color-ca-form-submit-bg-end: #ae7a7a;
    --color-ca-form-submit-text: #ffffff;
    --color-ca-form-submit-shadow: #b3b0b0;
    --color-ca-form-submit-hover-bg-start: #ca6b6b;
    --color-ca-form-submit-hover-bg-end: #681010;
    
    /* Error */
    --color-ca-error: red;
    
    /* Loading */
    --color-ca-loading-bg: #111111b3;
    --color-ca-loading-text: #ffffff;
    
    /* Maintenance */
    --color-ca-maintenance-text: #8a6d3b;
    --color-ca-maintenance-bg: #fcf8e3;
    --color-ca-maintenance-border: #faebcc;
}

[data-theme="dark"] {
    /* Container */
    --color-ca-background: #1e1e1e;
    
    /* List & Empty */
    --color-ca-list-text: #a0a0a0;
    
    /* Title */
    --color-ca-title-text: #ff6b6b;
    --color-ca-title-border: #444444;
    
    /* Item */
    --color-ca-item-text: #b0b0b0;
    --color-ca-item-ava-outline: #666666;
    
    /* Header & Nick */
    --color-ca-author-user-nick: #c5d0c0;
    --color-ca-author-admin-nick: #4ade80;
    
    /* Posts */
    --color-ca-post-border: #333333;
    --color-ca-post-readed-bg: #2a2a2a;
    
    /* Message */
    --color-ca-message-admin: #86efac;
    
    /* Actions (SVG icons) - brighter for dark theme */
    --color-ca-action-edit: #e0e0e0;
    --color-ca-action-delete: #e0e0e0;
    --color-ca-action-save: #90a4ae;
    --color-ca-action-cancel: #e0e0e0;
    
    /* Form */
    --color-ca-form-submit-bg-start: #ef5350;
    --color-ca-form-submit-bg-end: #c68a8a;
    --color-ca-form-submit-text: #ffffff;
    --color-ca-form-submit-shadow: #4a4a4a;
    --color-ca-form-submit-hover-bg-start: #f44336;
    --color-ca-form-submit-hover-bg-end: #8e2727;
    
    /* Error */
    --color-ca-error: #ff6b6b;
    
    /* Loading */
    --color-ca-loading-bg: #000000cc;
    --color-ca-loading-text: #ffffff;
    
    /* Maintenance */
    --color-ca-maintenance-text: #f1c40f;
    --color-ca-maintenance-bg: #3d342b;
    --color-ca-maintenance-border: #5d4e3a;
}

.ca {display: flex;flex-direction: column;}


.ca .ca--list {padding: 10px;margin: 0;display: flex;flex-direction: column;}
.ca .ca--empty {padding: 15px 5px;color: var(--color-ca-list-text);}
.ca .ca--title {font-weight: bold;border-bottom: 1px solid var(--color-ca-title-border);padding-bottom: 6px;color: var(--color-ca-title-text);}


.ca--item {color: var(--color-ca-item-text);display: grid;grid-template-columns: 32px 1fr;grid-gap: 10px;padding-bottom: 7px;margin-bottom: 7px;}
.ca--item .ca--ava {display: flex;overflow: hidden;border-radius: 50% 51%;align-self: baseline;outline: 1px solid var(--color-ca-item-ava-outline);}
.ca--item a.ca--ava {display: block;padding: 0;margin: 0;overflow: hidden;height: 32px;width: 32px;}
.ca--item .ca--ava i {display:block;width:32px;height:32px;background:url('user.png') 0 0 no-repeat;}

.ca--wrapper {display:flex;flex-direction: column;}

.ca--header {display: block;margin-bottom: 5px;padding-left: 10px;}
.ca--header .ca--nick {display:block;}
.ca-author-user .ca--nick {color: var(--color-ca-author-user-nick);font-weight: bold;font-size: 13px;}
.ca--author-admin .ca--nick {color: var(--color-ca-author-admin-nick);font-weight: bold;font-size: 13px;}

.ca--posts {display: grid;grid-row-gap: 3px;}
.ca--posts .ca--post:not(:last-child) {border-bottom: 1px solid var(--color-ca-post-border);}


.ca--post {display: flex;padding: 5px 10px;flex-direction: row;justify-content: space-between;}
.ca--post.readed-no {background: var(--color-ca-post-readed-bg);}
.ca--message-info {display: flex;flex-wrap: wrap;min-width: 75px;justify-content: end;}
.ca--message-info .ca--date {word-wrap: unset;margin-bottom: 3px;padding-left: 10px;}

.ca--actions {display:flex; flex-wrap:wrap;}
.ca--actions > * {cursor:pointer;width:16px;display:inline-block;height:16px;padding:0;margin:0;background-size: cover;opacity:0.4;margin-left:10px;}
.ca--actions > *:hover { opacity:1;}

.ca--actions .ca--edit{background-image: url("data:image/svg+xml,%3Csvg width='512px' height='512px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' version='1.1' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:var(--color-ca-action-edit);%7D%0A%3C/style%3E%3Cg id='Layer_1'/%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st0' d='M43.5,482.5h108.54c0.54,0,1.07-0.03,1.6-0.08c0.39-0.04,0.78-0.11,1.17-0.17c0.13-0.02,0.26-0.03,0.39-0.06 c0.46-0.09,0.91-0.21,1.36-0.34c0.05-0.01,0.1-0.02,0.15-0.04c0.45-0.14,0.9-0.3,1.33-0.48c0.04-0.02,0.09-0.03,0.14-0.05 c0.42-0.17,0.82-0.37,1.21-0.57c0.07-0.03,0.14-0.06,0.2-0.1c0.37-0.2,0.72-0.41,1.07-0.64c0.09-0.06,0.19-0.11,0.28-0.17 c0.33-0.22,0.65-0.47,0.96-0.71c0.1-0.08,0.2-0.14,0.29-0.22c0.41-0.33,0.8-0.69,1.17-1.06l246.98-246.98 c0.02-0.02,0.04-0.04,0.07-0.06s0.04-0.04,0.06-0.07l58.92-58.92v0c5.81-5.81,9.01-13.53,9.01-21.75c0-8.21-3.2-15.94-9.01-21.74 l-83.7-83.69c-11.99-11.99-31.5-11.99-43.49,0l-58.96,58.96c-0.01,0.01-0.02,0.01-0.02,0.02s-0.01,0.02-0.02,0.02l-251.01,251 c-0.37,0.37-0.72,0.76-1.05,1.16c-0.09,0.1-0.16,0.22-0.24,0.32c-0.24,0.31-0.48,0.61-0.69,0.94c-0.07,0.1-0.12,0.2-0.18,0.3 c-0.22,0.34-0.43,0.69-0.63,1.05c-0.04,0.07-0.07,0.15-0.1-0.22c-0.2,0.39-0.4,0.79-0.57,1.2c-0.02,0.05-0.04,0.1-0.06,0.15 c-0.17,0.43-0.34,0.87-0.47,1.32c-0.02,0.05-0.03,0.11-0.04,0.16c-0.13,0.44-0.25,0.89-0.34,1.35c-0.03,0.13-0.04,0.27-0.06,0.4 c-0.07,0.38-0.13,0.76-0.17,1.15c-0.05,0.53-0.08,1.06-0.08,1.6V466.5C27.5,475.34,34.66,482.5,43.5,482.5z M59.5,450.5v-77.95 l235.03-235.02l81.93,81.93L145.41,450.5H59.5z M363.94,68.12l81.93,81.92l-46.79,46.79l-81.93-81.93L363.94,68.12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
.ca--actions .ca--delete{background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1792 1792' style='enable-background:new 0 0 1792 1792;' xml:space='preserve'%3E%3Cpath d='M1082.2,896.6l410.2-410c51.5-51.5,51.5-134.6,0-186.1s-134.6-51.5-186.1,0l-410.2,410L486,300.4 c-51.5-51.5-134.6-51.5-186.1,0s-51.5,134.6,0,186.1l410.2,410l-410.2,410c-51.5,51.5-51.5,134.6,0,186.1 c51.6,51.5,135,51.5,186.1,0l410.2-410l410.2,410c51.5,51.5,134.6,51.5,186.1,0c51.1-51.5,51.1-134.6-0.5-186.2L1082.2,896.6z'/%3E%3C/svg%3E%0A");}
.ca--actions .ca--save{background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 280.028 280.028' style='enable-background:new 0 0 280.028 280.028;' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:var(--color-ca-action-save);' d='M17.502,0h245.024c9.661,0,17.502,7.832,17.502,17.502v245.024c0,9.67-7.841,17.502-17.502,17.502 H17.502C7.841,280.027,0,272.195,0,262.526V17.502C0,7.841,7.841,0,17.502,0z'/%3E%3Cpath style='fill:%23CCD0D2;' d='M52.505,175.017h175.017c9.661,0,17.502,7.841,17.502,17.502v87.509H35.003v-87.509 C35.003,182.858,42.844,175.017,52.505,175.017z'/%3E%3Cpath style='fill:%23E4E7E7;' d='M52.505,157.515h175.017c9.661,0,17.502,7.841,17.502,17.502v26.253H35.003v-26.253 C35.003,165.356,42.844,157.515,52.505,157.515z'/%3E%3Cpath style='fill:%232B414D;' d='M245.024,0v105.01c0,9.67-7.841,17.502-17.502,17.502H52.505c-9.661,0-17.502-7.832-17.502-17.502V0 H245.024z'/%3E%3Cpath style='fill:%23CCD0D2;' d='M122.512,0v96.259c0,4.83,3.92,8.751,8.751,8.751h87.509c4.839,0,8.751-3.92,8.751-8.751V0H122.512z M210.021,78.758c0,4.83-3.912,8.751-8.751,8.751h-8.751c-4.839,0-8.751-3.92-8.751-8.751V26.253c0-4.83,3.912-8.751,8.751-8.751 h8.751c4.839,0,8.751,3.92,8.751,8.751V78.758z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");}
.ca--actions .ca--cancel{background-image: url("data:image/svg+xml,%3Csvg width='24px' height='24px' viewBox='0 0 24 24' role='img' xmlns='http://www.w3.org/2000/svg' aria-labelledby='backLeftIconTitle' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' color='%23e0e0e0'%3E%3Ctitle id='backLeftIconTitle'%3ETurn back%3C/title%3E%3Cpath d='M5,17 L5,15 C5,10.0294373 8.80557963,6 13.5,6 C18.1944204,6 22,10.0294373 22,15'/%3E%3Cpolyline points='8 15 5 18 2 15'/%3E%3C/svg%3E");}

.ca--post[data-mode="std"] .ca--save,
.ca--post[data-mode="std"] .ca--cancel {display:none;}

.ca--post[data-mode="edit"] .ca--edit,
.ca--post[data-mode="edit"] .ca--delete,
.ca--post[data-mode="edit"] .ca--message {display:none;}

.ca--post.author-admin .ca--message {color: var(--color-ca-message-admin);font-weight: bold;}

.ca--messageedit {display: contents;width: -moz-available;;}
.ca--messageedit textarea {min-height:100px; width:100%;}


.ca--form {position:relative;}
.ca--form textarea {width: calc( 100% - 10px);padding:5px;background-color: var(--color-form-input-bg);color: var(--color-form-input-text);border: 1px solid var(--color-form-input-border-normal);}
.ca--form .ca--form_submit {display: inline-block;background: linear-gradient(var(--color-ca-form-submit-bg-start),var(--color-ca-form-submit-bg-end));color: var(--color-ca-form-submit-text);padding: 3px 18px;margin: 10px 0 0 0;border-radius: 3px;box-shadow: 3px 3px 3px var(--color-ca-form-submit-shadow);cursor: pointer;font-size: 13px;}
.ca--form .ca--form_submit:hover {background:linear-gradient(var(--color-ca-form-submit-hover-bg-start),var(--color-ca-form-submit-hover-bg-end));}
.ca--error {color : var(--color-ca-error); padding: 10px;font-weight:bold;}


.ca--loading {bottom: 0;display: block;padding: 5px 0 0 12px;left: 0;top: 0;z-index: 5000;position: absolute;width: 100%;height: 100%;background: var(--color-ca-loading-bg);}
.ca--loading span {display: block;position: absolute;top: calc( 50% - 10px);left: calc( 50% - 80px);color: var(--color-ca-loading-text);font-weight: bold;display: flex;}
.ca--loading span::before {content: ' ';width: 32px;height: 32px;display: block;text-decoration: none;background-size: cover;transform: translateX(-15px) translateY(-5px);background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cpath style='fill:%232D50A7;' d='M244.364,372.364c-12.853,0-23.273,10.42-23.273,23.273v93.091c0,12.853,10.42,23.273,23.273,23.273 c12.853,0,23.273-10.42,23.273-23.273v-93.091C267.636,382.784,257.216,372.364,244.364,372.364z'/%3E%3Cpath style='fill:%2373A1FB;' d='M244.364,0c-12.853,0-23.273,10.42-23.273,23.273v93.091c0,12.853,10.42,23.273,23.273,23.273 c12.853,0,23.273-10.42,23.273-23.273V23.273C267.636,10.42,257.216,0,244.364,0z'/%3E%3Cpath style='fill:%23355EC9;' d='M359.557,338.281c-9.087-9.089-23.824-9.089-32.912,0c-9.089,9.087-9.089,23.824,0,32.912 l65.826,65.826c4.544,4.544,10.499,6.816,16.455,6.816c5.956,0,11.913-2.271,16.457-6.816c9.089-9.089,9.089-23.824,0-32.912 L359.557,338.281z'/%3E%3Cg%3E%3Cpath style='fill:%23C4D9FD;' d='M81.455,232.727H34.909c-12.853,0-23.273,10.42-23.273,23.273c0,12.853,10.42,23.273,23.273,23.273 h46.545c12.853,0,23.273-10.42,23.273-23.273C104.727,243.147,94.307,232.727,81.455,232.727z'/%3E%3Cpath style='fill:%23C4D9FD;' d='M96.256,74.982c-9.087-9.089-23.824-9.089-32.912,0s-9.089,23.825,0,32.912l65.826,65.825 c4.544,4.544,10.501,6.817,16.455,6.817c5.956,0,11.913-2.273,16.455-6.817c9.089-9.089,9.089-23.824,0-32.912L96.256,74.982z'/%3E%3C/g%3E%3Cpath style='fill:%233D6DEB;' d='M477.091,232.727H384c-12.853,0-23.273,10.42-23.273,23.273c0,12.853,10.42,23.273,23.273,23.273 h93.091c12.853,0,23.273-10.42,23.273-23.273C500.364,243.147,489.944,232.727,477.091,232.727z'/%3E%3Cpath style='fill:%235286FA;' d='M392.471,74.982l-65.826,65.825c-9.089,9.087-9.089,23.824,0,32.912 c4.544,4.544,10.501,6.817,16.455,6.817c5.955,0,11.913-2.273,16.457-6.817l65.826-65.825c9.089-9.087,9.089-23.824,0-32.912 C416.296,65.893,401.56,65.893,392.471,74.982z'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");}
.ca--loading.hidden {display:none;}

/* Dark theme icon overrides */
[data-theme="dark"] .ca--actions .ca--edit{background-image: url("data:image/svg+xml,%3Csvg width='512px' height='512px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' version='1.1' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23e0e0e0;%7D%0A%3C/style%3E%3Cg id='Layer_1'/%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st0' d='M43.5,482.5h108.54c0.54,0,1.07-0.03,1.6-0.08c0.39-0.04,0.78-0.11,1.17-0.17c0.13-0.02,0.26-0.03,0.39-0.06 c0.46-0.09,0.91-0.21,1.36-0.34c0.05-0.01,0.1-0.02,0.15-0.04c0.45-0.14,0.9-0.3,1.33-0.48c0.04-0.02,0.09-0.03,0.14-0.05 c0.42-0.17,0.82-0.37,1.21-0.57c0.07-0.03,0.14-0.06,0.2-0.1c0.37-0.2,0.72-0.41,1.07-0.64c0.09-0.06,0.19-0.11,0.28-0.17 c0.33-0.22,0.65-0.47,0.96-0.71c0.1-0.08,0.2-0.14,0.29-0.22c0.41-0.33,0.8-0.69,1.17-1.06l246.98-246.98 c0.02-0.02,0.04-0.04,0.07-0.06s0.04-0.04,0.06-0.07l58.92-58.92v0c5.81-5.81,9.01-13.53,9.01-21.75c0-8.21-3.2-15.94-9.01-21.74 l-83.7-83.69c-11.99-11.99-31.5-11.99-43.49,0l-58.96,58.96c-0.01,0.01-0.02,0.01-0.02,0.02s-0.01,0.02-0.02,0.02l-251.01,251 c-0.37,0.37-0.72,0.76-1.05,1.16c-0.09,0.1-0.16,0.22-0.24,0.32c-0.24,0.31-0.48,0.61-0.69,0.94c-0.07,0.1-0.12,0.2-0.18,0.3 c-0.22,0.34-0.43,0.69-0.63,1.05c-0.04,0.07-0.07,0.15-0.1-0.22c-0.2,0.39-0.4,0.79-0.57,1.2c-0.02,0.05-0.04,0.1-0.06,0.15 c-0.17,0.43-0.34,0.87-0.47,1.32c-0.02,0.05-0.03,0.11-0.04,0.16c-0.13,0.44-0.25,0.89-0.34,1.35c-0.03,0.13-0.04,0.27-0.06,0.4 c-0.07,0.38-0.13,0.76-0.17,1.15c-0.05,0.53-0.08,1.06-0.08,1.6V466.5C27.5,475.34,34.66,482.5,43.5,482.5z M59.5,450.5v-77.95 l235.03-235.02l81.93,81.93L145.41,450.5H59.5z M363.94,68.12l81.93,81.92l-46.79,46.79l-81.93-81.93L363.94,68.12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}

[data-theme="dark"] .ca--actions .ca--save{background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 280.028 280.028' style='enable-background:new 0 0 280.028 280.028;' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%2390a4ae;' d='M17.502,0h245.024c9.661,0,17.502,7.832,17.502,17.502v245.024c0,9.67-7.841,17.502-17.502,17.502 H17.502C7.841,280.027,0,272.195,0,262.526V17.502C0,7.841,7.841,0,17.502,0z'/%3E%3Cpath style='fill:%23CCD0D2;' d='M52.505,175.017h175.017c9.661,0,17.502,7.841,17.502,17.502v87.509H35.003v-87.509 C35.003,182.858,42.844,175.017,52.505,175.017z'/%3E%3Cpath style='fill:%23E4E7E7;' d='M52.505,157.515h175.017c9.661,0,17.502,7.841,17.502,17.502v26.253H35.003v-26.253 C35.003,165.356,42.844,157.515,52.505,157.515z'/%3E%3Cpath style='fill:%232B414D;' d='M245.024,0v105.01c0,9.67-7.841,17.502-17.502,17.502H52.505c-9.661,0-17.502-7.832-17.502-17.502V0 H245.024z'/%3E%3Cpath style='fill:%23CCD0D2;' d='M122.512,0v96.259c0,4.83,3.92,8.751,8.751,8.751h87.509c4.839,0,8.751-3.92,8.751-8.751V0H122.512z M210.021,78.758c0,4.83-3.912,8.751-8.751,8.751h-8.751c-4.839,0-8.751-3.92-8.751-8.751V26.253c0-4.83,3.912-8.751,8.751-8.751 h8.751c4.839,0,8.751,3.92,8.751,8.751V78.758z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");}

.ca--maintenance {display:block;color:var(--color-ca-maintenance-text);background:var(--color-ca-maintenance-bg);border: 1px solid var(--color-ca-maintenance-border);padding:15px;margin : 15px 0;text-align:center;}

@media screen and (max-width: 500px) {
    .ca--post{flex-direction: column;}
    .ca--message-info {margin-top:10px;}
}